1 files changed, 73 insertions, 0 deletions
diff --git a/src/_modals.scss b/src/_modals.scss
new file mode 100644
index 0000000..21d6ed8
--- /dev/null
+++ b/src/_modals.scss
@@ -0,0 +1,73 @@
+// Modals
+.modal {
+  align-items: center;
+  bottom: 0;
+  display: none;
+  justify-content: center;
+  left: 0;
+  opacity: 0;
+  overflow: hidden;
+  padding: $layout-spacing;
+  position: fixed;
+  right: 0;
+  top: 0;
+
+  &:target,
+  &.active {
+    display: flex;
+    opacity: 1;
+    z-index: $zindex-4;
+
+    .modal-overlay {
+      background: rgba($bg-color, .75);
+      bottom: 0;
+      cursor: default;
+      display: block;
+      left: 0;
+      position: absolute;
+      right: 0;
+      top: 0;
+    }
+
+    .modal-container {
+      animation: slide-down .2s ease 1;
+      max-width: 640px;
+      z-index: $zindex-0;
+    }
+  }
+
+  &.modal-sm {
+    .modal-container {
+      max-width: $control-max-width;
+    }
+  }
+}
+
+.modal-container {
+  @include shadow-variant(.2rem);
+  background: $bg-color-light;
+  border-radius: $border-radius;
+  display: block;
+  padding: 0;
+  text-align: left;
+
+  .modal-header {
+    padding: $layout-spacing-lg;
+
+    .modal-title {
+      margin: 0;
+    }
+  }
+
+  .modal-body {
+    max-height: 50vh;
+    overflow-y: auto;
+    padding: $layout-spacing-lg;
+    position: relative;
+  }
+
+  .modal-footer {
+    padding: $layout-spacing-lg;
+    text-align: right;
+  }
+}