alfresco-ng2-components/lib/content-services/search/components/search-control.component.scss

@mixin adf-search-control-theme($theme) {
    $background: map-get($theme, background);
    $foreground: map-get($theme, foreground);
    $primary: map-get($theme, primary);
    $accent: map-get($theme, accent);
    $mat-menu-border-radius: 2px !default;

    .adf-search-container {
        overflow: hidden !important;
        adf-search-bar {
            width: 200px;
        }
    }

    .adf-search-button {
        left: -13px;
    }

    .adf {

        &-search-fixed-text {
            line-height: normal;
        }

        &-input-form-field-divider {
            .mat-form-field-underline {
                background-color: mat-color($primary, 50);
                .mat-form-field-ripple {
                    background-color: mat-color($primary, 50);
                }
            }
            font-size: 16px;
        }

        &-search-result-autocomplete {
            @include mat-menu-base(2);
            transform-origin: top left;
            position: absolute;
            max-width: 200px;
            max-height: 400px;
            margin-left: 45px;
            margin-top: -22px;
            font-size: 15px;
            z-index: 5;
            color: mat-color($foreground, text);
            background-color: mat-color($background, card);
            border-radius: $mat-menu-border-radius;

            @media screen and ($mat-small) {
                width: 160px;
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
            }
        }

        &-search-autocomplete-item {

            &:hover {
                background-color: mat-color($background, 'hover');
                opacity: 1;
            }
        }
    }

    .highlight {
        color: mat-color($primary, 900);
    }
}