diff --git a/README.md b/README.md index 7b38f9aec4..7e451bc22d 100644 --- a/README.md +++ b/README.md @@ -87,7 +87,7 @@ Documentation search is powered by [Algolia's DocSearch](https://community.algol ### Running documentation locally -1. Run through the [tooling setup](https://github.com/twbs/bootstrap/blob/v4-dev/docs/getting-started/build-tools.md#tooling-setup) to install Jekyll (the site builder) and other Ruby dependencies with `bundle install`. +1. Run through the [tooling setup](https://github.com/twbs/bootstrap/blob/v4-dev/docs/4.0/getting-started/build-tools.md#tooling-setup) to install Jekyll (the site builder) and other Ruby dependencies with `bundle install`. 2. Run `npm run test` (or a specific NPM script) to rebuild distributed CSS and JavaScript files, as well as our docs assets. 3. From the root `/bootstrap` directory, run `bundle exec jekyll serve` in the command line. 4. Open in your browser, and voilà. diff --git a/_includes/scripts.html b/_includes/scripts.html index b9a83876b9..bc411c2265 100644 --- a/_includes/scripts.html +++ b/_includes/scripts.html @@ -31,7 +31,7 @@ inputSelector: '#search-input', transformData: function (hits) { return hits.map(function (hit) { - hit.url = hit.url.replace('https://v4-alpha.getbootstrap.com', 'http://localhost:9001/docs/4.0'); + hit.url = hit.url.replace('https://v4-alpha.getbootstrap.com', '/docs/4.0'); return hit; }); }, diff --git a/assets/scss/_nav.scss b/assets/scss/_nav.scss index 3e18b01c74..eaf2f5693a 100644 --- a/assets/scss/_nav.scss +++ b/assets/scss/_nav.scss @@ -33,7 +33,7 @@ position: -webkit-sticky; position: sticky; top: 0; - z-index: 1030; // over everything in bootstrap + z-index: 1071; // over everything in bootstrap } .navbar-nav { diff --git a/js/tests/visual/alert.html b/js/tests/visual/alert.html index 5425b35073..4632e894a5 100644 --- a/js/tests/visual/alert.html +++ b/js/tests/visual/alert.html @@ -44,7 +44,7 @@ - + diff --git a/js/tests/visual/button.html b/js/tests/visual/button.html index 79cfa02480..9aaf08d44f 100644 --- a/js/tests/visual/button.html +++ b/js/tests/visual/button.html @@ -44,7 +44,7 @@ - + diff --git a/js/tests/visual/carousel.html b/js/tests/visual/carousel.html index 27a21efd69..eae9df705b 100644 --- a/js/tests/visual/carousel.html +++ b/js/tests/visual/carousel.html @@ -40,7 +40,7 @@ - + diff --git a/js/tests/visual/dropdown.html b/js/tests/visual/dropdown.html index fee096c6c8..da0c1e4a67 100644 --- a/js/tests/visual/dropdown.html +++ b/js/tests/visual/dropdown.html @@ -117,8 +117,8 @@ - - + + diff --git a/js/tests/visual/modal.html b/js/tests/visual/modal.html index def62b031f..1a607744ff 100644 --- a/js/tests/visual/modal.html +++ b/js/tests/visual/modal.html @@ -169,8 +169,8 @@ - - + + diff --git a/js/tests/visual/popover.html b/js/tests/visual/popover.html index 2354abf425..e26dca4913 100644 --- a/js/tests/visual/popover.html +++ b/js/tests/visual/popover.html @@ -32,8 +32,8 @@ - - + + diff --git a/js/tests/visual/scrollspy.html b/js/tests/visual/scrollspy.html index 0f115e0354..e305bcbdba 100644 --- a/js/tests/visual/scrollspy.html +++ b/js/tests/visual/scrollspy.html @@ -86,8 +86,8 @@

Ad leggings keytar, brunch id art party dolor labore.

- - + + diff --git a/js/tests/visual/tab.html b/js/tests/visual/tab.html index e747302db4..37730e5917 100644 --- a/js/tests/visual/tab.html +++ b/js/tests/visual/tab.html @@ -224,7 +224,8 @@ - + + diff --git a/js/tests/visual/tooltip.html b/js/tests/visual/tooltip.html index 172cb29ad3..fa84a20e4b 100644 --- a/js/tests/visual/tooltip.html +++ b/js/tests/visual/tooltip.html @@ -53,8 +53,8 @@
- - + + diff --git a/scss/_button-group.scss b/scss/_button-group.scss index d4c79ab60b..30a14d8833 100644 --- a/scss/_button-group.scss +++ b/scss/_button-group.scss @@ -12,7 +12,7 @@ flex: 0 1 auto; margin-bottom: 0; - // Bring the hover, focused, and "active" buttons to the fron to overlay + // Bring the hover, focused, and "active" buttons to the front to overlay // the borders properly @include hover { z-index: 2; diff --git a/scss/_card.scss b/scss/_card.scss index 7be2aaf8b5..e45af7bc78 100644 --- a/scss/_card.scss +++ b/scss/_card.scss @@ -6,6 +6,8 @@ position: relative; display: flex; flex-direction: column; + min-width: 0; + word-wrap: break-word; background-color: $card-bg; border: $card-border-width solid $card-border-color; @include border-radius($card-border-radius); @@ -20,7 +22,6 @@ .card-title { margin-bottom: $card-spacer-y; - word-break: break-all; } .card-subtitle { @@ -68,7 +69,7 @@ border-bottom: $card-border-width solid $card-border-color; &:first-child { - @include border-radius($card-border-radius-inner $card-border-radius-inner 0 0); + @include border-radius($card-inner-border-radius $card-inner-border-radius 0 0); } } @@ -78,7 +79,7 @@ border-top: $card-border-width solid $card-border-color; &:last-child { - @include border-radius(0 0 $card-border-radius-inner $card-border-radius-inner); + @include border-radius(0 0 $card-inner-border-radius $card-inner-border-radius); } } @@ -170,18 +171,18 @@ .card-img { width: 100%; // Required because we use flexbox and this inherently applies align-self: stretch - @include border-radius($card-border-radius-inner); + @include border-radius($card-inner-border-radius); } // Card image caps .card-img-top { width: 100%; // Required because we use flexbox and this inherently applies align-self: stretch - @include border-top-radius($card-border-radius-inner); + @include border-top-radius($card-inner-border-radius); } .card-img-bottom { width: 100%; // Required because we use flexbox and this inherently applies align-self: stretch - @include border-bottom-radius($card-border-radius-inner); + @include border-bottom-radius($card-inner-border-radius); } diff --git a/scss/_custom-forms.scss b/scss/_custom-forms.scss index 1d3ce2f183..b58fffb8f5 100644 --- a/scss/_custom-forms.scss +++ b/scss/_custom-forms.scss @@ -23,29 +23,29 @@ opacity: 0; &:checked ~ .custom-control-indicator { - color: $custom-control-checked-indicator-color; - background-color: $custom-control-checked-indicator-bg; - @include box-shadow($custom-control-checked-indicator-box-shadow); + color: $custom-control-indicator-checked-color; + background-color: $custom-control-indicator-checked-bg; + @include box-shadow($custom-control-indicator-checked-box-shadow); } &:focus ~ .custom-control-indicator { // the mixin is not used here to make sure there is feedback - box-shadow: $custom-control-focus-indicator-box-shadow; + box-shadow: $custom-control-indicator-focus-box-shadow; } &:active ~ .custom-control-indicator { - color: $custom-control-active-indicator-color; - background-color: $custom-control-active-indicator-bg; - @include box-shadow($custom-control-active-indicator-box-shadow); + color: $custom-control-indicator-active-color; + background-color: $custom-control-indicator-active-bg; + @include box-shadow($custom-control-indicator-active-box-shadow); } &:disabled { ~ .custom-control-indicator { - background-color: $custom-control-disabled-indicator-bg; + background-color: $custom-control-indicator-disabled-bg; } ~ .custom-control-description { - color: $custom-control-disabled-description-color; + color: $custom-control-description-disabled-color; } } } @@ -76,16 +76,16 @@ .custom-checkbox { .custom-control-indicator { - @include border-radius($custom-checkbox-radius); + @include border-radius($custom-checkbox-border-radius); } .custom-control-input:checked ~ .custom-control-indicator { - background-image: $custom-checkbox-checked-icon; + background-image: $custom-checkbox-icon-checked; } .custom-control-input:indeterminate ~ .custom-control-indicator { background-color: $custom-checkbox-indeterminate-bg; - background-image: $custom-checkbox-indeterminate-icon; + background-image: $custom-checkbox-icon-indeterminate; @include box-shadow($custom-checkbox-indeterminate-box-shadow); } } @@ -96,11 +96,11 @@ .custom-radio { .custom-control-indicator { - border-radius: $custom-radio-radius; + border-radius: $custom-radio-border-radius; } .custom-control-input:checked ~ .custom-control-indicator { - background-image: $custom-radio-checked-icon; + background-image: $custom-radio-icon-checked; } } diff --git a/scss/_forms.scss b/scss/_forms.scss index c56cfd0686..4b04c7d225 100644 --- a/scss/_forms.scss +++ b/scss/_forms.scss @@ -42,7 +42,7 @@ // Placeholder &::placeholder { - color: $input-color-placeholder; + color: $input-placeholder-color; // Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526. opacity: 1; } @@ -54,7 +54,7 @@ // don't honor that edge case; we style them as disabled anyway. &:disabled, &[readonly] { - background-color: $input-bg-disabled; + background-color: $input-disabled-bg; // iOS fix for unreadable disabled content; see https://github.com/twbs/bootstrap/issues/11655. opacity: 1; } diff --git a/scss/_modal.scss b/scss/_modal.scss index 9d2a86776d..c0c4067162 100644 --- a/scss/_modal.scss +++ b/scss/_modal.scss @@ -54,7 +54,7 @@ background-clip: padding-box; border: $modal-content-border-width solid $modal-content-border-color; @include border-radius($border-radius-lg); - @include box-shadow($modal-content-xs-box-shadow); + @include box-shadow($modal-content-box-shadow-xs); // Remove focus outline from opened modal outline: 0; } @@ -127,11 +127,11 @@ // Automatically set modal's width for larger viewports .modal-dialog { max-width: $modal-md; - margin: $modal-dialog-sm-up-margin-y auto; + margin: $modal-dialog-margin-y-sm-up auto; } .modal-content { - @include box-shadow($modal-content-sm-up-box-shadow); + @include box-shadow($modal-content-box-shadow-sm-up); } .modal-sm { max-width: $modal-sm; } diff --git a/scss/_nav.scss b/scss/_nav.scss index 973679eee7..b76e3e968b 100644 --- a/scss/_nav.scss +++ b/scss/_nav.scss @@ -21,7 +21,7 @@ // Disabled state lightens text &.disabled { - color: $nav-disabled-link-color; + color: $nav-link-disabled-color; } } @@ -45,7 +45,7 @@ } &.disabled { - color: $nav-disabled-link-color; + color: $nav-link-disabled-color; background-color: transparent; border-color: transparent; } @@ -53,9 +53,9 @@ .nav-link.active, .nav-item.show .nav-link { - color: $nav-tabs-active-link-color; - background-color: $nav-tabs-active-link-bg; - border-color: $nav-tabs-active-link-border-color $nav-tabs-active-link-border-color $nav-tabs-active-link-bg; + color: $nav-tabs-link-active-color; + background-color: $nav-tabs-link-active-bg; + border-color: $nav-tabs-link-active-border-color $nav-tabs-link-active-border-color $nav-tabs-link-active-bg; } .dropdown-menu { @@ -77,8 +77,8 @@ &.active, .show & { - color: $nav-pills-active-link-color; - background-color: $nav-pills-active-link-bg; + color: $nav-pills-link-active-color; + background-color: $nav-pills-link-active-bg; } } } diff --git a/scss/_tables.scss b/scss/_tables.scss index 36c3dab77a..90a5e69bb9 100644 --- a/scss/_tables.scss +++ b/scss/_tables.scss @@ -37,7 +37,7 @@ .table-sm { th, td { - padding: $table-sm-cell-padding; + padding: $table-cell-padding-sm; } } @@ -69,7 +69,7 @@ .table-striped { tbody tr:nth-of-type(odd) { - background-color: $table-bg-accent; + background-color: $table-accent-bg; } } @@ -81,7 +81,7 @@ .table-hover { tbody tr { @include hover { - background-color: $table-bg-hover; + background-color: $table-hover-bg; } } } @@ -93,7 +93,7 @@ // inheritance to nested tables. // Generate the contextual variants -@include table-row-variant(active, $table-bg-active); +@include table-row-variant(active, $table-active-bg); @include table-row-variant(success, $state-success-bg); @include table-row-variant(info, $state-info-bg); @include table-row-variant(warning, $state-warning-bg); @@ -134,14 +134,14 @@ &.table-striped { tbody tr:nth-of-type(odd) { - background-color: $table-inverse-bg-accent; + background-color: $table-inverse-accent-bg; } } &.table-hover { tbody tr { @include hover { - background-color: $table-inverse-bg-hover; + background-color: $table-inverse-hover-bg; } } } diff --git a/scss/_type.scss b/scss/_type.scss index fc9c791c4d..5ecc336aef 100644 --- a/scss/_type.scss +++ b/scss/_type.scss @@ -11,12 +11,12 @@ h1, h2, h3, h4, h5, h6, color: $headings-color; } -h1, .h1 { font-size: $font-size-h1; } -h2, .h2 { font-size: $font-size-h2; } -h3, .h3 { font-size: $font-size-h3; } -h4, .h4 { font-size: $font-size-h4; } -h5, .h5 { font-size: $font-size-h5; } -h6, .h6 { font-size: $font-size-h6; } +h1, .h1 { font-size: $h1-font-size; } +h2, .h2 { font-size: $h2-font-size; } +h3, .h3 { font-size: $h3-font-size; } +h4, .h4 { font-size: $h4-font-size; } +h5, .h5 { font-size: $h5-font-size; } +h6, .h6 { font-size: $h6-font-size; } .lead { font-size: $lead-font-size; diff --git a/scss/_variables.scss b/scss/_variables.scss index e0111d0c93..5bd938c6b0 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -2,6 +2,9 @@ // // Copy settings from this file into the provided `_custom.scss` to override // the Bootstrap defaults without modifying key, versioned files. +// +// Variables should follow the `$component-state-property-size` formula for +// consistent naming. Ex: $nav-link-disabled-color and $modal-content-box-shadow-xs. // Table of Contents @@ -259,12 +262,12 @@ $font-weight-bold: bold !default; $font-weight-base: $font-weight-normal !default; $line-height-base: 1.5 !default; -$font-size-h1: 2.5rem !default; -$font-size-h2: 2rem !default; -$font-size-h3: 1.75rem !default; -$font-size-h4: 1.5rem !default; -$font-size-h5: 1.25rem !default; -$font-size-h6: 1rem !default; +$h1-font-size: 2.5rem !default; +$h2-font-size: 2rem !default; +$h3-font-size: 1.75rem !default; +$h4-font-size: 1.5rem !default; +$h5-font-size: 1.25rem !default; +$h6-font-size: 1rem !default; $headings-margin-bottom: ($spacer / 2) !default; $headings-font-family: inherit !default; @@ -313,12 +316,12 @@ $list-inline-padding: 5px !default; // Customizes the `.table` component with basic values, each used across all table variations. $table-cell-padding: .75rem !default; -$table-sm-cell-padding: .3rem !default; +$table-cell-padding-sm: .3rem !default; $table-bg: transparent !default; -$table-bg-accent: rgba($black,.05) !default; -$table-bg-hover: rgba($black,.075) !default; -$table-bg-active: $table-bg-hover !default; +$table-accent-bg: rgba($black,.05) !default; +$table-hover-bg: rgba($black,.075) !default; +$table-active-bg: $table-hover-bg !default; $table-border-width: $border-width !default; $table-border-color: $gray-lighter !default; @@ -327,8 +330,8 @@ $table-head-bg: $gray-lighter !default; $table-head-color: $gray !default; $table-inverse-bg: $gray-dark !default; -$table-inverse-bg-accent: rgba($white, .05) !default; -$table-inverse-bg-hover: rgba($white, .075) !default; +$table-inverse-accent-bg: rgba($white, .05) !default; +$table-inverse-hover-bg: rgba($white, .075) !default; $table-inverse-border-color: lighten($gray-dark, 7.5%) !default; $table-inverse-color: $body-bg !default; @@ -393,7 +396,7 @@ $btn-transition: all .2s ease-in-out !default; // Forms $input-bg: $white !default; -$input-bg-disabled: $gray-lighter !default; +$input-disabled-bg: $gray-lighter !default; $input-color: $gray !default; $input-border-color: rgba($black,.15) !default; @@ -404,12 +407,12 @@ $input-border-radius: $border-radius !default; $input-border-radius-lg: $border-radius-lg !default; $input-border-radius-sm: $border-radius-sm !default; -$input-bg-focus: $input-bg !default; -$input-border-color-focus: lighten($brand-primary, 25%) !default; -$input-box-shadow-focus: $input-box-shadow, $btn-focus-box-shadow !default; -$input-color-focus: $input-color !default; +$input-focus-bg: $input-bg !default; +$input-focus-border-color: lighten($brand-primary, 25%) !default; +$input-focus-box-shadow: $input-box-shadow, $btn-focus-box-shadow !default; +$input-focus-color: $input-color !default; -$input-color-placeholder: $gray-light !default; +$input-placeholder-color: $gray-light !default; $input-height-border: $input-btn-border-width * 2 !default; @@ -448,29 +451,29 @@ $custom-control-indicator-bg: #ddd !default; $custom-control-indicator-bg-size: 50% 50% !default; $custom-control-indicator-box-shadow: inset 0 .25rem .25rem rgba($black,.1) !default; -$custom-control-disabled-indicator-bg: $gray-lighter !default; -$custom-control-disabled-description-color: $gray-light !default; +$custom-control-indicator-disabled-bg: $gray-lighter !default; +$custom-control-description-disabled-color: $gray-light !default; -$custom-control-checked-indicator-color: $white !default; -$custom-control-checked-indicator-bg: $brand-primary !default; -$custom-control-checked-indicator-box-shadow: none !default; +$custom-control-indicator-checked-color: $white !default; +$custom-control-indicator-checked-bg: $brand-primary !default; +$custom-control-indicator-checked-box-shadow: none !default; -$custom-control-focus-indicator-box-shadow: 0 0 0 1px $body-bg, 0 0 0 3px $brand-primary !default; +$custom-control-indicator-focus-box-shadow: 0 0 0 1px $body-bg, 0 0 0 3px $brand-primary !default; -$custom-control-active-indicator-color: $white !default; -$custom-control-active-indicator-bg: lighten($brand-primary, 35%) !default; -$custom-control-active-indicator-box-shadow: none !default; +$custom-control-indicator-active-color: $white !default; +$custom-control-indicator-active-bg: lighten($brand-primary, 35%) !default; +$custom-control-indicator-active-box-shadow: none !default; -$custom-checkbox-radius: $border-radius !default; -$custom-checkbox-checked-icon: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='#{$custom-control-checked-indicator-color}' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3E%3C/svg%3E"), "#", "%23") !default; +$custom-checkbox-border-radius: $border-radius !default; +$custom-checkbox-icon-checked: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='#{$custom-control-indicator-checked-color}' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3E%3C/svg%3E"), "#", "%23") !default; $custom-checkbox-indeterminate-bg: $brand-primary !default; -$custom-checkbox-indeterminate-indicator-color: $custom-control-checked-indicator-color !default; -$custom-checkbox-indeterminate-icon: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 4'%3E%3Cpath stroke='#{$custom-checkbox-indeterminate-indicator-color}' d='M0 2h4'/%3E%3C/svg%3E"), "#", "%23") !default; +$custom-checkbox-indicator-indeterminate-color: $custom-control-indicator-checked-color !default; +$custom-checkbox-icon-indeterminate: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 4'%3E%3Cpath stroke='#{$custom-checkbox-indicator-indeterminate-color}' d='M0 2h4'/%3E%3C/svg%3E"), "#", "%23") !default; $custom-checkbox-indeterminate-box-shadow: none !default; -$custom-radio-radius: 50% !default; -$custom-radio-checked-icon: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='#{$custom-control-checked-indicator-color}'/%3E%3C/svg%3E"), "#", "%23") !default; +$custom-radio-border-radius: 50% !default; +$custom-radio-icon-checked: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='#{$custom-control-indicator-checked-color}'/%3E%3C/svg%3E"), "#", "%23") !default; $custom-select-padding-y: .375rem !default; $custom-select-padding-x: .75rem !default; @@ -569,19 +572,19 @@ $zindex-tooltip: 1070 !default; $nav-link-padding-y: .5rem !default; $nav-link-padding-x: 1rem !default; -$nav-disabled-link-color: $gray-light !default; +$nav-link-disabled-color: $gray-light !default; $nav-tabs-border-color: #ddd !default; $nav-tabs-border-width: $border-width !default; $nav-tabs-border-radius: $border-radius !default; $nav-tabs-link-hover-border-color: $gray-lighter !default; -$nav-tabs-active-link-color: $gray !default; -$nav-tabs-active-link-bg: $body-bg !default; -$nav-tabs-active-link-border-color: #ddd !default; +$nav-tabs-link-active-color: $gray !default; +$nav-tabs-link-active-bg: $body-bg !default; +$nav-tabs-link-active-border-color: #ddd !default; $nav-pills-border-radius: $border-radius !default; -$nav-pills-active-link-color: $component-active-color !default; -$nav-pills-active-link-bg: $component-active-bg !default; +$nav-pills-link-active-color: $component-active-color !default; +$nav-pills-link-active-bg: $component-active-bg !default; // Navbar @@ -676,7 +679,7 @@ $card-spacer-x: 1.25rem !default; $card-border-width: 1px !default; $card-border-radius: $border-radius !default; $card-border-color: rgba($black,.125) !default; -$card-border-radius-inner: calc(#{$card-border-radius} - #{$card-border-width}) !default; +$card-inner-border-radius: calc(#{$card-border-radius} - #{$card-border-width}) !default; $card-cap-bg: $gray-lightest !default; $card-bg: $white !default; @@ -761,15 +764,15 @@ $badge-pill-border-radius: 10rem !default; $modal-inner-padding: 15px !default; $modal-dialog-margin: 10px !default; -$modal-dialog-sm-up-margin-y: 30px !default; +$modal-dialog-margin-y-sm-up: 30px !default; $modal-title-line-height: $line-height-base !default; $modal-content-bg: $white !default; $modal-content-border-color: rgba($black,.2) !default; $modal-content-border-width: $border-width !default; -$modal-content-xs-box-shadow: 0 3px 9px rgba($black,.5) !default; -$modal-content-sm-up-box-shadow: 0 5px 15px rgba($black,.5) !default; +$modal-content-box-shadow-xs: 0 3px 9px rgba($black,.5) !default; +$modal-content-box-shadow-sm-up: 0 5px 15px rgba($black,.5) !default; $modal-backdrop-bg: $black !default; $modal-backdrop-opacity: .5 !default; diff --git a/scss/mixins/_forms.scss b/scss/mixins/_forms.scss index 972c9e1045..4a1e0bc311 100644 --- a/scss/mixins/_forms.scss +++ b/scss/mixins/_forms.scss @@ -12,11 +12,11 @@ // contrast against a dark gray background. @mixin form-control-focus() { &:focus { - color: $input-color-focus; - background-color: $input-bg-focus; - border-color: $input-border-color-focus; + color: $input-focus-color; + background-color: $input-focus-bg; + border-color: $input-focus-border-color; outline: none; - @include box-shadow($input-box-shadow-focus); + @include box-shadow($input-focus-box-shadow); } }