diff --git a/docs/4.0/utilities/colors.md b/docs/4.0/utilities/colors.md
index 13c0adc8a1bf78166bb2a6e6d0f02da269564d62..cf9de15328a1e2c028f8467927ec9f94866fbbd3 100644
--- a/docs/4.0/utilities/colors.md
+++ b/docs/4.0/utilities/colors.md
@@ -6,6 +6,8 @@ group: utilities
toc: true
---
+## Color
+
{% example html %}
{% for color in site.data.theme-colors %}
<p class="text-{{ color.name }}{% if color.name == "light" %} bg-dark{% endif %}">.text-{{ color.name }}</p>{% endfor %}
@@ -22,6 +24,8 @@ Contextual text classes also work well on anchors with the provided hover and fo
<p><a href="#" class="text-white bg-dark">White link</a></p>
{% endexample %}
+## Background color
+
Similar to the contextual text color classes, easily set the background of an element to any contextual class. Anchor components will darken on hover, just like the text classes. Background utilities **do not set `color`**, so in some cases you'll want to use `.text-*` utilities.
{% example html %}
@@ -30,6 +34,15 @@ Similar to the contextual text color classes, easily set the background of an el
<div class="p-3 mb-2 bg-white text-dark">.bg-white</div>
{% endexample %}
+## Background gradient
+
+When `$enable-shadows` is set to true, you'll be able to use `.bg-gradient-` utility classes. **By default, `$enable-shadows` is disabled and the example below is intentionally broken.** This is done for easier customization from moment you start using Bootstrap. [Learn about our Sass options]({{ site.baseurl }}/docs/{{ site.docs_version }}/getting-started/theming/#sass-options) to enable these classes and more.
+
+{% example html %}
+{% for color in site.data.theme-colors %}
+<div class="p-3 mb-2 bg-gradient-{{ color.name }} {% if color.name == "light" %}text-dark{% else %}text-white{% endif %}">.bg-gradient-{{ color.name }}</div>{% endfor %}
+{% endexample %}
+
{% callout info %}
#### Dealing with specificity
diff --git a/scss/_buttons.scss b/scss/_buttons.scss
index 72fc5f34062afa63631ed04d61d3740cfb2e37d4..7cd27830b5966b2c1394d9c9cd80ff039b74e007 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 8aa14ace79bf7a13339c779dee52053563de9180..c3c207387c9b3ee180b7fe4bd8c0530064c9d901 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/_custom-forms.scss b/scss/_custom-forms.scss
index 41dae4d7605ec39ee7f8c1bf4891b73d5fe5fb61..a521dbdc9445db37c507e036abb7c73b8b6055b6 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 1782d5b9f17a5c11735f98bb65fed2fd7cf994b7..daa867a573e5cc5e4d28959ac75fa08a41676f5e 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/_variables.scss b/scss/_variables.scss
index d59b26abf0635dfc5af64bafc3f07846caf6ca11..0615f35d4135ac96fd1578d2666fb4fb89840839 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -314,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;
@@ -324,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;
@@ -355,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;
@@ -404,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;
diff --git a/scss/mixins/_alert.scss b/scss/mixins/_alert.scss
index d938e8972256d72d2d5bb4535509fb63b5132531..db5a7eb4549ec1406985347113efa74287a2f219 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 5860d7384c9c6bcdd6cf4c7e92fa7e6fb4ecd98a..7d1bc975c1f207b37266af53ae0381d8d9f26677 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/_buttons.scss b/scss/mixins/_buttons.scss
index 798bfe89e98664d50a8ca053c090ac0b9c69fff1..9e0626139697b00d545506c40188887abe6616ff 100644
--- a/scss/mixins/_buttons.scss
+++ b/scss/mixins/_buttons.scss
@@ -5,13 +5,13 @@
@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);
- background-color: $background;
+ @include gradient-bg($background);
border-color: $border;
@include box-shadow($btn-box-shadow);
@include hover {
color: color-yiq($hover-background);
- background-color: $hover-background;
+ @include gradient-bg($hover-background);
border-color: $hover-border;
}
@@ -19,9 +19,9 @@
&.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 6403f469d929bbd260e874cfb20af5b796fac4e3..19d52807e88b296d2ba6f525eed48eea1b902e85 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 bad79f9617532c1154b61a762530e8559a82f2b0..ecd01f729155eba403aea100a43d37097e37b8fb 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 3d2e07d6995197c5619f57e1facb773a4d6081e9..1f18b2f3f36483973876a382d6e1bdc1f346361a 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;
}