Add a setting to control the padding of the text and select inputs

diff --git a/scss/forms/_select.scss b/scss/forms/_select.scss
index 87ef331910ae2dd5f7598a11eb9e8f65d460e778..fe450dc39bb41c8182d680d01237ef50c96f07a1 100644 (file)
--- a/scss/forms/_select.scss
+++ b/scss/forms/_select.scss
@@ -19,11 +19,11 @@ $select-triangle-color: $dark-gray !default;
 $select-radius: $global-radius !default;
 
 @mixin form-select {
-  $height: ($input-font-size + ($form-spacing * 1.5) - rem-calc(1));
+  $height: ($input-font-size * $input-line-height) + (get-side($input-padding, 'top') + get-side($input-padding, 'bottom')) - rem-calc(1);
 
   height: $height;
   margin: 0 0 $form-spacing;
-  padding: ($form-spacing / 2);
+  padding: $input-padding;
 
   appearance: none;
   border: $input-border;

diff --git a/scss/forms/_text.scss b/scss/forms/_text.scss
index 152931a5bf01685e03b5f5e123793ae2626e4957..e3d4ce4eb4de5caae6de7d188d27237b644e3cbc 100644 (file)
--- a/scss/forms/_text.scss
+++ b/scss/forms/_text.scss
@@ -26,6 +26,10 @@ $input-font-size: rem-calc(16) !default;
 /// @type Keyword
 $input-font-weight: $global-weight-normal !default;
 
+/// Line height of text inputs.
+/// @type Keyword
+$input-line-height: $global-lineheight !default;
+
 /// Background color of text inputs.
 /// @type Color
 $input-background: $white !default;
@@ -46,6 +50,10 @@ $input-border: 1px solid $medium-gray !default;
 /// @type Color
 $input-border-focus: 1px solid $dark-gray !default;
 
+/// Padding of text inputs.
+/// @type Color
+$input-padding: $form-spacing / 2 !default;
+
 /// Box shadow inside text inputs when not focused.
 /// @type Shadow
 $input-shadow: inset 0 1px 2px rgba($black, 0.1) !default;
@@ -75,14 +83,14 @@ $input-radius: $global-radius !default;
 $form-button-radius: $global-radius !default;
 
 @mixin form-element {
-  $height: ($input-font-size + ($form-spacing * 1.5) - rem-calc(1));
+  $height: ($input-font-size * $input-line-height) + (get-side($input-padding, 'top') + get-side($input-padding, 'bottom')) - rem-calc(1);
 
   display: block;
   box-sizing: border-box;
   width: 100%;
   height: $height;
   margin: 0 0 $form-spacing;
-  padding: $form-spacing / 2;
+  padding: $input-padding;
 
   border: $input-border;
   border-radius: $input-radius;

diff --git a/scss/settings/_settings.scss b/scss/settings/_settings.scss
index 9f6743012518b45da90b2367337050145dff6355..fdb75ee7f96806be3bef7e2adeb218aca3017718 100644 (file)
--- a/scss/settings/_settings.scss
+++ b/scss/settings/_settings.scss
@@ -375,11 +375,13 @@ $input-placeholder-color: $medium-gray;
 $input-font-family: inherit;
 $input-font-size: rem-calc(16);
 $input-font-weight: $global-weight-normal;
+$input-line-height: $global-lineheight;
 $input-background: $white;
 $input-background-focus: $white;
 $input-background-disabled: $light-gray;
 $input-border: 1px solid $medium-gray;
 $input-border-focus: 1px solid $dark-gray;
+$input-padding: $form-spacing / 2;
 $input-shadow: inset 0 1px 2px rgba($black, 0.1);
 $input-shadow-focus: 0 0 5px $medium-gray;
 $input-cursor-disabled: not-allowed;