mirror of
https://github.com/tenrok/bootstrap.git
synced 2026-05-15 11:59:39 +03:00
Add responsive offcanvas classes
This commit is contained in:
Mark Otto
+18
-28
@@ -229,41 +229,31 @@
|
||||
display: none;
|
||||
}
|
||||
|
||||
.offcanvas-header {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.offcanvas {
|
||||
position: inherit;
|
||||
bottom: 0;
|
||||
// stylelint-disable declaration-no-important
|
||||
position: static;
|
||||
z-index: auto;
|
||||
flex-grow: 1;
|
||||
visibility: visible !important; // stylelint-disable-line declaration-no-important
|
||||
background-color: transparent;
|
||||
border-right: 0;
|
||||
border-left: 0;
|
||||
width: auto !important;
|
||||
height: auto !important;
|
||||
visibility: visible !important;
|
||||
background-color: transparent !important;
|
||||
border: 0 !important;
|
||||
transform: none !important;
|
||||
@include box-shadow(none);
|
||||
@include transition(none);
|
||||
transform: none;
|
||||
}
|
||||
.offcanvas-top,
|
||||
.offcanvas-bottom {
|
||||
height: auto;
|
||||
border-top: 0;
|
||||
border-bottom: 0;
|
||||
}
|
||||
// stylelint-enable declaration-no-important
|
||||
|
||||
.offcanvas-body {
|
||||
display: flex;
|
||||
flex-grow: 0;
|
||||
padding: 0;
|
||||
overflow-y: visible;
|
||||
}
|
||||
.offcanvas-header {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// Reset `background-color` in case `.bg-*` classes are used in offcanvas
|
||||
.offcanvas,
|
||||
.offcanvas-body {
|
||||
background-color: transparent !important; // stylelint-disable-line declaration-no-important
|
||||
.offcanvas-body {
|
||||
display: flex;
|
||||
flex-grow: 0;
|
||||
padding: 0;
|
||||
overflow-y: visible;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
+144
-53
@@ -1,30 +1,121 @@
|
||||
.offcanvas {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
z-index: $zindex-offcanvas;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-width: 100%;
|
||||
color: $offcanvas-color;
|
||||
visibility: hidden;
|
||||
background-color: $offcanvas-bg-color;
|
||||
background-clip: padding-box;
|
||||
outline: 0;
|
||||
@include box-shadow($offcanvas-box-shadow);
|
||||
@include transition(transform $offcanvas-transition-duration ease-in-out);
|
||||
@each $breakpoint in map-keys($grid-breakpoints) {
|
||||
$next: breakpoint-next($breakpoint, $grid-breakpoints);
|
||||
$infix: breakpoint-infix($next, $grid-breakpoints);
|
||||
|
||||
&.showing,
|
||||
&.show:not(.hiding) {
|
||||
transform: none;
|
||||
}
|
||||
.offcanvas#{$infix} {
|
||||
@include media-breakpoint-down($next) {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
z-index: $zindex-offcanvas;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-width: 100%;
|
||||
color: $offcanvas-color;
|
||||
visibility: hidden;
|
||||
background-color: $offcanvas-bg-color;
|
||||
background-clip: padding-box;
|
||||
outline: 0;
|
||||
@include box-shadow($offcanvas-box-shadow);
|
||||
@include transition(transform $offcanvas-transition-duration ease-in-out);
|
||||
|
||||
&.showing,
|
||||
&.hiding,
|
||||
&.show {
|
||||
visibility: visible;
|
||||
&.showing,
|
||||
&.show:not(.hiding) {
|
||||
transform: none;
|
||||
}
|
||||
|
||||
&.showing,
|
||||
&.hiding,
|
||||
&.show {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
&.offcanvas-start {
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: $offcanvas-horizontal-width;
|
||||
border-right: $offcanvas-border-width solid $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;
|
||||
transform: translateX(100%);
|
||||
}
|
||||
|
||||
&.offcanvas-top {
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
height: $offcanvas-vertical-height;
|
||||
max-height: 100%;
|
||||
border-bottom: $offcanvas-border-width solid $offcanvas-border-color;
|
||||
transform: translateY(-100%);
|
||||
}
|
||||
|
||||
&.offcanvas-bottom {
|
||||
right: 0;
|
||||
left: 0;
|
||||
height: $offcanvas-vertical-height;
|
||||
max-height: 100%;
|
||||
border-top: $offcanvas-border-width solid $offcanvas-border-color;
|
||||
transform: translateY(100%);
|
||||
}
|
||||
}
|
||||
|
||||
@if not ($infix == "") {
|
||||
@include media-breakpoint-up($next) {
|
||||
height: auto;
|
||||
background-color: transparent !important; // stylelint-disable-line declaration-no-important
|
||||
border: 0;
|
||||
|
||||
.offcanvas-header {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.offcanvas-body {
|
||||
display: flex;
|
||||
flex-grow: 0;
|
||||
padding: 0;
|
||||
overflow-y: visible;
|
||||
// Reset `background-color` in case `.bg-*` classes are used in offcanvas
|
||||
background-color: transparent !important; // stylelint-disable-line declaration-no-important
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// .offcanvas {
|
||||
// position: fixed;
|
||||
// bottom: 0;
|
||||
// z-index: $zindex-offcanvas;
|
||||
// display: flex;
|
||||
// flex-direction: column;
|
||||
// max-width: 100%;
|
||||
// color: $offcanvas-color;
|
||||
// visibility: hidden;
|
||||
// background-color: $offcanvas-bg-color;
|
||||
// background-clip: padding-box;
|
||||
// outline: 0;
|
||||
// @include box-shadow($offcanvas-box-shadow);
|
||||
// @include transition(transform $offcanvas-transition-duration ease-in-out);
|
||||
|
||||
// &.showing,
|
||||
// &.show:not(.hiding) {
|
||||
// transform: none;
|
||||
// }
|
||||
|
||||
// &.showing,
|
||||
// &.hiding,
|
||||
// &.show {
|
||||
// visibility: visible;
|
||||
// }
|
||||
// }
|
||||
|
||||
.offcanvas-backdrop {
|
||||
@include overlay-backdrop($zindex-offcanvas-backdrop, $offcanvas-backdrop-bg, $offcanvas-backdrop-opacity);
|
||||
}
|
||||
@@ -54,37 +145,37 @@
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.offcanvas-start {
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: $offcanvas-horizontal-width;
|
||||
border-right: $offcanvas-border-width solid $offcanvas-border-color;
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
// .offcanvas-start {
|
||||
// top: 0;
|
||||
// left: 0;
|
||||
// width: $offcanvas-horizontal-width;
|
||||
// border-right: $offcanvas-border-width solid $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;
|
||||
transform: translateX(100%);
|
||||
}
|
||||
// .offcanvas-end {
|
||||
// top: 0;
|
||||
// right: 0;
|
||||
// width: $offcanvas-horizontal-width;
|
||||
// border-left: $offcanvas-border-width solid $offcanvas-border-color;
|
||||
// transform: translateX(100%);
|
||||
// }
|
||||
|
||||
.offcanvas-top {
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
height: $offcanvas-vertical-height;
|
||||
max-height: 100%;
|
||||
border-bottom: $offcanvas-border-width solid $offcanvas-border-color;
|
||||
transform: translateY(-100%);
|
||||
}
|
||||
// .offcanvas-top {
|
||||
// top: 0;
|
||||
// right: 0;
|
||||
// left: 0;
|
||||
// height: $offcanvas-vertical-height;
|
||||
// max-height: 100%;
|
||||
// border-bottom: $offcanvas-border-width solid $offcanvas-border-color;
|
||||
// transform: translateY(-100%);
|
||||
// }
|
||||
|
||||
.offcanvas-bottom {
|
||||
right: 0;
|
||||
left: 0;
|
||||
height: $offcanvas-vertical-height;
|
||||
max-height: 100%;
|
||||
border-top: $offcanvas-border-width solid $offcanvas-border-color;
|
||||
transform: translateY(100%);
|
||||
}
|
||||
// .offcanvas-bottom {
|
||||
// right: 0;
|
||||
// left: 0;
|
||||
// height: $offcanvas-vertical-height;
|
||||
// max-height: 100%;
|
||||
// border-top: $offcanvas-border-width solid $offcanvas-border-color;
|
||||
// transform: translateY(100%);
|
||||
// }
|
||||
|
||||
@@ -132,6 +132,51 @@ Try the top, right, and bottom examples out below.
|
||||
</div>
|
||||
{{< /example >}}
|
||||
|
||||
## Responsive
|
||||
|
||||
<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>
|
||||
|
||||
Responsive offcanvas classes hide content outside the viewport from a specified breakpoint and down. Above that breakpoint, the contents within will behave as usual. For example, `.offcanvas-lg` hides content in an offcanvas below the `lg` breakpoint, but shows the content above the `lg` breakpoint.
|
||||
|
||||
<div class="bd-example">
|
||||
<button class="btn btn-primary d-lg-none" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasResponsive" aria-controls="offcanvasResponsive">Toggle offcanvas</button>
|
||||
|
||||
<div class="alert alert-info d-none d-lg-block">Resize your browser to show the responsive offcanvas toggle.</div>
|
||||
|
||||
<div class="offcanvas-lg offcanvas-end" tabindex="-1" id="offcanvasResponsive" aria-labelledby="offcanvasResponsiveLabel">
|
||||
<div class="offcanvas-header">
|
||||
<h5 class="offcanvas-title" id="offcanvasResponsiveLabel">Responsive offcanvas</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="offcanvas-body">
|
||||
<p class="mb-0">This is content within an <code>.offcanvas-lg</code>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```html
|
||||
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasResponsive" aria-controls="offcanvasResponsive">Toggle offcanvas</button>
|
||||
|
||||
<div class="offcanvas-lg offcanvas-end" tabindex="-1" id="offcanvasResponsive" aria-labelledby="offcanvasResponsiveLabel">
|
||||
<div class="offcanvas-header">
|
||||
<h5 class="offcanvas-title" id="offcanvasResponsiveLabel">Responsive offcanvas</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="offcanvas-body">
|
||||
<p class="mb-0">This is content within an <code>.offcanvas-lg</code>.</p>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
Responsive offcanvas classes are available across for each breakpoint.
|
||||
|
||||
- `.offcanvas`
|
||||
- `.offcanvas-sm`
|
||||
- `.offcanvas-md`
|
||||
- `.offcanvas-lg`
|
||||
- `.offcanvas-xl`
|
||||
- `.offcanvas-xxl`
|
||||
|
||||
## Backdrop
|
||||
|
||||
Scrolling the `<body>` element is disabled when an offcanvas and its backdrop are visible. Use the `data-bs-scroll` attribute to toggle `<body>` scrolling and `data-bs-backdrop` to toggle the backdrop.
|
||||
|
||||
Reference in New Issue
Block a user