Skip to content
Snippets Groups Projects
plugin-select-autocomplete-search.component.scss 1.66 KiB
Newer Older
@import '../../css/vars.scss';


$mat-menu-side-padding: 16px !default;
$scrollbar-width: 17px;
$clear-button-width: 20px;
$multiple-check-width: 33px;

.mat-select-search-hidden {
    visibility: hidden;
}

.mat-select-search-inner {
    position: absolute;
    top: 0;
    width: calc(100% + #{2 * $mat-menu-side-padding - $scrollbar-width});
    border-bottom: 1px solid #cccccc;
    background: white;
    z-index: 100;

    &.mat-select-search-inner-multiple {

        width: calc(100% + #{2 * $mat-menu-side-padding - $scrollbar-width + $multiple-check-width});
    }
}

::ng-deep.mat-select-search-panel {
    /* allow absolute positioning relative to outer options container */
    transform: none !important;
    max-height: 350px !important;
    max-width: inherit !important;
}

.mat-select-search-input {
    padding: $mat-menu-side-padding;
    padding-right: $mat-menu-side-padding + $clear-button-width;
    box-sizing: border-box;

}

.mat-select-search-no-entries-found {
    padding: $mat-menu-side-padding;
}

.mat-select-search-clear {
    position: absolute;
    right: 0;
    top: 4px;
}

::ng-deep.cdk-overlay-pane-select-search {
    /* correct offsetY so that the selected option is at the position of the select box when opening */
    margin-top: -50px;
}

.mat-error {
    font-size: 10px;
    text-align: right;
    font-weight: bold;
}

.selectSuffixIcon {
    font-size: 10px;
    text-align: right;
}

.search-select {
    ::ng-deep.mat-selected:not(.mat-option-disabled) {
        font-weight: bold;
    }
}

.opt-group {
    position: sticky;
    top: 50px;
    background: white;
    z-index: 1;
    ::ng-deep.mat-pseudo-checkbox {
        display: none;
    }
}