vuestic-ui
Version:
Vue 3 UI Framework
45 lines • 1.34 kB
CSS
:root,
:host {
--va-sidebar-min-height: 100%;
--va-sidebar-height: 100%;
--va-sidebar-position: relative;
--va-sidebar-top: 0;
--va-sidebar-left: 0;
--va-sidebar-transition: var(--va-transition);
--va-sidebar-z-index: 1;
/* Menu */
--va-sidebar-menu-max-height: 100%;
--va-sidebar-menu-margin-bottom: 0;
--va-sidebar-menu-list-style: none;
--va-sidebar-menu-padding-left: 0;
--va-sidebar-menu-overflow-y: auto;
--va-sidebar-menu-overflow-x: visible;
/* SidebarItem */
--va-sidebar-item-active-border-size: 4px;
--va-sidebar-item-transition: var(--va-transition);
/* SidebarItemContent */
--va-sidebar-item-content-padding: 1rem;
--va-sidebar-item-content-gap: 0.5rem;
/* SidebarItemTitle */
--va-sidebar-item-title-white-space: nowrap;
}
.va-sidebar-item {
border-left: var(--va-sidebar-item-active-border-size) solid transparent;
padding-right: var(--va-sidebar-item-active-border-size);
display: inline-block;
width: 100%;
font-family: var(--va-font-family);
transition: var(--va-sidebar-item-transition);
box-sizing: border-box;
color: currentColor;
cursor: pointer;
}
.va-sidebar-item--disabled {
opacity: 0.5;
cursor: not-allowed;
}
.va-sidebar-item:focus-visible {
outline: 2px solid var(--va-focus) ;
border-radius: "inherit";
outline-offset: -2px;
}