Selaa lähdekoodia

fix(taginput): update TagInput Sass variable reference relationship (#615)

carlos 3 vuotta sitten
vanhempi
sitoutus
46b8737b9d

+ 3 - 2
packages/semi-foundation/tagInput/tagInput.scss

@@ -4,7 +4,7 @@ $module: #{$prefix}-tagInput;
 
 .#{$module} {
     background-color: $color-tagInput_default-bg-default;
-    border: $border-thickness-control-focus $color-textarea-border-default solid;
+    border: $width-tagInput-border-default $color-tagInput-border-default solid;
     border-radius: $radius-tagInput;
     display: inline-flex;
     font-weight: $font-weight-regular;
@@ -13,11 +13,12 @@ $module: #{$prefix}-tagInput;
     
     &-hover {
         background-color: $color-tagInput_default-bg-hover;
+        border: $width-tagInput-border-hover $color-tagInput-border-hover solid;
     }
     
     &-focus {
         background-color: $color-tagInput_default-bg-focus;
-        border: $border-thickness-control-focus $color-tagInput_default-border-focus solid;
+        border: $width-tagInput-border-focus $color-tagInput-border-focus solid;
     }
 
     &-warning {

+ 8 - 2
packages/semi-foundation/tagInput/variables.scss

@@ -3,13 +3,16 @@ $color-tagInput-maxTagCount-default: var(--semi-color-text-0); // 标签输入
 $color-tagInput-icon-hover: var(--semi-color-primary-hover); // 标签输入框图标颜色 - 悬浮
 $color-tagInput_disabled-text-default: var(--semi-color-disabled-text); // 标签输入框禁用文字颜色
 $color-tagInput_default-bg-focus: var(--semi-color-fill-0); // 标签输入框背景颜色 - 选中态
-$color-tagInput_default-border-focus: var(--semi-color-focus-border); // 标签输入框描边颜色 - 选中态
+
+$color-tagInput-border-default: transparent; // 标签输入框描边颜色 - 默认
+$color-tagInput-border-hover: transparent ; // 标签输入框描边颜色 - 悬浮
+$color-tagInput-border-focus: var(--semi-color-focus-border); // 标签输入框描边颜色 - 选中态
 $color-tagInput_prefix-default: var(--semi-color-text-2); // 标签输入框 prefix 颜色
 $color-tagInput_suffix-default: var(--semi-color-text-1); // 标签输入框 suffix 颜色
 
 $color-tagInput_default-bg-default: var(--semi-color-fill-0); // 标签输入框背景颜色 - 默认
 $color-tagInput_default-bg-hover: var(--semi-color-fill-1); // 标签输入框背景颜色 - 悬浮
-$color-textarea-border-default: transparent; // 标签输入框描边颜色 - 默认
+// $color-textarea-border-default: transparent; // 标签输入框描边颜色 - 默认,已废弃 deprecated-v2.4
 
 $color-tagInput_warning-bg-default: var(--semi-color-warning-light-default); // 警告标签输入框背景颜色 - 默认
 $color-tagInput_warning-border-default: var(--semi-color-warning-light-default); // 警告标签输入框描边颜色 - 默认
@@ -35,5 +38,8 @@ $height-tagInput-default: $height-control-default; // 默认尺寸标签输入
 $height-tagInput-small: $height-control-small; // 小尺寸标签输入框高度
 
 $width-tagInput-clear-medium: $width-icon-medium * 2; // 标签输入框清空按钮宽度
+$width-tagInput-border-default: $border-thickness-control; // 标签输入框描边描边宽度 - 默认
+$width-tagInput-border-hover: $width-tagInput-border-default; // 标签输入框描边描边宽度 - 悬浮
+$width-tagInput-border-focus: $border-thickness-control-focus; // 标签输入框描边宽度 - 选中态
 
 $radius-tagInput: var(--semi-border-radius-small); // 标签输入框圆角