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

   1 /*
   2   MODAL
   3   -----
   4
   5   The humble modal hides off-canvas until summoned with an fa-open directive. Modals appear over an overlay that darkens the rest of the page, and have a maxmimum width. You can construct a grid inside a modal, or attach panels to it.
   6
   7   Note that the modal overlay is hardcoded into the CSS, because whether or not you build your modal semantically, the overlay is always required and will always look the same.
   8 */
   9
  10 /// @Foundation.settings
  11 // Modal
  12 $modal-background: #fff !default;
  13 $modal-border: 0 !default;
  14 $modal-radius: 0px !default;
  15 $modal-shadow: none !default;
  16 $modal-zindex: 1000 !default;
  17 $modal-sizes: (
  18   tiny: 300px,
  19   small: 500px,
  20   medium: 600px,
  21   large: 800px,
  22 ) !default;
  23
  24 $modal-overlay-class: 'modal-overlay' !default;
  25 $modal-overlay-background: rgba(#333, 0.7) !default;
  26 ///
  27
  28 %modal {
  29   position: relative;
  30   z-index: $modal-zindex + 1;
  31   background: $modal-background;
  32   flex: 0 0 auto;
  33   width: 100%;
  34   height: 100vh;
  35   max-height: 100%;
  36   overflow: hidden;
  37   padding: $global-padding;
  38
  39   @include breakpoint(medium) {
  40     height: auto;
  41     max-width: map-get($modal-sizes, medium);
  42   }
  43
  44   .grid-content, .grid-block {
  45     margin: 0;
  46   }
  47
  48   .close-button, [fa-close] {
  49     z-index: $modal-zindex + 1;
  50   }
  51 }
  52
  53 @mixin modal-dialog() {
  54   height: auto;
  55 }
  56 @mixin modal-layout(
  57   $width: map-get($modal-sizes, medium),
  58   $dialog: false
  59 ) {
  60   max-width: $width;
  61 }
  62 @mixin modal-style(
  63   $border: $modal-border,
  64   $radius: $modal-radius,
  65   $shadow: $modal-shadow
  66 ) {
  67   @if $border != 0 {
  68     border: $border;
  69   }
  70   @if $radius != 0 {
  71     border-radius: $radius;
  72   }
  73   @if $shadow != none {
  74     box-shadow: $shadow;
  75   }
  76 }
  77
  78 @mixin modal(
  79   $width: map-get($modal-sizes, medium),
  80   $border: $modal-border,
  81   $radius: $modal-radius,
  82   $shadow: $modal-shadow
  83 ) {
  84   @extend %modal;
  85   @include modal-layout($width);
  86   @include modal-style($border, $radius, $shadow);
  87 }
  88
  89 @include exports(modal) {
  90   .modal {
  91     @include modal;
  92
  93     @each $size in map-keys($modal-sizes) {
  94       $width: map-get($modal-sizes, $size);
  95       @if $size != medium {
  96         .#{$size} > & { @include modal-layout($width); }
  97       }
  98     }
  99
 100     .dialog > & {
 101       @include modal-dialog;
 102     }
 103     .collapse > & {
 104       padding: 0;
 105     }
 106   }
 107
 108   .#{$modal-overlay-class} {
 109     position: fixed;
 110     top: 0;
 111     right: 0;
 112     bottom: 0;
 113     left: 0;
 114     z-index: $modal-zindex;
 115     display: none;
 116     background-color: $modal-overlay-background;
 117
 118     // Horizontally and vertically center the modal
 119     align-items: center;
 120     justify-content: center;
 121
 122     &.is-active {
 123       display: flex;
 124     }
 125   }
 126 }