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

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