From e342142b61aacc187c776052bde93e414eb25db7 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 28 Mar 2022 15:05:37 -0700 Subject: 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 --- .bundlewatch.config.json | 4 +- scss/_accordion.scss | 42 ++++++---- scss/_card.scss | 92 +++++++++++++--------- scss/_modal.scss | 106 +++++++++++++++++--------- scss/_nav.scss | 64 +++++++++++----- scss/_variables.scss | 10 ++- site/content/docs/5.1/components/accordion.md | 10 ++- site/content/docs/5.1/components/card.md | 10 ++- site/content/docs/5.1/components/modal.md | 12 ++- 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 - 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 @@ // `