ui filter component for catalog filter
Issue-ID: SDC-1041
Change-Id: I29ad16dc6df7b35958d2670dcf363a9ce99ee5d7
Signed-off-by: svishnev <shlomo-stanisla.vishnevetskiy@amdocs.com>
diff --git a/openecomp-ui/resources/scss/_components.scss b/openecomp-ui/resources/scss/_components.scss
index 13af598..5579762 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 0000000..c96bc71
--- /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 1201d4a..39f7636 100644
--- a/openecomp-ui/resources/scss/modules/_onboardingCatalog.scss
+++ b/openecomp-ui/resources/scss/modules/_onboardingCatalog.scss
@@ -4,8 +4,13 @@
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 0000000..84657b1
--- /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