@spaced-out/ui-design-system/lib/components/SubMenu/SubMenu.module.css

Sense UI components library

@value ( size34, size60, size300, sizeFluid, sizeFullViewportHeight) from '../../styles/variables/_size.css';

@value (
  colorFillNone,
  colorFillPrimary,
  colorFocusPrimary,
  colorNeutralDark,
  colorNeutralDarkest,
  colorTextInverseSecondary,
  colorTextInversePrimary,
  colorSubMenuBackgroundDefault,
  colorSideMenuIconDefault,
  colorSideMenuIconActive,
  colorSuccess,
  colorFocusDanger
  ) from '../../styles/variables/_color.css';

@value (
  spaceNone,
  spaceXXSmall,
  spaceXSmall,
  spaceSmall,
  spaceMedium,
  spaceLarge 
  ) from '../../styles/variables/_space.css';

@value (
  borderWidthPrimary,
  borderWidthTertiary,
  borderWidthNone,
  borderRadiusSmall,
  borderRadiusNone
  ) from '../../styles/variables/_border.css';

.subMenuWrapper {
  background: colorSubMenuBackgroundDefault;
  width: sizeFluid;
  min-height: sizeFullViewportHeight;
  cursor: default;
  display: flex;
  flex-direction: column;
  user-select: none;
}

.subMenuTitleAndButton {
  height: size60;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: borderWidthPrimary solid colorNeutralDarkest;
  margin: spaceNone spaceNone spaceXXSmall spaceXXSmall;
}

.subMenuTitleWrapper {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: spaceSmall;
}

.subMenuCloseButton {
  margin: spaceSmall;
}

.subMenuCloseButton:hover {
  background-color: colorNeutralDarkest;
}

.subMenuCloseIcon {
  color: colorSideMenuIconActive;
}

.subMenuHeader {
  height: size60;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: spaceMedium spaceXSmall;
}

.menuChildWrap {
  margin: spaceNone spaceSmall;
}

.menuChildWrap:last-child {
  border-bottom: none;
}

.subMenuGroupWrapper,
.subMenuLinkWrapper {
  display: flex;
  flex-direction: column;
  margin: spaceXXSmall spaceNone;
  flex: auto;
}

.subMenuGroupWrapper {
  background: colorNeutralDarkest;
  border-radius: borderRadiusSmall;
}

.subMenuGroupHeader,
.subMenuLink {
  color: colorSideMenuIconDefault;
  background: colorSubMenuBackgroundDefault;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  cursor: pointer;
  padding: spaceXSmall;
  border-radius: borderRadiusSmall;
}

.subMenuGroupHeader:hover,
.subMenuLink:hover {
  background: colorNeutralDarkest;
  .groupTitle,
  .menuLinkTitle {
    color: colorTextInversePrimary;
  }
}

.subMenuGroupHeader:focus-visible,
.subMenuGroup:focus-visible,
.subMenuLink:focus-visible {
  outline: none;
}

.subMenuGroupHeader.collapsible:focus,
.subMenuLink:focus {
  box-shadow: borderWidthNone borderWidthNone borderWidthNone
    borderWidthTertiary colorFocusPrimary;
}

.subMenuGroupHeader:not(.collapsible) {
  background: colorNeutralDarkest;
}

.subMenuGroupHeader.collapsed,
.subMenuLink.collapsed {
  background: colorNeutralDarkest;
}

.subMenuGroupHeader.highlightedMenu {
  border: borderWidthPrimary solid colorNeutralDark;
  margin: calc(-1 * (borderWidthPrimary));
  .groupTitle {
    color: colorTextInversePrimary;
  }
}

.subMenuLink.highlightedMenu {
  background: colorNeutralDarkest;
  .menuLinkTitle {
    color: colorTextInversePrimary;
  }
}

.groupTitleWrapper {
  display: flex;
  gap: spaceXXSmall;
}

.groupIconWrapper {
  display: flex;
  position: relative;
  padding-right: spaceXSmall;
}

.statusIndicatorWrapper {
  position: absolute;
  top: calc(-1 * (spaceXXSmall));
  right: spaceNone;
}

.groupTitle,
.menuLinkTitle {
  color: colorTextInverseSecondary;
}

.menuLinkIcon {
  margin-right: spaceXSmall;
}

.subMenuGroup,
.subMenuFocusWrapper {
  outline: none;
  display: flex;
  flex-direction: column;
}

.subMenuGroup {
  margin: spaceXSmall spaceXXSmall;
  gap: spaceXXSmall;
  background: colorNeutralDarkest;
  border-radius: borderRadiusSmall;
}

.subMenuGroup.collapsed {
  display: none !important;
}

.menuItem {
  display: flex;
  flex-direction: row;
  color: colorTextInverseSecondary;
  flex-direction: row;
  justify-content: space-between;
  gap: spaceXSmall;
  align-items: center;
  flex: auto;
  height: size34;
  min-height: size34;
  border-radius: borderRadiusSmall;
  cursor: pointer;
  padding: spaceXXSmall;
  margin: spaceXXSmall;
  box-sizing: border-box;
}

.menuItem:not(.selected):hover {
  color: colorTextInversePrimary;
}

.menuItem:focus-visible {
  outline: none;
}

.menuItem:focus {
  box-shadow: borderWidthNone borderWidthNone borderWidthNone
    borderWidthTertiary colorFocusPrimary;
}

.menuIcon {
  color: inherit;
}

.menuItem.selected {
  color: colorTextInversePrimary;
}

.menuItem.selected::before {
  position: absolute;
  content: '';
  border-radius: borderRadiusSmall;
  background-color: colorFillPrimary;
  width: spaceXXSmall;
  height: spaceMedium;
}

.menuItem.disabled {
  pointer-events: none;
}

.menuIconName {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: spaceXXSmall;
  padding-left: spaceSmall;
  margin-left: spaceXXSmall;
}

.subMenuItemText {
  color: inherit;
}

.subMenuItemBadges {
  display: flex;
  align-items: center;
}