devextreme/less/sources/widgets/generic/menuBase.generic.less

HTML5 JavaScript Component Suite for Responsive Web Development

/**
* DevExtreme (widgets/generic/menuBase.generic.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() {
    @GENERIC_MENU_ITEM_PADDING_BASE: 5px;
    @GENERIC_MENU_PADDING_BIG: 25px;
    @GENERIC_MENU_PADDING_SMALL: 19px;
}
.dx-size-compact() {
    @GENERIC_MENU_ITEM_PADDING_BASE: 3px;
    @GENERIC_MENU_PADDING_BIG: 23px;
    @GENERIC_MENU_PADDING_SMALL: 17px;
}
@GENERIC_MENU_ITEM_PADDING_INCREASED: @GENERIC_MENU_ITEM_PADDING_BASE + 2px;
@GENERIC_MENU_ITEM_PADDING_REDUCED: @GENERIC_MENU_ITEM_PADDING_BASE - 2px;
@GENERIC_MENU_ARROW_IMAGE_SIZE: 7px;

@GENERIC_MENU_POPUP_BORDER: 1px solid @menu-popup-border-color;


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

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

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

    &.dx-menu-item-has-text {
        .dx-icon {
            margin-right: -@GENERIC_BASE_ICON_SIZE;
        }
    }
}

.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;
        color: @base-inverted-text-color;
    }
}

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

.dx-menu-item.dx-state-focused,
.dx-menu-item.dx-state-active,
.dx-menu-item-expanded {
    outline: none;
}

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

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

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

    .dx-menu-item-content {
        padding: @GENERIC_MENU_ITEM_PADDING_REDUCED @GENERIC_MENU_ITEM_PADDING_BASE @GENERIC_MENU_ITEM_PADDING_INCREASED;

        .dx-menu-item-text {
            padding: 0 @GENERIC_MENU_PADDING_BIG @GENERIC_MENU_ITEM_PADDING_BASE @GENERIC_MENU_ITEM_PADDING_BASE + @GENERIC_BASE_ICON_SIZE;
        }

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

    &.dx-rtl {
        .dx-menu-item-content {
            .dx-menu-item-text {
                padding: 0 @GENERIC_MENU_ITEM_PADDING_BASE + @GENERIC_BASE_ICON_SIZE @GENERIC_MENU_ITEM_PADDING_BASE @GENERIC_MENU_PADDING_BIG;
            }

            .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();
                }
            }
        }

        .dx-menu-item-has-text {
            .dx-icon {
                margin-left: -@GENERIC_BASE_ICON_SIZE;
            }
        }
    }
}