Update JSON API

[src/app-framework-demo.git] / afm-client / bower_components / foundation-apps / scss / components / _off-canvas.scss

diff --git a/afm-client/bower_components/foundation-apps/scss/components/_off-canvas.scss b/afm-client/bower_components/foundation-apps/scss/components/_off-canvas.scss
new file mode 100644 (file)
index 0000000..60ab0a3
--- /dev/null
+++ b/afm-client/bower_components/foundation-apps/scss/components/_off-canvas.scss
@@ -0,0 +1,169 @@
+/*\r
+       Off-canvas menu\r
+  ---------------\r
+\r
+  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
+*/\r
+\r
+/// @Foundation.settings\r
+// Off-canvas\r
+$offcanvas-size-horizontal: 250px !default;\r
+$offcanvas-size-vertical: 250px !default;\r
+\r
+$offcanvas-background: #fff !default;\r
+$offcanvas-color: isitlight($offcanvas-background) !default;\r
+$offcanvas-padding: 0 !default;\r
+$offcanvas-shadow: 3px 0 10px rgba(black, 0.25) !default;\r
+$offcanvas-animation-speed: 0.25s !default;\r
+\r
+$offcanvas-frame-selector: '.grid-frame' !default;\r
+///\r
+\r
+%off-canvas {\r
+  position: fixed;\r
+  overflow: auto;\r
+  -webkit-overflow-scrolling: touch;\r
+  transition: transform $offcanvas-animation-speed ease-out;\r
+  z-index: 2;\r
+\r
+  // Active state\r
+  &.is-active {\r
+    transform: translate(0,0) !important;\r
+  }\r
+\r
+  // Frame styles\r
+  & ~ #{$offcanvas-frame-selector} {\r
+    transform: translate(0,0,0);\r
+    transition: transform 0.25s ease-out;\r
+    backface-visibility: hidden;\r
+    background: white;\r
+  }\r
+}\r
+@mixin off-canvas-detached {\r
+  z-index: 0;\r
+  box-shadow: none;\r
+\r
+  &, &.is-active {\r
+    transform: none;\r
+  }\r
+\r
+  & ~ #{$offcanvas-frame-selector} {\r
+    z-index: 1;\r
+    box-shadow: 0 0 15px rgba(0,0,0,0.5);\r
+  }\r
+}\r
+\r
+@mixin off-canvas-layout(\r
+  $position: left,\r
+  $size: default,\r
+  $shadow: $offcanvas-shadow\r
+) {\r
+  /*\r
+    Get shadow values for later use\r
+  */\r
+  $shadow-length: '';\r
+  $shadow-size: '';\r
+  $shadow-color: '';\r
+  @if hasvalue($shadow) {\r
+    $shadow-length: get-shadow-value($shadow, x);\r
+    $shadow-size: get-shadow-value($shadow, size);\r
+    $shadow-color: get-shadow-value($shadow, color);\r
+  }\r
+\r
+  /*\r
+    Sizing\r
+  */\r
+  @if $position == left or $position == right {\r
+    @if $size == default {\r
+      $size: $offcanvas-size-horizontal;\r
+    }\r
+    width: $size;\r
+    height: 100%;\r
+  }\r
+  @else {\r
+    @if $size == default {\r
+      $size: $offcanvas-size-vertical;\r
+    }\r
+    height: $size;\r
+    width: 100%;\r
+  }\r
+\r
+  /*\r
+    Positioning\r
+  */\r
+  @if $position == left {\r
+    top: 0;\r
+    left: 0;\r
+    @if hasvalue($shadow) { box-shadow: inset (-$shadow-length) 0 $shadow-size $shadow-color; }\r
+    transform: translateX(-100%);\r
+    &.is-active {\r
+      & ~ #{$offcanvas-frame-selector} { transform: translateX($size) !important; }\r
+    }\r
+  }\r
+  @else if $position == right {\r
+    left: auto;\r
+    top: 0;\r
+    right: 0;\r
+    @if hasvalue($shadow) { box-shadow: inset $shadow-length 0 $shadow-size $shadow-color; }\r
+    transform: translateX(100%);\r
+    &.is-active {\r
+      & ~ #{$offcanvas-frame-selector} { transform: translateX(-$size) !important; }\r
+    }\r
+  }\r
+  @else if $position == top {\r
+    top: 0;\r
+    left: 0;\r
+    transform: translateY(-100%);\r
+    @if hasvalue($shadow) { box-shadow: inset 0 (-$shadow-length) $shadow-size $shadow-color; }\r
+    &.is-active {\r
+      & ~ #{$offcanvas-frame-selector} { transform: translateY($size) !important; }\r
+    }\r
+  }\r
+  @else if $position == bottom {\r
+    top: auto;\r
+    bottom: 0;\r
+    left: 0;\r
+    transform: translateY(100%);\r
+    @if hasvalue($shadow) { box-shadow: inset 0 $shadow-length $shadow-size $shadow-color; }\r
+    &.is-active {\r
+      & ~ #{$offcanvas-frame-selector} { transform: translateY(-$size) !important; }\r
+    }\r
+  }\r
+}\r
+\r
+@mixin off-canvas-style(\r
+  $background: $offcanvas-background,\r
+  $color: $offcanvas-color,\r
+  $padding: $offcanvas-padding\r
+) {\r
+  background: $background;\r
+\r
+  @if $color == auto {\r
+    color: isitlight($background, #000, #fff);\r
+  }\r
+  @else {\r
+    color: $color;\r
+  }\r
+\r
+  @if hasvalue($padding) {\r
+    padding: $padding;\r
+  }\r
+}\r
+\r
+@include exports(off-canvas) {\r
+  .off-canvas {\r
+    @extend %off-canvas;\r
+    @include off-canvas-layout;\r
+    @include off-canvas-style;\r
+\r
+    &.top    { @include off-canvas-layout(top); }\r
+    &.right  { @include off-canvas-layout(right); }\r
+    &.bottom { @include off-canvas-layout(bottom); }\r
+    &.left   { @include off-canvas-layout(left); }\r
+\r
+    &.detached { @include off-canvas-detached; }\r
+\r
+    &.primary { @include off-canvas-style($primary-color, auto); }\r
+    &.dark    { @include off-canvas-style($dark-color, auto); }\r
+  }\r
+}\r