aboutsummaryrefslogtreecommitdiffstats
path: root/components/modal
diff options
context:
space:
mode:
Diffstat (limited to 'components/modal')
-rw-r--r--components/modal/_modal.scss194
-rw-r--r--components/modal/alert-modal.html45
-rw-r--r--components/modal/custom-modal.html27
-rw-r--r--components/modal/error-modal.html32
-rw-r--r--components/modal/standard-modal.html46
5 files changed, 344 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;
+}
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>