fix(comp:input): select style component within input addon isn't corr…

…ect (#1873)
IDuxFE · Apr 8, 2024 · 73c4f11 · 73c4f11
1 parent dca4899
commit 73c4f11
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 38 deletions.
diff --git a/packages/components/input/style/index.less b/packages/components/input/style/index.less
@@ -8,15 +8,15 @@
   .reset-color();
 
   &-sm {
-    .input-size(var(--ix-control-height-sm), var(--ix-control-font-size-sm), var(--ix-control-padding-size-horizontal-sm), var(--ix-control-border-radius-sm));
+    .input-size(var(--ix-control-height-sm), var(--ix-control-font-size-sm), var(--ix-control-padding-size-vertical-sm), var(--ix-control-padding-size-horizontal-sm), var(--ix-control-border-radius-sm));
   }
 
   &-md {
-    .input-size(var(--ix-control-height-md), var(--ix-control-font-size-md), var(--ix-control-padding-size-horizontal-md), var(--ix-control-border-radius-md));
+    .input-size(var(--ix-control-height-md), var(--ix-control-font-size-md), var(--ix-control-padding-size-vertical-md), var(--ix-control-padding-size-horizontal-md), var(--ix-control-border-radius-md));
   }
 
   &-lg {
-    .input-size(var(--ix-control-height-lg), var(--ix-control-font-size-lg), var(--ix-control-padding-size-horizontal-lg), var(--ix-control-border-radius-lg));
+    .input-size(var(--ix-control-height-lg), var(--ix-control-font-size-lg), var(--ix-control-padding-size-vertical-lg), var(--ix-control-padding-size-horizontal-lg), var(--ix-control-border-radius-lg));
   }
 
   &,
@@ -114,19 +114,17 @@
     display: inline-block;
     text-align: center;
     background-color: var(--ix-color-addon-container-bg);
-    border: 1px solid var(--ix-color-border);
+    border: var(--ix-line-width) solid var(--ix-color-border);
     white-space: nowrap;
 
     &:first-child {
       border-right: 0;
       border-top-right-radius: 0;
       border-bottom-right-radius: 0;
 
-      .@{selector-prefix} {
-        &-content {
-          border-top-right-radius: 0;
-          border-bottom-right-radius: 0;
-        }
+      .@{trigger-prefix} {
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
       }
     }
 
@@ -135,32 +133,19 @@
       border-top-left-radius: 0;
       border-bottom-left-radius: 0;
 
-      .@{selector-prefix} {
-        &-content {
-          border-top-left-radius: 0;
-          border-bottom-left-radius: 0;
-        }
+      .@{trigger-prefix} {
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
       }
     }
 
-    .@{selector-prefix} {
-      &-content {
-        background-color: inherit;
-        border-color: transparent;
-      }
-
-      // TODO: select 那边要去掉这两个样式
-      &-item {
-        left: unset !important;
-        width: unset !important;
-      }
-
-      &-item-label {
-        width: 100%;
-      }
+    .@{trigger-prefix} {
+      background-color: transparent;
+      border-color: transparent;
+      z-index: 1;
 
       &-suffix {
-        right: 4px;
+        right: var(--ix-margin-size-xs);
       }
     }
   }
@@ -266,13 +251,13 @@
       color: var(--ix-color-error-text);
       border-color: var(--ix-color-error-border);
 
-      .@{selector-prefix} {
-        &:hover &-content,
-        &-content {
+      .@{trigger-prefix} {
+        border-color: transparent;
+        &:hover {
           border-color: transparent;
         }
 
-        &.@{selector-prefix}-focused .@{selector-prefix}-content {
+        &.@{trigger-prefix}-focused {
           border-color: transparent;
           // todo remove
           box-shadow: none;

diff --git a/packages/components/input/style/mixin.less b/packages/components/input/style/mixin.less
@@ -14,7 +14,7 @@
   .placeholder();
 }
 
-.input-size(@height, @font-size, @padding-horizontal, @border-radius) {
+.input-size(@height, @font-size, @padding-vertical, @padding-horizontal, @border-radius) {
   .reset-font-size(@font-size);
 
   height: @height;
@@ -31,8 +31,13 @@
   }
 
   .@{input-prefix}-addon {
-    .@{selector-prefix} {
-      margin: -5px calc(@padding-horizontal * -1);
+    .@{trigger-prefix} {
+      &:not(.@{trigger-prefix}-paddingless) {
+        margin: calc(var(--ix-line-width) * -1) calc(@padding-horizontal * -1 - var(--ix-line-width));
+      }
+      .@{trigger-prefix}-paddingless {
+        margin: calc(var(--ix-line-width) * -1);
+      }
     }
   }
 

diff --git a/packages/components/selector/style/multiple.less b/packages/components/selector/style/multiple.less
@@ -50,7 +50,7 @@
   }
 }
 
-.@{selector-prefix}-multiple {
+.@{selector-prefix}.@{selector-prefix}-multiple {
   .@{selector-prefix} {
     &-content {
       flex-wrap: wrap;