@scania/tegel/dist/collection/components/side-menu/side-menu.css

Tegel Design System

/*
  Contains spacing variables for the layout
*/
:host,
:root {
  --tds-scrollbar-width-standard: thin;
  --tds-scrollbar-width: 10px;
  --tds-scrollbar-height: 10px;
  --tds-scrollbar-thumb-border-width: 3px;
  --tds-scrollbar-thumb-border-hover-width: 2px;
}

body {
  scrollbar-width: thin;
}

/** The breakpoint at which the layout changes from fixed size to full-width. */
:host {
  pointer-events: none;
  display: block;
  position: fixed;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 500;
}
:host .wrapper {
  height: inherit;
  /* default slot */
  /* 'end' slot */
}
:host .wrapper slot:not([name])::slotted(*) {
  border-bottom: 1px solid var(--tds-sidebar-side-menu-bottom-menu-border-top);
}
:host .wrapper ::slotted([slot=end]) {
  border-top: 1px solid var(--tds-sidebar-side-menu-bottom-menu-border-top);
}
:host .wrapper .tds-side-menu-list-end {
  margin-top: 68px;
}
:host .state-closed {
  display: none;
}
:host .state-open slot[name=overlay]::slotted(tds-side-menu-overlay) {
  opacity: 0.4;
}
:host .state-open slot[name=close-button]::slotted(tds-side-menu-close-button) {
  opacity: 1;
}
:host .state-upper-slot-empty .tds-side-menu-list-upper {
  display: none;
}
:host .state-upper-slot-empty .tds-side-menu-list-end {
  margin-top: 0;
}
:host .state-upper-slot-empty ::slotted([slot=end]) {
  border-top: none;
  border-bottom: 1px solid var(--tds-sidebar-side-menu-bottom-menu-border-top);
}

@media (max-width: 992px) {
  :host(.menu-opened) {
    pointer-events: auto;
    z-index: 500;
  }
}
@media (min-width: 992px) {
  :host(.menu-persistent) {
    pointer-events: auto;
    position: static;
    width: 272px;
    height: auto;
    border-right: 1px solid var(--tds-sidebar-side-menu-bottom-menu-border-top);
  }
  :host(.menu-persistent) .wrapper slot[name=overlay]::slotted(tds-side-menu-overlay) {
    display: none;
  }
  :host(.menu-persistent) .wrapper slot[name=close-button]::slotted(tds-side-menu-close-button) {
    display: none;
  }
  :host(.menu-persistent) .menu {
    width: 272px;
  }
  :host(.menu-persistent) .state-closed {
    display: block;
  }
  :host(.menu-persistent):host(.menu-collapsed) {
    width: 69px;
    box-sizing: border-box;
  }
  :host(.menu-persistent):host(.menu-collapsed) .menu {
    width: 68px;
  }
  :host(.menu-persistent) slot[name=end]::slotted(*) {
    display: none;
  }
}
.menu {
  width: 80%;
  height: inherit;
  position: relative;
  left: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.menu * {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

@media (max-width: 384px) {
  .menu {
    width: 100%;
  }
}
aside .tds-side-menu-wrapper {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  flex-grow: 1;
  background-color: var(--tds-sidebar-side-menu-background-cover);
  overflow-y: auto;
}
aside .tds-side-menu-wrapper:hover::-webkit-scrollbar-thumb {
  border: var(--tds-scrollbar-thumb-border-hover-width) solid transparent;
  background-clip: padding-box;
}
aside .tds-side-menu-wrapper::-webkit-scrollbar {
  width: var(--tds-scrollbar-width);
}
aside .tds-side-menu-wrapper::-webkit-scrollbar-track {
  background: var(--tds-scrollbar-track-color);
}
aside .tds-side-menu-wrapper::-webkit-scrollbar-thumb {
  border-radius: 40px;
  background: var(--tds-scrollbar-thumb-color);
  border: var(--tds-scrollbar-thumb-border-width) solid transparent;
  background-clip: padding-box;
}
aside .tds-side-menu-wrapper::-webkit-scrollbar-button {
  height: 0;
  width: 0;
}
@supports not selector(::-webkit-scrollbar) {
  aside .tds-side-menu-wrapper {
    scrollbar-color: var(--tds-scrollbar-thumb-color) var(--tds-scrollbar-track-color);
    scrollbar-width: var(--tds-scrollbar-width-standard);
  }
}
aside [role=navigation] {
  height: 100%;
  display: flex;
  flex-direction: column;
}
aside li {
  list-style: none;
  padding: 0;
  margin: 0;
}