Initial commit

Change-Id: I061d81a33aebadb83ba0e085e8e34339fed5ed53
Issue-ID: SDC-1609
Signed-off-by: Israel Lavi <il0695@att.com>

5 files changed, 383 insertions, 0 deletions

diff --git a/components/modal/_modal.scss b/components/modal/_modal.scss
new file mode 100644
index 0000000..0bf52aa
--- /dev/null
+++ b/components/modal/_modal.scss
@@ -0,0 +1,233 @@
+.sdc-modal {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  overflow: auto;
+  margin: auto;
+  display: flex;
+  align-items: center;
+  z-index: 1000;
+  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-info {
+      border-top: solid 6px $blue;
+      .sdc-modal__svg-use {
+        fill: $blue;
+      }
+      .svg-icon {
+        &.__exclamationTriangleLine {
+          width: 30px;
+          height: 30px;
+        }
+      }
+    }
+
+    &.sdc-modal-type-warning, &.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-success {
+      border-top: solid 6px $green;
+      .sdc-modal__svg-use {
+        fill: $green;
+      }
+      .svg-icon {
+        &.__success {
+          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 {
+      position: relative;
+      order: 2;
+      padding: 10px 60px 20px 60px;
+      .disabled-modal{
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        background-color: $white;
+        opacity: 0.5;
+      }
+    }
+    .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;
+}
diff --git a/components/modal/alert-modal.html b/components/modal/alert-modal.html
new file mode 100644
index 0000000..1ed72e8
--- /dev/null
+++ b/components/modal/alert-modal.html
@@ -0,0 +1,45 @@
+<div class="sdc-modal sm">
+   <div class="sdc-modal__wrapper sdc-modal-type-alert">
+      <div class="sdc-modal__header">
+         <div class="svg-icon-wrapper sdc-modal__icon sdc-modal__svg-use   bottom">
+            <svg class="svg-icon __exclamationTriangleLine" version="1.1" id="exclamation-triangle-line_icon" x="0px" y="0px" viewBox="0 0 19.9 18" xml:space="preserve">
+               <g>
+                  <path d="M17.6,18H2.4c-0.5,0-0.9-0.1-1.3-0.4c-0.5-0.3-0.9-0.8-1.1-1.4c-0.2-0.6-0.1-1.3,0.2-1.8l7.6-13c0.2-0.3,0.5-0.7,0.9-1
+                     C9.3,0,10-0.1,10.6,0.1c0.6,0.2,1.1,0.6,1.4,1.2l7.5,13c0.2,0.4,0.4,0.8,0.4,1.3C19.9,16.9,18.9,18,17.6,18z M9.9,1
+                     C9.7,1,9.4,1.1,9.2,1.2C9.1,1.3,8.9,1.6,8.7,1.8l-7.5,13C1,15.1,1,15.5,1,15.9c0.1,0.4,0.3,0.7,0.6,0.8C1.9,16.9,2.1,17,2.4,17
+                     h15.1c0.9,0,1.4-0.7,1.4-1.4c0-0.2-0.1-0.5-0.2-0.7l0,0l-7.6-13c-0.2-0.4-0.5-0.6-0.8-0.7C10.2,1,10.1,1,9.9,1z"></path>
+                  <g>
+                     <g>
+                        <g>
+                           <path d="M10,10.4L10,10.4c-0.3,0-0.5-0.2-0.5-0.5l0-5.2c0-0.3,0.2-0.5,0.5-0.5l0,0c0.3,0,0.5,0.2,0.5,0.5l0,5.2
+                              C10.5,10.2,10.2,10.4,10,10.4z"></path>
+                        </g>
+                     </g>
+                     <g>
+                        <g>
+                           <path d="M10,14.7L10,14.7c-0.3,0-0.5-0.2-0.5-0.5l0-1c0-0.3,0.2-0.5,0.5-0.5l0,0c0.3,0,0.5,0.2,0.5,0.5l0,1
+                              C10.5,14.5,10.2,14.7,10,14.7z"></path>
+                        </g>
+                     </g>
+                  </g>
+               </g>
+            </svg>            
+         </div>
+         <div class="title ">Title</div>
+         <div class="svg-icon-wrapper sdc-modal__close-button-svg sdc-modal__close-button  clickable bottom">
+            <svg class="svg-icon __close" version="1.1" id="close_icon" x="0px" y="0px" viewBox="0 0 10.1 10.1" xml:space="preserve">
+               <g transform="translate(0,-952.36218)">
+                  <path d="M0.5,952.4c-0.2,0-0.4,0.2-0.4,0.5c0,0.1,0.1,0.2,0.1,0.3l4.3,4.3l-4.3,4.3c-0.2,0.2-0.2,0.4,0,0.6c0.2,0.2,0.4,0.2,0.6,0
+                     l0,0l4.3-4.4l4.3,4.3c0.2,0.2,0.4,0.2,0.6,0s0.2-0.4,0-0.6l0,0l-4.3-4.3l4.3-4.3c0.2-0.2,0.2-0.4,0-0.6c-0.1-0.1-0.2-0.1-0.4-0.1
+                     c-0.1,0-0.2,0.1-0.3,0.1l-4.2,4.3l-4.3-4.3C0.8,952.4,0.6,952.4,0.5,952.4z"></path>
+               </g>
+            </svg>            
+         </div>
+      </div>
+      <div class="sdc-modal__content ">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed risus nisl, egestas vitae erat non,pulvinar lacinia libero. Integer pulvinar pellentesque accumsan. Sed hendrerit lacus eu tempus pharetra</div>
+      <div class="sdc-modal__footer">
+         <div><button class="sdc-button sdc-button__primary   ">Ok</button></div>
+      </div>
+   </div>
+</div>
+<div class="modal-background"></div>
\ No newline at end of file
diff --git a/components/modal/custom-modal.html b/components/modal/custom-modal.html
new file mode 100644
index 0000000..1011ca6
--- /dev/null
+++ b/components/modal/custom-modal.html
@@ -0,0 +1,27 @@
+<div class="sdc-modal md">
+   <div class="sdc-modal__wrapper sdc-modal-type-custom">
+      <div class="sdc-custom__header sdc-modal__header">
+         <div class="title ">Title</div>
+         <div class="svg-icon-wrapper sdc-modal__close-button-svg sdc-modal__close-button  clickable bottom">
+            <svg class="svg-icon __close" version="1.1" id="close_icon" x="0px" y="0px" viewBox="0 0 10.1 10.1" xml:space="preserve">
+               <g transform="translate(0,-952.36218)">
+                  <path d="M0.5,952.4c-0.2,0-0.4,0.2-0.4,0.5c0,0.1,0.1,0.2,0.1,0.3l4.3,4.3l-4.3,4.3c-0.2,0.2-0.2,0.4,0,0.6c0.2,0.2,0.4,0.2,0.6,0
+                     l0,0l4.3-4.4l4.3,4.3c0.2,0.2,0.4,0.2,0.6,0s0.2-0.4,0-0.6l0,0l-4.3-4.3l4.3-4.3c0.2-0.2,0.2-0.4,0-0.6c-0.1-0.1-0.2-0.1-0.4-0.1
+                     c-0.1,0-0.2,0.1-0.3,0.1l-4.2,4.3l-4.3-4.3C0.8,952.4,0.6,952.4,0.5,952.4z"></path>
+               </g>
+            </svg>            
+         </div>
+      </div>
+      <div class="sdc-modal__content ">
+         <div>
+            <div class="sdc-input "><label class="sdc-input__label  " for="input1">I am a label</label><input type="text" class="sdc-input__input  " id="input1" name="input1" value="Default"></div>
+            <div class="sdc-input "><label class="sdc-input__label  " for="input1">I am a label</label><input type="text" class="sdc-input__input  " id="input1" name="input1" value="Default"></div>
+            <div class="sdc-input "><label class="sdc-input__label  " for="input1">I am a label</label><input type="text" class="sdc-input__input  " id="input1" name="input1" value="Default"></div>
+         </div>
+      </div>
+      <div class="sdc-modal__footer">
+         <div><button class="sdc-button sdc-button__primary   ">Ok</button><button class="sdc-button sdc-button__secondary">Close</button></div>
+      </div>
+   </div>
+</div>
+<div class="modal-background"></div>
\ No newline at end of file
diff --git a/components/modal/error-modal.html b/components/modal/error-modal.html
new file mode 100644
index 0000000..5a3b5fb
--- /dev/null
+++ b/components/modal/error-modal.html
@@ -0,0 +1,32 @@
+<div class="sdc-modal sm">
+   <div class="sdc-modal__wrapper sdc-modal-type-error">
+      <div class="sdc-modal__header">
+         <div class="svg-icon-wrapper sdc-modal__icon sdc-modal__svg-use   bottom">
+            <svg class="svg-icon __error" viewBox="0 0 17 17">
+               <title>error</title>
+               <g id="Layer_2" data-name="Layer 2">
+                  <g id="Layer_1-2" data-name="Layer 1">
+                     <path d="M8.5,1A7.5,7.5,0,1,1,1,8.5,7.51,7.51,0,0,1,8.5,1m0-1A8.5,8.5,0,1,0,17,8.5,8.5,8.5,0,0,0,8.5,0Z"></path>
+                     <polygon points="11.6 6.1 10.9 5.4 8.5 7.79 6.1 5.4 5.4 6.1 7.79 8.5 5.4 10.9 6.1 11.6 8.5 9.21 10.9 11.6 11.6 10.9 9.21 8.5 11.6 6.1"></polygon>
+                  </g>
+               </g>
+            </svg>            
+         </div>
+         <div class="title ">Title</div>
+         <div class="svg-icon-wrapper sdc-modal__close-button-svg sdc-modal__close-button  clickable bottom">
+            <svg class="svg-icon __close" version="1.1" id="close_icon" x="0px" y="0px" viewBox="0 0 10.1 10.1" xml:space="preserve">
+               <g transform="translate(0,-952.36218)">
+                  <path d="M0.5,952.4c-0.2,0-0.4,0.2-0.4,0.5c0,0.1,0.1,0.2,0.1,0.3l4.3,4.3l-4.3,4.3c-0.2,0.2-0.2,0.4,0,0.6c0.2,0.2,0.4,0.2,0.6,0
+                     l0,0l4.3-4.4l4.3,4.3c0.2,0.2,0.4,0.2,0.6,0s0.2-0.4,0-0.6l0,0l-4.3-4.3l4.3-4.3c0.2-0.2,0.2-0.4,0-0.6c-0.1-0.1-0.2-0.1-0.4-0.1
+                     c-0.1,0-0.2,0.1-0.3,0.1l-4.2,4.3l-4.3-4.3C0.8,952.4,0.6,952.4,0.5,952.4z"></path>
+               </g>
+            </svg>    
+         </div>
+      </div>
+      <div class="sdc-modal__content ">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed risus nisl, egestas vitae erat non,pulvinar lacinia libero. Integer pulvinar pellentesque accumsan. Sed hendrerit lacus eu tempus pharetra</div>
+      <div class="sdc-modal__footer">
+         <div><button class="sdc-button sdc-button__primary   ">Ok</button></div>
+      </div>
+   </div>
+</div>
+<div class="modal-background"></div>
\ No newline at end of file
diff --git a/components/modal/standard-modal.html b/components/modal/standard-modal.html
new file mode 100644
index 0000000..e367900
--- /dev/null
+++ b/components/modal/standard-modal.html
@@ -0,0 +1,46 @@
+<div class="sdc-modal sm">
+    <div class="sdc-modal__wrapper sdc-modal-type-info">
+      <div class="sdc-modal__header">
+        <div class="svg-icon-wrapper sdc-modal__icon sdc-modal__svg-use bottom">
+          <svg class="svg-icon __errorCircle" id="error-circle_icon" viewBox="0 0 16 16">
+            <title>
+              Asset 4
+            </title>
+            <g id="Layer_2" data-name="Layer 2">
+              <g id="Layer_1-2" data-name="Layer 1">
+                <path d="M8,0a8,8,0,1,0,8,8A8,8,0,0,0,8,0Zm.9,12.4H7.1V10.6H8.9Zm0-3.6H7.1V3.5H8.9Z">
+                </path>
+              </g>
+            </g>
+          </svg>
+        </div>
+        <div class="title ">
+          Standard Modal
+        </div>
+        <div class="svg-icon-wrapper sdc-modal__close-button-svg sdc-modal__close-button bottom">
+          <svg class="svg-icon __close" version="1.1" id="close_icon" x="0px" y="0px" viewBox="0 0 10.1 10.1" style="enable-background:new 0 0 10.1 10.1;" xml:space="preserve">
+            <g transform="translate(0,-952.36218)">
+              <path d="M0.5,952.4c-0.2,0-0.4,0.2-0.4,0.5c0,0.1,0.1,0.2,0.1,0.3l4.3,4.3l-4.3,4.3c-0.2,0.2-0.2,0.4,0,0.6c0.2,0.2,0.4,0.2,0.6,0
+          l0,0l4.3-4.4l4.3,4.3c0.2,0.2,0.4,0.2,0.6,0s0.2-0.4,0-0.6l0,0l-4.3-4.3l4.3-4.3c0.2-0.2,0.2-0.4,0-0.6c-0.1-0.1-0.2-0.1-0.4-0.1
+          c-0.1,0-0.2,0.1-0.3,0.1l-4.2,4.3l-4.3-4.3C0.8,952.4,0.6,952.4,0.5,952.4z">
+              </path>
+            </g>
+          </svg>
+        </div>
+      </div>
+      <div class="sdc-modal__content ">
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed risus nisl, egestas vitae erat non,pulvinar lacinia libero. Integer pulvinar pellentesque accumsan. Sed hendrerit lacus eu tempus pharetra
+      </div>
+      <div class="sdc-modal__footer">
+        <div>
+          <button class="sdc-button sdc-button__primary ">
+            Yes
+          </button>
+          <button class="sdc-button sdc-button__secondary ">
+            Close
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="modal-background"></div>