diff options
Diffstat (limited to 'assets/stylesheets/bootstrap/mixins')
6 files changed, 45 insertions, 15 deletions
diff --git a/assets/stylesheets/bootstrap/mixins/_alert.scss b/assets/stylesheets/bootstrap/mixins/_alert.scss index d938e89..db5a7eb 100644 --- a/assets/stylesheets/bootstrap/mixins/_alert.scss +++ b/assets/stylesheets/bootstrap/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/assets/stylesheets/bootstrap/mixins/_background-variant.scss b/assets/stylesheets/bootstrap/mixins/_background-variant.scss index 5860d73..7d1bc97 100644 --- a/assets/stylesheets/bootstrap/mixins/_background-variant.scss +++ b/assets/stylesheets/bootstrap/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/assets/stylesheets/bootstrap/mixins/_badge.scss b/assets/stylesheets/bootstrap/mixins/_badge.scss index 257a6ab..eeca0b4 100644 --- a/assets/stylesheets/bootstrap/mixins/_badge.scss +++ b/assets/stylesheets/bootstrap/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/assets/stylesheets/bootstrap/mixins/_buttons.scss b/assets/stylesheets/bootstrap/mixins/_buttons.scss index 7ce8fef..9e06261 100644 --- a/assets/stylesheets/bootstrap/mixins/_buttons.scss +++ b/assets/stylesheets/bootstrap/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/assets/stylesheets/bootstrap/mixins/_forms.scss b/assets/stylesheets/bootstrap/mixins/_forms.scss index 6403f46..19d5280 100644 --- a/assets/stylesheets/bootstrap/mixins/_forms.scss +++ b/assets/stylesheets/bootstrap/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/assets/stylesheets/bootstrap/mixins/_gradients.scss b/assets/stylesheets/bootstrap/mixins/_gradients.scss index bad79f9..ecd01f7 100644 --- a/assets/stylesheets/bootstrap/mixins/_gradients.scss +++ b/assets/stylesheets/bootstrap/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. |