diff --git a/scss/_button-group.scss b/scss/_button-group.scss index 12d4982aab4ecddd2fbd624c16898d07dc011a45..2ed2f7ac75ae8c380af4f15fb5236dfc7c273b14 100644 --- 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; } } @@ -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; } diff --git a/scss/_buttons.scss b/scss/_buttons.scss index 16a478e104e5597b7c003e7ec7a1aeca7f605fda..36728696d0de6a3c544e2b5f8a2b987199fb96f0 100644 --- 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 42f2399e87019377ff61f166d85423bcd94386a8..d2a1b3601d86bc6593884cc7720e4f62c18206d0 100644 --- a/scss/_forms.scss +++ b/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); } diff --git a/scss/_input-group.scss b/scss/_input-group.scss index 9315051ffde7aabd3a7536c6ac62ae583c1dad00..a08abf232640727da123f549221e3513dd04f26f 100644 --- a/scss/_input-group.scss +++ b/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 diff --git a/scss/_variables.scss b/scss/_variables.scss index 50972c53b9bd9aa746816079ac4744d141914e42..9697fd8619d91e284eef280aacb4c026b5f1ba57 100644 --- a/scss/_variables.scss +++ b/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;