aboutsummaryrefslogtreecommitdiffstats
path: root/vendor/twbs/bootstrap/scss/_offcanvas.scss
diff options
context:
space:
mode:
Diffstat (limited to 'vendor/twbs/bootstrap/scss/_offcanvas.scss')
-rw-r--r--vendor/twbs/bootstrap/scss/_offcanvas.scss178
1 files changed, 119 insertions, 59 deletions
diff --git a/vendor/twbs/bootstrap/scss/_offcanvas.scss b/vendor/twbs/bootstrap/scss/_offcanvas.scss
index a089c2a08..5709479dc 100644
--- a/vendor/twbs/bootstrap/scss/_offcanvas.scss
+++ b/vendor/twbs/bootstrap/scss/_offcanvas.scss
@@ -1,17 +1,116 @@
-.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);
+// stylelint-disable function-disallowed-list
+
+%offcanvas-css-vars {
+ // scss-docs-start offcanvas-css-vars
+ --#{$prefix}offcanvas-width: #{$offcanvas-horizontal-width};
+ --#{$prefix}offcanvas-height: #{$offcanvas-vertical-height};
+ --#{$prefix}offcanvas-padding-x: #{$offcanvas-padding-x};
+ --#{$prefix}offcanvas-padding-y: #{$offcanvas-padding-y};
+ --#{$prefix}offcanvas-color: #{$offcanvas-color};
+ --#{$prefix}offcanvas-bg: #{$offcanvas-bg-color};
+ --#{$prefix}offcanvas-border-width: #{$offcanvas-border-width};
+ --#{$prefix}offcanvas-border-color: #{$offcanvas-border-color};
+ --#{$prefix}offcanvas-box-shadow: #{$offcanvas-box-shadow};
+ // scss-docs-end offcanvas-css-vars
+}
+
+@each $breakpoint in map-keys($grid-breakpoints) {
+ $next: breakpoint-next($breakpoint, $grid-breakpoints);
+ $infix: breakpoint-infix($next, $grid-breakpoints);
+
+ .offcanvas#{$infix} {
+ @extend %offcanvas-css-vars;
+ }
+}
+
+@each $breakpoint in map-keys($grid-breakpoints) {
+ $next: breakpoint-next($breakpoint, $grid-breakpoints);
+ $infix: breakpoint-infix($next, $grid-breakpoints);
+
+ .offcanvas#{$infix} {
+ @include media-breakpoint-down($next) {
+ position: fixed;
+ bottom: 0;
+ z-index: $zindex-offcanvas;
+ display: flex;
+ flex-direction: column;
+ max-width: 100%;
+ color: var(--#{$prefix}offcanvas-color);
+ visibility: hidden;
+ background-color: var(--#{$prefix}offcanvas-bg);
+ background-clip: padding-box;
+ outline: 0;
+ @include box-shadow(var(--#{$prefix}offcanvas-box-shadow));
+ @include transition(transform $offcanvas-transition-duration ease-in-out);
+
+ &.offcanvas-start {
+ top: 0;
+ left: 0;
+ width: var(--#{$prefix}offcanvas-width);
+ border-right: var(--#{$prefix}offcanvas-border-width) solid var(--#{$prefix}offcanvas-border-color);
+ transform: translateX(-100%);
+ }
+
+ &.offcanvas-end {
+ top: 0;
+ right: 0;
+ width: var(--#{$prefix}offcanvas-width);
+ border-left: var(--#{$prefix}offcanvas-border-width) solid var(--#{$prefix}offcanvas-border-color);
+ transform: translateX(100%);
+ }
+
+ &.offcanvas-top {
+ top: 0;
+ right: 0;
+ left: 0;
+ height: var(--#{$prefix}offcanvas-height);
+ max-height: 100%;
+ border-bottom: var(--#{$prefix}offcanvas-border-width) solid var(--#{$prefix}offcanvas-border-color);
+ transform: translateY(-100%);
+ }
+
+ &.offcanvas-bottom {
+ right: 0;
+ left: 0;
+ height: var(--#{$prefix}offcanvas-height);
+ max-height: 100%;
+ border-top: var(--#{$prefix}offcanvas-border-width) solid var(--#{$prefix}offcanvas-border-color);
+ transform: translateY(100%);
+ }
+
+ &.showing,
+ &.show:not(.hiding) {
+ transform: none;
+ }
+
+ &.showing,
+ &.hiding,
+ &.show {
+ visibility: visible;
+ }
+ }
+
+ @if not ($infix == "") {
+ @include media-breakpoint-up($next) {
+ --#{$prefix}offcanvas-height: auto;
+ --#{$prefix}offcanvas-border-width: 0;
+ background-color: transparent !important; // stylelint-disable-line declaration-no-important
+
+ .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-backdrop {
@@ -22,13 +121,13 @@
display: flex;
align-items: center;
justify-content: space-between;
- padding: $offcanvas-padding-y $offcanvas-padding-x;
+ padding: var(--#{$prefix}offcanvas-padding-y) var(--#{$prefix}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: calc(var(--#{$prefix}offcanvas-padding-y) * .5) calc(var(--#{$prefix}offcanvas-padding-x) * .5);
+ margin-top: calc(var(--#{$prefix}offcanvas-padding-y) * -.5);
+ margin-right: calc(var(--#{$prefix}offcanvas-padding-x) * -.5);
+ margin-bottom: calc(var(--#{$prefix}offcanvas-padding-y) * -.5);
}
}
@@ -39,45 +138,6 @@
.offcanvas-body {
flex-grow: 1;
- padding: $offcanvas-padding-y $offcanvas-padding-x;
+ padding: var(--#{$prefix}offcanvas-padding-y) var(--#{$prefix}offcanvas-padding-x);
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-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%);
-}
-
-.offcanvas.show {
- transform: none;
-}