nuke the shared padding vars and assign to individual components

- no real need for everything to be 100% shared
- padding looked and felt too large for inputs but not for buttons
- tying forms and buttons seems fine, but throwing in pagination feels wrong

dist/css/bootstrap.css

@@ -1859,7 +1859,7 @@ pre code {
 .form-control {
   display: block;
   width: 100%;
-  padding: .5rem 1rem;
+  padding: .5rem .75rem;
   font-size: 1rem;
   line-height: 1.5;
   color: #55595c;
@@ -1917,7 +1917,7 @@ fieldset[disabled] .form-control {
 }
 
 .form-control-label {
-  padding: .5625rem 1rem;
+  padding: .5625rem .75rem;
   margin-bottom: 0;
 }
 
@@ -2069,7 +2069,7 @@ fieldset[disabled] .checkbox label {
 .form-control-success,
 .form-control-warning,
 .form-control-error {
-  padding-right: 3rem;
+  padding-right: 2.25rem;
   background-repeat: no-repeat;
   background-position: center right .65625rem;
   -webkit-background-size: 1.70625rem 1.70625rem;
@@ -2832,13 +2832,6 @@ fieldset[disabled] .btn-link:hover {
   border-radius: .2rem;
 }
 
-.btn-xs, .btn-group-xs > .btn {
-  padding: .2rem .5rem;
-  font-size: .75rem;
-  line-height: 1.5;
-  border-radius: .2rem;
-}
-
 .btn-block {
   display: block;
   width: 100%;
@@ -3262,7 +3255,7 @@ input[type="button"].btn-block {
 }
 
 .input-group-addon {
-  padding: .5rem 1rem;
+  padding: .5rem .75rem;
   font-size: 1rem;
   font-weight: normal;
   line-height: 1;
@@ -3282,7 +3275,7 @@ input[type="button"].btn-block {
 
 .input-group-addon.form-control-lg, .input-group-lg > .input-group-addon,
 .input-group-lg > .input-group-btn > .input-group-addon.btn {
-  padding: .75rem 1.5rem;
+  padding: 1.5rem 1.5rem;
   font-size: 1.25rem;
   border-radius: .3rem;
 }
@@ -4253,7 +4246,7 @@ input[type="button"].btn-block {
 .pagination > li > span {
   position: relative;
   float: left;
-  padding: .5rem 1rem;
+  padding: .5rem .75rem;
   margin-left: -1px;
   line-height: 1.5;
   color: #0275d8;

docs/dist/css/bootstrap.css

@@ -1859,7 +1859,7 @@ pre code {
 .form-control {
   display: block;
   width: 100%;
-  padding: .5rem 1rem;
+  padding: .5rem .75rem;
   font-size: 1rem;
   line-height: 1.5;
   color: #55595c;
@@ -1917,7 +1917,7 @@ fieldset[disabled] .form-control {
 }
 
 .form-control-label {
-  padding: .5625rem 1rem;
+  padding: .5625rem .75rem;
   margin-bottom: 0;
 }
 
@@ -2069,7 +2069,7 @@ fieldset[disabled] .checkbox label {
 .form-control-success,
 .form-control-warning,
 .form-control-error {
-  padding-right: 3rem;
+  padding-right: 2.25rem;
   background-repeat: no-repeat;
   background-position: center right .65625rem;
   -webkit-background-size: 1.70625rem 1.70625rem;
@@ -2832,13 +2832,6 @@ fieldset[disabled] .btn-link:hover {
   border-radius: .2rem;
 }
 
-.btn-xs, .btn-group-xs > .btn {
-  padding: .2rem .5rem;
-  font-size: .75rem;
-  line-height: 1.5;
-  border-radius: .2rem;
-}
-
 .btn-block {
   display: block;
   width: 100%;
@@ -3262,7 +3255,7 @@ input[type="button"].btn-block {
 }
 
 .input-group-addon {
-  padding: .5rem 1rem;
+  padding: .5rem .75rem;
   font-size: 1rem;
   font-weight: normal;
   line-height: 1;
@@ -3282,7 +3275,7 @@ input[type="button"].btn-block {
 
 .input-group-addon.form-control-lg, .input-group-lg > .input-group-addon,
 .input-group-lg > .input-group-btn > .input-group-addon.btn {
-  padding: .75rem 1.5rem;
+  padding: 1.5rem 1.5rem;
   font-size: 1.25rem;
   border-radius: .3rem;
 }
@@ -4253,7 +4246,7 @@ input[type="button"].btn-block {
 .pagination > li > span {
   position: relative;
   float: left;
-  padding: .5rem 1rem;
+  padding: .5rem .75rem;
   margin-left: -1px;
   line-height: 1.5;
   color: #0275d8;

scss/_button-group.scss

@@ -99,7 +99,6 @@
 //
 // Remix the default button sizing classes into new ones for easier manipulation.
 
-.btn-group-xs > .btn { @extend .btn-xs; }
 .btn-group-sm > .btn { @extend .btn-sm; }
 .btn-group-lg > .btn { @extend .btn-lg; }
 

scss/_buttons.scss

@@ -17,7 +17,7 @@
   cursor: pointer;
   user-select: none;
   border: $border-width solid transparent;
-  @include button-size($padding-y, $padding-x, $font-size-base, $line-height, $btn-border-radius);
+  @include button-size($btn-padding-y, $btn-padding-x, $font-size-base, $line-height, $btn-border-radius);
   transition: all .2s ease-in-out;
 
   &,
@@ -150,14 +150,11 @@ fieldset[disabled] a.btn {
 
 .btn-lg {
   // line-height: ensure even-numbered height of button next to large input
-  @include button-size($padding-lg-y, $padding-lg-x, $font-size-lg, $line-height-lg, $btn-border-radius-lg);
+  @include button-size($btn-padding-y-lg, $btn-padding-x-lg, $font-size-lg, $line-height-lg, $btn-border-radius-lg);
 }
 .btn-sm {
   // line-height: ensure proper height of button next to small input
-  @include button-size($padding-sm-y, $padding-sm-x, $font-size-sm, $line-height-sm, $btn-border-radius-sm);
-}
-.btn-xs {
-  @include button-size($padding-xs-y, $padding-xs-x, $font-size-xs, $line-height-sm, $btn-border-radius-sm);
+  @include button-size($btn-padding-y-sm, $btn-padding-x-sm, $font-size-sm, $line-height-sm, $btn-border-radius-sm);
 }
 
 

scss/_forms.scss

@@ -12,7 +12,7 @@
   width: 100%;
   // // Make inputs at least the height of their button counterpart (base line-height + padding + border)
   // height: $input-height;
-  padding: $padding-y $padding-x;
+  padding: $input-padding-y $input-padding-x;
   font-size: $font-size-base;
   line-height: $line-height;
   color: $input-color;
@@ -83,7 +83,7 @@
 // For use with horizontal and inline forms, when you need the label text to
 // align with the form controls.
 .form-control-label {
-  padding: ($padding-y + $border-width) $padding-x;
+  padding: ($input-padding-y + $border-width) $input-padding-x;
   margin-bottom: 0; // Override the `<label>` default
 }
 
@@ -127,8 +127,8 @@
 .form-control-static {
   min-height: $input-height;
   // Size it appropriately next to real form controls
-  padding-top: ($padding-y + $border-width);
-  padding-bottom: ($padding-y + $border-width);
+  padding-top: ($input-padding-y + $border-width);
+  padding-bottom: ($input-padding-y + $border-width);
   // Remove default margin from `p`
   margin-bottom: 0;
 
@@ -150,7 +150,7 @@
 
 .form-control-sm {
   height: $input-height-sm;
-  padding: $padding-sm-y $padding-sm-x;
+  padding: $input-padding-y-sm $input-padding-x-sm;
   font-size: $font-size-sm;
   line-height: $line-height-sm;
   border-radius: $input-border-radius-sm;
@@ -158,7 +158,7 @@
 
 .form-control-lg {
   height: $input-height-lg;
-  padding: $padding-lg-y $padding-lg-x;
+  padding: $input-padding-y-lg $input-padding-x-lg;
   font-size: $font-size-lg;
   line-height: $line-height-lg;
   border-radius: $input-border-radius-lg;
@@ -270,7 +270,7 @@ input[type="checkbox"] {
 .form-control-success,
 .form-control-warning,
 .form-control-error {
-  padding-right: ($padding-x * 3);
+  padding-right: ($input-padding-x * 3);
   background-position: center right ($input-height * .25);
   background-size: ($input-height * .65) ($input-height * .65);
   background-repeat: no-repeat;

scss/_input-group.scss

@@ -85,7 +85,7 @@
 //
 
 .input-group-addon {
-  padding: $padding-y $padding-x;
+  padding: $input-padding-y $input-padding-x;
   font-size: $font-size-base;
   font-weight: normal;
   line-height: 1;
@@ -97,12 +97,12 @@
 
   // Sizing
   &.form-control-sm {
-    padding: $padding-sm-y $padding-sm-x;
+    padding: $input-padding-y-sm $input-padding-x-sm;
     font-size: $font-size-sm;
     @include border-radius($border-radius-sm);
   }
   &.form-control-lg {
-    padding: $padding-lg-y $padding-lg-x;
+    padding: $input-padding-x-lg $input-padding-x-lg;
     font-size: $font-size-lg;
     @include border-radius($border-radius-lg);
   }

scss/_pagination.scss

@@ -17,7 +17,7 @@
     > span {
       position: relative;
       float: left; // Collapse white-space
-      padding: $padding-y $padding-x;
+      padding: $pagination-padding-y $pagination-padding-x;
       margin-left: -1px;
       line-height: $line-height;
       color: $pagination-color;
@@ -79,9 +79,9 @@
 //
 
 .pagination-lg {
-  @include pagination-size($padding-lg-y, $padding-lg-x, $font-size-lg, $line-height-lg, $border-radius-lg);
+  @include pagination-size($pagination-padding-y-lg, $pagination-padding-x-lg, $font-size-lg, $line-height-lg, $border-radius-lg);
 }
 
 .pagination-sm {
-  @include pagination-size($padding-sm-y, $padding-sm-x, $font-size-sm, $line-height-sm, $border-radius-sm);
+  @include pagination-size($pagination-padding-y-sm, $pagination-padding-x-sm, $font-size-sm, $line-height-sm, $border-radius-sm);
 }

scss/_variables.scss

@@ -161,18 +161,6 @@ $headings-color:             inherit !default;
 //
 // Define common padding and border radius sizes and more. Values based on 14px text and 1.428 line-height (~20px to start).
 
-$padding-y:              .5rem !default;
-$padding-x:              1rem !default;
-
-$padding-lg-y:           .75rem !default;
-$padding-lg-x:           1.5rem !default;
-
-$padding-sm-y:           .275rem !default;
-$padding-sm-x:           .75rem !default;
-
-$padding-xs-y:           .2rem !default;
-$padding-xs-x:           .5rem !default;
-
 $line-height-lg:         (4/3) !default;
 $line-height-sm:         1.5 !default;
 
@@ -206,6 +194,8 @@ $table-border-color:            $gray-lighter !default;
 //
 // For each of Bootstrap's buttons, define text, background and border color.
 
+$btn-padding-x:                  1rem;
+$btn-padding-y:                  .5rem;
 $btn-font-weight:                normal !default;
 
 $btn-primary-color:              #fff !default;
@@ -234,6 +224,12 @@ $btn-danger-border:              $btn-danger-bg !default;
 
 $btn-link-disabled-color:        $gray-light !default;
 
+$btn-padding-x-sm:               .75rem !default;
+$btn-padding-y-sm:               .275rem !default;
+
+$btn-padding-x-lg:               1.5rem !default;
+$btn-padding-y-lg:               .75rem !default;
+
 // Allows for customizing button radius independently from global border radius
 $btn-border-radius:              $border-radius;
 $btn-border-radius-lg:           $border-radius-lg;
@@ -242,6 +238,9 @@ $btn-border-radius-sm:           $border-radius-sm;
 
 // Forms
 
+$input-padding-x:                .75rem !default;
+$input-padding-y:                .5rem !default;
+
 $input-bg:                       #fff !default;
 $input-bg-disabled:              $gray-lighter !default;
 
@@ -258,9 +257,15 @@ $input-box-shadow-focus:         rgba(102,175,233,.6) !default;
 
 $input-color-placeholder:        #999 !default;
 
-$input-height:                   (($font-size-base * $line-height) + ($padding-y * 2) + ($border-width * 2)) !default;
-$input-height-lg:                (($font-size-lg * $line-height-lg) + ($padding-lg-y * 2) + ($border-width * 2)) !default;
-$input-height-sm:                (($font-size-sm * $line-height-sm) + ($padding-sm-y * 2) + ($border-width * 2)) !default;
+$input-padding-x-sm:             .75rem !default;
+$input-padding-y-sm:             .275rem !default;
+
+$input-padding-x-lg:             1.5rem !default;
+$input-padding-y-lg:             .75rem !default;
+
+$input-height:                   (($font-size-base * $line-height) + ($input-padding-y * 2) + ($border-width * 2)) !default;
+$input-height-lg:                (($font-size-lg * $line-height-lg) + ($input-padding-y-lg * 2) + ($border-width * 2)) !default;
+$input-height-sm:                (($font-size-sm * $line-height-sm) + ($input-padding-y-sm * 2) + ($border-width * 2)) !default;
 
 $form-group-margin-bottom:       15px;
 
@@ -391,6 +396,14 @@ $nav-pills-active-link-hover-color:         $component-active-color !default;
 
 // Pagination
 
+$pagination-padding-x:                .75rem !default;
+$pagination-padding-y:                .5rem !default;
+$pagination-padding-x-sm:             .75rem !default;
+$pagination-padding-y-sm:             .275rem !default;
+$pagination-padding-x-lg:             1.5rem !default;
+$pagination-padding-y-lg:             .75rem !default;
+
+
 $pagination-color:                     $link-color !default;
 $pagination-bg:                        #fff !default;
 $pagination-border:                    #ddd !default;

scss/mixins/_buttons.scss

@@ -84,8 +84,8 @@
 }
 
 // Button sizes
-@mixin button-size($padding-vertical, $padding-horizontal, $font-size, $line-height, $border-radius) {
-  padding: $padding-vertical $padding-horizontal;
+@mixin button-size($padding-y, $padding-x, $font-size, $line-height, $border-radius) {
+  padding: $padding-y $padding-x;
   font-size: $font-size;
   line-height: $line-height;
   @include border-radius($border-radius);