feat: style
This commit is contained in:
parent
877766c85f
commit
e842e4c8fe
|
|
@ -6,5 +6,6 @@
|
|||
"scss": "\\B@apply\\s+([_a-zA-Z0-9\\s\\-\\:\\/]+);",
|
||||
"vue": "\\B@apply\\s+([_a-zA-Z0-9\\s\\-\\:\\/]+);",
|
||||
"javascript": "(?:\\bclassName\\s*=\\s*[\\\"\\']([_a-zA-Z0-9\\s\\-\\:\\/]+)[\\\"\\'])|(?:\\btw\\s*`([_a-zA-Z0-9\\s\\-\\:\\/]*)`)",
|
||||
}
|
||||
},
|
||||
"scss.lint.emptyRules": "ignore"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
<template>
|
||||
<div :class="`${classname}__body`" :style="bodyStyle">
|
||||
<div class="layout__body" :style="bodyStyle">
|
||||
<d2-scroll class="body__scroll">
|
||||
<router-view/>
|
||||
</d2-scroll>
|
||||
</div>
|
||||
<d2-flex :class="`${classname}__header`" :style="headerStyle" dir="left" box="justify">
|
||||
<d2-flex class="layout__header" :style="headerStyle" dir="left" box="justify">
|
||||
<d2-flex class="header__column">
|
||||
<d2-flex class="header__button header__button--icon" tag="button" center>
|
||||
<d2-icon name="icon-park-outline:menu-unfold-one"/>
|
||||
|
|
@ -35,7 +35,7 @@
|
|||
</d2-flex>
|
||||
</d2-flex>
|
||||
</d2-flex>
|
||||
<d2-flex :class="`${classname}__aside`" :style="asideStyle" dir="top" box="justify">
|
||||
<d2-flex class="layout__aside" :style="asideStyle" dir="top" box="justify">
|
||||
<d2-flex class="aside__header" center>
|
||||
Hello World
|
||||
</d2-flex>
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -6,17 +6,18 @@ html, body, #app {
|
|||
@include inLayoutHeaderAside {
|
||||
#app {
|
||||
position: relative;
|
||||
background-color: --var('background-color');
|
||||
background-color: --var('bg-color');
|
||||
}
|
||||
|
||||
.#{$classname}__body {
|
||||
.layout__body {
|
||||
position: absolute;
|
||||
background-color: --var('bg-color-lighten-max');
|
||||
>.body__scroll {
|
||||
@apply w-full h-full;
|
||||
}
|
||||
}
|
||||
|
||||
.#{$classname}__header {
|
||||
.layout__header {
|
||||
@apply box-content absolute top-0 right-0 cursor-pointer select-none;
|
||||
height: --var('header-height');
|
||||
>.header__column {
|
||||
|
|
@ -40,7 +41,7 @@ html, body, #app {
|
|||
}
|
||||
}
|
||||
|
||||
.#{$classname}__aside {
|
||||
.layout__aside {
|
||||
@apply box-content absolute top-0 bottom-0 left-0 cursor-pointer select-none;
|
||||
>.aside__header {
|
||||
@apply box-content;
|
||||
|
|
|
|||
|
|
@ -16,13 +16,13 @@ $classname: '#{$namespace}-layout-header-aside';
|
|||
|
||||
:root {
|
||||
// background
|
||||
#{--key('background-color')}: #ECF1F6;
|
||||
#{--key('background-color-lighten-1')}: #F6F8FB;
|
||||
#{--key('background-color-lighten-2')}: #FCFCFC;
|
||||
#{--key('bg-color')}: #ECF1F6;
|
||||
#{--key('bg-color-lighten-1')}: #F6F8FB;
|
||||
#{--key('bg-color-lighten-2')}: #FCFCFC;
|
||||
#{--key('bg-color-lighten-max')}: #FFFFFF;
|
||||
// text
|
||||
#{--key('text-color')}: indigo;
|
||||
#{--key('text-color-darken-1')}: red;
|
||||
#{--key('text-color-darken-2')}: green;
|
||||
#{--key('text-color')}: #606266;
|
||||
#{--key('text-color-darken')}: #2F74FF;
|
||||
// border
|
||||
#{--key('border-color')}: #CFD7E5;
|
||||
// size
|
||||
|
|
|
|||
Loading…
Reference in New Issue