From bf5c31949529074ab2023ab1ff91e24229501d48 Mon Sep 17 00:00:00 2001 From: Lee Taylor Date: Fri, 10 Sep 2021 08:40:25 +0100 Subject: [PATCH 1/7] Add .offcanvas-expand-* class This allows the Offcanvas component to be expanded at the selected breakpoints and collapse down to an Offcanvas component below the breakpoint. --- scss/_offcanvas.scss | 45 ++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 45 insertions(+) diff --git a/scss/_offcanvas.scss b/scss/_offcanvas.scss index a089c2a08178..5312eb97c594 100644 --- a/scss/_offcanvas.scss +++ b/scss/_offcanvas.scss @@ -81,3 +81,48 @@ .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-header { + display: none; + } + + .offcanvas { + position: inherit; + bottom: 0; + z-index: 1000; + flex-grow: 1; + visibility: visible !important; // stylelint-disable-line declaration-no-important + background-color: transparent; + border-right: 0; + border-left: 0; + @include transition(none); + transform: none; + } + + .offcanvas-top, + .offcanvas-bottom { + height: auto; + border-top: 0; + border-bottom: 0; + } + + .offcanvas-body { + display: flex; + flex-grow: 0; + padding: 0; + overflow-y: visible; + } + } + } + } +} From 75f56c68ffc0e95c88022069bf4f3d7ad7e24bf5 Mon Sep 17 00:00:00 2001 From: Lee Taylor Date: Fri, 10 Sep 2021 09:36:38 +0100 Subject: [PATCH 2/7] Add documentation for .offcanvas-expand --- site/content/docs/5.1/components/offcanvas.md | 29 +++++++++++++++++++ 1 file changed, 29 insertions(+) diff --git a/site/content/docs/5.1/components/offcanvas.md b/site/content/docs/5.1/components/offcanvas.md index 6be2cd64d4aa..b0fd4c177c3c 100644 --- a/site/content/docs/5.1/components/offcanvas.md +++ b/site/content/docs/5.1/components/offcanvas.md @@ -170,6 +170,35 @@ 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. From a76af63278dbdcc73b414483e42e35f19fb79028 Mon Sep 17 00:00:00 2001 From: XhmikosR Date: Fri, 10 Sep 2021 19:26:33 +0300 Subject: [PATCH 3/7] Update offcanvas.md --- site/content/docs/5.1/components/offcanvas.md | 32 +++++++++---------- 1 file changed, 16 insertions(+), 16 deletions(-) diff --git a/site/content/docs/5.1/components/offcanvas.md b/site/content/docs/5.1/components/offcanvas.md index b0fd4c177c3c..09a1b45a1004 100644 --- a/site/content/docs/5.1/components/offcanvas.md +++ b/site/content/docs/5.1/components/offcanvas.md @@ -178,23 +178,23 @@ For Offcanvas that never collapse, wrap the Offcanvas with the `.offcanvas-expan {{< example >}}
- - -
-
-

Title

- -
- -
-
    -
  • One
    • -
  • Two
    • -
-
+ + +
+
+

Title

+
+ +
+
    +
  • One
    • +
  • Two
    • +
+
+
{{< /example >}} From 99b32f268d4a98a996297fea80490f5444d6dabf Mon Sep 17 00:00:00 2001 From: XhmikosR Date: Fri, 10 Sep 2021 19:27:19 +0300 Subject: [PATCH 4/7] Update offcanvas.md --- site/content/docs/5.1/components/offcanvas.md | 1 - 1 file changed, 1 deletion(-) diff --git a/site/content/docs/5.1/components/offcanvas.md b/site/content/docs/5.1/components/offcanvas.md index 09a1b45a1004..0af0495fe70c 100644 --- a/site/content/docs/5.1/components/offcanvas.md +++ b/site/content/docs/5.1/components/offcanvas.md @@ -198,7 +198,6 @@ For Offcanvas that never collapse, wrap the Offcanvas with the `.offcanvas-expan
{{< /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. From fcecfceff7595ec709ff169bbf3ac8838cf8a087 Mon Sep 17 00:00:00 2001 From: Lee Taylor Date: Tue, 14 Sep 2021 14:06:16 +0100 Subject: [PATCH 5/7] Remove unnecessary styles --- scss/_offcanvas.scss | 44 +++++++++++++++++++++++++++----------------- 1 file changed, 27 insertions(+), 17 deletions(-) diff --git a/scss/_offcanvas.scss b/scss/_offcanvas.scss index 5312eb97c594..f8dd406046ab 100644 --- a/scss/_offcanvas.scss +++ b/scss/_offcanvas.scss @@ -25,10 +25,10 @@ padding: $offcanvas-padding-y $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: ($offcanvas-padding-y * 0.5) ($offcanvas-padding-x * 0.5); + margin-top: $offcanvas-padding-y * -0.5; + margin-right: $offcanvas-padding-x * -0.5; + margin-bottom: $offcanvas-padding-y * -0.5; } } @@ -92,33 +92,43 @@ // stylelint-disable-next-line scss/selector-no-union-class-name &#{$infix} { @include media-breakpoint-up($next) { - .offcanvas-header { - display: none; - } - .offcanvas { position: inherit; - bottom: 0; - z-index: 1000; - flex-grow: 1; - visibility: visible !important; // stylelint-disable-line declaration-no-important + z-index: 1; + width: 100%; + visibility: visible; background-color: transparent; - border-right: 0; - border-left: 0; + inset: unset; @include transition(none); transform: none; } + .offcanvas-end { + border-left: 0; + } + + .offcanvas-right { + border-right: 0; + } + .offcanvas-top, .offcanvas-bottom { height: auto; - border-top: 0; + } + + .offcanvas-top { border-bottom: 0; } + .offcanvas-bottom { + border-top: 0; + } + + .offcanvas-header { + display: none; + } + .offcanvas-body { - display: flex; - flex-grow: 0; padding: 0; overflow-y: visible; } From 46b5c5f2f9e4f12f8d6f83756c5f594cb3cd4142 Mon Sep 17 00:00:00 2001 From: Lee Taylor Date: Tue, 14 Sep 2021 14:10:44 +0100 Subject: [PATCH 6/7] Override any inline visiblity style --- scss/_offcanvas.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/scss/_offcanvas.scss b/scss/_offcanvas.scss index f8dd406046ab..676279c7ade2 100644 --- a/scss/_offcanvas.scss +++ b/scss/_offcanvas.scss @@ -96,7 +96,7 @@ position: inherit; z-index: 1; width: 100%; - visibility: visible; + visibility: visible!important; // stylelint-disable-line declaration-no-important; background-color: transparent; inset: unset; @include transition(none); From 8d7398b23be6c29c8a43b65ab49e76e4430b78e8 Mon Sep 17 00:00:00 2001 From: Lee Taylor Date: Tue, 14 Sep 2021 14:11:57 +0100 Subject: [PATCH 7/7] Revert btn-close formatting changes --- scss/_offcanvas.scss | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/scss/_offcanvas.scss b/scss/_offcanvas.scss index 676279c7ade2..744c42e2e7dc 100644 --- a/scss/_offcanvas.scss +++ b/scss/_offcanvas.scss @@ -25,10 +25,10 @@ padding: $offcanvas-padding-y $offcanvas-padding-x; .btn-close { - padding: ($offcanvas-padding-y * 0.5) ($offcanvas-padding-x * 0.5); - margin-top: $offcanvas-padding-y * -0.5; - margin-right: $offcanvas-padding-x * -0.5; - margin-bottom: $offcanvas-padding-y * -0.5; + 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; } }