From 0920ab045e2b1c4f6309d793df234ef774ecd53d Mon Sep 17 00:00:00 2001 From: Louis-Maxime Piton Date: Wed, 31 Aug 2022 09:37:59 +0200 Subject: [PATCH] feat(breadcrumb): add dark variant (#1430) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Julien Déramond --- .bundlewatch.config.json | 2 +- scss/_breadcrumb.scss | 17 ++++++++++ scss/_pagination.scss | 34 +++++++++---------- scss/_variables.scss | 8 +++++ .../content/docs/5.2/components/breadcrumb.md | 32 +++++++++++++++++ 5 files changed, 75 insertions(+), 18 deletions(-) diff --git a/.bundlewatch.config.json b/.bundlewatch.config.json index 1661c5deb4..39e0cd2a47 100644 --- a/.bundlewatch.config.json +++ b/.bundlewatch.config.json @@ -30,7 +30,7 @@ }, { "path": "./dist/css/boosted.min.css", - "maxSize": "33.5 kB" + "maxSize": "33.75 kB" }, { "path": "./dist/js/boosted.bundle.js", diff --git a/scss/_breadcrumb.scss b/scss/_breadcrumb.scss index 48fc2b3753..7d1fe3cb91 100644 --- a/scss/_breadcrumb.scss +++ b/scss/_breadcrumb.scss @@ -5,6 +5,7 @@ --#{$prefix}breadcrumb-margin-bottom: #{$breadcrumb-margin-bottom}; @include rfs($breadcrumb-font-size, --#{$prefix}breadcrumb-font-size); --#{$prefix}breadcrumb-font-weight: #{$breadcrumb-font-weight}; // Boosted mod + --#{$prefix}breadcrumb-color: #{$breadcrumb-color}; // Boosted mod --#{$prefix}breadcrumb-bg: #{$breadcrumb-bg}; --#{$prefix}breadcrumb-border-radius: #{$breadcrumb-border-radius}; --#{$prefix}breadcrumb-divider-color: #{$breadcrumb-divider-color}; @@ -18,6 +19,7 @@ margin-bottom: var(--#{$prefix}breadcrumb-margin-bottom); @include font-size(var(--#{$prefix}breadcrumb-font-size)); font-weight: var(--#{$prefix}breadcrumb-font-weight); // Boosted mod + color: var(--#{$prefix}breadcrumb-color); // Boosted mod list-style: none; background-color: var(--#{$prefix}breadcrumb-bg); @include border-radius(var(--#{$prefix}breadcrumb-border-radius)); @@ -46,3 +48,18 @@ color: var(--#{$prefix}breadcrumb-item-active-color); } } + +// Boosted mod +.breadcrumb-dark { + // scss-docs-start breadcrumb-dark-css-vars + --#{$prefix}breadcrumb-color: #{$breadcrumb-dark-color}; // Boosted mod + --#{$prefix}breadcrumb-bg: #{$breadcrumb-dark-bg}; // Boosted mod + --#{$prefix}breadcrumb-divider-color: #{$breadcrumb-dark-divider-color}; // Boosted mod + --#{$prefix}breadcrumb-item-active-color: #{$breadcrumb-dark-active-color}; // Boosted mod + // scss-docs-end breadcrumb-dark-css-vars + + .breadcrumb-item::before { + filter: $invert-filter; + } +} +// End mod diff --git a/scss/_pagination.scss b/scss/_pagination.scss index 74a6d3f4c8..7436e57e6b 100644 --- a/scss/_pagination.scss +++ b/scss/_pagination.scss @@ -211,23 +211,23 @@ // Boosted mod: dark variant .pagination-dark { // scss-docs-start pagination-dark-css-vars - --#{$prefix}pagination-color: #{$pagination-dark-color}; - --#{$prefix}pagination-bg: #{$pagination-dark-bg}; - --#{$prefix}pagination-border-color: #{$pagination-dark-border-color}; - --#{$prefix}pagination-hover-color: #{$pagination-dark-hover-color}; - --#{$prefix}pagination-hover-bg: #{$pagination-dark-hover-bg}; - --#{$prefix}pagination-hover-border-color: #{$pagination-dark-hover-border-color}; - --#{$prefix}pagination-focus-color: #{$pagination-dark-focus-color}; - --#{$prefix}pagination-focus-bg: #{$pagination-dark-focus-bg}; - --#{$prefix}pagination-active-color: #{$pagination-dark-active-color}; - --#{$prefix}pagination-active-bg: #{$pagination-dark-active-bg}; - --#{$prefix}pagination-active-border-color: #{$pagination-dark-active-border-color}; - --#{$prefix}pagination-active-item-color: #{$pagination-dark-active-item-color}; - --#{$prefix}pagination-active-item-bg: #{$pagination-dark-active-item-bg}; - --#{$prefix}pagination-active-item-border-color: #{$pagination-dark-active-item-border-color}; - --#{$prefix}pagination-disabled-color: #{$pagination-dark-disabled-color}; - --#{$prefix}pagination-disabled-bg: #{$pagination-dark-disabled-bg}; - --#{$prefix}pagination-disabled-border-color: #{$pagination-dark-disabled-border-color}; + --#{$prefix}pagination-color: #{$pagination-dark-color}; // Boosted mod + --#{$prefix}pagination-bg: #{$pagination-dark-bg}; // Boosted mod + --#{$prefix}pagination-border-color: #{$pagination-dark-border-color}; // Boosted mod + --#{$prefix}pagination-hover-color: #{$pagination-dark-hover-color}; // Boosted mod + --#{$prefix}pagination-hover-bg: #{$pagination-dark-hover-bg}; // Boosted mod + --#{$prefix}pagination-hover-border-color: #{$pagination-dark-hover-border-color}; // Boosted mod + --#{$prefix}pagination-focus-color: #{$pagination-dark-focus-color}; // Boosted mod + --#{$prefix}pagination-focus-bg: #{$pagination-dark-focus-bg}; // Boosted mod + --#{$prefix}pagination-active-color: #{$pagination-dark-active-color}; // Boosted mod + --#{$prefix}pagination-active-bg: #{$pagination-dark-active-bg}; // Boosted mod + --#{$prefix}pagination-active-border-color: #{$pagination-dark-active-border-color}; // Boosted mod + --#{$prefix}pagination-active-item-color: #{$pagination-dark-active-item-color}; // Boosted mod + --#{$prefix}pagination-active-item-bg: #{$pagination-dark-active-item-bg}; // Boosted mod + --#{$prefix}pagination-active-item-border-color: #{$pagination-dark-active-item-border-color}; // Boosted mod + --#{$prefix}pagination-disabled-color: #{$pagination-dark-disabled-color}; // Boosted mod + --#{$prefix}pagination-disabled-bg: #{$pagination-dark-disabled-bg}; // Boosted mod + --#{$prefix}pagination-disabled-border-color: #{$pagination-dark-disabled-border-color}; // Boosted mod // scss-docs-end pagination-dark-css-vars } // End mod diff --git a/scss/_variables.scss b/scss/_variables.scss index 7c75a1a0b6..3bb67a0048 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -1835,6 +1835,7 @@ $breadcrumb-padding-y: .5rem !default; $breadcrumb-padding-x: 0 !default; $breadcrumb-item-padding-x: $spacer * .5 !default; $breadcrumb-margin-bottom: 1rem !default; +$breadcrumb-color: $black !default; // Boosted mod $breadcrumb-bg: null !default; $breadcrumb-divider-color: null !default; $breadcrumb-active-color: null !default; @@ -1843,6 +1844,13 @@ $breadcrumb-divider-flipped: $breadcrumb-divider !default; $breadcrumb-border-radius: null !default; // scss-docs-end breadcrumb-variables +// scss-docs-start breadcrumb-dark-variables +$breadcrumb-dark-color: $white !default; // Boosted mod +$breadcrumb-dark-bg: null !default; // Boosted mod +$breadcrumb-dark-divider-color: $black !default; // Boosted mod: since the divider is inverted for SVG reasons +$breadcrumb-dark-active-color: null !default; // Boosted mod +// scss-docs-end breadcrumb-dark-variables + // Carousel diff --git a/site/content/docs/5.2/components/breadcrumb.md b/site/content/docs/5.2/components/breadcrumb.md index 53f5d052ac..52458c647f 100644 --- a/site/content/docs/5.2/components/breadcrumb.md +++ b/site/content/docs/5.2/components/breadcrumb.md @@ -90,6 +90,24 @@ You can also remove the divider setting `--bs-breadcrumb-divider: '';` (empty st $breadcrumb-divider: none; ``` + +## Dark variant + +{{< added-in "5.2.1" >}} + +Add `.breadcrumb-dark` to the `.breadcrumb` for a dark variant. + +{{< example class="bg-dark" >}} + +{{< /example >}} + + ## Accessibility Since breadcrumbs provide a navigation, it's a good idea to add a meaningful label such as `aria-label="breadcrumb"` to describe the type of navigation provided in the `