From 14592280a9791ca8e31a1581af04941fbb6f4794 Mon Sep 17 00:00:00 2001 From: svishnev Date: Thu, 15 Feb 2018 11:00:37 +0200 Subject: ui filter component for catalog filter Issue-ID: SDC-1041 Change-Id: I29ad16dc6df7b35958d2670dcf363a9ce99ee5d7 Signed-off-by: svishnev --- openecomp-ui/resources/scss/_components.scss | 1 + .../resources/scss/components/_accordion.scss | 28 ++++++++++++++++++++++ .../resources/scss/modules/_onboardingCatalog.scss | 9 +++++-- .../modules/onboardingCatalog/_catalogFilter.scss | 11 +++++++++ 4 files changed, 47 insertions(+), 2 deletions(-) create mode 100644 openecomp-ui/resources/scss/components/_accordion.scss create mode 100644 openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogFilter.scss (limited to 'openecomp-ui/resources') diff --git a/openecomp-ui/resources/scss/_components.scss b/openecomp-ui/resources/scss/_components.scss index 13af5984e3..5579762fd3 100644 --- a/openecomp-ui/resources/scss/_components.scss +++ b/openecomp-ui/resources/scss/_components.scss @@ -21,6 +21,7 @@ @import "components/commitModal"; @import "components/userNotifications"; @import "components/overlay"; +@import "components/accordion"; %noselect { -webkit-touch-callout: none; diff --git a/openecomp-ui/resources/scss/components/_accordion.scss b/openecomp-ui/resources/scss/components/_accordion.scss new file mode 100644 index 0000000000..c96bc71be5 --- /dev/null +++ b/openecomp-ui/resources/scss/components/_accordion.scss @@ -0,0 +1,28 @@ +.accordion { + display: flex; + flex-direction: column; + .accordion-header { + display: flex; + flex-direction: row; + cursor: pointer; + margin-bottom: 10px; + .svg-icon-wrapper { + margin-right: 20px; + transition: transform .4s; + &.down { + transform: rotate(180deg); + } + } + } + .accordion-body { + padding-left: 10px; + opacity: 0; + overflow-y: hidden; + max-height: 0; + transition: max-height .3s cubic-bezier(0, 1.18, 1, 1), opacity 0.33s linear; + &.open { + opacity: 1; + max-height: 100%; + } + } +} \ No newline at end of file diff --git a/openecomp-ui/resources/scss/modules/_onboardingCatalog.scss b/openecomp-ui/resources/scss/modules/_onboardingCatalog.scss index 1201d4a34d..39f7636e79 100644 --- a/openecomp-ui/resources/scss/modules/_onboardingCatalog.scss +++ b/openecomp-ui/resources/scss/modules/_onboardingCatalog.scss @@ -4,8 +4,13 @@ $transitionLength: 0.6s; background-color: $background-gray; overflow: hidden; height: 100%; - @import "onboardingCatalog/onboardHeader"; - @import "onboardingCatalog/catalogHeader"; + display: flex; + @import "onboardingCatalog/catalogFilter.scss"; + .catalog-parts { + width: 100%; + @import "onboardingCatalog/onboardHeader"; + @import "onboardingCatalog/catalogHeader"; + } @import "onboardingCatalog/vendorPageHeader"; @import "onboardingCatalog/catalogList"; @import "onboardingCatalog/vspOverlay"; diff --git a/openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogFilter.scss b/openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogFilter.scss new file mode 100644 index 0000000000..84657b1317 --- /dev/null +++ b/openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogFilter.scss @@ -0,0 +1,11 @@ +.catalog-filter { + width: 242px; + overflow-y: auto; + height: 100%; + box-shadow: 1px 0px 4px 0px rgba(24, 24, 25, 0.17); + background-color: $white; + padding: 12px 18px; + .form-group { + margin-bottom: 10px; + } +} \ No newline at end of file -- cgit 1.2.3-korg