From a323305ac59c537850ad35334df7a10124d4ca80 Mon Sep 17 00:00:00 2001 From: "Austin, Robert" Date: Sun, 26 Nov 2023 16:34:29 +1000 Subject: [PATCH] update to bootstrap 5.3.2 --- Gemfile | 2 +- _sass/bootstrap/_accordion.scss | 158 ++ _sass/bootstrap/_alert.scss | 48 +- _sass/bootstrap/_badge.scss | 46 +- _sass/bootstrap/_breadcrumb.scss | 46 +- _sass/bootstrap/_button-group.scss | 75 +- _sass/bootstrap/_buttons.scss | 207 +- _sass/bootstrap/_card.scss | 179 +- _sass/bootstrap/_carousel.scss | 119 +- _sass/bootstrap/_close.scss | 79 +- _sass/bootstrap/_code.scss | 48 - _sass/bootstrap/_containers.scss | 41 + _sass/bootstrap/_custom-forms.scss | 526 ----- _sass/bootstrap/_dropdown.scss | 200 +- _sass/bootstrap/_forms.scss | 356 +--- _sass/bootstrap/_functions.scss | 204 +- _sass/bootstrap/_grid.scss | 70 +- _sass/bootstrap/_helpers.scss | 12 + _sass/bootstrap/_images.scss | 2 +- _sass/bootstrap/_input-group.scss | 208 -- _sass/bootstrap/_jumbotron.scss | 17 - _sass/bootstrap/_list-group.scss | 111 +- _sass/bootstrap/_maps.scss | 174 ++ _sass/bootstrap/_media.scss | 8 - _sass/bootstrap/_mixins.scss | 25 +- _sass/bootstrap/_modal.scss | 217 +- _sass/bootstrap/_nav.scss | 127 +- _sass/bootstrap/_navbar.scss | 301 ++- _sass/bootstrap/_offcanvas.scss | 146 ++ _sass/bootstrap/_pagination.scss | 109 +- _sass/bootstrap/_placeholders.scss | 51 + _sass/bootstrap/_popover.scss | 172 +- _sass/bootstrap/_print.scss | 141 -- _sass/bootstrap/_progress.scss | 49 +- _sass/bootstrap/_reboot.scss | 511 +++-- _sass/bootstrap/_root.scss | 186 +- _sass/bootstrap/_spinners.scss | 68 +- _sass/bootstrap/_tables.scss | 216 +- _sass/bootstrap/_toasts.scss | 81 +- _sass/bootstrap/_tooltip.scss | 130 +- _sass/bootstrap/_transitions.scss | 9 +- _sass/bootstrap/_type.scss | 99 +- _sass/bootstrap/_utilities.scss | 824 +++++++- _sass/bootstrap/_variables-dark.scss | 87 + _sass/bootstrap/_variables.scss | 1831 +++++++++++------ _sass/bootstrap/bootstrap-grid.scss | 74 +- _sass/bootstrap/bootstrap-reboot.scss | 12 +- _sass/bootstrap/bootstrap-utilities.scss | 19 + _sass/bootstrap/bootstrap.scss | 34 +- _sass/bootstrap/forms/_floating-labels.scss | 95 + _sass/bootstrap/forms/_form-check.scss | 189 ++ _sass/bootstrap/forms/_form-control.scss | 214 ++ _sass/bootstrap/forms/_form-range.scss | 91 + _sass/bootstrap/forms/_form-select.scss | 80 + _sass/bootstrap/forms/_form-text.scss | 11 + _sass/bootstrap/forms/_input-group.scss | 132 ++ _sass/bootstrap/forms/_labels.scss | 36 + _sass/bootstrap/forms/_validation.scss | 12 + .../{utilities => helpers}/_clearfix.scss | 0 _sass/bootstrap/helpers/_color-bg.scss | 7 + _sass/bootstrap/helpers/_colored-links.scss | 30 + _sass/bootstrap/helpers/_focus-ring.scss | 5 + _sass/bootstrap/helpers/_icon-link.scss | 25 + _sass/bootstrap/helpers/_position.scss | 36 + _sass/bootstrap/helpers/_ratio.scss | 26 + _sass/bootstrap/helpers/_stacks.scss | 15 + _sass/bootstrap/helpers/_stretched-link.scss | 15 + _sass/bootstrap/helpers/_text-truncation.scss | 7 + _sass/bootstrap/helpers/_visually-hidden.scss | 8 + _sass/bootstrap/helpers/_vr.scss | 8 + _sass/bootstrap/mixins/_alert.scss | 17 +- _sass/bootstrap/mixins/_backdrop.scss | 14 + .../bootstrap/mixins/_background-variant.scss | 23 - _sass/bootstrap/mixins/_badge.scss | 17 - _sass/bootstrap/mixins/_banner.scss | 7 + _sass/bootstrap/mixins/_border-radius.scss | 18 +- _sass/bootstrap/mixins/_box-shadow.scss | 16 +- _sass/bootstrap/mixins/_breakpoints.scss | 36 +- _sass/bootstrap/mixins/_buttons.scss | 160 +- _sass/bootstrap/mixins/_caret.scss | 61 +- _sass/bootstrap/mixins/_clearfix.scss | 2 + _sass/bootstrap/mixins/_color-mode.scss | 21 + _sass/bootstrap/mixins/_color-scheme.scss | 7 + _sass/bootstrap/mixins/_container.scss | 11 + _sass/bootstrap/mixins/_float.scss | 14 - _sass/bootstrap/mixins/_forms.scss | 138 +- _sass/bootstrap/mixins/_gradients.scss | 24 +- _sass/bootstrap/mixins/_grid-framework.scss | 80 - _sass/bootstrap/mixins/_grid.scss | 158 +- _sass/bootstrap/mixins/_hover.scss | 37 - _sass/bootstrap/mixins/_image.scss | 22 +- _sass/bootstrap/mixins/_list-group.scss | 9 +- _sass/bootstrap/mixins/_lists.scss | 2 +- _sass/bootstrap/mixins/_nav-divider.scss | 11 - _sass/bootstrap/mixins/_pagination.scss | 26 +- _sass/bootstrap/mixins/_reset-text.scss | 6 +- _sass/bootstrap/mixins/_screen-reader.scss | 34 - _sass/bootstrap/mixins/_size.scss | 7 - _sass/bootstrap/mixins/_table-row.scss | 39 - _sass/bootstrap/mixins/_table-variants.scss | 24 + _sass/bootstrap/mixins/_text-emphasis.scss | 17 - _sass/bootstrap/mixins/_text-hide.scss | 11 - _sass/bootstrap/mixins/_transition.scss | 2 +- _sass/bootstrap/mixins/_utilities.scss | 97 + _sass/bootstrap/mixins/_visibility.scss | 8 - _sass/bootstrap/mixins/_visually-hidden.scss | 33 + _sass/bootstrap/tests/jasmine.js | 16 + .../tests/mixins/_color-modes.test.scss | 69 + .../_media-query-color-mode-full.test.scss | 8 + .../tests/mixins/_utilities.test.scss | 393 ++++ _sass/bootstrap/tests/sass-true/register.js | 14 + _sass/bootstrap/tests/sass-true/runner.js | 17 + .../bootstrap/tests/utilities/_api.test.scss | 75 + _sass/bootstrap/utilities/_align.scss | 8 - _sass/bootstrap/utilities/_api.scss | 47 + _sass/bootstrap/utilities/_background.scss | 19 - _sass/bootstrap/utilities/_borders.scss | 75 - _sass/bootstrap/utilities/_display.scss | 26 - _sass/bootstrap/utilities/_embed.scss | 39 - _sass/bootstrap/utilities/_flex.scss | 51 - _sass/bootstrap/utilities/_float.scss | 11 - _sass/bootstrap/utilities/_interactions.scss | 5 - _sass/bootstrap/utilities/_overflow.scss | 5 - _sass/bootstrap/utilities/_position.scss | 32 - _sass/bootstrap/utilities/_screenreaders.scss | 11 - _sass/bootstrap/utilities/_shadows.scss | 6 - _sass/bootstrap/utilities/_sizing.scss | 20 - _sass/bootstrap/utilities/_spacing.scss | 73 - .../bootstrap/utilities/_stretched-link.scss | 19 - _sass/bootstrap/utilities/_text.scss | 72 - _sass/bootstrap/utilities/_visibility.scss | 13 - _sass/bootstrap/vendor/_rfs.scss | 408 ++-- assets/css/style.scss | 54 +- netlify.toml | 3 +- 134 files changed, 7572 insertions(+), 4723 deletions(-) create mode 100644 _sass/bootstrap/_accordion.scss delete mode 100644 _sass/bootstrap/_code.scss create mode 100644 _sass/bootstrap/_containers.scss delete mode 100644 _sass/bootstrap/_custom-forms.scss create mode 100644 _sass/bootstrap/_helpers.scss delete mode 100644 _sass/bootstrap/_input-group.scss delete mode 100644 _sass/bootstrap/_jumbotron.scss create mode 100644 _sass/bootstrap/_maps.scss delete mode 100644 _sass/bootstrap/_media.scss create mode 100644 _sass/bootstrap/_offcanvas.scss create mode 100644 _sass/bootstrap/_placeholders.scss delete mode 100644 _sass/bootstrap/_print.scss create mode 100644 _sass/bootstrap/_variables-dark.scss create mode 100644 _sass/bootstrap/bootstrap-utilities.scss create mode 100644 _sass/bootstrap/forms/_floating-labels.scss create mode 100644 _sass/bootstrap/forms/_form-check.scss create mode 100644 _sass/bootstrap/forms/_form-control.scss create mode 100644 _sass/bootstrap/forms/_form-range.scss create mode 100644 _sass/bootstrap/forms/_form-select.scss create mode 100644 _sass/bootstrap/forms/_form-text.scss create mode 100644 _sass/bootstrap/forms/_input-group.scss create mode 100644 _sass/bootstrap/forms/_labels.scss create mode 100644 _sass/bootstrap/forms/_validation.scss rename _sass/bootstrap/{utilities => helpers}/_clearfix.scss (100%) create mode 100644 _sass/bootstrap/helpers/_color-bg.scss create mode 100644 _sass/bootstrap/helpers/_colored-links.scss create mode 100644 _sass/bootstrap/helpers/_focus-ring.scss create mode 100644 _sass/bootstrap/helpers/_icon-link.scss create mode 100644 _sass/bootstrap/helpers/_position.scss create mode 100644 _sass/bootstrap/helpers/_ratio.scss create mode 100644 _sass/bootstrap/helpers/_stacks.scss create mode 100644 _sass/bootstrap/helpers/_stretched-link.scss create mode 100644 _sass/bootstrap/helpers/_text-truncation.scss create mode 100644 _sass/bootstrap/helpers/_visually-hidden.scss create mode 100644 _sass/bootstrap/helpers/_vr.scss create mode 100644 _sass/bootstrap/mixins/_backdrop.scss delete mode 100644 _sass/bootstrap/mixins/_background-variant.scss delete mode 100644 _sass/bootstrap/mixins/_badge.scss create mode 100644 _sass/bootstrap/mixins/_banner.scss create mode 100644 _sass/bootstrap/mixins/_color-mode.scss create mode 100644 _sass/bootstrap/mixins/_color-scheme.scss create mode 100644 _sass/bootstrap/mixins/_container.scss delete mode 100644 _sass/bootstrap/mixins/_float.scss delete mode 100644 _sass/bootstrap/mixins/_grid-framework.scss delete mode 100644 _sass/bootstrap/mixins/_hover.scss delete mode 100644 _sass/bootstrap/mixins/_nav-divider.scss delete mode 100644 _sass/bootstrap/mixins/_screen-reader.scss delete mode 100644 _sass/bootstrap/mixins/_size.scss delete mode 100644 _sass/bootstrap/mixins/_table-row.scss create mode 100644 _sass/bootstrap/mixins/_table-variants.scss delete mode 100644 _sass/bootstrap/mixins/_text-emphasis.scss delete mode 100644 _sass/bootstrap/mixins/_text-hide.scss create mode 100644 _sass/bootstrap/mixins/_utilities.scss delete mode 100644 _sass/bootstrap/mixins/_visibility.scss create mode 100644 _sass/bootstrap/mixins/_visually-hidden.scss create mode 100644 _sass/bootstrap/tests/jasmine.js create mode 100644 _sass/bootstrap/tests/mixins/_color-modes.test.scss create mode 100644 _sass/bootstrap/tests/mixins/_media-query-color-mode-full.test.scss create mode 100644 _sass/bootstrap/tests/mixins/_utilities.test.scss create mode 100644 _sass/bootstrap/tests/sass-true/register.js create mode 100644 _sass/bootstrap/tests/sass-true/runner.js create mode 100644 _sass/bootstrap/tests/utilities/_api.test.scss delete mode 100644 _sass/bootstrap/utilities/_align.scss create mode 100644 _sass/bootstrap/utilities/_api.scss delete mode 100644 _sass/bootstrap/utilities/_background.scss delete mode 100644 _sass/bootstrap/utilities/_borders.scss delete mode 100644 _sass/bootstrap/utilities/_display.scss delete mode 100644 _sass/bootstrap/utilities/_embed.scss delete mode 100644 _sass/bootstrap/utilities/_flex.scss delete mode 100644 _sass/bootstrap/utilities/_float.scss delete mode 100644 _sass/bootstrap/utilities/_interactions.scss delete mode 100644 _sass/bootstrap/utilities/_overflow.scss delete mode 100644 _sass/bootstrap/utilities/_position.scss delete mode 100644 _sass/bootstrap/utilities/_screenreaders.scss delete mode 100644 _sass/bootstrap/utilities/_shadows.scss delete mode 100644 _sass/bootstrap/utilities/_sizing.scss delete mode 100644 _sass/bootstrap/utilities/_spacing.scss delete mode 100644 _sass/bootstrap/utilities/_stretched-link.scss delete mode 100644 _sass/bootstrap/utilities/_text.scss delete mode 100644 _sass/bootstrap/utilities/_visibility.scss diff --git a/Gemfile b/Gemfile index 824bd52d16..e4321a1a36 100644 --- a/Gemfile +++ b/Gemfile @@ -1,5 +1,5 @@ source "https://rubygems.org" gem "webrick", "~> 1.7" -gem "jekyll", "~> 4.2" +gem "jekyll", "~> 4.3" gem "jekyll-environment-variables" \ No newline at end of file diff --git a/_sass/bootstrap/_accordion.scss b/_sass/bootstrap/_accordion.scss new file mode 100644 index 0000000000..75588a5adb --- /dev/null +++ b/_sass/bootstrap/_accordion.scss @@ -0,0 +1,158 @@ +// +// Base styles +// + +.accordion { + // scss-docs-start accordion-css-vars + --#{$prefix}accordion-color: #{$accordion-color}; + --#{$prefix}accordion-bg: #{$accordion-bg}; + --#{$prefix}accordion-transition: #{$accordion-transition}; + --#{$prefix}accordion-border-color: #{$accordion-border-color}; + --#{$prefix}accordion-border-width: #{$accordion-border-width}; + --#{$prefix}accordion-border-radius: #{$accordion-border-radius}; + --#{$prefix}accordion-inner-border-radius: #{$accordion-inner-border-radius}; + --#{$prefix}accordion-btn-padding-x: #{$accordion-button-padding-x}; + --#{$prefix}accordion-btn-padding-y: #{$accordion-button-padding-y}; + --#{$prefix}accordion-btn-color: #{$accordion-button-color}; + --#{$prefix}accordion-btn-bg: #{$accordion-button-bg}; + --#{$prefix}accordion-btn-icon: #{escape-svg($accordion-button-icon)}; + --#{$prefix}accordion-btn-icon-width: #{$accordion-icon-width}; + --#{$prefix}accordion-btn-icon-transform: #{$accordion-icon-transform}; + --#{$prefix}accordion-btn-icon-transition: #{$accordion-icon-transition}; + --#{$prefix}accordion-btn-active-icon: #{escape-svg($accordion-button-active-icon)}; + --#{$prefix}accordion-btn-focus-border-color: #{$accordion-button-focus-border-color}; + --#{$prefix}accordion-btn-focus-box-shadow: #{$accordion-button-focus-box-shadow}; + --#{$prefix}accordion-body-padding-x: #{$accordion-body-padding-x}; + --#{$prefix}accordion-body-padding-y: #{$accordion-body-padding-y}; + --#{$prefix}accordion-active-color: #{$accordion-button-active-color}; + --#{$prefix}accordion-active-bg: #{$accordion-button-active-bg}; + // scss-docs-end accordion-css-vars +} + +.accordion-button { + position: relative; + display: flex; + align-items: center; + width: 100%; + padding: var(--#{$prefix}accordion-btn-padding-y) var(--#{$prefix}accordion-btn-padding-x); + @include font-size($font-size-base); + color: var(--#{$prefix}accordion-btn-color); + text-align: left; // Reset button style + background-color: var(--#{$prefix}accordion-btn-bg); + border: 0; + @include border-radius(0); + overflow-anchor: none; + @include transition(var(--#{$prefix}accordion-transition)); + + &:not(.collapsed) { + color: var(--#{$prefix}accordion-active-color); + background-color: var(--#{$prefix}accordion-active-bg); + box-shadow: inset 0 calc(-1 * var(--#{$prefix}accordion-border-width)) 0 var(--#{$prefix}accordion-border-color); // stylelint-disable-line function-disallowed-list + + &::after { + background-image: var(--#{$prefix}accordion-btn-active-icon); + transform: var(--#{$prefix}accordion-btn-icon-transform); + } + } + + // Accordion icon + &::after { + flex-shrink: 0; + width: var(--#{$prefix}accordion-btn-icon-width); + height: var(--#{$prefix}accordion-btn-icon-width); + margin-left: auto; + content: ""; + background-image: var(--#{$prefix}accordion-btn-icon); + background-repeat: no-repeat; + background-size: var(--#{$prefix}accordion-btn-icon-width); + @include transition(var(--#{$prefix}accordion-btn-icon-transition)); + } + + &:hover { + z-index: 2; + } + + &:focus { + z-index: 3; + border-color: var(--#{$prefix}accordion-btn-focus-border-color); + outline: 0; + box-shadow: var(--#{$prefix}accordion-btn-focus-box-shadow); + } +} + +.accordion-header { + margin-bottom: 0; +} + +.accordion-item { + color: var(--#{$prefix}accordion-color); + background-color: var(--#{$prefix}accordion-bg); + border: var(--#{$prefix}accordion-border-width) solid var(--#{$prefix}accordion-border-color); + + &:first-of-type { + @include border-top-radius(var(--#{$prefix}accordion-border-radius)); + + .accordion-button { + @include border-top-radius(var(--#{$prefix}accordion-inner-border-radius)); + } + } + + &:not(:first-of-type) { + border-top: 0; + } + + // Only set a border-radius on the last item if the accordion is collapsed + &:last-of-type { + @include border-bottom-radius(var(--#{$prefix}accordion-border-radius)); + + .accordion-button { + &.collapsed { + @include border-bottom-radius(var(--#{$prefix}accordion-inner-border-radius)); + } + } + + .accordion-collapse { + @include border-bottom-radius(var(--#{$prefix}accordion-border-radius)); + } + } +} + +.accordion-body { + padding: var(--#{$prefix}accordion-body-padding-y) var(--#{$prefix}accordion-body-padding-x); +} + + +// Flush accordion items +// +// Remove borders and border-radius to keep accordion items edge-to-edge. + +.accordion-flush { + .accordion-collapse { + border-width: 0; + } + + .accordion-item { + border-right: 0; + border-left: 0; + @include border-radius(0); + + &:first-child { border-top: 0; } + &:last-child { border-bottom: 0; } + + .accordion-button { + &, + &.collapsed { + @include border-radius(0); + } + } + } +} + +@if $enable-dark-mode { + @include color-mode(dark) { + .accordion-button::after { + --#{$prefix}accordion-btn-icon: #{escape-svg($accordion-button-icon-dark)}; + --#{$prefix}accordion-btn-active-icon: #{escape-svg($accordion-button-active-icon-dark)}; + } + } +} diff --git a/_sass/bootstrap/_alert.scss b/_sass/bootstrap/_alert.scss index 4aa1fc2039..b8cff9b71e 100644 --- a/_sass/bootstrap/_alert.scss +++ b/_sass/bootstrap/_alert.scss @@ -3,11 +3,25 @@ // .alert { + // scss-docs-start alert-css-vars + --#{$prefix}alert-bg: transparent; + --#{$prefix}alert-padding-x: #{$alert-padding-x}; + --#{$prefix}alert-padding-y: #{$alert-padding-y}; + --#{$prefix}alert-margin-bottom: #{$alert-margin-bottom}; + --#{$prefix}alert-color: inherit; + --#{$prefix}alert-border-color: transparent; + --#{$prefix}alert-border: #{$alert-border-width} solid var(--#{$prefix}alert-border-color); + --#{$prefix}alert-border-radius: #{$alert-border-radius}; + --#{$prefix}alert-link-color: inherit; + // scss-docs-end alert-css-vars + position: relative; - padding: $alert-padding-y $alert-padding-x; - margin-bottom: $alert-margin-bottom; - border: $alert-border-width solid transparent; - @include border-radius($alert-border-radius); + padding: var(--#{$prefix}alert-padding-y) var(--#{$prefix}alert-padding-x); + margin-bottom: var(--#{$prefix}alert-margin-bottom); + color: var(--#{$prefix}alert-color); + background-color: var(--#{$prefix}alert-bg); + border: var(--#{$prefix}alert-border); + @include border-radius(var(--#{$prefix}alert-border-radius)); } // Headings for larger alerts @@ -19,6 +33,7 @@ // Provide class for links that match alerts .alert-link { font-weight: $alert-link-font-weight; + color: var(--#{$prefix}alert-link-color); } @@ -27,26 +42,27 @@ // Expand the right padding and account for the close button's positioning. .alert-dismissible { - padding-right: $close-font-size + $alert-padding-x * 2; + padding-right: $alert-dismissible-padding-r; // Adjust close link position - .close { + .btn-close { position: absolute; top: 0; right: 0; - z-index: 2; - padding: $alert-padding-y $alert-padding-x; - color: inherit; + z-index: $stretched-link-z-index + 1; + padding: $alert-padding-y * 1.25 $alert-padding-x; } } -// Alternate styles -// -// Generate contextual modifier classes for colorizing the alert. - -@each $color, $value in $theme-colors { - .alert-#{$color} { - @include alert-variant(theme-color-level($color, $alert-bg-level), theme-color-level($color, $alert-border-level), theme-color-level($color, $alert-color-level)); +// scss-docs-start alert-modifiers +// Generate contextual modifier classes for colorizing the alert +@each $state in map-keys($theme-colors) { + .alert-#{$state} { + --#{$prefix}alert-color: var(--#{$prefix}#{$state}-text-emphasis); + --#{$prefix}alert-bg: var(--#{$prefix}#{$state}-bg-subtle); + --#{$prefix}alert-border-color: var(--#{$prefix}#{$state}-border-subtle); + --#{$prefix}alert-link-color: var(--#{$prefix}#{$state}-text-emphasis); } } +// scss-docs-end alert-modifiers diff --git a/_sass/bootstrap/_badge.scss b/_sass/bootstrap/_badge.scss index 42c5d08d74..cc3d269556 100644 --- a/_sass/bootstrap/_badge.scss +++ b/_sass/bootstrap/_badge.scss @@ -4,22 +4,26 @@ // `background-color`. .badge { + // scss-docs-start badge-css-vars + --#{$prefix}badge-padding-x: #{$badge-padding-x}; + --#{$prefix}badge-padding-y: #{$badge-padding-y}; + @include rfs($badge-font-size, --#{$prefix}badge-font-size); + --#{$prefix}badge-font-weight: #{$badge-font-weight}; + --#{$prefix}badge-color: #{$badge-color}; + --#{$prefix}badge-border-radius: #{$badge-border-radius}; + // scss-docs-end badge-css-vars + display: inline-block; - padding: $badge-padding-y $badge-padding-x; - @include font-size($badge-font-size); - font-weight: $badge-font-weight; + padding: var(--#{$prefix}badge-padding-y) var(--#{$prefix}badge-padding-x); + @include font-size(var(--#{$prefix}badge-font-size)); + font-weight: var(--#{$prefix}badge-font-weight); line-height: 1; + color: var(--#{$prefix}badge-color); text-align: center; white-space: nowrap; vertical-align: baseline; - @include border-radius($badge-border-radius); - @include transition($badge-transition); - - @at-root a#{&} { - @include hover-focus() { - text-decoration: none; - } - } + @include border-radius(var(--#{$prefix}badge-border-radius)); + @include gradient-bg(); // Empty badges collapse automatically &:empty { @@ -32,23 +36,3 @@ position: relative; top: -1px; } - -// Pill badges -// -// Make them extra rounded with a modifier to replace v3's badges. - -.badge-pill { - padding-right: $badge-pill-padding-x; - padding-left: $badge-pill-padding-x; - @include border-radius($badge-pill-border-radius); -} - -// Colors -// -// Contextual variations (linked badges get darker on :hover). - -@each $color, $value in $theme-colors { - .badge-#{$color} { - @include badge-variant($value); - } -} diff --git a/_sass/bootstrap/_breadcrumb.scss b/_sass/bootstrap/_breadcrumb.scss index 9c204c7d55..b8252ff215 100644 --- a/_sass/bootstrap/_breadcrumb.scss +++ b/_sass/bootstrap/_breadcrumb.scss @@ -1,42 +1,40 @@ .breadcrumb { + // scss-docs-start breadcrumb-css-vars + --#{$prefix}breadcrumb-padding-x: #{$breadcrumb-padding-x}; + --#{$prefix}breadcrumb-padding-y: #{$breadcrumb-padding-y}; + --#{$prefix}breadcrumb-margin-bottom: #{$breadcrumb-margin-bottom}; + @include rfs($breadcrumb-font-size, --#{$prefix}breadcrumb-font-size); + --#{$prefix}breadcrumb-bg: #{$breadcrumb-bg}; + --#{$prefix}breadcrumb-border-radius: #{$breadcrumb-border-radius}; + --#{$prefix}breadcrumb-divider-color: #{$breadcrumb-divider-color}; + --#{$prefix}breadcrumb-item-padding-x: #{$breadcrumb-item-padding-x}; + --#{$prefix}breadcrumb-item-active-color: #{$breadcrumb-active-color}; + // scss-docs-end breadcrumb-css-vars + display: flex; flex-wrap: wrap; - padding: $breadcrumb-padding-y $breadcrumb-padding-x; - margin-bottom: $breadcrumb-margin-bottom; - @include font-size($breadcrumb-font-size); + padding: var(--#{$prefix}breadcrumb-padding-y) var(--#{$prefix}breadcrumb-padding-x); + margin-bottom: var(--#{$prefix}breadcrumb-margin-bottom); + @include font-size(var(--#{$prefix}breadcrumb-font-size)); list-style: none; - background-color: $breadcrumb-bg; - @include border-radius($breadcrumb-border-radius); + background-color: var(--#{$prefix}breadcrumb-bg); + @include border-radius(var(--#{$prefix}breadcrumb-border-radius)); } .breadcrumb-item { // The separator between breadcrumbs (by default, a forward-slash: "/") + .breadcrumb-item { - padding-left: $breadcrumb-item-padding; + padding-left: var(--#{$prefix}breadcrumb-item-padding-x); &::before { float: left; // Suppress inline spacings and underlining of the separator - padding-right: $breadcrumb-item-padding; - color: $breadcrumb-divider-color; - content: escape-svg($breadcrumb-divider); + padding-right: var(--#{$prefix}breadcrumb-item-padding-x); + color: var(--#{$prefix}breadcrumb-divider-color); + content: var(--#{$prefix}breadcrumb-divider, escape-svg($breadcrumb-divider)) #{"/* rtl:"} var(--#{$prefix}breadcrumb-divider, escape-svg($breadcrumb-divider-flipped)) #{"*/"}; } } - // IE9-11 hack to properly handle hyperlink underlines for breadcrumbs built - // without `