fix(NumberField): fix mobile styles (#858)

mittwald · Oct 18, 2024 · f211f9d · f211f9d
1 parent 268cd5f
commit f211f9d
Showing 1 changed file with 27 additions and 20 deletions.
diff --git a/packages/components/src/components/NumberField/NumberField.module.scss b/packages/components/src/components/NumberField/NumberField.module.scss
@@ -10,7 +10,7 @@
 
   .input {
     grid-area: input;
-    
+
     @include formControl.formControl();
   }
 
@@ -85,30 +85,37 @@
   .group {
     grid-template-columns: auto 1fr auto;
     grid-template-areas: "decrement input increment";
-  }
 
-  .input {
-    border-radius: 0;
-  }
+    .input {
+      border-radius: 0;
+    }
 
-  .decrementButton,
-  .incrementButton {
-    padding-inline: var(--form-control--padding-x);
+    .decrementButton,
+    .incrementButton {
+      padding-inline: var(--button--padding);
+
+      .coarsePointerIcon {
+        width: var(--icon--size--m);
+        height: var(--icon--size--m);
+      }
+
+      svg:not(.coarsePointerIcon) {
+        display: none;
+      }
+    }
 
-    :not(.touchIcon) {
-      display: none;
+    .decrementButton {
+      border-start-end-radius: 0;
+      border-end-end-radius: 0;
+      border-inline-end: none;
     }
-  }
 
-  .decrementButton {
-    border-start-end-radius: 0;
-    border-end-end-radius: 0;
-    border-inline-end: none;
+    .incrementButton {
+      border-start-start-radius: 0;
+      border-end-start-radius: 0;
+      border-inline-start: none;
+    }
   }
 
-  .incrementButton {
-    border-start-start-radius: 0;
-    border-end-start-radius: 0;
-    border-inline-start: none;
-  }
+
 }