Update dashboard side to tailwindcss
This commit is contained in:
parent
577500af92
commit
3bd485e7e4
11 changed files with 183 additions and 172 deletions
|
@ -13,6 +13,8 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
|
@import "../style/components.pcss";
|
||||||
|
|
||||||
:root {
|
:root {
|
||||||
--animation-time: 400ms;
|
--animation-time: 400ms;
|
||||||
--target-height: auto;
|
--target-height: auto;
|
||||||
|
@ -61,6 +63,11 @@
|
||||||
.closing {
|
.closing {
|
||||||
animation: close var(--animation-time) ease-in-out;
|
animation: close var(--animation-time) ease-in-out;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.inline-code,
|
||||||
|
code:not([class]) {
|
||||||
|
@apply bg-gray-900;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<script type="ts">
|
<script type="ts">
|
||||||
|
|
|
@ -3,32 +3,22 @@
|
||||||
Loading...
|
Loading...
|
||||||
</div>
|
</div>
|
||||||
<div v-else>
|
<div v-else>
|
||||||
<h2 class="title is-1">Config for {{ guild.name }}</h2>
|
<div v-if="saving" class="bg-gray-800 py-2 px-3 rounded shadow-md mb-4">Saving...</div>
|
||||||
<AceEditor v-model="editableConfig" @init="editorInit" lang="yaml" theme="twilight" :width="editorWidth" :height="editorHeight" ref="aceEditor"></AceEditor>
|
<div v-if="saved" class="bg-gray-800 py-2 px-3 rounded shadow-md mb-4">Saved!</div>
|
||||||
|
<div v-if="errors.length" class="bg-gray-800 py-2 px-3 rounded shadow-md mb-4">
|
||||||
<div class="editor-footer">
|
<div class="font-semibold">Errors:</div>
|
||||||
<div class="actions">
|
<div v-for="error in errors">{{ error }}</div>
|
||||||
<button class="button" v-on:click="save" :disabled="saving">Save</button>
|
|
||||||
</div>
|
|
||||||
<div class="status">
|
|
||||||
<div class="status-message" v-if="saving">Saving...</div>
|
|
||||||
<div class="status-message error" v-if="errors.length">
|
|
||||||
<div v-for="error in errors">{{ error }}</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="flex items-center">
|
||||||
|
<h1 class="flex-auto">Config for {{ guild.name }}</h1>
|
||||||
|
<button class="flex-none bg-green-800 px-5 py-2 rounded hover:bg-green-700" v-on:click="save" :disabled="saving">Save</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<AceEditor class="rounded shadow-lg mt-4" v-model="editableConfig" @init="editorInit" lang="yaml" theme="tomorrow_night" :width="editorWidth" :height="editorHeight" ref="aceEditor"></AceEditor>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.ace_editor {
|
|
||||||
box-shadow: 0 2px 16px -4px #0000009e;
|
|
||||||
border-radius: 8px;
|
|
||||||
border: 1px solid #181818;
|
|
||||||
margin: 16px 0;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import {mapState} from "vuex";
|
import {mapState} from "vuex";
|
||||||
import {ApiError} from "../../api";
|
import {ApiError} from "../../api";
|
||||||
|
@ -54,10 +44,12 @@
|
||||||
return {
|
return {
|
||||||
loading: true,
|
loading: true,
|
||||||
saving: false,
|
saving: false,
|
||||||
|
saved: false,
|
||||||
editableConfig: null,
|
editableConfig: null,
|
||||||
errors: [],
|
errors: [],
|
||||||
editorWidth: 900,
|
editorWidth: 900,
|
||||||
editorHeight: 600
|
editorHeight: 600,
|
||||||
|
savedTimeout: null
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
|
@ -74,7 +66,7 @@
|
||||||
editorInit() {
|
editorInit() {
|
||||||
require("brace/ext/language_tools");
|
require("brace/ext/language_tools");
|
||||||
require("brace/mode/yaml");
|
require("brace/mode/yaml");
|
||||||
require("brace/theme/twilight");
|
require("brace/theme/tomorrow_night");
|
||||||
|
|
||||||
this.$refs.aceEditor.editor.setOptions({
|
this.$refs.aceEditor.editor.setOptions({
|
||||||
useSoftTabs: true,
|
useSoftTabs: true,
|
||||||
|
@ -87,7 +79,7 @@
|
||||||
const editorElem = this.$refs.aceEditor.$el;
|
const editorElem = this.$refs.aceEditor.$el;
|
||||||
const newWidth = editorElem.parentNode.clientWidth;
|
const newWidth = editorElem.parentNode.clientWidth;
|
||||||
const rect = editorElem.getBoundingClientRect();
|
const rect = editorElem.getBoundingClientRect();
|
||||||
const newHeight = window.innerHeight - rect.top - 100;
|
const newHeight = window.innerHeight - rect.top - 48;
|
||||||
this.resizeEditor(newWidth, newHeight);
|
this.resizeEditor(newWidth, newHeight);
|
||||||
},
|
},
|
||||||
resizeEditor(newWidth, newHeight) {
|
resizeEditor(newWidth, newHeight) {
|
||||||
|
@ -99,14 +91,23 @@
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
async save() {
|
async save() {
|
||||||
|
this.saved = false;
|
||||||
this.saving = true;
|
this.saving = true;
|
||||||
this.errors = [];
|
this.errors = [];
|
||||||
|
|
||||||
|
if (this.savedTimeout) {
|
||||||
|
clearTimeout(this.savedTimeout);
|
||||||
|
}
|
||||||
|
|
||||||
try {
|
try {
|
||||||
await this.$store.dispatch("guilds/saveConfig", {
|
await this.$store.dispatch("guilds/saveConfig", {
|
||||||
guildId: this.$route.params.guildId,
|
guildId: this.$route.params.guildId,
|
||||||
config: this.editableConfig,
|
config: this.editableConfig,
|
||||||
});
|
});
|
||||||
|
|
||||||
|
this.saving = false;
|
||||||
|
this.saved = true;
|
||||||
|
this.savedTimeout = setTimeout(() => this.saved = false, 3000);
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
if (e instanceof ApiError && (e.status === 400 || e.status === 422)) {
|
if (e instanceof ApiError && (e.status === 400 || e.status === 422)) {
|
||||||
this.errors = e.body.errors || ['Error while saving config'];
|
this.errors = e.body.errors || ['Error while saving config'];
|
||||||
|
@ -116,8 +117,6 @@
|
||||||
|
|
||||||
throw e;
|
throw e;
|
||||||
}
|
}
|
||||||
|
|
||||||
this.$router.push("/dashboard");
|
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|
|
@ -3,21 +3,27 @@
|
||||||
Loading...
|
Loading...
|
||||||
</div>
|
</div>
|
||||||
<div v-else>
|
<div v-else>
|
||||||
<h2 class="title is-2">Guilds</h2>
|
<h1>Guilds</h1>
|
||||||
<table class="table">
|
<ul class="list-none flex flex-wrap -m-4 pt-4">
|
||||||
<tr v-for="guild in guilds">
|
<li v-for="guild in guilds" class="flex-none m-4 w-full md:w-1/2 lg:w-1/3 xl:w-1/4">
|
||||||
<td>
|
<div class="flex items-center">
|
||||||
<img v-if="guild.icon" class="guild-logo" :src="guild.icon" :aria-label="'Logo for guild ' + guild.name">
|
<div class="flex-none">
|
||||||
</td>
|
<img v-if="guild.icon" class="guild-logo" :src="guild.icon" :alt="'Logo for guild ' + guild.name">
|
||||||
<td>
|
</div>
|
||||||
<div class="guild-name">{{ guild.name }}</div>
|
<div class="flex-auto ml-3">
|
||||||
<div class="guild-id">{{ guild.id }}</div>
|
<div>
|
||||||
</td>
|
<span class="font-semibold">{{ guild.name }}</span>
|
||||||
<td>
|
<span class="text-gray-600 text-sm">({{ guild.id }})</span>
|
||||||
<router-link class="button" :to="'/dashboard/guilds/' + guild.id + '/config'">Config</router-link>
|
</div>
|
||||||
</td>
|
<div class="pt-1">
|
||||||
</tr>
|
<span class="inline-block bg-gray-700 rounded px-1 opacity-50 select-none">Info</span>
|
||||||
</table>
|
<router-link class="inline-block bg-gray-700 rounded px-1 hover:bg-gray-800" :to="'/dashboard/guilds/' + guild.id + '/config'">Config</router-link>
|
||||||
|
<span class="inline-block bg-gray-700 rounded px-1 opacity-50 select-none">Access</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
|
@ -1,46 +1,44 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="dashboard dashboard-cloak">
|
<div class="dashboard container mx-auto px-4 py-2">
|
||||||
<nav class="navbar" role="navigation" aria-label="main navigation">
|
<nav class="flex items-stretch pl-4 pr-2 py-1 border border-gray-700 rounded bg-gray-800 shadow-xl mb-8">
|
||||||
<div class="container">
|
<div class="flex-initial flex items-center">
|
||||||
<div class="navbar-brand">
|
<img class="flex-auto w-10 mr-5" src="../../img/logo.png" alt="" aria-hidden="true">
|
||||||
<div class="navbar-item">
|
|
||||||
<img class="dashboard-logo" src="../../img/logo.png" alt="" aria-hidden="true">
|
|
||||||
<h1 class="dashboard-title">Zeppelin Dashboard</h1>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="navbar-menu is-active">
|
<router-link to="/dashboard">
|
||||||
<div class="navbar-start">
|
<h1 class="flex-auto font-semibold">Zeppelin Dashboard</h1>
|
||||||
<router-link to="/dashboard" class="navbar-item">Guilds</router-link>
|
</router-link>
|
||||||
<a href="/docs" class="navbar-item">Documentation</a>
|
|
||||||
</div>
|
<ul class="dashboard-nav list-none flex ml-8">
|
||||||
<div class="navbar-end">
|
<router-link class="flex-auto mr-4" to="/dashboard">Guilds</router-link>
|
||||||
<a href="javascript:void(0)" class="navbar-item" v-on:click="logout()">Log out</a>
|
<a href="javascript:void(0)" class="navbar-item" v-on:click="logout()">Log out</a>
|
||||||
</div>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="flex-1 flex items-center justify-end">
|
||||||
|
<router-link
|
||||||
|
to="/docs"
|
||||||
|
role="menuitem"
|
||||||
|
class="py-1 px-2 rounded hover:bg-gray-700">
|
||||||
|
Go to documentation
|
||||||
|
</router-link>
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
<div class="section">
|
<div class="main-content">
|
||||||
<div class="container">
|
<router-view></router-view>
|
||||||
<router-view></router-view>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.dashboard-cloak {
|
.dashboard-nav a {
|
||||||
/* Replaced by "visible" in dashboard.scss */
|
&:hover {
|
||||||
visibility: hidden;
|
@apply underline;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.dashboard-logo {
|
.dashboard-nav .router-link-exact-active {
|
||||||
margin-right: 12px;
|
@apply underline;
|
||||||
}
|
|
||||||
|
|
||||||
.dashboard-title {
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
|
@ -51,7 +49,7 @@
|
||||||
methods: {
|
methods: {
|
||||||
async logout() {
|
async logout() {
|
||||||
await this.$store.dispatch("auth/logout");
|
await this.$store.dispatch("auth/logout");
|
||||||
this.$router.push('/');
|
window.location.pathname = '/';
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|
|
@ -1,46 +1,47 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="docs">
|
<div class="docs container mx-auto px-4 py-2">
|
||||||
<div class="container mx-auto px-4 py-2">
|
<!-- Top bar -->
|
||||||
<!-- Top bar -->
|
<nav class="flex items-stretch pl-4 pr-2 py-1 border border-gray-700 rounded bg-gray-800 shadow-xl">
|
||||||
<nav class="flex items-stretch pl-4 pr-2 py-1 border border-gray-700 rounded bg-gray-800 shadow-xl">
|
<div class="flex-initial flex items-center">
|
||||||
<div class="flex-initial flex items-center">
|
<img class="flex-auto w-10 mr-5" src="../../img/logo.png" alt="" aria-hidden="true">
|
||||||
<img class="flex-auto w-10 mr-5" src="../../img/logo.png" alt="" aria-hidden="true">
|
|
||||||
<h1 class="flex-auto">Zeppelin Documentation</h1>
|
<router-link to="/docs">
|
||||||
</div>
|
<h1 class="flex-auto font-semibold">Zeppelin Documentation</h1>
|
||||||
<div class="flex-1 flex items-center justify-end">
|
</router-link>
|
||||||
<router-link
|
</div>
|
||||||
to="/dashboard"
|
<div class="flex-1 flex items-center justify-end">
|
||||||
role="menuitem"
|
<router-link
|
||||||
class="py-1 px-2 rounded hover:bg-gray-700">
|
to="/dashboard"
|
||||||
Go to dashboard
|
role="menuitem"
|
||||||
</router-link>
|
class="py-1 px-2 rounded hover:bg-gray-700">
|
||||||
|
Go to dashboard
|
||||||
|
</router-link>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<!-- WIP bar -->
|
||||||
|
<div class="mt-6 px-3 py-2 rounded bg-gray-800 shadow-md">
|
||||||
|
<i class="mdi mdi-alert mr-1" title="Note"></i>
|
||||||
|
This documentation is a work in progress.
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Content wrapper -->
|
||||||
|
<div class="flex items-start mt-8">
|
||||||
|
<!-- Sidebar -->
|
||||||
|
<nav class="docs-sidebar flex-none px-4 pt-2 pb-3 mr-8 border border-gray-700 rounded bg-gray-800 shadow-md">
|
||||||
|
<div role="none" v-for="(group, index) in menu">
|
||||||
|
<h1 class="font-bold" :aria-owns="'menu-group-' + index" :class="{'mt-4': index !== 0}">{{ group.label }}</h1>
|
||||||
|
<ul v-bind:id="'menu-group-' + index" role="group" class="list-none pl-2">
|
||||||
|
<li role="none" v-for="item in group.items">
|
||||||
|
<router-link role="menuitem" :to="item.to" class="text-gray-300 hover:text-gray-500">{{ item.label }}</router-link>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
<!-- WIP bar -->
|
<!-- Content -->
|
||||||
<div class="mt-6 px-3 py-2 rounded bg-gray-800 shadow-md">
|
<div class="docs-content main-content flex-auto overflow-x-hidden">
|
||||||
<i class="mdi mdi-alert mr-1" title="Note"></i>
|
<router-view :key="$route.fullPath"></router-view>
|
||||||
This documentation is a work in progress.
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Content wrapper -->
|
|
||||||
<div class="flex items-start mt-8">
|
|
||||||
<!-- Sidebar -->
|
|
||||||
<nav class="docs-sidebar flex-none px-4 pt-2 pb-3 mr-8 border border-gray-700 rounded bg-gray-800 shadow-md">
|
|
||||||
<div role="none" v-for="(group, index) in menu">
|
|
||||||
<h1 class="font-bold" :aria-owns="'menu-group-' + index" :class="{'mt-4': index !== 0}">{{ group.label }}</h1>
|
|
||||||
<ul v-bind:id="'menu-group-' + index" role="group" class="list-none pl-2">
|
|
||||||
<li role="none" v-for="item in group.items">
|
|
||||||
<router-link role="menuitem" :to="item.to" class="text-gray-300 hover:text-gray-500">{{ item.label }}</router-link>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
|
|
||||||
<!-- Content -->
|
|
||||||
<div class="docs-content flex-auto overflow-x-hidden">
|
|
||||||
<router-view :key="$route.fullPath"></router-view>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
<template>
|
<template>
|
||||||
<div ref="rendered"></div>
|
<div class="markdown-block" ref="rendered"></div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
|
@ -46,7 +46,7 @@
|
||||||
<code class="inline-code" style="margin-right: 4px" v-for="alias in command.config.aliases">!{{ alias }}</code>
|
<code class="inline-code" style="margin-right: 4px" v-for="alias in command.config.aliases">!{{ alias }}</code>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<MarkdownBlock v-if="command.config.info && command.config.info.description" :content="command.config.info.description" class="content mb-4"></MarkdownBlock>
|
<MarkdownBlock v-if="command.config.extra.info && command.config.extra.info.description" :content="command.config.extra.info.description" class="content"></MarkdownBlock>
|
||||||
|
|
||||||
<Expandable class="mt-4">
|
<Expandable class="mt-4">
|
||||||
<template v-slot:title>Additional information</template>
|
<template v-slot:title>Additional information</template>
|
||||||
|
@ -54,7 +54,7 @@
|
||||||
Signatures:
|
Signatures:
|
||||||
<ul>
|
<ul>
|
||||||
<li>
|
<li>
|
||||||
<code>
|
<code class="inline-code bg-gray-900">
|
||||||
!{{ command.trigger }}
|
!{{ command.trigger }}
|
||||||
<span v-for="param in command.parameters">{{ renderParameter(param) }} </span>
|
<span v-for="param in command.parameters">{{ renderParameter(param) }} </span>
|
||||||
</code>
|
</code>
|
||||||
|
@ -77,7 +77,7 @@
|
||||||
|
|
||||||
<div class="mt-2" v-if="command.config.options && command.config.options.length">
|
<div class="mt-2" v-if="command.config.options && command.config.options.length">
|
||||||
Options:
|
Options:
|
||||||
<ul class="z-list z-ul">
|
<ul>
|
||||||
<li v-for="opt in command.config.options">
|
<li v-for="opt in command.config.options">
|
||||||
<code>{{ renderOption(opt) }}</code>
|
<code>{{ renderOption(opt) }}</code>
|
||||||
<router-link :to="'/docs/reference/argument-types#' + (opt.type || 'string')">{{ opt.type || 'string' }}</router-link>
|
<router-link :to="'/docs/reference/argument-types#' + (opt.type || 'string')">{{ opt.type || 'string' }}</router-link>
|
||||||
|
|
|
@ -5,6 +5,7 @@
|
||||||
@import "~vue-material-design-icons/styles.css";
|
@import "~vue-material-design-icons/styles.css";
|
||||||
|
|
||||||
@import "components.pcss";
|
@import "components.pcss";
|
||||||
|
@import "content.pcss";
|
||||||
|
|
||||||
@import "docs.pcss";
|
@import "docs.pcss";
|
||||||
|
|
||||||
|
|
|
@ -1,3 +1,12 @@
|
||||||
|
.link {
|
||||||
|
@apply text-blue-400;
|
||||||
|
@apply underline;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
@apply text-blue-200;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.inline-code {
|
.inline-code {
|
||||||
@apply inline-block;
|
@apply inline-block;
|
||||||
@apply bg-gray-800;
|
@apply bg-gray-800;
|
||||||
|
|
45
dashboard/src/style/content.pcss
Normal file
45
dashboard/src/style/content.pcss
Normal file
|
@ -0,0 +1,45 @@
|
||||||
|
.main-content {
|
||||||
|
& h1 {
|
||||||
|
@apply text-5xl;
|
||||||
|
@apply font-semibold;
|
||||||
|
@apply leading-none;
|
||||||
|
@apply mb-4;
|
||||||
|
}
|
||||||
|
|
||||||
|
& h2 {
|
||||||
|
@apply text-2xl;
|
||||||
|
@apply font-semibold;
|
||||||
|
@apply mt-2;
|
||||||
|
@apply mb-1;
|
||||||
|
}
|
||||||
|
|
||||||
|
& h3 {
|
||||||
|
@apply font-semibold;
|
||||||
|
@apply mb-1;
|
||||||
|
}
|
||||||
|
|
||||||
|
& p {
|
||||||
|
@apply mb-4;
|
||||||
|
}
|
||||||
|
|
||||||
|
& a:not([class]) {
|
||||||
|
@apply link;
|
||||||
|
}
|
||||||
|
|
||||||
|
& ul:not([class]) {
|
||||||
|
@apply list-disc;
|
||||||
|
@apply mb-4;
|
||||||
|
|
||||||
|
& li {
|
||||||
|
@apply ml-6;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
& code:not([class]) {
|
||||||
|
@apply inline-code;
|
||||||
|
}
|
||||||
|
|
||||||
|
& .expandable {
|
||||||
|
max-width: 600px;
|
||||||
|
}
|
||||||
|
}
|
|
@ -3,58 +3,3 @@
|
||||||
@apply underline;
|
@apply underline;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.docs-content {
|
|
||||||
& h1 {
|
|
||||||
@apply text-5xl;
|
|
||||||
@apply font-semibold;
|
|
||||||
@apply leading-none;
|
|
||||||
@apply pb-4;
|
|
||||||
}
|
|
||||||
|
|
||||||
& h2 {
|
|
||||||
@apply text-2xl;
|
|
||||||
@apply font-semibold;
|
|
||||||
@apply pt-2;
|
|
||||||
@apply pb-1;
|
|
||||||
}
|
|
||||||
|
|
||||||
& h3 {
|
|
||||||
@apply font-semibold;
|
|
||||||
@apply pb-1;
|
|
||||||
}
|
|
||||||
|
|
||||||
& p {
|
|
||||||
@apply pb-4;
|
|
||||||
|
|
||||||
& code {
|
|
||||||
@apply inline-code;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
& a:not([class]) {
|
|
||||||
@apply text-blue-400;
|
|
||||||
@apply underline;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
@apply text-blue-200;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
& ul:not([class]) {
|
|
||||||
@apply list-disc;
|
|
||||||
@apply mb-4;
|
|
||||||
|
|
||||||
& li {
|
|
||||||
@apply ml-6;
|
|
||||||
}
|
|
||||||
|
|
||||||
& code {
|
|
||||||
@apply inline-code;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
& .expandable {
|
|
||||||
max-width: 600px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
Loading…
Add table
Reference in a new issue