1 files changed, 194 insertions, 0 deletions
diff --git a/components/modal/_modal.scss b/components/modal/_modal.scss
new file mode 100644
index 0000000..e87e516
--- /dev/null
+++ b/components/modal/_modal.scss
@@ -0,0 +1,194 @@
+.sdc-modal {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  overflow: auto;
+  margin: auto;
+  display: flex;
+  align-items: center;
+  z-index: 1001;
+  svg path {
+    fill: inherit;
+  }
+  .sdc-modal__wrapper {
+    @include body-1;
+    background: $white;
+    width: 100%;
+    @include box-shadow(0 0 4px 0 rgba(0, 0, 0, 0.50));
+    color: $text-black;
+    display: flex;
+    flex-direction: column;
+    &.sdc-modal-type-info {
+      border-top: solid 6px $blue;
+      .sdc-modal__svg-use {
+        fill: $blue;
+      }
+      .svg-icon {
+        &.__errorCircle {
+          width: 30px;
+          height: 30px;
+        }
+      }
+    }
+    &.sdc-modal-type-alert {
+      border-top: solid 6px $yellow;
+      .sdc-modal__svg-use {
+        fill: $yellow;
+      }
+      .svg-icon {
+        &.__exclamationTriangleLine {
+          width: 30px;
+          height: 30px;
+        }
+      }
+    }
+    &.sdc-modal-type-error {
+      border-top: solid 6px $red;
+      .sdc-modal__svg-use {
+        fill: $red;
+      }
+      .svg-icon {
+        &.__error {
+          width: 30px;
+          height: 30px;
+        }
+      }
+    }
+    &.sdc-modal-type-custom {
+      padding: 0px;
+      border-top: none;
+      .sdc-custom__header {
+        @include box-sizing;
+        background-color: $blue;
+        color: $white;
+        height: 50px;
+        align-items: center;
+        padding-top: 0px;
+        .title {
+          color: $white;
+          padding-top: 0px;
+          @include heading-3;
+        }
+        .sdc-modal__close-button {
+          margin-top: 0px;
+          width: 16px;
+          height: 16px;
+          line-height: 16px;
+          .svg-icon > svg {
+            fill: $white;
+            color: $white;
+          }
+          &.disabled {
+            cursor: default;
+            .svg-icon > svg {
+              fill: $silver;
+              color: $silver;
+            }
+          }
+        }
+        .sdc-modal__close-button-svg {
+          width: 16px;
+          height: 16px;
+          .sdc-modal__svg-use {
+            fill: $white;
+          }
+          .svg-icon {
+            height: 16px;
+            width: 16px;
+            fill: $white;
+          }
+        }
+      }
+      .sdc-modal__content {
+        padding: 20px 40px;
+      }
+    }
+    .sdc-modal__header {
+      padding: 20px 20px 0 20px;
+      display: flex;
+      justify-content: space-between;
+      text-align: left;
+      height: 30px;
+      line-height: 30px;
+      .sdc-modal__icon {
+        margin-right: 10px;
+      }
+      .title {
+        @include heading-2;
+        flex: 1 1 auto;
+        color: $text-black;
+      }
+      .sdc-modal__close-button {
+        order: 3;
+        width: 14px;
+        height: 14px;
+        line-height: 14px;
+        cursor: pointer;
+        .sdc-modal__svg-use {
+          fill: $black;
+        }
+        &.disabled {
+          cursor: default;
+        }
+      }
+    }
+    .sdc-modal__content {
+      order: 2;
+      padding: 10px 60px 20px 60px;
+    }
+    .sdc-modal__footer {
+      order: 3;
+      background-color: $white;
+      border-top: solid 1px $silver;
+      padding: 10px;
+      display: flex;
+      justify-content: flex-end;
+      button {
+        margin-left: 10px;
+      }
+    }
+  }
+}
+
+.modal-background {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background-color: $black;
+  opacity: 0.70;
+  z-index: 1000;
+  &.show {
+    z-index: 1000;
+    opacity: 0.70;
+    transition: opacity .3s ease, z-index .3s;
+  }
+  &.hide {
+    z-index: -1;
+    opacity: 0;
+    transition: opacity .35s ease, z-index .35s;
+  }
+}
+
+.xl {
+  width: 1200px;
+}
+
+.l {
+  width: 875px;
+}
+
+.md {
+  width: 650px;
+}
+
+.sm {
+  width: 500px;
+}
+
+.xsm {
+  width: 432px;
+}