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;
    $mat-menu-overlay-min-width: 112px !default;   // 56 * 2
    $mat-menu-overlay-max-width: 280px !default;   // 56 * 5

    .adf-search-container {
        overflow: hidden !important;
    }

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

    [dir='rtl'] .adf-search-button {
        right: -13px;
    }

    [dir='ltr'] .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-overridable-elevation(2);

            min-width: $mat-menu-overlay-min-width;
            max-width: $mat-menu-overlay-max-width;
            overflow: auto;
            -webkit-overflow-scrolling: touch;

            transform-origin: top left;
            transform:translateX(-40px);
            position: absolute;
            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) {
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
            }
        }

        &-search-autocomplete-item {

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

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