From 2b4a69797c1b6fd62adcb0debe4be429f80539f3 Mon Sep 17 00:00:00 2001
From: Eugenio Romano <eugenio.romano@alfresco.com>
Date: Fri, 8 Feb 2019 02:08:39 +0000
Subject: [PATCH] fix style dropdown breadcrumb

---
 .../breadcrumb/breadcrumb.component.scss      |  5 ---
 .../dropdown-breadcrumb.component.html        | 37 ++++++++++---------
 .../dropdown-breadcrumb.component.scss        | 32 +++++++++++-----
 3 files changed, 43 insertions(+), 31 deletions(-)

diff --git a/lib/content-services/breadcrumb/breadcrumb.component.scss b/lib/content-services/breadcrumb/breadcrumb.component.scss
index 0d1baa9c9f..4cadf88d60 100644
--- a/lib/content-services/breadcrumb/breadcrumb.component.scss
+++ b/lib/content-services/breadcrumb/breadcrumb.component.scss
@@ -100,12 +100,7 @@
             }
 
             &.adf-active {
-                flex: 1 1 auto;
                 color: mat-color($foreground, text, 0.87);
-                /* stylelint-disable */
-                min-width: initial;
-                /* stylelint-enable */
-                width: auto;
 		    }
 
             &-chevron {
diff --git a/lib/content-services/breadcrumb/dropdown-breadcrumb.component.html b/lib/content-services/breadcrumb/dropdown-breadcrumb.component.html
index 44268fca5f..a4da0cee57 100644
--- a/lib/content-services/breadcrumb/dropdown-breadcrumb.component.html
+++ b/lib/content-services/breadcrumb/dropdown-breadcrumb.component.html
@@ -1,4 +1,4 @@
-<ng-container *ngIf="route.length > 0">
+<ng-container *ngIf="route.length > 0" class="adf-dropdown-breadcrumb-container">
 
     <button
         tabindex="0"
@@ -7,27 +7,30 @@
         data-automation-id="dropdown-breadcrumb-trigger">
         <mat-icon [class.adf-isRoot]="!hasPreviousNodes()">folder</mat-icon>
     </button>
+
     <mat-icon class="adf-dropdown-breadcrumb-item-chevron">chevron_right</mat-icon>
 
-    <mat-select
-        #dropdown
-        *ngIf="hasPreviousNodes()"
-        class="adf-dropdown-breadcrumb-path"
-        tabindex="0"
-        data-automation-id="dropdown-breadcrumb-path" >
-
-        <mat-option
-            *ngFor="let node of previousNodes;"
-            (click)="onRoutePathClick(node, $event)"
-            class="adf-dropdown-breadcrumb-path-option"
+    <div class="adf-dropdown-breadcrumb-path">
+        <mat-select
+            #dropdown
+            *ngIf="hasPreviousNodes()"
             tabindex="0"
-            data-automation-class="dropdown-breadcrumb-path-option">
-            {{ node.name | translate }}
-        </mat-option>
-    </mat-select>
+            data-automation-id="dropdown-breadcrumb-path">
+
+            <mat-option
+                *ngFor="let node of previousNodes;"
+                (click)="onRoutePathClick(node, $event)"
+                class="adf-dropdown-breadcrumb-path-option"
+                tabindex="0"
+                data-automation-class="dropdown-breadcrumb-path-option">
+                {{ node.name | translate }}
+            </mat-option>
+        </mat-select>
+    </div>
 
     <span
         class="adf-current-folder"
         [class.adf-isRoot]="!hasPreviousNodes()"
-        data-automation-id="current-folder">{{ currentNode.name }}</span>
+        data-automation-id="current-folder">{{ currentNode.name }}
+    </span>
 </ng-container>
diff --git a/lib/content-services/breadcrumb/dropdown-breadcrumb.component.scss b/lib/content-services/breadcrumb/dropdown-breadcrumb.component.scss
index 4f4d91f439..e054ef536f 100644
--- a/lib/content-services/breadcrumb/dropdown-breadcrumb.component.scss
+++ b/lib/content-services/breadcrumb/dropdown-breadcrumb.component.scss
@@ -1,23 +1,42 @@
 @mixin adf-breadcrumb-dropdown-theme($theme) {
     $primary: map-get($theme, primary);
     $dropdownHorizontalOffset: 30px;
+    $foreground: map-get($theme, foreground);
 
     .adf {
         &-dropdown-breadcrumb {
             display: flex;
-            justify-content: flex-start;
-            width: 100%;
+            flex: 1;
+            line-height: 24px;
+            font-size: 14px;
+            font-weight: 600;
+            letter-spacing: -0.2px;
+            color: mat-color($foreground, text, 0.54);
+            overflow: hidden;
+            margin-top: 10px;
+
+            .mat-icon {
+                height: 35px;
+            }
+
+            &-container {
+                margin: 0;
+                padding: 0;
+                list-style-type: none;
+                cursor: default;
+                display: flex;
+                overflow: hidden;
+            }
         }
 
         &-dropdown-breadcrumb-trigger {
-            height: 0;
             cursor: pointer;
             padding: 0;
             border: none;
             background: transparent;
+            width: 25px;
 
             &:focus {
-                color: mat-color($primary);
                 outline: none;
             }
         }
@@ -46,11 +65,6 @@
             text-overflow: ellipsis;
             display: inline-block;
             width: 75%;
-            line-height: 27px;
-        }
-
-        &-current-folder.adf-isRoot {
-            margin-left: 0;
         }
 
         &-dropdown-breadcrumb-path-option.mat-option {