From: Nate Wiebe <nate@northern.co>
Date: Thu, 19 Jan 2017 22:40:16 +0000 (-0500)
Subject: Add a setting to control the padding of the text and select inputs
X-Git-Tag: v6.4.0-rc1~29^2~1
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=700f312e71c1bb00aac40fb64a92c47db83eef4f;p=thirdparty%2Ffoundation%2Ffoundation-sites.git

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 87ef33191..fe450dc39 100644
--- 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 152931a5b..e3d4ce4eb 100644
--- 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 9f6743012..fdb75ee7f 100644
--- 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;