mirror of
https://github.com/tenrok/bootstrap.git
synced 2026-06-08 17:22:31 +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%);
|
||||
// }
|
||||
|
||||
Reference in New Issue
Block a user