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

The parent module that contains all Workday Canvas Kit CSS components

.cnvs-tab-item {
  box-sizing: border-box;
  font-family: var(--cnvs-sys-font-family-default),Helvetica Neue,Helvetica,Arial,sans-serif;
  font-weight: var(--cnvs-sys-font-weight-medium);
  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);
  border: none;
  background-color: transparent;
  flex: 0 0 auto;
  min-width: var(--cnvs-sys-space-zero);
  align-items: center;
  padding: var(--cnvs-sys-space-x3) var(--cnvs-sys-space-x4);
  height: 3.25rem;
  cursor: pointer;
  color: var(--cnvs-sys-color-fg-muted-default);
  position: relative;
  border-radius: var(--cnvs-sys-space-x1) var(--cnvs-sys-space-x1) var(--cnvs-sys-space-zero) var(--cnvs-sys-space-zero);
  transition: background 150ms ease,color 150ms ease;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  --cnvs-system-icon-color: currentColor;
}

.cnvs-tab-item:has(span) {
  display: flex;
  gap: var(--cnvs-sys-space-x2);
}

.cnvs-tab-item:hover, .cnvs-tab-item.hover, .cnvs-tab-item:focus-visible, .cnvs-tab-item.focus {
  background-color: var(--cnvs-sys-color-bg-alt-default);
  color: var(--cnvs-sys-color-fg-contrast-default);
  --cnvs-system-icon-color: var(--cnvs-sys-color-fg-contrast-default);
}

.cnvs-tab-item:focus-visible, .cnvs-tab-item.focus {
  outline: 0.125rem solid transparent;
  box-shadow: inset 0 0 0 2px var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1)),inset 0 0 0 2px var(--cnvs-sys-color-border-inverse, rgba(255,255,255,1));
  --cnvs-button-box-shadow-inner: var(--cnvs-sys-color-border-inverse);
  --cnvs-button-box-shadow-outer: var(--cnvs-brand-common-focus-outline);
  --cnvs-system-icon-color: var(--cnvs-sys-color-icon-strong);
}

.cnvs-tab-item:disabled, .cnvs-tab-item.disabled, .cnvs-tab-item[aria-disabled] {
  color: var(--cnvs-sys-color-text-disabled);
  --cnvs-system-icon-color: var(--cnvs-sys-color-fg-disabled);
}

.cnvs-tab-item:disabled:hover, .cnvs-tab-item.disabled:hover, .cnvs-tab-item[aria-disabled]:hover {
  cursor: auto;
  background-color: var(--cnvs-sys-color-bg-transparent-default);
  --cnvs-system-icon-color: var(--cnvs-sys-color-fg-disabled);
}

.cnvs-tab-item[aria-selected=true] {
  color: var(--cnvs-brand-primary-base);
  cursor: default;
  --cnvs-system-icon-color: var(--cnvs-brand-primary-base);
}

.cnvs-tab-item[aria-selected=true]:after {
  position: absolute;
  border-bottom: var(--cnvs-sys-space-x1) solid transparent;
  border-radius: var(--cnvs-sys-shape-x1) var(--cnvs-sys-shape-x1) var(--cnvs-sys-shape-zero) var(--cnvs-sys-shape-zero);
  background-color: var(--cnvs-brand-primary-base);
  bottom: var(--cnvs-sys-space-zero);
  content: '';
  left: var(--cnvs-sys-space-zero);
  margin-block-start: calc(calc(var(--cnvs-sys-space-x2) / var(--cnvs-sys-space-x1)) * -1);
  width: 100%;
}

.cnvs-tab-item[aria-selected=true]:hover, .cnvs-tab-item[aria-selected=true].hover, .cnvs-tab-item[aria-selected=true]:focus-visible, .cnvs-tab-item[aria-selected=true].focus {
  background-color: var(--cnvs-sys-color-bg-transparent-default);
  color: var(--cnvs-brand-primary-base);
}


.cnvs-tabs-list {
  box-sizing: border-box;
  display: flex;
  position: relative;
  border-bottom: 0.0625rem solid var(--cnvs-sys-color-border-divider);
  gap: var(--cnvs-sys-space-x3);
  padding-inline: var(--cnvs-sys-space-x6);
}


.cnvs-tabs-list.modality-touch {
  overflow-x: auto;
  padding-inline: var(--cnvs-sys-space-zero);
}

.cnvs-tabs-list.modality-touch[data-scroll-position="start"] {
  mask-image: linear-gradient(to right, white 80%, transparent);
}

.cnvs-tabs-list.modality-touch[data-scroll-position="middle"] {
  mask-image: linear-gradient(to left, white 80%, transparent),linear-gradient(to right, white 80%, transparent);
  mask-composite: intersect;
}

.cnvs-tabs-list.modality-touch[data-scroll-position="end"] {
  mask-image: linear-gradient(to left, white 80%, transparent);
}








.cnvs-tabs-overflow-button {
  box-sizing: border-box;
}

.cnvs-tabs-overflow-button:has([data-part="tabs-overflow-button-icon"]) {
  display: flex;
  gap: var(--cnvs-sys-space-zero);
}