84 lines
1.4 KiB
SCSS
84 lines
1.4 KiB
SCSS
// 主题色
|
|
$primary-color: #409EFF;
|
|
$success-color: #67C23A;
|
|
$warning-color: #E6A23C;
|
|
$danger-color: #F56C6C;
|
|
$info-color: #909399;
|
|
|
|
// 文字颜色
|
|
$text-primary: #303133;
|
|
// 次级文字颜色
|
|
$text-color-secondary: #909399;
|
|
|
|
// 边框颜色
|
|
$border-color-base: #DCDFE6;
|
|
$border-color-light: #E4E7ED;
|
|
$border-color-lighter: #EBEEF5;
|
|
$border-color-extra-light: #F2F6FC;
|
|
|
|
// 背景颜色
|
|
$background-color-base: #eee;
|
|
$background-color-main: #4D6DE4;
|
|
|
|
// 边框圆角
|
|
$border-radius-base: 4px;
|
|
// 间距
|
|
$spacing-base: 8px;
|
|
|
|
// 尺寸
|
|
$padding-base: 18px;
|
|
$margin-base: 8px;
|
|
|
|
// 阴影
|
|
$box-shadow-base: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
|
|
|
|
// 布局
|
|
$header-height: 60px;
|
|
$sidebar-width: 200px;
|
|
$sidebar-collapse-width: 64px;
|
|
|
|
@mixin space{
|
|
margin: $spacing-base;
|
|
}
|
|
// 圆角混合器
|
|
@mixin border-radius {
|
|
border-radius: $border-radius-base;
|
|
}
|
|
@mixin center-wrapper{
|
|
max-width: 1920px;
|
|
min-width: 1280px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
// 内间距混合器
|
|
@mixin padding {
|
|
padding: $padding-base;
|
|
}
|
|
|
|
// 外边距混合器
|
|
@mixin margin{
|
|
margin: $margin-base;
|
|
}
|
|
|
|
|
|
// 阴影混合器
|
|
@mixin box-shadow {
|
|
box-shadow: $box-shadow-base;
|
|
}
|
|
|
|
// 背景颜色混合器
|
|
@mixin background-color {
|
|
background-color: $background-color-base;
|
|
}
|
|
|
|
// 间距混合器
|
|
@mixin spacing{
|
|
margin: $spacing-base;
|
|
padding: $spacing-base;
|
|
}
|
|
@mixin main-background {
|
|
background-color: $background-color-main;
|
|
}
|
|
|
|
|