nishant-design-system/lib/components/SubMenu/SubMenu.module.css

Sense UI components library

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

@value (
  colorFillNone,
  colorFillPrimary,
  colorFocusPrimary,
  colorNeutralDarkest,
  colorTextInverseSecondary,
  colorTextInversePrimary,
  colorSubMenuBackgroundDefault,
  colorSideMenuIconActive,
  colorSuccess,
  colorFocusDanger
   ) from '../../styles/variables/_color.css';
@value ( spaceNone, spaceXXSmall, spaceXSmall, spaceSmall, spaceMedium ) from '../../styles/variables/_space.css';

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

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

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

.subMenuCloseButton {
  margin: spaceSmall;
}

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

.subMenuCloseIcon {
  color: colorSideMenuIconActive;
}

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

.menuChildWrap {
  margin: spaceNone spaceSmall;
  border-bottom: borderWidthPrimary solid colorNeutralDarkest;
}

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

.subMenuGroupWrapper {
  display: flex;
  flex-direction: column;
  padding: spaceXSmall spaceNone;
  flex: auto;
}

.subMenuGroupHeader {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  cursor: pointer;
  padding: spaceXSmall;
  border-radius: borderRadiusSmall;
}

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

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

.groupTitle {
  text-transform: uppercase;
}

.subMenuGroup {
  display: flex;
  flex-direction: column;
  margin-top: spaceXSmall;
  gap: spaceXXSmall;
}

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

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

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

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

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

.menuIcon {
  color: inherit;
}

.menuItem.selected {
  background: colorNeutralDarkest;
  color: colorTextInversePrimary;
}

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

.menuIconName {
  display: flex;
  flex-direction: row;
  gap: spaceSmall;
}

.subMenuItemText {
  color: inherit;
  margin-right: spaceSmall;
}

.subMenuItemAction {
  display: flex;
  flex-direction: row;
}