ui-modules/utils/br-core/style/dropdown.less

/*
 * 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.
 */

@dropdown-link-hover-bg: @primary-light;
@dropdown-link-active-bg: white;

.dropdown-menu {
    overflow-y: auto;
    overflow-x: hidden;
    width: 100%;
    max-height: 250px;

    padding-top: 0;
    padding-bottom: 0;

    .active a {
        color: @primary-900;
        &:hover,
        &:focus {
            color: @primary-900;
            background-color: @dropdown-link-hover-bg;
        }
    }

    .a {
        color: @primary-900;
        &:hover,
        &:focus {
            color: @primary-900;
            background-color: @dropdown-link-hover-bg;
        }
    }

    .toggle.active a {
        &:hover,
        &:focus {
            color: @primary-900;
            background-color: @dropdown-link-hover-bg;
        }
    }

    .toggle a {
        &:hover,
        &:focus {
            color: @primary-900;
        }
    }

    li a {
        padding: 7px 20px;
    }

    .dropdown-item {
        // Icon
        .media-left {
            vertical-align: middle; // Making sure the Icons in dropdown lists are centered if they are less than 64px in height.
            img {
                width: auto; // Making sure the Icons in dropdown lists are in correct ratio and are contained within a square.
                height: auto;
                max-width: 64px;
                max-height: 64px;
            }
        }

        // First line of text
        .dropdown-item-heading {
            color: @primary-500;
        }

        // Second line of text
        .dropdown-item-subheading {
            font-size: 10px;
            color: @gray-light;
        }
    }

    ///////////////////////////////////////////////
    // Typeaheads
    // - or Dropdown lists who don't use the <a> tag
    li.uib-typeahead-match {
        padding: 5px 15px 5px 15px;

        &:not(:first-child) {
            border-top: 1px solid #E1E1E1;
        }

        &:hover,
        &:focus {
            background-color: @dropdown-link-hover-bg;
        }
    }

    li.uib-typeahead-match.active {
        background-color: @dropdown-link-hover-bg;
        &:not(:first-child) {
            border-top: 1px solid lighten(@primary-500, 65%);
        }
        &:hover,
        &:focus {
            background-color: @dropdown-link-hover-bg;
        }
    }

    ///////////////////////////////////////////////
    // Typeaheads END
    ///////////////////////////////////////////////
}