lisang
/
d2-admin
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor: style

This commit is contained in:
FairyEver 2021-11-06 21:56:48 +08:00
parent 7d24b9cf37
commit cc5112ce27
17 changed files with 157 additions and 158 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
d2/components/d2/flex/index.jsx
View File

@ -35,25 +35,25 @@ export default defineComponent({
center: { type: Boolean },
tag: { type: String, default: 'div' }
},
setup (props, { slots }) {
setup (props) {
const center = computed(() => props.center ? 'center' : '')
const main = computed(() => unref(center) || props.main)
const cross = computed(() => unref(center) || props.cross)
const classnames = computed(() => makeClassnames(
classname,
{
'is-inline-flex': props.inlineFlex,
'is-block': props.block,
'is-inline': props.inline,
'is-inline-block': props.inlineBlock,
'is-wrap': props.wrap,
'is-wrap-r': props.wrapR,
[`is-dir-${props.dir}`]: props.dir,
[`is-main-${unref(main)}`]: unref(main),
[`is-cross-${unref(cross)}`]: unref(cross),
[`is-box-${props.box}`]: props.box,
[`is-content-${props.content}`]: props.content,
[`is-self-${props.self}`]: props.self
[`${classname}--inline-flex`]: props.inlineFlex,
[`${classname}--block`]: props.block,
[`${classname}--inline`]: props.inline,
[`${classname}--inline-block`]: props.inlineBlock,
[`${classname}--wrap`]: props.wrap,
[`${classname}--wrap-r`]: props.wrapR,
[`${classname}--dir-${props.dir}`]: props.dir,
[`${classname}--main-${unref(main)}`]: unref(main),
[`${classname}--cross-${unref(cross)}`]: unref(cross),
[`${classname}--box-${props.box}`]: props.box,
[`${classname}--content-${props.content}`]: props.content,
[`${classname}--self-${props.self}`]: props.self
}
))
const style = computed(() => pickBy({

0
d2/style/themes-highlight/atom-one-dark.css → d2/style/highlight/atom-one-dark.css
View File

0
d2/style/themes-highlight/atom-one-light.css → d2/style/highlight/atom-one-light.css
View File

0
d2/style/themes-highlight/dark.css → d2/style/highlight/dark.css
View File

0
d2/style/themes-highlight/default.css → d2/style/highlight/default.css
View File

51
d2/style/index.scss
View File

@ -2,53 +2,4 @@
@tailwind components;
@tailwind utilities;
// The minimal amount of CSS to replicate the GitHub Markdown style
@import 'github-markdown-css';
// Scrollbar theme
// Only some themes are built in by default
// If you need other theme but we don't provide them by default
// Please download and import them yourself
// [download] https://kingsora.github.io/OverlayScrollbars/#!themes
@import './themes-scrollbar/thin-dark.css';
// Code highlight theme
// Only some themes are built in by default
// If you need other theme but we don't provide them by default
// Please download and import them yourself
// [preview] https://highlightjs.org/static/demo/
// [download] https://github.com/highlightjs/highlight.js/tree/main/src/styles
@import './themes-highlight/atom-one-light.css';
// Resolve conflicts between GitHub markdown CSS and highlightjs
// The .p-0 class is set at markdownItOptions in the vite.config.js file
// Although .p-0 class is already included in tailwindcss
// The settings in tailwindcss are not used here to separate them from each other
.markdown-body {
pre.p-0 {
padding: 0px;
}
}
// Highlightjs base style
pre code.hljs {
display: block;
overflow-x: auto;
padding: 1em;
}
// Make the display consistent in the following two cases:
// <code class="hljs">Hello World</code>
// `Hello World`
code.hljs {
padding: 0.2em 0.4em;
}
// Main theme
@import './themes/classic/index.scss';
html, body, #app {
height: 100%;
width: 100%;
}
#app {
position: relative;
}
@import 'd2/style/themes/classic/index.scss';

0
d2/style/themes-scrollbar/minimal-dark.css → d2/style/scrollbar/minimal-dark.css
View File

0
d2/style/themes-scrollbar/minimal-light.css → d2/style/scrollbar/minimal-light.css
View File

0
d2/style/themes-scrollbar/thin-dark.css → d2/style/scrollbar/thin-dark.css
View File

0
d2/style/themes-scrollbar/thin-light.css → d2/style/scrollbar/thin-light.css
View File

93
d2/style/themes/classic/components/flex.scss
View File

@ -1,93 +0,0 @@
@include b(flex) {
display: flex;
&.is-inline-flex { display: inline-flex; }
&.is-block { display: block; }
&.is-inline { display: inline; }
&.is-inline-block { display: inline-block; }
&.is-wrap { flex-wrap: wrap; }
&.is-wrap-r { flex-wrap: wrap-reverse; }
&.is-dir-top { flex-direction: column; }
&.is-dir-bottom { flex-direction: column-reverse; box-pack: end; }
&.is-dir-left { flex-direction: row; }
&.is-dir-right { flex-direction: row-reverse; box-pack: end; }
&.is-main-left { justify-content: flex-start; }
&.is-main-right { justify-content: flex-end; }
&.is-main-justify { justify-content: space-between; }
&.is-main-center { justify-content: center; }
&.is-cross-top { align-items: flex-start; }
&.is-cross-bottom { align-items: flex-end; }
&.is-cross-center { align-items: center; }
&.is-cross-baseline { align-items: baseline; }
&.is-cross-stretch { align-items: stretch; }
&.is-self-auto { align-self: auto; }
&.is-self-top { align-self: flex-start; }
&.is-self-bottom { align-self: flex-end; }
&.is-self-center { align-self: center; }
&.is-self-baseline { align-self: baseline; }
&.is-self-stretch { align-self: stretch; }
&.is-content-start { align-content: flex-start; }
&.is-content-end { align-content: flex-end; }
&.is-content-center { align-content: center; }
&.is-content-between { align-content: space-between; }
&.is-content-around { align-content: space-around; }
&.is-content-stretch { align-content: stretch; }
&.is-box-mean > *,
&.is-box-first > *,
&.is-box-last > *,
&.is-box-justify > * {
// width: 0%;
height: auto;
flex-grow: 1;
flex-shrink: 1;
}
&.is-box-first > :first-child,
&.is-box-last > :last-child,
&.is-box-justify > :first-child,
&.is-box-justify > :last-child {
// width: auto;
flex-grow: 0;
flex-shrink: 0;
}
&.is-dir-top.is-box-mean > *,
&.is-dir-top.is-box-first > *,
&.is-dir-top.is-box-last > *,
&.is-dir-top.is-box-justify > *,
&.is-dir-bottom.is-box-mean > *,
&.is-dir-bottom.is-box-first > *,
&.is-dir-bottom.is-box-last > *,
&.is-dir-bottom.is-box-justify > * {
// width: auto;
height: 0;
flex-grow: 1;
flex-shrink: 1;
}
&.is-dir-top.is-box-first > :first-child,
&.is-dir-top.is-box-last > :last-child,
&.is-dir-top.is-box-justify > :first-child,
&.is-dir-top.is-box-justify > :last-child,
&.is-dir-bottom.is-box-first > :first-child,
&.is-dir-bottom.is-box-last > :last-child,
&.is-dir-bottom.is-box-justify > :first-child,
&.is-dir-bottom.is-box-justify > :last-child {
height: auto;
flex-grow: 0;
flex-shrink: 0;
}
@for $n from 0 through 10 {
.flex-box-#{$n} {
flex-grow: $n;
flex-shrink: $n;
}
}
}

16
d2/style/themes/classic/index.scss
View File

@ -1,5 +1,17 @@
@import './components/flex.scss';
@import './components/icon.scss';
@import './src/flex.scss';
@import './src/highlight.scss';
@import './src/icon.scss';
@import './src/markdown.scss';
@import './src/scrollbar.scss';
html, body, #app {
height: 100%;
width: 100%;
}
#app {
position: relative;
}
.d2-admin {
// When the menu exceeds the screen height

93
d2/style/themes/classic/src/flex.scss Normal file
View File

@ -0,0 +1,93 @@
@include b(flex) {
display: flex;
&.d2-flex--inline-flex { display: inline-flex; }
&.d2-flex--block { display: block; }
&.d2-flex--inline { display: inline; }
&.d2-flex--inline-block { display: inline-block; }
&.d2-flex--wrap { flex-wrap: wrap; }
&.d2-flex--wrap-r { flex-wrap: wrap-reverse; }
&.d2-flex--dir-top { flex-direction: column; }
&.d2-flex--dir-bottom { flex-direction: column-reverse; box-pack: end; }
&.d2-flex--dir-left { flex-direction: row; }
&.d2-flex--dir-right { flex-direction: row-reverse; box-pack: end; }
&.d2-flex--main-left { justify-content: flex-start; }
&.d2-flex--main-right { justify-content: flex-end; }
&.d2-flex--main-justify { justify-content: space-between; }
&.d2-flex--main-center { justify-content: center; }
&.d2-flex--cross-top { align-items: flex-start; }
&.d2-flex--cross-bottom { align-items: flex-end; }
&.d2-flex--cross-center { align-items: center; }
&.d2-flex--cross-baseline { align-items: baseline; }
&.d2-flex--cross-stretch { align-items: stretch; }
&.d2-flex--self-auto { align-self: auto; }
&.d2-flex--self-top { align-self: flex-start; }
&.d2-flex--self-bottom { align-self: flex-end; }
&.d2-flex--self-center { align-self: center; }
&.d2-flex--self-baseline { align-self: baseline; }
&.d2-flex--self-stretch { align-self: stretch; }
&.d2-flex--content-start { align-content: flex-start; }
&.d2-flex--content-end { align-content: flex-end; }
&.d2-flex--content-center { align-content: center; }
&.d2-flex--content-between { align-content: space-between; }
&.d2-flex--content-around { align-content: space-around; }
&.d2-flex--content-stretch { align-content: stretch; }
&.d2-flex--box-mean > *,
&.d2-flex--box-first > *,
&.d2-flex--box-last > *,
&.d2-flex--box-justify > * {
// width: 0%;
height: auto;
flex-grow: 1;
flex-shrink: 1;
}
&.d2-flex--box-first > :first-child,
&.d2-flex--box-last > :last-child,
&.d2-flex--box-justify > :first-child,
&.d2-flex--box-justify > :last-child {
// width: auto;
flex-grow: 0;
flex-shrink: 0;
}
&.d2-flex--dir-top.d2-flex--box-mean > *,
&.d2-flex--dir-top.d2-flex--box-first > *,
&.d2-flex--dir-top.d2-flex--box-last > *,
&.d2-flex--dir-top.d2-flex--box-justify > *,
&.d2-flex--dir-bottom.d2-flex--box-mean > *,
&.d2-flex--dir-bottom.d2-flex--box-first > *,
&.d2-flex--dir-bottom.d2-flex--box-last > *,
&.d2-flex--dir-bottom.d2-flex--box-justify > * {
// width: auto;
height: 0;
flex-grow: 1;
flex-shrink: 1;
}
&.d2-flex--dir-top.d2-flex--box-first > :first-child,
&.d2-flex--dir-top.d2-flex--box-last > :last-child,
&.d2-flex--dir-top.d2-flex--box-justify > :first-child,
&.d2-flex--dir-top.d2-flex--box-justify > :last-child,
&.d2-flex--dir-bottom.d2-flex--box-first > :first-child,
&.d2-flex--dir-bottom.d2-flex--box-last > :last-child,
&.d2-flex--dir-bottom.d2-flex--box-justify > :first-child,
&.d2-flex--dir-bottom.d2-flex--box-justify > :last-child {
height: auto;
flex-grow: 0;
flex-shrink: 0;
}
@for $n from 0 through 10 {
.flex-box-#{$n} {
flex-grow: $n;
flex-shrink: $n;
}
}
}

28
d2/style/themes/classic/src/highlight.scss Normal file
View File

@ -0,0 +1,28 @@
// Code highlight theme
// Only some themes are built in by default
// If you need other theme but we don't provide them by default
// Please download and import them yourself
// [preview] https://highlightjs.org/static/demo/
// [download] https://github.com/highlightjs/highlight.js/tree/main/src/styles
@import 'd2/style/highlight/atom-one-light.css';
// Resolve conflicts between GitHub markdown CSS and highlightjs
// The .p-0 class is set at markdownItOptions in the vite.config.js file
// Although .p-0 class is already included in tailwindcss
// The settings in tailwindcss are not used here to separate them from each other
.markdown-body {
pre.p-0 {
padding: 0px;
}
}
// Highlightjs base style
pre code.hljs {
display: block;
overflow-x: auto;
padding: 1em;
}
// Make the display consistent in the following two cases:
// <code class="hljs">Hello World</code>
// `Hello World`
code.hljs {
padding: 0.2em 0.4em;
}

0
d2/style/themes/classic/components/icon.scss → d2/style/themes/classic/src/icon.scss
View File

2
d2/style/themes/classic/src/markdown.scss Normal file
View File

@ -0,0 +1,2 @@
// The minimal amount of CSS to replicate the GitHub Markdown style
@import 'github-markdown-css';

6
d2/style/themes/classic/src/scrollbar.scss Normal file
View File

@ -0,0 +1,6 @@
// Scrollbar theme
// Only some themes are built in by default
// If you need other theme but we don't provide them by default
// Please download and import them yourself
// [download] https://kingsora.github.io/OverlayScrollbars/#!themes
@import 'd2/style/scrollbar/thin-dark.css';