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

Sense UI components library

@value ( colorFillPrimary,
  colorFillInversePrimary,
  colorNeutralDarkest,
  colorTextInverseSecondary,
  colorTextInversePrimary,
  colorSideMenuIconDefault,
  colorSideMenuIconActive,
  colorSideMenuBackgroundDefault,
  colorSideMenuBackgroundHovered,
  colorSideMenuBackgroundSelected,
  colorGroupMenuTextDefault,
  colorFocusPrimary
  ) from '../../styles/variables/_color.css';
@value ( spaceNone, spaceXXSmall, spaceXSmall, spaceSmall ) from '../../styles/variables/_space.css';
@value ( size28, size32, sizeFluid) from '../../styles/variables/_size.css';
@value (
  borderWidthPrimary,
  borderWidthTertiary,
  borderWidthNone,
  borderRadiusSmall,
  borderRadiusNone
  ) from '../../styles/variables/_border.css';

.linkWrapper {
  display: flex;
  background: colorSideMenuBackgroundDefault;
  color: colorTextInverseSecondary;
  flex-direction: row;
  gap: spaceXSmall;
  justify-content: flex-start;
  align-items: center;
  max-height: size32;
  min-height: size32;
  border-radius: borderRadiusSmall;
  width: sizeFluid;
  cursor: pointer;
  user-select: none;
  padding: spaceNone;
}

.linkWrapper:focus-visible {
  outline: none;
  box-shadow: borderWidthNone borderWidthNone borderWidthNone
    borderWidthTertiary colorFocusPrimary;
}

.linkWrapper.closed {
  width: size32;
  min-width: size32;
  justify-content: center;
}

.linkWrapper:not(.selected):not(.inActive):hover {
  background: colorSideMenuBackgroundHovered;
  color: colorTextInversePrimary;
}

.menuIcon {
  height: size32;
  width: size32;
  min-height: size32;
  min-width: size32;
  color: colorSideMenuIconDefault;
}

.linkComponent {
  width: sizeFluid;
  text-decoration: none;
}

.linkComponent.closed {
  width: size32;
  min-width: size32;
  justify-content: center;
}

.linkComponent:focus-visible {
  border-radius: borderRadiusSmall;
  outline: none;
  box-shadow: borderWidthNone borderWidthNone borderWidthNone
    borderWidthTertiary colorFocusPrimary;
}

.linkWrapper.selected {
  background: colorSideMenuBackgroundSelected;
  color: colorTextInversePrimary;
}

.linkWrapper.selected .menuIcon,
.linkWrapper.selected .menuLinkText {
  color: colorSideMenuIconActive;
}

.linkWrapper:hover .menuIcon {
  color: colorSideMenuIconActive;
}

.groupMenuLinkText {
  color: inherit;
  margin-right: spaceSmall;
  white-space: nowrap;
  padding-right: spaceXXSmall;
}

.menuLinkText {
  color: colorGroupMenuTextDefault;
  margin-right: spaceSmall;
  white-space: nowrap;
  padding-right: spaceXXSmall;
}

.linkWrapper:hover .menuLinkText {
  color: colorSideMenuIconActive;
}

.menuLabelContainer {
  color: inherit;
  display: flex;
  flex: 1;
  justify-content: space-between;
  padding-right: spaceXSmall;
}

.iconContainer {
  display: flex;
  position: relative;
}

.statusIndicatorBlock {
  position: absolute;
  top: calc(spaceNone - (spaceXXSmall/2));
  right: calc(spaceNone - (spaceXXSmall/2));
}