append btn-* and input-* variables and extends their from input-btn-* variables

diff --git a/scss/_button-group.scss b/scss/_button-group.scss
index 1a373f323282b31e07f13bd851bfb9120a53621d..391adb7cee499ade861943469061f0741cf1e648 100644 (file)
--- a/scss/_button-group.scss
+++ b/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;
   }
 }
 
@@ -98,8 +98,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;
@@ -107,13 +107,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;
 }
 
 
@@ -147,7 +147,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;
   }
 

diff --git a/scss/_buttons.scss b/scss/_buttons.scss
index 72fc5f34062afa63631ed04d61d3740cfb2e37d4..eb60a852911325e80560db2765ccbb4819425bfb 100644 (file)
--- a/scss/_buttons.scss
+++ b/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);
 }
 
 

diff --git a/scss/_forms.scss b/scss/_forms.scss
index 80bc7f3ba875f7ce222bff7ba42e074390b38d5b..5ac3f88a2f77c362485199317a8d1d847cbe7a40 100644 (file)
--- a/scss/_forms.scss
+++ b/scss/_forms.scss
@@ -7,15 +7,15 @@
 .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;
   // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214.
   background-image: none;
   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 {
@@ -88,24 +88,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;
 }
 
 
@@ -116,8 +116,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 {
 // text (without any border, background color, focus indicator)
 
 .form-control-plaintext {
-  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);
 }
 

diff --git a/scss/_input-group.scss b/scss/_input-group.scss
index a1d16e3848e7fd773951d9a3f9753179dcb30eb1..f5eed46f9f82cb35da3602d6f68ac67e4a68c0a1 100644 (file)
--- a/scss/_input-group.scss
+++ b/scss/_input-group.scss
@@ -66,26 +66,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);
   }
@@ -145,7 +145,7 @@
     position: relative;
 
     + .btn {
-      margin-left: (-$input-btn-border-width);
+      margin-left: (-$input-border-width);
     }
 
     // Bring the "active" button to the front
@@ -162,19 +162,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: 2;
-      // 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

diff --git a/scss/_variables.scss b/scss/_variables.scss
index af0846806ee78cb88457e989209334fcc6a898b1..f141994df5c7ee89dbf56ca137edd3aee91a6284 100644 (file)
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -306,9 +306,7 @@ $table-dark-border-color:     lighten($gray-900, 7.5%) !default;
 $table-dark-color:            $body-bg !default;
 
 
-// Buttons
-//
-// For each of Bootstrap's buttons, define text, background and border color.
+// Buttons + Forms common varialbes
 
 $input-btn-padding-y:         .375rem !default;
 $input-btn-padding-x:         .75rem !default;
@@ -322,6 +320,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; // For form controls and buttons
+
+
+// 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-focus-box-shadow:        0 0 0 3px rgba(theme-color("primary"), .25) !default;
@@ -341,12 +360,24 @@ $btn-transition:              background-color .15s ease-in-out, border-color .1
 
 // 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;