Merge "init commit onap ui"2.0.0-ONAPbeijing2.0.0-ONAP

2 files changed, 72 insertions, 0 deletions

diff --git a/components/accordion/accordion-basic.html b/components/accordion/accordion-basic.html
new file mode 100644
index 0000000..fe85473
--- /dev/null
+++ b/components/accordion/accordion-basic.html
@@ -0,0 +1,22 @@
+<div class="sdc-accordion ">
+    <div class="sdc-accordion-header">
+        <div class="svg-icon-wrapper bottom">
+            <svg class="svg-icon __chevronUp" version="1.1" id="chevron-up_icon" x="0px" y="0px" viewBox="0 0 10 6.3" style="enable-background:new 0 0 10 6.3;"
+                xml:space="preserve">
+                <g transform="translate(0,-952.36218)">
+                    <path d="M10,958.2c0-0.1,0-0.2-0.1-0.2l-4.6-5.5c-0.1-0.2-0.4-0.2-0.5,0l0,0L0.1,958c-0.1,0.2-0.1,0.4,0,0.5s0.4,0.1,0.5,0l0,0
+          l4.3-5.2l4.3,5.2c0.1,0.2,0.4,0.2,0.5,0.1C10,958.5,10,958.3,10,958.2z">
+                    </path>
+                </g>
+            </svg>
+        </div>
+        <div class="title">
+            Accordion Title
+        </div>
+    </div>
+    <div class="sdc-accordion-body ">
+        <div>
+            Accordion body
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/components/accordion/accordion.scss b/components/accordion/accordion.scss
new file mode 100644
index 0000000..ef65b9c
--- /dev/null
+++ b/components/accordion/accordion.scss
@@ -0,0 +1,50 @@
+.sdc-accordion {
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 10px;
+  &.disabled {
+    opacity: .4;
+    pointer-events: none;
+  }
+  &:not(.disabled) {
+    .sdc-accordion-header {
+      cursor: pointer;
+    }
+  }
+  .sdc-accordion-header {
+    display: flex;
+    flex-direction: row;
+    .svg-icon-wrapper {
+      margin-right: 20px;
+      transition: transform 0.4s;
+      &.down {
+        transform: rotate(180deg);
+      }
+      .svg-icon {
+        fill: $gray;
+        width: 14px;
+        height: 8px;
+      }
+    }
+    &.arrow-right {
+      justify-content: space-between;
+      .svg-icon-wrapper{
+        order:1;
+        margin:0;
+      }
+    }
+  }
+  .sdc-accordion-body {
+    padding-left: 10px;
+    opacity: 0;
+    overflow-y: hidden;
+    max-height: 0;
+    padding-top: 0px;
+    transition: opacity 0.33s linear, padding-top 0.3s linear;
+    &.open {
+      padding-top: 5px;
+      opacity: 1;
+      max-height: 9999px;
+    }
+  }
+}