Improve Buttons and Forms small and large variables

3 files changed, 27 insertions, 25 deletions

diff --git a/src/_buttons.scss b/src/_buttons.scss
index 1860ed8..c4dc0a6 100644
--- a/src/_buttons.scss
+++ b/src/_buttons.scss
@@ -12,7 +12,7 @@
   height: $control-size;
   line-height: $line-height;
   outline: none;
-  padding: $control-padding-v $control-padding-h;
+  padding: $control-padding-y $control-padding-x;
   text-align: center;
   text-decoration: none;
   user-select: none;
@@ -90,13 +90,13 @@
   &.btn-sm {
     font-size: $font-size-sm;
     height: $control-size-sm;
-    padding: $control-padding-v-sm $control-padding-h * .75;
+    padding: $control-padding-y-sm $control-padding-x-sm;
   }
 
   &.btn-lg {
     font-size: $font-size-lg;
     height: $control-size-lg;
-    padding: $control-padding-v-lg $control-padding-h * 1.25;
+    padding: $control-padding-y-lg $control-padding-x-lg;
   }
 
   // Button Block
diff --git a/src/_forms.scss b/src/_forms.scss
index c23841e..47358f2 100644
--- a/src/_forms.scss
+++ b/src/_forms.scss
@@ -18,14 +18,14 @@ legend {
 // Form element: Label
 .form-label {
   display: block;
-  padding: $control-padding-v + $border-width 0;
+  padding: $control-padding-y + $border-width 0;
 
   &.label-sm {
-    padding: $control-padding-v-sm + $border-width 0;
+    padding: $control-padding-y-sm + $border-width 0;
   }
 
   &.label-lg {
-    padding: $control-padding-v-lg + $border-width 0;
+    padding: $control-padding-y-lg + $border-width 0;
   }
 }
 
@@ -44,7 +44,7 @@ legend {
   line-height: $line-height;
   max-width: 100%;
   outline: none;
-  padding: $control-padding-v $control-padding-h;
+  padding: $control-padding-y $control-padding-x;
   position: relative;
   width: 100%;
   &:focus {
@@ -59,13 +59,13 @@ legend {
   &.input-sm {
     font-size: $font-size-sm;
     height: $control-size-sm;
-    padding: $control-padding-v-sm $control-padding-h;
+    padding: $control-padding-y-sm $control-padding-x-sm;
   }
 
   &.input-lg {
     font-size: $font-size-lg;
     height: $control-size-lg;
-    padding: $control-padding-v-lg $control-padding-h;
+    padding: $control-padding-y-lg $control-padding-x-lg;
   }
 
   &.input-inline {
@@ -112,7 +112,7 @@ textarea.form-input {
   height: $control-size;
   line-height: $line-height;
   outline: none;
-  padding: $control-padding-v $control-padding-h;
+  padding: $control-padding-y $control-padding-x;
   vertical-align: middle;
   width: 100%;
 
@@ -126,7 +126,7 @@ textarea.form-input {
   }
   &:not([multiple]):not([size]) {
     background: $bg-color-light url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23667189' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E") no-repeat right ($control-icon-size / 2) center / .4rem .5rem;
-    padding-right: $control-icon-size + $control-padding-h;
+    padding-right: $control-icon-size + $control-padding-x;
   }
   &:focus {
     @include control-shadow();
@@ -140,13 +140,13 @@ textarea.form-input {
   &.select-sm {
     font-size: $font-size-sm;
     height: $control-size-sm;
-    padding: $control-padding-v-sm ($control-icon-size + $control-padding-h) $control-padding-v-sm $control-padding-h;
+    padding: $control-padding-y-sm ($control-icon-size + $control-padding-x-sm) $control-padding-y-sm $control-padding-x-sm;
   }
 
   &.select-lg {
     font-size: $font-size-lg;
     height: $control-size-lg;
-    padding: $control-padding-v-lg ($control-icon-size + $control-padding-h) $control-padding-v-lg $control-padding-h;
+    padding: $control-padding-y-lg ($control-icon-size + $control-padding-x-lg) $control-padding-y-lg $control-padding-x-lg;
   }
 }
 
@@ -157,7 +157,7 @@ textarea.form-input {
 
   .form-icon {
     height: $control-icon-size;
-    margin: 0 $control-padding-v;
+    margin: 0 $control-padding-y;
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
@@ -171,7 +171,7 @@ textarea.form-input {
   }
 
   .form-input {
-    padding-left: $control-icon-size + $control-padding-v * 2;
+    padding-left: $control-icon-size + $control-padding-y * 2;
   }
 }
 
@@ -181,7 +181,7 @@ textarea.form-input {
   }
 
   .form-input {
-    padding-right: $control-icon-size + $control-padding-v * 2;
+    padding-right: $control-icon-size + $control-padding-y * 2;
   }
 }
 
@@ -191,7 +191,7 @@ textarea.form-input {
 .form-switch {
   display: inline-block;
   line-height: $line-height;
-  padding: (($control-size-sm - $line-height) / 2)  ($control-icon-size + $control-padding-h);
+  padding: (($control-size-sm - $line-height) / 2)  ($control-icon-size + $control-padding-x);
   position: relative;
 
   input {
@@ -301,7 +301,7 @@ textarea.form-input {
 
 // Form element: Switch
 .form-switch {
-  padding-left: ($unit-8 + $control-padding-h);
+  padding-left: ($unit-8 + $control-padding-x);
 
   .form-icon {
     background: $gray-color-light;
@@ -348,15 +348,15 @@ textarea.form-input {
     border: $border-width solid $border-color-dark;
     border-radius: $border-radius;
     line-height: $line-height;
-    padding: $control-padding-v $control-padding-h;
+    padding: $control-padding-y $control-padding-x;
 
     &.addon-sm {
       font-size: $font-size-sm;
-      padding: $control-padding-v-sm $control-padding-h;
+      padding: $control-padding-y-sm $control-padding-x-sm;
     }
     &.addon-lg {
       font-size: $font-size-lg;
-      padding: $control-padding-v-lg $control-padding-h;
+      padding: $control-padding-y-lg $control-padding-x-lg;
     }
   }
 
diff --git a/src/_variables.scss b/src/_variables.scss
index 4216d4a..400d581 100644
--- a/src/_variables.scss
+++ b/src/_variables.scss
@@ -79,10 +79,12 @@ $border-width-lg: $unit-h !default;
 $control-size: $unit-8 !default;
 $control-size-sm: $unit-6 !default;
 $control-size-lg: $unit-10 !default;
-$control-padding-h: $unit-2 !default;
-$control-padding-v: ($control-size - $line-height) / 2 - $border-width !default;
-$control-padding-v-sm: ($control-size-sm - $line-height) / 2 - $border-width !default;
-$control-padding-v-lg: ($control-size-lg - $line-height) / 2 - $border-width !default;
+$control-padding-x: $unit-2 !default;
+$control-padding-x-sm: $unit-2 * .75 !default;
+$control-padding-x-lg: $unit-2 * 1.5 !default;
+$control-padding-y: ($control-size - $line-height) / 2 - $border-width !default;
+$control-padding-y-sm: ($control-size-sm - $line-height) / 2 - $border-width !default;
+$control-padding-y-lg: ($control-size-lg - $line-height) / 2 - $border-width !default;
 $control-icon-size: .7rem !default;
 $control-min-width: 180px !default;
 $control-max-width: 320px !default;