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, 0 insertions, 344 deletions
diff --git a/components/modal/_modal.scss b/components/modal/_modal.scss
deleted file mode 100644
index e87e516..0000000
--- a/components/modal/_modal.scss
+++ /dev/null
@@ -1,194 +0,0 @@
-.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
deleted file mode 100644
index 1ed72e8..0000000
--- a/components/modal/alert-modal.html
+++ /dev/null
@@ -1,45 +0,0 @@
-<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
deleted file mode 100644
index 1011ca6..0000000
--- a/components/modal/custom-modal.html
+++ /dev/null
@@ -1,27 +0,0 @@
-<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
deleted file mode 100644
index 5a3b5fb..0000000
--- a/components/modal/error-modal.html
+++ /dev/null
@@ -1,32 +0,0 @@
-<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
deleted file mode 100644
index e367900..0000000
--- a/components/modal/standard-modal.html
+++ /dev/null
@@ -1,46 +0,0 @@
-<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>