aboutsummaryrefslogtreecommitdiffstats
path: root/components/modal/_modal.scss
diff options
context:
space:
mode:
Diffstat (limited to 'components/modal/_modal.scss')
-rw-r--r--components/modal/_modal.scss194
1 files changed, 0 insertions, 194 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;
-}