Merge branch 'input-padding' into 'master'

Improve input padding, fix #18237.

## What does this MR do?
Improves horizontal padding for input fields.

## What are the relevant issue numbers?
#18237

## Screenshots (if relevant)

Before:

![Screen_Shot_2016-06-06_at_12.11.07_PM](/uploads/11d24c84e1ca8d268a5acc2b4e10bb77/Screen_Shot_2016-06-06_at_12.11.07_PM.png)

After:

![Screen_Shot_2016-06-06_at_12.10.38_PM](/uploads/cbb407d8fca1e8dc1ace2af6c0774181/Screen_Shot_2016-06-06_at_12.10.38_PM.png)

cc: @jschatz1 

See merge request !4489

3 files changed, 3 insertions, 1 deletions

diff --git a/app/assets/stylesheets/framework/forms.scss b/app/assets/stylesheets/framework/forms.scss
index 46acc3b772f..43d55661541 100644
--- a/app/assets/stylesheets/framework/forms.scss
+++ b/app/assets/stylesheets/framework/forms.scss
@@ -76,6 +76,7 @@ label {
 .form-control {
   @include box-shadow(none);
   border-radius: 3px;
+  padding: $gl-vert-padding $gl-input-padding;
 }
 
 .select-wrapper {
diff --git a/app/assets/stylesheets/framework/selects.scss b/app/assets/stylesheets/framework/selects.scss
index 6efc6ec1e4b..f242706ebe4 100644
--- a/app/assets/stylesheets/framework/selects.scss
+++ b/app/assets/stylesheets/framework/selects.scss
@@ -8,7 +8,7 @@
     background: #fff;
     border-color: $input-border;
     height: 35px;
-    padding: $gl-vert-padding $gl-btn-padding;
+    padding: $gl-vert-padding $gl-input-padding;
     font-size: $gl-font-size;
     line-height: 1.42857143;
     border-radius: $border-radius-base;
diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index d8ea07559ab..5de30d67b0a 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -57,6 +57,7 @@ $code_line_height: 1.5;
  */
 $gl-padding: 16px;
 $gl-btn-padding: 10px;
+$gl-input-padding: 10px;
 $gl-vert-padding: 6px;
 $gl-padding-top: 10px;