afb-client/bower_components/foundation-apps/scss/components/_off-canvas.scss

   1 /*
   2         Off-canvas menu
   3   ---------------
   4
   5   A generic container that stays fixed to the left, top, right, or bottom of the screen, and is summoned when needed. When an off-canvas panel is open, the app frame shifts over to reveal the menu.
   6 */
   7
   8 /// @Foundation.settings
   9 // Off-canvas
  10 $offcanvas-size-horizontal: 250px !default;
  11 $offcanvas-size-vertical: 250px !default;
  12
  13 $offcanvas-background: #fff !default;
  14 $offcanvas-color: isitlight($offcanvas-background) !default;
  15 $offcanvas-padding: 0 !default;
  16 $offcanvas-shadow: 3px 0 10px rgba(black, 0.25) !default;
  17 $offcanvas-animation-speed: 0.25s !default;
  18
  19 $offcanvas-frame-selector: '.grid-frame' !default;
  20 ///
  21
  22 %off-canvas {
  23   position: fixed;
  24   overflow: auto;
  25   -webkit-overflow-scrolling: touch;
  26   transition: transform $offcanvas-animation-speed ease-out;
  27   z-index: 2;
  28
  29   // Active state
  30   &.is-active {
  31     transform: translate(0,0) !important;
  32   }
  33
  34   // Frame styles
  35   & ~ #{$offcanvas-frame-selector} {
  36     transform: translate(0,0,0);
  37     transition: transform 0.25s ease-out;
  38     backface-visibility: hidden;
  39     background: white;
  40   }
  41 }
  42 @mixin off-canvas-detached {
  43   z-index: 0;
  44   box-shadow: none;
  45
  46   &, &.is-active {
  47     transform: none;
  48   }
  49
  50   & ~ #{$offcanvas-frame-selector} {
  51     z-index: 1;
  52     box-shadow: 0 0 15px rgba(0,0,0,0.5);
  53   }
  54 }
  55
  56 @mixin off-canvas-layout(
  57   $position: left,
  58   $size: default,
  59   $shadow: $offcanvas-shadow
  60 ) {
  61   /*
  62     Get shadow values for later use
  63   */
  64   $shadow-length: '';
  65   $shadow-size: '';
  66   $shadow-color: '';
  67   @if hasvalue($shadow) {
  68     $shadow-length: get-shadow-value($shadow, x);
  69     $shadow-size: get-shadow-value($shadow, size);
  70     $shadow-color: get-shadow-value($shadow, color);
  71   }
  72
  73   /*
  74     Sizing
  75   */
  76   @if $position == left or $position == right {
  77     @if $size == default {
  78       $size: $offcanvas-size-horizontal;
  79     }
  80     width: $size;
  81     height: 100%;
  82   }
  83   @else {
  84     @if $size == default {
  85       $size: $offcanvas-size-vertical;
  86     }
  87     height: $size;
  88     width: 100%;
  89   }
  90
  91   /*
  92     Positioning
  93   */
  94   @if $position == left {
  95     top: 0;
  96     left: 0;
  97     @if hasvalue($shadow) { box-shadow: inset (-$shadow-length) 0 $shadow-size $shadow-color; }
  98     transform: translateX(-100%);
  99     &.is-active {
 100       & ~ #{$offcanvas-frame-selector} { transform: translateX($size) !important; }
 101     }
 102   }
 103   @else if $position == right {
 104     left: auto;
 105     top: 0;
 106     right: 0;
 107     @if hasvalue($shadow) { box-shadow: inset $shadow-length 0 $shadow-size $shadow-color; }
 108     transform: translateX(100%);
 109     &.is-active {
 110       & ~ #{$offcanvas-frame-selector} { transform: translateX(-$size) !important; }
 111     }
 112   }
 113   @else if $position == top {
 114     top: 0;
 115     left: 0;
 116     transform: translateY(-100%);
 117     @if hasvalue($shadow) { box-shadow: inset 0 (-$shadow-length) $shadow-size $shadow-color; }
 118     &.is-active {
 119       & ~ #{$offcanvas-frame-selector} { transform: translateY($size) !important; }
 120     }
 121   }
 122   @else if $position == bottom {
 123     top: auto;
 124     bottom: 0;
 125     left: 0;
 126     transform: translateY(100%);
 127     @if hasvalue($shadow) { box-shadow: inset 0 $shadow-length $shadow-size $shadow-color; }
 128     &.is-active {
 129       & ~ #{$offcanvas-frame-selector} { transform: translateY(-$size) !important; }
 130     }
 131   }
 132 }
 133
 134 @mixin off-canvas-style(
 135   $background: $offcanvas-background,
 136   $color: $offcanvas-color,
 137   $padding: $offcanvas-padding
 138 ) {
 139   background: $background;
 140
 141   @if $color == auto {
 142     color: isitlight($background, #000, #fff);
 143   }
 144   @else {
 145     color: $color;
 146   }
 147
 148   @if hasvalue($padding) {
 149     padding: $padding;
 150   }
 151 }
 152
 153 @include exports(off-canvas) {
 154   .off-canvas {
 155     @extend %off-canvas;
 156     @include off-canvas-layout;
 157     @include off-canvas-style;
 158
 159     &.top    { @include off-canvas-layout(top); }
 160     &.right  { @include off-canvas-layout(right); }
 161     &.bottom { @include off-canvas-layout(bottom); }
 162     &.left   { @include off-canvas-layout(left); }
 163
 164     &.detached { @include off-canvas-detached; }
 165
 166     &.primary { @include off-canvas-style($primary-color, auto); }
 167     &.dark    { @include off-canvas-style($dark-color, auto); }
 168   }
 169 }