@trimble-oss/moduswebcomponents/collection/components/modus-wc-side-navigation/modus-wc-side-navigation.css

Modus Web Components is a modern, accessible UI library built with Stencil JS that provides reusable web components following Trimble's Modus design system. This updated version focuses on improved flexibility, enhanced theming options, comprehensive cust

@charset "UTF-8";
modus-wc-side-navigation {
  display: block;
  height: 100vh;
  position: relative;
}
modus-wc-side-navigation .modus-wc-side-navigation {
  background: var(--modus-wc-color-base-page);
  color: var(--modus-wc-color-base-content);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  height: 100%;
  max-height: 100vh;
  min-height: 0;
  overflow: hidden;
  overflow-y: auto;
  position: absolute;
  transition: width 0.2s ease-out;
  z-index: 999;
}
modus-wc-side-navigation .side-navigation-content {
  flex: 1 1 auto;
  max-width: 100%;
}
modus-wc-side-navigation modus-wc-menu .modus-wc-menu {
  background-color: transparent;
  border-radius: 0;
}
modus-wc-side-navigation modus-wc-menu .modus-wc-menu > li {
  max-width: 100%;
}
modus-wc-side-navigation modus-wc-menu-item {
  max-width: 100%;
}
modus-wc-side-navigation modus-wc-menu-item .modus-wc-menu-item button {
  background-color: transparent;
  padding-inline-end: var(--modus-wc-spacing-xs);
  padding-inline-start: var(--modus-wc-spacing-xs);
}
modus-wc-side-navigation .side-navigation-content > modus-wc-menu modus-wc-menu-item .modus-wc-menu-item button {
  max-height: 32px;
}

[data-theme=modus-modern-light] modus-wc-side-navigation .modus-wc-side-navigation-expanded modus-wc-menu-item .modus-wc-menu-item > button .modus-wc-menu-item-content .modus-wc-menu-item-labels,
[data-theme=modus-modern-dark] modus-wc-side-navigation .modus-wc-side-navigation-expanded modus-wc-menu-item .modus-wc-menu-item > button .modus-wc-menu-item-content .modus-wc-menu-item-labels {
  display: block;
  padding-inline-end: 0;
  padding-inline-start: var(--modus-wc-spacing-md);
}
[data-theme=modus-modern-light] modus-wc-side-navigation .modus-wc-side-navigation,
[data-theme=modus-modern-dark] modus-wc-side-navigation .modus-wc-side-navigation {
  background-size: cover;
  box-shadow: none;
}
[data-theme=modus-modern-light] modus-wc-side-navigation .side-navigation-content,
[data-theme=modus-modern-dark] modus-wc-side-navigation .side-navigation-content {
  color: var(--modus-wc-color-base-page);
  padding: 0 var(--modus-wc-spacing-lg);
}
[data-theme=modus-modern-light] modus-wc-side-navigation modus-wc-menu-item .modus-wc-menu-item,
[data-theme=modus-modern-dark] modus-wc-side-navigation modus-wc-menu-item .modus-wc-menu-item {
  border-radius: var(--modus-wc-border-radius-btn);
  margin-bottom: var(--modus-wc-spacing-xs);
}
[data-theme=modus-modern-light] modus-wc-side-navigation modus-wc-menu-item .modus-wc-menu-item > button,
[data-theme=modus-modern-dark] modus-wc-side-navigation modus-wc-menu-item .modus-wc-menu-item > button {
  padding-inline-end: var(--modus-wc-spacing-md);
}
[data-theme=modus-modern-light] modus-wc-side-navigation modus-wc-menu-item .modus-wc-menu-item > button .modus-wc-menu-item-content .modus-wc-menu-item-labels,
[data-theme=modus-modern-dark] modus-wc-side-navigation modus-wc-menu-item .modus-wc-menu-item > button .modus-wc-menu-item-content .modus-wc-menu-item-labels {
  display: none;
  padding: 0;
  padding-inline-end: var(--modus-wc-spacing-md);
}
[data-theme=modus-modern-light] modus-wc-side-navigation .side-navigation-content:has(modus-wc-tree-menu),
[data-theme=modus-modern-dark] modus-wc-side-navigation .side-navigation-content:has(modus-wc-tree-menu) {
  padding: 0;
}

[data-theme=modus-classic-light] modus-wc-side-navigation modus-wc-menu-item .modus-wc-menu-item button,
[data-theme=modus-classic-dark] modus-wc-side-navigation modus-wc-menu-item .modus-wc-menu-item button {
  background-color: transparent;
  padding: var(--modus-wc-spacing-md) 1.25rem;
  padding-inline-end: var(--modus-wc-spacing-lg);
  padding-inline-start: calc(var(--modus-wc-spacing-lg) + 0.25rem);
}

[data-theme=modus-classic-dark] modus-wc-side-navigation .modus-wc-side-navigation {
  background: var(--modus-wc-color-gray-10);
  background-size: cover;
  box-shadow: none;
}
[data-theme=modus-classic-dark] modus-wc-side-navigation .side-navigation-content {
  color: var(--modus-wc-color-white);
}
[data-theme=modus-classic-dark] modus-wc-side-navigation modus-wc-menu .modus-wc-menu {
  background: transparent;
  color: var(--modus-wc-color-white);
}
[data-theme=modus-classic-dark] modus-wc-side-navigation modus-wc-menu .modus-wc-menu button:hover {
  background: var(--modus-wc-color-primary);
  color: var(--modus-wc-color-primary-content);
}

