Merge "init commit onap ui"HEAD2.0.0-ONAPmasterbeijing2.0.0-ONAP

5 files changed, 408 insertions, 0 deletions

diff --git a/src/style/scss/themes/1802/_components.scss b/src/style/scss/themes/1802/_components.scss
new file mode 100644
index 0000000..6800005
--- /dev/null
+++ b/src/style/scss/themes/1802/_components.scss
@@ -0,0 +1,23 @@
+/* Deafult theme */
+@import "../../../../../components/tile/tile";
+@import "../../../../../components/checkbox/checkbox";
+@import "../../../../../components/radio/radio";
+@import "../../../../../components/radioGroup/radioGroup";
+@import "../../../../../components/icon/icon";
+@import "../../../../../components/input/input";
+@import "../../../../../components/dropdown/dropdown";
+@import "../../../../../components/menu/menu";
+@import "../../../../../components/filter-bar/_filter-bar";
+@import "../../../../../components/search-bar/_search-bar";
+@import "../../../../../components/checklist/checklist";
+@import "../../../../../components/autocomplete/autocomplete";
+@import "../../../../../components/tooltip/tooltip";
+@import "../../../../../components/tag-cloud/_tag-cloud";
+@import "../../../../../components/notification/notification";
+@import "../../../../../components/notifications-container/notifications-container";
+@import "../../../../../components/validation/validation";
+
+/* 1802 theme */
+@import "button";
+@import "modal";
+@import "tabs";
diff --git a/src/style/scss/themes/1802/button.scss b/src/style/scss/themes/1802/button.scss
new file mode 100644
index 0000000..05d91d5
--- /dev/null
+++ b/src/style/scss/themes/1802/button.scss
@@ -0,0 +1,148 @@
+.sdc-button {
+  @include box-sizing;
+  display: inline-block;
+
+  outline: none;
+  border-radius: 2px;
+  padding: 0 16px;
+
+  height: 32px;
+  line-height: 32px;
+  width: 120px;
+  min-width: 90px;
+
+  cursor: pointer;
+  text-align: center;
+  @include body-1;
+  &:disabled {
+    cursor: default;
+  }
+
+  // Primary button
+  &.sdc-button__primary {
+    border: none;
+    background-color: $blue;
+    color: $white;
+
+    &:not(:disabled) {
+      &:hover, &:active {
+        background-color: $light-blue;
+      }
+      &:focus:not(:active) {
+        border: 0.5px solid $white;
+        background-color: $light-blue;
+        box-shadow: 0px 0px 0px 1px $light-blue;
+      }
+    }
+
+    &:disabled{
+      background: $blue-disabled;
+    }
+  }
+
+  // Secondary button
+  &.sdc-button__secondary {
+    border: 1px solid $light-gray;
+    background-color: transparent;
+    color: $text-black;
+
+    &:not(:disabled) {
+      &:hover, &:active {
+        background-color: transparent;
+        color:$text-black;
+        border: 1px solid $gray;
+      }
+      &:focus:not(:active) {
+        color: $text-black;
+        box-shadow: inset 0px 0px 0px 0px $light-gray, 0px 0px 0px 1px $gray;
+      }
+    }
+
+    &:disabled {
+      color: $blue-disabled;
+      border-color: $blue-disabled;
+    }
+  }
+
+  // Link button
+  &.sdc-button__link {
+    background-color: transparent;
+    color: $blue;
+    fill: $blue;
+    border: none;
+
+    &:not(:disabled) {
+      &:hover, &:active {
+        color: $light-blue;
+      }
+      &:focus:not(:active) {
+        border: 1px solid $dark-blue;
+        color: $light-blue;
+      }
+    }
+
+    &:disabled{
+      color: $blue-disabled;
+    }
+  }
+
+
+  // alert button
+  &.sdc-button__alert {
+    border: none;
+    background-color: $red;
+    color: $white;
+
+    &:not(:disabled) {
+      &:hover, &:active {
+        background-color: $light-red;
+      }
+      &:focus:not(:active) {
+        border: 0.5px solid $white;
+        background-color: $light-red;
+        box-shadow: 0px 0px 0px 1px $light-red;
+      }
+    }
+
+    &:disabled{
+      background: $disabled-red;
+    }
+  }
+
+
+  /*** Sizes ***/
+  &.btn-large{
+    width: $btn-large;
+  }
+
+  &.btn-medium{
+    width: $btn-medium;
+  }
+
+  &.btn-small{
+    width: $btn-small;
+  }
+
+  &.btn-x-small{
+    width: $btn-extra-small;
+  }
+
+  &.btn-default{
+    width: $btn-default;
+  }
+
+  /*** Buttons with icons ***/
+  .sdc-icon-right{
+    margin-left: 15px;
+  }
+
+  .sdc-icon-left{
+    margin-right: 15px;
+  }
+
+  svg {
+    display: inline-block;
+    vertical-align: middle;
+  }
+}
+
diff --git a/src/style/scss/themes/1802/modal.scss b/src/style/scss/themes/1802/modal.scss
new file mode 100644
index 0000000..de99d52
--- /dev/null
+++ b/src/style/scss/themes/1802/modal.scss
@@ -0,0 +1,193 @@
+
+.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: 0 30px;
+      border-radius: 4px;
+
+      .sdc-custom__header {
+        @include box-sizing;
+        color: $dark-gray;
+        height: 50px;
+        border-bottom: solid 3px $blue;
+        padding: 0;
+
+        .title {
+          @include heading-3;
+          color: $dark-gray;
+        }
+
+        .sdc-modal__close-button {
+          margin-top: 0px;
+          width: 20px;
+          height: 14px;
+        }
+        .sdc-modal__close-button-svg {
+          width: 20px;
+          height: 20px;
+          .sdc-modal__svg-use {
+              fill: $white;
+          }
+          .svg-icon {
+            height: 14px;
+            width: 14px;
+            fill: $white;
+          }
+        }
+      }
+      .sdc-modal__content {
+        padding: 20px 40px;
+      }
+    }
+    .sdc-modal__header {
+      padding: 0px 10px 8px 14px;
+      display: flex;
+      justify-content: space-between;
+      text-align: left;
+      .sdc-modal__icon {
+        padding: 20px 12px 0px 6px;
+      }
+
+      .title {
+        @include heading-2;
+        flex: 1 1 auto;
+        color: $text-black;
+        padding-top: 19px;
+      }
+
+      .sdc-modal__close-button {
+        order:3;
+        width: 14px;
+        height: 14px;
+        margin-top:10px;
+        cursor: pointer;
+        .sdc-modal__svg-use {
+          fill: $black;
+        }
+      }
+    }
+    .sdc-modal__content {
+      order:2;
+      padding-left: 63px;
+      padding-right: 68px;
+      padding-bottom: 26px;
+    }
+
+    .sdc-modal__footer {
+      order:3;
+      background-color: $light-silver;
+      border-top: solid 1px $silver;
+      padding: 17px 30px;
+      display: flex;
+      justify-content: flex-end;
+      margin: 0 -30px;
+      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/src/style/scss/themes/1802/style.scss b/src/style/scss/themes/1802/style.scss
new file mode 100644
index 0000000..ae314d8
--- /dev/null
+++ b/src/style/scss/themes/1802/style.scss
@@ -0,0 +1,5 @@
+@import "../../common";
+@import "components";
+
+// for angular
+@import "../../angular/svg_icon";
diff --git a/src/style/scss/themes/1802/tabs.scss b/src/style/scss/themes/1802/tabs.scss
new file mode 100644
index 0000000..70ee4cb
--- /dev/null
+++ b/src/style/scss/themes/1802/tabs.scss
@@ -0,0 +1,39 @@
+.sdc-tabs {
+    .sdc-tab {
+        background-color: $white;
+        border: 1px solid $silver;
+        border-left: none;
+        display: inline-block;
+        height: 36px;
+        text-align: center;
+        cursor: pointer;
+        padding: 2px 10px 0 10px;
+        margin: 0;
+
+
+        &:first-child {
+            border-left: 1px solid $silver;
+        }
+        &.sdc-tab-active {
+            background-color: $silver;
+        }
+        &[disabled] {
+            opacity: 0.3;
+            cursor: default;
+        }
+    }
+    &.sdc-tabs-header {
+        .sdc-tab {
+            @include heading-2;
+        }
+    }
+    &.sdc-tabs-menu {
+        .sdc-tab {
+            @include body-1;
+            padding: 0px 10px 4px 10px;
+        }
+    }
+    .sdc-tab-content {
+        margin-top: 30px;
+    }
+}