vuestic-ui/dist/esm-node/VaSidebar.css

Vue 3 UI Framework

: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 {
  min-height: var(--va-sidebar-min-height);
  height: var(--va-sidebar-height);
  z-index: var(--va-sidebar-z-index);
  font-family: var(--va-font-family);
  display: inline-flex;
  box-sizing: border-box;
  position: relative;
  top: 0;
}
.va-sidebar__menu {
  display: flex;
  flex-direction: column;
  min-width: 100%;
  flex: 1;
  height: 100%;
  right: 0;
  max-height: var(--va-sidebar-menu-max-height);
  overflow-y: var(--va-sidebar-menu-overflow-y);
  overflow-x: var(--va-sidebar-menu-overflow-x);
  margin-left: auto;
  scrollbar-color: var(--va-secondary) transparent;
  scrollbar-width: thin;
  transition: scrollbar-color 0.3s ease-in-out;
}
.va-sidebar__menu::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}
.va-sidebar__menu::-webkit-scrollbar-track {
  box-shadow: none;
  border-radius: 10px;
}
.va-sidebar__menu::-webkit-scrollbar-thumb {
  background: var(--va-secondary);
  opacity: 0.3;
  border-radius: 2px;
  -webkit-transition: background 0.3s ease-in-out;
  transition: background 0.3s ease-in-out;
}
.va-sidebar--animated {
  transition: var(--va-sidebar-transition);
}
.va-sidebar--animated .va-sidebar__menu {
  transition: var(--va-sidebar-transition);
}
.va-sidebar--animated-right {
  justify-content: flex-end;
}
.va-sidebar--animated-left {
  justify-content: flex-start;
}
.va-sidebar--minimized {
  left: 0;
}
.va-sidebar--minimized .va-sidebar__title {
  display: none;
}