diff options
author | Mark Otto <markdotto@gmail.com> | 2022-03-02 00:23:29 +0300 |
---|---|---|
committer | Mark Otto <markdotto@gmail.com> | 2022-04-17 02:36:22 +0300 |
commit | a6c2a61e390d6680594921cdcbeb17574d4c8b57 (patch) | |
tree | 737534f5015c562258cc8b051316fcd5685cb277 | |
parent | f36d50490d9cbf2f228cc8c2e9e3248801f97d1d (diff) |
Convert offcanvas to CSS vars
-rw-r--r-- | scss/_offcanvas.scss | 63 | ||||
-rw-r--r-- | site/content/docs/5.1/components/offcanvas.md | 10 |
2 files changed, 53 insertions, 20 deletions
diff --git a/scss/_offcanvas.scss b/scss/_offcanvas.scss index 037c419fee..e923db2f24 100644 --- a/scss/_offcanvas.scss +++ b/scss/_offcanvas.scss @@ -1,3 +1,28 @@ +// stylelint-disable function-disallowed-list + +%offcanvas-css-vars { + // scss-docs-start offcanvas-css-vars + --#{$prefix}offcanvas-width: #{$offcanvas-horizontal-width}; + --#{$prefix}offcanvas-height: #{$offcanvas-vertical-height}; + --#{$prefix}offcanvas-padding-x: #{$offcanvas-padding-x}; + --#{$prefix}offcanvas-padding-y: #{$offcanvas-padding-y}; + --#{$prefix}offcanvas-color: #{$offcanvas-color}; + --#{$prefix}offcanvas-bg: #{$offcanvas-bg-color}; + --#{$prefix}offcanvas-border-width: #{$offcanvas-border-width}; + --#{$prefix}offcanvas-border-color: #{$offcanvas-border-color}; + --#{$prefix}offcanvas-box-shadow: #{$offcanvas-box-shadow}; + // scss-docs-end offcanvas-css-vars +} + +@each $breakpoint in map-keys($grid-breakpoints) { + $next: breakpoint-next($breakpoint, $grid-breakpoints); + $infix: breakpoint-infix($next, $grid-breakpoints); + + .offcanvas#{$infix} { + @extend %offcanvas-css-vars; + } +} + @each $breakpoint in map-keys($grid-breakpoints) { $next: breakpoint-next($breakpoint, $grid-breakpoints); $infix: breakpoint-infix($next, $grid-breakpoints); @@ -10,12 +35,12 @@ display: flex; flex-direction: column; max-width: 100%; - color: $offcanvas-color; + color: var(--#{$prefix}offcanvas-color); visibility: hidden; - background-color: $offcanvas-bg-color; + background-color: var(--#{$prefix}offcanvas-bg); background-clip: padding-box; outline: 0; - @include box-shadow($offcanvas-box-shadow); + @include box-shadow(var(--#{$prefix}offcanvas-box-shadow)); @include transition(transform $offcanvas-transition-duration ease-in-out); &.showing, @@ -32,16 +57,16 @@ &.offcanvas-start { top: 0; left: 0; - width: $offcanvas-horizontal-width; - border-right: $offcanvas-border-width solid $offcanvas-border-color; + width: var(--#{$prefix}offcanvas-width); + border-right: var(--#{$prefix}offcanvas-border-width) solid var(--#{$prefix}offcanvas-border-color); transform: translateX(-100%); } &.offcanvas-end { top: 0; right: 0; - width: $offcanvas-horizontal-width; - border-left: $offcanvas-border-width solid $offcanvas-border-color; + width: var(--#{$prefix}offcanvas-width); + border-left: var(--#{$prefix}offcanvas-border-width) solid var(--#{$prefix}offcanvas-border-color); transform: translateX(100%); } @@ -49,27 +74,27 @@ top: 0; right: 0; left: 0; - height: $offcanvas-vertical-height; + height: var(--#{$prefix}offcanvas-height); max-height: 100%; - border-bottom: $offcanvas-border-width solid $offcanvas-border-color; + border-bottom: var(--#{$prefix}offcanvas-border-width) solid var(--#{$prefix}offcanvas-border-color); transform: translateY(-100%); } &.offcanvas-bottom { right: 0; left: 0; - height: $offcanvas-vertical-height; + height: var(--#{$prefix}offcanvas-height); max-height: 100%; - border-top: $offcanvas-border-width solid $offcanvas-border-color; + border-top: var(--#{$prefix}offcanvas-border-width) solid var(--#{$prefix}offcanvas-border-color); transform: translateY(100%); } } @if not ($infix == "") { @include media-breakpoint-up($next) { - height: auto; + --#{$prefix}offcanvas-height: auto; + --#{$prefix}offcanvas-border-width: 0; background-color: transparent !important; // stylelint-disable-line declaration-no-important - border: 0; .offcanvas-header { display: none; @@ -96,13 +121,13 @@ display: flex; align-items: center; justify-content: space-between; - padding: $offcanvas-padding-y $offcanvas-padding-x; + padding: var(--#{$prefix}offcanvas-padding-y) var(--#{$prefix}offcanvas-padding-x); .btn-close { - padding: ($offcanvas-padding-y * .5) ($offcanvas-padding-x * .5); - margin-top: $offcanvas-padding-y * -.5; - margin-right: $offcanvas-padding-x * -.5; - margin-bottom: $offcanvas-padding-y * -.5; + padding: calc(var(--#{$prefix}offcanvas-padding-y) * .5) calc(var(--#{$prefix}offcanvas-padding-x) * .5); + margin-top: calc(var(--#{$prefix}offcanvas-padding-y) * -.5); + margin-right: calc(var(--#{$prefix}offcanvas-padding-x) * -.5); + margin-bottom: calc(var(--#{$prefix}offcanvas-padding-y) * -.5); } } @@ -113,6 +138,6 @@ .offcanvas-body { flex-grow: 1; - padding: $offcanvas-padding-y $offcanvas-padding-x; + padding: var(--#{$prefix}offcanvas-padding-y) var(--#{$prefix}offcanvas-padding-x); overflow-y: auto; } diff --git a/site/content/docs/5.1/components/offcanvas.md b/site/content/docs/5.1/components/offcanvas.md index 707c0b9a8e..6ad9b6e893 100644 --- a/site/content/docs/5.1/components/offcanvas.md +++ b/site/content/docs/5.1/components/offcanvas.md @@ -239,10 +239,18 @@ Try the top, right, and bottom examples out below. Since the offcanvas panel is conceptually a modal dialog, be sure to add `aria-labelledby="..."`—referencing the offcanvas title—to `.offcanvas`. Note that you don’t need to add `role="dialog"` since we already add it via JavaScript. -## Sass +## CSS ### Variables +<small class="d-inline-flex px-2 py-1 fw-semibold text-success bg-success bg-opacity-10 rounded-2">Added in v5.2.0</small> + +As part of Bootstrap's evolving CSS variables approach, offcanvas now uses local CSS variables on `.offcanvas` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too. + +{{< scss-docs name="offcanvas-css-vars" file="scss/_offcanvas.scss" >}} + +### Sass variables + {{< scss-docs name="offcanvas-variables" file="scss/_variables.scss" >}} ## Usage |