1 files changed, 73 insertions, 0 deletions

diff --git a/src/scss/components/_modal.scss b/src/scss/components/_modal.scss
new file mode 100644
index 0000000..bca0ac1
--- /dev/null
+++ b/src/scss/components/_modal.scss
@@ -0,0 +1,73 @@
+// Modal Comp
+// Options
+$iota-components-modal                   : true;
+
+$iota-components-modal-namespace         : 'modal' !default;
+$iota-components-modal-dialog-name       : 'dialog' !default;
+$iota-components-modal-open-name         : 'is-modal-open' !default;
+$iota-components-modal-active-name       : 'is-active' !default;
+
+$iota-components-modal-padding           : $iota-global-gutter-default !default;
+$iota-components-modal-background        : rgba(0, 0, 0, 0.5) !default;
+$iota-components-modal-dialog-background : rgb(255, 255, 255) !default;
+
+// Helper Local Variables
+$iota-components-modal-var-modal         : $iota-global-components-namespace + $iota-components-modal-namespace;
+$iota-components-modal-var-modal-active  : $iota-components-modal-var-modal + '.' + $iota-components-modal-active-name;
+$iota-components-modal-var-modal-dialog  : $iota-components-modal-var-modal + '__' + $iota-components-modal-dialog-name;
+
+// Modal Component
+
+.#{$iota-components-modal-open-name} {
+  position: fixed;
+  top:  0;
+  left: 0;
+  width:  100%;
+  height: 100%;
+  overflow: hidden;
+}
+
+
+.#{$iota-components-modal-var-modal} {
+  position: fixed;
+  visibility: hidden;
+  top:    0;
+  right:  0;
+  bottom: 0;
+  left:   0;
+  overflow: auto;
+  text-align: center;
+  opacity: 0;
+  z-index: 10000;
+  background: $iota-components-modal-background;
+
+  -webkit-overflow-scrolling: touch;
+          backface-visibility: hidden;
+}
+
+.#{$iota-components-modal-var-modal-active} {
+  visibility: visible;
+  opacity: 1;
+}
+
+.#{$iota-components-modal-var-modal}:after {
+  display: inline-block;
+  height: 100%;
+  margin-left: -0.05em;
+  content: "";
+  vertical-align: middle;
+}
+
+
+  .#{$iota-components-modal-var-modal-dialog} {
+    position: relative;
+    display: inline-block;
+    padding: $iota-components-modal-padding;
+    max-width: 700px;
+    width: 100%;
+    background: $iota-components-modal-dialog-background;
+    vertical-align: middle;
+    transform: translate3d(0,0,0);
+    text-size-adjust: 100%;
+    box-sizing: border-box;
+}