@workday/canvas-kit-css/menu.css

The parent module that contains all Workday Canvas Kit CSS components

.cnvs-menu-item {
  box-sizing: border-box;
  font-family: var(--cnvs-sys-font-family-default);
  font-weight: var(--cnvs-sys-font-weight-normal);
  line-height: var(--cnvs-sys-line-height-subtext-large);
  font-size: var(--cnvs-sys-font-size-subtext-large);
  letter-spacing: var(--cnvs-base-letter-spacing-150);
  display: flex;
  align-items: center;
  width: 100%;
  gap: var(--cnvs-sys-space-x4);
  padding: var(--cnvs-sys-space-x2) var(--cnvs-sys-space-x4);
  cursor: pointer;
  color: var(--cnvs-sys-color-fg-default);
  border-width: 0;
  text-align: start;
  transition: background-color 80ms,color 80ms;
  background-color: inherit;
  min-height: var(--cnvs-sys-space-x10);
  overflow-wrap: anywhere;
  --cnvs-system-icon-color: currentcolor;
}

.cnvs-menu-item :where([data-part="menu-item-selected"]) {
  transition: opacity 80ms linear;
  opacity: var(--cnvs-sys-opacity-zero);
}

.cnvs-menu-item:where(:has(span)) {
  display: flex;
}

.cnvs-menu-item:is([aria-selected=true]) {
  color: var(--cnvs-brand-primary-dark);
  background-color: var(--cnvs-brand-primary-lightest);
}

.cnvs-menu-item:is(.hover, :hover) {
  color: var(--cnvs-sys-color-fg-strong);
  background-color: var(--cnvs-brand-neutral-lightest);
}

.cnvs-menu-item:is(.focus, :focus) {
  color: var(--cnvs-brand-primary-accent);
  background-color: var(--cnvs-brand-primary-base);
  outline: 0.125rem solid transparent;
  outline-offset: -0.125rem;
}

.cnvs-menu-item:is(:disabled, [aria-disabled=true]) {
  color: var(--cnvs-sys-color-text-disabled);
  cursor: default;
}

.cnvs-menu-item:is(:disabled, [aria-disabled=true]):where(.focus, :focus) {
  background-color: var(--cnvs-brand-primary-light);
}

.cnvs-menu-item :where([data-part="menu-item-text"]) {
  flex-grow: 1;
  align-self: center;
}

.cnvs-menu-item :where([data-part="menu-icon-icon"]) {
  align-self: start;
}


.cnvs-menu-card {
  --cnvs-menu-card-min-width: 0.0625rem;
  --cnvs-menu-card-transform-origin-vertical: top;
  --cnvs-menu-card-transform-origin-horizontal: left;
  box-sizing: border-box;
  font-family: var(--cnvs-sys-font-family-default);
  font-weight: var(--cnvs-sys-font-weight-normal);
  line-height: var(--cnvs-sys-line-height-subtext-large);
  font-size: var(--cnvs-sys-font-size-subtext-large);
  letter-spacing: var(--cnvs-base-letter-spacing-150);
  color: var(--cnvs-base-palette-black-pepper-300);
  position: relative;
  display: flex;
  flex-direction: column;
  transition: transform ease-out 150ms;
  padding: var(--cnvs-sys-space-zero);
  max-width: calc(100vw - var(--cnvs-sys-space-x8));
  box-shadow: var(--cnvs-sys-depth-3);
  min-width: var(--cnvs-menu-card-min-width);
  transform-origin: var(--cnvs-menu-card-transform-origin-vertical) var(--cnvs-menu-card-transform-origin-horizontal);
}

.wd-no-animation .cnvs-menu-card {
  animation: none;
}


.cnvs-menu-list {
  box-sizing: border-box;
  background: var(--cnvs-base-palette-french-vanilla-100);
  border-radius: var(--cnvs-sys-shape-zero);
  padding: var(--cnvs-sys-space-zero);
  gap: var(--cnvs-sys-space-zero);
}


.cnvs-menu-list.orientation-vertical {
  flex-direction: column;
}


.cnvs-menu-list.orientation-horizontal {
  flex-direction: row;
}


.cnvs-menu-option {
  box-sizing: border-box;
}

.cnvs-menu-option:where([aria-selected=true]) :where([data-part="menu-item-selected"]) {
  opacity: var(--cnvs-sys-opacity-full);
}

.cnvs-menu-option:where([aria-selected=true]):where(.focus, :focus) {
  --cnvs-system-icon-color: var(--cnvs-brand-primary-accent);
  outline: none;
  background-color: var(--cnvs-brand-primary-base);
  color: var(--cnvs-system-icon-color);
}