platform/core/common/styles/_menus.scss

/*
* Licensed to the Apache Software Foundation (ASF) under one or more
* contributor license agreements.  See the NOTICE file distributed with
* this work for additional information regarding copyright ownership.
* The ASF licenses this file to You under the Apache License, Version 2.0
* (the "License"); you may not use this file except in compliance with
* the License.  You may obtain a copy of the License at
*
*     http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/

/* Menus */

@mixin fds-menus-theme($theme) {
    $primaryColor: map-get(map-get($theme, primary), 500);
    $primaryColorHover: map-get(map-get($theme, primary), 100);
    $accentColor: map-get(map-get($theme, accent), 500);
    $accentColorHover: map-get(map-get($theme, accent), 100);

    body[fds] .mat-menu-panel {
        border-radius: 2px;
        max-width: unset;
        min-height: 40px;
    }

    body[fds] .mat-menu-item {
        font-size: 14px;
        color: $bodyTextColor;
        min-width: 200px;
        text-transform: none;
        height: 24px;
        line-height: 24px;
    }

    body[fds] .regular-button-menu .mat-menu-item:hover {
        color: #fff;
        background-color: #808793;
    }

    body[fds] .mat-menu-item[disabled] {
        color: rgba(0, 0, 0, 0.38);
        background-color: #fff;
        cursor: not-allowed;
    }

    body[fds] .mat-menu-item .mat-icon {
        font-size: 14px;
    }

    body[fds] .mat-menu-item .fa {
        font-size: 14px;
        width: 1em;
        height: 1em;
    }

    body[fds] .mat-menu-item[disabled] .mat-icon {
        color: rgba(0, 0, 0, 0.38);
    }

    body[fds] .mat-menu-item[disabled] .fa {
        color: rgba(0, 0, 0, 0.38);
    }

    body[fds] .mat-menu-item:hover:not([disabled]) .mat-icon {
        color: #fff;
    }

    body[fds] .mat-menu-item:hover:not([disabled]) .fa {
        color: #fff;
    }

    body[fds] .mat-menu-item:hover:not([disabled]),
    body[fds] .mat-menu-item:focus:not([disabled]) {
        color: #fff;
        background-color: #808793;
    }

    body[fds] .fds-primary-dropdown-button-menu .mat-menu-item:hover:not([disabled]),
    body[fds] .fds-primary-dropdown-button-menu .mat-menu-item:focus:not([disabled]) {
        color: #fff;
        background-color: $primaryColorHover;
    }

    .mat-raised-button .mat-button-wrapper i {
        padding-left: 10px;
        margin-top: -3px;
    }

    body[fds] .mat-option {
        font-size: 14px;
        color: $bodyTextColor;
        text-transform: none;
        height: 24px;
        line-height: 24px;
    }

    body[fds] .mat-autocomplete-panel.mat-autocomplete-panel-below {
        top: 0;
    }

    body[fds] .regular-button-menu .mat-option:hover {
        color: #fff;
        background-color: #808793;
    }

    body[fds] .mat-option:hover:not([disabled]),
    body[fds] .mat-option:focus:not([disabled]) {
        color: #fff;
        background-color: #808793;
    }

    body[fds] .mat-select-underline {
        display: none;
    }
}