web/src/assets/scss/base.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;
}