diff options
Diffstat (limited to 'assets/stylesheets/bootstrap/_offcanvas.scss')
| -rw-r--r-- | assets/stylesheets/bootstrap/_offcanvas.scss | 178 |
1 files changed, 119 insertions, 59 deletions
diff --git a/assets/stylesheets/bootstrap/_offcanvas.scss b/assets/stylesheets/bootstrap/_offcanvas.scss index a089c2a..5709479 100644 --- a/assets/stylesheets/bootstrap/_offcanvas.scss +++ b/assets/stylesheets/bootstrap/_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; -} |