react-toolbox/components/menu/style.menu_item.scss

44 lines
761 B
SCSS

@import "../base";
@import "./config";
.root {
position: relative;
display: flex;
height: $menu-item-height;
align-items: center;
padding: 0 $menu-item-padding;
overflow: hidden;
font-size: $menu-item-font-size;
color: $color-text;
&:not(.disabled):hover {
cursor: pointer;
background-color: $menu-item-hover-background;
}
&.disabled {
pointer-events: none;
opacity: .5;
}
&.selected {
font-weight: 500;
background-color: $menu-item-selected-background;
}
}
.icon {
width: $menu-item-icon-size;
font-size: $menu-item-icon-font-size !important;
}
.caption {
flex-grow: 1;
font-size: $font-size-normal;
}
.shortcut {
margin-left: $menu-item-padding;
}
.ripple {
color: $color-text-secondary;
}