From 1994c98063c27a41797dec01f2ca9fcbe33ceab0 Mon Sep 17 00:00:00 2001 From: Israel Lavi Date: Mon, 21 May 2018 17:42:00 +0300 Subject: init commit onap ui Change-Id: I1dace78817dbba752c550c182dfea118b4a38646 Issue-ID: SDC-1350 Signed-off-by: Israel Lavi --- components/modal/_modal.scss | 194 +++++++++++++++++++++++++++++++++++ components/modal/alert-modal.html | 45 ++++++++ components/modal/custom-modal.html | 27 +++++ components/modal/error-modal.html | 32 ++++++ components/modal/standard-modal.html | 46 +++++++++ 5 files changed, 344 insertions(+) create mode 100644 components/modal/_modal.scss create mode 100644 components/modal/alert-modal.html create mode 100644 components/modal/custom-modal.html create mode 100644 components/modal/error-modal.html create mode 100644 components/modal/standard-modal.html (limited to 'components/modal') 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 @@ +
+
+
+
+ + + + + + + + + + + + + + + + + +
+
Title
+
+ + + + + +
+
+
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
+
+
+
+
+
+
\ 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 @@ +
+
+
+
Title
+
+ + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ 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 @@ +
+
+
+
+ + error + + + + + + + +
+
Title
+
+ + + + + +
+
+
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
+
+
+
+
+
+
\ 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 @@ +
+
+
+
+ + + Asset 4 + + + + + + + + +
+
+ Standard Modal +
+
+ + + + + + +
+
+
+ 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 +
+
+
+ + +
+
+
+
+
-- cgit 1.2.3-korg