react-antd-cssvars/dist/styles/menu.less

A minimal cssvars antd module

@import './variables.less';

@menu-prefix: ~"@{ant-prefix}-menu";

.@{menu-prefix} {
	color: @antd-menu-text-color;
}

.@{menu-prefix}-item:active, .@{menu-prefix}-submenu-title:active,
.@{menu-prefix}:not(.@{menu-prefix}-horizontal) .@{menu-prefix}-item-selected {
	background-color: @antd-background-selected;
}

.@{menu-prefix}-submenu-selected,
.@{menu-prefix}-vertical .@{menu-prefix}-submenu-selected,
.@{menu-prefix}-vertical-left .@{menu-prefix}-submenu-selected,
.@{menu-prefix}-vertical-right .@{menu-prefix}-submenu-selected,
.@{menu-prefix}-submenu:hover > .@{menu-prefix}-submenu-title > .@{menu-prefix}-submenu-expand-icon,
.@{menu-prefix}-submenu:hover > .@{menu-prefix}-submenu-title > .@{menu-prefix}-submenu-arrow,
.@{menu-prefix}-submenu-selected.@{menu-prefix}-submenu > .@{menu-prefix}-submenu-title > .@{menu-prefix}-submenu-arrow {
	color:@antd-menu-color;
}

.@{menu-prefix}-wrapper:hover .@{menu-prefix}, .@{menu-prefix}:hover .@{menu-prefix}-inner, .@{menu-prefix}-input:focus + .@{menu-prefix}-inner {
	border-color:@antd-menu-color-hover;
}
.@{menu-prefix}-item:hover, .@{menu-prefix}-item-selected, .@{menu-prefix}-item-active, .@{menu-prefix}:not(.@{menu-prefix}-inline) .@{menu-prefix}-submenu-open, .@{menu-prefix}-submenu-active, .@{menu-prefix}-submenu-title:hover {
	color:@antd-menu-color-hover;
}

.@{menu-prefix}-vertical .@{menu-prefix}-item::after, .@{menu-prefix}-vertical-left .@{menu-prefix}-item::after, .@{menu-prefix}-vertical-right .@{menu-prefix}-item::after, .@{menu-prefix}-inline .@{menu-prefix}-item::after {
	border-right: 3px solid @antd-menu-color;
}

.@{menu-prefix}-root.@{menu-prefix}-vertical, .@{menu-prefix}-root.@{menu-prefix}-vertical-left, .@{menu-prefix}-root.@{menu-prefix}-vertical-right, .@{menu-prefix}-root.@{menu-prefix}-inline {
	background: @antd-menu-background;
}

.@{menu-prefix}-sub.@{menu-prefix}-inline {
	background: @antd-submenu-background;
}

.@{menu-prefix}-submenu-expand-icon, .@{menu-prefix}-submenu-arrow {
	color: @antd-menu-text-color;
}

.@{menu-prefix}-dark {
	& .@{menu-prefix}-inline.@{menu-prefix}-sub {
		background: @antd-submenu-background;
	}

	&.@{menu-prefix}:not(.@{menu-prefix}-horizontal) .@{menu-prefix}-item-selected {
		background:@antd-menu-color;
	}
}

.@{menu-prefix}-dark .@{menu-prefix}-item, .@{menu-prefix}-dark .@{menu-prefix}-item-group-title, .@{menu-prefix}-dark .@{menu-prefix}-item > a, .@{menu-prefix}-dark .@{menu-prefix}-item > span > a {
	color: @antd-menu-text-color;
}

.@{menu-prefix}.@{menu-prefix}-dark, .@{menu-prefix}-dark .@{menu-prefix}-sub, .@{menu-prefix}.@{menu-prefix}-dark .@{menu-prefix}-sub {
	color: @antd-menu-text-color;
}