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

Sense UI components library

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

@value (
  colorBackgroundSecondary,
  colorFillSecondary,
  colorTextDisabled,
  colorTextPrimary,
  colorTextSecondary,
  colorTextTertiary,
  colorBackgroundTertiary,
  colorFocusSecondary
) from '../../styles/variables/_color.css';

@value (
  colorBorderPrimary
) from '../../styles/variables/_color.css';

@value (
  size160,
  size42,
  size34,
  size50,
  size300,
  size240,
  size228,
  size276,
  sizeFluid
) from '../../styles/variables/_size.css';

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

@value (
  elevationMenu,
  elevationCard
) from '../../styles/variables/_elevation.css';

.menuCard {
  position: relative;
  composes: boxShadow2 from '../../styles/shadow.module.css';
  composes: borderPrimary from '../../styles/border.module.css';
  background-color: colorBackgroundTertiary;
  display: flex;
  flex-flow: column;
  padding: spaceXSmall;
  min-width: size160;
  border-radius: borderRadiusMedium;
  overflow: auto;
  z-index: elevationMenu;
}

.menuCardTopPaddingZero {
  padding-top: spaceNone;
}

.menuCardBottomPaddingZero {
  padding-bottom: spaceNone;
}

.menuCard:empty {
  padding: spaceNone;
  border: none;
}

.medium {
  width: size300;
  min-width: size300;
  max-height: size276;
}

.mediumWithHeader,
.mediumWithFooter {
  max-height: calc(size276 + size50);
}

.mediumWithHeaderAndFooter {
  max-height: calc(size276 + size50 + size50);
}

.small {
  width: size240;
  min-width: size240;
  max-height: size228;
}

.smallWithHeader,
.smallWithFooter {
  max-height: calc(size228 + size50);
}

.smallWithHeaderAndFooter {
  max-height: calc(size228 + size50 + size50);
}

.fluid {
  width: sizeFluid;
  min-width: size160;
}

.option {
  composes: motionEaseInEaseOut from '../../styles/animation.module.css';
  flex: 0 0 auto;
  width: sizeFluid;
  display: flex;
  border-radius: borderRadiusSmall;
  align-items: center;
  cursor: pointer;
  column-gap: spaceSmall;
  color: colorTextSecondary;
}

.optionTextContainer {
  display: flex;
  flex-flow: column;
  gap: spaceXXSmall;
}

.optionTextLabel,
.optionTextSecondaryLabel {
  display: flex;
  flex-flow: column;
  align-items: flex-start;
  text-align: left;
}

.withIconLeft {
  padding-left: spaceXSmall;
}

.withIconRight {
  padding-right: spaceXSmall;
}

.icon {
  color: inherit;
}

.rightIcon {
  margin-left: auto;
}

.optionSmall {
  composes: menuTextSmall from '../../styles/typography.module.css';
  padding: spaceXSmall spaceSmall;
}

.optionMedium {
  composes: menuTextMedium from '../../styles/typography.module.css';
  padding: spaceSmall spaceSmall;
}

.optionTextSecondaryLabel {
  composes: bodySmall from '../../styles/typography.module.css';
  color: colorTextTertiary;
}

.option:hover,
.option:active {
  background: colorBackgroundSecondary;
  color: colorTextPrimary;
}

.option:hover .optionTextSecondaryLabel {
  color: colorTextSecondary;
}

.option:active .optionTextSecondaryLabel {
  color: colorTextSecondary;
}

.option:focus {
  outline: none;
  color: colorTextPrimary;
}

.option:focus-visible {
  outline: none;
  color: colorTextPrimary;
  box-shadow: inset borderWidthNone borderWidthNone borderWidthNone
    borderWidthTertiary colorFocusSecondary;
}

.option:focus-within {
  outline: none;
  color: colorTextPrimary;
  /* box-shadow: none; */
}

.option.selected {
  background: colorFillSecondary;
  outline: none;
  color: colorTextPrimary;
}

.option:focus .optionTextSecondaryLabel {
  color: colorTextSecondary;
}

.disabled {
  color: colorTextDisabled;
  pointer-events: none;
}

.disabled .optionTextSecondaryLabel {
  color: colorTextDisabled;
}

.menuDivider {
  padding-top: spaceXSmall;
  padding-bottom: spaceXSmall;
}

.menuDivider:not(:first-of-type) {
  border-top: borderWidthPrimary solid colorBorderPrimary;
  padding-top: spaceXSmall;
  padding-bottom: spaceXSmall;
}

.hideDivider {
  border-top: none;
}

.menuDivider:first-child {
  padding-top: spaceNone;
}

.menuDivider:last-child {
  padding-bottom: spaceNone;
}

.optionsWrapper {
  display: flex;
  flex-flow: column;
}

.groupTitleWrapper {
  composes: formLabelSmall from '../../styles/typography.module.css';
  display: flex;
  padding-bottom: spaceXSmall;
  padding-left: spaceSmall;
  padding-right: calc(spaceXSmall / 2);
  color: colorTextTertiary;
  padding-top: spaceSmall;
}

.filterOptionsResultText {
  margin-top: calc(spaceXSmall * 2);
  margin-bottom: spaceXSmall;
  margin-left: spaceSmall;
}

.menuHeader {
  position: sticky;
  background-color: colorBackgroundTertiary;
  padding: spaceXSmall spaceNone;
  top: spaceNone;
  margin-bottom: spaceXSmall;
  z-index: calc(elevationCard/4);
  min-height: size50;
  max-height: size50;
}

.menuHeader::after {
  content: '';
  position: absolute;
  left: calc(spaceXSmall * -1);
  right: calc(spaceXSmall * -1);
  bottom: spaceNone;
  border-bottom: borderWidthPrimary solid colorBorderPrimary;
}

.menuFooter {
  position: sticky;
  background-color: colorBackgroundTertiary;
  padding: spaceXSmall spaceNone;
  bottom: spaceNone;
  margin-top: spaceXSmall;
  min-height: size50;
  max-height: size50;
}

.menuFooter::before {
  content: '';
  position: absolute;
  left: calc(spaceXSmall * -1);
  right: calc(spaceXSmall * -1);
  top: spaceNone;
  border-top: borderWidthPrimary solid colorBorderPrimary;
}