|
@@ -64,32 +64,6 @@ $tag-icon-span-gap: map.merge(
|
|
}
|
|
}
|
|
|
|
|
|
@include b(tag) {
|
|
@include b(tag) {
|
|
- @include genTheme('light-9', 'light-8', '');
|
|
|
|
-
|
|
|
|
- @each $type in $types {
|
|
|
|
- &.#{bem('tag', '', $type)} {
|
|
|
|
- @include css-var-from-global(('tag', 'text-color'), ('color', $type));
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- @include when(hit) {
|
|
|
|
- border-color: getCssVar('color', 'primary');
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- @include when(round) {
|
|
|
|
- border-radius: getCssVar('tag', 'border-radius-rounded');
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- .#{$namespace}-tag__close {
|
|
|
|
- flex-shrink: 0;
|
|
|
|
- color: getCssVar('tag', 'text-color');
|
|
|
|
-
|
|
|
|
- &:hover {
|
|
|
|
- color: getCssVar('color-white');
|
|
|
|
- background-color: getCssVar('tag-hover-color');
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
background-color: getCssVar('tag-bg-color');
|
|
background-color: getCssVar('tag-bg-color');
|
|
border-color: getCssVar('tag-border-color');
|
|
border-color: getCssVar('tag-border-color');
|
|
color: getCssVar('tag-text-color');
|
|
color: getCssVar('tag-text-color');
|
|
@@ -110,6 +84,31 @@ $tag-icon-span-gap: map.merge(
|
|
white-space: nowrap;
|
|
white-space: nowrap;
|
|
|
|
|
|
@include set-css-var-value('icon-size', 14px);
|
|
@include set-css-var-value('icon-size', 14px);
|
|
|
|
+ @include genTheme('light-9', 'light-8', '');
|
|
|
|
+
|
|
|
|
+ @include when(hit) {
|
|
|
|
+ border-color: getCssVar('color', 'primary');
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ @include when(round) {
|
|
|
|
+ border-radius: getCssVar('tag', 'border-radius-rounded');
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .#{$namespace}-tag__close {
|
|
|
|
+ flex-shrink: 0;
|
|
|
|
+ color: getCssVar('tag', 'text-color');
|
|
|
|
+
|
|
|
|
+ &:hover {
|
|
|
|
+ color: getCssVar('color-white');
|
|
|
|
+ background-color: getCssVar('tag-hover-color');
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ @each $type in $types {
|
|
|
|
+ &.#{bem('tag', '', $type)} {
|
|
|
|
+ @include css-var-from-global(('tag', 'text-color'), ('color', $type));
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
|
|
$svg-margin-size: 1px;
|
|
$svg-margin-size: 1px;
|
|
|
|
|
|
@@ -127,8 +126,8 @@ $tag-icon-span-gap: map.merge(
|
|
}
|
|
}
|
|
|
|
|
|
@include m(dark) {
|
|
@include m(dark) {
|
|
- @include genTheme('', '', 'light-3');
|
|
|
|
@include css-var-from-global(('tag', 'text-color'), ('color', 'white'));
|
|
@include css-var-from-global(('tag', 'text-color'), ('color', 'white'));
|
|
|
|
+ @include genTheme('', '', 'light-3');
|
|
|
|
|
|
@each $type in $types {
|
|
@each $type in $types {
|
|
&.#{bem('tag', '', $type)} {
|
|
&.#{bem('tag', '', $type)} {
|
|
@@ -138,8 +137,8 @@ $tag-icon-span-gap: map.merge(
|
|
}
|
|
}
|
|
|
|
|
|
@include m(plain) {
|
|
@include m(plain) {
|
|
- @include genTheme(false, 'light-5', '');
|
|
|
|
@include css-var-from-global(('tag', 'bg-color'), ('fill-color', 'blank'));
|
|
@include css-var-from-global(('tag', 'bg-color'), ('fill-color', 'blank'));
|
|
|
|
+ @include genTheme(false, 'light-5', '');
|
|
}
|
|
}
|
|
|
|
|
|
&.is-closable {
|
|
&.is-closable {
|