Merge pull request #92 from werkbot/hotfix/2.1.16/numeric-field-updates

Numeric Field Updates

package.json

@@ -1,6 +1,6 @@
 {
   "name": "werkbot-framewerk",
-  "version": "2.1.15",
+  "version": "2.1.16",
   "description": "A framework of css and javascript that Werkbot uses as a foundation to build our websites.",
   "main": "js/form.js",
   "directories": {

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,20 @@ $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;
+      &::-webkit-outer-spin-button,
+      &::-webkit-inner-spin-button {
+          -webkit-appearance: none;
+          margin: 0;
+      }
     }
     ~ .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;