feat: handle prefix/affix btn group select padding scaling issue

etchteam · Sep 13, 2024 · a4df5a0 · a4df5a0
1 parent 985e21a
commit a4df5a0
Showing 1 changed file with 9 additions and 3 deletions.
diff --git a/components/control/Input/Input.css b/components/control/Input/Input.css
@@ -67,10 +67,10 @@ diamond-input {
   select {
     cursor: pointer;
     margin-right: calc(
-      var(--diamond-icon-size) * -1 - var(--diamond-input-padding-inline) * 0.5
+      var(--diamond-icon-size) * -1 - var(--diamond-input-padding-inline)
     );
     padding-right: calc(
-      var(--diamond-icon-size) + var(--diamond-input-padding-inline) * 1.5
+      var(--diamond-icon-size) + var(--diamond-input-padding-inline)
     );
   }
 
@@ -84,15 +84,21 @@ diamond-input {
     box-sizing: content-box;
     flex-shrink: 0;
     inline-size: var(--diamond-icon-size);
+    pointer-events: none;
   }
 
   /* Prefix */
   &:has(* + :is(input, textarea, select)) > :first-child {
+    margin-right: calc(var(--diamond-input-padding-inline) / 2 * -1);
     padding: 0 0 0 calc(var(--diamond-input-padding-inline) / 2);
   }
 
   /* Suffix */
   :is(input, textarea, select) + * {
-    padding: 0 calc(var(--diamond-input-padding-inline) / 2) 0 0;
+    padding: 0 calc(var(--diamond-input-padding-inline) / 2);
+  }
+
+  :is(input, textarea):has(+ *) {
+    padding-right: 0;
   }
 }