diff options
| author | Mark Otto <[email protected]> | 2020-09-24 13:16:20 -0700 |
|---|---|---|
| committer | GitHub <[email protected]> | 2020-09-24 13:16:20 -0700 |
| commit | f951be36a11a6ae96fc27d9caf3476f729016b1c (patch) | |
| tree | 4533034bff7436b26528b2fb1ea623c875e965f5 /scss | |
| parent | 979c66b6745638bfa896cd007125d35cef630194 (diff) | |
| download | bootstrap-f951be36a11a6ae96fc27d9caf3476f729016b1c.tar.xz bootstrap-f951be36a11a6ae96fc27d9caf3476f729016b1c.zip | |
Carousel enhancements, including .carousel-dark (#31650)
* Replace existing carousel control icons with chevrons from Bootstrap Icons
* Add .carousel-dark variant
* Test
* Add variable for .carousel-dark filter
* Update _variables.scss
Co-authored-by: XhmikosR <[email protected]>
Diffstat (limited to 'scss')
| -rw-r--r-- | scss/_carousel.scss | 17 | ||||
| -rw-r--r-- | scss/_variables.scss | 12 |
2 files changed, 25 insertions, 4 deletions
diff --git a/scss/_carousel.scss b/scss/_carousel.scss index 84ffd6cea..ef77cbb61 100644 --- a/scss/_carousel.scss +++ b/scss/_carousel.scss @@ -193,3 +193,20 @@ color: $carousel-caption-color; text-align: center; } + +// Dark mode carousel + +.carousel-dark { + .carousel-control-prev-icon, + .carousel-control-next-icon { + filter: $carousel-dark-control-icon-filter; + } + + .carousel-indicators li { + background-color: $carousel-dark-indicator-active-bg; + } + + .carousel-caption { + color: $carousel-dark-caption-color; + } +} diff --git a/scss/_variables.scss b/scss/_variables.scss index 79bb5f0e5..15f5d8153 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -1254,14 +1254,18 @@ $carousel-caption-color: $white !default; $carousel-caption-padding-y: 1.25rem !default; $carousel-caption-spacer: 1.25rem !default; -$carousel-control-icon-width: 20px !default; +$carousel-control-icon-width: 2rem !default; -$carousel-control-prev-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' viewBox='0 0 8 8'><path d='M5.25 0l-4 4 4 4 1.5-1.5L4.25 4l2.5-2.5L5.25 0z'/></svg>") !default; -$carousel-control-next-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' viewBox='0 0 8 8'><path d='M2.75 0l-1.5 1.5L3.75 4l-2.5 2.5L2.75 8l4-4-4-4z'/></svg>") !default; +$carousel-control-prev-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' viewBox='0 0 16 16'><path d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/></svg>") !default; +$carousel-control-next-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' viewBox='0 0 16 16'><path d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/></svg>") !default; $carousel-transition-duration: .6s !default; $carousel-transition: transform $carousel-transition-duration ease-in-out !default; // Define transform transition first if using multiple transitions (e.g., `transform 2s ease, opacity .5s ease-out`) +$carousel-dark-indicator-active-bg: $black !default; +$carousel-dark-caption-color: $black !default; +$carousel-dark-control-icon-filter: invert(1) grayscale(100) !default; + // Spinners @@ -1288,7 +1292,7 @@ $btn-close-opacity: .5 !default; $btn-close-hover-opacity: .75 !default; $btn-close-focus-opacity: 1 !default; $btn-close-disabled-opacity: .25 !default; -$btn-close-white-filter: invert(1) grayscale(100%) brightness(200%) !default; +$btn-close-white-filter: invert(1) grayscale(100%) brightness(200%) !default; // Code |