Numeric Field Updates

- Updated so the numeric field will grow/shrink and is overall more flexible to where it is being used
werkbot · May 30, 2024 · e4b6a93 · e4b6a93
1 parent 8f01af8
commit e4b6a93
Showing 1 changed file with 10 additions and 7 deletions.
diff --git a/sass/components/form/components/_numeric.scss b/sass/components/form/components/_numeric.scss
@@ -17,6 +17,11 @@ $component-form-numeric-properties: $default-component-form-numeric-properties !
   .field.numeric{
     position: relative;
     margin: 0;
+    width: 100%;
+    display: inline-block;
+    .middleColumn{
+      position: relative;
+    }
     label{
       transform: none;
       margin: 2px 0;
@@ -27,10 +32,8 @@ $component-form-numeric-properties: $default-component-form-numeric-properties !
     }
     input, input[type='number']{
       width: 100%;
-      height: 44px;
-      padding: 9px;
-      padding-left: 45px;
-      padding-right: 31px;
+      height: 100%;
+      padding: 9px 50px;
       box-sizing: border-box;
       text-align: center;
       border-radius: 5px;
@@ -39,15 +42,15 @@ $component-form-numeric-properties: $default-component-form-numeric-properties !
       outline: none;
       border-color: getThemeProperty(borderColor, $component-form-numeric-properties);
       border: 1px solid getThemeProperty(borderColor, $component-form-numeric-properties);
+      -moz-appearance: textfield;
       @include focus-style;
     }
     ~ .subtract-qty, .subtract-qty, ~ .add-qty, .add-qty{
       position: absolute;
       z-index: 1; // Behaves strangely in FireFox without this
-      top: 20px;
-      height: 43px;
+      top: 0;
+      height: 100%;
       width: 50px;
-      min-height: 100%;
       display: flex;
       justify-content: center;
       align-items: center;