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

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