afb-client/bower_components/foundation-apps/scss/components/_action-sheet.scss

   1 /*
   2   ACTION SHEET
   3   ------------
   4
   5   A dropdown menu that sticks to the bottom of the screen on small devices, and becomes a dropdown menu on larger devices.
   6 */
   7
   8 /// @Foundation.settings
   9 // Action Sheet
  10 $actionsheet-background: white !default;
  11 $actionsheet-border-color: #ccc !default;
  12 $actionsheet-animate: transform opacity !default;
  13 $actionsheet-animation-speed: 0.25s !default;
  14 $actionsheet-width: 300px !default;
  15 $actionsheet-radius: 4px !default;
  16 $actionsheet-shadow: 0 -3px 10px rgba(black, 0.25) !default;
  17 $actionsheet-padding: $global-padding !default;
  18 $actionsheet-tail-size: 10px !default;
  19
  20 $actionsheet-popup-shadow: 0 0 10px rgba(black, 0.25) !default;
  21
  22 $actionsheet-link-color: #000 !default;
  23 $actionsheet-link-background-hover: smartscale($actionsheet-background) !default;
  24 ///
  25
  26 /*
  27   Styles for the list inside an action sheet.
  28   Don't include this mixin if you want to build custom controls inside the sheet.
  29 */
  30 @mixin action-sheet-menu(
  31   $padding: $actionsheet-padding,
  32   $color: $actionsheet-link-color,
  33   $border-color: $actionsheet-border-color,
  34   $background-hover: $actionsheet-link-background-hover
  35 ) {
  36   // Menu container
  37   ul {
  38     margin: -($padding);
  39     margin-top: 0;
  40     list-style-type: none;
  41     user-select: none;
  42
  43     // If the menu has no content above it
  44     &:first-child {
  45       margin-top: -$padding;
  46
  47       li:first-child {
  48         border-top: 0;
  49       }
  50     }
  51
  52     // Menu links
  53     a {
  54       display: block;
  55       padding: $padding * 0.8;
  56       line-height: 1;
  57       color: $color;
  58       border-top: 1px solid $border-color;
  59
  60       &:hover {
  61         color: $color;
  62         background: $background-hover;
  63       }
  64     }
  65
  66     .alert > a {
  67       color: $alert-color;
  68     }
  69     .disabled > a {
  70       pointer-events: none;
  71       color: #999;
  72     }
  73   }
  74 }
  75
  76 /*
  77   Styles for the action sheet container. Action sheets pin to the top or bottom of the screen.
  78 */
  79 @mixin action-sheet(
  80   $position: bottom,
  81   $shadow: $actionsheet-shadow,
  82   $animate: $actionsheet-animate,
  83   $animation-speed: $actionsheet-animation-speed,
  84   $padding: $actionsheet-padding,
  85   $background: $actionsheet-background
  86 ) {
  87   position: fixed;
  88   left: 0;
  89   z-index: 1000;
  90   width: 100%;
  91   padding: $padding;
  92   background: $background;
  93   text-align: center;
  94   transition-property: $animate;
  95   transition-duration: $animation-speed;
  96   transition-timing-function: ease-out;
  97
  98   @if hasvalue($shadow) {
  99     box-shadow: $shadow;
 100   }
 101
 102   // Positions
 103   @if $position == bottom {
 104     bottom: 0;
 105     transform: translateY(100%);
 106
 107     &.is-active {
 108       transform: translateY(0%);
 109     }
 110   }
 111   // These two don't quite work as planned yet
 112   @else if $position == top {
 113     top: 0;
 114     transform: translateY(-100%);
 115
 116     &.is-active {
 117       transform: translateY(0%);
 118     }
 119   }
 120 }
 121
 122 @mixin popup-menu(
 123   $position: bottom,
 124   $background: $actionsheet-background,
 125   $width: $actionsheet-width,
 126   $radius: $actionsheet-radius,
 127   $shadow: $actionsheet-popup-shadow,
 128   $tail-size: $actionsheet-tail-size
 129 ) {
 130   /*
 131     Core styles
 132   */
 133   position: absolute;
 134   left: 50%;
 135   width: $width;
 136   border-radius: $radius;
 137   opacity: 0;
 138   pointer-events: none;
 139
 140   /*
 141     Menu shadow
 142   */
 143   @if hasvalue($shadow) {
 144     box-shadow: $shadow;
 145   }
 146
 147   /*
 148     Active state
 149   */
 150   &.is-active {
 151     opacity: 1;
 152     pointer-events: auto;
 153   }
 154
 155   /*
 156     Menu tail
 157   */
 158   &::before, &::after {
 159     content: '';
 160     position: absolute;
 161     left: 50%;
 162     display: block;
 163     width: 0px;
 164     height: 0px;
 165     border-left: $tail-size solid transparent;
 166     border-right: $tail-size solid transparent;
 167     margin-left: -($tail-size);
 168   }
 169
 170   /*
 171     Positioning
 172   */
 173   @if $position == bottom {
 174     top: auto;
 175     bottom: 0;
 176     transform: translateX(-50%) translateY(110%);
 177     &.is-active {
 178       transform: translateX(-50%) translateY(100%);
 179     }
 180
 181     &::before, &::after {
 182       top: -($tail-size);
 183       bottom: auto;
 184       border-top: 0;
 185       border-bottom: $tail-size solid $background;
 186     }
 187     &::before {
 188       top: -($tail-size + 2);
 189       border-bottom-color: rgba(black, 0.15);
 190     }
 191
 192   }
 193   @else if $position == top {
 194     top: 0;
 195     bottom: auto;
 196     transform: translateX(-50%) translateY(-120%);
 197     &.is-active {
 198       transform: translateX(-50%) translateY(-110%);
 199     }
 200
 201     &::before, &::after {
 202       top: auto;
 203       bottom: -($tail-size);
 204       border-top: $tail-size solid $background;
 205       border-bottom: 0;
 206     }
 207     &::before {
 208       bottom: -($tail-size + 2);
 209       border-top-color: rgba(black, 0.15);
 210     }
 211   }
 212 }
 213
 214 @include exports(action-sheet) {
 215   .action-sheet-container {
 216     position: relative;
 217     display: inline-block;
 218
 219     .button {
 220       margin-left: 0;
 221       margin-right: 0;
 222     }
 223   }
 224   .action-sheet {
 225     @include action-sheet;
 226     @include action-sheet-menu;
 227
 228     @include breakpoint(medium) {
 229       @include popup-menu;
 230
 231       &.top {
 232         @include popup-menu(top);
 233       }
 234     }
 235
 236     &.primary {
 237       background: $primary-color;
 238       color: isitlight($primary-color);
 239       border: 0;
 240       &::before { display: none; }
 241       &::before, &::after { border-top-color: $primary-color; }
 242       &.top::before, &.top::after { border-bottom-color: $primary-color; }
 243
 244       @include action-sheet-menu(
 245         $color: isitlight($primary-color),
 246         $border-color: smartscale($primary-color, 10%),
 247         $background-hover: smartscale($primary-color)
 248       );
 249     }
 250     &.dark {
 251       background: $dark-color;
 252       color: isitlight($dark-color);
 253       border: 0;
 254       &::before { display: none; }
 255       &::before, &::after { border-top-color: $dark-color; }
 256       &.top::before, &.top::after { border-bottom-color: $dark-color; }
 257
 258       @include action-sheet-menu(
 259         $color: isitlight($dark-color),
 260         $border-color: smartscale($dark-color, 10%),
 261         $background-hover: smartscale($dark-color)
 262       );
 263     }
 264   }
 265 }