feat: style

This commit is contained in:
FairyEver 2021-11-12 11:06:58 +08:00
parent 877766c85f
commit e842e4c8fe
5 changed files with 361 additions and 345 deletions

View File

@ -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"
}

View File

@ -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>

View File

@ -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;

View File

@ -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