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

22 files changed, 231 insertions, 0 deletions

diff --git a/components/button/_button.scss b/components/button/_button.scss
new file mode 100644
index 0000000..3c21a45
--- /dev/null
+++ b/components/button/_button.scss
@@ -0,0 +1,168 @@
+.sdc-button {
+  order:1;
+  @include box-sizing;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: row;
+  outline: none;
+  border-radius: 2px;
+  padding: 0 12px;
+  height: 36px;
+  line-height: 36px;
+  width: 120px;
+  min-width: 90px;
+  cursor: pointer;
+  text-align: center;
+  text-transform: uppercase;
+  @include body-1;
+
+  &:disabled {
+    cursor: default;
+  }
+
+  // Primary button
+  &.sdc-button__primary {
+    border: 1px solid transparent;
+    background-color: $blue;
+    color: $white;
+
+    &:not(:disabled) {
+      &:hover, &:active {
+        background-color: $light-blue;
+      }
+      &:focus:not(:active) {
+        border: 1px 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 $blue;
+    background-color: transparent;
+    color: $blue;
+
+    &:not(:disabled) {
+      &:hover, &:active {
+        background-color: $light-blue;
+        color:$white;
+      }
+      &:focus:not(:active) {
+        color: $light-blue;
+        box-shadow: inset 0px 0px 0px 0px $dark-blue, 0px 0px 0px 1px $blue;
+        &:hover {
+          color: $white;
+        }
+      }
+    }
+
+    &: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 {
+    flex-direction: row-reverse;
+    .svg-icon {
+      margin-left: 15px;
+    }
+  }
+
+  &.sdc-icon-left {
+    flex-direction: row;
+    .svg-icon {
+      margin-right: 15px;
+    }
+  }
+
+  svg {
+    display: inline-block;
+    vertical-align: middle;
+  }
+}
+.sdc-button__wrapper {
+  display: inline-flex;
+}
+.sdc-button__spinner {
+  padding-top: 6px;
+  margin:0 2px;
+  &.left {
+    order:2;
+  }
+}
diff --git a/components/button/button-link-auto.html b/components/button/button-link-auto.html
new file mode 100644
index 0000000..22ac4c8
--- /dev/null
+++ b/components/button/button-link-auto.html
@@ -0,0 +1,3 @@
+<button class="sdc-button sdc-button__link btn-default">
+    Click Me
+</button>
diff --git a/components/button/button-link-disabled.html b/components/button/button-link-disabled.html
new file mode 100644
index 0000000..9267620
--- /dev/null
+++ b/components/button/button-link-disabled.html
@@ -0,0 +1,3 @@
+<button class="sdc-button sdc-button__link" disabled>
+    Click Me
+</button>
diff --git a/components/button/button-link-extra-small.html b/components/button/button-link-extra-small.html
new file mode 100644
index 0000000..245f885
--- /dev/null
+++ b/components/button/button-link-extra-small.html
@@ -0,0 +1,3 @@
+<button class="sdc-button sdc-button__link btn-x-small">
+    Click Me
+</button>
diff --git a/components/button/button-link-large.html b/components/button/button-link-large.html
new file mode 100644
index 0000000..6d1780c
--- /dev/null
+++ b/components/button/button-link-large.html
@@ -0,0 +1,3 @@
+<button class="sdc-button sdc-button__link btn-large">
+    Click Me
+</button>
diff --git a/components/button/button-link-medium.html b/components/button/button-link-medium.html
new file mode 100644
index 0000000..cb0293d
--- /dev/null
+++ b/components/button/button-link-medium.html
@@ -0,0 +1,3 @@
+<button class="sdc-button sdc-button__link btn-medium">
+    Click Me
+</button>
diff --git a/components/button/button-link-small.html b/components/button/button-link-small.html
new file mode 100644
index 0000000..5c195fa
--- /dev/null
+++ b/components/button/button-link-small.html
@@ -0,0 +1,3 @@
+<button class="sdc-button sdc-button__link btn-small">
+    Click Me
+</button>
diff --git a/components/button/button-link.html b/components/button/button-link.html
new file mode 100644
index 0000000..5c2070b
--- /dev/null
+++ b/components/button/button-link.html
@@ -0,0 +1,3 @@
+<button class="sdc-button sdc-button__link">
+    Click Me
+</button>
diff --git a/components/button/button-primary-auto.html b/components/button/button-primary-auto.html
new file mode 100644
index 0000000..125276f
--- /dev/null
+++ b/components/button/button-primary-auto.html
@@ -0,0 +1,3 @@
+<button class="sdc-button sdc-button__primary btn-default">
+    Click Me
+</button>
diff --git a/components/button/button-primary-disabled.html b/components/button/button-primary-disabled.html
new file mode 100644
index 0000000..b2ef842
--- /dev/null
+++ b/components/button/button-primary-disabled.html
@@ -0,0 +1,3 @@
+<button class="sdc-button sdc-button__primary" disabled>
+    Click Me
+</button>
diff --git a/components/button/button-primary-extra-small.html b/components/button/button-primary-extra-small.html
new file mode 100644
index 0000000..a3be965
--- /dev/null
+++ b/components/button/button-primary-extra-small.html
@@ -0,0 +1,3 @@
+<button class="sdc-button sdc-button__primary btn-x-small">
+    Click Me
+</button>
diff --git a/components/button/button-primary-large.html b/components/button/button-primary-large.html
new file mode 100644
index 0000000..c0a41b1
--- /dev/null
+++ b/components/button/button-primary-large.html
@@ -0,0 +1,3 @@
+<button class="sdc-button sdc-button__primary btn-large">
+    Click Me
+</button>
diff --git a/components/button/button-primary-medium.html b/components/button/button-primary-medium.html
new file mode 100644
index 0000000..9ddedc5
--- /dev/null
+++ b/components/button/button-primary-medium.html
@@ -0,0 +1,3 @@
+<button class="sdc-button sdc-button__primary btn-medium">
+    Click Me
+</button>
diff --git a/components/button/button-primary-small.html b/components/button/button-primary-small.html
new file mode 100644
index 0000000..847f753
--- /dev/null
+++ b/components/button/button-primary-small.html
@@ -0,0 +1,3 @@
+<button class="sdc-button sdc-button__primary btn-small">
+    Click Me
+</button>
diff --git a/components/button/button-primary.html b/components/button/button-primary.html
new file mode 100644
index 0000000..b1524bf
--- /dev/null
+++ b/components/button/button-primary.html
@@ -0,0 +1,3 @@
+<button class="sdc-button sdc-button__primary">
+    Click Me
+</button>
diff --git a/components/button/button-secondary-auto.html b/components/button/button-secondary-auto.html
new file mode 100644
index 0000000..a183ad8
--- /dev/null
+++ b/components/button/button-secondary-auto.html
@@ -0,0 +1,3 @@
+<button class="sdc-button sdc-button__secondary btn-default">
+    Click Me
+</button>
diff --git a/components/button/button-secondary-disabled.html b/components/button/button-secondary-disabled.html
new file mode 100644
index 0000000..4125328
--- /dev/null
+++ b/components/button/button-secondary-disabled.html
@@ -0,0 +1,3 @@
+<button class="sdc-button sdc-button__secondary" disabled>
+    Click Me
+</button>
diff --git a/components/button/button-secondary-extra-small.html b/components/button/button-secondary-extra-small.html
new file mode 100644
index 0000000..92c4784
--- /dev/null
+++ b/components/button/button-secondary-extra-small.html
@@ -0,0 +1,3 @@
+<button class="sdc-button sdc-button__secondary btn-x-small">
+    Click Me
+</button>
diff --git a/components/button/button-secondary-large.html b/components/button/button-secondary-large.html
new file mode 100644
index 0000000..958c151
--- /dev/null
+++ b/components/button/button-secondary-large.html
@@ -0,0 +1,3 @@
+<button class="sdc-button sdc-button__secondary btn-large">
+    Click Me
+</button>
diff --git a/components/button/button-secondary-medium.html b/components/button/button-secondary-medium.html
new file mode 100644
index 0000000..67f9741
--- /dev/null
+++ b/components/button/button-secondary-medium.html
@@ -0,0 +1,3 @@
+<button class="sdc-button sdc-button__secondary btn-medium">
+    Click Me
+</button>
diff --git a/components/button/button-secondary-small.html b/components/button/button-secondary-small.html
new file mode 100644
index 0000000..d9d8cd7
--- /dev/null
+++ b/components/button/button-secondary-small.html
@@ -0,0 +1,3 @@
+<button class="sdc-button sdc-button__secondary btn-small">
+    Click Me
+</button>
diff --git a/components/button/button-secondary.html b/components/button/button-secondary.html
new file mode 100644
index 0000000..64967cc
--- /dev/null
+++ b/components/button/button-secondary.html
@@ -0,0 +1,3 @@
+<button class="sdc-button sdc-button__secondary">
+    Click Me
+</button>