diff --git a/scss/_offcanvas.scss b/scss/_offcanvas.scss index a089c2a08178..744c42e2e7dc 100644 --- a/scss/_offcanvas.scss +++ b/scss/_offcanvas.scss @@ -81,3 +81,58 @@ .offcanvas.show { transform: none; } + +// Generate series of `.offcanvas-expand-*` responsive classes for configuring +// where your offcanvas collapses. +.offcanvas-expand { + @each $breakpoint in map-keys($grid-breakpoints) { + $next: breakpoint-next($breakpoint, $grid-breakpoints); + $infix: breakpoint-infix($next, $grid-breakpoints); + + // stylelint-disable-next-line scss/selector-no-union-class-name + &#{$infix} { + @include media-breakpoint-up($next) { + .offcanvas { + position: inherit; + z-index: 1; + width: 100%; + visibility: visible!important; // stylelint-disable-line declaration-no-important; + background-color: transparent; + inset: unset; + @include transition(none); + transform: none; + } + + .offcanvas-end { + border-left: 0; + } + + .offcanvas-right { + border-right: 0; + } + + .offcanvas-top, + .offcanvas-bottom { + height: auto; + } + + .offcanvas-top { + border-bottom: 0; + } + + .offcanvas-bottom { + border-top: 0; + } + + .offcanvas-header { + display: none; + } + + .offcanvas-body { + padding: 0; + overflow-y: visible; + } + } + } + } +} diff --git a/site/content/docs/5.1/components/offcanvas.md b/site/content/docs/5.1/components/offcanvas.md index 6be2cd64d4aa..0af0495fe70c 100644 --- a/site/content/docs/5.1/components/offcanvas.md +++ b/site/content/docs/5.1/components/offcanvas.md @@ -170,6 +170,34 @@ Scrolling the `` element is disabled when an offcanvas and its backdrop ar {{< /example >}} +## Responsive behaviors + +Offcanvas can be wrapped in an `.offcanvas-expand{-sm|-md|-lg|-xl|-xxl}` class to determine when it's content collapses behind a button. In combination with other utilities, you can easily choose when to show or hide particular elements. + +For Offcanvas that never collapse, wrap the Offcanvas with the `.offcanvas-expand` class. For Offcanvas that always collapse, don't wrap with any `.offcanvas-expand` class. + +{{< example >}} +
+ + +
+
+

Title

+ +
+ +
+
    +
  • One
    • +
  • Two
    • +
+
+
+
+{{< /example >}} + ## Accessibility 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.