Merge branch 'btn_input_split_variables' of...

Merge branch 'btn_input_split_variables' of https://github.com/isychev/bootstrap into isychev-btn_input_split_variables

scss/_button-group.scss

@@ -28,7 +28,7 @@
   .btn + .btn-group,
   .btn-group + .btn,
   .btn-group + .btn-group {
-    margin-left: -$input-btn-border-width;
+    margin-left: -$btn-border-width;
   }
 }
 
@@ -101,8 +101,8 @@
 //
 
 .btn + .dropdown-toggle-split {
-  padding-right: $input-btn-padding-x * .75;
-  padding-left: $input-btn-padding-x * .75;
+  padding-right: $btn-padding-x * .75;
+  padding-left: $btn-padding-x * .75;
 
   &::after {
     margin-left: 0;
@@ -110,13 +110,13 @@
 }
 
 .btn-sm + .dropdown-toggle-split {
-  padding-right: $input-btn-padding-x-sm * .75;
-  padding-left: $input-btn-padding-x-sm * .75;
+  padding-right: $btn-padding-x-sm * .75;
+  padding-left: $btn-padding-x-sm * .75;
 }
 
 .btn-lg + .dropdown-toggle-split {
-  padding-right: $input-btn-padding-x-lg * .75;
-  padding-left: $input-btn-padding-x-lg * .75;
+  padding-right: $btn-padding-x-lg * .75;
+  padding-left: $btn-padding-x-lg * .75;
 }
 
 
@@ -150,7 +150,7 @@
   > .btn + .btn-group,
   > .btn-group + .btn,
   > .btn-group + .btn-group {
-    margin-top: -$input-btn-border-width;
+    margin-top: -$btn-border-width;
     margin-left: 0;
   }
 

scss/_buttons.scss

@@ -11,8 +11,8 @@
   white-space: nowrap;
   vertical-align: middle;
   user-select: none;
-  border: $input-btn-border-width solid transparent;
-  @include button-size($input-btn-padding-y, $input-btn-padding-x, $font-size-base, $input-btn-line-height, $btn-border-radius);
+  border: $btn-border-width solid transparent;
+  @include button-size($btn-padding-y, $btn-padding-x, $font-size-base, $btn-line-height, $btn-border-radius);
   @include transition($btn-transition);
 
   // Share hover and focus styles
@@ -104,11 +104,11 @@ fieldset[disabled] a.btn {
 //
 
 .btn-lg {
-  @include button-size($input-btn-padding-y-lg, $input-btn-padding-x-lg, $font-size-lg, $input-btn-line-height-lg, $btn-border-radius-lg);
+  @include button-size($btn-padding-y-lg, $btn-padding-x-lg, $font-size-lg, $btn-line-height-lg, $btn-border-radius-lg);
 }
 
 .btn-sm {
-  @include button-size($input-btn-padding-y-sm, $input-btn-padding-x-sm, $font-size-sm, $input-btn-line-height-sm, $btn-border-radius-sm);
+  @include button-size($btn-padding-y-sm, $btn-padding-x-sm, $font-size-sm, $btn-line-height-sm, $btn-border-radius-sm);
 }
 
 

scss/_forms.scss

@@ -7,13 +7,13 @@
 .form-control {
   display: block;
   width: 100%;
-  padding: $input-btn-padding-y $input-btn-padding-x;
+  padding: $input-padding-y $input-padding-x;
   font-size: $font-size-base;
-  line-height: $input-btn-line-height;
+  line-height: $input-line-height;
   color: $input-color;
   background-color: $input-bg;
   background-clip: padding-box;
-  border: $input-btn-border-width solid $input-border-color;
+  border: $input-border-width solid $input-border-color;
 
   // Note: This has no effect on <select>s in some browsers, due to the limited stylability of `<select>`s in CSS.
   @if $enable-rounded {
@@ -86,24 +86,24 @@ select.form-control {
 // For use with horizontal and inline forms, when you need the label text to
 // align with the form controls.
 .col-form-label {
-  padding-top: calc(#{$input-btn-padding-y} + #{$input-btn-border-width});
-  padding-bottom: calc(#{$input-btn-padding-y} + #{$input-btn-border-width});
+  padding-top: calc(#{$input-padding-y} + #{$input-border-width});
+  padding-bottom: calc(#{$input-padding-y} + #{$input-border-width});
   margin-bottom: 0; // Override the `<label>` default
-  line-height: $input-btn-line-height;
+  line-height: $input-line-height;
 }
 
 .col-form-label-lg {
-  padding-top: calc(#{$input-btn-padding-y-lg} + #{$input-btn-border-width});
-  padding-bottom: calc(#{$input-btn-padding-y-lg} + #{$input-btn-border-width});
+  padding-top: calc(#{$input-padding-y-lg} + #{$input-border-width});
+  padding-bottom: calc(#{$input-padding-y-lg} + #{$input-border-width});
   font-size: $font-size-lg;
-  line-height: $input-btn-line-height-lg;
+  line-height: $input-line-height-lg;
 }
 
 .col-form-label-sm {
-  padding-top: calc(#{$input-btn-padding-y-sm} + #{$input-btn-border-width});
-  padding-bottom: calc(#{$input-btn-padding-y-sm} + #{$input-btn-border-width});
+  padding-top: calc(#{$input-padding-y-sm} + #{$input-border-width});
+  padding-bottom: calc(#{$input-padding-y-sm} + #{$input-border-width});
   font-size: $font-size-sm;
-  line-height: $input-btn-line-height-sm;
+  line-height: $input-line-height-sm;
 }
 
 
@@ -114,8 +114,8 @@ select.form-control {
 // For use with horizontal and inline forms, when you need the legend text to
 // be the same size as regular labels, and to align with the form controls.
 .col-form-legend {
-  padding-top: $input-btn-padding-y;
-  padding-bottom: $input-btn-padding-y;
+  padding-top: $input-padding-y;
+  padding-bottom: $input-padding-y;
   margin-bottom: 0;
   font-size: $font-size-base;
 }
@@ -129,13 +129,13 @@ select.form-control {
 .form-control-plaintext {
   display: block;
   width: 100%;
-  padding-top: $input-btn-padding-y;
-  padding-bottom: $input-btn-padding-y;
+  padding-top: $input-padding-y;
+  padding-bottom: $input-padding-y;
   margin-bottom: 0; // match inputs if this class comes on inputs with default margins
-  line-height: $input-btn-line-height;
+  line-height: $input-line-height;
   background-color: transparent;
   border: solid transparent;
-  border-width: $input-btn-border-width 0;
+  border-width: $input-border-width 0;
 
   &.form-control-sm,
   &.form-control-lg {
@@ -154,9 +154,9 @@ select.form-control {
 // issue documented in https://github.com/twbs/bootstrap/issues/15074.
 
 .form-control-sm {
-  padding: $input-btn-padding-y-sm $input-btn-padding-x-sm;
+  padding: $input-padding-y-sm $input-padding-x-sm;
   font-size: $font-size-sm;
-  line-height: $input-btn-line-height-sm;
+  line-height: $input-line-height-sm;
   @include border-radius($input-border-radius-sm);
 }
 
@@ -167,9 +167,9 @@ select.form-control-sm {
 }
 
 .form-control-lg {
-  padding: $input-btn-padding-y-lg $input-btn-padding-x-lg;
+  padding: $input-padding-y-lg $input-padding-x-lg;
   font-size: $font-size-lg;
-  line-height: $input-btn-line-height-lg;
+  line-height: $input-line-height-lg;
   @include border-radius($input-border-radius-lg);
 }
 

scss/_input-group.scss

@@ -78,26 +78,26 @@
 //
 
 .input-group-addon {
-  padding: $input-btn-padding-y $input-btn-padding-x;
+  padding: $input-padding-y $input-padding-x;
   margin-bottom: 0; // Allow use of <label> elements by overriding our default margin-bottom
   font-size: $font-size-base; // Match inputs
   font-weight: $font-weight-normal;
-  line-height: $input-btn-line-height;
+  line-height: $input-line-height;
   color: $input-group-addon-color;
   text-align: center;
   background-color: $input-group-addon-bg;
-  border: $input-btn-border-width solid $input-group-addon-border-color;
+  border: $input-border-width solid $input-group-addon-border-color;
   @include border-radius($input-border-radius);
 
   // Sizing
   &.form-control-sm {
-    padding: $input-btn-padding-y-sm $input-btn-padding-x-sm;
+    padding: $input-padding-y-sm $input-padding-x-sm;
     font-size: $font-size-sm;
     @include border-radius($input-border-radius-sm);
   }
 
   &.form-control-lg {
-    padding: $input-btn-padding-y-lg $input-btn-padding-x-lg;
+    padding: $input-padding-y-lg $input-padding-x-lg;
     font-size: $font-size-lg;
     @include border-radius($input-border-radius-lg);
   }
@@ -168,7 +168,7 @@
     position: relative;
 
     + .btn {
-      margin-left: (-$input-btn-border-width);
+      margin-left: (-$input-border-width);
     }
 
     // Bring the "active" button to the front
@@ -185,19 +185,19 @@
   &:not(:last-child) {
     > .btn,
     > .btn-group {
-      margin-right: (-$input-btn-border-width);
+      margin-right: (-$input-border-width);
     }
   }
   &:not(:first-child) {
     > .btn,
     > .btn-group {
       z-index: 1;
-      // remove nagative margin ($input-btn-border-width) to solve overlapping issue with button.
+      // remove nagative margin ($input-border-width) to solve overlapping issue with button.
       margin-left: 0;
 
       // When input is first, overlap the right side of it with the button(-group)
       &:first-child {
-        margin-left: (-$input-btn-border-width);
+        margin-left: (-$input-border-width);
       }
 
       // Because specificity

scss/_variables.scss

@@ -310,9 +310,9 @@ $table-dark-border-color:     lighten($gray-900, 7.5%) !default;
 $table-dark-color:            $body-bg !default;
 
 
-// Buttons
+// Buttons + Forms
 //
-// For each of Bootstrap's buttons, define text, background and border color.
+// Shared variables that are reassigned to `$input-` and `$btn-` specific variables.
 
 $input-btn-padding-y:         .375rem !default;
 $input-btn-padding-x:         .75rem !default;
@@ -330,6 +330,27 @@ $input-btn-padding-y-lg:      .5rem !default;
 $input-btn-padding-x-lg:      1rem !default;
 $input-btn-line-height-lg:    $line-height-lg !default;
 
+$input-btn-border-width:      $border-width !default;
+
+
+// Buttons
+//
+// For each of Bootstrap's buttons, define text, background, and border color.
+
+$btn-padding-y:               $input-btn-padding-y !default;
+$btn-padding-x:               $input-btn-padding-x !default;
+$btn-line-height:             $input-btn-line-height !default;
+
+$btn-padding-y-sm:            $input-btn-padding-y-sm !default;
+$btn-padding-x-sm:            $input-btn-padding-x-sm !default;
+$btn-line-height-sm:          $input-btn-line-height-sm !default;
+
+$btn-padding-y-lg:            $input-btn-padding-y-lg !default;
+$btn-padding-x-lg:            $input-btn-padding-x-lg !default;
+$btn-line-height-lg:          $input-btn-line-height-lg !default;
+
+$btn-border-width:            $input-btn-border-width !default;
+
 $btn-font-weight:             $font-weight-normal !default;
 $btn-box-shadow:              inset 0 1px 0 rgba($white, .15), 0 1px 1px rgba($black, .075) !default;
 $btn-active-box-shadow:       inset 0 3px 5px rgba($black, .125) !default;
@@ -348,12 +369,24 @@ $btn-transition:              color .15s ease-in-out, background-color .15s ease
 
 // Forms
 
+$input-padding-y:                       $input-btn-padding-y !default;
+$input-padding-x:                       $input-btn-padding-x !default;
+$input-line-height:                     $input-btn-line-height !default;
+
+$input-padding-y-sm:                    $input-btn-padding-y-sm !default;
+$input-padding-x-sm:                    $input-btn-padding-x-sm !default;
+$input-line-height-sm:                  $input-btn-line-height-sm !default;
+
+$input-padding-y-lg:                    $input-btn-padding-y-lg !default;
+$input-padding-x-lg:                    $input-btn-padding-x-lg !default;
+$input-line-height-lg:                  $input-btn-line-height-lg !default;
+
 $input-bg:                              $white !default;
 $input-disabled-bg:                     $gray-200 !default;
 
 $input-color:                           $gray-700 !default;
 $input-border-color:                    $gray-400 !default;
-$input-btn-border-width:                $border-width !default; // For form controls and buttons
+$input-border-width:                    $input-btn-border-width !default;
 $input-box-shadow:                      inset 0 1px 1px rgba($black, .075) !default;
 
 $input-border-radius:                   $border-radius !default;