[Summary view] [Print] [Text view]

   1  .offcanvas {
   2    position: fixed;
   3    bottom: 0;
   4    z-index: $zindex-offcanvas;
   5    display: flex;
   6    flex-direction: column;
   7    max-width: 100%;
   8    color: $offcanvas-color;
   9    visibility: hidden;
  10    background-color: $offcanvas-bg-color;
  11    background-clip: padding-box;
  12    outline: 0;
  13    @include box-shadow($offcanvas-box-shadow);
  14    @include transition(transform $offcanvas-transition-duration ease-in-out);
  15  }
  16  
  17  .offcanvas-backdrop {
  18    @include overlay-backdrop($zindex-offcanvas-backdrop, $offcanvas-backdrop-bg, $offcanvas-backdrop-opacity);
  19  }
  20  
  21  .offcanvas-header {
  22    display: flex;
  23    align-items: center;
  24    justify-content: space-between;
  25    padding: $offcanvas-padding-y $offcanvas-padding-x;
  26  
  27    .btn-close {
  28      padding: ($offcanvas-padding-y * .5) ($offcanvas-padding-x * .5);
  29      margin-top: $offcanvas-padding-y * -.5;
  30      margin-right: $offcanvas-padding-x * -.5;
  31      margin-bottom: $offcanvas-padding-y * -.5;
  32    }
  33  }
  34  
  35  .offcanvas-title {
  36    margin-bottom: 0;
  37    line-height: $offcanvas-title-line-height;
  38  }
  39  
  40  .offcanvas-body {
  41    flex-grow: 1;
  42    padding: $offcanvas-padding-y $offcanvas-padding-x;
  43    overflow-y: auto;
  44  }
  45  
  46  .offcanvas-start {
  47    top: 0;
  48    left: 0;
  49    width: $offcanvas-horizontal-width;
  50    border-right: $offcanvas-border-width solid $offcanvas-border-color;
  51    transform: translateX(-100%);
  52  }
  53  
  54  .offcanvas-end {
  55    top: 0;
  56    right: 0;
  57    width: $offcanvas-horizontal-width;
  58    border-left: $offcanvas-border-width solid $offcanvas-border-color;
  59    transform: translateX(100%);
  60  }
  61  
  62  .offcanvas-top {
  63    top: 0;
  64    right: 0;
  65    left: 0;
  66    height: $offcanvas-vertical-height;
  67    max-height: 100%;
  68    border-bottom: $offcanvas-border-width solid $offcanvas-border-color;
  69    transform: translateY(-100%);
  70  }
  71  
  72  .offcanvas-bottom {
  73    right: 0;
  74    left: 0;
  75    height: $offcanvas-vertical-height;
  76    max-height: 100%;
  77    border-top: $offcanvas-border-width solid $offcanvas-border-color;
  78    transform: translateY(100%);
  79  }
  80  
  81  .offcanvas.show {
  82    transform: none;
  83  }