Update JSON API

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

diff --git a/afm-client/bower_components/foundation-apps/scss/components/_modal.scss b/afm-client/bower_components/foundation-apps/scss/components/_modal.scss
new file mode 100644 (file)
index 0000000..9b9350f
--- /dev/null
+++ b/afm-client/bower_components/foundation-apps/scss/components/_modal.scss
@@ -0,0 +1,126 @@
+/*\r
+  MODAL\r
+  -----\r
+\r
+  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
+\r
+  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
+*/\r
+\r
+/// @Foundation.settings\r
+// Modal\r
+$modal-background: #fff !default;\r
+$modal-border: 0 !default;\r
+$modal-radius: 0px !default;\r
+$modal-shadow: none !default;\r
+$modal-zindex: 1000 !default;\r
+$modal-sizes: (\r
+  tiny: 300px,\r
+  small: 500px,\r
+  medium: 600px,\r
+  large: 800px,\r
+) !default;\r
+\r
+$modal-overlay-class: 'modal-overlay' !default;\r
+$modal-overlay-background: rgba(#333, 0.7) !default;\r
+///\r
+\r
+%modal {\r
+  position: relative;\r
+  z-index: $modal-zindex + 1;\r
+  background: $modal-background;\r
+  flex: 0 0 auto;\r
+  width: 100%;\r
+  height: 100vh;\r
+  max-height: 100%;\r
+  overflow: hidden;\r
+  padding: $global-padding;\r
+\r
+  @include breakpoint(medium) {\r
+    height: auto;\r
+    max-width: map-get($modal-sizes, medium);\r
+  }\r
+\r
+  .grid-content, .grid-block {\r
+    margin: 0;\r
+  }\r
+\r
+  .close-button, [fa-close] {\r
+    z-index: $modal-zindex + 1;\r
+  }\r
+}\r
+\r
+@mixin modal-dialog() {\r
+  height: auto;\r
+}\r
+@mixin modal-layout(\r
+  $width: map-get($modal-sizes, medium),\r
+  $dialog: false\r
+) {\r
+  max-width: $width;\r
+}\r
+@mixin modal-style(\r
+  $border: $modal-border,\r
+  $radius: $modal-radius,\r
+  $shadow: $modal-shadow\r
+) {\r
+  @if $border != 0 {\r
+    border: $border;\r
+  }\r
+  @if $radius != 0 {\r
+    border-radius: $radius;\r
+  }\r
+  @if $shadow != none {\r
+    box-shadow: $shadow;\r
+  }\r
+}\r
+\r
+@mixin modal(\r
+  $width: map-get($modal-sizes, medium),\r
+  $border: $modal-border,\r
+  $radius: $modal-radius,\r
+  $shadow: $modal-shadow\r
+) {\r
+  @extend %modal;\r
+  @include modal-layout($width);\r
+  @include modal-style($border, $radius, $shadow);\r
+}\r
+\r
+@include exports(modal) {\r
+  .modal {\r
+    @include modal;\r
+\r
+    @each $size in map-keys($modal-sizes) {\r
+      $width: map-get($modal-sizes, $size);\r
+      @if $size != medium {\r
+        .#{$size} > & { @include modal-layout($width); }\r
+      }\r
+    }\r
+\r
+    .dialog > & {\r
+      @include modal-dialog;\r
+    }\r
+    .collapse > & {\r
+      padding: 0;\r
+    }\r
+  }\r
+\r
+  .#{$modal-overlay-class} {\r
+    position: fixed;\r
+    top: 0;\r
+    right: 0;\r
+    bottom: 0;\r
+    left: 0;\r
+    z-index: $modal-zindex;\r
+    display: none;\r
+    background-color: $modal-overlay-background;\r
+\r
+    // Horizontally and vertically center the modal\r
+    align-items: center;\r
+    justify-content: center;\r
+\r
+    &.is-active {\r
+      display: flex;\r
+    }\r
+  }\r
+}\r