devextreme/less/sources/widgets/generic/menu.generic.less

HTML5 JavaScript Component Suite for Responsive Web Development

/**
* DevExtreme (widgets/generic/menu.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/
*/
@import (once) "./menuBase.generic.less";
@import (once) "./overlay.generic.less";
@import (once) "./button.generic.less";
@import (once) "./treeView.generic.less";

.dx-context-menu-container-border {
    background-color: transparent;
    border: @GENERIC_MENU_POPUP_BORDER;
    box-shadow: 0 1px 1px @menu-container-shadow-color;
}

.dx-context-menu-content-delimiter {
    background-color: @menu-popup-bg;
}

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

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

    .dx-menu-item-has-icon.dx-menu-item-has-submenu {
        .dx-icon {
            margin: 0 @GENERIC_MENU_PADDING_SMALL 0 @GENERIC_MENU_ITEM_PADDING_REDUCED;
        }
    }

    .dx-menu-item-has-text {
        .dx-menu-item-text {
            padding: 0 @GENERIC_MENU_ITEM_PADDING_BASE @GENERIC_MENU_ITEM_PADDING_BASE @GENERIC_MENU_ITEM_PADDING_BASE;
        }

        &.dx-menu-item-has-icon {
            .dx-icon {
                margin: 0 @GENERIC_MENU_ITEM_PADDING_REDUCED;
            }
        }

        &.dx-menu-item-has-submenu {
            .dx-menu-item-text {
                padding: 0 @GENERIC_MENU_PADDING_SMALL @GENERIC_MENU_ITEM_PADDING_BASE @GENERIC_MENU_ITEM_PADDING_BASE;
            }
        }
    }

    .dx-menu-horizontal {
        .dx-menu-item-popout {
            .dx-icon(spindown);
            .dx-icon-font-centered-sizing(@GENERIC_BASE_ICON_SIZE);
        }
    }

    .dx-menu-vertical {
        .dx-menu-item-popout {
            .dx-icon(spinright);
            .dx-icon-font-centered-sizing(@GENERIC_BASE_ICON_SIZE);
        }
    }

    &.dx-rtl {
        .dx-menu-item-has-icon.dx-menu-item-has-submenu {
            .dx-icon {
                margin: 0 @GENERIC_MENU_ITEM_PADDING_REDUCED 0 @GENERIC_MENU_PADDING_SMALL;
            }
        }

        .dx-menu-item-has-text {
            .dx-menu-item-text {
                padding: 0 @GENERIC_MENU_ITEM_PADDING_BASE @GENERIC_MENU_ITEM_PADDING_BASE 0;
            }

            &.dx-menu-item-has-submenu {
                .dx-menu-item-text {
                    padding: 0 @GENERIC_MENU_ITEM_PADDING_BASE @GENERIC_MENU_ITEM_PADDING_BASE @GENERIC_MENU_PADDING_SMALL;
                }
            }
        }
    }
}

.dx-menu-adaptive-mode {
    background-color: @menu-popup-bg;

    .dx-treeview {
        border: 1px solid @menu-popup-border-color;
        border-radius: @base-border-radius;

        &,
        &.dx-state-focused {
            box-shadow: 0 3px 10px fade(@base-shadow-color, 10%);
        }
    }

    .dx-treeview-toggle-item-visibility {
        font-size: 18px;
    }

    .dx-treeview-node {
        &.dx-state-focused {
            .dx-treeview-node .dx-treeview-toggle-item-visibility {
                color: inherit;
            }

            .dx-treeview-toggle-item-visibility {
                color: @menu-popup-bg;
            }
        }
    }

    .dx-treeview-node-container:first-child > .dx-treeview-node {
        border-bottom: 1px solid @menu-popup-border-color;
    }
}