devextreme/less/sources/widgets/material/menuBase.material.less

HTML5 JavaScript Component Suite for Responsive Web Development

/**
* DevExtreme (widgets/material/menuBase.material.less)
* Version: 20.1.4
* Build date: Tue Jun 02 2020
*
* Copyright (c) 2012 - 2020 Developer Express Inc. ALL RIGHTS RESERVED
* Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/
*/
.dx-size-default() {
    @MATERIAL_MENU_ITEM_LINE_HEIGHT: 24px;
    @MATERIAL_MENU_ITEM_WITH_ICON_HORIZONTAL_PADDING: 64px;
}

.dx-size-compact() {
    @MATERIAL_MENU_ITEM_LINE_HEIGHT: 18px;
    @MATERIAL_MENU_ITEM_WITH_ICON_HORIZONTAL_PADDING: 46px;
}

@MATERIAL_MENU_ARROW_IMAGE_SIZE: 7px;
@MATERIAL_MENU_HORIZONTAL_PADDING: 16px;

.dx-menu-item {
    color: @menu-color;

    &.dx-state-hover {
        background-color: @menu-item-hover-bg;
    }

    &.dx-state-focused {
        background-color: @menu-item-hover-bg;
    }
}

.dx-menu-item-selected {
    background-color: @menu-item-selected-bg;
    color: @menu-item-selected-color;

    &.dx-state-focused {
        background-color: @menu-item-focused-selected-bg;
    }
}

.dx-menu-item-expanded,
.dx-menu-item-expanded.dx-state-hover,
.dx-menu-item-expanded.dx-state-focused {
    color: @menu-item-expanded-color;
    background-color: @menu-item-selected-bg;
}

.dx-menu-base {
    .dx-base-typography();

    &.dx-state-focused {
        outline: none;
    }

    .dx-icon {
        .dx-icon-sizing(@MATERIAL_BASE_ICON_SIZE);
    }

    .dx-menu-item {
        .dx-menu-item-content {
            line-height: @MATERIAL_MENU_ITEM_LINE_HEIGHT;

            .dx-menu-item-popout {
                min-width: @MATERIAL_MENU_ARROW_IMAGE_SIZE;
                min-height: @MATERIAL_MENU_ARROW_IMAGE_SIZE;
            }
        }
    }

    &.dx-rtl {
        .dx-menu-item-content {
            .dx-icon {
                margin-left: auto;
                margin-right: auto;
            }

            .dx-menu-item-popout-container {
                margin-left: 0;
                margin-right: auto;

                .dx-menu-item-popout {
                    .flip-horizontally();
                }
            }
        }
    }
}