resources/tools/dash/app/pal/static/sass/bootstrap/_offcanvas.scss

   1 // stylelint-disable function-disallowed-list
   2
   3 %offcanvas-css-vars {
   4   // scss-docs-start offcanvas-css-vars
   5   --#{$prefix}offcanvas-zindex: #{$zindex-offcanvas};
   6   --#{$prefix}offcanvas-width: #{$offcanvas-horizontal-width};
   7   --#{$prefix}offcanvas-height: #{$offcanvas-vertical-height};
   8   --#{$prefix}offcanvas-padding-x: #{$offcanvas-padding-x};
   9   --#{$prefix}offcanvas-padding-y: #{$offcanvas-padding-y};
  10   --#{$prefix}offcanvas-color: #{$offcanvas-color};
  11   --#{$prefix}offcanvas-bg: #{$offcanvas-bg-color};
  12   --#{$prefix}offcanvas-border-width: #{$offcanvas-border-width};
  13   --#{$prefix}offcanvas-border-color: #{$offcanvas-border-color};
  14   --#{$prefix}offcanvas-box-shadow: #{$offcanvas-box-shadow};
  15   // scss-docs-end offcanvas-css-vars
  16 }
  17
  18 @each $breakpoint in map-keys($grid-breakpoints) {
  19   $next: breakpoint-next($breakpoint, $grid-breakpoints);
  20   $infix: breakpoint-infix($next, $grid-breakpoints);
  21
  22   .offcanvas#{$infix} {
  23     @extend %offcanvas-css-vars;
  24   }
  25 }
  26
  27 @each $breakpoint in map-keys($grid-breakpoints) {
  28   $next: breakpoint-next($breakpoint, $grid-breakpoints);
  29   $infix: breakpoint-infix($next, $grid-breakpoints);
  30
  31   .offcanvas#{$infix} {
  32     @include media-breakpoint-down($next) {
  33       position: fixed;
  34       bottom: 0;
  35       z-index: var(--#{$prefix}offcanvas-zindex);
  36       display: flex;
  37       flex-direction: column;
  38       max-width: 100%;
  39       color: var(--#{$prefix}offcanvas-color);
  40       visibility: hidden;
  41       background-color: var(--#{$prefix}offcanvas-bg);
  42       background-clip: padding-box;
  43       outline: 0;
  44       @include box-shadow(var(--#{$prefix}offcanvas-box-shadow));
  45       @include transition(transform $offcanvas-transition-duration ease-in-out);
  46
  47       &.offcanvas-start {
  48         top: 0;
  49         left: 0;
  50         width: var(--#{$prefix}offcanvas-width);
  51         border-right: var(--#{$prefix}offcanvas-border-width) solid var(--#{$prefix}offcanvas-border-color);
  52         transform: translateX(-100%);
  53       }
  54
  55       &.offcanvas-end {
  56         top: 0;
  57         right: 0;
  58         width: var(--#{$prefix}offcanvas-width);
  59         border-left: var(--#{$prefix}offcanvas-border-width) solid var(--#{$prefix}offcanvas-border-color);
  60         transform: translateX(100%);
  61       }
  62
  63       &.offcanvas-top {
  64         top: 0;
  65         right: 0;
  66         left: 0;
  67         height: var(--#{$prefix}offcanvas-height);
  68         max-height: 100%;
  69         border-bottom: var(--#{$prefix}offcanvas-border-width) solid var(--#{$prefix}offcanvas-border-color);
  70         transform: translateY(-100%);
  71       }
  72
  73       &.offcanvas-bottom {
  74         right: 0;
  75         left: 0;
  76         height: var(--#{$prefix}offcanvas-height);
  77         max-height: 100%;
  78         border-top: var(--#{$prefix}offcanvas-border-width) solid var(--#{$prefix}offcanvas-border-color);
  79         transform: translateY(100%);
  80       }
  81
  82       &.showing,
  83       &.show:not(.hiding) {
  84         transform: none;
  85       }
  86
  87       &.showing,
  88       &.hiding,
  89       &.show {
  90         visibility: visible;
  91       }
  92     }
  93
  94     @if not ($infix == "") {
  95       @include media-breakpoint-up($next) {
  96         --#{$prefix}offcanvas-height: auto;
  97         --#{$prefix}offcanvas-border-width: 0;
  98         background-color: transparent !important; // stylelint-disable-line declaration-no-important
  99
 100         .offcanvas-header {
 101           display: none;
 102         }
 103
 104         .offcanvas-body {
 105           display: flex;
 106           flex-grow: 0;
 107           padding: 0;
 108           overflow-y: visible;
 109           // Reset `background-color` in case `.bg-*` classes are used in offcanvas
 110           background-color: transparent !important; // stylelint-disable-line declaration-no-important
 111         }
 112       }
 113     }
 114   }
 115 }
 116
 117 .offcanvas-backdrop {
 118   @include overlay-backdrop($zindex-offcanvas-backdrop, $offcanvas-backdrop-bg, $offcanvas-backdrop-opacity);
 119 }
 120
 121 .offcanvas-header {
 122   display: flex;
 123   align-items: center;
 124   justify-content: space-between;
 125   padding: var(--#{$prefix}offcanvas-padding-y) var(--#{$prefix}offcanvas-padding-x);
 126
 127   .btn-close {
 128     padding: calc(var(--#{$prefix}offcanvas-padding-y) * .5) calc(var(--#{$prefix}offcanvas-padding-x) * .5);
 129     margin-top: calc(-.5 * var(--#{$prefix}offcanvas-padding-y));
 130     margin-right: calc(-.5 * var(--#{$prefix}offcanvas-padding-x));
 131     margin-bottom: calc(-.5 * var(--#{$prefix}offcanvas-padding-y));
 132   }
 133 }
 134
 135 .offcanvas-title {
 136   margin-bottom: 0;
 137   line-height: $offcanvas-title-line-height;
 138 }
 139
 140 .offcanvas-body {
 141   flex-grow: 1;
 142   padding: var(--#{$prefix}offcanvas-padding-y) var(--#{$prefix}offcanvas-padding-x);
 143   overflow-y: auto;
 144 }