主题颜色
This commit is contained in:
刘玉霞
parent
cfb1315b3c
commit
42522ee15b
@ -1,14 +1,40 @@
|
||||
@use 'sass:math';
|
||||
@use 'sass:map';
|
||||
|
||||
@mixin set-css-var-value($name, $value) {
|
||||
#{joinVarName($name)}: #{$value};
|
||||
}
|
||||
|
||||
@function joinVarName($list) {
|
||||
$name: '--ba';
|
||||
|
||||
@each $item in $list {
|
||||
@if $item != '' {
|
||||
$name: $name + '-' + $item;
|
||||
@if $item !='' {
|
||||
$name: '#{$name}-#{$item}';
|
||||
}
|
||||
}
|
||||
|
||||
@return $name;
|
||||
}
|
||||
|
||||
@mixin set-css-var-value2($name, $value) {
|
||||
@if $value=='' {}
|
||||
|
||||
@else {
|
||||
#{joinVarName2($name)}: #{$value};
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@function joinVarName2($list) {
|
||||
$name: '--el';
|
||||
|
||||
@each $item in $list {
|
||||
@if $item !='' {
|
||||
$name: #{$name}+'-'+#{$item};
|
||||
}
|
||||
}
|
||||
|
||||
@return $name;
|
||||
}
|
||||
|
||||
@ -20,11 +46,27 @@
|
||||
* 通过映射设置所有的CSS变量
|
||||
*/
|
||||
@mixin set-component-css-var($name, $variables) {
|
||||
@each $attribute, $value in $variables {
|
||||
@if $attribute == 'default' {
|
||||
|
||||
@each $attribute,
|
||||
$value in $variables {
|
||||
@if $attribute =='default' {
|
||||
#{getCssVarName($name)}: #{$value};
|
||||
} @else {
|
||||
}
|
||||
|
||||
@else {
|
||||
#{getCssVarName($name, $attribute)}: #{$value};
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin set-css-color-type($colors, $type) {
|
||||
@include set-css-var-value2(('color', $type), map.get($colors, $type, 'base'));
|
||||
|
||||
@each $i in (3, 5, 7, 8, 9) {
|
||||
@include set-css-var-value2(('color', $type, 'light', $i),
|
||||
map.get($colors, $type, 'light-#{$i}'));
|
||||
}
|
||||
|
||||
@include set-css-var-value2(('color', $type, 'dark-2'),
|
||||
map.get($colors, $type, 'dark-2'));
|
||||
}
|
||||
@ -17,6 +17,8 @@ $colors: map.deep-merge(( // 白色和黑色作为基本颜色选项
|
||||
),
|
||||
'warning': ('base': #e6a23c,
|
||||
),
|
||||
'danger': ('base': #f56c6c,
|
||||
),
|
||||
'error': ('base': #f56c6c,
|
||||
),
|
||||
'info': ('base': #909399,
|
||||
@ -33,38 +35,45 @@ $color-black: map.get($colors, 'black') !default; // 黑色
|
||||
$color-primary: map.get($colors, 'primary', 'base') !default; // 主要颜色，默认使用'base'色调
|
||||
$color-success: map.get($colors, 'success', 'base') !default; // 成功状态颜色，默认使用'base'色调
|
||||
$color-warning: map.get($colors, 'warning', 'base') !default; // 警告状态颜色，默认使用'base'色调
|
||||
$color-danger: map.get($colors, 'danger', 'base') !default;
|
||||
$color-error: map.get($colors, 'error', 'base') !default; // 错误状态颜色，默认使用'base'色调
|
||||
$color-info: map.get($colors, 'info', 'base') !default; // 信息状态颜色，默认使用'base'色调
|
||||
|
||||
// @mixin set-color-mix-level($type,
|
||||
// $number,
|
||||
// $mode: 'light',
|
||||
// $mix-color: $color-white) {
|
||||
// $colors: map.deep-merge(($type: ('#{$mode}-#{$number}': mix($mix-color,
|
||||
// map.get($colors, $type, 'base'),
|
||||
// math.percentage(math.div($number, 10))),
|
||||
// ),
|
||||
// ),
|
||||
// $colors ) !global;
|
||||
// }
|
||||
|
||||
// @mixin set-css-color-type($colors, $type) {
|
||||
// @include set-css-var-value(('color', $type), map.get($colors, $type, 'base'));
|
||||
@mixin set-color-mix-level($type,
|
||||
$number,
|
||||
$mode: 'light',
|
||||
$mix-color: $color-white) {
|
||||
$colors: map.deep-merge(($type: ('#{$mode}-#{$number}': mix($mix-color,
|
||||
map.get($colors, $type, 'base'),
|
||||
math.percentage(math.div($number, 10))),
|
||||
),
|
||||
),
|
||||
$colors ) !global;
|
||||
}
|
||||
|
||||
// @each $i in (3, 5, 7, 8, 9) {
|
||||
// @include set-css-var-value(('color', $type, 'light', $i),
|
||||
// map.get($colors, $type, 'light-#{$i}'));
|
||||
// }
|
||||
// $colors.primary.light-i
|
||||
// --el-color-primary-light-i
|
||||
// 10% 53a8ff
|
||||
// 20% 66b1ff
|
||||
// 30% 79bbff
|
||||
// 40% 8cc5ff
|
||||
// 50% a0cfff
|
||||
// 60% b3d8ff
|
||||
// 70% c6e2ff
|
||||
// 80% d9ecff
|
||||
// 90% ecf5ff
|
||||
@each $type in $types {
|
||||
@for $i from 1 through 9 {
|
||||
@include set-color-mix-level($type, $i, 'light', $color-white);
|
||||
}
|
||||
}
|
||||
|
||||
// @include set-css-var-value(('color', $type, 'dark-2'),
|
||||
// map.get($colors, $type, 'dark-2'));
|
||||
// }
|
||||
// --el-color-primary-dark-2
|
||||
@each $type in $types {
|
||||
@include set-color-mix-level($type, 2, 'dark', $color-black);
|
||||
}
|
||||
|
||||
// @each $type in $types {
|
||||
// @for $i from 1 through 9 {
|
||||
// @include set-color-mix-level($type, $i, 'light', $color-white);
|
||||
// }
|
||||
// }
|
||||
|
||||
// // --el-color-primary-dark-2
|
||||
// @each $type in $types {
|
||||
@ -95,11 +104,11 @@ $border-color: map.merge(('': #f6f6f6,
|
||||
|
||||
|
||||
:root {
|
||||
--el-color-primary: #0064AA !important;
|
||||
// --el-color-primary: #0064AA !important;
|
||||
|
||||
// @each $type in $types {
|
||||
// @include set-css-color-type($colors, $type);
|
||||
// }
|
||||
@each $type in $types {
|
||||
@include set-css-color-type($colors, $type);
|
||||
}
|
||||
|
||||
@include set-css-var-value('main-space', $main-space);
|
||||
@include set-css-var-value('color-primary-light', $primary-light);
|
||||
|
||||
@ -12,7 +12,7 @@ export function mainHeight(extra = 0): CSSProperties {
|
||||
let height = extra
|
||||
const adminLayoutMainExtraHeight: anyObj = {
|
||||
Default: 70,
|
||||
Classic: 148,
|
||||
Classic: 150,
|
||||
Streamline: 60,
|
||||
}
|
||||
if (isAdminApp()) {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user