alfresco-ng2-components/lib/content-services/breadcrumb/breadcrumb.component.scss

@mixin adf-breadcrumb-theme($theme) {
    $primary: map-get($theme, primary);
    $accent: map-get($theme, accent);
    $warn: map-get($theme, warn);
    $foreground: map-get($theme, foreground);
    $background: map-get($theme, background);

    $breadcrumb-chevron-spacer: 2px;

    .adf-breadcrumb {
        display: flex;
	    flex: 1;
	    line-height: 24px;
	    font-size: 14px;
	    font-weight: 600;
        letter-spacing: -0.2px;
        color: mat-color($foreground, text, 0.54);
        overflow: hidden;

        &-container {
            margin: 0;
            padding: 0;
            list-style-type: none;
            cursor: default;
            display: flex;
            overflow: hidden;
        }

        &-dropdown {
            &-path {
                width: 0;
                height: 0;
                overflow: hidden;
                margin-top: 35px;

                &.mat-select {
                    width: 0;
                }
            }

            &-trigger {
                cursor: pointer;
                padding: 0;
                border: none;
                background: transparent;
                width: 30px;
                margin-top: 2px;
                margin-right: 5px;

                &:focus {
                    color: mat-color($primary);
                    outline: none;
                }

                &-icon {
                    position: relative;
                }

                &-arrow {
                    font-size: 17px;
                    position: absolute;
                    left: 4px;
                    top: 4px;
                    color: white;
                    z-index: 2;
                }

                &-arrow.isRoot {
                    visibility: hidden;
                }

                &-arrow.focus {
                    border: none;
                }
            }

            &-trigger.isRoot {
                cursor: not-allowed;
            }
        }

        &-item {
            padding-right: $breadcrumb-chevron-spacer;
            overflow: hidden;
            display: flex;
            line-height: 33px;
            font-size: 14px;
            font-weight: 600;
            letter-spacing: -0.2px;
            text-align: left;
            opacity: 0.6;

            flex: 0 10 auto;
            min-width: 35px;
            text-overflow: ellipsis;

            &:hover,
            &.active {
                opacity: 1;
            }

            &.active {
                flex: 1 1 auto;
                color: mat-color($foreground, text, 0.87);
                min-width: initial;
                width: auto;
		    }

            &-chevron {
                opacity: 1;
                margin-top: 9px;
                font-size: 17px;
            }

            &.mat-primary {
                color: mat-color($primary);
            }

            &.mat-accent {
                color: mat-color($accent);
            }

            &.mat-warn {
                color: mat-color($warn);
            }

            &-anchor {
                box-sizing: border-box;
                color: inherit;
                text-decoration: none;
                display: inline-block;
                width: 100%;
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
                flex: 0 1 auto;
            }

            &-current {
                text-overflow: ellipsis;
                overflow: hidden;
                white-space: nowrap;
            }
        }

        &-path-option {
            &.mat-option {
                background-color: mat-color($background, card);
            }
        }
    }
}