diff options
author | Mark Otto <markd.otto@gmail.com> | 2017-03-28 19:28:27 +0300 |
---|---|---|
committer | GitHub <noreply@github.com> | 2017-03-28 19:28:27 +0300 |
commit | 296c99020c0f7c8122b8cd1a7f93c0797f8ff8dd (patch) | |
tree | 4eb8ce3596e17ef97b001c7531b3589435ec17c1 /scss | |
parent | 904efc043d298904d8020df7325bf01a5825a780 (diff) |
Revamp button and input vars while fixing #21587 (#22287)
Diffstat (limited to 'scss')
-rw-r--r-- | scss/_button-group.scss | 12 | ||||
-rw-r--r-- | scss/_buttons.scss | 10 | ||||
-rw-r--r-- | scss/_forms.scss | 40 | ||||
-rw-r--r-- | scss/_input-group.scss | 9 | ||||
-rw-r--r-- | scss/_variables.scss | 41 | ||||
-rw-r--r-- | scss/mixins/_buttons.scss | 3 |
6 files changed, 56 insertions, 59 deletions
diff --git a/scss/_button-group.scss b/scss/_button-group.scss index facecd37ae..af74a55f1c 100644 --- a/scss/_button-group.scss +++ b/scss/_button-group.scss @@ -99,8 +99,8 @@ // .btn + .dropdown-toggle-split { - padding-right: $btn-padding-x * .75; - padding-left: $btn-padding-x * .75; + padding-right: $input-btn-padding-x * .75; + padding-left: $input-btn-padding-x * .75; &::after { margin-left: 0; @@ -108,13 +108,13 @@ } .btn-sm + .dropdown-toggle-split { - padding-right: $btn-padding-x-sm * .75; - padding-left: $btn-padding-x-sm * .75; + padding-right: $input-btn-padding-x-sm * .75; + padding-left: $input-btn-padding-x-sm * .75; } .btn-lg + .dropdown-toggle-split { - padding-right: $btn-padding-x-lg * .75; - padding-left: $btn-padding-x-lg * .75; + padding-right: $input-btn-padding-x-lg * .75; + padding-left: $input-btn-padding-x-lg * .75; } diff --git a/scss/_buttons.scss b/scss/_buttons.scss index 2964a526d0..4a8ffcbe57 100644 --- a/scss/_buttons.scss +++ b/scss/_buttons.scss @@ -7,13 +7,12 @@ .btn { display: inline-block; font-weight: $btn-font-weight; - line-height: $btn-line-height; text-align: center; white-space: nowrap; vertical-align: middle; user-select: none; border: $input-btn-border-width solid transparent; - @include button-size($btn-padding-y, $btn-padding-x, $font-size-base, $btn-border-radius); + @include button-size($input-btn-padding-y, $input-btn-padding-x, $font-size-base, $input-btn-line-height, $btn-border-radius); @include transition($btn-transition); // Share hover and focus styles @@ -137,12 +136,11 @@ fieldset[disabled] a.btn { // .btn-lg { - // line-height: ensure even-numbered height of button next to large input - @include button-size($btn-padding-y-lg, $btn-padding-x-lg, $font-size-lg, $btn-border-radius-lg); + @include button-size($input-btn-padding-y-lg, $input-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($btn-padding-y-sm, $btn-padding-x-sm, $font-size-sm, $btn-border-radius-sm); + @include button-size($input-btn-padding-y-sm, $input-btn-padding-x-sm, $font-size-sm, $line-height-sm, $btn-border-radius-sm); } diff --git a/scss/_forms.scss b/scss/_forms.scss index 4ec9f6e329..11fa94a25d 100644 --- a/scss/_forms.scss +++ b/scss/_forms.scss @@ -9,9 +9,9 @@ width: 100%; // // Make inputs at least the height of their button counterpart (base line-height + padding + border) // height: $input-height; - padding: $input-padding-y $input-padding-x; + padding: $input-btn-padding-y $input-btn-padding-x; font-size: $font-size-base; - line-height: $input-line-height; + line-height: $input-btn-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. @@ -95,20 +95,20 @@ 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-padding-y} - #{$input-btn-border-width} * 2); - padding-bottom: calc(#{$input-padding-y} - #{$input-btn-border-width} * 2); + padding-top: calc(#{$input-btn-padding-y} - #{$input-btn-border-width} * 2); + padding-bottom: calc(#{$input-btn-padding-y} - #{$input-btn-border-width} * 2); margin-bottom: 0; // Override the `<label>` default } .col-form-label-lg { - padding-top: calc(#{$input-padding-y-lg} - #{$input-btn-border-width} * 2); - padding-bottom: calc(#{$input-padding-y-lg} - #{$input-btn-border-width} * 2); + padding-top: calc(#{$input-btn-padding-y-lg} - #{$input-btn-border-width} * 2); + padding-bottom: calc(#{$input-btn-padding-y-lg} - #{$input-btn-border-width} * 2); font-size: $font-size-lg; } .col-form-label-sm { - padding-top: calc(#{$input-padding-y-sm} - #{$input-btn-border-width} * 2); - padding-bottom: calc(#{$input-padding-y-sm} - #{$input-btn-border-width} * 2); + padding-top: calc(#{$input-btn-padding-y-sm} - #{$input-btn-border-width} * 2); + padding-bottom: calc(#{$input-btn-padding-y-sm} - #{$input-btn-border-width} * 2); font-size: $font-size-sm; } @@ -120,8 +120,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-padding-y; - padding-bottom: $input-padding-y; + padding-top: $input-btn-padding-y; + padding-bottom: $input-btn-padding-y; margin-bottom: 0; font-size: $font-size-base; } @@ -133,10 +133,10 @@ select.form-control { // horizontal form layout. .form-control-static { - padding-top: $input-padding-y; - padding-bottom: $input-padding-y; + padding-top: $input-btn-padding-y; + padding-bottom: $input-btn-padding-y; margin-bottom: 0; // match inputs if this class comes on inputs with default margins - line-height: $input-line-height; + line-height: $input-btn-line-height; border: solid transparent; border-width: $input-btn-border-width 0; @@ -157,26 +157,30 @@ select.form-control { // issue documented in https://github.com/twbs/bootstrap/issues/15074. .form-control-sm { - padding: $input-padding-y-sm $input-padding-x-sm; + padding: $input-btn-padding-y-sm $input-btn-padding-x-sm; font-size: $font-size-sm; + line-height: $input-btn-line-height-sm; @include border-radius($input-border-radius-sm); } select.form-control-sm { &:not([size]):not([multiple]) { - height: $input-height-sm; + $select-border-width: ($border-width * 2); + height: calc(#{$input-height-sm} + #{$select-border-width}); } } .form-control-lg { - padding: $input-padding-y-lg $input-padding-x-lg; + padding: $input-btn-padding-y-lg $input-btn-padding-x-lg; font-size: $font-size-lg; + line-height: $input-btn-line-height-lg; @include border-radius($input-border-radius-lg); } select.form-control-lg { &:not([size]):not([multiple]) { - height: $input-height-lg; + $select-border-width: ($border-width * 2); + height: calc(#{$input-height-lg} + #{$select-border-width}); } } @@ -253,7 +257,7 @@ select.form-control-lg { .form-control-success, .form-control-warning, .form-control-danger { - padding-right: ($input-padding-x * 3); + padding-right: ($input-btn-padding-x * 3); background-repeat: no-repeat; background-position: center right ($input-height / 4); background-size: ($input-height / 2) ($input-height / 2); diff --git a/scss/_input-group.scss b/scss/_input-group.scss index 49cdf28300..0b668bff3c 100644 --- a/scss/_input-group.scss +++ b/scss/_input-group.scss @@ -66,11 +66,11 @@ // .input-group-addon { - padding: $input-padding-y $input-padding-x; + padding: $input-btn-padding-y $input-btn-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-line-height; + line-height: $input-btn-line-height; color: $input-color; text-align: center; background-color: $input-group-addon-bg; @@ -79,12 +79,13 @@ // Sizing &.form-control-sm { - padding: $input-padding-y-sm $input-padding-x-sm; + padding: $input-btn-padding-y-sm $input-btn-padding-x-sm; font-size: $font-size-sm; @include border-radius($input-border-radius-sm); } + &.form-control-lg { - padding: $input-padding-y-lg $input-padding-x-lg; + padding: $input-btn-padding-y-lg $input-btn-padding-x-lg; font-size: $font-size-lg; @include border-radius($input-border-radius-lg); } diff --git a/scss/_variables.scss b/scss/_variables.scss index 0fa4f334b0..e8ead30335 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -221,7 +221,7 @@ $grid-gutter-widths: ( // // Define common padding and border radius sizes and more. -$line-height-lg: (4 / 3) !default; +$line-height-lg: 1.5 !default; $line-height-sm: 1.5 !default; $border-width: 1px !default; @@ -338,9 +338,18 @@ $table-inverse-color: $body-bg !default; // // For each of Bootstrap's buttons, define text, background and border color. -$btn-padding-x: 1rem !default; -$btn-padding-y: .5rem !default; -$btn-line-height: 1.25 !default; +$input-btn-padding-x: 1rem !default; +$input-btn-padding-y: .5rem !default; +$input-btn-line-height: 1.25 !default; + +$input-btn-padding-x-sm: .5rem !default; +$input-btn-padding-y-sm: .25rem !default; +$input-btn-line-height-sm: 1.5 !default; + +$input-btn-padding-x-lg: 1rem !default; +$input-btn-padding-y-lg: .5rem !default; +$input-btn-line-height-lg: 1.5 !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 2px rgba($brand-primary, .25) !default; @@ -372,12 +381,6 @@ $btn-danger-border: $btn-danger-bg !default; $btn-link-disabled-color: $gray-light !default; -$btn-padding-x-sm: .5rem !default; -$btn-padding-y-sm: .25rem !default; - -$btn-padding-x-lg: 1.5rem !default; -$btn-padding-y-lg: .75rem !default; - $btn-block-spacing-y: .5rem !default; // Allows for customizing button radius independently from global border radius @@ -390,10 +393,6 @@ $btn-transition: all .2s ease-in-out !default; // Forms -$input-padding-x: .75rem !default; -$input-padding-y: .5rem !default; -$input-line-height: 1.25 !default; - $input-bg: $white !default; $input-bg-disabled: $gray-lighter !default; @@ -413,15 +412,9 @@ $input-color-focus: $input-color !default; $input-color-placeholder: $gray-light !default; -$input-padding-x-sm: .5rem !default; -$input-padding-y-sm: .25rem !default; - -$input-padding-x-lg: 1.5rem !default; -$input-padding-y-lg: .75rem !default; - -$input-height: (($font-size-base * $input-line-height) + ($input-padding-y * 2)) !default; -$input-height-lg: (($font-size-lg * $line-height-lg) + ($input-padding-y-lg * 2)) !default; -$input-height-sm: (($font-size-sm * $line-height-sm) + ($input-padding-y-sm * 2)) !default; +$input-height: (($font-size-base * $input-btn-line-height) + ($input-btn-padding-y * 2)) !default; +$input-height-lg: (($font-size-lg * $input-btn-line-height-lg) + ($input-btn-padding-y-lg * 2)) !default; +$input-height-sm: (($font-size-sm * $input-btn-line-height-sm) + ($input-btn-padding-y-sm * 2)) !default; $input-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s !default; @@ -479,7 +472,7 @@ $custom-radio-checked-icon: str-replace(url("data:image/svg+xml;charset=utf8,%3C $custom-select-padding-x: .75rem !default; $custom-select-padding-y: .375rem !default; $custom-select-indicator-padding: 1rem !default; // Extra padding to account for the presence of the background-image based indicator -$custom-select-line-height: $input-line-height !default; +$custom-select-line-height: $input-btn-line-height !default; $custom-select-color: $input-color !default; $custom-select-disabled-color: $gray-light !default; $custom-select-bg: $white !default; diff --git a/scss/mixins/_buttons.scss b/scss/mixins/_buttons.scss index 91eb44409f..47f2834ff5 100644 --- a/scss/mixins/_buttons.scss +++ b/scss/mixins/_buttons.scss @@ -79,8 +79,9 @@ } // Button sizes -@mixin button-size($padding-y, $padding-x, $font-size, $border-radius) { +@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); } |