vuestic-ui
Version:
Vue 3 UI Framework
54 lines • 1.14 kB
CSS
.va-menu-item {
display: table-row;
cursor: pointer;
position: relative;
z-index: 0;
}
.va-menu-item::after {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
content: "";
background: var(--va-menu-item-hover-color);
opacity: 0;
z-index: -1;
transition: all 0.3s ease-in-out;
}
.va-menu-item__cell {
display: table-cell;
vertical-align: middle;
}
.va-menu-item__cell--center {
padding: 0 var(--va-menu-padding-x);
text-align: left;
width: 100%;
}
.va-menu-item__cell--left, .va-menu-item__cell--right {
padding: 0 var(--va-menu-padding-x);
text-align: center;
min-width: 1px;
white-space: nowrap;
}
.va-menu-item__cell--left:empty, .va-menu-item__cell--right:empty {
padding: 0;
}
.va-menu-item__cell--left {
padding-right: 0;
}
.va-menu-item__cell--right {
padding-left: 0;
}
.va-menu-item:hover::after {
background: var(--va-menu-item-hover-color);
opacity: var(--va-menu-item-hover-opacity);
}
.va-menu-item--disabled {
opacity: 0.5;
cursor: not-allowed;
}
.va-menu-item--keyboard-focus {
outline: 2px solid var(--va-focus) ;
border-radius: 2px;
}