devextreme/less/sources/widgets/material/contextMenu.material.less

HTML5 JavaScript Component Suite for Responsive Web Development

/**
* DevExtreme (widgets/material/contextMenu.material.less)
* Version: 20.1.7
* Build date: Tue Aug 25 2020
*
* Copyright (c) 2012 - 2020 Developer Express Inc. ALL RIGHTS RESERVED
* Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/
*/
@import (once) "./overlay.material.less";
@import (once) "./menuBase.material.less";

.dx-size-default() {
    @MATERIAL_CONTEXT_MENU_HORIZONTAL_PADDING: 16px;
    @MATERIAL_CONTEXT_MENU_CONTAINER_VERTICAL_PADDING: 8px;
    @MATERIAL_CONTEXT_MENU_FONT_SIZE: 15px;
}

.dx-size-compact() {
    @MATERIAL_CONTEXT_MENU_HORIZONTAL_PADDING: 8px;
    @MATERIAL_CONTEXT_MENU_CONTAINER_VERTICAL_PADDING: 4px;
    @MATERIAL_CONTEXT_MENU_FONT_SIZE: 13px;
}

.dx-context-menu {
    .dx-menu-item {
        font-size: @MATERIAL_CONTEXT_MENU_FONT_SIZE;
        color: @base-text-color;

        .dx-menu-item-content {
            padding: 3px @MATERIAL_CONTEXT_MENU_HORIZONTAL_PADDING 4px;

            .dx-menu-item-popout-container {
                right: @MATERIAL_CONTEXT_MENU_HORIZONTAL_PADDING;
                width: @MATERIAL_BASE_ICON_SIZE;

                .dx-menu-item-popout {
                    color: @base-icon-color;
                    .dx-icon(spinright);
                    .dx-icon-font-centered-sizing(@MATERIAL_BASE_ICON_SIZE);
                }
            }
        }

        &.dx-menu-item-has-submenu > .dx-menu-item-content {
            padding-right: @MATERIAL_MENU_ITEM_WITH_ICON_HORIZONTAL_PADDING;
        }

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

    .dx-menu-items-container {
        padding: @MATERIAL_CONTEXT_MENU_CONTAINER_VERTICAL_PADDING 0;
    }

    &.dx-overlay-content.dx-state-focused {
        box-shadow: none;
    }

    .dx-submenu {
        background-color: @menu-popup-bg;
        border-radius: @base-border-radius;
        box-shadow: 0 2px 7px @menu-container-shadow-color;
    }

    .dx-menu-separator {
        background-color: @menu-separator-bg;
    }

    &.dx-rtl {
        .dx-menu-item {
            .dx-menu-item-popout-container {
                left: @MATERIAL_CONTEXT_MENU_HORIZONTAL_PADDING;
            }

            &.dx-menu-item-has-text {
                &.dx-menu-item-has-icon {
                    .dx-icon {
                        margin-left: @MATERIAL_MENU_ITEM_WITH_ICON_HORIZONTAL_PADDING - @MATERIAL_CONTEXT_MENU_HORIZONTAL_PADDING - @MATERIAL_BASE_ICON_SIZE;
                        margin-right: 0;
                    }
                }
            }

            &.dx-menu-item-has-submenu > .dx-menu-item-content {
                padding-left: @MATERIAL_MENU_ITEM_WITH_ICON_HORIZONTAL_PADDING;
                padding-right: @MATERIAL_CONTEXT_MENU_HORIZONTAL_PADDING;
            }
        }
    }
}