diff options
author | Mark Otto <markd.otto@gmail.com> | 2022-03-29 01:05:37 +0300 |
---|---|---|
committer | GitHub <noreply@github.com> | 2022-03-29 01:05:37 +0300 |
commit | e342142b61aacc187c776052bde93e414eb25db7 (patch) | |
tree | 33cce334f95cd8b69525e7a22d53a1b3506540b7 | |
parent | 7f35bc5b65dccf6c953321e47342c4ed0b7c4b2b (diff) |
Train PR: CSS variables for accordion, cards, navs, and modals (#36071)
* Convert accordion to CSS vars
* Update accordion.md
* Convert navs to CSS variables
* Split up CSS vars
* bundlewatch
* fix vars
* Convert cards to CSS vars
* Convert modals to CSS variables
* Bundlewatch
Co-authored-by: Geremia Taglialatela <tagliala.dev@gmail.com>
-rw-r--r-- | .bundlewatch.config.json | 4 | ||||
-rw-r--r-- | scss/_accordion.scss | 42 | ||||
-rw-r--r-- | scss/_card.scss | 92 | ||||
-rw-r--r-- | scss/_modal.scss | 106 | ||||
-rw-r--r-- | scss/_nav.scss | 64 | ||||
-rw-r--r-- | scss/_variables.scss | 10 | ||||
-rw-r--r-- | site/content/docs/5.1/components/accordion.md | 10 | ||||
-rw-r--r-- | site/content/docs/5.1/components/card.md | 10 | ||||
-rw-r--r-- | site/content/docs/5.1/components/modal.md | 12 | ||||
-rw-r--r-- | site/content/docs/5.1/components/navs-tabs.md | 20 |
10 files changed, 256 insertions, 114 deletions
diff --git a/.bundlewatch.config.json b/.bundlewatch.config.json index 43c10d546c..6fcfbb2a72 100644 --- a/.bundlewatch.config.json +++ b/.bundlewatch.config.json @@ -26,11 +26,11 @@ }, { "path": "./dist/css/bootstrap.css", - "maxSize": "26.9 kB" + "maxSize": "27.6 kB" }, { "path": "./dist/css/bootstrap.min.css", - "maxSize": "25 kB" + "maxSize": "25.65 kB" }, { "path": "./dist/js/bootstrap.bundle.js", diff --git a/scss/_accordion.scss b/scss/_accordion.scss index 53f1c0ccfc..aac63ce2ff 100644 --- a/scss/_accordion.scss +++ b/scss/_accordion.scss @@ -2,14 +2,30 @@ // Base styles // +.accordion { + // scss-docs-start accordion-css-vars + --#{$prefix}accordion-color: #{$accordion-color}; + --#{$prefix}accordion-bg: #{$accordion-bg}; + --#{$prefix}accordion-border-color: #{$accordion-border-color}; + --#{$prefix}accordion-border-width: #{$accordion-border-width}; + --#{$prefix}accordion-border-radius: #{$accordion-border-radius}; + --#{$prefix}accordion-btn-padding-x: #{$accordion-button-padding-x}; + --#{$prefix}accordion-btn-padding-y: #{$accordion-button-padding-y}; + --#{$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: $accordion-button-padding-y $accordion-button-padding-x; + padding: var(--#{$prefix}accordion-btn-padding-y) var(--#{$prefix}accordion-btn-padding-x); @include font-size($font-size-base); - color: $accordion-button-color; + color: var(--#{$prefix}accordion-color); text-align: left; // Reset button style background-color: $accordion-button-bg; border: 0; @@ -18,9 +34,9 @@ @include transition($accordion-transition); &:not(.collapsed) { - color: $accordion-button-active-color; - background-color: $accordion-button-active-bg; - box-shadow: inset 0 calc($accordion-border-width * -1) 0 $accordion-border-color; // stylelint-disable-line function-disallowed-list + color: var(--#{$prefix}accordion-active-color); + background-color: var(--#{$prefix}accordion-active-bg); + box-shadow: inset 0 calc(var(--#{$prefix}accordion-border-width) * -1) 0 var(--#{$prefix}accordion-border-color); // stylelint-disable-line function-disallowed-list &::after { background-image: escape-svg($accordion-button-active-icon); @@ -59,14 +75,14 @@ .accordion-item { color: color-contrast($accordion-bg); - background-color: $accordion-bg; - border: $accordion-border-width solid $accordion-border-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($accordion-border-radius); + @include border-top-radius(var(--#{$prefix}accordion-border-radius)); .accordion-button { - @include border-top-radius($accordion-inner-border-radius); + @include border-top-radius($accordion-inner-border-radius); // todo } } @@ -76,22 +92,22 @@ // Only set a border-radius on the last item if the accordion is collapsed &:last-of-type { - @include border-bottom-radius($accordion-border-radius); + @include border-bottom-radius(var(--#{$prefix}accordion-border-radius)); .accordion-button { &.collapsed { - @include border-bottom-radius($accordion-inner-border-radius); + @include border-bottom-radius($accordion-inner-border-radius); // todo } } .accordion-collapse { - @include border-bottom-radius($accordion-border-radius); + @include border-bottom-radius(var(--#{$prefix}accordion-border-radius)); } } } .accordion-body { - padding: $accordion-body-padding-y $accordion-body-padding-x; + padding: var(--#{$prefix}accordion-body-padding-y) var(--#{$prefix}accordion-body-padding-x); } diff --git a/scss/_card.scss b/scss/_card.scss index 22890f5c97..ce8c02f1f2 100644 --- a/scss/_card.scss +++ b/scss/_card.scss @@ -3,17 +3,37 @@ // .card { + // scss-docs-start card-css-vars + --#{$prefix}card-spacer-y: #{$card-spacer-y}; + --#{$prefix}card-spacer-x: #{$card-spacer-x}; + --#{$prefix}card-title-spacer-y: #{$card-title-spacer-y}; + --#{$prefix}card-border-width: #{$card-border-width}; + --#{$prefix}card-border-color: #{$card-border-color}; + --#{$prefix}card-border-radius: #{$card-border-radius}; + --#{$prefix}card-box-shadow: #{$card-box-shadow}; + --#{$prefix}card-inner-border-radius: #{$card-inner-border-radius}; + --#{$prefix}card-cap-padding-y: #{$card-cap-padding-y}; + --#{$prefix}card-cap-padding-x: #{$card-cap-padding-x}; + --#{$prefix}card-cap-bg: #{$card-cap-bg}; + --#{$prefix}card-cap-color: #{$card-cap-color}; + --#{$prefix}card-height: #{$card-height}; + --#{$prefix}card-color: #{$card-color}; + --#{$prefix}card-bg: #{$card-bg}; + --#{$prefix}card-img-overlay-padding: #{$card-img-overlay-padding}; + --#{$prefix}card-group-margin: #{$card-group-margin}; + // scss-docs-end card-css-vars + position: relative; display: flex; flex-direction: column; min-width: 0; // See https://github.com/twbs/bootstrap/pull/22740#issuecomment-305868106 - height: $card-height; + height: var(--#{$prefix}card-height); word-wrap: break-word; - background-color: $card-bg; + background-color: var(--#{$prefix}card-bg); background-clip: border-box; - border: $card-border-width solid $card-border-color; - @include border-radius($card-border-radius); - @include box-shadow($card-box-shadow); + border: var(--#{$prefix}card-border-width) solid var(--#{$prefix}card-border-color); + @include border-radius(var(--#{$prefix}card-border-radius)); + @include box-shadow(var(--#{$prefix}card-box-shadow)); > hr { margin-right: 0; @@ -26,12 +46,12 @@ &:first-child { border-top-width: 0; - @include border-top-radius($card-inner-border-radius); + @include border-top-radius(var(--#{$prefix}card-inner-border-radius)); } &:last-child { border-bottom-width: 0; - @include border-bottom-radius($card-inner-border-radius); + @include border-bottom-radius(var(--#{$prefix}card-inner-border-radius)); } } @@ -47,16 +67,16 @@ // Enable `flex-grow: 1` for decks and groups so that card blocks take up // as much space as possible, ensuring footers are aligned to the bottom. flex: 1 1 auto; - padding: $card-spacer-y $card-spacer-x; - color: $card-color; + padding: var(--#{$prefix}card-spacer-y) var(--#{$prefix}card-spacer-x); + color: var(--#{$prefix}card-color); } .card-title { - margin-bottom: $card-title-spacer-y; + margin-bottom: var(--#{$prefix}card-title-spacer-y); } .card-subtitle { - margin-top: -$card-title-spacer-y * .5; + margin-top: calc(-.5 * var(--#{$prefix}card-title-spacer-y)); // stylelint-disable-line function-disallowed-list margin-bottom: 0; } @@ -70,7 +90,7 @@ } + .card-link { - margin-left: $card-spacer-x; + margin-left: var(--#{$prefix}card-spacer-x); } } @@ -79,25 +99,25 @@ // .card-header { - padding: $card-cap-padding-y $card-cap-padding-x; + padding: var(--#{$prefix}card-cap-padding-y) var(--#{$prefix}card-cap-padding-x); margin-bottom: 0; // Removes the default margin-bottom of <hN> - color: $card-cap-color; - background-color: $card-cap-bg; - border-bottom: $card-border-width solid $card-border-color; + color: var(--#{$prefix}card-cap-color); + background-color: var(--#{$prefix}card-cap-bg); + border-bottom: var(--#{$prefix}card-border-width) solid var(--#{$prefix}card-border-color); &:first-child { - @include border-radius($card-inner-border-radius $card-inner-border-radius 0 0); + @include border-radius(var(--#{$prefix}card-inner-border-radius) var(--#{$prefix}card-inner-border-radius) 0 0); } } .card-footer { - padding: $card-cap-padding-y $card-cap-padding-x; - color: $card-cap-color; - background-color: $card-cap-bg; - border-top: $card-border-width solid $card-border-color; + padding: var(--#{$prefix}card-cap-padding-y) var(--#{$prefix}card-cap-padding-x); + color: var(--#{$prefix}card-cap-color); + background-color: var(--#{$prefix}card-cap-bg); + border-top: var(--#{$prefix}card-border-width) solid var(--#{$prefix}card-border-color); &:last-child { - @include border-radius(0 0 $card-inner-border-radius $card-inner-border-radius); + @include border-radius(0 0 var(--#{$prefix}card-inner-border-radius) var(--#{$prefix}card-inner-border-radius)); } } @@ -107,22 +127,20 @@ // .card-header-tabs { - margin-right: -$card-cap-padding-x * .5; - margin-bottom: -$card-cap-padding-y; - margin-left: -$card-cap-padding-x * .5; + margin-right: calc(-.5 * var(--#{$prefix}card-cap-padding-x)); // stylelint-disable-line function-disallowed-list + margin-bottom: calc(-1 * var(--#{$prefix}card-cap-padding-y)); // stylelint-disable-line function-disallowed-list + margin-left: calc(-.5 * var(--#{$prefix}card-cap-padding-x)); // stylelint-disable-line function-disallowed-list border-bottom: 0; - @if $nav-tabs-link-active-bg != $card-bg { - .nav-link.active { - background-color: $card-bg; - border-bottom-color: $card-bg; - } + .nav-link.active { + background-color: var(--#{$prefix}card-bg); + border-bottom-color: var(--#{$prefix}card-bg); } } .card-header-pills { - margin-right: -$card-cap-padding-x * .5; - margin-left: -$card-cap-padding-x * .5; + margin-right: calc(-.5 * var(--#{$prefix}card-cap-padding-x)); // stylelint-disable-line function-disallowed-list + margin-left: calc(-.5 * var(--#{$prefix}card-cap-padding-x)); // stylelint-disable-line function-disallowed-list } // Card image @@ -132,8 +150,8 @@ right: 0; bottom: 0; left: 0; - padding: $card-img-overlay-padding; - @include border-radius($card-inner-border-radius); + padding: var(--#{$prefix}card-img-overlay-padding); + @include border-radius(var(--#{$prefix}card-inner-border-radius)); } .card-img, @@ -144,12 +162,12 @@ .card-img, .card-img-top { - @include border-top-radius($card-inner-border-radius); + @include border-top-radius(var(--#{$prefix}card-inner-border-radius)); } .card-img, .card-img-bottom { - @include border-bottom-radius($card-inner-border-radius); + @include border-bottom-radius(var(--#{$prefix}card-inner-border-radius)); } @@ -161,7 +179,7 @@ // The child selector allows nested `.card` within `.card-group` // to display properly. > .card { - margin-bottom: $card-group-margin; + margin-bottom: var(--#{$prefix}card-group-margin); } @include media-breakpoint-up(sm) { diff --git a/scss/_modal.scss b/scss/_modal.scss index 7fa82191fd..6b341a895e 100644 --- a/scss/_modal.scss +++ b/scss/_modal.scss @@ -1,3 +1,5 @@ +// stylelint-disable function-disallowed-list + // .modal-open - body class for killing the scroll // .modal - container to scroll within // .modal-dialog - positioning shell for the actual modal @@ -6,10 +8,34 @@ // Container that the modal scrolls within .modal { + // scss-docs-start modal-css-vars + --#{$prefix}modal-zindex: #{$zindex-modal}; + --#{$prefix}modal-width: #{$modal-md}; + --#{$prefix}modal-padding: #{$modal-inner-padding}; + --#{$prefix}modal-margin: #{$modal-dialog-margin}; + --#{$prefix}modal-color: #{$modal-content-color}; + --#{$prefix}modal-bg: #{$modal-content-bg}; + --#{$prefix}modal-border-color: #{$modal-content-border-color}; + --#{$prefix}modal-border-width: #{$modal-content-border-width}; + --#{$prefix}modal-border-radius: #{$modal-content-border-radius}; + --#{$prefix}modal-box-shadow: #{$modal-content-box-shadow-xs}; + --#{$prefix}modal-inner-border-radius: #{$modal-content-inner-border-radius}; + --#{$prefix}modal-header-padding-x: #{$modal-header-padding-x}; + --#{$prefix}modal-header-padding-y: #{$modal-header-padding-y}; + --#{$prefix}modal-header-padding: #{$modal-header-padding}; // Todo in v6: Split this padding into x and y + --#{$prefix}modal-header-border-color: #{$modal-header-border-color}; + --#{$prefix}modal-header-border-width: #{$modal-header-border-width}; + --#{$prefix}modal-title-line-height: #{$modal-title-line-height}; + --#{$prefix}modal-footer-gap: #{$modal-footer-margin-between}; + --#{$prefix}modal-footer-bg: #{$modal-footer-bg}; + --#{$prefix}modal-footer-border-color: #{$modal-footer-border-color}; + --#{$prefix}modal-footer-border-width: #{$modal-footer-border-width}; + // scss-docs-end modal-css-vars + position: fixed; top: 0; left: 0; - z-index: $zindex-modal; + z-index: var(--#{$prefix}modal-zindex); display: none; width: 100%; height: 100%; @@ -28,7 +54,7 @@ .modal-dialog { position: relative; width: auto; - margin: $modal-dialog-margin; + margin: var(--#{$prefix}modal-margin); // allow clicks to pass through for custom click handling to close modal pointer-events: none; @@ -48,7 +74,7 @@ } .modal-dialog-scrollable { - height: subtract(100%, $modal-dialog-margin * 2); + height: calc(100% - var(--#{$prefix}modal-margin) * 2); .modal-content { max-height: 100%; @@ -63,7 +89,7 @@ .modal-dialog-centered { display: flex; align-items: center; - min-height: subtract(100%, $modal-dialog-margin * 2); + min-height: calc(100% - var(--#{$prefix}modal-margin) * 2); } // Actual modal @@ -73,20 +99,26 @@ flex-direction: column; width: 100%; // Ensure `.modal-content` extends the full width of the parent `.modal-dialog` // counteract the pointer-events: none; in the .modal-dialog - color: $modal-content-color; + color: var(--#{$prefix}modal-color); pointer-events: auto; - background-color: $modal-content-bg; + background-color: var(--#{$prefix}modal-bg); background-clip: padding-box; - border: $modal-content-border-width solid $modal-content-border-color; - @include border-radius($modal-content-border-radius); - @include box-shadow($modal-content-box-shadow-xs); + border: var(--#{$prefix}modal-border-width) solid var(--#{$prefix}modal-border-color); + @include border-radius(var(--#{$prefix}modal-border-radius)); + @include box-shadow(var(--#{$prefix}modal-box-shadow)); // Remove focus outline from opened modal outline: 0; } // Modal background .modal-backdrop { - @include overlay-backdrop($zindex-modal-backdrop, $modal-backdrop-bg, $modal-backdrop-opacity); + // scss-docs-start modal-backdrop-css-vars + --#{$prefix}backdrop-zindex: #{$zindex-modal-backdrop}; + --#{$prefix}backdrop-bg: #{$modal-backdrop-bg}; + --#{$prefix}backdrop-opacity: #{$modal-backdrop-opacity}; + // scss-docs-end modal-backdrop-css-vars + + @include overlay-backdrop(var(--#{$prefix}backdrop-zindex), var(--#{$prefix}backdrop-bg), var(--#{$prefix}backdrop-opacity)); } // Modal header @@ -96,20 +128,20 @@ flex-shrink: 0; align-items: center; justify-content: space-between; // Put modal header elements (title and dismiss) on opposite ends - padding: $modal-header-padding; - border-bottom: $modal-header-border-width solid $modal-header-border-color; - @include border-top-radius($modal-content-inner-border-radius); + padding: var(--#{$prefix}modal-header-padding); + border-bottom: var(--#{$prefix}modal-header-border-width) solid var(--#{$prefix}modal-header-border-color); + @include border-top-radius(var(--#{$prefix}modal-inner-border-radius)); .btn-close { - padding: ($modal-header-padding-y * .5) ($modal-header-padding-x * .5); - margin: ($modal-header-padding-y * -.5) ($modal-header-padding-x * -.5) ($modal-header-padding-y * -.5) auto; + padding: calc(var(--#{$prefix}modal-header-padding-y) * .5) calc(var(--#{$prefix}modal-header-padding-x) * .5); + margin: calc(var(--#{$prefix}modal-header-padding-y) * -.5) calc(var(--#{$prefix}modal-header-padding-x) * -.5) calc(var(--#{$prefix}modal-header-padding-y) * -.5) auto; } } // Title text within header .modal-title { margin-bottom: 0; - line-height: $modal-title-line-height; + line-height: var(--#{$prefix}modal-title-line-height); } // Modal body @@ -119,7 +151,7 @@ // Enable `flex-grow: 1` so that the body take up as much space as possible // when there should be a fixed height on `.modal-dialog`. flex: 1 1 auto; - padding: $modal-inner-padding; + padding: var(--#{$prefix}modal-padding); } // Footer (for actions) @@ -129,16 +161,16 @@ flex-wrap: wrap; align-items: center; // vertically center justify-content: flex-end; // Right align buttons with flex property because text-align doesn't work on flex items - padding: $modal-inner-padding - $modal-footer-margin-between * .5; - background-color: $modal-footer-bg; - border-top: $modal-footer-border-width solid $modal-footer-border-color; - @include border-bottom-radius($modal-content-inner-border-radius); + padding: calc(var(--#{$prefix}modal-padding) - var(--#{$prefix}modal-footer-gap) * .5); + background-color: var(--#{$prefix}modal-footer-bg); + border-top: var(--#{$prefix}modal-footer-border-width) solid var(--#{$prefix}modal-footer-border-color); + @include border-bottom-radius(var(--#{$prefix}modal-inner-border-radius)); // Place margin between footer elements // This solution is far from ideal because of the universal selector usage, // but is needed to fix https://github.com/twbs/bootstrap/issues/24800 > * { - margin: $modal-footer-margin-between * .5; + margin: calc(var(--#{$prefix}modal-footer-gap) * .5); // Todo in v6: replace with gap on parent class } } @@ -146,34 +178,41 @@ @include media-breakpoint-up(sm) { // Automatically set modal's width for larger viewports .modal-dialog { - max-width: $modal-md; - margin: $modal-dialog-margin-y-sm-up auto; + --#{$prefix}modal-margin: #{$modal-dialog-margin-y-sm-up}; + + max-width: var(--#{$prefix}modal-width); + margin-right: auto; + margin-left: auto; } .modal-dialog-scrollable { - height: subtract(100%, $modal-dialog-margin-y-sm-up * 2); + height: calc(100% - var(--#{$prefix}modal-margin) * 2); } .modal-dialog-centered { - min-height: subtract(100%, $modal-dialog-margin-y-sm-up * 2); + min-height: calc(100% - var(--#{$prefix}modal-margin) * 2); } .modal-content { - @include box-shadow($modal-content-box-shadow-sm-up); + --#{$prefix}modal-box-shadow: #{$modal-content-box-shadow-sm-up}; } - .modal-sm { max-width: $modal-sm; } + .modal-sm { + --#{$prefix}modal-width: #{$modal-sm}; + } } @include media-breakpoint-up(lg) { .modal-lg, .modal-xl { - max-width: $modal-lg; + --#{$prefix}modal-width: #{$modal-lg}; } } @include media-breakpoint-up(xl) { - .modal-xl { max-width: $modal-xl; } + .modal-xl { + --#{$prefix}modal-width: #{$modal-xl}; + } } // scss-docs-start modal-fullscreen-loop @@ -194,17 +233,14 @@ @include border-radius(0); } - .modal-header { + .modal-header, + .modal-footer { @include border-radius(0); } .modal-body { overflow-y: auto; } - - .modal-footer { - @include border-radius(0); - } } } } diff --git a/scss/_nav.scss b/scss/_nav.scss index 62a2fa6828..21ee1b2b44 100644 --- a/scss/_nav.scss +++ b/scss/_nav.scss @@ -4,6 +4,16 @@ // `<nav>`s, `<ul>`s or `<ol>`s. .nav { + // scss-docs-start nav-css-vars + --#{$prefix}nav-link-padding-x: #{$nav-link-padding-x}; + --#{$prefix}nav-link-padding-y: #{$nav-link-padding-y}; + @include rfs($nav-link-font-size, --#{$prefix}nav-link-font-size); + --#{$prefix}nav-link-font-weight: #{$nav-link-font-weight}; // stylelint-disable-line custom-property-empty-line-before + --#{$prefix}nav-link-color: #{$nav-link-color}; + --#{$prefix}nav-link-hover-color: #{$nav-link-hover-color}; + --#{$prefix}nav-link-disabled-color: #{$nav-link-disabled-color}; + // scss-docs-end nav-css-vars + display: flex; flex-wrap: wrap; padding-left: 0; @@ -13,22 +23,22 @@ .nav-link { display: block; - padding: $nav-link-padding-y $nav-link-padding-x; - @include font-size($nav-link-font-size); - font-weight: $nav-link-font-weight; - color: $nav-link-color; + padding: var(--#{$prefix}nav-link-padding-y) var(--#{$prefix}nav-link-padding-x); + @include font-size(var(--#{$prefix}nav-link-font-size)); + font-weight: var(--#{$prefix}nav-link-font-weight); + color: var(--#{$prefix}nav-link-color); text-decoration: if($link-decoration == none, null, none); @include transition($nav-link-transition); &:hover, &:focus { - color: $nav-link-hover-color; + color: var(--#{$prefix}nav-link-hover-color); text-decoration: if($link-hover-decoration == underline, none, null); } // Disabled state lightens text &.disabled { - color: $nav-link-disabled-color; + color: var(--#{$prefix}nav-link-disabled-color); pointer-events: none; cursor: default; } @@ -39,23 +49,33 @@ // .nav-tabs { - border-bottom: $nav-tabs-border-width solid $nav-tabs-border-color; + // scss-docs-start nav-tabs-css-vars + --#{$prefix}nav-tabs-border-width: #{$nav-tabs-border-width}; + --#{$prefix}nav-tabs-border-color: #{$nav-tabs-border-color}; + --#{$prefix}nav-tabs-border-radius: #{$nav-tabs-border-radius}; + --#{$prefix}nav-tabs-link-hover-border-color: #{$nav-tabs-link-hover-border-color}; + --#{$prefix}nav-tabs-link-active-color: #{$nav-tabs-link-active-color}; + --#{$prefix}nav-tabs-link-active-bg: #{$nav-tabs-link-active-bg}; + --#{$prefix}nav-tabs-link-active-border-color: #{$nav-tabs-link-active-border-color}; + // scss-docs-end nav-tabs-css-vars + + border-bottom: var(--#{$prefix}nav-tabs-border-width) solid var(--#{$prefix}nav-tabs-border-color); .nav-link { - margin-bottom: calc($nav-tabs-border-width * -1); // stylelint-disable-line function-disallowed-list + margin-bottom: calc(var(--#{$prefix}nav-tabs-border-width) * -1); // stylelint-disable-line function-disallowed-list background: none; - border: $nav-tabs-border-width solid transparent; - @include border-top-radius($nav-tabs-border-radius); + border: var(--#{$prefix}nav-tabs-border-width) solid transparent; + @include border-top-radius(var(--#{$prefix}nav-tabs-border-radius)); &:hover, &:focus { // Prevents active .nav-link tab overlapping focus outline of previous/next .nav-link isolation: isolate; - border-color: $nav-tabs-link-hover-border-color; + border-color: var(--#{$prefix}nav-tabs-link-hover-border-color); } &.disabled { - color: $nav-link-disabled-color; + color: var(--#{$prefix}nav-link-disabled-color); background-color: transparent; border-color: transparent; } @@ -63,14 +83,14 @@ .nav-link.active, .nav-item.show .nav-link { - color: $nav-tabs-link-active-color; - background-color: $nav-tabs-link-active-bg; - border-color: $nav-tabs-link-active-border-color; + color: var(--#{$prefix}nav-tabs-link-active-color); + background-color: var(--#{$prefix}nav-tabs-link-active-bg); + border-color: var(--#{$prefix}nav-tabs-link-active-border-color); } .dropdown-menu { // Make dropdown border overlap tab border - margin-top: calc($nav-tabs-border-width * -1); // stylelint-disable-line function-disallowed-list + margin-top: calc(var(--#{$prefix}nav-tabs-border-width) * -1); // stylelint-disable-line function-disallowed-list // Remove the top rounded corners here since there is a hard edge above the menu @include border-top-radius(0); } @@ -82,16 +102,22 @@ // .nav-pills { + // scss-docs-start nav-pills-css-vars + --#{$prefix}nav-pills-border-radius: #{$nav-pills-border-radius}; + --#{$prefix}nav-pills-link-active-color: #{$nav-pills-link-active-color}; + --#{$prefix}nav-pills-link-active-bg: #{$nav-pills-link-active-bg}; + // scss-docs-end nav-pills-css-vars + .nav-link { background: none; border: 0; - @include border-radius($nav-pills-border-radius); + @include border-radius(var(--#{$prefix}nav-pills-border-radius)); } .nav-link.active, .show > .nav-link { - color: $nav-pills-link-active-color; - @include gradient-bg($nav-pills-link-active-bg); + color: var(--#{$prefix}nav-pills-link-active-color); + @include gradient-bg(var(--#{$prefix}nav-pills-link-active-bg)); } } diff --git a/scss/_variables.scss b/scss/_variables.scss index 482d9ca8e0..de1a871d3c 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -1252,7 +1252,7 @@ $card-group-margin: $grid-gutter-width * .5 !default; // scss-docs-start accordion-variables $accordion-padding-y: 1rem !default; $accordion-padding-x: 1.25rem !default; -$accordion-color: $body-color !default; +$accordion-color: var(--#{$variable-prefix}body-color) !default; $accordion-bg: $body-bg !default; $accordion-border-width: $border-width !default; $accordion-border-color: var(--#{$prefix}border-color) !default; @@ -1265,7 +1265,7 @@ $accordion-body-padding-x: $accordion-padding-x !default; $accordion-button-padding-y: $accordion-padding-y !default; $accordion-button-padding-x: $accordion-padding-x !default; $accordion-button-color: $accordion-color !default; -$accordion-button-bg: $accordion-bg !default; +$accordion-button-bg: var(--#{$variable-prefix}accordion-bg) !default; $accordion-transition: $btn-transition, border-radius .15s ease !default; $accordion-button-active-bg: tint-color($component-active-bg, 90%) !default; $accordion-button-active-color: shade-color($primary, 10%) !default; @@ -1402,14 +1402,16 @@ $modal-content-box-shadow-sm-up: $box-shadow !default; $modal-backdrop-bg: $black !default; $modal-backdrop-opacity: .5 !default; + $modal-header-border-color: var(--#{$prefix}border-color) !default; -$modal-footer-border-color: $modal-header-border-color !default; $modal-header-border-width: $modal-content-border-width !default; -$modal-footer-border-width: $modal-header-border-width !default; $modal-header-padding-y: $modal-inner-padding !default; $modal-header-padding-x: $modal-inner-padding !default; $modal-header-padding: $modal-header-padding-y $modal-header-padding-x !default; // Keep this for backwards compatibility + $modal-footer-bg: null !default; +$modal-footer-border-color: $modal-header-border-color !default; +$modal-footer-border-width: $modal-header-border-width !default; $modal-sm: 300px !default; $modal-md: 500px !default; diff --git a/site/content/docs/5.1/components/accordion.md b/site/content/docs/5.1/components/accordion.md index 535ae46b5a..ee906f686a 100644 --- a/site/content/docs/5.1/components/accordion.md +++ b/site/content/docs/5.1/components/accordion.md @@ -150,8 +150,16 @@ Omit the `data-bs-parent` attribute on each `.accordion-collapse` to make accord Please read the [collapse accessibility section]({{< docsref "/components/collapse#accessibility" >}}) for more information. -## Sass +## CSS ### Variables +{{< added-in "5.2.0" >}} + +As part of Bootstrap's evolving CSS variables approach, accordions now use local CSS variables on `.accordion` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too. + +{{< scss-docs name="accordion-css-vars" file="scss/_accordion.scss" >}} + +### Sass variables + {{< scss-docs name="accordion-variables" file="scss/_variables.scss" >}} diff --git a/site/content/docs/5.1/components/card.md b/site/content/docs/5.1/components/card.md index 3effb21d00..22b413325c 100644 --- a/site/content/docs/5.1/components/card.md +++ b/site/content/docs/5.1/components/card.md @@ -722,8 +722,16 @@ Just like with card groups, card footers will automatically line up. In `v4` we used a CSS-only technique to mimic the behavior of [Masonry](https://masonry.desandro.com/)-like columns, but this technique came with lots of unpleasant [side effects](https://github.com/twbs/bootstrap/pull/28922). If you want to have this type of layout in `v5`, you can just make use of Masonry plugin. **Masonry is not included in Bootstrap**, but we've made a [demo example]({{< docsref "/examples/masonry" >}}) to help you get started. -## Sass +## CSS ### Variables +{{< added-in "5.2.0" >}} + +As part of Bootstrap's evolving CSS variables approach, cards now use local CSS variables on `.card` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too. + +{{< scss-docs name="card-css-vars" file="scss/_card.scss" >}} + +### Sass variables + {{< scss-docs name="card-variables" file="scss/_variables.scss" >}} diff --git a/site/content/docs/5.1/components/modal.md b/site/content/docs/5.1/components/modal.md index 6facc239c5..d3e64a96ad 100644 --- a/site/content/docs/5.1/components/modal.md +++ b/site/content/docs/5.1/components/modal.md @@ -766,10 +766,20 @@ Another override is the option to pop up a modal that covers the user viewport, </div> </div> -## Sass +## CSS ### Variables +{{< added-in "5.2.0" >}} + +As part of Bootstrap's evolving CSS variables approach, dropdowns now use local CSS variables on `.modal` and `.modal-backdrop` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too. + +{{< scss-docs name="modal-css-vars" file="scss/_modal.scss" >}} + +{{< scss-docs name="modal-backdrop-css-vars" file="scss/_modal.scss" >}} + +### Sass variables + {{< scss-docs name="modal-variables" file="scss/_variables.scss" >}} ### Loop diff --git a/site/content/docs/5.1/components/navs-tabs.md b/site/content/docs/5.1/components/navs-tabs.md index 7e2a20d7ac..81591013d3 100644 --- a/site/content/docs/5.1/components/navs-tabs.md +++ b/site/content/docs/5.1/components/navs-tabs.md @@ -304,10 +304,28 @@ Add dropdown menus with a little extra HTML and the [dropdowns JavaScript plugin </ul> {{< /example >}} -## Sass +## CSS ### Variables +{{< added-in "5.2.0" >}} + +As part of Bootstrap's evolving CSS variables approach, dropdowns now use local CSS variables on `.nav`, `.nav-tabs`, and `.nav-pills` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too. + +On the `.nav` base class: + +{{< scss-docs name="nav-css-vars" file="scss/_nav.scss" >}} + +On the `.nav-tabs` modifier class: + +{{< scss-docs name="nav-tabs-css-vars" file="scss/_nav.scss" >}} + +On the `.nav-pills` modifier class: + +{{< scss-docs name="nav-pills-css-vars" file="scss/_nav.scss" >}} + +### Sass variables + {{< scss-docs name="nav-variables" file="scss/_variables.scss" >}} ## JavaScript behavior |