aboutsummaryrefslogtreecommitdiff
path: root/scss
diff options
context:
space:
mode:
Diffstat (limited to 'scss')
-rw-r--r--scss/_buttons.scss4
-rw-r--r--scss/_carousel.scss6
-rw-r--r--scss/_custom-forms.scss6
-rw-r--r--scss/_dropdown.scss4
-rw-r--r--scss/_variables.scss8
-rw-r--r--scss/mixins/_alert.scss2
-rw-r--r--scss/mixins/_background-variant.scss6
-rw-r--r--scss/mixins/_buttons.scss25
-rw-r--r--scss/mixins/_forms.scss7
-rw-r--r--scss/mixins/_gradients.scss8
-rw-r--r--scss/utilities/_background.scss6
11 files changed, 63 insertions, 19 deletions
diff --git a/scss/_buttons.scss b/scss/_buttons.scss
index 72fc5f340..7cd27830b 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 8aa14ace7..c3c207387 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 41dae4d76..a521dbdc9 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 1782d5b9f..daa867a57 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 d59b26abf..0615f35d4 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 d938e8972..db5a7eb45 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 5860d7384..7d1bc975c 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 798bfe89e..9e0626139 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 6403f469d..19d52807e 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 bad79f961..ecd01f729 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 3d2e07d69..1f18b2f3f 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;
}
generated by cgit v1.2.3 (git 2.25.1) at 2026-06-06 05:12:47 +0000