aboutsummaryrefslogtreecommitdiffstats
path: root/components/modal/_modal.scss
diff options
context:
space:
mode:
authorIsrael Lavi <israel.lavi@intl.att.com>2018-05-21 17:42:00 +0300
committerIsrael Lavi <il0695@att.com>2018-05-21 17:52:01 +0300
commit1994c98063c27a41797dec01f2ca9fcbe33ceab0 (patch)
treef30beeaf15a8358f6da78fdd74bcbda74bd334f8 /components/modal/_modal.scss
parent4749f4631426fcbe29ed98cef8f24cab18b501d0 (diff)
init commit onap ui
Change-Id: I1dace78817dbba752c550c182dfea118b4a38646 Issue-ID: SDC-1350 Signed-off-by: Israel Lavi <il0695@att.com>
Diffstat (limited to 'components/modal/_modal.scss')
-rw-r--r--components/modal/_modal.scss194
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;
+}