afb-client/bower_components/foundation-apps/scss/components/_panel.scss

   1 /*
   2   PANEL
   3   -----
   4
   5   The friendly panel is an all-purpose container for hiding content off-screen.
   6
   7   Features:
   8    - Position at top, right, bottom, or left
   9    - Anchor to grid block or window
  10    - Define max width or height
  11    - Transform into grid block depending on screen size
  12 */
  13
  14 /// @Foundation.settings
  15 // Panel
  16 $panel-size-horizontal: 300px !default;
  17 $panel-size-vertical: 300px !default;
  18 $panel-padding: 0 !default;
  19
  20 $panel-background: #fff !default;
  21 $panel-shadow: 3px 0 10px rgba(black, 0.25) !default;
  22
  23 // DEPRECATED: these variables will be removed in a future version.
  24 $panel-animation-speed: 0.25s !default;
  25 ///
  26
  27 %panel-base {
  28   display: block;
  29   position: absolute;
  30   z-index: 100;
  31   overflow-y: auto;
  32   display: none;
  33
  34   &.is-active {
  35     display: block;
  36   }
  37 }
  38
  39 @mixin panel-layout(
  40   $position: left,
  41   $size: default,
  42   $shadow: $panel-shadow
  43 ) {
  44   @if $size == default {
  45     @if $position == left or $position == right {
  46       $size: $panel-size-horizontal;
  47     }
  48     @if $position == top or $position == bottom {
  49       $size: $panel-size-vertical;
  50     }
  51   }
  52
  53   /*
  54     Direction
  55   */
  56   @if $position == top {
  57     top: 0;
  58     left: 0;
  59     width: 100%;
  60   }
  61   @else if $position == right {
  62     top: 0;
  63     right: 0;
  64     height: 100%;
  65   }
  66   @else if $position == bottom {
  67     bottom: 0;
  68     left: 0;
  69     width: 100%;
  70   }
  71   @else if $position == left {
  72     top: 0;
  73     left: 0;
  74     height: 100%;
  75   }
  76
  77   /*
  78     Sizing
  79   */
  80   // Horizontal panels are always all the way tall and have a set width
  81   @if $position == left or $position == right {
  82     @if unit($size) == '%' {
  83       width: $size;
  84     }
  85     @else {
  86       width: 100%;
  87       @include breakpoint($size) {
  88         width: $size;
  89       }
  90     }
  91   }
  92   // (For now) vertical panels don't change size
  93   @if $position == top or $position == bottom {
  94     height: $size;
  95   }
  96
  97   /*
  98     Shadows
  99   */
 100   $shadow-distance: get-shadow-value($shadow, x);
 101   $shadow-size: get-shadow-value($shadow, size);
 102   $shadow-color: get-shadow-value($shadow, color);
 103   &.is-active {
 104     @if $position == left        { box-shadow: $shadow-distance 0 $shadow-size $shadow-color; }
 105     @else if $position == right  { box-shadow: (-$shadow-distance) 0 $shadow-size $shadow-color; }
 106     @else if $position == top    { box-shadow: 0 $shadow-distance $shadow-size $shadow-color; }
 107     @else if $position == bottom { box-shadow: 2px (-$shadow-distance) $shadow-size $shadow-color; }
 108   }
 109 }
 110
 111 @mixin panel-style(
 112   $padding: $panel-padding,
 113   $background: $panel-background
 114 ) {
 115   /*
 116     Basic styles
 117   */
 118   padding: $padding;
 119   background: $background;
 120 }
 121
 122 @include exports(panel) {
 123   .panel {
 124     @extend %panel-base;
 125     @include panel-style;
 126   }
 127
 128   .panel-top    { @include panel-layout(top); }
 129   .panel-right  { @include panel-layout(right); }
 130   .panel-bottom { @include panel-layout(bottom); }
 131   .panel-left   { @include panel-layout(left); }
 132
 133   .panel-fixed  { position: fixed; }
 134 }