aboutsummaryrefslogtreecommitdiffstats
path: root/components/accordion
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/accordion
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/accordion')
-rw-r--r--components/accordion/accordion-basic.html22
-rw-r--r--components/accordion/accordion.scss50
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;
+ }
+ }
+}