diff options
author | Sharrell Porter <SharrellPorter@example.com> | 2017-10-20 14:12:39 +0300 |
---|---|---|
committer | Sharrell Porter <SharrellPorter@example.com> | 2017-10-20 14:12:39 +0300 |
commit | 4f814fabd6aa198df72e8263350fa60213d13176 (patch) | |
tree | 8fbcc6b66212a39be6bb8b1a6811a4f3eb2e901a /scss | |
parent | 77ea66da4dc054b33392d32be152eb1082d305e2 (diff) | |
parent | 9a1d81f154f4391f9fea47fc26cd2fa864d6ae8a (diff) |
sync-commits erge branch 'v4-dev' into custom-checkboxes-radios-correct-color
Diffstat (limited to 'scss')
-rw-r--r-- | scss/_button-group.scss | 4 | ||||
-rw-r--r-- | scss/_buttons.scss | 4 | ||||
-rw-r--r-- | scss/_carousel.scss | 6 | ||||
-rw-r--r-- | scss/_code.scss | 2 | ||||
-rw-r--r-- | scss/_custom-forms.scss | 6 | ||||
-rw-r--r-- | scss/_dropdown.scss | 4 | ||||
-rw-r--r-- | scss/_forms.scss | 7 | ||||
-rw-r--r-- | scss/_functions.scss | 6 | ||||
-rw-r--r-- | scss/_input-group.scss | 10 | ||||
-rw-r--r-- | scss/_list-group.scss | 7 | ||||
-rw-r--r-- | scss/_pagination.scss | 2 | ||||
-rw-r--r-- | scss/_popover.scss | 33 | ||||
-rw-r--r-- | scss/_variables.scss | 77 | ||||
-rw-r--r-- | scss/bootstrap-grid.scss | 14 | ||||
-rw-r--r-- | scss/bootstrap-reboot.scss | 11 | ||||
-rw-r--r-- | scss/bootstrap.scss | 2 | ||||
-rw-r--r-- | scss/mixins/_alert.scss | 2 | ||||
-rw-r--r-- | scss/mixins/_background-variant.scss | 6 | ||||
-rw-r--r-- | scss/mixins/_badge.scss | 4 | ||||
-rw-r--r-- | scss/mixins/_buttons.scss | 33 | ||||
-rw-r--r-- | scss/mixins/_forms.scss | 7 | ||||
-rw-r--r-- | scss/mixins/_gradients.scss | 8 | ||||
-rw-r--r-- | scss/utilities/_background.scss | 6 |
23 files changed, 149 insertions, 112 deletions
diff --git a/scss/_button-group.scss b/scss/_button-group.scss index 1a373f3232..4dcd9aa67c 100644 --- a/scss/_button-group.scss +++ b/scss/_button-group.scss @@ -14,12 +14,12 @@ // Bring the hover, focused, and "active" buttons to the front to overlay // the borders properly @include hover { - z-index: 2; + z-index: 1; } &:focus, &:active, &.active { - z-index: 2; + z-index: 1; } } diff --git a/scss/_buttons.scss b/scss/_buttons.scss index 72fc5f3406..7cd27830b5 100644 --- a/scss/_buttons.scss +++ b/scss/_buttons.scss @@ -22,7 +22,7 @@ &:focus, &.focus { outline: 0; - box-shadow: $btn-focus-box-shadow; + box-shadow: $input-btn-focus-box-shadow; } // Disabled comes first so active can properly restyle @@ -35,7 +35,7 @@ &:not([disabled]):not(.disabled):active, &:not([disabled]):not(.disabled).active { background-image: none; - @include box-shadow($btn-focus-box-shadow, $btn-active-box-shadow); + @include box-shadow($input-btn-focus-box-shadow, $btn-active-box-shadow); } } diff --git a/scss/_carousel.scss b/scss/_carousel.scss index 8aa14ace79..c3c207387c 100644 --- a/scss/_carousel.scss +++ b/scss/_carousel.scss @@ -90,9 +90,15 @@ } .carousel-control-prev { left: 0; + @if $enable-gradients { + background: linear-gradient(90deg, rgba(0,0,0,.25), rgba(0,0,0,.001)); + } } .carousel-control-next { right: 0; + @if $enable-gradients { + background: linear-gradient(270deg, rgba(0,0,0,.25), rgba(0,0,0,.001)); + } } // Icons for within diff --git a/scss/_code.scss b/scss/_code.scss index 759da15b79..b88f5b61de 100644 --- a/scss/_code.scss +++ b/scss/_code.scss @@ -42,8 +42,6 @@ kbd { // Blocks of code pre { display: block; - margin-top: 0; - margin-bottom: 1rem; font-size: $code-font-size; color: $pre-color; diff --git a/scss/_custom-forms.scss b/scss/_custom-forms.scss index 41dae4d760..a521dbdc94 100644 --- a/scss/_custom-forms.scss +++ b/scss/_custom-forms.scss @@ -22,7 +22,7 @@ &:checked ~ .custom-control-indicator { color: $custom-control-indicator-checked-color; - background-color: $custom-control-indicator-checked-bg; + @include gradient-bg($custom-control-indicator-checked-bg); @include box-shadow($custom-control-indicator-checked-box-shadow); } @@ -33,7 +33,7 @@ &:active ~ .custom-control-indicator { color: $custom-control-indicator-active-color; - background-color: $custom-control-indicator-active-bg; + @include gradient-bg($custom-control-indicator-active-bg); @include box-shadow($custom-control-indicator-active-box-shadow); } @@ -244,7 +244,7 @@ padding: $custom-file-padding-y $custom-file-padding-x; line-height: $custom-file-line-height; color: $custom-file-button-color; - background-color: $custom-file-button-bg; + @include gradient-bg($custom-file-button-bg); border: $custom-file-border-width solid $custom-file-border-color; @include border-radius(0 $custom-file-border-radius $custom-file-border-radius 0); } diff --git a/scss/_dropdown.scss b/scss/_dropdown.scss index 1782d5b9f1..daa867a573 100644 --- a/scss/_dropdown.scss +++ b/scss/_dropdown.scss @@ -67,14 +67,14 @@ @include hover-focus { color: $dropdown-link-hover-color; text-decoration: none; - background-color: $dropdown-link-hover-bg; + @include gradient-bg($dropdown-link-hover-bg); } &.active, &:active { color: $dropdown-link-active-color; text-decoration: none; - background-color: $dropdown-link-active-bg; + @include gradient-bg($dropdown-link-active-bg); } &.disabled, diff --git a/scss/_forms.scss b/scss/_forms.scss index 0ece186d93..3ebeae29cf 100644 --- a/scss/_forms.scss +++ b/scss/_forms.scss @@ -12,8 +12,6 @@ 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. - background-image: none; background-clip: padding-box; border: $input-btn-border-width solid $input-border-color; @@ -316,11 +314,6 @@ select.form-control-lg { width: auto; } - .form-control-label { - margin-bottom: 0; - vertical-align: middle; - } - // Remove default margin on radios/checkboxes that were used for stacking, and // then undo the floating of radios and checkboxes to match. .form-check { diff --git a/scss/_functions.scss b/scss/_functions.scss index 5d43b57087..43210f7fb3 100644 --- a/scss/_functions.scss +++ b/scss/_functions.scss @@ -49,7 +49,7 @@ } // Color contrast -@mixin color-yiq($color) { +@function color-yiq($color) { $r: red($color); $g: green($color); $b: blue($color); @@ -57,9 +57,9 @@ $yiq: (($r * 299) + ($g * 587) + ($b * 114)) / 1000; @if ($yiq >= 150) { - color: #111; + @return #111; } @else { - color: #fff; + @return #fff; } } diff --git a/scss/_input-group.scss b/scss/_input-group.scss index a1d16e3848..ae70ebc081 100644 --- a/scss/_input-group.scss +++ b/scss/_input-group.scss @@ -14,7 +14,7 @@ // Ensure that the input is always above the *appended* addon button for // proper border colors. position: relative; - z-index: 2; + z-index: 1; flex: 1 1 auto; // Add width 1% and flex-basis auto to ensure that button will not wrap out // the column. Applies to IE Edge+ and Firefox. Chrome does not require this. @@ -23,7 +23,7 @@ // Bring the "active" form control to the front @include hover-focus-active { - z-index: 3; + z-index: 2; } } } @@ -150,7 +150,7 @@ // Bring the "active" button to the front @include hover-focus-active { - z-index: 3; + z-index: 2; } } @@ -168,7 +168,7 @@ &:not(:first-child) { > .btn, > .btn-group { - z-index: 2; + z-index: 1; // remove nagative margin ($input-btn-border-width) to solve overlapping issue with button. margin-left: 0; @@ -179,7 +179,7 @@ // Because specificity @include hover-focus-active { - z-index: 3; + z-index: 2; } } } diff --git a/scss/_list-group.scss b/scss/_list-group.scss index ce3876b6cb..abe132255d 100644 --- a/scss/_list-group.scss +++ b/scss/_list-group.scss @@ -70,7 +70,7 @@ // Include both here for `<a>`s and `<button>`s &.active { - z-index: 2; // Place active items above their siblings for proper border styling + z-index: 1; // Place active items above their siblings for proper border styling color: $list-group-active-color; background-color: $list-group-active-bg; border-color: $list-group-active-border-color; @@ -86,13 +86,8 @@ .list-group-flush { .list-group-item { border-right: 0; - border-bottom: 0; border-left: 0; border-radius: 0; - - &:first-child { - border-top: 0; - } } &:first-child { diff --git a/scss/_pagination.scss b/scss/_pagination.scss index 69a36ffe53..6e83cf676f 100644 --- a/scss/_pagination.scss +++ b/scss/_pagination.scss @@ -18,7 +18,7 @@ } &.active .page-link { - z-index: 2; + z-index: 1; color: $pagination-active-color; background-color: $pagination-active-bg; border-color: $pagination-active-border-color; diff --git a/scss/_popover.scss b/scss/_popover.scss index 950d6ca396..450376752b 100644 --- a/scss/_popover.scss +++ b/scss/_popover.scss @@ -5,7 +5,6 @@ z-index: $zindex-popover; display: block; max-width: $popover-max-width; - padding: $popover-inner-padding; // Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element. // So reset our font and text properties to avoid inheriting weird values. @include reset-text(); @@ -39,11 +38,11 @@ .arrow::before { content: ""; - border-width: $popover-arrow-outer-width; + border-width: $popover-arrow-width; } .arrow::after { content: ""; - border-width: $popover-arrow-outer-width; + border-width: $popover-arrow-width; } // Popover directions @@ -61,14 +60,14 @@ } .arrow::before { - bottom: -$popover-arrow-outer-width; - margin-left: -($popover-arrow-outer-width - 5); + bottom: -$popover-arrow-width; + margin-left: -$popover-arrow-width; border-top-color: $popover-arrow-outer-color; } .arrow::after { - bottom: -($popover-arrow-outer-width - 1); - margin-left: -($popover-arrow-outer-width - 5); + bottom: calc((#{$popover-arrow-width} - #{$popover-border-width}) * -1); + margin-left: -$popover-arrow-width; border-top-color: $popover-arrow-color; } } @@ -82,17 +81,17 @@ .arrow::before, .arrow::after { - margin-top: -($popover-arrow-outer-width - 3); + margin-top: -$popover-arrow-width; border-left-width: 0; } .arrow::before { - left: -$popover-arrow-outer-width; + left: -$popover-arrow-width; border-right-color: $popover-arrow-outer-color; } .arrow::after { - left: -($popover-arrow-outer-width - 1); + left: calc((#{$popover-arrow-width} - #{$popover-border-width}) * -1); border-right-color: $popover-arrow-color; } } @@ -106,17 +105,17 @@ .arrow::before, .arrow::after { - margin-left: -($popover-arrow-width - 3); + margin-left: -$popover-arrow-width; border-top-width: 0; } .arrow::before { - top: -$popover-arrow-outer-width; + top: -$popover-arrow-width; border-bottom-color: $popover-arrow-outer-color; } .arrow::after { - top: -($popover-arrow-outer-width - 1); + top: calc((#{$popover-arrow-width} - #{$popover-border-width}) * -1); border-bottom-color: $popover-arrow-color; } @@ -129,7 +128,7 @@ width: 20px; margin-left: -10px; content: ""; - border-bottom: 1px solid $popover-header-bg; + border-bottom: $popover-border-width solid $popover-header-bg; } } @@ -142,17 +141,17 @@ .arrow::before, .arrow::after { - margin-top: -($popover-arrow-outer-width - 3); + margin-top: -$popover-arrow-width; border-right-width: 0; } .arrow::before { - right: -$popover-arrow-outer-width; + right: -$popover-arrow-width; border-left-color: $popover-arrow-outer-color; } .arrow::after { - right: -($popover-arrow-outer-width - 1); + right: calc((#{$popover-arrow-width} - #{$popover-border-width}) * -1); border-left-color: $popover-arrow-color; } } diff --git a/scss/_variables.scss b/scss/_variables.scss index 1808e4bd94..0615f35d41 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -62,16 +62,25 @@ $colors: map-merge(( "gray-dark": $gray-800 ), $colors); +$primary: $blue !default; +$secondary: $gray-600 !default; +$success: $green !default; +$info: $cyan !default; +$warning: $yellow !default; +$danger: $red !default; +$light: $gray-100 !default; +$dark: $gray-800 !default; + $theme-colors: () !default; $theme-colors: map-merge(( - "primary": $blue, - "secondary": $gray-600, - "success": $green, - "info": $cyan, - "warning": $yellow, - "danger": $red, - "light": $gray-100, - "dark": $gray-800 + "primary": $primary, + "secondary": $secondary, + "success": $success, + "info": $info, + "warning": $warning, + "danger": $danger, + "light": $light, + "dark": $dark ), $theme-colors); // stylelint-enable @@ -213,8 +222,8 @@ $font-family-base: $font-family-sans-serif !default; // stylelint-enable value-keyword-case $font-size-base: 1rem !default; // Assumes the browser default, typically `16px` -$font-size-lg: 1.25rem !default; -$font-size-sm: .875rem !default; +$font-size-lg: ($font-size-base * 1.25) !default; +$font-size-sm: ($font-size-base * .875) !default; $font-weight-light: 300 !default; $font-weight-normal: 400 !default; @@ -223,17 +232,17 @@ $font-weight-bold: 700 !default; $font-weight-base: $font-weight-normal !default; $line-height-base: 1.5 !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; +$h1-font-size: $font-size-base * 2.5 !default; +$h2-font-size: $font-size-base * 2 !default; +$h3-font-size: $font-size-base * 1.75 !default; +$h4-font-size: $font-size-base * 1.5 !default; +$h5-font-size: $font-size-base * 1.25 !default; +$h6-font-size: $font-size-base !default; $headings-margin-bottom: ($spacer / 2) !default; $headings-font-family: inherit !default; $headings-font-weight: 500 !default; -$headings-line-height: 1.1 !default; +$headings-line-height: 1.2 !default; $headings-color: inherit !default; $display1-size: 6rem !default; @@ -247,7 +256,7 @@ $display3-weight: 300 !default; $display4-weight: 300 !default; $display-line-height: $headings-line-height !default; -$lead-font-size: 1.25rem !default; +$lead-font-size: ($font-size-base * 1.25) !default; $lead-font-weight: 300 !default; $small-font-size: 80% !default; @@ -305,6 +314,10 @@ $input-btn-padding-y: .375rem !default; $input-btn-padding-x: .75rem !default; $input-btn-line-height: $line-height-base !default; +$input-btn-focus-width: .2rem !default; +$input-btn-focus-color: rgba(theme-color("primary"), .25) !default; +$input-btn-focus-box-shadow: 0 0 0 $input-btn-focus-width $input-btn-focus-color !default; + $input-btn-padding-y-sm: .25rem !default; $input-btn-padding-x-sm: .5rem !default; $input-btn-line-height-sm: $line-height-sm !default; @@ -315,7 +328,6 @@ $input-btn-line-height-lg: $line-height-lg !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; $btn-active-box-shadow: inset 0 3px 5px rgba($black,.125) !default; $btn-link-disabled-color: $gray-600 !default; @@ -346,7 +358,6 @@ $input-border-radius-sm: $border-radius-sm !default; $input-focus-bg: $input-bg !default; $input-focus-border-color: lighten(theme-color("primary"), 25%) !default; -$input-focus-box-shadow: $input-box-shadow, $btn-focus-box-shadow !default; $input-focus-color: $input-color !default; $input-placeholder-color: $gray-600 !default; @@ -395,7 +406,7 @@ $custom-control-indicator-checked-color: $white !default; $custom-control-indicator-checked-bg: theme-color("primary") !default; $custom-control-indicator-checked-box-shadow: none !default; -$custom-control-indicator-focus-box-shadow: 0 0 0 1px $body-bg, 0 0 0 3px theme-color("primary") !default; +$custom-control-indicator-focus-box-shadow: 0 0 0 1px $body-bg, $input-btn-focus-box-shadow !default; $custom-control-indicator-active-color: $white !default; $custom-control-indicator-active-bg: lighten(theme-color("primary"), 35%) !default; @@ -530,9 +541,9 @@ $navbar-padding-x: $spacer !default; $navbar-brand-font-size: $font-size-lg !default; // Compute the navbar-brand padding-y so the navbar-brand will have the same height as navbar-text and nav-link -$nav-link-height: $navbar-brand-font-size * $line-height-base !default; -$navbar-brand-height: ($font-size-base * $line-height-base + $nav-link-padding-y * 2) !default; -$navbar-brand-padding-y: ($navbar-brand-height - $nav-link-height) / 2 !default; +$nav-link-height: ($font-size-base * $line-height-base + $nav-link-padding-y * 2) !default; +$navbar-brand-height: $navbar-brand-font-size * $line-height-base !default; +$navbar-brand-padding-y: ($nav-link-height - $navbar-brand-height) / 2 !default; $navbar-toggler-padding-y: .25rem !default; $navbar-toggler-padding-x: .75rem !default; @@ -626,27 +637,25 @@ $tooltip-arrow-color: $tooltip-bg !default; // Popovers -$popover-inner-padding: 1px !default; $popover-bg: $white !default; $popover-max-width: 276px !default; $popover-border-width: $border-width !default; $popover-border-color: rgba($black,.2) !default; -$popover-box-shadow: 0 5px 10px rgba($black,.2) !default; +$popover-box-shadow: 0 .25rem .5rem rgba($black,.2) !default; $popover-header-bg: darken($popover-bg, 3%) !default; $popover-header-color: $headings-color !default; -$popover-header-padding-y: 8px !default; -$popover-header-padding-x: 14px !default; +$popover-header-padding-y: .5rem !default; +$popover-header-padding-x: .75rem !default; $popover-body-color: $body-color !default; -$popover-body-padding-y: 9px !default; -$popover-body-padding-x: 14px !default; +$popover-body-padding-y: $popover-header-padding-y !default; +$popover-body-padding-x: $popover-header-padding-x !default; -$popover-arrow-width: 10px !default; -$popover-arrow-height: 5px !default; +$popover-arrow-width: .8rem !default; +$popover-arrow-height: .4rem !default; $popover-arrow-color: $popover-bg !default; -$popover-arrow-outer-width: ($popover-arrow-width + 1px) !default; $popover-arrow-outer-color: fade-in($popover-border-color, .05) !default; @@ -710,7 +719,7 @@ $alert-border-width: $border-width !default; // Progress bars $progress-height: 1rem !default; -$progress-font-size: .75rem !default; +$progress-font-size: ($font-size-base * .75) !default; $progress-bg: $gray-200 !default; $progress-border-radius: $border-radius !default; $progress-box-shadow: inset 0 .1rem .1rem rgba($black,.1) !default; diff --git a/scss/bootstrap-grid.scss b/scss/bootstrap-grid.scss index 022ab91d8a..d7d4e7863d 100644 --- a/scss/bootstrap-grid.scss +++ b/scss/bootstrap-grid.scss @@ -1,11 +1,9 @@ -// Bootstrap Grid only -// -// Includes relevant variables and mixins for the flexbox grid -// system, as well as the generated predefined classes (e.g., `.col-sm-4`). - -// -// Box sizing, responsive, and more -// +/*! + * Bootstrap Grid v4.0.0-beta.2 (https://getbootstrap.com) + * Copyright 2011-2017 The Bootstrap Authors + * Copyright 2011-2017 Twitter, Inc. + * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) + */ @at-root { @-ms-viewport { width: device-width; } // stylelint-disable-line at-rule-no-vendor-prefix diff --git a/scss/bootstrap-reboot.scss b/scss/bootstrap-reboot.scss index 2700a57056..3bc8760a9f 100644 --- a/scss/bootstrap-reboot.scss +++ b/scss/bootstrap-reboot.scss @@ -1,9 +1,12 @@ -// Bootstrap Reboot only -// -// Includes only Normalize and our custom Reboot reset. +/*! + * Bootstrap Reboot v4.0.0-beta.2 (https://getbootstrap.com) + * Copyright 2011-2017 The Bootstrap Authors + * Copyright 2011-2017 Twitter, Inc. + * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) + * Forked from Normalize.css, licensed MIT (https://github.com/necolas/normalize.css/blob/master/LICENSE.md) + */ @import "functions"; @import "variables"; @import "mixins"; - @import "reboot"; diff --git a/scss/bootstrap.scss b/scss/bootstrap.scss index f83914dc3f..bfeffacacf 100644 --- a/scss/bootstrap.scss +++ b/scss/bootstrap.scss @@ -1,5 +1,5 @@ /*! - * Bootstrap v4.0.0-beta (https://getbootstrap.com) + * Bootstrap v4.0.0-beta.2 (https://getbootstrap.com) * Copyright 2011-2017 The Bootstrap Authors * Copyright 2011-2017 Twitter, Inc. * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) diff --git a/scss/mixins/_alert.scss b/scss/mixins/_alert.scss index d938e89722..db5a7eb454 100644 --- a/scss/mixins/_alert.scss +++ b/scss/mixins/_alert.scss @@ -1,6 +1,6 @@ @mixin alert-variant($background, $border, $color) { color: $color; - background-color: $background; + @include gradient-bg($background); border-color: $border; hr { diff --git a/scss/mixins/_background-variant.scss b/scss/mixins/_background-variant.scss index 5860d7384c..7d1bc975c1 100644 --- a/scss/mixins/_background-variant.scss +++ b/scss/mixins/_background-variant.scss @@ -12,3 +12,9 @@ } } } + +@mixin bg-gradient-variant($parent, $color) { + #{$parent} { + background: $color linear-gradient(180deg, mix($body-bg, $color, 15%), $color) repeat-x !important; + } +} diff --git a/scss/mixins/_badge.scss b/scss/mixins/_badge.scss index 257a6abb7d..eeca0b40de 100644 --- a/scss/mixins/_badge.scss +++ b/scss/mixins/_badge.scss @@ -1,10 +1,10 @@ @mixin badge-variant($bg) { - @include color-yiq($bg); + color: color-yiq($bg); background-color: $bg; &[href] { @include hover-focus { - @include color-yiq($bg); + color: color-yiq($bg); text-decoration: none; background-color: darken($bg, 10%); } diff --git a/scss/mixins/_buttons.scss b/scss/mixins/_buttons.scss index 7ce8fef5f3..9e06261396 100644 --- a/scss/mixins/_buttons.scss +++ b/scss/mixins/_buttons.scss @@ -3,25 +3,25 @@ // Easily pump out default styles, as well as :hover, :focus, :active, // and disabled options for all buttons -@mixin button-variant($background, $border, $active-background: darken($background, 7.5%), $active-border: darken($border, 10%)) { - @include color-yiq($background); - background-color: $background; +@mixin button-variant($background, $border, $hover-background: darken($background, 7.5%), $hover-border: darken($border, 10%), $active-background: darken($background, 10%), $active-border: darken($border, 12.5%)) { + color: color-yiq($background); + @include gradient-bg($background); border-color: $border; @include box-shadow($btn-box-shadow); @include hover { - @include color-yiq($active-background); - background-color: $active-background; - border-color: $active-border; + color: color-yiq($hover-background); + @include gradient-bg($hover-background); + border-color: $hover-border; } &:focus, &.focus { // Avoid using mixin so we can pass custom focus shadow properly @if $enable-shadows { - box-shadow: $btn-box-shadow, 0 0 0 3px rgba($border, .5); + box-shadow: $btn-box-shadow, 0 0 0 $input-btn-focus-width rgba($border, .5); } @else { - box-shadow: 0 0 0 3px rgba($border, .5); + box-shadow: 0 0 0 $input-btn-focus-width rgba($border, .5); } } @@ -35,10 +35,19 @@ &:not([disabled]):not(.disabled):active, &:not([disabled]):not(.disabled).active, .show > &.dropdown-toggle { + color: color-yiq($active-background); background-color: $active-background; - background-image: none; // Remove the gradient for the pressed/active state + @if $enable-gradients { + background-image: none; // Remove the gradient for the pressed/active state + } border-color: $active-border; - @include box-shadow($btn-active-box-shadow); + + // Avoid using mixin so we can pass custom focus shadow properly + @if $enable-shadows { + box-shadow: $btn-active-box-shadow, 0 0 0 $input-btn-focus-width rgba($border, .5); + } @else { + box-shadow: 0 0 0 $input-btn-focus-width rgba($border, .5); + } } } @@ -56,7 +65,7 @@ &:focus, &.focus { - box-shadow: 0 0 0 3px rgba($color, .5); + box-shadow: 0 0 0 $input-btn-focus-width rgba($color, .5); } &.disabled, @@ -71,6 +80,8 @@ color: $color-hover; background-color: $color; border-color: $color; + // Avoid using mixin so we can pass custom focus shadow properly + box-shadow: 0 0 0 $input-btn-focus-width rgba($color, .5); } } diff --git a/scss/mixins/_forms.scss b/scss/mixins/_forms.scss index f69b335e1d..3adbc1dd21 100644 --- a/scss/mixins/_forms.scss +++ b/scss/mixins/_forms.scss @@ -16,7 +16,12 @@ background-color: $input-focus-bg; border-color: $input-focus-border-color; outline: none; - @include box-shadow($input-focus-box-shadow); + // Avoid using mixin so we can pass custom focus shadow properly + @if $enable-shadows { + box-shadow: $input-box-shadow, $input-btn-focus-box-shadow; + } @else { + box-shadow: $input-btn-focus-box-shadow; + } } } diff --git a/scss/mixins/_gradients.scss b/scss/mixins/_gradients.scss index bad79f9617..ecd01f7291 100644 --- a/scss/mixins/_gradients.scss +++ b/scss/mixins/_gradients.scss @@ -1,5 +1,13 @@ // Gradients +@mixin gradient-bg($color) { + @if $enable-gradients { + background: $color linear-gradient(180deg, mix($body-bg, $color, 15%), $color) repeat-x; + } @else { + background-color: $color; + } +} + // Horizontal gradient, from left to right // // Creates two color stops, start and end, by specifying a color and position for each color stop. diff --git a/scss/utilities/_background.scss b/scss/utilities/_background.scss index 3d2e07d699..1f18b2f3f3 100644 --- a/scss/utilities/_background.scss +++ b/scss/utilities/_background.scss @@ -4,6 +4,12 @@ @include bg-variant(".bg-#{$color}", $value); } +@if $enable-gradients { + @each $color, $value in $theme-colors { + @include bg-gradient-variant(".bg-gradient-#{$color}", $value); + } +} + .bg-white { background-color: $white !important; } |