javascript/element-plus
1
0
Fork 0
mirror of https://github.com/element-plus/element-plus.git synced 2026-03-13 07:51:17 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(tag): migrate css var (#2592)

Browse Source
This commit is contained in:
云游君
2021-07-21 20:34:49 +08:00
committed by GitHub
parent d05e5a6b4a
commit 0bf673def1
2 changed files with 80 additions and 119 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
packages/theme-chalk/src/common/var.scss
View File

@@ -492,20 +492,8 @@ $--tooltip-padding: 10px !default;
/* Tag
-------------------------- */
/// color||Color|0
$--tag-info-color: $--color-info !default;
/// color||Color|0
$--tag-primary-color: $--color-primary !default;
/// color||Color|0
$--tag-success-color: $--color-success !default;
/// color||Color|0
$--tag-warning-color: $--color-warning !default;
/// color||Color|0
$--tag-danger-color: $--color-danger !default;
/// fontSize||Font|1
$--tag-font-size: 12px !default;
$--tag-border-radius: 4px !default;
$--tag-padding: 0 10px !default;
// refactor with css3 var
// See packages/theme-chalk/src/tag.scss
/* Tree
-------------------------- */

183
packages/theme-chalk/src/tag.scss
View File

@@ -1,6 +1,31 @@
@use "sass:map";
@import 'mixins/mixins';
@import 'common/var';
$types: (primary, success, warning, info, danger);
$--tag-color: () !default;
@each $type in $types {
$--tag-color: map.merge(
$--tag-color,
(
$type: map.get($--colors, $type, 'base'),
)
) !global;
}
:root {
@each $type in $types {
--el-tag-#{$type}-color: var(--el-color-#{$type});
}
--el-tag-font-size: 12px;
--el-tag-border-radius: 4px;
--el-tag-padding: 0 10px;
}
@mixin genTheme(
$backgroundColorWeight,
$borderColorWeight,
@@ -8,129 +33,77 @@
$hoverColorWeight
) {
background-color: mix(
$--tag-primary-color,
map.get($--tag-color, 'primary'),
$--color-white,
$backgroundColorWeight
);
border-color: mix($--tag-primary-color, $--color-white, $borderColorWeight);
color: mix($--tag-primary-color, $--color-white, $fontColorWeight);
border-color: mix(
map.get($--tag-color, 'primary'),
$--color-white,
$borderColorWeight
);
color: mix(
map.get($--tag-color, 'primary'),
$--color-white,
$fontColorWeight
);
@include when(hit) {
border-color: $--tag-primary-color;
border-color: map.get($--tag-color, 'primary');
}
.#{$namespace}-tag__close {
color: mix($--tag-primary-color, $--color-white, $fontColorWeight);
color: mix(
map.get($--tag-color, 'primary'),
$--color-white,
$fontColorWeight
);
&:hover {
color: $--color-white;
background-color: mix(
$--tag-primary-color,
map.get($--tag-color, 'primary'),
$--color-white,
$hoverColorWeight
);
}
}
&.#{$namespace}-tag--info {
background-color: mix(
$--tag-info-color,
$--color-white,
$backgroundColorWeight
);
border-color: mix($--tag-info-color, $--color-white, $borderColorWeight);
color: mix($--tag-info-color, $--color-white, $fontColorWeight);
@each $type in $types {
&.#{$namespace}-tag--#{$type} {
background-color: mix(
map.get($--tag-color, $type),
$--color-white,
$backgroundColorWeight
);
border-color: mix(
map.get($--tag-color, $type),
$--color-white,
$borderColorWeight
);
color: mix(
map.get($--tag-color, $type),
$--color-white,
$fontColorWeight
);
@include when(hit) {
border-color: $--tag-info-color;
}
.#{$namespace}-tag__close {
color: mix($--tag-info-color, $--color-white, $fontColorWeight);
&:hover {
color: $--color-white;
background-color: mix(
$--tag-info-color,
$--color-white,
$hoverColorWeight
);
@include when(hit) {
border-color: map.get($--tag-color, $type);
}
}
}
&.#{$namespace}-tag--success {
background-color: mix(
$--tag-success-color,
$--color-white,
$backgroundColorWeight
);
border-color: mix($--tag-success-color, $--color-white, $borderColorWeight);
color: mix($--tag-success-color, $--color-white, $fontColorWeight);
@include when(hit) {
border-color: $--tag-success-color;
}
.#{$namespace}-tag__close {
color: mix($--tag-success-color, $--color-white, $fontColorWeight);
&:hover {
color: $--color-white;
background-color: mix(
$--tag-success-color,
.#{$namespace}-tag__close {
color: mix(
map.get($--tag-color, $type),
$--color-white,
$hoverColorWeight
);
}
}
}
&.#{$namespace}-tag--warning {
background-color: mix(
$--tag-warning-color,
$--color-white,
$backgroundColorWeight
);
border-color: mix($--tag-warning-color, $--color-white, $borderColorWeight);
color: mix($--tag-warning-color, $--color-white, $fontColorWeight);
@include when(hit) {
border-color: $--tag-warning-color;
}
.#{$namespace}-tag__close {
color: mix($--tag-warning-color, $--color-white, $fontColorWeight);
&:hover {
color: $--color-white;
background-color: mix(
$--tag-warning-color,
$--color-white,
$hoverColorWeight
);
}
}
}
&.#{$namespace}-tag--danger {
background-color: mix(
$--tag-danger-color,
$--color-white,
$backgroundColorWeight
);
border-color: mix($--tag-danger-color, $--color-white, $borderColorWeight);
color: mix($--tag-danger-color, $--color-white, $fontColorWeight);
@include when(hit) {
border-color: $--tag-danger-color;
}
.#{$namespace}-tag__close {
color: mix($--tag-danger-color, $--color-white, $fontColorWeight);
&:hover {
color: $--color-white;
background-color: mix(
$--tag-danger-color,
$--color-white,
$hoverColorWeight
$fontColorWeight
);
&:hover {
color: $--color-white;
background-color: mix(
map.get($--tag-color, $type),
$--color-white,
$hoverColorWeight
);
}
}
}
}
@@ -140,13 +113,13 @@
@include genTheme(10%, 20%, 100%, 100%);
display: inline-block;
height: 32px;
padding: $--tag-padding;
padding: var(--el-tag-padding);
line-height: 30px;
font-size: $--tag-font-size;
color: $--tag-primary-color;
font-size: var(--el-tag-font-size);
color: map.get($--tag-color, 'primary');
border-width: 1px;
border-style: solid;
border-radius: $--tag-border-radius;
border-radius: var(--el-tag-border-radius);
box-sizing: border-box;
white-space: nowrap;