Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add .offcanvas-expand-* functionality #34948

Closed
wants to merge 8 commits into from
Closed

Add .offcanvas-expand-* functionality #34948

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
bf5c319
Add .offcanvas-expand-* class
leettaylor Sep 10, 2021
75f56c6
Add documentation for .offcanvas-expand
leettaylor Sep 10, 2021
a76af63
Update offcanvas.md
XhmikosR Sep 10, 2021
99b32f2
Update offcanvas.md
XhmikosR Sep 10, 2021
fcecfce
Remove unnecessary styles
leettaylor Sep 14, 2021
46b5c5f
Override any inline visiblity style
leettaylor Sep 14, 2021
8d7398b
Revert btn-close formatting changes
leettaylor Sep 14, 2021
2cf6298
Merge branch 'main' into offcanvas-expand
leettaylor Sep 15, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
55 changes: 55 additions & 0 deletions scss/_offcanvas.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
}
}
}
}
28 changes: 28 additions & 0 deletions site/content/docs/5.1/components/offcanvas.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -170,6 +170,34 @@ Scrolling the `<body>` element is disabled when an offcanvas and its backdrop ar
</div>
{{< /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 >}}
<div class="offcanvas-expand-md">
<button class="btn btn-primary d-md-none" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasCollapse" aria-controls="offcanvasCollapse">
Show Offcanvas
</button>

<div id="offcanvasCollapse" class="offcanvas offcanvas-end" aria-labelledby="offcanvasTitle">
<div class="offcanvas-header">
<h2 class="offcanvas-title" id="offcanvasTitle">Title</h2>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>

<div class="offcanvas-body">
<ul>
<li>One</li>
<li>Two</li>
</ul>
</div>
</div>
</div>
{{< /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.
Expand Down