Catalog alignment

Issue-ID: SDC-2724
Signed-off-by: ys9693 <ys9693@att.com>
Change-Id: I52b4aacb58cbd432ca0e1ff7ff1f7dd52099c6fe

2 files changed, 59 insertions, 12 deletions

diff --git a/catalog-ui/src/app/ng2/components/ui/expand-collapse/expand-collapse.component.html b/catalog-ui/src/app/ng2/components/ui/expand-collapse/expand-collapse.component.html
index fde7bca6d2..9b678b2790 100644
--- a/catalog-ui/src/app/ng2/components/ui/expand-collapse/expand-collapse.component.html
+++ b/catalog-ui/src/app/ng2/components/ui/expand-collapse/expand-collapse.component.html
@@ -14,16 +14,15 @@
   ~ limitations under the License.
   -->
   
-<h1 class="w-sdc-designer-sidebar-section-title"
-    tooltip="{{titleTooltip}}"
-    [ngClass]="{'expanded': state == 0, 'collapsed': state == 1}"
-    (click)="toggleState()">
-    {{caption}}<span class="w-sdc-designer-sidebar-section-title-icon"></span>
-    <ng-content select="header"></ng-content>
-    <span class="w-sdc-designer-sidebar-section-title-icon"></span>
-</h1>
+<div class="expand-collapse-container">
+    <h1 class="expand-collapse-title" [ngClass]="{'expanded': state == 0, 'collapsed': state == 1}"
+        tooltip="{{titleTooltip}}" (click)="toggleState()">{{caption}}
+        <ng-content select="header"></ng-content>
+        <svg-icon name="caret1-down-o" mode="info" size="small" class="expand-collapse-title-icon"></svg-icon>
+    </h1>
 
-<div class="expand-collapse-content" [ngClass]="{'visible': state === 0, 'hidden': state === 1}">
-    <ng-content></ng-content>
-    <ng-content select="content"></ng-content>
-</div>
+    <div class="expand-collapse-content" [ngClass]="{'expanded': state === 0, 'collapsed': state === 1}">
+        <ng-content></ng-content>
+        <ng-content select="content"></ng-content>
+    </div>
+</div>
\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/components/ui/expand-collapse/expand-collapse.component.less b/catalog-ui/src/app/ng2/components/ui/expand-collapse/expand-collapse.component.less
index e5dd2527c1..deda687a09 100644
--- a/catalog-ui/src/app/ng2/components/ui/expand-collapse/expand-collapse.component.less
+++ b/catalog-ui/src/app/ng2/components/ui/expand-collapse/expand-collapse.component.less
@@ -5,3 +5,51 @@
     text-decoration: underline;
     text-align: left;
 }
+
+
+.expand-collapse-title {
+    display:flex;
+    align-items: center;
+    cursor: pointer;
+    font-size: 14px;
+    text-transform: uppercase;
+    line-height: 32px;
+    padding: 0 10px 0 20px;
+
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+
+    header {
+        flex: 1;
+    }
+
+    .expand-collapse-title-icon {
+        padding-top: 10px;
+        padding-left: 2px; 
+        transition: transform .3s ease-out;
+        
+    }
+
+    &.expanded .expand-collapse-title-icon {
+        transform: rotate(0);
+    }
+
+    &.collapsed .expand-collapse-title-icon {
+        transform: rotate(-180deg);
+    }
+    
+} 
+
+.expand-collapse-content {
+    overflow: hidden;
+    transition: max-height .3s ease-in;
+
+    &.collapsed {
+        max-height: 0px;
+        overflow:hidden;
+        transition: all .3s cubic-bezier(0, 1, 0, 1);
+
+    }
+
+}