[data-theme=connect-light] modus-wc-side-navigation .modus-wc-side-navigation,
[data-theme=connect-dark] modus-wc-side-navigation .modus-wc-side-navigation {
  background: transparent;
  box-shadow: none;
  color: var(--modus-wc-color-primary-content);
}
[data-theme=connect-light] modus-wc-side-navigation .modus-wc-side-navigation:hover,
[data-theme=connect-dark] modus-wc-side-navigation .modus-wc-side-navigation:hover {
  background: var(--modus-wc-color-primary);
}
[data-theme=connect-light] modus-wc-side-navigation,
[data-theme=connect-dark] modus-wc-side-navigation {
  /* Flat menu only — tree-menu rows use story tree-item styles. */
}
[data-theme=connect-light] modus-wc-side-navigation modus-wc-menu > modus-wc-menu-item .modus-wc-menu-item,
[data-theme=connect-dark] modus-wc-side-navigation modus-wc-menu > modus-wc-menu-item .modus-wc-menu-item {
  background: transparent;
  color: var(--modus-wc-color-primary-content);
}
[data-theme=connect-light] modus-wc-side-navigation,
[data-theme=connect-dark] modus-wc-side-navigation {
  /* Suppress component li:hover base-100 and DaisyUI menu li>*:hover (white flash). */
}
[data-theme=connect-light] modus-wc-side-navigation .modus-wc-menu li.modus-wc-menu-item:hover,
[data-theme=connect-dark] modus-wc-side-navigation .modus-wc-menu li.modus-wc-menu-item:hover {
  background-color: transparent !important;
}
[data-theme=connect-light] modus-wc-side-navigation modus-wc-tree-menu .modus-wc-menu li.modus-wc-menu-item:hover,
[data-theme=connect-dark] modus-wc-side-navigation modus-wc-tree-menu .modus-wc-menu li.modus-wc-menu-item:hover {
  background-color: transparent !important;
}
[data-theme=connect-light] modus-wc-side-navigation modus-wc-menu > modus-wc-menu-item .modus-wc-menu-item:hover,
[data-theme=connect-dark] modus-wc-side-navigation modus-wc-menu > modus-wc-menu-item .modus-wc-menu-item:hover {
  background-color: transparent !important;
  color: var(--modus-wc-color-primary-content);
}
[data-theme=connect-light] modus-wc-side-navigation .side-navigation-content,
[data-theme=connect-dark] modus-wc-side-navigation .side-navigation-content {
  background: var(--modus-wc-color-connect-blue);
  color: var(--modus-wc-color-base-content);
}
[data-theme=connect-light] modus-wc-side-navigation modus-wc-menu .modus-wc-menu,
[data-theme=connect-dark] modus-wc-side-navigation modus-wc-menu .modus-wc-menu {
  background: transparent;
  color: var(--modus-wc-color-white);
}
[data-theme=connect-light] modus-wc-side-navigation modus-wc-menu .modus-wc-menu button:hover,
[data-theme=connect-dark] modus-wc-side-navigation modus-wc-menu .modus-wc-menu button:hover {
  background: var(--modus-wc-color-trimble-blue) !important;
  color: var(--modus-wc-color-white) !important;
}
[data-theme=connect-light] modus-wc-side-navigation modus-wc-tree-item > li.modus-wc-menu-item:not(.modus-wc-menu-item-active) > .modus-wc-menu-item-interactive:hover,
[data-theme=connect-dark] modus-wc-side-navigation modus-wc-tree-item > li.modus-wc-menu-item:not(.modus-wc-menu-item-active) > .modus-wc-menu-item-interactive:hover {
  background: var(--modus-wc-color-trimble-blue) !important;
  color: var(--modus-wc-color-white) !important;
}
[data-theme=connect-light] modus-wc-side-navigation modus-wc-menu-item .modus-wc-menu-item,
[data-theme=connect-dark] modus-wc-side-navigation modus-wc-menu-item .modus-wc-menu-item {
  color: var(--modus-wc-color-white);
}
[data-theme=connect-light] modus-wc-side-navigation modus-wc-menu-item .modus-wc-menu-item button,
[data-theme=connect-dark] modus-wc-side-navigation modus-wc-menu-item .modus-wc-menu-item button {
  padding: var(--modus-wc-spacing-xs) 1.25rem;
  padding-inline-end: var(--modus-wc-spacing-lg);
  padding-inline-start: calc(var(--modus-wc-spacing-lg) + 0.25rem);
}
[data-theme=connect-light] modus-wc-side-navigation modus-wc-menu-item .modus-wc-menu-item button:hover,
[data-theme=connect-dark] modus-wc-side-navigation modus-wc-menu-item .modus-wc-menu-item button:hover {
  background: var(--modus-wc-color-trimble-blue) !important;
  color: var(--modus-wc-color-white) !important;
}
[data-theme=connect-light] modus-wc-side-navigation modus-wc-menu-item .modus-wc-menu-item button:focus,
[data-theme=connect-dark] modus-wc-side-navigation modus-wc-menu-item .modus-wc-menu-item button:focus {
  color: var(--modus-wc-color-white);
}
[data-theme=connect-light] modus-wc-side-navigation modus-wc-menu-item .modus-wc-menu-item.modus-wc-menu-item-active button,
[data-theme=connect-dark] modus-wc-side-navigation modus-wc-menu-item .modus-wc-menu-item.modus-wc-menu-item-active button {
  background: var(--modus-wc-color-blue-light);
  color: var(--modus-wc-color-white);
  font-weight: var(--modus-wc-font-weight-semibold);
}
[data-theme=connect-light] modus-wc-side-navigation modus-wc-menu-item .modus-wc-menu-item.modus-wc-menu-item-active button:hover,
[data-theme=connect-dark] modus-wc-side-navigation modus-wc-menu-item .modus-wc-menu-item.modus-wc-menu-item-active button:hover {
  background: var(--modus-wc-color-primary);
  color: var(--modus-wc-color-white);
}