/* src/accordion/Accordion.css */ .saltAccordion { border-top: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-separable-tertiary-borderColor); } .saltAccordion-error { border-top-color: var(--salt-status-error-borderColor); } .saltAccordion-warning { border-top-color: var(--salt-status-warning-borderColor); } .saltAccordion-success { border-top-color: var(--salt-status-success-borderColor); } .saltAccordion-disabled { border-top-color: var(--salt-separable-tertiary-borderColor); } /* src/accordion/AccordionGroup.css */ .saltAccordionGroup { border-bottom: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-separable-tertiary-borderColor); } /* src/accordion/AccordionHeader.css */ .saltAccordionHeader { display: flex; gap: var(--salt-spacing-100); padding: var(--salt-spacing-50) var(--salt-spacing-100); border: 0; width: 100%; min-height: calc(var(--salt-size-base) + var(--salt-spacing-100)); background: transparent; font-size: var(--salt-text-fontSize); line-height: var(--salt-text-lineHeight); font-family: var(--salt-text-fontFamily); color: var(--salt-content-primary-foreground); font-weight: var(--salt-text-fontWeight-strong); text-align: left; cursor: var(--salt-cursor-hover); box-sizing: border-box; -webkit-tap-highlight-color: transparent; } .saltAccordionHeader:focus-visible { outline: var(--salt-focused-outline); outline-offset: calc(-1 * var(--salt-focused-outlineWidth)); } .saltAccordionHeader-content { padding: var(--salt-spacing-75) 0; width: 100%; box-sizing: border-box; } .saltAccordionHeader .saltAccordionHeader-icon { height: var(--salt-size-base); } .saltAccordionHeader-error { background: var(--salt-status-error-background); } .saltAccordionHeader-error:focus-visible { outline-color: var(--salt-status-error-borderColor); } .saltAccordionHeader-warning { background: var(--salt-status-warning-background); } .saltAccordionHeader-warning:focus-visible { outline-color: var(--salt-status-warning-borderColor); } .saltAccordionHeader-success { background: var(--salt-status-success-background); } .saltAccordionHeader-success:focus-visible { outline-color: var(--salt-status-success-borderColor); } .saltAccordionHeader .saltAccordionHeader-statusIndicator { height: var(--salt-size-base); margin-left: auto; } .saltAccordionHeader:disabled { background: transparent; color: var(--salt-content-primary-foreground-disabled); cursor: var(--salt-cursor-disabled); } /* src/accordion/AccordionPanel.css */ .saltAccordionPanel { display: grid; transition: grid-template-rows var(--salt-duration-perceptible) ease-in-out, opacity var(--salt-duration-perceptible) ease-in-out, visibility var(--salt-duration-perceptible) ease-in-out; } .saltAccordionPanel[aria-hidden=true] { grid-template-rows: 0fr; opacity: 0; visibility: hidden; } .saltAccordionPanel { grid-template-rows: 1fr; opacity: 1; visibility: visible; } .saltAccordionPanel-inner { overflow: hidden; } .saltAccordionPanel-content { padding-left: var(--salt-spacing-100); padding-right: var(--salt-spacing-100); padding-top: var(--salt-spacing-100); padding-bottom: var(--salt-spacing-150); } .saltAccordionPanel-indentedContent { padding-left: calc(var(--salt-spacing-200) + var(--salt-size-icon)); } @media (prefers-reduced-motion: reduce) { .saltAccordionPanel { transition: none; } } /* src/avatar/Avatar.css */ .saltAvatar { --avatar-size-multiplier: var(--saltAvatar-size-multiplier, 1); --avatar-base-size: var(--salt-size-base); --avatar-base-fontSize: var(--saltAvatar-fontSize, var(--salt-text-notation-fontSize)); --avatar-container-size: calc(var(--avatar-base-size) * var(--avatar-size-multiplier)); --avatar-fontSize: calc(var(--avatar-base-fontSize) * var(--avatar-size-multiplier)); --saltIcon-size: calc(var(--avatar-container-size) / 2); } .saltAvatar { color: var(--saltAvatar-foreground, var(--salt-content-bold-foreground)); background: var(--saltAvatar-background, var(--avatar-background)); font-size: var(--avatar-fontSize); line-height: var(--saltAvatar-lineHeight, var(--salt-text-notation-lineHeight)); font-family: var(--salt-text-fontFamily); font-weight: var(--salt-text-fontWeight); width: var(--avatar-container-size); min-width: var(--avatar-container-size); height: var(--avatar-container-size); min-height: var(--avatar-container-size); border-radius: var(--saltAvatar-borderRadius, var(--salt-palette-corner-strongest, 50%)); display: flex; justify-content: center; align-items: center; overflow: hidden; user-select: none; } .saltAvatar-accent { --avatar-background: var(--salt-sentiment-accent-background); } .saltAvatar-category-1 { --avatar-background: var(--salt-category-1-bold-background); } .saltAvatar-category-2 { --avatar-background: var(--salt-category-2-bold-background); } .saltAvatar-category-3 { --avatar-background: var(--salt-category-3-bold-background); } .saltAvatar-category-4 { --avatar-background: var(--salt-category-4-bold-background); } .saltAvatar-category-5 { --avatar-background: var(--salt-category-5-bold-background); } .saltAvatar-category-6 { --avatar-background: var(--salt-category-6-bold-background); } .saltAvatar-category-7 { --avatar-background: var(--salt-category-7-bold-background); } .saltAvatar-category-8 { --avatar-background: var(--salt-category-8-bold-background); } .saltAvatar-category-9 { --avatar-background: var(--salt-category-9-bold-background); } .saltAvatar-category-10 { --avatar-background: var(--salt-category-10-bold-background); } .saltAvatar-category-11 { --avatar-background: var(--salt-category-11-bold-background); } .saltAvatar-category-12 { --avatar-background: var(--salt-category-12-bold-background); } .saltAvatar-category-13 { --avatar-background: var(--salt-category-13-bold-background); } .saltAvatar-category-14 { --avatar-background: var(--salt-category-14-bold-background); } .saltAvatar-category-15 { --avatar-background: var(--salt-category-15-bold-background); } .saltAvatar-category-16 { --avatar-background: var(--salt-category-16-bold-background); } .saltAvatar-category-17 { --avatar-background: var(--salt-category-17-bold-background); } .saltAvatar-category-18 { --avatar-background: var(--salt-category-18-bold-background); } .saltAvatar-category-19 { --avatar-background: var(--salt-category-19-bold-background); } .saltAvatar-category-20 { --avatar-background: var(--salt-category-20-bold-background); } .saltAvatar:has(img), .saltAvatar-withImage { --avatar-background: none; } .saltAvatar > img, .saltAvatar > svg:not(.saltIcon) { width: 100%; height: 100%; } /* src/badge/Badge.css */ .saltBadge { display: inline-flex; position: relative; flex-shrink: 0; vertical-align: middle; --badge-size: var(--salt-text-notation-lineHeight); } .saltBadge-badge { padding-left: var(--salt-spacing-50); padding-right: var(--salt-spacing-50); height: var(--badge-size); min-width: var(--badge-size); border-radius: var(--salt-palette-corner-strongest, 9999px); white-space: nowrap; z-index: var(--salt-zIndex-default); box-sizing: border-box; align-items: center; justify-content: center; display: inline-flex; margin: auto; font-size: var(--salt-text-notation-fontSize); font-weight: var(--salt-text-notation-fontWeight); font-family: var(--salt-text-fontFamily); line-height: var(--salt-text-notation-lineHeight); background: var(--salt-sentiment-accent-background); color: var(--salt-content-bold-foreground); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .saltBadge-topRight { position: absolute; right: var(--salt-spacing-100); transform: translateX(100%) translateY(calc(-1 * (var(--badge-size) / 2))); } .saltBadge-dotBadge { height: var(--salt-size-adornment); min-width: var(--salt-size-adornment); padding: 0; --badge-size: var(--salt-size-adornment); } .saltBadge-dotBadge.saltBadge-topRight { right: calc((var(--salt-size-adornment) / 2)); } /* src/banner/Banner.css */ .saltBanner { --banner-background: var(--salt-container-primary-background); background: var(--saltBanner-background, var(--banner-background)); border-color: var(--saltBanner-borderColor, var(--banner-borderColor)); border-width: var(--saltBanner-borderWidth, var(--salt-size-fixed-100)); border-style: var(--saltBanner-borderStyle, var(--salt-borderStyle-solid)); border-radius: var(--saltBanner-borderRadius, var(--salt-palette-corner, 0)); box-sizing: border-box; display: inline-flex; gap: var(--salt-spacing-75); padding: var(--saltBanner-padding, var(--salt-spacing-50) var(--salt-spacing-100)); width: 100%; min-height: calc(var(--salt-size-base) + var(--salt-spacing-100)); font-family: var(--salt-text-fontFamily); font-size: var(--salt-text-fontSize); font-weight: var(--salt-text-fontWeight); line-height: var(--salt-text-lineHeight); color: var(--salt-content-primary-foreground); } .saltBanner-icon.saltIcon { min-height: var(--salt-size-base); } .saltBanner-info { --banner-borderColor: var(--salt-status-info-borderColor); } .saltBanner-error { --banner-borderColor: var(--salt-status-error-borderColor); } .saltBanner-warning { --banner-borderColor: var(--salt-status-warning-borderColor); } .saltBanner-success { --banner-borderColor: var(--salt-status-success-borderColor); } .saltBanner-secondary.saltBanner-info { --banner-background: var(--salt-status-info-background); } .saltBanner-secondary.saltBanner-error { --banner-background: var(--salt-status-error-background); } .saltBanner-secondary.saltBanner-warning { --banner-background: var(--salt-status-warning-background); } .saltBanner-secondary.saltBanner-success { --banner-background: var(--salt-status-success-background); } /* src/banner/BannerActions.css */ .saltBannerActions { margin-bottom: auto; display: flex; gap: var(--salt-spacing-100); align-items: center; min-height: var(--salt-size-base); } /* src/banner/BannerContent.css */ .saltBannerContent { flex: 1 0; margin: var(--salt-spacing-75) 0; } /* src/border-item/BorderItem.css */ .saltBorderItem-sticky { position: sticky; overflow: auto; top: 0; left: 0; right: 0; bottom: 0; } /* src/button/Button.css */ .saltButton { --button-borderWidth: var(--salt-size-fixed-100); align-items: var(--saltButton-alignItems, center); appearance: none; background: var(--saltButton-background, var(--button-background)); border-color: var(--saltButton-borderColor, var(--button-borderColor, transparent)); border-style: var(--saltButton-borderStyle, solid); border-width: var(--saltButton-borderWidth, var(--button-borderWidth)); border-radius: var(--saltButton-borderRadius, var(--salt-palette-corner-weak, 0)); color: var(--saltButton-text-color, var(--button-text-color)); display: inline-flex; gap: var(--salt-spacing-50); justify-content: var(--saltButton-justifyContent, center); font-size: var(--saltButton-fontSize, var(--salt-text-fontSize)); font-family: var(--saltButton-fontFamily, var(--salt-text-action-fontFamily)); line-height: var(--saltButton-lineHeight, var(--salt-text-lineHeight)); letter-spacing: var(--saltButton-letterSpacing, var(--salt-text-action-letterSpacing)); text-transform: var(--saltButton-textTransform, var(--salt-text-action-textTransform)); padding: 0 var(--saltButton-padding, calc(var(--salt-spacing-100) - var(--saltButton-borderWidth, var(--button-borderWidth)))); margin: var(--saltButton-margin, 0); height: var(--saltButton-height, var(--salt-size-base)); min-width: var(--saltButton-minWidth, unset); position: relative; text-align: var(--saltButton-textAlign, var(--salt-text-action-textAlign)); text-decoration: none; transition: none; width: var(--saltButton-width, auto); -webkit-appearance: none; -webkit-tap-highlight-color: transparent; font-weight: var(--saltButton-fontWeight, var(--salt-text-action-fontWeight)); } .saltButton:focus-visible { outline-style: var(--salt-focused-outlineStyle); outline-width: var(--salt-focused-outlineWidth); outline-color: var(--salt-focused-outlineColor); outline-offset: var(--salt-focused-outlineOffset); background: var(--saltButton-background-hover, var(--button-background-hover)); color: var(--saltButton-text-color-hover, var(--button-text-color-hover)); border-color: var(--saltButton-borderColor-hover, var(--button-borderColor-hover)); } @media (hover: hover) { .saltButton:hover { background: var(--saltButton-background-hover, var(--button-background-hover)); color: var(--saltButton-text-color-hover, var(--button-text-color-hover)); border-color: var(--saltButton-borderColor-hover, var(--button-borderColor-hover)); cursor: var(--salt-cursor-hover); } } .saltButton.saltButton-active:focus-visible, .saltButton:focus-visible:active, .saltButton:active, .saltButton.saltButton-active { background: var(--saltButton-background-active, var(--button-background-active)); color: var(--saltButton-text-color-active, var(--button-text-color-active)); border-color: var(--saltButton-borderColor-active, var(--button-borderColor-active)); cursor: var(--salt-cursor-active); } .saltButton[aria-expanded=true][aria-haspopup=menu], .saltButton[aria-expanded=true][aria-haspopup=dialog] { background: var(--saltButton-background-active, var(--button-background-active)); color: var(--saltButton-text-color-active, var(--button-text-color-active)); border-color: var(--saltButton-borderColor-active, var(--button-borderColor-active)); } .saltButton:disabled, .saltButton.saltButton-disabled, .saltButton.saltButton-disabled:active, .saltButton.saltButton-disabled:focus-visible, .saltButton.saltButton-disabled:focus-visible:active, .saltButton.saltButton-disabled:hover { background: var(--saltButton-background-disabled, var(--button-background)); color: var(--saltButton-text-color-disabled, var(--button-text-color)); cursor: var(--saltButton-cursor-disabled, var(--salt-cursor-disabled)); border-color: var(--saltButton-borderColor-disabled, var(--button-borderColor)); opacity: 0.4; } .saltButton-accented.saltButton-solid { --button-text-color: var(--salt-actionable-accented-bold-foreground); --button-text-color-hover: var(--salt-actionable-accented-bold-foreground-hover); --button-text-color-active: var(--salt-actionable-accented-bold-foreground-active); --button-background: var(--salt-actionable-accented-bold-background); --button-background-active: var(--salt-actionable-accented-bold-background-active); --button-background-hover: var(--salt-actionable-accented-bold-background-hover); --button-borderColor: var(--salt-actionable-accented-bold-borderColor); --button-borderColor-hover: var(--salt-actionable-accented-bold-borderColor-hover); --button-borderColor-active: var(--salt-actionable-accented-bold-borderColor-active); } .saltButton-accented.saltButton-bordered { --button-text-color: var(--salt-actionable-accented-foreground); --button-text-color-hover: var(--salt-actionable-accented-foreground-hover); --button-text-color-active: var(--salt-actionable-accented-foreground-active); --button-background: var(--salt-actionable-accented-background); --button-background-hover: var(--salt-actionable-accented-background-hover); --button-background-active: var(--salt-actionable-accented-background-active); --button-borderColor: var(--salt-actionable-accented-borderColor); --button-borderColor-hover: var(--salt-actionable-accented-borderColor-hover); --button-borderColor-active: var(--salt-actionable-accented-borderColor-active); } .saltButton-accented.saltButton-transparent { --button-text-color: var(--salt-actionable-accented-subtle-foreground); --button-text-color-hover: var(--salt-actionable-accented-subtle-foreground-hover); --button-text-color-active: var(--salt-actionable-accented-subtle-foreground-active); --button-background: var(--salt-actionable-accented-subtle-background); --button-background-hover: var(--salt-actionable-accented-subtle-background-hover); --button-background-active: var(--salt-actionable-accented-subtle-background-active); --button-borderColor: var(--salt-actionable-accented-subtle-borderColor); --button-borderColor-hover: var(--salt-actionable-accented-subtle-borderColor-hover); --button-borderColor-active: var(--salt-actionable-accented-subtle-borderColor-active); } .saltButton-accented.saltButton-loading { --button-text-color: var(--salt-actionable-accented-background); --button-text-color-hover: var(--salt-actionable-accented-background); --button-text-color-active: var(--salt-actionable-accented-background); --button-background: var(--salt-actionable-accented-background); --button-background-hover: var(--salt-actionable-accented-background); --button-background-active: var(--salt-actionable-accented-background); --button-borderColor: var(--salt-actionable-accented-borderColor); --button-borderColor-hover: var(--salt-actionable-accented-borderColor); --button-borderColor-active: var(--salt-actionable-accented-borderColor); cursor: var(--salt-cursor-pending); } .saltButton-neutral.saltButton-solid { --button-text-color: var(--salt-actionable-bold-foreground); --button-text-color-hover: var(--salt-actionable-bold-foreground-hover); --button-text-color-active: var(--salt-actionable-bold-foreground-active); --button-background: var(--salt-actionable-bold-background); --button-background-hover: var(--salt-actionable-bold-background-hover); --button-background-active: var(--salt-actionable-bold-background-active); --button-borderColor: var(--salt-actionable-bold-borderColor); --button-borderColor-hover: var(--salt-actionable-bold-borderColor-hover); --button-borderColor-active: var(--salt-actionable-bold-borderColor-active); } .saltButton-neutral.saltButton-bordered { --button-text-color: var(--salt-actionable-foreground); --button-text-color-hover: var(--salt-actionable-foreground-hover); --button-text-color-active: var(--salt-actionable-foreground-active); --button-background: var(--salt-actionable-background); --button-background-hover: var(--salt-actionable-background-hover); --button-background-active: var(--salt-actionable-background-active); --button-borderColor: var(--salt-actionable-borderColor); --button-borderColor-hover: var(--salt-actionable-borderColor-hover); --button-borderColor-active: var(--salt-actionable-borderColor-active); } .saltButton-neutral.saltButton-transparent { --button-text-color: var(--salt-actionable-subtle-foreground); --button-text-color-hover: var(--salt-actionable-subtle-foreground-hover); --button-text-color-active: var(--salt-actionable-subtle-foreground-active); --button-background: var(--salt-actionable-subtle-background); --button-background-hover: var(--salt-actionable-subtle-background-hover); --button-background-active: var(--salt-actionable-subtle-background-active); --button-borderColor: var(--salt-actionable-subtle-borderColor); --button-borderColor-hover: var(--salt-actionable-subtle-borderColor-hover); --button-borderColor-active: var(--salt-actionable-subtle-borderColor-active); } .saltButton-neutral.saltButton-loading { --button-text-color: var(--salt-actionable-background); --button-text-color-hover: var(--salt-actionable-background); --button-text-color-active: var(--salt-actionable-background); --button-background: var(--salt-actionable-background); --button-background-hover: var(--salt-actionable-background); --button-background-active: var(--salt-actionable-background); --button-borderColor: var(--salt-actionable-borderColor); --button-borderColor-hover: var(--salt-actionable-borderColor); --button-borderColor-active: var(--salt-actionable-borderColor); cursor: var(--salt-cursor-pending); } .saltButton-negative.saltButton-solid { --button-text-color: var(--salt-actionable-negative-bold-foreground); --button-text-color-hover: var(--salt-actionable-negative-bold-foreground-hover); --button-text-color-active: var(--salt-actionable-negative-bold-foreground-active); --button-background: var(--salt-actionable-negative-bold-background); --button-background-hover: var(--salt-actionable-negative-bold-background-hover); --button-background-active: var(--salt-actionable-negative-bold-background-active); --button-borderColor: var(--salt-actionable-negative-bold-borderColor); --button-borderColor-hover: var(--salt-actionable-negative-bold-borderColor-hover); --button-borderColor-active: var(--salt-actionable-negative-bold-borderColor-active); } .saltButton-negative.saltButton-bordered { --button-text-color: var(--salt-actionable-negative-foreground); --button-text-color-hover: var(--salt-actionable-negative-foreground-hover); --button-text-color-active: var(--salt-actionable-negative-foreground-active); --button-background: var(--salt-actionable-negative-background); --button-background-hover: var(--salt-actionable-negative-background-hover); --button-background-active: var(--salt-actionable-negative-background-active); --button-borderColor: var(--salt-actionable-negative-borderColor); --button-borderColor-hover: var(--salt-actionable-negative-borderColor-hover); --button-borderColor-active: var(--salt-actionable-negative-borderColor-active); } .saltButton-negative.saltButton-transparent { --button-text-color: var(--salt-actionable-negative-subtle-foreground); --button-text-color-hover: var(--salt-actionable-negative-subtle-foreground-hover); --button-text-color-active: var(--salt-actionable-negative-subtle-foreground-active); --button-background: var(--salt-actionable-negative-subtle-background); --button-background-hover: var(--salt-actionable-negative-subtle-background-hover); --button-background-active: var(--salt-actionable-negative-subtle-background-active); --button-borderColor: var(--salt-actionable-negative-subtle-borderColor); --button-borderColor-hover: var(--salt-actionable-negative-subtle-borderColor-hover); --button-borderColor-active: var(--salt-actionable-negative-subtle-borderColor-active); } .saltButton-negative.saltButton-loading { --button-text-color: var(--salt-actionable-negative-background); --button-text-color-hover: var(--salt-actionable-negative-background); --button-text-color-active: var(--salt-actionable-negative-background); --button-background: var(--salt-actionable-negative-background); --button-background-hover: var(--salt-actionable-negative-background); --button-background-active: var(--salt-actionable-negative-background); --button-borderColor: var(--salt-actionable-negative-borderColor); --button-borderColor-hover: var(--salt-actionable-negative-borderColor); --button-borderColor-active: var(--salt-actionable-negative-borderColor); cursor: var(--salt-cursor-pending); } .saltButton-positive.saltButton-solid { --button-text-color: var(--salt-actionable-positive-bold-foreground); --button-text-color-hover: var(--salt-actionable-positive-bold-foreground-hover); --button-text-color-active: var(--salt-actionable-positive-bold-foreground-active); --button-background: var(--salt-actionable-positive-bold-background); --button-background-hover: var(--salt-actionable-positive-bold-background-hover); --button-background-active: var(--salt-actionable-positive-bold-background-active); --button-borderColor: var(--salt-actionable-positive-bold-borderColor); --button-borderColor-hover: var(--salt-actionable-positive-bold-borderColor-hover); --button-borderColor-active: var(--salt-actionable-positive-bold-borderColor-active); } .saltButton-positive.saltButton-bordered { --button-text-color: var(--salt-actionable-positive-foreground); --button-text-color-hover: var(--salt-actionable-positive-foreground-hover); --button-text-color-active: var(--salt-actionable-positive-foreground-active); --button-background: var(--salt-actionable-positive-background); --button-background-hover: var(--salt-actionable-positive-background-hover); --button-background-active: var(--salt-actionable-positive-background-active); --button-borderColor: var(--salt-actionable-positive-borderColor); --button-borderColor-hover: var(--salt-actionable-positive-borderColor-hover); --button-borderColor-active: var(--salt-actionable-positive-borderColor-active); } .saltButton-positive.saltButton-transparent { --button-text-color: var(--salt-actionable-positive-subtle-foreground); --button-text-color-hover: var(--salt-actionable-positive-subtle-foreground-hover); --button-text-color-active: var(--salt-actionable-positive-subtle-foreground-active); --button-background: var(--salt-actionable-positive-subtle-background); --button-background-hover: var(--salt-actionable-positive-subtle-background-hover); --button-background-active: var(--salt-actionable-positive-subtle-background-active); --button-borderColor: var(--salt-actionable-positive-subtle-borderColor); --button-borderColor-hover: var(--salt-actionable-positive-subtle-borderColor-hover); --button-borderColor-active: var(--salt-actionable-positive-subtle-borderColor-active); } .saltButton-positive.saltButton-loading { --button-text-color: var(--salt-actionable-positive-background); --button-text-color-hover: var(--salt-actionable-positive-background); --button-text-color-active: var(--salt-actionable-positive-background); --button-background: var(--salt-actionable-positive-background); --button-background-hover: var(--salt-actionable-positive-background); --button-background-active: var(--salt-actionable-positive-background); --button-borderColor: var(--salt-actionable-positive-borderColor); --button-borderColor-hover: var(--salt-actionable-positive-borderColor); --button-borderColor-active: var(--salt-actionable-positive-borderColor); cursor: var(--salt-cursor-pending); } .saltButton-caution.saltButton-solid { --button-text-color: var(--salt-actionable-caution-bold-foreground); --button-text-color-hover: var(--salt-actionable-caution-bold-foreground-hover); --button-text-color-active: var(--salt-actionable-caution-bold-foreground-active); --button-background: var(--salt-actionable-caution-bold-background); --button-background-hover: var(--salt-actionable-caution-bold-background-hover); --button-background-active: var(--salt-actionable-caution-bold-background-active); --button-borderColor: var(--salt-actionable-caution-bold-borderColor); --button-borderColor-hover: var(--salt-actionable-caution-bold-borderColor-hover); --button-borderColor-active: var(--salt-actionable-caution-bold-borderColor-active); } .saltButton-caution.saltButton-bordered { --button-text-color: var(--salt-actionable-caution-foreground); --button-text-color-hover: var(--salt-actionable-caution-foreground-hover); --button-text-color-active: var(--salt-actionable-caution-foreground-active); --button-background: var(--salt-actionable-caution-background); --button-background-hover: var(--salt-actionable-caution-background-hover); --button-background-active: var(--salt-actionable-caution-background-active); --button-borderColor: var(--salt-actionable-caution-borderColor); --button-borderColor-hover: var(--salt-actionable-caution-borderColor-hover); --button-borderColor-active: var(--salt-actionable-caution-borderColor-active); } .saltButton-caution.saltButton-transparent { --button-text-color: var(--salt-actionable-caution-subtle-foreground); --button-text-color-hover: var(--salt-actionable-caution-subtle-foreground-hover); --button-text-color-active: var(--salt-actionable-caution-subtle-foreground-active); --button-background: var(--salt-actionable-caution-subtle-background); --button-background-hover: var(--salt-actionable-caution-subtle-background-hover); --button-background-active: var(--salt-actionable-caution-subtle-background-active); --button-borderColor: var(--salt-actionable-caution-subtle-borderColor); --button-borderColor-hover: var(--salt-actionable-caution-subtle-borderColor-hover); --button-borderColor-active: var(--salt-actionable-caution-subtle-borderColor-active); } .saltButton-caution.saltButton-loading { --button-text-color: var(--salt-actionable-caution-background); --button-text-color-hover: var(--salt-actionable-caution-background); --button-text-color-active: var(--salt-actionable-caution-background); --button-background: var(--salt-actionable-caution-background); --button-background-hover: var(--salt-actionable-caution-background); --button-background-active: var(--salt-actionable-caution-background); --button-borderColor: var(--salt-actionable-caution-borderColor); --button-borderColor-hover: var(--salt-actionable-caution-borderColor); --button-borderColor-active: var(--salt-actionable-caution-borderColor); cursor: var(--salt-cursor-pending); } .saltButton strong { font-weight: var(--salt-text-action-fontWeight-strong); } .saltButton small { font-size: inherit; font-weight: var(--salt-text-action-fontWeight-small); } .saltButton-spinner { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; } .saltButton-sr-only { position: fixed; top: 0; left: 0; transform: translate(-100%, -100%); } /* src/card/Card.css */ .saltCard { border-width: var(--saltCard-borderWidth, var(--salt-size-fixed-100)); border-style: var(--salt-borderStyle-solid); padding: var(--saltCard-padding, var(--salt-spacing-200)); position: relative; box-shadow: var(--salt-overlayable-shadow); transition: box-shadow var(--salt-duration-instant) ease-in-out; box-sizing: border-box; border-radius: var(--saltCard-borderRadius, var(--salt-palette-corner, 0)); overflow: hidden; --card-accent-color: var(--salt-sentiment-accent-background); } .saltCard-primary { background: var(--saltCard-background, var(--salt-container-primary-background)); border-color: var(--salt-container-primary-borderColor); } .saltCard-secondary { background: var(--saltCard-background, var(--salt-container-secondary-background)); border-color: var(--salt-container-secondary-borderColor); } .saltCard-tertiary { background: var(--saltCard-background, var(--salt-container-tertiary-background)); border-color: var(--salt-container-tertiary-borderColor); } .saltCard-ghost { background: var(--saltCard-background, var(--salt-container-ghost-background)); border-color: var(--salt-container-ghost-borderColor); } .saltCard-accent::after { content: ""; position: absolute; background-color: var(--saltCard-accent-color, var(--card-accent-color)); } .saltCard-accentBottom::after { left: calc(-1 * var(--salt-size-fixed-100)); bottom: calc(-1 * var(--salt-size-fixed-100)); height: var(--salt-size-bar); width: calc(100% + var(--salt-size-fixed-200)); } .saltCard-accentLeft::after { left: calc(-1 * var(--salt-size-fixed-100)); top: calc(-1 * var(--salt-size-fixed-100)); height: calc(100% + var(--salt-size-fixed-200)); width: var(--salt-size-bar); } .saltCard-accentTop::after { left: calc(-1 * var(--salt-size-fixed-100)); top: calc(-1 * var(--salt-size-fixed-100)); height: var(--salt-size-bar); width: calc(100% + var(--salt-size-fixed-200)); } .saltCard-accentRight::after { right: calc(-1 * var(--salt-size-fixed-100)); top: calc(-1 * var(--salt-size-fixed-100)); height: calc(100% + var(--salt-size-fixed-200)); width: var(--salt-size-bar); } .saltCard-interactable { display: block; transition: none; } a:focus .saltCard-interactable, .saltCard-interactable:hover { box-shadow: var(--saltCard-boxShadow-hover, var(--salt-overlayable-shadow-hover)); cursor: var(--saltCard-cursor-hover, var(--salt-cursor-hover)); border-color: var(--salt-actionable-accented-borderColor-hover); position: relative; } @media (hover: hover) { .saltCard-hoverable:hover { box-shadow: var(--saltCard-boxShadow-hover, var(--salt-overlayable-shadow-hover)); border-color: var(--salt-actionable-accented-borderColor-hover); } } .saltCard-interactable:active { border-color: var(--salt-actionable-accented-borderColor-active); box-shadow: var(--saltCard-boxShadow-active, var(--salt-overlayable-shadow-hover)); outline: var(--salt-focused-outline); outline-offset: var(--salt-focused-outlineOffset); } a:focus .saltCard-interactable.saltCard-disabled, .saltCard-interactable.saltCard-disabled:hover, .saltCard-interactable.saltCard-disabled:active { box-shadow: var(--saltCard-boxShadow-disabled, var(--salt-overlayable-shadow)); } .saltCard-disabled, .saltCard-disabled.saltCard-interactable, a:focus .saltCard-interactable.saltCard-disabled { border-color: var(--salt-container-primary-borderColor-disabled); color: var(--saltCard-color-disabled, var(--salt-content-primary-foreground-disabled)); cursor: var(--saltCard-cursor-disabled, var(--salt-cursor-disabled)); outline: none; } .saltCard-disabled div { pointer-events: none; } /* src/checkbox/Checkbox.css */ .saltCheckbox { display: inline-flex; width: fit-content; gap: var(--salt-spacing-100); position: relative; cursor: var(--salt-cursor-hover); font-size: var(--salt-text-fontSize); line-height: var(--salt-text-lineHeight); font-family: var(--salt-text-fontFamily); font-weight: var(--salt-text-fontWeight); } .saltCheckbox-disabled { color: var(--salt-content-primary-foreground); cursor: var(--salt-cursor-disabled); opacity: 0.4; } .saltCheckbox-readOnly { color: var(--salt-content-primary-foreground); cursor: var(--salt-cursor-readonly); } .saltCheckbox-input, .saltCheckboxIcon { margin: calc((var(--salt-text-lineHeight) - var(--salt-size-selectable)) / 2) 0; box-sizing: border-box; } .saltCheckbox-input:focus-visible + .saltCheckboxIcon { outline-offset: var(--salt-spacing-fixed-100); outline: var(--saltCheckbox-outline, var(--salt-focused-outline)); border-color: var(--salt-selectable-borderColor-hover); color: var(--salt-selectable-foreground-hover); clip-path: unset; } .saltCheckbox-input:focus-visible + .saltCheckboxIcon-checked { border-color: var(--salt-selectable-borderColor-selected); color: var(--salt-selectable-foreground-selected); } .saltCheckbox-error .saltCheckbox-input:focus-visible + .saltCheckboxIcon { outline-color: var(--salt-status-error-foreground-decorative); border-color: var(--salt-status-error-borderColor); color: var(--salt-status-error-foreground-decorative); } .saltCheckbox-warning .saltCheckbox-input:focus-visible + .saltCheckboxIcon { outline-color: var(--salt-status-warning-foreground-decorative); border-color: var(--salt-status-warning-borderColor); color: var(--salt-status-warning-foreground-decorative); } .saltCheckbox-input { cursor: inherit; opacity: 0; padding: 0; position: absolute; z-index: var(--salt-zIndex-default); } /* src/checkbox/CheckboxGroup.css */ .saltCheckboxGroup { border: none; margin: 0; padding: 0; } .saltCheckboxGroup-horizontal { display: flex; gap: var(--salt-spacing-200); flex-direction: row; flex-wrap: wrap; } .saltCheckboxGroup-vertical { display: flex; gap: var(--salt-spacing-100); flex-direction: column; } .saltCheckboxGroup-noWrap { flex-wrap: nowrap; } .saltCheckboxGroup-noWrap .saltCheckbox { white-space: break-spaces; } .saltFormField-labelLeft .saltCheckboxGroup, .saltFormField-labelRight .saltCheckboxGroup { padding-top: var(--salt-spacing-100); } /* src/checkbox/CheckboxIcon.css */ .saltCheckboxIcon { --checkbox-size: var(--salt-size-selectable); width: var(--checkbox-size); min-width: var(--checkbox-size); height: var(--checkbox-size); min-height: var(--checkbox-size); border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-selectable-borderColor); border-radius: var(--salt-palette-corner-weaker, 0); color: var(--salt-selectable-foreground); background: var(--salt-container-primary-background); position: relative; --saltIcon-size: 100%; display: flex; clip-path: border-box; box-sizing: border-box; } .saltCheckboxIcon-checked, .saltCheckbox:hover .saltCheckboxIcon-checked { border-color: var(--salt-selectable-borderColor-selected); color: var(--salt-selectable-foreground-selected); } .saltCheckbox:hover .saltCheckboxIcon, .saltCheckbox:hover .saltCheckboxIcon-indeterminate { border-color: var(--salt-selectable-borderColor-hover); color: var(--salt-selectable-foreground-hover); } .saltCheckboxIcon-checked.saltCheckboxIcon-indeterminate { border-color: var(--salt-selectable-borderColor); color: var(--salt-selectable-foreground); } .saltCheckboxIcon-disabled, .saltCheckbox:hover .saltCheckboxIcon-disabled, .saltCheckboxIcon-disabled.saltCheckboxIcon-indeterminate, .saltCheckbox:hover .saltCheckboxIcon-disabled.saltCheckboxIcon-indeterminate { opacity: 0.4; border-color: var(--salt-selectable-borderColor); background: var(--salt-container-primary-background); color: var(--salt-selectable-foreground); } .saltCheckboxIcon-checked.saltCheckboxIcon-disabled, .saltCheckbox:hover .saltCheckboxIcon-checked.saltCheckboxIcon-disabled { border-color: var(--salt-selectable-borderColor-selected); color: var(--salt-selectable-foreground-selected); } .saltCheckboxIcon-indeterminate::before { content: ""; position: absolute; top: 50%; left: 50%; width: calc(var(--checkbox-size) - 6px); height: 2px; background: currentColor; transform: translate(-50%, -50%); } .saltCheckboxIcon-error, .saltCheckbox:hover .saltCheckboxIcon-error { color: var(--salt-status-error-foreground-decorative); border-color: var(--salt-status-error-borderColor); outline-color: var(--salt-status-error-foreground-decorative); } .saltCheckboxIcon-warning, .saltCheckbox:hover .saltCheckboxIcon-warning { color: var(--salt-status-warning-foreground-decorative); border-color: var(--salt-status-warning-borderColor); outline-color: var(--salt-status-warning-foreground-decorative); } .saltCheckboxIcon-readOnly, .saltCheckbox:hover .saltCheckboxIcon-readOnly, .saltCheckbox-input:focus-visible + .saltCheckboxIcon-readOnly { border-color: var(--salt-selectable-borderColor-readonly); border-style: var(--salt-borderStyle-dashed); color: var(--salt-content-primary-foreground); } .saltCheckboxIcon > svg { position: absolute; transform: scale(1.01); } /* src/collapsible/CollapsiblePanel.css */ .saltCollapsiblePanel { display: grid; transition: grid-template-rows var(--salt-duration-perceptible) ease-in-out, opacity var(--salt-duration-perceptible) ease-in-out, visibility var(--salt-duration-perceptible) ease-in-out; } .saltCollapsiblePanel[aria-hidden=true] { grid-template-rows: 0fr; opacity: 0; visibility: hidden; } .saltCollapsiblePanel { grid-template-rows: 1fr; opacity: 1; visibility: visible; } .saltCollapsiblePanel-inner { overflow: hidden; } /* src/dialog/Dialog.css */ .saltDialog { position: fixed; left: 0; right: 0; top: 0; bottom: 0; margin: auto; display: flex; flex-direction: column; padding-top: var(--salt-spacing-300); padding-bottom: var(--salt-spacing-300); background: var(--salt-container-primary-background); box-shadow: var(--salt-overlayable-shadow-modal); overflow-y: auto; z-index: var(--salt-zIndex-modal); height: min-content; border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-separable-tertiary-borderColor); box-sizing: border-box; border-radius: var(--salt-palette-corner, 0); } .saltDialog-info { border-color: var(--salt-status-info-borderColor); } .saltDialog-error { border-color: var(--salt-status-error-borderColor); } .saltDialog-warning { border-color: var(--salt-status-warning-borderColor); } .saltDialog-success { border-color: var(--salt-status-success-borderColor); } .saltDialog.saltDialog-enterAnimation { animation: var(--salt-animation-fade-in-center); } .saltDialog.saltDialog-exitAnimation { animation: var(--salt-animation-fade-out-back); } .saltDialog-small-xs { width: 100%; max-height: 48%; } .saltDialog-small-sm { width: 56%; max-height: 48%; } .saltDialog-small-md { width: 36%; max-height: 48%; } .saltDialog-small-lg { width: 24%; max-height: 48%; } .saltDialog-small-xl { width: 24%; max-height: 48%; } .saltDialog-medium-xs { width: 100%; max-height: 72%; } .saltDialog-medium-sm { width: 84%; max-height: 72%; } .saltDialog-medium-md { width: 68%; max-height: 72%; } .saltDialog-medium-lg { width: 48%; max-height: 72%; } .saltDialog-medium-xl { width: 48%; max-height: 72%; } .saltDialog-large-xs { width: 100%; max-height: 84%; } .saltDialog-large-sm { width: 96%; max-height: 84%; } .saltDialog-large-md { width: 84%; max-height: 84%; } .saltDialog-large-lg { width: 72%; max-height: 84%; } .saltDialog-large-xl { width: 72%; max-height: 84%; } /* src/dialog/DialogActions.css */ .saltDialogActions { padding: var(--salt-spacing-300); padding-bottom: 0; display: flex; justify-content: flex-end; gap: var(--salt-spacing-100); } /* src/dialog/DialogCloseButton.css */ .saltButton.saltDialogCloseButton { position: absolute; top: 0; right: 0; } /* src/dialog/DialogContent.css */ .saltDialogContent { color: var(--salt-content-primary-foreground); min-height: var(--salt-text-lineHeight); background: var(--salt-container-primary-background); margin-left: var(--salt-spacing-200); margin-right: var(--salt-spacing-300); padding-left: var(--salt-spacing-100); flex: 1 1 auto; position: relative; display: flex; box-sizing: border-box; } .saltDialogContent-inner { overflow-y: auto; border-top: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) transparent; border-bottom: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) transparent; max-height: inherit; flex: 1; box-sizing: border-box; } .saltDialogContent-overflow { padding-right: var(--salt-spacing-100); } .saltDialogContent-scrollTop.saltDialogContent-inner { border-top-color: var(--salt-separable-tertiary-borderColor); } .saltDialogContent-scrollBottom.saltDialogContent-inner { border-bottom-color: var(--salt-separable-tertiary-borderColor); } /* src/dialog/DialogHeader.css */ .saltDialogHeader { padding-bottom: var(--salt-spacing-300); padding-left: var(--salt-spacing-300); padding-right: var(--salt-spacing-300); display: flex; flex-direction: row; gap: var(--salt-spacing-100); box-sizing: border-box; } .saltDialogHeader-header { margin: 0; } .saltDialogHeader-container { flex-grow: 1; margin: 0; display: flex; flex-direction: column; gap: var(--salt-spacing-50); padding-top: calc((var(--salt-size-base) - var(--salt-text-h2-lineHeight)) / 2); align-items: flex-start; min-width: 0; word-break: break-word; } .saltDialogHeader-header > .saltText { margin: 0; } .saltDialogHeader-actionsContainer { align-self: flex-start; } .saltDialogHeader .saltStatusIndicator.saltIcon { --icon-size: var(--salt-text-h2-lineHeight); padding-top: calc((var(--salt-size-base) - var(--salt-text-h2-lineHeight)) / 2); } .saltDialogHeader-withAccent { position: relative; } .saltDialogHeader-withAccent::before { content: ""; position: absolute; top: 0; left: 0; bottom: var(--salt-spacing-300); width: var(--salt-size-bar); background: var(--salt-sentiment-accent-background); } /* src/divider/Divider.css */ .saltDivider-primary { --divider-background: var(--salt-separable-primary-borderColor); } .saltDivider-secondary { --divider-background: var(--salt-separable-secondary-borderColor); } .saltDivider-tertiary { --divider-background: var(--salt-separable-tertiary-borderColor); } .saltDivider { background: var(--divider-background); align-self: stretch; margin: 0; border: none; } .saltDivider-horizontal { height: var(--salt-size-fixed-100); } .saltDivider-vertical { width: var(--salt-size-fixed-100); height: auto; } /* src/drawer/Drawer.css */ .saltDrawer { background: var(--drawer-background); display: flex; flex-direction: column; max-height: 100%; max-width: 100%; overflow: auto; padding: var(--salt-spacing-300); box-shadow: var(--salt-overlayable-shadow-modal); z-index: var(--salt-zIndex-drawer); position: fixed; top: 0; box-sizing: border-box; } .saltDrawer-primary { --drawer-background: var(--salt-container-primary-background); } .saltDrawer-secondary { --drawer-background: var(--salt-container-secondary-background); } .saltDrawer-tertiary { --drawer-background: var(--salt-container-tertiary-background); } .saltDrawer-top { left: 0; right: 0; bottom: auto; } .saltDrawer-top.saltDrawer-enterAnimation { animation: var(--salt-animation-slide-in-bottom); } .saltDrawer-top.saltDrawer-exitAnimation { animation: var(--salt-animation-slide-out-bottom); } .saltDrawer-right { left: auto; right: 0; height: 100%; } .saltDrawer-right.saltDrawer-enterAnimation { animation: var(--salt-animation-slide-in-right); } .saltDrawer-right.saltDrawer-exitAnimation { animation: var(--salt-animation-slide-out-right); } .saltDrawer-left { left: 0; right: auto; height: 100%; } .saltDrawer-left.saltDrawer-enterAnimation { animation: var(--salt-animation-slide-in-left); } .saltDrawer-left.saltDrawer-exitAnimation { animation: var(--salt-animation-slide-out-left); } .saltDrawer-bottom { left: 0; right: 0; bottom: 0; top: auto; } .saltDrawer-bottom.saltDrawer-enterAnimation { animation: var(--salt-animation-slide-in-top); } .saltDrawer-bottom.saltDrawer-exitAnimation { animation: var(--salt-animation-slide-out-top); } /* src/drawer/DrawerCloseButton.css */ .saltDrawerCloseButton-container { position: relative; display: flex; justify-content: flex-end; } .saltButton-secondary.saltDrawerCloseButton { position: fixed; margin-top: calc(var(--salt-spacing-300) * -1); margin-right: calc(var(--salt-spacing-300) * -1); } /* src/dropdown/Dropdown.css */ .saltDropdown { all: unset; box-sizing: border-box; min-width: 4em; width: 100%; background: var(--dropdown-background); min-height: var(--salt-size-base); border-radius: var(--salt-palette-corner-weak, 0); display: inline-flex; align-items: center; padding: 0 var(--salt-spacing-100); color: var(--dropdown-color); font-family: var(--salt-text-fontFamily); font-size: var(--salt-text-fontSize); font-weight: var(--salt-text-fontWeight); line-height: var(--salt-text-lineHeight); letter-spacing: var(--salt-text-letterSpacing); position: relative; overflow: hidden; } .saltDropdown:hover { cursor: var(--salt-cursor-hover); } .saltDropdown-bordered.saltDropdown { border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--dropdown-borderColor); } .saltDropdown-bordered.saltDropdown:hover { border-style: var(--salt-borderStyle-solid); border-color: var(--dropdown-borderColor-hover); } .saltDropdown-bordered.saltDropdown:focus, .saltDropdown-bordered.saltDropdown:focus:hover { border-style: var(--salt-borderStyle-solid); border-color: var(--dropdown-borderColor-active); } .saltDropdown-bordered.saltDropdown[aria-readonly=true], .saltDropdown-bordered.saltDropdown[aria-readonly=true]:hover { border-style: var(--salt-borderStyle-solid); border-color: var(--salt-editable-borderColor-readonly); } .saltDropdown-bordered.saltDropdown-disabled, .saltDropdown-bordered.saltDropdown-disabled:hover { border-style: var(--salt-borderStyle-solid); border-color: var(--salt-editable-borderColor-disabled); } .saltDropdown-activationIndicator { left: 0; bottom: 0; width: 100%; position: absolute; border-bottom: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--dropdown-borderColor); } .saltDropdown:hover .saltDropdown-activationIndicator { border-bottom-style: var(--salt-borderStyle-solid); border-bottom-color: var(--dropdown-borderColor-hover); } .saltDropdown:focus .saltDropdown-activationIndicator, .saltDropdown:focus:hover .saltDropdown-activationIndicator { border-bottom: var(--salt-size-fixed-200) var(--salt-borderStyle-solid) var(--dropdown-borderColor-active); } .saltDropdown[aria-readonly=true] .saltDropdown-activationIndicator, .saltDropdown[aria-readonly=true]:hover .saltDropdown-activationIndicator { border-bottom-style: var(--salt-borderStyle-solid); border-bottom-color: var(--salt-editable-borderColor-readonly); } .saltDropdown-disabled .saltDropdown-activationIndicator, .saltDropdown-disabled:hover .saltDropdown-activationIndicator { border-bottom-style: var(--salt-borderStyle-solid); border-bottom-color: var(--salt-editable-borderColor-disabled); } .saltDropdown-bordered .saltDropdown-activationIndicator, .saltDropdown-bordered.saltDropdown[aria-readonly=true] .saltDropdown-activationIndicator, .saltDropdown-bordered.saltDropdown-disabled:hover .saltDropdown-activationIndicator { border-bottom-width: 0; } .saltDropdown-bordered.saltDropdown:focus .saltDropdown-activationIndicator { border-bottom-width: var(--salt-size-fixed-100); } .saltDropdown-primary { --dropdown-color: var(--salt-content-primary-foreground); --dropdown-background: var(--salt-editable-primary-background); --dropdown-background-disabled: var(--salt-editable-primary-background-disabled); --dropdown-background-readonly: var(--salt-editable-background-readonly); --dropdown-borderColor: var(--salt-editable-borderColor); --dropdown-borderColor-active: var(--salt-editable-borderColor-active); --dropdown-borderColor-hover: var(--salt-editable-borderColor-hover); --dropdown-outlineColor: var(--salt-focused-outlineColor); } .saltDropdown-secondary { --dropdown-color: var(--salt-content-primary-foreground); --dropdown-background: var(--salt-editable-secondary-background); --dropdown-background-disabled: var(--salt-editable-secondary-background-disabled); --dropdown-background-readonly: var(--salt-editable-background-readonly); --dropdown-borderColor: var(--salt-editable-borderColor); --dropdown-borderColor-active: var(--salt-editable-borderColor-active); --dropdown-borderColor-hover: var(--salt-editable-borderColor-hover); --dropdown-outlineColor: var(--salt-focused-outlineColor); } .saltDropdown-tertiary { --dropdown-color: var(--salt-content-primary-foreground); --dropdown-background: var(--salt-editable-tertiary-background); --dropdown-background-disabled: var(--salt-editable-tertiary-background-disabled); --dropdown-background-readonly: var(--salt-editable-background-readonly); --dropdown-borderColor: var(--salt-editable-borderColor); --dropdown-borderColor-active: var(--salt-editable-borderColor-active); --dropdown-borderColor-hover: var(--salt-editable-borderColor-hover); --dropdown-outlineColor: var(--salt-focused-outlineColor); } .saltDropdown-error { --dropdown-color: var(--salt-content-primary-foreground); --dropdown-background: var(--salt-status-error-background); --dropdown-background-readonly: var(--salt-status-error-background); --dropdown-borderColor: var(--salt-status-error-borderColor); --dropdown-borderColor-active: var(--salt-status-error-borderColor); --dropdown-borderColor-hover: var(--salt-status-error-borderColor); --dropdown-outlineColor: var(--salt-status-error-borderColor); } .saltDropdown-warning { --dropdown-color: var(--salt-content-primary-foreground); --dropdown-background: var(--salt-status-warning-background); --dropdown-background-readonly: var(--salt-status-warning-background); --dropdown-borderColor: var(--salt-status-warning-borderColor); --dropdown-borderColor-active: var(--salt-status-warning-borderColor); --dropdown-borderColor-hover: var(--salt-status-warning-borderColor); --dropdown-outlineColor: var(--salt-status-warning-borderColor); } .saltDropdown-success { --dropdown-color: var(--salt-content-primary-foreground); --dropdown-background: var(--salt-status-success-background); --dropdown-background-readonly: var(--salt-status-success-background); --dropdown-borderColor: var(--salt-status-success-borderColor); --dropdown-borderColor-active: var(--salt-status-success-borderColor); --dropdown-borderColor-hover: var(--salt-status-success-borderColor); --dropdown-outlineColor: var(--salt-status-success-borderColor); } .saltDropdown:focus, .saltDropdown:focus:hover { cursor: var(--salt-cursor-hover); outline: var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--dropdown-outlineColor); } .saltDropdown.saltDropdown[aria-readonly=true] { background: var(--dropdown-background-readonly); cursor: var(--salt-cursor-readonly); } .saltDropdown.saltDropdown:disabled, .saltDropdown.saltDropdown:disabled:hover { background: var(--dropdown-background-disabled); cursor: var(--salt-cursor-disabled); color: var(--salt-content-primary-foreground-disabled); } .saltDropdown-content { flex: 1; max-width: 100%; overflow: hidden; text-overflow: ellipsis; text-wrap: nowrap; } .saltDropdown-placeholder { color: var(--salt-content-secondary-foreground); font-weight: var(--salt-text-fontWeight-small); } .saltDropdown-startAdornmentContainer { margin-right: var(--salt-spacing-100); } .saltDropdown .saltDropdown-toggle { margin-left: var(--salt-spacing-100); } /* src/file-drop-zone/FileDropZone.css */ .saltFileDropZone { color: var(--saltFileDropZone-text-color, var(--salt-content-primary-foreground)); display: inline-flex; background: var(--saltFileDropZone-background, var(--salt-container-primary-background)); text-align: center; align-items: center; justify-content: center; border: var(--saltFileDropZone-border, var(--salt-size-fixed-200) var(--salt-borderStyle-dashed) var(--salt-container-primary-borderColor)); border-radius: var(--saltFileDropZone-borderRadius, var(--salt-palette-corner, 0)); flex-direction: column; padding: var(--salt-spacing-200); gap: var(--salt-spacing-200); width: 100%; font-size: var(--saltFileDropZone-fontSize, var(--salt-text-fontSize)); font-family: var(--saltFileDropZone-fontFamily, var(--salt-text-fontFamily)); line-height: var(--saltFileDropZone-lineHeight, var(--salt-text-lineHeight)); box-sizing: border-box; } .saltFileDropZone-active { background: var(--salt-target-background-hover); border: var(--salt-size-fixed-200) var(--salt-borderStyle-solid) var(--salt-target-borderColor-hover); } .saltFileDropZone-error { border: var(--salt-size-fixed-200) var(--salt-borderStyle-dashed) var(--salt-status-error-borderColor); } .saltFileDropZone-success { border: var(--salt-size-fixed-200) var(--salt-borderStyle-dashed) var(--salt-status-success-borderColor); } .saltFileDropZone-disabled { background: var(--salt-container-primary-background-disabled); border: var(--salt-size-fixed-200) var(--salt-borderStyle-dashed) var(--salt-container-primary-borderColor-disabled); cursor: var(--salt-cursor-disabled); color: var(--salt-content-primary-foreground-disabled); } /* src/flex-item/FlexItem.css */ .saltFlexItem { --saltFlexItem-alignment: auto; --saltFlexItem-shrink: 1; --saltFlexItem-grow: 0; --saltFlexItem-basis: auto; } .saltFlexItem { position: relative; margin: var(--flexItem-margin); padding: var(--flexItem-padding); align-self: var(--saltFlexItem-alignment); flex-grow: var(--saltFlexItem-grow); flex-shrink: var(--saltFlexItem-shrink); flex-basis: var(--saltFlexItem-basis); } .saltFlexItem-stacked { flex-grow: 2; } /* src/flex-layout/FlexLayout.css */ .saltFlexLayout { --flexLayout-layout-display: flex; --flexLayout-direction: row; --flexLayout-wrap: nowrap; --flexLayout-justify: flex-start; --flexLayout-align: stretch; --flexLayout-separator: var(--salt-size-fixed-100); } .saltFlexLayout { gap: var(--flexLayout-gap); margin: var(--flexLayout-margin); padding: var(--flexLayout-padding); display: var(--flexLayout-layout-display); flex-direction: var(--flexLayout-direction); flex-wrap: var(--flexLayout-wrap); justify-content: var(--flexLayout-justify); align-items: var(--flexLayout-align); box-sizing: border-box; } .saltFlexLayout-separator { gap: calc(var(--flexLayout-gap) * 2); } .saltFlexLayout-separator > * { position: relative; } .saltFlexLayout-separator > *:not(:last-child)::after { position: absolute; display: block; content: ""; background-color: var(--salt-separable-secondary-borderColor); } .saltFlexLayout-separator-row > *:not(:last-child)::after { height: 100%; } .saltFlexLayout-separator-row > *:not(:last-child)::after { width: var(--flexLayout-separator); top: 0; } .saltFlexLayout-separator-row-start > *:not(:last-child)::after { right: 0; } .saltFlexLayout-separator-row-center > *:not(:last-child)::after { right: calc(var(--flexLayout-gap) * -1); } .saltFlexLayout-separator-row-end > *:not(:last-child)::after { right: calc(var(--flexLayout-gap) * -2); } .saltFlexLayout-separator-column > *:not(:last-child)::after { width: 100%; } .saltFlexLayout-separator-column > *:not(:last-child)::after { height: var(--flexLayout-separator); left: 0; width: 100%; } .saltFlexLayout-separator-column-start > *:not(:last-child)::after { bottom: 0; } .saltFlexLayout-separator-column-center > *:not(:last-child)::after { bottom: calc(var(--flexLayout-gap) * -1); } .saltFlexLayout-separator-column-end > *:not(:last-child)::after { bottom: calc(var(--flexLayout-gap) * -2); } /* src/form-field/FormField.css */ .saltFormField { display: inline-grid; position: relative; gap: var(--salt-spacing-100); text-align: left; width: var(--saltFormField-width, 100%); font-family: var(--salt-text-fontFamily); font-size: var(--salt-text-fontSize); font-weight: var(--salt-text-fontWeight); line-height: var(--salt-text-lineHeight); } .saltFormField-labelTop { gap: var(--salt-spacing-75); grid-auto-rows: min-content; grid-template-areas: "label" "controls"; } .saltFormField-labelTop .saltFormFieldHelperText { grid-area: 3 / 1; } .saltFormField-labelLeft { grid-template-columns: var(--saltFormField-label-width, var(--formField-label-width, 40%)) 1fr; grid-template-areas: "label controls"; } .saltFormField-labelRight { grid-template-columns: var(--saltFormField-label-width, var(--formField-label-width, 40%)) 1fr; grid-template-areas: "label controls"; } .saltFormField-labelLeft .saltFormFieldHelperText, .saltFormField-labelRight .saltFormFieldHelperText { grid-area: 2 / 2; } .saltFormField-labelRight .saltFormFieldLabel, .saltFormField-labelLeft .saltFormFieldLabel { padding-top: var(--salt-spacing-100); } .saltFormField-labelRight .saltFormFieldLabel { text-align: right; } .saltFormField-controls { align-items: center; display: grid; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; grid-column-gap: var(--salt-spacing-100); } .saltFormFieldLabel { grid-area: label; } .saltFormFieldHelperText { grid-area: helperText; } .saltFormField-disabled { --saltInput-outline: none; --saltCheckbox-outline: none; --saltRadioButton-outline: none; } @supports selector(:has(*)) { .saltFormField:not(:has(.saltFormFieldLabel)) { grid-template-areas: "controls"; } } /* src/form-field/FormFieldHelperText.css */ .saltFormFieldHelperText { cursor: default; display: flex; flex-direction: row; width: 100%; } .saltFormFieldHelperText .saltText { font-style: var(--saltFormField-helperText-fontStyle, var(--salt-typography-textDecoration-italic)); } .saltFormFieldHelperText-withValidation { column-gap: var(--salt-spacing-75); } .saltFormFieldHelperText .saltFormFieldHelperText-statusIndicator { margin-top: calc((var(--salt-text-label-lineHeight) - max(var(--salt-size-icon), 12px)) / 2); } /* src/form-field/FormFieldLabel.css */ .saltFormFieldLabel.saltText { font-weight: var(--saltFormField-label-fontWeight, var(--salt-text-fontWeight-strong)); width: 100%; } .saltFormFieldLabel:hover + .saltFormField-controls * { --input-borderColor: var(--input-borderColor-hover); } .saltFormField-labelLeft .saltFormFieldLabel.saltText { align-self: baseline; padding-top: var(--salt-spacing-100); } .saltFormField-labelTop .saltFormFieldLabel.saltText { width: fit-content; } .saltFormFieldLabel-necessityLabel { font-weight: var(--salt-text-fontWeight); font-style: var(--salt-typography-textDecoration-italic); } .saltFormFieldLabel-sentence.saltText { color: var(--salt-content-primary-foreground); font-size: var(--salt-text-fontSize); } /* src/grid-item/GridItem.css */ .saltGridItem { justify-self: var(--gridItem-justifySelf); align-self: var(--gridItem-alignSelf); grid-row-start: var(--gridItem-gridRowStart); grid-column-start: var(--gridItem-gridColumnStart); grid-row-end: var(--gridItem-gridRowEnd); grid-column-end: var(--gridItem-gridColumnEnd); margin: var(--gridItem-margin); padding: var(--gridItem-padding); } .saltGridItem-area { grid-area: var(--gridItem-gridArea); } /* src/grid-layout/GridLayout.css */ .saltGridLayout { display: grid; column-gap: var(--gridLayout-columnGap); row-gap: var(--gridLayout-rowGap); grid-template-columns: var(--gridLayout-columns); grid-template-rows: var(--gridLayout-rows); margin: var(--gridLayout-margin); padding: var(--gridLayout-padding); grid-auto-columns: auto; grid-auto-rows: auto; } .saltGridLayout-area { grid-template: var(--gridLayout-gridTemplate); grid-template-columns: min-content 1fr min-content; grid-template-rows: min-content 1fr min-content; } /* src/input/Input.css */ .saltInput { align-items: center; background: var(--saltInput-background, var(--input-background)); border-radius: var(--salt-palette-corner-weak, 0); color: var(--saltInput-color, var(--salt-content-primary-foreground)); display: inline-flex; font-family: var(--salt-text-fontFamily); font-size: var(--saltInput-fontSize, var(--salt-text-fontSize)); line-height: var(--saltInput-lineHeight, var(--salt-text-lineHeight)); letter-spacing: var(--salt-text-letterSpacing); height: var(--saltInput-height, var(--salt-size-base)); min-height: var(--saltInput-minHeight, var(--salt-size-base)); min-width: var(--saltInput-minWidth, 4em); padding-left: var(--saltInput-paddingLeft, var(--salt-spacing-100)); padding-right: var(--saltInput-paddingRight, var(--salt-spacing-100)); position: relative; width: 100%; box-sizing: border-box; overflow: hidden; } .saltInput:hover { cursor: var(--salt-cursor-text); } .saltInput-bordered.saltInput { border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--input-borderColor); } .saltInput-bordered.saltInput:hover { border-style: var(--salt-borderStyle-solid); border-color: var(--input-borderColor-hover); } .saltInput-bordered.saltInput-focused, .saltInput-bordered.saltInput-focused:hover { border-style: var(--salt-borderStyle-solid); border-color: var(--input-borderColor-active); } .saltInput-bordered.saltInput-readOnly, .saltInput-bordered.saltInput-readOnly:hover { border-style: var(--salt-borderStyle-solid); border-color: var(--salt-editable-borderColor-readonly); } .saltInput-bordered.saltInput-disabled, .saltInput-bordered.saltInput-disabled:hover { border-style: var(--salt-borderStyle-solid); border-color: var(--salt-editable-borderColor-disabled); } .saltInput-activationIndicator { left: 0; bottom: 0; width: 100%; position: absolute; border-bottom: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--input-borderColor); } .saltInput:hover .saltInput-activationIndicator { border-bottom-style: var(--salt-borderStyle-solid); border-bottom-color: var(--input-borderColor-hover); } .saltInput-focused .saltInput-activationIndicator, .saltInput-focused:hover .saltInput-activationIndicator { border-bottom: var(--salt-size-fixed-200) var(--salt-borderStyle-solid) var(--input-borderColor-active); } .saltInput-readOnly .saltInput-activationIndicator, .saltInput-readOnly:hover .saltInput-activationIndicator { border-bottom-style: var(--salt-borderStyle-solid); border-bottom-color: var(--salt-editable-borderColor-readonly); } .saltInput-disabled .saltInput-activationIndicator, .saltInput-disabled:hover .saltInput-activationIndicator { border-bottom-style: var(--salt-borderStyle-solid); border-bottom-color: var(--salt-editable-borderColor-disabled); } .saltInput-bordered .saltInput-activationIndicator, .saltInput-bordered.saltInput-readOnly .saltInput-activationIndicator, .saltInput-bordered.saltInput-disabled:hover .saltInput-activationIndicator { border-bottom-width: 0; } .saltInput-bordered.saltInput-focused .saltInput-activationIndicator { border-bottom-width: var(--salt-size-fixed-100); } .saltInput-primary { --input-background: var(--salt-editable-primary-background); --input-background-disabled: var(--salt-editable-primary-background-disabled); --input-background-readonly: var(--salt-editable-background-readonly); --input-borderColor: var(--salt-editable-borderColor); --input-borderColor-active: var(--salt-editable-borderColor-active); --input-borderColor-hover: var(--salt-editable-borderColor-hover); --input-outlineColor: var(--salt-focused-outlineColor); } .saltInput-secondary { --input-background: var(--salt-editable-secondary-background); --input-background-disabled: var(--salt-editable-secondary-background-disabled); --input-background-readonly: var(--salt-editable-background-readonly); --input-borderColor: var(--salt-editable-borderColor); --input-borderColor-active: var(--salt-editable-borderColor-active); --input-borderColor-hover: var(--salt-editable-borderColor-hover); --input-outlineColor: var(--salt-focused-outlineColor); } .saltInput-tertiary { --input-background: var(--salt-editable-tertiary-background); --input-background-disabled: var(--salt-editable-tertiary-background-disabled); --input-background-readonly: var(--salt-editable-background-readonly); --input-borderColor: var(--salt-editable-borderColor); --input-borderColor-active: var(--salt-editable-borderColor-active); --input-borderColor-hover: var(--salt-editable-borderColor-hover); --input-outlineColor: var(--salt-focused-outlineColor); } .saltInput-error { --input-background: var(--salt-status-error-background); --input-background-readonly: var(--salt-status-error-background); --input-borderColor: var(--salt-status-error-borderColor); --input-borderColor-active: var(--salt-status-error-borderColor); --input-borderColor-hover: var(--salt-status-error-borderColor); --input-outlineColor: var(--salt-status-error-borderColor); } .saltInput-warning { --input-background: var(--salt-status-warning-background); --input-background-readonly: var(--salt-status-warning-background); --input-borderColor: var(--salt-status-warning-borderColor); --input-borderColor-active: var(--salt-status-warning-borderColor); --input-borderColor-hover: var(--salt-status-warning-borderColor); --input-outlineColor: var(--salt-status-warning-borderColor); } .saltInput-success { --input-background: var(--salt-status-success-background); --input-background-readonly: var(--salt-status-success-background); --input-borderColor: var(--salt-status-success-borderColor); --input-borderColor-active: var(--salt-status-success-borderColor); --input-borderColor-hover: var(--salt-status-success-borderColor); --input-outlineColor: var(--salt-status-success-borderColor); } .saltInput-focused, .saltInput-focused:hover { cursor: var(--salt-cursor-text); outline: var(--saltInput-outline, var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--input-outlineColor)); } .saltInput.saltInput-readOnly { background: var(--input-background-readonly); cursor: var(--salt-cursor-readonly); } .saltInput.saltInput-disabled, .saltInput.saltInput-disabled:hover { background: var(--input-background-disabled); cursor: var(--salt-cursor-disabled); color: var(--saltInput-color-disabled, var(--salt-content-primary-foreground-disabled)); } .saltInput-startAdornmentContainer { align-items: center; display: inline-flex; padding-right: var(--salt-spacing-100); column-gap: var(--salt-spacing-100); } .saltInput-endAdornmentContainer { align-items: center; display: inline-flex; padding-left: var(--salt-spacing-100); column-gap: var(--salt-spacing-100); } .saltInput-readOnly .saltInput-startAdornmentContainer { margin-left: var(--salt-spacing-50); } .saltInput-startAdornmentContainer .saltButton ~ .saltButton { margin-left: calc(-1 * var(--salt-spacing-50)); } .saltInput-endAdornmentContainer .saltButton ~ .saltButton { margin-left: calc(-1 * var(--salt-spacing-50)); } .saltInput-startAdornmentContainer .saltButton:first-child { margin-left: calc(var(--salt-spacing-50) * -1); } .saltInput-endAdornmentContainer .saltButton:last-child { margin-right: calc(var(--salt-spacing-50) * -1); } .saltInput-startAdornmentContainer > .saltButton, .saltInput-endAdornmentContainer > .saltButton { --saltButton-padding: calc(var(--salt-spacing-50) - var(--button-borderWidth)); --saltButton-height: calc(var(--salt-size-base) - var(--salt-spacing-100)); --saltButton-borderRadius: var(--salt-palette-corner-weaker); } .saltInput-input { background: none; border: none; box-sizing: content-box; color: inherit; cursor: inherit; display: block; flex: 1; font: inherit; height: 100%; letter-spacing: var(--saltInput-letterSpacing, 0); margin: 0; min-width: 0; overflow: hidden; padding: 0; text-align: var(--input-textAlign, left); width: 100%; } .saltInput-input:focus { outline: none; } .saltInput-input::placeholder { color: var(--salt-content-secondary-foreground); font-weight: var(--salt-text-fontWeight-small); } .saltInput-disabled .saltInput-input::selection { background: none; } /* src/interactable-card/InteractableCard.css */ .saltInteractableCard { border-width: var(--saltInteractableCard-borderWidth, var(--salt-size-fixed-100)); border-style: var(--saltInteractableCard-borderStyle, var(--salt-borderStyle-solid)); border-radius: var(--saltInteractableCard-borderRadius, var(--salt-palette-corner, 0)); box-shadow: var(--salt-overlayable-shadow); display: block; padding: var(--saltInteractableCard-padding, var(--salt-spacing-200)); position: relative; text-align: start; transition: box-shadow var(--salt-duration-instant) ease-in-out; overflow: hidden; --card-accent-color: var(--salt-sentiment-accent-background); } .saltInteractableCard-primary { background: var(--saltInteractableCard-background, var(--salt-container-primary-background)); border-color: var(--salt-container-primary-borderColor); } .saltInteractableCard-secondary { background: var(--saltInteractableCard-background, var(--salt-container-secondary-background)); border-color: var(--salt-container-secondary-borderColor); } .saltInteractableCard-tertiary { background: var(--saltInteractableCard-background, var(--salt-container-tertiary-background)); border-color: var(--salt-container-tertiary-borderColor); } .saltInteractableCard-accent::after { content: ""; position: absolute; background-color: var(--saltInteractableCard-accent-color, var(--card-accent-color)); } .saltInteractableCard-accentBottom::after { left: calc(-1 * var(--salt-size-fixed-100)); bottom: calc(-1 * var(--salt-size-fixed-100)); height: var(--salt-size-bar); width: calc(100% + var(--salt-size-fixed-200)); } .saltInteractableCard-accentLeft::after { left: calc(-1 * var(--salt-size-fixed-100)); top: calc(-1 * var(--salt-size-fixed-100)); height: calc(100% + var(--salt-size-fixed-200)); width: var(--salt-size-bar); } .saltInteractableCard-accentTop::after { left: calc(-1 * var(--salt-size-fixed-100)); top: calc(-1 * var(--salt-size-fixed-100)); height: var(--salt-size-bar); width: calc(100% + var(--salt-size-fixed-200)); } .saltInteractableCard-accentRight::after { right: calc(-1 * var(--salt-size-fixed-100)); top: calc(-1 * var(--salt-size-fixed-100)); height: calc(100% + var(--salt-size-fixed-200)); width: var(--salt-size-bar); } .saltInteractableCard:focus-visible { cursor: var(--salt-cursor-hover); box-shadow: var(--salt-overlayable-shadow-hover); color: var(--saltInteractableCard-color-focus, var(--salt-content-primary-foreground)); outline-color: var(--salt-focused-outlineColor); outline-style: var(--salt-focused-outlineStyle); outline-width: var(--salt-focused-outlineWidth); outline-offset: var(--salt-focused-outlineOffset); } @media (hover: hover) { .saltInteractableCard:hover { cursor: var(--salt-cursor-hover); box-shadow: var(--salt-overlayable-shadow-hover); border-color: var(--salt-actionable-accented-borderColor-hover); } .saltInteractableCard-disabled:hover { cursor: var(--salt-cursor-disabled); box-shadow: none; } } .saltInteractableCard-selected, .saltInteractableCard:active, .saltInteractableCard-active { cursor: var(--salt-cursor-hover); box-shadow: var(--salt-overlayable-shadow); border-color: var(--salt-actionable-accented-borderColor-active); } .saltInteractableCard-disabled, .saltInteractableCard-disabled:focus, .saltInteractableCard-disabled:active { box-shadow: none; color: var(--salt-content-primary-foreground-disabled); cursor: var(--salt-cursor-disabled); outline: none; --card-accent-color: var(--salt-sentiment-accent-background-disabled); } .saltInteractableCard-primary.saltInteractableCard-disabled, .saltInteractableCard-primary.saltInteractableCard-disabled:focus, .saltInteractableCard-primary.saltInteractableCard-disabled:active { background: var(--salt-container-primary-background-disabled); border-color: var(--salt-container-primary-borderColor-disabled); } .saltInteractableCard-secondary.saltInteractableCard-disabled, .saltInteractableCard-secondary.saltInteractableCard-disabled:focus, .saltInteractableCard-secondary.saltInteractableCard-disabled:active { background: var(--saltInteractableCard-background-disabled, var(--salt-container-secondary-background-disabled)); border-color: var(--salt-container-secondary-borderColor-disabled); } .saltInteractableCard-tertiary.saltInteractableCard-disabled, .saltInteractableCard-tertiary.saltInteractableCard-disabled:focus, .saltInteractableCard-tertiary.saltInteractableCard-disabled:active { background: var(--salt-container-tertiary-background-disabled); border-color: var(--salt-container-tertiary-borderColor-disabled); } .saltInteractableCard-selected.saltInteractableCard-disabled, .saltInteractableCard-selected.saltInteractableCard-disabled:focus, .saltInteractableCard-selected.saltInteractableCard-disabled:hover, .saltInteractableCard-selected.saltInteractableCard-disabled:active { border-color: var(--salt-selectable-borderColor-selectedDisabled); --card-accent-color: var(--salt-selectable-foreground-selectedDisabled); } .saltInteractableCard-disabled div { pointer-events: none; } /* src/interactable-card/InteractableCardGroup.css */ .saltInteractableCardGroup { display: flex; flex-direction: row; flex-wrap: wrap; gap: var(--salt-spacing-200); } /* src/kbd/Kbd.css */ .saltKbd-primary { --kbd-background: var(--salt-container-primary-background); } .saltKbd-secondary { --kbd-background: var(--salt-container-secondary-background); } .saltKbd-tertiary { --kbd-background: var(--salt-container-tertiary-background); } .saltKbd { display: inline-flex; box-sizing: border-box; width: fit-content; border-radius: var(--salt-palette-corner-weaker); border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-container-primary-borderColor); background: var(--kbd-background); box-shadow: 0 var(--salt-size-fixed-100) 0 0 var(--salt-container-primary-borderColor); height: calc(var(--salt-size-base) - var(--salt-spacing-100)); align-items: center; padding: 0 var(--salt-spacing-50); text-transform: capitalize; color: var(--salt-content-primary-foreground); font-family: var(--salt-text-code-fontFamily); font-size: var(--salt-text-fontSize); font-style: normal; font-weight: var(--salt-text-fontWeight); line-height: var(--salt-text-lineHeight); } /* src/link/Link.css */ .saltLink { --link-color: "inherit"; --link-color-hover: "inherit"; --link-color-active: "inherit"; --link-color-visited: var(--salt-content-foreground-visited); --link-color-focus: "inherit"; --link-focus-outlineColor: currentColor; --link-fontFamily: var(--salt-text-fontFamily); } .saltLink-underlineDefault { --link-textDecoration: var(--salt-typography-textDecoration-underline); --link-textDecoration-hover: var(--salt-typography-textDecoration-none); --link-textDecoration-active: var(--link-textDecoration); --link-textDecoration-focus: var(--link-textDecoration-hover); --link-textDecoration-visited: var(--link-textDecoration); } .saltLink-underlineNever { --link-textDecoration: var(--salt-typography-textDecoration-none); --link-textDecoration-hover: var(--salt-typography-textDecoration-none); } .saltLink.saltText { color: var(--link-color); letter-spacing: var(--salt-text-letterSpacing); text-decoration: var(--link-textDecoration); font-family: var(--link-fontFamily); } .saltLink-primary { --link-color: var(--salt-content-primary-foreground); --link-color-hover: var(--salt-content-primary-foreground); --link-color-active: var(--salt-content-primary-foreground); --link-color-focus: var(--salt-content-primary-foreground); --link-focus-outlineColor: var(--salt-focused-outlineColor); --link-color-visited: var(--salt-content-foreground-visited); } .saltLink-secondary { --link-color: var(--salt-content-secondary-foreground); --link-color-hover: var(--salt-content-secondary-foreground); --link-color-active: var(--salt-content-secondary-foreground); --link-color-focus: var(--salt-content-secondary-foreground); --link-focus-outlineColor: var(--salt-focused-outlineColor); --link-color-visited: var(--salt-content-foreground-visited); } .saltLink-accent { --link-color: var(--salt-content-accent-foreground); --link-color-hover: var(--salt-content-accent-foreground); --link-color-active: var(--salt-content-accent-foreground); --link-color-focus: var(--salt-content-accent-foreground); --link-focus-outlineColor: var(--salt-focused-outlineColor); --link-color-visited: var(--salt-content-foreground-visited); } .saltLink .saltLink-icon { margin-left: var(--salt-spacing-75); margin-bottom: -2px; } .saltLink:visited { color: var(--saltLink-color-visited, var(--link-color-visited)); text-decoration: var(--link-textDecoration-visited); } .saltLink:hover { color: var(--saltLink-color-hover, var(--link-color-hover)); text-decoration: var(--link-textDecoration-hover); } .saltLink:active { color: var(--saltLink-color-active, var(--link-color-active)); text-decoration: var(--link-textDecoration-active); } .saltLink:focus { color: var(--saltLink-color-focus, var(--link-color-focus)); outline: var(--salt-focused-outline); outline-color: var(--link-focus-outlineColor); text-decoration: var(--link-textDecoration-focus); } .saltLink-externalLinkADA { display: block; position: absolute; width: 1px; height: 1px; overflow: hidden; top: 0px; left: 0px; opacity: 0; } /* src/link-card/LinkCard.css */ .saltLinkCard { border-radius: var(--saltLinkCard-borderRadius, var(--salt-palette-corner, 0)); border-style: var(--saltLinkCard-borderStyle, var(--salt-borderStyle-solid)); border-width: var(--saltLinkCard-borderWidth, var(--salt-size-fixed-100)); box-shadow: var(--salt-overlayable-shadow); display: block; overflow: hidden; padding: var(--saltLinkCard-padding, var(--salt-spacing-200)); position: relative; text-decoration: none; transition: box-shadow var(--salt-duration-instant) ease-in-out; --linkCard-accent-color: var(--salt-sentiment-accent-background); } .saltLinkCard-primary { background: var(--saltLinkCard-background, var(--salt-container-primary-background)); border-color: var(--salt-container-primary-borderColor); } .saltLinkCard-secondary { background: var(--saltLinkCard-background, var(--salt-container-secondary-background)); border-color: var(--salt-container-secondary-borderColor); } .saltLinkCard-tertiary { background: var(--saltLinkCard-background, var(--salt-container-tertiary-background)); border-color: var(--salt-container-tertiary-borderColor); } .saltLinkCard-accent::after { content: ""; position: absolute; background-color: var(--saltLinkCard-accent-color, var(--linkCard-accent-color)); } .saltLinkCard-accentBottom::after { left: calc(-1 * var(--salt-size-fixed-100)); bottom: calc(-1 * var(--salt-size-fixed-100)); height: var(--salt-size-bar); width: calc(100% + var(--salt-size-fixed-200)); } .saltLinkCard-accentLeft::after { left: calc(-1 * var(--salt-size-fixed-100)); top: calc(-1 * var(--salt-size-fixed-100)); height: calc(100% + var(--salt-size-fixed-200)); width: var(--salt-size-bar); } .saltLinkCard-accentTop::after { left: calc(-1 * var(--salt-size-fixed-100)); top: calc(-1 * var(--salt-size-fixed-100)); height: var(--salt-size-bar); width: calc(100% + var(--salt-size-fixed-200)); } .saltLinkCard-accentRight::after { right: calc(-1 * var(--salt-size-fixed-100)); top: calc(-1 * var(--salt-size-fixed-100)); height: calc(100% + var(--salt-size-fixed-200)); width: var(--salt-size-bar); } .saltLinkCard:focus-visible { cursor: var(--salt-cursor-hover); box-shadow: var(--salt-overlayable-shadow-hover); outline-color: var(--salt-focused-outlineColor); outline-style: var(--salt-focused-outlineStyle); outline-width: var(--salt-focused-outlineWidth); outline-offset: var(--salt-focused-outlineOffset); --linkCard-accent-color: var(--salt-selectable-foreground-hover); } @media (hover: hover) { .saltLinkCard:hover { cursor: var(--salt-cursor-hover); box-shadow: var(--salt-overlayable-shadow-hover); border-color: var(--salt-actionable-accented-borderColor-hover); } } .saltLinkCard:active { cursor: var(--salt-cursor-active); border-color: var(--salt-actionable-accented-borderColor-active); box-shadow: var(--salt-overlayable-shadow); } /* src/list-box/ListBox.css */ .saltListBox { display: flex; flex-direction: column; gap: var(--salt-spacing-fixed-100); background: var(--salt-container-primary-background); overflow: auto; padding-top: 1px; padding-bottom: 1px; box-sizing: border-box; isolation: isolate; position: relative; max-height: inherit; } .saltListBox-bordered { border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-container-primary-borderColor); border-radius: var(--salt-palette-corner, 0); } .saltListBox:focus-visible { outline: none; } /* src/menu/MenuGroup.css */ .saltMenuGroup-label { background: var(--salt-container-primary-background); color: var(--salt-content-secondary-foreground); font-size: var(--salt-text-label-fontSize); font-weight: var(--salt-text-label-fontWeight-strong); font-family: var(--salt-text-label-fontFamily); line-height: var(--salt-text-label-lineHeight); letter-spacing: var(--salt-text-letterSpacing); height: calc(var(--salt-size-base) + var(--salt-spacing-100)); padding: calc(var(--salt-spacing-100) + var(--salt-spacing-25)) var(--salt-spacing-100); display: flex; box-sizing: border-box; } .saltMenuGroup { border-top: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-separable-tertiary-borderColor); } .saltMenuGroup:first-of-type { border-top: 0; } /* src/menu/MenuItem.css */ .saltMenuItem { color: var(--salt-content-primary-foreground); background: var(--salt-selectable-background); font-size: var(--salt-text-fontSize); font-weight: var(--salt-text-fontWeight); font-family: var(--salt-text-fontFamily); line-height: var(--salt-text-lineHeight); letter-spacing: var(--salt-text-letterSpacing); min-height: calc(var(--salt-size-base) + var(--salt-spacing-100)); padding: calc(var(--salt-spacing-100) + var(--salt-spacing-25)) var(--salt-spacing-100); display: flex; gap: var(--salt-spacing-100); position: relative; cursor: var(--salt-cursor-hover); box-sizing: border-box; flex-shrink: 0; } .saltMenuItem:focus-visible { outline: var(--salt-focused-outline); outline-offset: calc(var(--salt-size-fixed-100) * -2); } .saltMenuItem:hover { outline: none; } .saltMenuItem:hover, .saltMenuItem:focus-visible { background: var(--salt-selectable-background-hover); } .saltMenuItem:active { background: var(--salt-selectable-background-selected); box-shadow: 0 calc(var(--salt-size-fixed-100) * -1) 0 0 var(--salt-selectable-borderColor-selected), 0 var(--salt-size-fixed-100) 0 0 var(--salt-selectable-borderColor-selected); } .saltMenuItem[aria-disabled=true], .saltMenuItem[aria-disabled=true]:active { background: var(--salt-selectable-background-disabled); color: var(--salt-content-primary-foreground-disabled); cursor: var(--salt-cursor-disabled); box-shadow: none; } .saltMenuItem-blurActive { z-index: var(--salt-zIndex-default); background: var(--salt-selectable-background-selected); box-shadow: 0 calc(var(--salt-size-fixed-100) * -1) 0 0 var(--salt-selectable-borderColor-selected), 0 var(--salt-size-fixed-100) 0 0 var(--salt-selectable-borderColor-selected); } .saltMenuItem .saltIcon:not(.saltCheckboxIcon-icon) { min-height: var(--salt-text-lineHeight); } .saltMenuItem-expandIcon.saltIcon { margin-left: auto; } /* src/menu/MenuPanel.css */ .saltMenuPanel { background: var(--salt-container-primary-background); border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-selectable-borderColor-selected); overflow: hidden; overflow-y: auto; min-width: 10em; position: relative; z-index: var(--salt-zIndex-flyover); box-shadow: var(--salt-overlayable-shadow-popout); box-sizing: border-box; border-radius: var(--salt-palette-corner, 0); } .saltMenuPanel-container { display: flex; flex-direction: column; gap: var(--salt-spacing-fixed-100); max-height: inherit; min-height: inherit; } .saltMenuPanel:focus-visible { outline: none; } /* src/multiline-input/MultilineInput.css */ .saltMultilineInput { display: inline-grid; grid-template-areas: "start-adornment textarea end-adornment"; grid-template-columns: min-content 1fr min-content; grid-template-rows: 1fr; background: var(--multilineInput-background); border-radius: var(--salt-palette-corner-weak, 0); color: var(--salt-content-primary-foreground); font-family: var(--salt-text-fontFamily); font-size: var(--salt-text-fontSize); line-height: var(--salt-text-lineHeight); letter-spacing: var(--salt-text-letterSpacing); min-height: var(--salt-size-base); min-width: 4em; position: relative; width: 100%; box-sizing: border-box; overflow: hidden; padding: 0 var(--salt-spacing-100); } .saltMultilineInput-wrapper { grid-area: textarea; overflow: hidden; margin: var(--salt-spacing-75) 0; display: flex; } .saltMultilineInput:hover { cursor: var(--salt-cursor-text); } .saltMultilineInput-bordered.saltMultilineInput { border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--multilineInput-borderColor); } .saltMultilineInput-bordered.saltMultilineInput:hover { border-style: var(--salt-borderStyle-solid); border-color: var(--multilineInput-borderColor-hover); } .saltMultilineInput-bordered.saltMultilineInput-focused, .saltMultilineInput-bordered.saltMultilineInput-focused:hover { border-style: var(--salt-borderStyle-solid); border-color: var(--multilineInput-borderColor-active); } .saltMultilineInput-bordered.saltMultilineInput-readOnly, .saltMultilineInput-bordered.saltMultilineInput-readOnly:hover { border-style: var(--salt-borderStyle-solid); border-color: var(--salt-editable-borderColor-readonly); } .saltMultilineInput-bordered.saltMultilineInput-disabled, .saltMultilineInput-bordered.saltMultilineInput-disabled:hover { border-style: var(--salt-borderStyle-solid); border-color: var(--salt-editable-borderColor-disabled); } .saltMultilineInput-activationIndicator { left: 0; bottom: 0; width: 100%; position: absolute; border-bottom: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--multilineInput-borderColor); } .saltMultilineInput:hover .saltMultilineInput-activationIndicator { border-bottom-style: var(--salt-borderStyle-solid); border-bottom-color: var(--multilineInput-borderColor-hover); } .saltMultilineInput-focused .saltMultilineInput-activationIndicator, .saltMultilineInput-focused:hover .saltMultilineInput-activationIndicator { border-bottom: var(--salt-size-fixed-200) var(--salt-borderStyle-solid) var(--multilineInput-borderColor-active); } .saltMultilineInput-readOnly .saltMultilineInput-activationIndicator, .saltMultilineInput-readOnly:hover .saltMultilineInput-activationIndicator { border-bottom-style: var(--salt-borderStyle-solid); border-bottom-color: var(--salt-editable-borderColor-readonly); } .saltMultilineInput-disabled .saltMultilineInput-activationIndicator, .saltMultilineInput-disabled:hover .saltMultilineInput-activationIndicator { border-bottom-style: var(--salt-borderStyle-solid); border-bottom-color: var(--salt-editable-borderColor-disabled); } .saltMultilineInput-bordered .saltMultilineInput-activationIndicator, .saltMultilineInput-bordered.saltMultilineInput-readOnly .saltMultilineInput-activationIndicator, .saltMultilineInput-bordered.saltMultilineInput-disabled:hover .saltMultilineInput-activationIndicator { border-bottom-width: 0; } .saltMultilineInput-bordered.saltMultilineInput-focused .saltMultilineInput-activationIndicator { border-bottom-width: var(--salt-size-fixed-100); } .saltMultilineInput-primary { --multilineInput-background: var(--salt-editable-primary-background); --multilineInput-background-disabled: var(--salt-editable-primary-background-disabled); --multilineInput-background-readonly: var(--salt-editable-background-readonly); --multilineInput-borderColor: var(--salt-editable-borderColor); --multilineInput-borderColor-active: var(--salt-editable-borderColor-active); --multilineInput-borderColor-hover: var(--salt-editable-borderColor-hover); --multilineInput-outlineColor: var(--salt-focused-outlineColor); } .saltMultilineInput-secondary { --multilineInput-background: var(--salt-editable-secondary-background); --multilineInput-background-disabled: var(--salt-editable-secondary-background-disabled); --multilineInput-background-readonly: var(--salt-editable-background-readonly); --multilineInput-borderColor: var(--salt-editable-borderColor); --multilineInput-borderColor-active: var(--salt-editable-borderColor-active); --multilineInput-borderColor-hover: var(--salt-editable-borderColor-hover); --multilineInput-outlineColor: var(--salt-focused-outlineColor); } .saltMultilineInput-tertiary { --multilineInput-background: var(--salt-editable-tertiary-background); --multilineInput-background-disabled: var(--salt-editable-tertiary-background-disabled); --multilineInput-background-readonly: var(--salt-editable-background-readonly); --multilineInput-borderColor: var(--salt-editable-borderColor); --multilineInput-borderColor-active: var(--salt-editable-borderColor-active); --multilineInput-borderColor-hover: var(--salt-editable-borderColor-hover); --multilineInput-outlineColor: var(--salt-focused-outlineColor); } .saltMultilineInput-error { --multilineInput-background: var(--salt-status-error-background); --multilineInput-background-readonly: var(--salt-status-error-background); --multilineInput-borderColor: var(--salt-status-error-borderColor); --multilineInput-borderColor-active: var(--salt-status-error-borderColor); --multilineInput-borderColor-hover: var(--salt-status-error-borderColor); --multilineInput-outlineColor: var(--salt-status-error-borderColor); } .saltMultilineInput-warning { --multilineInput-background: var(--salt-status-warning-background); --multilineInput-background-readonly: var(--salt-status-warning-background); --multilineInput-borderColor: var(--salt-status-warning-borderColor); --multilineInput-borderColor-active: var(--salt-status-warning-borderColor); --multilineInput-borderColor-hover: var(--salt-status-warning-borderColor); --multilineInput-outlineColor: var(--salt-status-warning-borderColor); } .saltMultilineInput-success { --multilineInput-background: var(--salt-status-success-background); --multilineInput-background-readonly: var(--salt-status-success-background); --multilineInput-borderColor: var(--salt-status-success-borderColor); --multilineInput-borderColor-active: var(--salt-status-success-borderColor); --multilineInput-borderColor-hover: var(--salt-status-success-borderColor); --multilineInput-outlineColor: var(--salt-status-success-borderColor); } .saltMultilineInput-focused, .saltMultilineInput-focused:hover { cursor: var(--salt-cursor-text); outline: var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--multilineInput-outlineColor); } .saltMultilineInput.saltMultilineInput-readOnly { background: var(--multilineInput-background-readonly); cursor: var(--salt-cursor-readonly); } .saltMultilineInput.saltMultilineInput-disabled, .saltMultilineInput.saltMultilineInput-disabled:hover { background: var(--input-background-disabled); cursor: var(--salt-cursor-disabled); color: var(--salt-content-primary-foreground-disabled); } .saltMultilineInput-disabled .saltMultilineInput-textarea { cursor: var(--salt-cursor-disabled); } .saltMultilineInput.saltMultilineInput-withAdornmentRow { grid-template-areas: "start-adornment textarea" "end-adornment end-adornment"; grid-template-columns: min-content 1fr; grid-template-rows: 1fr auto; } .saltMultilineInput-endAdornmentContainer, .saltMultilineInput-startAdornmentContainer { align-items: center; display: inline-flex; min-height: var(--salt-size-base); column-gap: var(--salt-spacing-100); } .saltMultilineInput-startAdornmentContainer { align-self: self-start; padding-right: var(--salt-spacing-100); grid-area: start-adornment; } .saltMultilineInput-suffixAdornments { align-self: self-end; grid-area: end-adornment; } .saltMultilineInput-withAdornmentRow .saltMultilineInput-suffixAdornments { display: inline-flex; flex-basis: 100%; justify-content: flex-end; } .saltMultilineInput-endAdornmentContainer { padding-left: var(--salt-spacing-100); } .saltMultilineInput-statusAdornmentContainer { align-self: self-end; display: inline-flex; min-height: var(--salt-size-base); } .saltMultilineInput-startAdornmentContainer .saltButton:first-child { margin-left: calc(var(--salt-spacing-50) * -1); } .saltMultilineInput-endAdornmentContainer .saltButton:last-child { margin-right: calc(var(--salt-spacing-50) * -1); } .saltMultilineInput-readOnly .saltMultilineInput-endAdornmentContainer .saltButton:last-child { margin-right: 0; } .saltMultilineInput-startAdornmentContainer > .saltButton, .saltMultilineInput-endAdornmentContainer > .saltButton { --saltButton-padding: calc(var(--salt-spacing-50) - var(--button-borderWidth)); --saltButton-height: calc(var(--salt-size-base) - var(--salt-spacing-100)); --saltButton-borderRadius: var(--salt-palette-corner-weaker); } .saltMultilineInput-textarea { appearance: none; background: none; border: 0; color: inherit; font: inherit; resize: vertical; width: 100%; padding: 0; box-sizing: border-box; min-height: 0; min-width: 0; max-height: 100%; overflow: auto; } .saltMultilineInput-textarea::placeholder { font-weight: var(--salt-text-fontWeight-small); } .saltMultilineInput-textarea:focus { outline: none; } .saltMultilineInput-disabled .saltMultilineInput-textarea::selection { background: none; } /* src/navigation-item/NavigationItem.css */ .saltNavigationItem { color: var(--salt-content-primary-foreground); line-height: var(--salt-text-lineHeight); font-family: var(--salt-text-fontFamily); font-size: var(--salt-text-fontSize); font-weight: var(--salt-text-fontWeight); } .saltNavigationItem-wrapper { display: flex; gap: var(--salt-spacing-100); align-items: center; position: relative; background: none; border: none; font: inherit; color: inherit; text-decoration: none; cursor: var(--salt-cursor-hover); transition: all var(--salt-duration-instant) ease-in-out; box-sizing: border-box; } .saltNavigationItem-rootItem { font-weight: var(--salt-text-fontWeight-strong); } .saltNavigationItem-label .saltIcon { top: var(--salt-spacing-25); } .saltNavigationItem-horizontal { min-height: calc(var(--salt-size-base) + var(--salt-spacing-100) * 2); padding: 0 var(--salt-spacing-100); width: fit-content; } .saltNavigationItem-vertical { min-height: calc(var(--salt-size-base) + var(--salt-spacing-50) * 2); padding-top: 0; padding-bottom: 0; padding-right: var(--salt-spacing-100); padding-left: calc(var(--salt-spacing-300) * (min(var(--saltNavigationItem-level, 0) + 1, 2))); width: 100%; } .saltNavigationItem-label { padding-left: calc(var(--saltNavigationItem-level, 0) * var(--salt-spacing-100)); flex: 1; text-align: left; display: flex; align-items: baseline; gap: var(--salt-spacing-100); } .saltNavigationItem-horizontal { min-height: calc(var(--salt-size-base) + var(--salt-spacing-100) * 2); padding: 0 var(--salt-spacing-100); width: fit-content; } .saltNavigationItem-vertical { --saltButton-margin: var(--salt-spacing-50) 0; min-height: calc(var(--salt-size-base) + var(--salt-spacing-50) * 2); padding-right: var(--salt-spacing-100); padding-left: calc(var(--salt-spacing-300) * (min(var(--saltNavigationItem-level, 0) + 1, 2))); width: 100%; } .saltNavigationItem-label { padding-left: calc(var(--saltNavigationItem-level, 0) * var(--salt-spacing-100)); flex: 1; text-align: left; display: flex; align-items: baseline; gap: var(--salt-spacing-100); } .saltNavigationItem-label .saltBadge { margin-left: auto; } .saltNavigationItem-wrapper:focus-visible { outline: var(--salt-focused-outline); } .saltNavigationItem-wrapper:focus:not(:focus-visible) { outline: 0; } .saltNavigationItem-wrapper::after { content: ""; position: absolute; top: var(--salt-spacing-25); left: 0; display: block; } .saltNavigationItem-horizontal::after { width: 100%; height: var(--salt-size-indicator); } .saltNavigationItem-vertical::after { width: var(--salt-size-indicator); left: var(--salt-spacing-25); height: calc(100% - var(--salt-spacing-50)); } .saltNavigationItem-wrapper:hover::after, .saltNavigationItem-wrapper:focus-visible::after { background: var(--salt-navigable-indicator-hover); transition: background var(--salt-duration-perceptible) ease-in-out; } .saltNavigationItem-active::after, .saltNavigationItem-active:hover::after, .saltNavigationItem-active:focus::after { background: var(--salt-navigable-accent-indicator-active); transition: background var(--salt-duration-perceptible) ease-in-out; } /* src/number-input/NumberInput.css */ .saltNumberInput { --numberInput-border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--numberInput-borderColor); --numberInput-borderColor: var(--salt-editable-borderColor); --numberInput-borderStyle: var(--salt-borderStyle-solid); --numberInput-outlineColor: var(--salt-focused-outlineColor); --numberInput-borderWidth: var(--salt-size-fixed-100); --numberInput-outline: none; align-items: center; background: var(--numberInput-background); border-radius: var(--salt-palette-corner-weak, 0); box-sizing: border-box; color: var(--salt-content-primary-foreground); display: inline-flex; font-family: var(--salt-text-fontFamily); font-size: var(--salt-text-fontSize); gap: var(--salt-spacing-50); height: var(--salt-size-base); min-height: var(--salt-size-base); min-width: 4em; overflow: hidden; outline: var(--numberInput-outline); padding-left: var(--salt-spacing-100); padding-right: var(--salt-spacing-50); padding-top: var(--salt-spacing-50); padding-bottom: var(--salt-spacing-50); position: relative; width: 100%; } .saltNumberInput:hover { --numberInput-borderStyle: var(--salt-borderStyle-solid); --numberInput-borderColor: var(--salt-editable-borderColor-hover); cursor: var(--salt-cursor-text); } .saltNumberInput:active { --numberInput-borderColor: var(--salt-editable-borderColor-active); --numberInput-borderStyle: var(--salt-borderStyle-solid); --numberInput-borderWidth: var(--salt-size-fixed-200); background: var(--numberInput-background-active); } .saltNumberInput-primary { --numberInput-background: var(--salt-editable-primary-background); --numberInput-background-disabled: var(--salt-editable-primary-background-disabled); --numberInput-background-readonly: var(--salt-editable-background-readonly); } .saltNumberInput-secondary { --numberInput-background: var(--salt-editable-secondary-background); --numberInput-background-disabled: var(--salt-editable-secondary-background-disabled); --numberInput-background-readonly: var(--salt-editable-background-readonly); } .saltNumberInput-tertiary { --numberInput-background: var(--salt-editable-tertiary-background); --numberInput-background-disabled: var(--salt-editable-tertiary-background-disabled); --numberInput-background-readonly: var(--salt-editable-background-readonly); } .saltNumberInput-error, .saltNumberInput-error:hover { --numberInput-background: var(--salt-status-error-background); --numberInput-borderColor: var(--salt-status-error-borderColor); --numberInput-outlineColor: var(--salt-status-error-borderColor); --numberInput-background-readonly: var(--salt-status-error-background); } .saltNumberInput-warning, .saltNumberInput-warning:hover { --numberInput-background: var(--salt-status-warning-background); --numberInput-borderColor: var(--salt-status-warning-borderColor); --numberInput-outlineColor: var(--salt-status-warning-borderColor); --numberInput-background-readonly: var(--salt-status-warning-background); } .saltNumberInput-success, .saltNumberInput-success:hover { --numberInput-background: var(--salt-status-success-background); --numberInput-borderColor: var(--salt-status-success-borderColor); --numberInput-outlineColor: var(--salt-status-success-borderColor); --numberInput-background-readonly: var(--salt-status-success-background); } .saltNumberInput-input { background: none; border: none; box-sizing: content-box; color: inherit; cursor: inherit; display: block; flex: 1; font: inherit; letter-spacing: var(--salt-text-letterSpacing); line-height: var(--salt-text-lineHeight); margin: 0; min-width: 0; padding: 0; text-align: var(--numberInput-textAlign); width: 100%; } .saltNumberInput-input:focus { outline: none; } .saltNumberInput-input::placeholder { color: var(--salt-content-secondary-foreground); font-weight: var(--salt-text-fontWeight-small); } .saltNumberInput-focused { --numberInput-borderColor: var(--numberInput-outlineColor); --numberInput-borderWidth: var(--salt-size-fixed-200); outline: var(--saltNumberInput-outline, var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--numberInput-outlineColor)); } .saltNumberInput-bordered { --numberInput-border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--numberInput-borderColor); --numberInput-borderWidth: 0; border: var(--numberInput-border); } .saltNumberInput-bordered.saltNumberInput-focused, .saltNumberInput-bordered:active { --numberInput-borderWidth: var(--salt-size-fixed-200); } .saltNumberInput-bordered.saltNumberInput-readOnly, .saltNumberInput-bordered.saltNumberInput-disabled:hover { --numberInput-borderWidth: 0; } .saltNumberInput-bordered.saltNumberInput-focused:hover { --numberInput-borderColor: var(--salt-editable-borderColor-active); } .saltNumberInput-readOnly, .saltNumberInput-bordered.saltNumberInput-readOnly { --numberInput-borderColor: var(--salt-editable-borderColor-readonly); --numberInput-borderStyle: var(--salt-borderStyle-solid); --numberInput-borderWidth: var(--salt-size-fixed-100); background: var(--numberInput-background-readonly); cursor: var(--salt-cursor-readonly); } .saltNumberInput-focused.saltNumberInput-disabled { --numberInput-borderWidth: var(--salt-size-fixed-100); outline: none; } .saltNumberInput-focused.saltNumberInput-readOnly { --numberInput-borderWidth: var(--salt-size-fixed-100); } .saltNumberInput:hover.saltNumberInput-readOnly { --numberInput-borderColor: var(--salt-editable-borderColor-readonly); } .saltNumberInput-disabled .saltNumberInput-input::selection { background: none; } .saltNumberInput-disabled, .saltNumberInput-disabled:hover, .saltNumberInput-disabled:active { --numberInput-borderColor: var(--salt-editable-borderColor-disabled); --numberInput-borderStyle: var(--salt-borderStyle-solid); --numberInput-borderWidth: var(--salt-size-fixed-100); background: var(--numberInput-background-disabled); cursor: var(--salt-cursor-disabled); color: var(--saltNumberInput-color-disabled, var(--salt-content-primary-foreground-disabled)); } .saltNumberInput-startAdornmentContainer { align-items: center; display: inline-flex; padding-right: var(--salt-spacing-100); column-gap: var(--salt-spacing-100); } .saltNumberInput-endAdornmentContainer { align-items: center; display: inline-flex; padding-left: var(--salt-spacing-100); column-gap: var(--salt-spacing-100); } .saltNumberInput-startAdornmentContainer { margin-left: calc(var(--salt-spacing-50) * -1); } .saltNumberInput-startAdornmentContainer > .saltButton, .saltNumberInput-endAdornmentContainer > .saltButton { --saltButton-padding: calc(var(--salt-spacing-50) - var(--button-borderWidth)); --saltButton-height: calc(var(--salt-size-base) - var(--salt-spacing-100)); --saltButton-borderRadius: var(--salt-palette-corner-weaker); } .saltNumberInput-inputTextAlignLeft { --numberInput-textAlign: left; } .saltNumberInput-inputTextAlignCenter { --numberInput-textAlign: center; } .saltNumberInput-inputTextAlignRight { --numberInput-textAlign: right; } .saltNumberInput-buttonContainer { --numberInput-buttonGap: var(--salt-spacing-fixed-200); display: flex; flex-direction: column; gap: var(--numberInput-buttonGap); justify-content: center; } .saltNumberInput-hiddenButtons .saltNumberInput-buttonContainer { display: none; } .saltNumberInput-activationIndicator { left: 0; bottom: 0; width: 100%; position: absolute; border-bottom: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--numberInput-borderColor); } .saltNumberInput-focused .saltNumberInput-activationIndicator { border-bottom: var(--salt-size-fixed-200) var(--salt-borderStyle-solid) var(--salt-editable-borderColor-active); } .saltNumberInput-bordered.saltNumberInput-focused .saltNumberInput-activationIndicator { border-bottom-width: var(--salt-size-fixed-100); } .saltNumberInput-bordered .saltNumberInput-activationIndicator, .saltNumberInput-readOnly.saltNumberInput-focused .saltNumberInput-activationIndicator { border-bottom-width: 0; } .saltNumberInput-increment { --saltButton-borderRadius: var(--salt-palette-corner-weaker, 0) var(--salt-palette-corner-weaker, 0) 0 0; } .saltNumberInput-decrement { --saltButton-borderRadius: 0 0 var(--salt-palette-corner-weaker, 0) var(--salt-palette-corner-weaker, 0); } .saltNumberInput-increment, .saltNumberInput-decrement { --saltButton-height: calc((var(--salt-size-base) - (var(--salt-spacing-50) * 2) - var(--salt-size-fixed-200)) / 2); --saltButton-padding: calc(var(--salt-spacing-50) - var(--button-borderWidth)); } /* src/option/Option.css */ .saltOption { color: var(--salt-content-primary-foreground); background: var(--salt-selectable-background); font-size: var(--salt-text-fontSize); font-weight: var(--salt-text-fontWeight); font-family: var(--salt-text-fontFamily); line-height: var(--salt-text-lineHeight); letter-spacing: var(--salt-text-letterSpacing); min-height: calc(var(--salt-size-base) + var(--salt-spacing-100)); padding: calc(var(--salt-spacing-100) + var(--salt-spacing-25)) var(--salt-spacing-100); display: flex; gap: var(--salt-spacing-100); position: relative; cursor: var(--salt-cursor-hover); box-sizing: border-box; flex-shrink: 0; } .saltOption-active { background: var(--salt-selectable-background-hover); } .saltOption-focusVisible { outline: var(--salt-focused-outline); outline-offset: calc(var(--salt-size-fixed-100) * -2); } .saltOption:hover { background: var(--salt-selectable-background-hover); } .saltOption[aria-disabled=true] { color: var(--salt-content-primary-foreground); background: var(--salt-selectable-background); opacity: 0.4; cursor: var(--salt-cursor-disabled); } .saltOption[aria-selected=true] { z-index: var(--salt-zIndex-default); background: var(--salt-selectable-background-selected); box-shadow: calc(var(--salt-size-fixed-100) * -2) 0 0 0 var(--salt-selectable-background-hover), calc(var(--salt-size-fixed-100) * -1) 0 0 var(--salt-size-fixed-100) var(--salt-selectable-borderColor-selected), 0 calc(var(--salt-size-fixed-100) * -1) 0 var(--salt-selectable-borderColor-selected); } .saltOption .saltIcon:not(.saltCheckboxIcon-icon) { min-height: var(--salt-text-lineHeight); } /* src/option/OptionGroup.css */ .saltOptionGroup-label { background: var(--salt-container-primary-background); color: var(--salt-content-secondary-foreground); font-size: var(--salt-text-label-fontSize); font-weight: var(--salt-text-label-fontWeight-strong); font-family: var(--salt-text-label-fontFamily); line-height: var(--salt-text-label-lineHeight); letter-spacing: var(--salt-text-letterSpacing); min-height: calc(var(--salt-size-base) + var(--salt-spacing-100)); padding: calc(var(--salt-spacing-100) + var(--salt-spacing-25)) var(--salt-spacing-100); display: flex; box-sizing: border-box; } .saltOptionGroup { border-top: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-separable-tertiary-borderColor); } .saltOptionGroup:first-of-type { border-top: 0; } /* src/option/OptionList.css */ .saltOptionList { background: var(--salt-container-primary-background); border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-selectable-borderColor-selected); border-radius: var(--salt-palette-corner, 0); overflow: hidden; overflow-y: auto; position: relative; z-index: var(--salt-zIndex-flyover); box-shadow: var(--salt-overlayable-shadow-popout); box-sizing: border-box; max-height: var(--overlay-maxHeight); min-width: var(--overlay-minWidth); } .saltOptionList-container { display: flex; flex-direction: column; gap: var(--salt-spacing-fixed-100); max-height: inherit; min-height: inherit; } .saltOptionList-collapsed { display: none; } /* src/overlay/OverlayHeader.css */ .saltOverlayHeader { padding: var(--salt-spacing-100); width: 100%; display: flex; flex-direction: row; justify-content: stretch; gap: var(--salt-spacing-100); box-sizing: border-box; } .saltOverlayHeader-container { flex-grow: 1; margin: 0; display: flex; flex-direction: column; gap: var(--salt-spacing-50); padding-top: calc((var(--salt-size-base) - var(--salt-text-h4-lineHeight)) / 2); align-items: flex-start; } .saltOverlayHeader-header { margin: 0; } .saltOverlayHeader-actionsContainer { align-self: flex-start; } .saltOverlayHeader ~ .saltOverlayPanelContent { padding-top: 0; } /* src/overlay/OverlayPanel.css */ .saltOverlayPanel { --overlay-borderColor: var(--saltOverlay-borderColor, var(--salt-container-primary-borderColor)); --overlay-background: var(--saltOverlay-background, var(--salt-container-primary-background)); font-family: var(--salt-text-fontFamily); font-size: var(--saltOverlay-fontSize, var(--salt-text-fontSize)); font-weight: var(--saltOverlay-fontWeight, var(--salt-text-fontWeight)); line-height: var(--saltOverlay-lineHeight, var(--salt-text-lineHeight)); border-color: var(--overlay-borderColor); border-style: var(--saltOverlay-borderStyle, var(--salt-borderStyle-solid)); border-width: var(--saltOverlay-borderWidth, var(--salt-size-fixed-100)); border-radius: var(--saltOverlay-borderRadius, var(--salt-palette-corner, 0)); background: var(--overlay-background); box-shadow: var(--saltOverlay-boxShadow, var(--salt-overlayable-shadow-popout)); color: var(--saltOverlay-text-color, var(--salt-content-primary-foreground)); z-index: var(--saltOverlay-zIndex, var(--salt-zIndex-flyover)); width: max-content; } /* src/overlay/OverlayPanelCloseButton.css */ .saltOverlayPanelCloseButton { position: absolute; right: 0; z-index: 1; } .saltOverlayPanelCloseButton-button.saltButton-secondary { position: sticky; right: 0; top: 0; } .saltOverlayPanelCloseButton ~ .saltOverlayPanelContent { padding-right: var(--salt-spacing-400); } /* src/overlay/OverlayPanelContent.css */ .saltOverlayPanelContent { animation: var(--salt-animation-fade-in-center); position: relative; overflow: hidden; padding: var(--saltOverlay-content-padding, var(--salt-spacing-100)); } .saltOverlayPanelContent-overflow { padding-right: var(--salt-spacing-100); border-top: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) transparent; border-bottom: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) transparent; overflow-y: auto; } .saltOverlayPanelContent-overflow.saltOverlayPanelContent-scroll-top { border-top: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-separable-tertiary-borderColor); } /* src/pagination/CompactInput.css */ .saltCompactInput { --saltInput-paddingLeft: 0; --saltInput-paddingRight: 0; } .saltCompactInput-defaultSize.saltInput { --saltInput-minWidth: var(--salt-size-base); width: var(--salt-size-base); } /* src/pagination/CompactPaginator.css */ .saltCompactPaginator { flex-wrap: nowrap; display: flex; gap: var(--salt-spacing-100); align-items: center; } .saltCompactPaginator-arrowButton { --saltButton-width: var(--salt-size-base); --saltButton-height: var(--salt-size-base); --saltButton-padding: var(--salt-spacing-100); } /* src/pagination/GoToInput.css */ .saltGoToInput.saltFormField { display: flex; flex-direction: row; gap: var(--salt-spacing-100); align-items: baseline; text-wrap: nowrap; } .saltGoToInput-input { height: var(--salt-size-base); --saltInput-minWidth: unset; } .saltGoToInput-inputDefaultSize { --saltInput-minWidth: var(--salt-size-base); max-width: var(--salt-size-base); width: var(--salt-size-base); } /* src/pagination/PageButton.css */ .saltPageButton { min-width: var(--salt-size-base); font-weight: var(--salt-text-fontWeight); height: var(--salt-size-base); color: var(--salt-content-primary-foreground); background: var(--salt-selectable-background); appearance: none; box-sizing: border-box; padding: 0 var(--salt-spacing-100); border: none; font-size: var(--salt-text-fontSize); font-family: var(--salt-text-fontFamily); line-height: var(--salt-text-lineHeight); letter-spacing: var(--salt-text-letterSpacing); cursor: var(--salt-cursor-hover); border-radius: var(--salt-palette-corner-weak); } .saltPageButton:hover, .saltPageButton:focus-visible { background: var(--salt-selectable-background-hover); } .saltPageButton:active { background: var(--salt-selectable-background-selected); } .saltPageButton:focus-visible { outline: var(--salt-focused-outline); } .saltPageButton:disabled { color: var(--salt-content-secondary-foreground); background: var(--salt-selectable-background); cursor: var(--salt-cursor-readonly); } .saltPageButton[aria-current=page] { border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-selectable-borderColor-selected); background: var(--salt-selectable-background-selected); } .saltPageButton-fixed { padding: 0; } /* src/pagination/PageRanges.css */ .saltPageRanges-ellipsis { display: inline-flex; width: var(--salt-size-base); height: var(--salt-size-base); line-height: var(--salt-size-base); justify-content: center; } /* src/pagination/Pagination.css */ .saltPagination { display: flex; flex-direction: row; align-items: center; } /* src/pagination/Paginator.css */ .saltPaginator { display: flex; flex-wrap: nowrap; } .saltPaginator-arrowButton-previous.saltButton { margin: 0 var(--salt-spacing-100) 0 0; } .saltPaginator-arrowButton-next.saltButton { margin: 0 0 0 var(--salt-spacing-100); } /* src/panel/Panel.css */ .saltPanel-primary.saltPanel { --panel-background: var(--salt-container-primary-background); } .saltPanel-secondary.saltPanel { --panel-background: var(--salt-container-secondary-background); } .saltPanel-tertiary.saltPanel { --panel-background: var(--salt-container-tertiary-background); } .saltPanel { background: var(--saltPanel-background, var(--panel-background)); color: var(--saltPanel-color, inherit); height: var(--saltPanel-height, 100%); overflow: auto; padding: var(--saltPanel-padding, var(--salt-spacing-300)); width: var(--saltPanel-width, 100%); border-radius: var(--saltPanel-borderRadius, var(--salt-palette-corner, 0)); box-sizing: border-box; } /* src/parent-child-layout/ParentChildLayout.css */ .saltParentChildLayout { display: flex; gap: var(--parentChildLayout-gap); } .saltParentChildLayout-child { flex-grow: 1; } .saltParentChildLayout-collapsed { width: 100%; } .saltParentChildLayout-childAnimation { animation: var(--salt-animation-slide-in-right); } .saltParentChildLayout-parentAnimation { animation: var(--salt-animation-slide-in-left); } @media (prefers-reduced-motion) { .saltParentChildLayout-parentAnimation { animation: var(--salt-animation-fade-in-center); } .saltParentChildLayout-childAnimation { animation: var(--salt-animation-fade-in-center); } } /* src/pill/Pill.css */ .saltPill { --pill-borderWidth: var(--salt-size-fixed-100); appearance: none; display: inline-flex; align-items: center; background: var(--saltPill-background, var(--pill-background)); border-radius: var(--salt-palette-corner-weaker, 0); border-style: solid; border-width: var(--pill-borderWidth); border-color: var(--pill-borderColor); height: calc(var(--salt-size-base) - var(--salt-spacing-100)); min-height: var(--salt-text-minHeight); position: relative; gap: var(--salt-spacing-50); padding: 0 calc(var(--salt-spacing-50) - var(--pill-borderWidth)); color: var(--saltPill-color, var(--pill-color)); font-family: var(--salt-text-fontFamily); font-size: var(--salt-text-fontSize); font-weight: var(--salt-text-fontWeight); line-height: var(--salt-text-lineHeight); letter-spacing: var(--salt-text-letterSpacing); overflow: hidden; white-space: nowrap; } .saltPill-clickable { --pill-background: var(--salt-actionable-bold-background); --pill-color: var(--salt-actionable-bold-foreground); --pill-borderColor: var(--salt-actionable-bold-borderColor); cursor: var(--salt-cursor-hover); } .saltPill-clickable:hover, .saltPill-clickable:focus-visible { --pill-color: var(--salt-actionable-bold-foreground-hover); --pill-background: var(--salt-actionable-bold-background-hover); --pill-borderColor: var(--salt-actionable-bold-borderColor-hover); } .saltPill-clickable.saltPill-active, .saltPill-clickable:active { --pill-color: var(--salt-actionable-bold-foreground-active); --pill-background: var(--salt-actionable-bold-background-active); --pill-borderColor: var(--salt-actionable-bold-borderColor-active); } .saltPill:focus-visible { outline: var(--salt-focused-outline); } .saltPill[aria-expanded=true][aria-haspopup=menu] { --pill-color: var(--salt-actionable-bold-foreground-active); --pill-background: var(--salt-actionable-bold-background-active); --pill-borderColor: var(--salt-actionable-bold-borderColor-active); } .saltPill:disabled, .saltPill:disabled:hover { --pill-color: var(--salt-actionable-bold-foreground); --pill-background: var(--salt-actionable-bold-background); --pill-borderColor: var(--salt-actionable-bold-borderColor); cursor: var(--salt-cursor-disabled); opacity: 0.4; } /* src/pill/PillCheckIcon.css */ .saltPillCheckIcon { --checkbox-size: var(--salt-size-selectable); width: var(--checkbox-size); min-width: var(--checkbox-size); height: var(--checkbox-size); min-height: var(--checkbox-size); border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid); border-radius: var(--salt-palette-corner-weaker, 0); position: relative; --saltIcon-size: 100%; display: flex; pointer-events: none; clip-path: border-box; box-sizing: border-box; } .saltPillCheckIcon > svg { pointer-events: none; position: absolute; transform: scale(1.01); } /* src/pill/PillGroup.css */ .saltPillGroup { border: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--salt-spacing-50); } /* src/pill-input/PillInput.css */ .saltPillInput { align-items: center; background: var(--saltPillInput-background, var(--pillInput-background)); border-radius: var(--salt-palette-corner-weak, 0); color: var(--saltPillInput-color, var(--salt-content-primary-foreground)); display: inline-flex; font-family: var(--salt-text-fontFamily); font-size: var(--saltPillInput-fontSize, var(--salt-text-fontSize)); line-height: var(--saltPillInput-lineHeight, var(--salt-text-lineHeight)); letter-spacing: var(--salt-text-letterSpacing); min-height: var(--saltPillInput-minHeight, var(--salt-size-base)); min-width: var(--saltPillInput-minWidth, 4em); padding-left: var(--saltPillInput-paddingLeft, var(--salt-spacing-100)); padding-right: var(--saltPillInput-paddingRight, var(--salt-spacing-100)); position: relative; width: 100%; box-sizing: border-box; overflow: hidden; } .saltPillInput-truncate { height: var(--salt-size-base); } .saltPillInput-truncate .saltPillInput-inputWrapper { flex-wrap: nowrap; } .saltPillInput:hover { cursor: var(--salt-cursor-text); } .saltPillInput-bordered.saltPillInput { --pillInput-borderWidth: var(--salt-size-fixed-100); border: var(--pillInput-borderWidth) var(--salt-borderStyle-solid) var(--pillInput-borderColor); } .saltPillInput-bordered.saltPillInput:hover { border-style: var(--salt-borderStyle-solid); border-color: var(--pillInput-borderColor-hover); } .saltPillInput-bordered.saltPillInput-focused, .saltPillInput-bordered.saltPillInput-focused:hover { border-style: var(--salt-borderStyle-solid); border-color: var(--pillInput-borderColor-active); } .saltPillInput-bordered.saltPillInput-readOnly, .saltPillInput-bordered.saltPillInput-readOnly:hover { border-style: var(--salt-borderStyle-solid); border-color: var(--salt-editable-borderColor-readonly); } .saltPillInput-bordered.saltPillInput-disabled, .saltPillInput-bordered.saltPillInput-disabled:hover { border-style: var(--salt-borderStyle-solid); border-color: var(--salt-editable-borderColor-disabled); } .saltPillInput-activationIndicator { left: 0; bottom: 0; width: 100%; position: absolute; border-bottom: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--pillInput-borderColor); } .saltPillInput:hover .saltPillInput-activationIndicator { border-bottom-style: var(--salt-borderStyle-solid); border-bottom-color: var(--pillInput-borderColor-hover); } .saltPillInput-focused .saltPillInput-activationIndicator, .saltPillInput-focused:hover .saltPillInput-activationIndicator { border-bottom: var(--salt-size-fixed-200) var(--salt-borderStyle-solid) var(--pillInput-borderColor-active); } .saltPillInput-readOnly .saltPillInput-activationIndicator, .saltPillInput-readOnly:hover .saltPillInput-activationIndicator { border-bottom-style: var(--salt-borderStyle-solid); border-bottom-color: var(--salt-editable-borderColor-readonly); } .saltPillInput-disabled .saltPillInput-activationIndicator, .saltPillInput-disabled:hover .saltPillInput-activationIndicator { border-bottom-style: var(--salt-borderStyle-solid); border-bottom-color: var(--salt-editable-borderColor-disabled); } .saltPillInput-bordered .saltPillInput-activationIndicator, .saltPillInput-bordered.saltPillInput-readOnly .saltPillInput-activationIndicator, .saltPillInput-bordered.saltPillInput-disabled:hover .saltPillInput-activationIndicator { border-bottom-width: 0; } .saltPillInput-bordered.saltPillInput-focused .saltPillInput-activationIndicator { border-bottom-width: calc(var(--salt-size-fixed-200) - var(--pillInput-borderWidth)); } .saltPillInput-primary { --pillInput-background: var(--salt-editable-primary-background); --pillInput-background-disabled: var(--salt-editable-primary-background-disabled); --pillInput-background-readonly: var(--salt-editable-background-readonly); --pillInput-borderColor: var(--salt-editable-borderColor); --pillInput-borderColor-active: var(--salt-editable-borderColor-active); --pillInput-borderColor-hover: var(--salt-editable-borderColor-hover); --pillInput-outlineColor: var(--salt-focused-outlineColor); } .saltPillInput-secondary { --pillInput-background: var(--salt-editable-secondary-background); --pillInput-background-disabled: var(--salt-editable-secondary-background-disabled); --pillInput-background-readonly: var(--salt-editable-background-readonly); --pillInput-borderColor: var(--salt-editable-borderColor); --pillInput-borderColor-active: var(--salt-editable-borderColor-active); --pillInput-borderColor-hover: var(--salt-editable-borderColor-hover); --pillInput-outlineColor: var(--salt-focused-outlineColor); } .saltPillInput-tertiary { --pillInput-background: var(--salt-editable-tertiary-background); --pillInput-background-readonly: var(--salt-editable-background-readonly); --pillInput-borderColor: var(--salt-editable-borderColor); --pillInput-borderColor-active: var(--salt-editable-borderColor-active); --pillInput-borderColor-hover: var(--salt-editable-borderColor-hover); --pillInput-outlineColor: var(--salt-focused-outlineColor); } .saltPillInput-error { --pillInput-background: var(--salt-status-error-background); --pillInput-background-readonly: var(--salt-status-error-background); --pillInput-borderColor: var(--salt-status-error-borderColor); --pillInput-borderColor-active: var(--salt-status-error-borderColor); --pillInput-borderColor-hover: var(--salt-status-error-borderColor); --pillInput-outlineColor: var(--salt-status-error-borderColor); } .saltPillInput-warning { --pillInput-background: var(--salt-status-warning-background); --pillInput-background-readonly: var(--salt-status-warning-background); --pillInput-borderColor: var(--salt-status-warning-borderColor); --pillInput-borderColor-active: var(--salt-status-warning-borderColor); --pillInput-borderColor-hover: var(--salt-status-warning-borderColor); --pillInput-outlineColor: var(--salt-status-warning-borderColor); } .saltPillInput-success { --pillInput-background: var(--salt-status-success-background); --pillInput-background-readonly: var(--salt-status-success-background); --pillInput-borderColor: var(--salt-status-success-borderColor); --pillInput-borderColor-active: var(--salt-status-success-borderColor); --pillInput-borderColor-hover: var(--salt-status-success-borderColor); --pillInput-outlineColor: var(--salt-status-success-borderColor); } .saltPillInput-focused, .saltPillInput-focused:hover { cursor: var(--salt-cursor-text); outline: var(--saltPillInput-outline, var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--pillInput-outlineColor)); } .saltPillInput.saltPillInput-readOnly { background: var(--pillInput-background-readonly); cursor: var(--salt-cursor-readonly); } .saltPillInput-disabled, .saltPillInput-disabled:hover { background: var(--pillInput-background-disabled); cursor: var(--salt-cursor-disabled); color: var(--saltPillInput-color-disabled, var(--salt-content-primary-foreground-disabled)); } .saltPillInput-startAdornmentContainer { align-items: center; display: inline-flex; padding-right: var(--salt-spacing-100); column-gap: var(--salt-spacing-100); } .saltPillInput-endAdornmentContainer { align-items: center; display: inline-flex; padding-left: var(--salt-spacing-50); padding-top: var(--salt-spacing-50); column-gap: var(--salt-spacing-100); align-self: flex-start; } .saltPillInput-statusAdornmentContainer { align-self: flex-start; display: inline-flex; align-items: center; height: var(--salt-size-base); } .saltPillInput-readOnly .saltPillInput-startAdornmentContainer { margin-left: var(--salt-spacing-50); } .saltPillInput-startAdornmentContainer .saltButton ~ .saltButton { margin-left: calc(-1 * var(--salt-spacing-50)); } .saltPillInput-endAdornmentContainer .saltButton ~ .saltButton { margin-left: calc(-1 * var(--salt-spacing-50)); } .saltPillInput-startAdornmentContainer .saltButton:first-child { margin-left: calc(var(--salt-spacing-50) * -1); } .saltPillInput-endAdornmentContainer .saltButton:last-child { margin-right: calc(var(--salt-spacing-50) * -1); } .saltPillInput-startAdornmentContainer > .saltButton, .saltPillInput-endAdornmentContainer > .saltButton { --saltButton-padding: calc(var(--salt-spacing-50) - var(--button-borderWidth)); --saltButton-height: calc(var(--salt-size-base) - var(--salt-spacing-100)); --saltButton-borderRadius: var(--salt-palette-corner-weaker); } .saltPillInput-inputWrapper { display: flex; gap: var(--salt-spacing-50); align-items: center; flex: 1; padding: var(--salt-spacing-50) 0; flex-wrap: wrap; max-height: inherit; height: inherit; overflow-y: auto; box-sizing: border-box; } .saltPillInput-bordered > .saltPillInput-endAdornmentContainer { padding-top: calc(var(--salt-spacing-50) - var(--pillInput-borderWidth)); } .saltPillInput-bordered > .saltPillInput-inputWrapper { padding: calc(var(--salt-spacing-50) - var(--pillInput-borderWidth)) 0; } .saltPillInput-pillList { display: contents; } .saltPillInput-pillList div[role=listitem] { display: inline; } .saltPillInput-overflowIndicator { width: calc(var(--salt-size-base) - var(--salt-spacing-100)); height: calc(var(--salt-size-base) - var(--salt-spacing-100)); display: flex; align-items: center; justify-content: center; } .saltPillInput-input { background: none; border: none; box-sizing: content-box; color: inherit; cursor: inherit; display: block; flex: 1; font: inherit; height: 100%; letter-spacing: var(--saltPillInput-letterSpacing, 0); margin: 0; min-width: 0; overflow: hidden; padding: 0; text-align: var(--pillInput-textAlign, left); width: 100%; } .saltPillInput-input:focus { outline: none; } .saltPillInput-disabled .saltPillInput-input::selection { background: none; } .saltPillInput-input::placeholder { color: var(--salt-content-secondary-foreground); font-weight: var(--salt-text-fontWeight-small); } /* src/radio-button/RadioButton.css */ .saltRadioButton { display: inline-flex; width: fit-content; gap: var(--salt-spacing-100); cursor: var(--salt-cursor-hover); position: relative; font-size: var(--salt-text-fontSize); line-height: var(--salt-text-lineHeight); font-family: var(--salt-text-fontFamily); font-weight: var(--salt-text-fontWeight); --radioButton-icon-margin: calc((var(--salt-text-lineHeight) - var(--salt-size-selectable)) / 2); } .saltRadioButton-disabled { color: var(--salt-content-primary-foreground); cursor: var(--salt-cursor-disabled); opacity: 0.4; } .saltRadioButton-readOnly { color: var(--salt-content-primary-foreground); cursor: var(--salt-cursor-readonly); } .saltRadioButton-input { cursor: inherit; position: absolute; height: var(--salt-size-selectable); opacity: 0; padding: 0; width: var(--salt-size-selectable); z-index: var(--salt-zIndex-default); } .saltRadioButton-input, .saltRadioButtonIcon { margin: var(--radioButton-icon-margin) 0; box-sizing: border-box; } .saltRadioButton-input:focus-visible + .saltRadioButtonIcon { outline: var(--saltRadioButton-outline, var(--salt-focused-outline)); outline-offset: var(--salt-spacing-fixed-100); border-color: var(--salt-selectable-borderColor-hover); color: var(--salt-selectable-foreground-hover); clip-path: unset; } .saltRadioButton-input:focus-visible + .saltRadioButtonIcon-checked { border-color: var(--salt-selectable-borderColor-selected); color: var(--salt-selectable-foreground-selected); } .saltRadioButton-error .saltRadioButton-input:focus-visible + .saltRadioButtonIcon { outline-color: var(--salt-status-error-foreground-decorative); border-color: var(--salt-status-error-borderColor); color: var(--salt-status-error-foreground-decorative); } .saltRadioButton-warning .saltRadioButton-input:focus-visible + .saltRadioButtonIcon { outline-color: var(--salt-status-warning-foreground-decorative); border-color: var(--salt-status-warning-borderColor); color: var(--salt-status-warning-foreground-decorative); } /* src/radio-button/RadioButtonGroup.css */ .saltRadioButtonGroup { border: none; margin: 0; padding: 0; } .saltRadioButtonGroup-vertical { display: flex; gap: var(--salt-spacing-100); flex-direction: column; } .saltRadioButtonGroup-horizontal { display: flex; gap: var(--salt-spacing-200); flex-direction: row; flex-wrap: wrap; } .saltRadioButtonGroup-noWrap { flex-wrap: nowrap; } .saltRadioButtonGroup-noWrap .saltRadioButton { white-space: break-spaces; } .saltFormField-labelLeft .saltRadioButtonGroup, .saltFormField-labelRight .saltRadioButtonGroup { padding-top: var(--salt-spacing-100); } /* src/radio-button/RadioButtonIcon.css */ .saltRadioButtonIcon { --radioButton-size: var(--salt-size-selectable); width: var(--radioButton-size); height: var(--radioButton-size); min-width: var(--radioButton-size); min-height: var(--radioButton-size); border-radius: 50%; position: relative; border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-selectable-borderColor); color: var(--salt-selectable-foreground); background: var(--salt-container-primary-background); --saltIcon-size: 100%; display: flex; clip-path: border-box; box-sizing: border-box; } .saltRadioButton:hover .saltRadioButtonIcon { border-color: var(--salt-selectable-borderColor-hover); color: var(--salt-selectable-foreground-hover); } .saltRadioButtonIcon-checked, .saltRadioButton:hover .saltRadioButtonIcon-checked { border-color: var(--salt-selectable-borderColor-selected); color: var(--salt-selectable-foreground-selected); } .saltRadioButtonIcon-disabled, .saltRadioButton:hover .saltRadioButtonIcon-disabled { opacity: 0.4; border-color: var(--salt-selectable-borderColor); background: var(--salt-container-primary-background); color: var(--salt-selectable-foreground); } .saltRadioButtonIcon-checked.saltRadioButtonIcon-disabled, .saltRadioButton:hover .saltRadioButtonIcon-checked.saltRadioButtonIcon-disabled { border-color: var(--salt-selectable-borderColor-selected); color: var(--salt-selectable-foreground-selected); } .saltRadioButtonIcon-error, .saltRadioButton:hover .saltRadioButtonIcon-error { color: var(--salt-status-error-foreground-decorative); border-color: var(--salt-status-error-borderColor); outline-color: var(--salt-status-error-foreground-decorative); } .saltRadioButtonIcon-warning, .saltRadioButton:hover .saltRadioButtonIcon-warning { color: var(--salt-status-warning-foreground-decorative); border-color: var(--salt-status-warning-borderColor); outline-color: var(--salt-status-warning-foreground-decorative); } .saltRadioButtonIcon-readOnly, .saltRadioButton:hover .saltRadioButtonIcon-readOnly, .saltRadioButton-input:focus-visible + .saltRadioButtonIcon-readOnly { border-color: var(--salt-selectable-borderColor-readonly); border-style: var(--salt-borderStyle-dashed); color: var(--salt-content-primary-foreground); } .saltRadioButtonIcon > svg { position: absolute; transform: scale(1.01); } /* src/salt-provider/SaltProvider.css */ .salt-provider { display: contents; } /* src/scrim/Scrim.css */ .saltScrim { top: 0; left: 0; right: 0; width: 100%; bottom: 0; height: 100%; display: flex; z-index: calc(var(--salt-zIndex-drawer) - 1); position: absolute; align-items: center; justify-content: center; background: var(--saltScrim-background, var(--salt-overlayable-background)); -webkit-tap-highlight-color: transparent; } .saltScrim:focus { outline: none; } .saltScrim-fixed { position: fixed; } /* src/segmented-button-group/SegmentedButtonGroup.css */ .saltSegmentedButtonGroup { display: flex; flex-direction: row; background: var(--button-background); gap: var(--salt-spacing-fixed-100); } .saltSegmentedButtonGroup > .saltButton:not(:last-of-type)::after { content: ""; width: var(--salt-spacing-fixed-100); position: absolute; background: var(--button-background); right: calc(var(--salt-size-fixed-100) * -2); top: calc(var(--salt-size-fixed-100) * -1); bottom: calc(var(--salt-size-fixed-100) * -1); } .saltSegmentedButtonGroup > .saltButton:not(:first-of-type)::before { content: ""; width: var(--salt-spacing-fixed-100); position: absolute; background: var(--salt-separable-primary-borderColor); left: calc(var(--salt-size-fixed-100) * -2); top: calc(var(--salt-size-fixed-100) * -1); bottom: calc(var(--salt-size-fixed-100) * -1); } .saltSegmentedButtonGroup > .saltButton:not(:first-of-type) { border-bottom-left-radius: 0; border-top-left-radius: 0; } .saltSegmentedButtonGroup > .saltButton:not(:last-of-type) { border-bottom-right-radius: 0; border-top-right-radius: 0; } /* src/skip-link/SkipLink.css */ .saltSkipLink { top: 0; left: 0; opacity: 0; width: 1px; height: 1px; margin: 0; padding: 0; overflow: hidden; position: absolute; display: flex; align-items: center; box-sizing: border-box; color: var(--salt-content-primary-foreground); letter-spacing: var(--salt-text-letterSpacing); text-decoration: var(--salt-typography-textDecoration-underline); font-family: var(--salt-text-fontFamily); white-space: nowrap; background: var(--saltSkipLink-background, var(--salt-container-primary-background)); z-index: calc(var(--salt-zIndex-appHeader) + 1); } .saltSkipLink:focus { opacity: 1; width: auto; height: calc(var(--salt-size-base) + var(--salt-spacing-200)); padding: var(--salt-spacing-100) var(--salt-spacing-300); outline: var(--salt-focused-outline); outline-offset: calc(-1 * var(--salt-focused-outlineWidth)); box-shadow: var(--salt-overlayable-shadow); } @keyframes fade-out-back-outline { 0% { outline-color: var(--salt-focused-outlineColor); } 100% { outline-color: transparent; } } .saltSkipLink-target { animation: fade-out-back-outline var(--salt-duration-notable) var(--salt-animation-timing-function) both; outline: var(--salt-focused-outline); } @media (prefers-reduced-motion: reduce) { .saltSkipLink-target { animation: none; } } /* src/spinner/Spinner.css */ .saltSpinner { position: relative; } .saltSpinner-gradientStop { stop-color: var(--saltSpinner-gradient-color, var(--salt-sentiment-accent-background)); } .saltSpinner-medium { --spinner-strokeWidth: var(--salt-size-bar); height: var(--salt-size-base); width: var(--salt-size-base); } .saltSpinner-large { --spinner-strokeWidth: var(--salt-size-bar); height: calc(var(--salt-size-base) * 2); width: calc(var(--salt-size-base) * 2); } .saltSpinner-small { --spinner-strokeWidth: var(--salt-size-fixed-200); height: var(--salt-size-icon); width: var(--salt-size-icon); } .saltSpinner-spinner { animation: spinner 0.9s linear infinite; width: 100%; height: 100%; position: absolute; left: 0; top: 0; } @keyframes spinner { 0% { transform: rotate(0); } 100% { transform: rotate(360deg); } } /* src/split-layout/SplitLayout.css */ .saltSplitLayout { flex-grow: 1; } /* src/stack-layout/StackLayout.css */ .saltStackLayout { --stackLayout-separator-weight: var(--salt-size-fixed-100, 1); } .saltStackLayout-separator > * { position: relative; } .saltStackLayout-separator > *:not(:last-child)::after { position: absolute; display: block; content: ""; background-color: var(--salt-separable-secondary-borderColor); } .saltStackLayout-separator-start { --stackLayout-seperator-offset: calc(var(--stackLayout-separator-weight) * -1); } .saltStackLayout-separator-center { --stackLayout-seperator-offset: calc((var(--stackLayout-gap) * -0.5) + (var(--stackLayout-separator-weight) * -0.5)); } .saltStackLayout-separator-end { --stackLayout-seperator-offset: calc(var(--stackLayout-gap) * -1); } .saltStackLayout-row.saltStackLayout-separator > *:not(:last-child)::after { height: 100%; width: var(--stackLayout-separator-weight); right: var(--stackLayout-seperator-offset); top: 0; } .saltStackLayout-column.saltStackLayout-separator > *:not(:last-child)::after { width: 100%; height: var(--stackLayout-separator-weight); bottom: var(--stackLayout-seperator-offset); left: 0; } /* src/status-adornment/StatusAdornment.css */ .saltStatusAdornment { align-self: center; display: inline-block; fill: var(--saltStatusAdornment-color, var(--statusAdornment-color)); height: var(--salt-size-adornment); min-height: var(--salt-size-adornment); padding-left: var(--salt-spacing-100); position: relative; } .saltStatusAdornment-error { --statusAdornment-color: var(--salt-status-error-foreground-decorative); } .saltStatusAdornment-warning { --statusAdornment-color: var(--salt-status-warning-foreground-decorative); } .saltStatusAdornment-success { --statusAdornment-color: var(--salt-status-success-foreground-decorative); } /* src/status-indicator/StatusIndicator.css */ .saltStatusIndicator { --statusIndicator-warning-color: var(--salt-status-warning-foreground-decorative); --statusIndicator-info-color: var(--salt-status-info-foreground-decorative); --statusIndicator-success-color: var(--salt-status-success-foreground-decorative); --statusIndicator-error-color: var(--salt-status-error-foreground-decorative); color: var(--saltStatusIndicator-color, var(--statusIndicator-Color)); } .saltStatusIndicator-error { --statusIndicator-Color: var(--statusIndicator-error-color); } .saltStatusIndicator-warning { --statusIndicator-Color: var(--statusIndicator-warning-color); } .saltStatusIndicator-success { --statusIndicator-Color: var(--statusIndicator-success-color); } .saltStatusIndicator-info { --statusIndicator-Color: var(--statusIndicator-info-color); } /* src/stepper/Step.css */ .saltStep { --step-icon-base-size: var(--salt-size-icon); --step-icon-size-multiplier: var(--saltIcon-size-multiplier, 1.5); --step-icon-size: calc(var(--step-icon-base-size) * var(--step-icon-size-multiplier)); --step-depth: var(--saltStep-depth, 0); } .saltStepper-horizontal .saltStep { position: relative; display: grid; grid-template-columns: 1fr; grid-template-rows: repeat(3, min-content); grid-template-areas: "icon" "label" "description"; justify-items: center; align-items: center; text-align: center; flex: 1; padding: 0 var(--salt-spacing-25); } .saltStepper-vertical .saltStep { display: grid; grid-template-columns: var(--step-icon-size) 1fr min-content; grid-template-areas: "icon label expand" "connector description ." "stepper stepper stepper"; justify-items: start; align-items: start; gap: 0 var(--salt-spacing-100); width: 100%; transition-duration: inherit; transition-timing-function: inherit; transition-property: grid-template-rows; } .saltStepper-vertical .saltStep-terminal { grid-template-areas: "icon label label" "connector description description" "stepper stepper stepper"; } .saltStepper-vertical > .saltStep.saltStep-expanded { grid-template-rows: var(--salt-size-base) min-content 1fr; } .saltStepper-vertical > .saltStep.saltStep-collapsed { grid-template-rows: var(--salt-size-base) min-content 0fr; } /* src/stepper/Stepper.css */ .saltStepper { grid-area: stepper; width: 100%; height: 100%; margin: 0; padding: 0; list-style-type: none; transition-duration: var(--salt-duration-perceptible); transition-timing-function: ease-in-out; transition-property: opacity, visibility; } @media (prefers-reduced-motion) { .saltStepper { transition-duration: var(--salt-duration-instant); } } .saltStepper-horizontal { display: flex; flex-direction: row; } .saltStepper-vertical { display: flex; flex-direction: column; overflow: hidden; } .saltStepper-vertical > .saltStep.saltStep-expanded > .saltStepper { opacity: 1; visibility: visible; } .saltStepper-vertical > .saltStep.saltStep-collapsed > .saltStepper { opacity: 0; visibility: hidden; } /* src/switch/Switch.css */ .saltSwitch { display: flex; width: fit-content; gap: var(--salt-spacing-100); position: relative; cursor: var(--salt-cursor-hover); color: var(--salt-content-primary-foreground); font-family: var(--salt-text-fontFamily); font-size: var(--salt-text-fontSize); font-weight: var(--salt-text-fontWeight); line-height: var(--salt-text-lineHeight); } .saltSwitch-disabled { color: var(--salt-content-primary-foreground); cursor: var(--salt-cursor-disabled); opacity: 0.4; } .saltSwitch-track { border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-selectable-borderColor); --saltIcon-size: 100%; border-radius: var(--salt-palette-corner-weak, 0); display: flex; flex-shrink: 0; height: calc(var(--salt-size-base) - var(--salt-spacing-100)); width: calc((var(--salt-size-selectable) + var(--salt-spacing-25) + var(--salt-size-fixed-100)) * 2); align-items: center; color: var(--salt-selectable-foreground); background: var(--salt-container-primary-background); box-sizing: border-box; } .saltSwitch-label { padding-top: var(--salt-spacing-25); } .saltSwitch-input:focus-visible + .saltSwitch-track { outline-offset: var(--salt-focused-outlineOffset); outline: var(--salt-focused-outline); border-color: var(--salt-selectable-borderColor-hover); color: var(--salt-selectable-foreground-hover); } .saltSwitch:hover .saltSwitch-track { border-color: var(--salt-selectable-borderColor-hover); color: var(--salt-selectable-foreground-hover); } .saltSwitch-checked .saltSwitch-track, .saltSwitch-checked:hover .saltSwitch-track { border-color: var(--salt-selectable-borderColor-selected); color: var(--salt-selectable-foreground-selected); } .saltSwitch-disabled .saltSwitch-track, .saltSwitch-disabled:hover .saltSwitch-track { border-color: var(--salt-selectable-borderColor); color: var(--salt-selectable-foreground); background: var(--salt-container-primary-background); } .saltSwitch-checked.saltSwitch-disabled .saltSwitch-track, .saltSwitch-checked.saltSwitch-disabled:hover .saltSwitch-track { border-color: var(--salt-selectable-borderColor-selected); color: var(--salt-selectable-foreground-selected); } .saltSwitch-thumb { display: flex; aspect-ratio: 1; height: var(--salt-size-selectable); background: currentColor; margin: var(--salt-spacing-25); border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-selectable-borderColor); box-sizing: border-box; border-radius: var(--salt-palette-corner-weaker, 0); } .saltSwitch-input:focus-visible + .saltSwitch-track .saltSwitch-thumb, .saltSwitch:hover .saltSwitch-thumb { border-color: var(--salt-selectable-borderColor-hover); transition: transform var(--salt-duration-perceptible) ease-in-out; } .saltSwitch-checked .saltSwitch-thumb, .saltSwitch-checked:hover .saltSwitch-thumb { background: transparent; border-color: var(--salt-selectable-borderColor-selected); transform: translateX(100%); } .saltSwitch-disabled .saltSwitch-thumb, .saltSwitch-disabled:hover .saltSwitch-thumb { border: 0; } .saltSwitch-input { cursor: inherit; left: 0; margin: 0; opacity: 0; padding: 0; position: absolute; top: 0; z-index: var(--salt-zIndex-default); height: calc(var(--salt-size-base) - var(--salt-spacing-100)); width: calc((var(--salt-size-selectable) + var(--salt-spacing-25) + var(--salt-size-fixed-100)) * 2); } .saltSwitch-readOnly { cursor: var(--salt-cursor-text); } .saltSwitch-readOnly .saltSwitch-track, .saltSwitch-readOnly:hover .saltSwitch-track { border-color: var(--salt-selectable-borderColor-readonly); color: var(--salt-content-primary-foreground); } .saltSwitch-readOnly:hover .saltSwitch-thumb { border-color: var(--salt-selectable-borderColor-readonly); } .saltSwitch-readOnly .saltSwitch-thumb, .saltSwitch-readOnly.saltSwitch-checked .saltSwitch-thumb { background: var(--salt-container-primary-background); border: var(--salt-size-fixed-100) var(--salt-borderStyle-dashed) var(--salt-selectable-borderColor-readonly); } .saltSwitch-readOnly .saltSwitch-input:focus-visible + .saltSwitch-track, .saltSwitch-readOnly .saltSwitch-input:focus-visible + .saltSwitch-track .saltSwitch-thumb { border-color: var(--salt-selectable-borderColor-readonly); color: var(--salt-content-primary-foreground); } @media (prefers-reduced-motion) { .saltSwitch-input:focus-visible + .saltSwitch-track .saltSwitch-thumb, .saltSwitch:hover .saltSwitch-thumb { transition: none; } } .salt-density-high .saltSwitch-thumb { border: 0; } .salt-density-high .saltSwitch-readOnly .saltSwitch-thumb { border: var(--salt-size-fixed-100) var(--salt-borderStyle-dashed) var(--salt-selectable-borderColor-readonly); } .saltFormField-labelRight .saltSwitch, .saltFormField-labelLeft .saltSwitch { padding-top: var(--salt-spacing-50); padding-bottom: var(--salt-spacing-50); } /* src/table/Table.css */ .saltTable { --table-header-height: calc(var(--salt-size-base) + var(--salt-spacing-100) + var(--salt-size-fixed-100)); --table-footer-height: calc(var(--salt-size-base) + var(--salt-spacing-100) + var(--salt-size-fixed-100)); --table-row-height: calc(var(--salt-size-base) + var(--salt-spacing-100) + var(--salt-size-fixed-100)); } .saltTable-primary { --table-background: var(--salt-container-primary-background); } .saltTable-secondary { --table-background: var(--salt-container-secondary-background); } .saltTable-tertiary { --table-background: var(--salt-container-tertiary-background); } .saltTable-divider-primary { --table-divider-color: var(--salt-separable-primary-borderColor); } .saltTable-divider-secondary { --table-divider-color: var(--salt-separable-secondary-borderColor); } .saltTable-divider-tertiary { --table-divider-color: var(--salt-separable-tertiary-borderColor); } table.saltTable-zebra-tertiary tbody tr:nth-of-type(odd) { --table-background: var(--salt-container-tertiary-background); } table.saltTable-primary.saltTable-zebra tbody tr:nth-of-type(odd) { --table-background: var(--salt-container-secondary-background); } table.saltTable-secondary.saltTable-zebra tbody tr:nth-of-type(odd) { --table-background: var(--salt-container-primary-background); } table.saltTable-tertiary.saltTable-zebra tbody tr:nth-of-type(odd) { --table-background: var(--salt-container-primary-background); } table.saltTable { border-spacing: 0; border-radius: var(--salt-palette-corner, 0); border-collapse: collapse; color: var(--salt-content-primary-foreground); font-family: var(--salt-text-fontFamily); font-size: var(--salt-text-fontSize); line-height: var(--salt-text-lineHeight); width: 100%; } table.saltTable tr { background: var(--table-background); } table.saltTable tbody tr { height: var(--table-row-height); min-height: var(--table-row-height); } table.saltTable tbody tr:not(:last-child) { border-bottom: var(--salt-borderStyle-solid) var(--table-divider-color) var(--salt-size-fixed-100); } table.saltTable.saltTable-divider-none tbody tr { --table-divider-color: transparent; } table.saltTable thead { border-start-start-radius: var(--salt-palette-corner); border-start-end-radius: var(--salt-palette-corner); color: var(--salt-content-secondary-foreground); height: var(--table-header-height); min-height: var(--table-header-height); font-size: var(--salt-text-label-fontSize); font-weight: var(--salt-text-label-fontWeight-strong); line-height: var(--salt-text-label-lineHeight); } table.saltTable thead.saltTable-thead-sticky { position: sticky; top: 0; } table.saltTable thead.saltTable-thead-primary tr { background: var(--salt-container-primary-background); } table.saltTable thead.saltTable-thead-secondary tr { background: var(--salt-container-secondary-background); } table.saltTable thead.saltTable-thead-tertiary tr { background: var(--salt-container-tertiary-background); } table.saltTable thead.saltTable-thead tr { border-bottom: var(--salt-borderStyle-solid) var(--table-header-divider-color) var(--salt-size-fixed-100); } table.saltTable thead.saltTable-thead-divider-primary { --table-header-divider-color: var(--salt-separable-primary-borderColor); } table.saltTable thead.saltTable-thead-divider-secondary { --table-header-divider-color: var(--salt-separable-secondary-borderColor); } table.saltTable thead.saltTable-thead-divider-tertiary { --table-header-divider-color: var(--salt-separable-tertiary-borderColor); } table.saltTable thead.saltTable-thead-divider-none { --table-header-divider-color: transparent; } table.saltTable tfoot { border-end-start-radius: var(--salt-palette-corner); border-end-end-radius: var(--salt-palette-corner); color: var(--salt-content-primary-foreground); height: var(--table-footer-height); min-height: var(--table-footer-height); font-size: var(--salt-text-fontSize); line-height: var(--salt-text-lineHeight); font-weight: var(--salt-text-fontWeight-strong); } table.saltTable tfoot.saltTable-tfoot-sticky { position: sticky; bottom: 0; } table.saltTable tfoot.saltTable-tfoot tr { border-top: var(--salt-borderStyle-solid) var(--table-footer-divider-color) var(--salt-size-fixed-100); } table.saltTable tfoot.saltTable-tfoot-primary tr { background: var(--salt-container-primary-background); } table.saltTable tfoot.saltTable-tfoot-secondary tr { background: var(--salt-container-secondary-background); } table.saltTable tfoot.saltTable-tfoot-tertiary tr { background: var(--salt-container-tertiary-background); } table.saltTable tfoot.saltTable-tfoot-divider-primary tr { --table-footer-divider-color: var(--salt-separable-primary-borderColor); } table.saltTable tfoot.saltTable-tfoot-divider-secondary tr { --table-footer-divider-color: var(--salt-separable-secondary-borderColor); } table.saltTable tfoot.saltTable-tfoot-divider-tertiary tr { --table-footer-divider-color: var(--salt-separable-tertiary-borderColor); } table.saltTable tfoot.saltTable-tfoot-divider-none tr { --table-footer-divider-color: transparent; } table.saltTable th { padding: calc(var(--salt-spacing-75) + var(--salt-spacing-50)) var(--salt-spacing-100); padding-top: calc(var(--salt-spacing-75) + var(--salt-spacing-50) + var(--salt-size-fixed-100)); position: relative; text-align: start; vertical-align: top; font-weight: inherit; } table.saltTable th.saltTable-th-align-left { text-align: start; } table.saltTable th.saltTable-th-align-right { text-align: end; } table.saltTable tbody th[scope=row] { font-weight: var(--salt-text-fontWeight-strong); line-height: var(--salt-text-lineHeight); } table.saltTable th + th::before { background: var(--salt-separable-tertiary-borderColor); content: ""; position: absolute; z-index: 1; display: block; width: var(--salt-size-fixed-100); height: calc(100% - var(--salt-spacing-200)); left: 0; top: var(--salt-spacing-100); } table.saltTable td { height: 100%; vertical-align: top; padding: calc(var(--salt-spacing-75) + var(--salt-spacing-50)) var(--salt-spacing-100); } table.saltTable td.saltTable-td-align-left { text-align: start; } table.saltTable td.saltTable-td-align-right { text-align: end; } .saltTable-container { width: 100%; overflow: auto; } /* src/tag/Tag.css */ .saltTag { height: calc(var(--salt-size-base) - var(--salt-spacing-100)); min-height: var(--salt-text-minHeight); display: flex; column-gap: var(--salt-spacing-50); align-items: center; padding: var(--salt-spacing-25) var(--salt-spacing-100); font-family: var(--salt-text-fontFamily); font-size: var(--salt-text-fontSize); font-weight: var(--salt-text-fontWeight); line-height: var(--salt-text-lineHeight); overflow: hidden; border-radius: var(--saltTag-borderRadius, var(--salt-palette-corner-strongest, 9999px)); width: fit-content; min-width: max-content; box-sizing: border-box; } .saltTag-primary { background: var(--tag-primary-background, var(--salt-category-1-background)); color: var(--tag-primary-foreground, var(--salt-category-1-foreground)); border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) transparent; } .saltTag-bordered { border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--tag-primary-borderColor, var(--salt-category-1-borderColor)); } .saltTag-secondary { background: var(--tag-secondary-background, var(--salt-category-1-bold-background)); color: var(--salt-content-bold-foreground); border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) transparent; } .saltTag-category-1 { --tag-primary-background: var(--salt-category-1-background); --tag-primary-foreground: var(--salt-category-1-foreground); --tag-primary-borderColor: var(--salt-category-1-borderColor); --tag-secondary-background: var(--salt-category-1-bold-background); } .saltTag-category-2 { --tag-primary-background: var(--salt-category-2-background); --tag-primary-foreground: var(--salt-category-2-foreground); --tag-primary-borderColor: var(--salt-category-2-borderColor); --tag-secondary-background: var(--salt-category-2-bold-background); } .saltTag-category-3 { --tag-primary-background: var(--salt-category-3-background); --tag-primary-foreground: var(--salt-category-3-foreground); --tag-primary-borderColor: var(--salt-category-3-borderColor); --tag-secondary-background: var(--salt-category-3-bold-background); } .saltTag-category-4 { --tag-primary-background: var(--salt-category-4-background); --tag-primary-foreground: var(--salt-category-4-foreground); --tag-primary-borderColor: var(--salt-category-4-borderColor); --tag-secondary-background: var(--salt-category-4-bold-background); } .saltTag-category-5 { --tag-primary-background: var(--salt-category-5-background); --tag-primary-foreground: var(--salt-category-5-foreground); --tag-primary-borderColor: var(--salt-category-5-borderColor); --tag-secondary-background: var(--salt-category-5-bold-background); } .saltTag-category-6 { --tag-primary-background: var(--salt-category-6-background); --tag-primary-foreground: var(--salt-category-6-foreground); --tag-primary-borderColor: var(--salt-category-6-borderColor); --tag-secondary-background: var(--salt-category-6-bold-background); } .saltTag-category-7 { --tag-primary-background: var(--salt-category-7-background); --tag-primary-foreground: var(--salt-category-7-foreground); --tag-primary-borderColor: var(--salt-category-7-borderColor); --tag-secondary-background: var(--salt-category-7-bold-background); } .saltTag-category-8 { --tag-primary-background: var(--salt-category-8-background); --tag-primary-foreground: var(--salt-category-8-foreground); --tag-primary-borderColor: var(--salt-category-8-borderColor); --tag-secondary-background: var(--salt-category-8-bold-background); } .saltTag-category-9 { --tag-primary-background: var(--salt-category-9-background); --tag-primary-foreground: var(--salt-category-9-foreground); --tag-primary-borderColor: var(--salt-category-9-borderColor); --tag-secondary-background: var(--salt-category-9-bold-background); } .saltTag-category-10 { --tag-primary-background: var(--salt-category-10-background); --tag-primary-foreground: var(--salt-category-10-foreground); --tag-primary-borderColor: var(--salt-category-10-borderColor); --tag-secondary-background: var(--salt-category-10-bold-background); } .saltTag-category-11 { --tag-primary-background: var(--salt-category-11-background); --tag-primary-foreground: var(--salt-category-11-foreground); --tag-primary-borderColor: var(--salt-category-11-borderColor); --tag-secondary-background: var(--salt-category-11-bold-background); } .saltTag-category-12 { --tag-primary-background: var(--salt-category-12-background); --tag-primary-foreground: var(--salt-category-12-foreground); --tag-primary-borderColor: var(--salt-category-12-borderColor); --tag-secondary-background: var(--salt-category-12-bold-background); } .saltTag-category-13 { --tag-primary-background: var(--salt-category-13-background); --tag-primary-foreground: var(--salt-category-13-foreground); --tag-primary-borderColor: var(--salt-category-13-borderColor); --tag-secondary-background: var(--salt-category-13-bold-background); } .saltTag-category-14 { --tag-primary-background: var(--salt-category-14-background); --tag-primary-foreground: var(--salt-category-14-foreground); --tag-primary-borderColor: var(--salt-category-14-borderColor); --tag-secondary-background: var(--salt-category-14-bold-background); } .saltTag-category-15 { --tag-primary-background: var(--salt-category-15-background); --tag-primary-foreground: var(--salt-category-15-foreground); --tag-primary-borderColor: var(--salt-category-15-borderColor); --tag-secondary-background: var(--salt-category-15-bold-background); } .saltTag-category-16 { --tag-primary-background: var(--salt-category-16-background); --tag-primary-foreground: var(--salt-category-16-foreground); --tag-primary-borderColor: var(--salt-category-16-borderColor); --tag-secondary-background: var(--salt-category-16-bold-background); } .saltTag-category-17 { --tag-primary-background: var(--salt-category-17-background); --tag-primary-foreground: var(--salt-category-17-foreground); --tag-primary-borderColor: var(--salt-category-17-borderColor); --tag-secondary-background: var(--salt-category-17-bold-background); } .saltTag-category-18 { --tag-primary-background: var(--salt-category-18-background); --tag-primary-foreground: var(--salt-category-18-foreground); --tag-primary-borderColor: var(--salt-category-18-borderColor); --tag-secondary-background: var(--salt-category-18-bold-background); } .saltTag-category-19 { --tag-primary-background: var(--salt-category-19-background); --tag-primary-foreground: var(--salt-category-19-foreground); --tag-primary-borderColor: var(--salt-category-19-borderColor); --tag-secondary-background: var(--salt-category-19-bold-background); } .saltTag-category-20 { --tag-primary-background: var(--salt-category-20-background); --tag-primary-foreground: var(--salt-category-20-foreground); --tag-primary-borderColor: var(--salt-category-20-borderColor); --tag-secondary-background: var(--salt-category-20-bold-background); } /* src/text/Text.css */ .saltText { --text-color: currentColor; } .saltText { color: var(--saltText-color, var(--text-color)); font-family: var(--saltText-fontFamily, var(--salt-text-fontFamily)); font-size: var(--saltText-fontSize, var(--salt-text-fontSize)); line-height: var(--saltText-lineHeight, var(--salt-text-lineHeight)); font-weight: var(--saltText-fontWeight, var(--salt-text-fontWeight)); letter-spacing: var(--salt-text-letterSpacing); } .saltText-lineClamp { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: var(--text-max-rows, 0); overflow: hidden; word-break: break-word; } .saltText-primary { --text-color: var(--salt-content-primary-foreground); } .saltText-primary.saltText-disabled { --text-color: var(--salt-content-primary-foreground-disabled); } .saltText-secondary { --text-color: var(--salt-content-secondary-foreground); } .saltText-secondary.saltText-disabled { --text-color: var(--salt-content-secondary-foreground-disabled); } .saltText-info { --text-color: var(--salt-status-info-foreground-informative); } .saltText-error { --text-color: var(--salt-status-error-foreground-informative); } .saltText-warning { --text-color: var(--salt-status-warning-foreground-informative); } .saltText-success { --text-color: var(--salt-status-success-foreground-informative); } .saltText strong { font-weight: var(--salt-text-fontWeight-strong); } .saltText small { font-size: inherit; font-weight: var(--salt-text-fontWeight-small); } .saltText-notation.saltText { font-family: var(--salt-text-notation-fontFamily); font-size: var(--salt-text-notation-fontSize); line-height: var(--salt-text-notation-lineHeight); font-weight: var(--salt-text-fontWeight); } .saltText-notation.saltText strong { font-weight: var(--salt-text-notation-fontWeight-strong); } .saltText-notation.saltText small { font-size: inherit; font-weight: var(--salt-text-notation-fontWeight-small); } .saltText-action.saltText { font-family: var(--salt-text-action-fontFamily); letter-spacing: var(--salt-text-action-letterSpacing); text-transform: var(--salt-text-action-textTransform); text-align: var(--salt-text-action-textAlign); font-weight: var(--salt-text-action-fontWeight); } .saltText-action.saltText strong { font-weight: var(--salt-text-action-fontWeight-strong); } .saltText-action.saltText small { font-size: inherit; font-weight: var(--salt-text-action-fontWeight-small); } code.saltText, .saltText-code.saltText { font-family: var(--salt-text-code-fontFamily); } .saltText-display1.saltText { font-family: var(--salt-text-display1-fontFamily); font-size: var(--salt-text-display1-fontSize); font-weight: var(--salt-text-display1-fontWeight); line-height: var(--salt-text-display1-lineHeight); } .saltText-display1.saltText strong { font-size: inherit; font-weight: var(--salt-text-display1-fontWeight-strong); } .saltText-display1.saltText small { font-size: inherit; font-weight: var(--salt-text-display1-fontWeight-small); } .saltText-display2.saltText { font-family: var(--salt-text-display2-fontFamily); font-size: var(--salt-text-display2-fontSize); font-weight: var(--salt-text-display2-fontWeight); line-height: var(--salt-text-display2-lineHeight); } .saltText-display2.saltText strong { font-size: inherit; font-weight: var(--salt-text-display2-fontWeight-strong); } .saltText-display2.saltText small { font-size: inherit; font-weight: var(--salt-text-display2-fontWeight-small); } .saltText-display3.saltText { font-family: var(--salt-text-display3-fontFamily); font-size: var(--salt-text-display3-fontSize); font-weight: var(--salt-text-display3-fontWeight); line-height: var(--salt-text-display3-lineHeight); } .saltText-display3.saltText strong { font-size: inherit; font-weight: var(--salt-text-display3-fontWeight-strong); } .saltText-display3.saltText small { font-size: inherit; font-weight: var(--salt-text-display3-fontWeight-small); } .saltText-display4.saltText { font-family: var(--salt-text-display4-fontFamily); font-size: var(--salt-text-display4-fontSize); font-weight: var(--salt-text-display4-fontWeight); line-height: var(--salt-text-display4-lineHeight); } .saltText-display4.saltText strong { font-size: inherit; font-weight: var(--salt-text-display4-fontWeight-strong); } .saltText-display4.saltText small { font-size: inherit; font-weight: var(--salt-text-display4-fontWeight-small); } h1.saltText, .saltText-h1.saltText { font-family: var(--salt-text-h1-fontFamily); font-size: var(--salt-text-h1-fontSize); font-weight: var(--salt-text-h1-fontWeight); line-height: var(--salt-text-h1-lineHeight); } h1.saltText strong, .saltText-h1.saltText strong { font-weight: var(--salt-text-h1-fontWeight-strong); } h1.saltText small, .saltText-h1.saltText small { font-size: inherit; font-weight: var(--salt-text-h1-fontWeight-small); } h2.saltText, .saltText-h2.saltText { font-family: var(--salt-text-h2-fontFamily); font-size: var(--salt-text-h2-fontSize); font-weight: var(--salt-text-h2-fontWeight); line-height: var(--salt-text-h2-lineHeight); } h2.saltText strong, .saltText-h2.saltText strong { font-weight: var(--salt-text-h2-fontWeight-strong); } h2.saltText small, .saltText-h2.saltText small { font-size: inherit; font-weight: var(--salt-text-h2-fontWeight-small); } h3.saltText, .saltText-h3.saltText { font-family: var(--salt-text-h3-fontFamily); font-size: var(--salt-text-h3-fontSize); font-weight: var(--salt-text-h3-fontWeight); line-height: var(--salt-text-h3-lineHeight); } h3.saltText strong, .saltText-h3.saltText strong { font-weight: var(--salt-text-h3-fontWeight-strong); } h3.saltText small, .saltText-h3.saltText small { font-size: inherit; font-weight: var(--salt-text-h3-fontWeight-small); } h4.saltText, .saltText-h4.saltText { font-family: var(--salt-text-h4-fontFamily); font-size: var(--salt-text-h4-fontSize); font-weight: var(--salt-text-h4-fontWeight); line-height: var(--salt-text-h4-lineHeight); } h4.saltText strong, .saltText-h4.saltText strong { font-weight: var(--salt-text-h4-fontWeight-strong); } h4.saltText small, .saltText-h4.saltText small { font-size: inherit; font-weight: var(--salt-text-h4-fontWeight-small); } label.saltText, .saltText-label.saltText { font-family: var(--salt-text-label-fontFamily); font-size: var(--salt-text-label-fontSize); line-height: var(--salt-text-label-lineHeight); font-weight: var(--salt-text-fontWeight); } label.saltText strong, .saltText-label.saltText strong { font-weight: var(--salt-text-label-fontWeight-strong); } label.saltText small, .saltText-label.saltText small { font-size: inherit; font-weight: var(--salt-text-fontWeight-small); } /* src/toast/Toast.css */ .saltToast { --toast-background: var(--salt-container-primary-background); --toast-borderColor: var(--salt-container-primary-borderColor); --toast-iconColor: var(--salt-content-primary-foreground); background: var(--saltToast-background, var(--toast-background)); border-color: var(--saltToast-borderColor, var(--toast-borderColor)); border-width: var(--saltToast-borderWidth, var(--salt-size-fixed-100)); border-style: var(--saltToast-borderStyle, var(--salt-borderStyle-solid)); border-radius: var(--saltToast-borderRadius, var(--salt-palette-corner, 0)); box-sizing: border-box; box-shadow: var(--salt-overlayable-shadow-popout); display: flex; gap: var(--salt-spacing-75); padding: var(--saltToast-padding, var(--salt-spacing-100)); min-height: calc(var(--salt-size-base) + var(--salt-spacing-100)); margin: 0 var(--salt-spacing-100) var(--salt-spacing-100) var(--salt-spacing-100); font-family: var(--salt-text-fontFamily); font-size: var(--salt-text-fontSize); font-weight: var(--salt-text-fontWeight); line-height: var(--salt-text-lineHeight); } .saltToast:last-child { margin-bottom: var(--salt-spacing-200); } .saltToast-iconContainer > .saltIcon { margin-top: calc(var(--salt-spacing-75) + calc((var(--salt-text-lineHeight) - max(var(--salt-size-icon), 12px)) / 2)); color: var(--toast-iconColor); } .saltToast-info { --toast-borderColor: var(--salt-status-info-borderColor); --toast-iconColor: var(--salt-status-info-foreground-decorative); } .saltToast-error { --toast-borderColor: var(--salt-status-error-borderColor); --toast-iconColor: var(--salt-status-error-foreground-decorative); } .saltToast-warning { --toast-borderColor: var(--salt-status-warning-borderColor); --toast-iconColor: var(--salt-status-warning-foreground-decorative); } .saltToast-success { --toast-borderColor: var(--salt-status-success-borderColor); --toast-iconColor: var(--salt-status-success-foreground-decorative); } /* src/toast/ToastContent.css */ .saltToastContent { flex: 1 0; margin: var(--salt-spacing-75) 0; } /* src/toggle-button/ToggleButton.css */ .saltToggleButton { --toggleButton-borderWidth: var(--salt-size-fixed-100); align-items: center; appearance: none; background: var(--toggleButton-background); border-color: var(--toggleButton-borderColor, transparent); border-style: solid; border-width: var(--toggleButton-borderWidth); border-radius: var(--salt-palette-corner-weak, 0); box-sizing: border-box; color: var(--toggleButton-text-color); cursor: var(--salt-cursor-hover); display: inline-flex; gap: var(--salt-spacing-50); height: var(--salt-size-base); justify-content: center; line-height: var(--salt-text-lineHeight); font-size: var(--salt-text-fontSize); font-weight: var(--salt-text-action-fontWeight); font-family: var(--salt-text-action-fontFamily); letter-spacing: var(--salt-text-action-letterSpacing); text-transform: var(--salt-text-action-textTransform); padding: 0 calc(var(--salt-spacing-100) - var(--toggleButton-borderWidth)); margin: 0; min-width: unset; position: relative; text-align: var(--salt-text-action-textAlign); text-decoration: none; transition: none; width: auto; -webkit-appearance: none; -webkit-tap-highlight-color: transparent; } .saltToggleButton:focus-visible { outline-style: var(--salt-focused-outlineStyle); outline-width: var(--salt-focused-outlineWidth); outline-color: var(--salt-focused-outlineColor); outline-offset: var(--salt-focused-outlineOffset); background: var(--toggleButton-background-hover); color: var(--toggleButton-text-color-hover); border-color: var(--toggleButton-borderColor-hover); } @media (hover: hover) { .saltToggleButton:hover { background: var(--toggleButton-background-hover); color: var(--toggleButton-text-color-hover); border-color: var(--toggleButton-borderColor-hover); } } .saltToggleButton:active { background: var(--toggleButton-background-active); color: var(--toggleButton-text-color-active); border-color: var(--toggleButton-borderColor-active); } .saltToggleButton[aria-checked=true], .saltToggleButton[aria-pressed=true] { background: var(--toggleButton-background-selected); color: var(--toggleButton-text-color-selected); cursor: var(--salt-cursor-active); border-color: var(--toggleButton-borderColor-selected); } .saltToggleButton[aria-checked=true]:hover { cursor: unset; } .saltToggleButton[aria-pressed=true]:hover { background: var(--toggleButton-background-selectedHover); border-color: var(--toggleButton-borderColor-selectedHover); } .saltToggleButton[aria-disabled=true] { background: var(--toggleButton-background); color: var(--toggleButton-text-color); cursor: var(--salt-cursor-disabled); border-color: var(--toggleButton-borderColor); opacity: 0.4; } .saltToggleButton[aria-checked=true].saltToggleButton[aria-disabled=true], .saltToggleButton[aria-pressed=true].saltToggleButton[aria-disabled=true] { background: var(--toggleButton-background-selected); color: var(--toggleButton-text-color-selected); border-color: var(--toggleButton-borderColor-selected); } .saltToggleButton.saltToggleButton-readOnly { background: var(--toggleButton-background); color: var(--toggleButton-text-color); cursor: var(--salt-cursor-disabled); border-color: var(--toggleButton-borderColor); opacity: 0.4; } .saltToggleButton[aria-checked=true].saltToggleButton-readOnly, .saltToggleButton[aria-pressed=true].saltToggleButton-readOnly { background: var(--toggleButton-background-selected); color: var(--toggleButton-text-color-selected); border-color: var(--toggleButton-borderColor-selected); opacity: unset; } .saltToggleButton-neutral.saltToggleButton-solid { --toggleButton-text-color: var(--salt-actionable-subtle-foreground); --toggleButton-text-color-hover: var(--salt-actionable-subtle-foreground-hover); --toggleButton-text-color-active: var(--salt-actionable-subtle-foreground-active); --toggleButton-text-color-selected: var(--salt-actionable-foreground-selected); --toggleButton-background: var(--salt-actionable-subtle-background); --toggleButton-background-hover: var(--salt-actionable-subtle-background-hover); --toggleButton-background-active: var(--salt-actionable-subtle-background-active); --toggleButton-background-selected: var(--salt-actionable-background-selected); --toggleButton-borderColor: var(--salt-actionable-subtle-borderColor); --toggleButton-borderColor-hover: var(--salt-actionable-subtle-borderColor-hover); --toggleButton-borderColor-active: var(--salt-actionable-subtle-borderColor-active); --toggleButton-borderColor-selected: var(--salt-actionable-borderColor-selected); --toggleButton-borderColor-selectedHover: var(--salt-actionable-bold-borderColor-hover); --toggleButton-background-selectedHover: var(--salt-actionable-bold-background-hover); } .saltToggleButton-accented.saltToggleButton-solid { --toggleButton-text-color: var(--salt-actionable-accented-subtle-foreground); --toggleButton-text-color-hover: var(--salt-actionable-accented-subtle-foreground-hover); --toggleButton-text-color-active: var(--salt-actionable-accented-subtle-foreground-active); --toggleButton-text-color-selected: var(--salt-actionable-accented-foreground-selected); --toggleButton-background: var(--salt-actionable-accented-subtle-background); --toggleButton-background-hover: var(--salt-actionable-accented-subtle-background-hover); --toggleButton-background-active: var(--salt-actionable-accented-subtle-background-active); --toggleButton-background-selected: var(--salt-actionable-accented-background-selected); --toggleButton-borderColor: var(--salt-actionable-accented-subtle-borderColor); --toggleButton-borderColor-hover: var(--salt-actionable-accented-subtle-borderColor-hover); --toggleButton-borderColor-active: var(--salt-actionable-accented-subtle-borderColor-active); --toggleButton-borderColor-selected: var(--salt-actionable-accented-borderColor-selected); --toggleButton-borderColor-selectedHover: var(--salt-actionable-accented-bold-borderColor-hover); --toggleButton-background-selectedHover: var(--salt-actionable-accented-bold-background-hover); } .saltToggleButton-positive.saltToggleButton-solid { --toggleButton-text-color: var(--salt-actionable-positive-subtle-foreground); --toggleButton-text-color-hover: var(--salt-actionable-positive-subtle-foreground-hover); --toggleButton-text-color-active: var(--salt-actionable-positive-subtle-foreground-active); --toggleButton-text-color-selected: var(--salt-actionable-positive-foreground-selected); --toggleButton-background: var(--salt-actionable-positive-subtle-background); --toggleButton-background-hover: var(--salt-actionable-positive-subtle-background-hover); --toggleButton-background-active: var(--salt-actionable-positive-subtle-background-active); --toggleButton-background-selected: var(--salt-actionable-positive-background-selected); --toggleButton-borderColor: var(--salt-actionable-positive-subtle-borderColor); --toggleButton-borderColor-hover: var(--salt-actionable-positive-subtle-borderColor-hover); --toggleButton-borderColor-active: var(--salt-actionable-positive-subtle-borderColor-active); --toggleButton-borderColor-selected: var(--salt-actionable-positive-borderColor-selected); --toggleButton-borderColor-selectedHover: var(--salt-actionable-positive-bold-borderColor-hover); --toggleButton-background-selectedHover: var(--salt-actionable-accented-bold-background-hover); } .saltToggleButton-negative.saltToggleButton-solid { --toggleButton-text-color: var(--salt-actionable-negative-subtle-foreground); --toggleButton-text-color-hover: var(--salt-actionable-negative-subtle-foreground-hover); --toggleButton-text-color-active: var(--salt-actionable-negative-subtle-foreground-active); --toggleButton-text-color-selected: var(--salt-actionable-negative-foreground-selected); --toggleButton-background: var(--salt-actionable-negative-subtle-background); --toggleButton-background-hover: var(--salt-actionable-negative-subtle-background-hover); --toggleButton-background-active: var(--salt-actionable-negative-subtle-background-active); --toggleButton-background-selected: var(--salt-actionable-negative-background-selected); --toggleButton-borderColor: var(--salt-actionable-negative-subtle-borderColor); --toggleButton-borderColor-hover: var(--salt-actionable-negative-subtle-borderColor-hover); --toggleButton-borderColor-active: var(--salt-actionable-negative-subtle-borderColor-active); --toggleButton-borderColor-selected: var(--salt-actionable-negative-borderColor-selected); --toggleButton-borderColor-selectedHover: var(--salt-actionable-negative-bold-borderColor-hover); --toggleButton-background-selectedHover: var(--salt-actionable-negative-bold-background-hover); } .saltToggleButton-caution.saltToggleButton-solid { --toggleButton-text-color: var(--salt-actionable-caution-subtle-foreground); --toggleButton-text-color-hover: var(--salt-actionable-caution-subtle-foreground-hover); --toggleButton-text-color-active: var(--salt-actionable-caution-subtle-foreground-active); --toggleButton-text-color-selected: var(--salt-actionable-caution-foreground-selected); --toggleButton-background: var(--salt-actionable-caution-subtle-background); --toggleButton-background-hover: var(--salt-actionable-caution-subtle-background-hover); --toggleButton-background-active: var(--salt-actionable-caution-subtle-background-active); --toggleButton-background-selected: var(--salt-actionable-caution-background-selected); --toggleButton-borderColor: var(--salt-actionable-caution-subtle-borderColor); --toggleButton-borderColor-hover: var(--salt-actionable-caution-subtle-borderColor-hover); --toggleButton-borderColor-active: var(--salt-actionable-caution-subtle-borderColor-active); --toggleButton-borderColor-selected: var(--salt-actionable-caution-borderColor-selected); --toggleButton-borderColor-selectedHover: var(--salt-actionable-caution-bold-borderColor-hover); --toggleButton-background-selectedHover: var(--salt-actionable-caution-bold-background-hover); } .saltToggleButton-neutral.saltToggleButton-bordered { --toggleButton-text-color: var(--salt-actionable-foreground); --toggleButton-text-color-hover: var(--salt-actionable-foreground-hover); --toggleButton-text-color-active: var(--salt-actionable-foreground); --toggleButton-text-color-selected: var(--salt-actionable-foreground-selected); --toggleButton-background: var(--salt-actionable-background); --toggleButton-background-hover: var(--salt-actionable-background-hover); --toggleButton-background-active: var(--salt-actionable-background); --toggleButton-background-selected: var(--salt-actionable-background-selected); --toggleButton-borderColor: var(--salt-actionable-borderColor); --toggleButton-borderColor-hover: var(--salt-actionable-borderColor); --toggleButton-borderColor-active: var(--salt-actionable-borderColor); --toggleButton-borderColor-selected: var(--salt-actionable-borderColor-selected); --toggleButton-borderColor-selectedHover: var(--salt-actionable-bold-borderColor-hover); --toggleButton-background-selectedHover: var(--salt-actionable-bold-background-hover); } .saltToggleButton-accented.saltToggleButton-bordered { --toggleButton-text-color: var(--salt-actionable-accented-foreground); --toggleButton-text-color-hover: var(--salt-actionable-accented-foreground-hover); --toggleButton-text-color-active: var(--salt-actionable-accented-foreground); --toggleButton-text-color-selected: var(--salt-actionable-accented-foreground-selected); --toggleButton-background: var(--salt-actionable-accented-background); --toggleButton-background-hover: var(--salt-actionable-accented-background-hover); --toggleButton-background-active: var(--salt-actionable-accented-background); --toggleButton-background-selected: var(--salt-actionable-accented-background-selected); --toggleButton-borderColor: var(--salt-actionable-accented-borderColor); --toggleButton-borderColor-hover: var(--salt-actionable-accented-borderColor); --toggleButton-borderColor-active: var(--salt-actionable-accented-borderColor); --toggleButton-borderColor-selected: var(--salt-actionable-accented-borderColor-selected); --toggleButton-borderColor-selectedHover: var(--salt-actionable-accented-bold-borderColor-hover); --toggleButton-background-selectedHover: var(--salt-actionable-accented-bold-background-hover); } .saltToggleButton-positive.saltToggleButton-bordered { --toggleButton-text-color: var(--salt-actionable-positive-foreground); --toggleButton-text-color-hover: var(--salt-actionable-positive-foreground-hover); --toggleButton-text-color-active: var(--salt-actionable-positive-foreground); --toggleButton-text-color-selected: var(--salt-actionable-positive-foreground-selected); --toggleButton-background: var(--salt-actionable-positive-background); --toggleButton-background-hover: var(--salt-actionable-positive-background-hover); --toggleButton-background-active: var(--salt-actionable-positive-background); --toggleButton-background-selected: var(--salt-actionable-positive-background-selected); --toggleButton-borderColor: var(--salt-actionable-positive-borderColor); --toggleButton-borderColor-hover: var(--salt-actionable-positive-borderColor); --toggleButton-borderColor-active: var(--salt-actionable-positive-borderColor); --toggleButton-borderColor-selected: var(--salt-actionable-positive-borderColor-selected); --toggleButton-borderColor-selectedHover: var(--salt-actionable-positive-bold-borderColor-hover); --toggleButton-background-selectedHover: var(--salt-actionable-positive-bold-background-hover); } .saltToggleButton-negative.saltToggleButton-bordered { --toggleButton-text-color: var(--salt-actionable-negative-foreground); --toggleButton-text-color-hover: var(--salt-actionable-negative-foreground-hover); --toggleButton-text-color-active: var(--salt-actionable-negative-foreground); --toggleButton-text-color-selected: var(--salt-actionable-negative-foreground-selected); --toggleButton-background: var(--salt-actionable-negative-background); --toggleButton-background-hover: var(--salt-actionable-negative-background-hover); --toggleButton-background-active: var(--salt-actionable-negative-background); --toggleButton-background-selected: var(--salt-actionable-negative-background-selected); --toggleButton-borderColor: var(--salt-actionable-negative-borderColor); --toggleButton-borderColor-hover: var(--salt-actionable-negative-borderColor); --toggleButton-borderColor-active: var(--salt-actionable-negative-borderColor); --toggleButton-borderColor-selected: var(--salt-actionable-negative-borderColor-selected); --toggleButton-borderColor-selectedHover: var(--salt-actionable-negative-bold-borderColor-hover); --toggleButton-background-selectedHover: var(--salt-actionable-negative-bold-background-hover); } .saltToggleButton-caution.saltToggleButton-bordered { --toggleButton-text-color: var(--salt-actionable-caution-foreground); --toggleButton-text-color-hover: var(--salt-actionable-caution-foreground-hover); --toggleButton-text-color-active: var(--salt-actionable-caution-foreground); --toggleButton-text-color-selected: var(--salt-actionable-caution-foreground-selected); --toggleButton-background: var(--salt-actionable-caution-background); --toggleButton-background-hover: var(--salt-actionable-caution-background-hover); --toggleButton-background-active: var(--salt-actionable-caution-background); --toggleButton-background-selected: var(--salt-actionable-caution-background-selected); --toggleButton-borderColor: var(--salt-actionable-caution-borderColor); --toggleButton-borderColor-hover: var(--salt-actionable-caution-borderColor); --toggleButton-borderColor-active: var(--salt-actionable-caution-borderColor); --toggleButton-borderColor-selected: var(--salt-actionable-caution-borderColor-selected); --toggleButton-borderColor-selectedHover: var(--salt-actionable-caution-bold-borderColor-hover); --toggleButton-background-selectedHover: var(--salt-actionable-caution-bold-background-hover); } /* src/toggle-button-group/ToggleButtonGroup.css */ .saltToggleButtonGroup { --toggleButtonGroup-borderWidth: var(--salt-size-fixed-100); display: flex; background: var(--salt-container-primary-background); border: var(--toggleButtonGroup-borderWidth) var(--salt-borderStyle-solid) var(--salt-container-primary-borderColor); border-radius: var(--salt-palette-corner-weak, 0); width: fit-content; gap: var(--salt-spacing-50); padding: calc(var(--salt-spacing-50) - var(--toggleButtonGroup-borderWidth)); flex-direction: row; } .saltToggleButtonGroup-disabled { background: var(--salt-container-primary-background-disabled); border-color: var(--salt-container-primary-borderColor-disabled); cursor: var(--salt-cursor-disabled); } .saltToggleButtonGroup-readOnly { background: var(--salt-container-primary-background); border-color: var(--salt-container-primary-borderColor); cursor: var(--salt-cursor-disabled); } .saltToggleButtonGroup .saltToggleButton { border-radius: var(--salt-palette-corner-weaker, 0); } .saltToggleButtonGroup-horizontal .saltToggleButton { height: calc(var(--salt-size-base) - var(--salt-spacing-100)); } .saltToggleButtonGroup-vertical { flex-direction: column; } .saltToggleButtonGroup-vertical .saltToggleButton { justify-content: start; } /* src/toggletip/ToggletipPanel.css */ .saltToggletipPanel { --toggletip-background: var(--salt-container-primary-background); --toggletip-borderColor: var(--salt-container-primary-borderColor); box-sizing: border-box; padding: var(--salt-spacing-100); font-family: var(--salt-text-fontFamily); font-size: var(--salt-text-fontSize); font-weight: var(--salt-text-fontWeight); line-height: var(--salt-text-lineHeight); border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--toggletip-borderColor); border-radius: var(--salt-palette-corner-weak); background: var(--toggletip-background); box-shadow: var(--salt-overlayable-shadow-popout); color: var(--salt-content-primary-foreground); z-index: var(--salt-zIndex-flyover); max-width: 45ch; max-height: 100vh; } .saltToggletipPanel-content { max-height: 100%; overflow-y: auto; } .saltToggletipPanel-content:focus-visible { outline-offset: var(--salt-spacing-fixed-100); } /* src/toggletip/ToggletipTrigger.css */ .saltToggletipTrigger { box-sizing: border-box; align-items: center; appearance: none; display: inline-flex; gap: var(--salt-spacing-50); justify-content: center; font-size: var(--salt-text-fontSize); font-family: var(--salt-text-fontFamily); font-weight: var(--salt-text-fontWeight); line-height: var(--salt-text-lineHeight); letter-spacing: var(--salt-text-letterSpacing); padding: 0; margin: 0; min-height: var(--salt-size-icon); min-width: var(--salt-size-icon); position: relative; text-align: var(--salt-text-action-textAlign); text-decoration: none; transition: none; width: auto; -webkit-appearance: none; -webkit-tap-highlight-color: transparent; color: var(--salt-content-primary-foreground); background: transparent; border: none; cursor: var(--salt-cursor-hover); flex: 0; } .saltToggletipTrigger:focus-visible { outline: var(--salt-focused-outline); outline-offset: var(--salt-size-fixed-100); } /* src/tooltip/Tooltip.css */ .saltTooltip { --tooltip-background: var(--saltTooltip-background, var(--salt-container-primary-background)); --tooltip-zIndex: var(--saltTooltip-zIndex, var(--salt-zIndex-flyover)); --tooltip-icon-marginTop: calc((var(--salt-text-lineHeight) - max(var(--salt-size-icon), 12px)) / 2); --tooltip-status-borderColor: var(--salt-container-primary-borderColor); --tooltip-borderWidth: var(--salt-size-fixed-100); --tooltip-padding: calc(var(--salt-spacing-75) - var(--tooltip-borderWidth)) var(--salt-spacing-100); } .saltTooltip { box-sizing: border-box; background: var(--tooltip-background); border-color: var(--saltTooltip-borderColor, var(--tooltip-status-borderColor)); border-style: var(--saltTooltip-borderStyle, var(--salt-borderStyle-solid)); border-width: var(--saltTooltip-borderWidth, var(--tooltip-borderWidth)); border-radius: var(--saltTooltip-borderRadius, var(--salt-palette-corner-weak, 0)); box-shadow: var(--saltTooltip-shadow, var(--salt-overlayable-shadow-popout)); color: var(--saltTooltip-text-color, var(--salt-content-primary-foreground)); font-family: var(--salt-text-fontFamily); font-size: var(--saltTooltip-fontSize, var(--salt-text-fontSize)); font-weight: var(--saltTooltip-fontWeight, var(--salt-text-fontWeight)); line-height: var(--saltTooltip-lineHeight, var(--salt-text-lineHeight)); max-width: var(--saltTooltip-maxWidth, 60ch); padding: var(--saltTooltip-padding, var(--tooltip-padding)); position: relative; text-align: var(--saltTooltip-textAlign, left); z-index: var(--tooltip-zIndex); } .saltTooltip-container { display: flex; align-items: baseline; position: relative; } .saltTooltip-content { overflow: hidden; } .saltTooltip-icon { --saltIcon-margin: var(--tooltip-icon-marginTop) var(--salt-spacing-75) 0 0; vertical-align: top; align-self: flex-start; } .saltTooltip-info { --tooltip-status-borderColor: var(--salt-status-info-borderColor); } .saltTooltip-error { --tooltip-status-borderColor: var(--salt-status-error-borderColor); } .saltTooltip-warning { --tooltip-status-borderColor: var(--salt-status-warning-borderColor); } .saltTooltip-success { --tooltip-status-borderColor: var(--salt-status-success-borderColor); } /* src/vertical-navigation/VerticalNavigation.css */ .saltVerticalNavigation ol { display: flex; flex-direction: column; gap: var(--salt-spacing-fixed-100); list-style: none; padding: 0; margin: 0; position: relative; } .saltVerticalNavigationSubMenu > .saltDivider-horizontal, .saltVerticalNavigationItem > .saltDivider-horizontal, .saltVerticalNavigation ol > .saltDivider-horizontal { margin-bottom: calc(var(--salt-size-fixed-100) * -1); } .saltVerticalNavigation [data-has-direct-icons=false] .saltCollapsiblePanel-inner { margin-bottom: calc(var(--salt-size-fixed-100) * -1); } .saltVerticalNavigation [data-has-direct-icons=false] .saltCollapsiblePanel-inner .saltVerticalNavigationSubMenu { border-bottom: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-separable-tertiary-borderColor); } .saltVerticalNavigation .saltCollapsiblePanel-inner .saltCollapsiblePanel-inner, .saltVerticalNavigation .saltCollapsiblePanel[aria-hidden=true] .saltCollapsiblePanel-inner { margin-bottom: 0; } .saltVerticalNavigation .saltCollapsiblePanel-inner .saltCollapsiblePanel-inner .saltVerticalNavigationSubMenu, .saltVerticalNavigation .saltCollapsiblePanel[aria-hidden=true] .saltCollapsiblePanel-inner .saltVerticalNavigationSubMenu { border-bottom: none; } /* src/vertical-navigation/VerticalNavigationItemContent.css */ .saltVerticalNavigationItemContent { --verticalNavigationItem-iconPadding: calc(var(--saltVerticalNavigationItem-iconPaddingMultiplier, 0) * (var(--salt-size-icon) + var(--salt-spacing-100))); --verticalNavigationItem-depthPadding: calc(var(--salt-spacing-100) * max(0, calc(var(--verticalNavigationItem-depth, 0) - 1))); } .saltVerticalNavigation-indicator .saltVerticalNavigationItemContent { --verticalNavigationItem-paddingLeft: calc(var(--salt-spacing-150) + var(--salt-size-indicator) + var(--verticalNavigationItem-depthPadding) + var(--verticalNavigationItem-iconPadding)); --verticalNavigationItem-paddingBlock: var(--salt-spacing-50); } .saltVerticalNavigation-bordered .saltVerticalNavigationItemContent { --verticalNavigationItem-paddingLeft: calc(var(--salt-spacing-100) + var(--verticalNavigationItem-depthPadding) + var(--verticalNavigationItem-iconPadding)); --verticalNavigationItem-paddingBlock: calc(var(--salt-spacing-50) - var(--salt-size-fixed-100)); } .saltVerticalNavigationItemContent { display: flex; flex-direction: row; gap: var(--salt-spacing-100); appearance: none; -webkit-appearance: none; min-height: calc(var(--salt-size-base) + var(--salt-spacing-100)); min-width: 4em; padding: var(--verticalNavigationItem-paddingBlock) var(--salt-spacing-100) var(--verticalNavigationItem-paddingBlock) var(--verticalNavigationItem-paddingLeft); position: relative; flex-shrink: 0; box-sizing: border-box; border-radius: var(--salt-palette-corner-weak, 0); overflow: hidden; cursor: var(--salt-cursor-hover); color: var(--salt-content-primary-foreground); font-weight: var(--salt-text-h4-fontWeight); font-family: var(--salt-text-h4-fontFamily); text-align: var(--salt-text-textAlign); letter-spacing: var(--salt-text-letterSpacing); line-height: var(--salt-text-h4-lineHeight); font-size: var(--salt-text-h4-fontSize); } .saltVerticalNavigation-indicator .saltVerticalNavigationItemContent-active, .saltVerticalNavigation-indicator .saltVerticalNavigationItemContent-active:hover { background: var(--salt-navigable-accent-background-active); } .saltVerticalNavigation-indicator .saltVerticalNavigationItemContent::before { left: var(--salt-spacing-50); content: ""; position: absolute; top: var(--salt-spacing-50); bottom: var(--salt-spacing-50); border-radius: var(--salt-palette-corner-strongest); width: var(--salt-size-indicator); } .saltVerticalNavigation-indicator .saltVerticalNavigationItemContent-active::before { background: var(--salt-navigable-accent-indicator-active); } .saltVerticalNavigation-bordered .saltVerticalNavigationItemContent { border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) transparent; } .saltVerticalNavigation-bordered .saltVerticalNavigationItemContent-active, .saltVerticalNavigation-bordered .saltVerticalNavigationItemContent-active:hover { background: var(--salt-navigable-accent-background-active); border-color: var(--salt-navigable-accent-borderColor-active); } .saltVerticalNavigationItemContent .saltIcon, .saltVerticalNavigationItemContent .saltBadge { min-height: var(--salt-text-lineHeight); } .saltVerticalNavigationItemContent-focused { outline: var(--salt-focused-outline); outline-offset: calc(var(--salt-size-fixed-100) * -2); z-index: 1; } .saltVerticalNavigationItemContent:hover { background: var(--salt-overlayable-background-hover); } .saltVerticalNavigation .saltVerticalNavigationItemContent-active, .saltVerticalNavigation .saltVerticalNavigationSubMenu .saltVerticalNavigationItemContent-active { font-weight: var(--salt-text-h4-fontWeight); } @supports selector(:has(*)) { .saltVerticalNavigationItemContent-active:hover:has(.saltVerticalNavigationItemTrigger[aria-controls]) { background: linear-gradient(var(--salt-overlayable-background-hover), var(--salt-overlayable-background-hover)) var(--salt-navigable-accent-background-active); } } /* src/vertical-navigation/VerticalNavigationItemLabel.css */ .saltVerticalNavigationItemLabel { flex: 1; } .saltVerticalNavigationItemLabel + .saltVerticalNavigationItemExpansionIcon { padding: 0 var(--salt-spacing-100); } /* src/vertical-navigation/VerticalNavigationItemTrigger.css */ .saltVerticalNavigationItemTrigger { all: unset; padding: var(--salt-spacing-75) 0; display: flex; gap: var(--salt-spacing-100); width: 100%; } .saltVerticalNavigationItemTrigger::before { content: ""; display: block; width: 100%; position: absolute; height: 100%; left: 0; top: 0; } .saltVerticalNavigationItemTrigger:focus-visible { outline: none; } /* src/vertical-navigation/VerticalNavigationSubMenu.css */ .saltVerticalNavigationSubMenu { display: flex; flex-direction: column; gap: var(--salt-spacing-fixed-100); list-style: none; padding: var(--salt-spacing-fixed-100) 0 0; margin: 0; } .saltVerticalNavigationSubMenu .saltVerticalNavigationItemContent { font-weight: var(--salt-text-h4-fontWeight-small); } /* src/progress/CircularProgress/CircularProgress.css */ .saltCircularProgress { color: var(--salt-content-primary-foreground); display: inline-flex; position: relative; } .saltCircularProgress-progressLabel { align-items: center; color: var(--salt-content-primary-foreground); display: flex; height: 100%; justify-content: center; left: 0; position: absolute; width: 100%; } .saltCircularProgress-track { inline-size: calc(var(--salt-size-base) * 3); block-size: calc(var(--salt-size-base) * 3); outline-style: var(--salt-borderStyle-solid); outline-width: var(--salt-size-bar); outline-offset: calc(var(--salt-size-bar) * -1.5); border-radius: calc(var(--salt-size-base) * 3); outline-color: var(--salt-sentiment-neutral-track); box-sizing: border-box; } .saltCircularProgress-bar, .saltCircularProgress-bufferBorder, .saltCircularProgress-bufferBackground { inline-size: calc(var(--salt-size-base) * 3); block-size: calc(var(--salt-size-base) * 3); border-radius: calc(var(--salt-size-base) * 3); box-sizing: border-box; } .saltCircularProgress-bar { border-color: var(--salt-sentiment-accent-background); border-style: var(--salt-borderStyle-solid); border-width: var(--salt-size-bar-strong); } .saltCircularProgress-bufferBorder { border: solid var(--salt-size-fixed-100) var(--salt-sentiment-accent-background); outline: solid var(--salt-size-fixed-100) var(--salt-sentiment-accent-background); outline-offset: calc(var(--salt-size-bar-strong) * -1); } .saltCircularProgress-bufferBackground { border: solid var(--salt-size-bar-strong) var(--salt-container-primary-background); position: absolute; bottom: 0; z-index: calc(var(--salt-zIndex-default) * -1); } .saltCircularProgress-bars { position: absolute; inset-block-start: 0; inset-inline-start: 0; inline-size: 100%; block-size: 100%; } .saltCircularProgress-bufferOverlayRight, .saltCircularProgress-bufferOverlayLeft, .saltCircularProgress-barOverlayRight, .saltCircularProgress-barOverlayLeft, .saltCircularProgress-bufferSubOverlayRight, .saltCircularProgress-bufferSubOverlayLeft, .saltCircularProgress-barSubOverlayRight, .saltCircularProgress-barSubOverlayLeft { block-size: 100%; transform-origin: 100% center; overflow: hidden; } .saltCircularProgress-bufferOverlayRight, .saltCircularProgress-bufferOverlayLeft, .saltCircularProgress-barOverlayRight, .saltCircularProgress-barOverlayLeft { inline-size: 50%; transform: rotate(180deg); position: absolute; } .saltCircularProgress-bufferSubOverlayRight, .saltCircularProgress-bufferSubOverlayLeft, .saltCircularProgress-barSubOverlayRight, .saltCircularProgress-barSubOverlayLeft { inline-size: 100%; transform: rotate(-180deg); } .saltCircularProgress-bufferOverlayLeft, .saltCircularProgress-barOverlayLeft { transform: rotate(0deg); } .saltCircularProgress-bufferOverlayRight:before, .saltCircularProgress-bufferSubOverlay:before { content: ""; background: var(--salt-sentiment-accent-background); position: absolute; right: 0; width: var(--salt-size-fixed-100); height: var(--salt-size-bar-strong); } .saltCircularProgress-bufferOverlayRight:before { bottom: 0; z-index: var(--salt-zIndex-default); } /* src/progress/LinearProgress/LinearProgress.css */ .saltLinearProgress { align-items: center; color: var(--salt-content-primary-foreground); display: flex; min-width: 400px; font-size: var(--linearProgress-fontSize); box-sizing: border-box; } .saltLinearProgress-barContainer { background: none; position: relative; width: 100%; overflow: hidden; height: var(--salt-size-bar-strong); } .saltLinearProgress-bar, .saltLinearProgress-buffer { position: absolute; left: 0; bottom: 0; top: 0; transition: transform 0.2s linear; transform-origin: left; } .saltLinearProgress-buffer { width: 0; background: var(--salt-container-primary-background); outline: solid var(--salt-size-fixed-100) var(--salt-sentiment-accent-background); z-index: var(--salt-zIndex-default); outline-offset: calc(var(--salt-size-fixed-100) * -1); } .saltLinearProgress-bar { width: 100%; background: var(--salt-sentiment-accent-background); z-index: calc(var(--salt-zIndex-default) * 2); } .saltLinearProgress-track { background: var(--salt-sentiment-neutral-track); width: 100%; height: var(--salt-size-bar); position: absolute; top: calc((var(--salt-size-bar-strong) - var(--salt-size-bar)) / 2); right: 0; transition: transform 0.2s linear; transform-origin: left; } .saltLinearProgress-progressLabel { color: inherit; margin: 0; white-space: nowrap; padding-left: var(--salt-spacing-100); } .saltLinearProgress-indeterminate.saltLinearProgress-bar { position: absolute; left: 0px; bottom: 0px; top: 0px; transform-origin: left center; width: 66%; animation: 1.8s ease-in-out infinite salt-indeterminate-progress-bar; } @keyframes salt-indeterminate-progress-bar { 0% { transform: translateX(-100%); } 60% { transform: translateX(155%); } 100% { transform: translateX(200%); } } /* src/slider/internal/SliderThumb.css */ .saltSliderThumb { align-items: center; background: var(--salt-sentiment-accent-borderColor); cursor: var(--salt-cursor-grab); display: flex; height: var(--salt-size-selectable); outline: none; position: absolute; top: calc(((var(--salt-size-selectable) - var(--salt-size-bar)) / 2) * -1); transform: translateX(-50%); width: var(--salt-size-fixed-200); touch-action: none; } .saltSliderThumb-disabled { cursor: var(--salt-cursor-disabled); pointer-events: none; } .saltSliderThumb-focusVisible { outline-style: var(--salt-focused-outlineStyle); outline-width: var(--salt-focused-outlineWidth); outline-offset: var(--salt-focused-outlineOffset); outline-color: var(--salt-focused-outlineColor); } .saltSliderThumb:active, .saltSliderThumb-dragging { cursor: var(--salt-cursor-grab-active); } .saltSliderThumb-input { border: 0; appearance: none; cursor: var(--salt-cursor-grab); height: var(--salt-size-base); left: var(--slider-progressPercentage); margin: 0; opacity: 0.0001; overflow: hidden; -webkit-appearance: none; pointer-events: none; width: var(--salt-size-base); padding: 0; position: absolute; transform: translateX(-50%); } .saltSliderThumb-secondThumb { z-index: 2; } .saltSliderThumb-accessibleText { position: absolute; height: 1px; width: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; } /* src/slider/internal/SliderTooltip.css */ .saltSliderTooltip { background: var(--salt-container-primary-background); border-color: var(--salt-container-primary-borderColor); border-style: var(--saltTooltip-borderStyle, var(--salt-borderStyle-solid)); border-width: var(--saltTooltip-borderWidth, var(--salt-size-fixed-100)); border-radius: var(--saltTooltip-borderRadius, var(--salt-palette-corner-weak, 0)); box-shadow: var(--saltTooltip-shadow, var(--salt-overlayable-shadow-popout)); bottom: 50%; left: 50%; padding: var(--salt-spacing-50) var(--salt-spacing-100); position: absolute; transform: translate(-50%, -50%); text-align: var(--saltTooltip-textAlign, left); user-select: none; visibility: hidden; z-index: var(--saltTooltip-zIndex, var(--salt-zIndex-flyover)); } .saltSliderTooltip-visible, .saltSliderTooltip:hover { visibility: visible; } .saltSliderTooltip-arrow { fill: var(--salt-container-primary-background); height: var(--salt-size-icon); left: 50%; position: absolute; pointer-events: none; top: 100%; transform: translateX(-50%); stroke: var(--salt-container-primary-borderColor); stroke-width: var(--salt-size-fixed-100); width: var(--salt-size-icon); } .saltSliderTooltip-text { white-space: nowrap; } /* src/slider/internal/SliderTrack.css */ .saltSliderTrack { --slider-track-background: var(--salt-sentiment-neutral-track); --slider-track-fill: var(--salt-sentiment-accent-borderColor); --slider-progressPercentage: 0%; --slider-tick-height: calc((var(--salt-size-selectable) - var(--salt-size-bar)) / 2); --slider-progressPercentageStart: 0%; --slider-progressPercentageEnd: 0%; display: flex; touch-action: none; width: 100%; } .saltSliderTrack.saltSliderTrack-withMarks { margin-bottom: calc(var(--salt-size-base) / 2); } .saltSliderTrack-disabled { opacity: 0.4; } .saltSliderTrack-container { align-items: center; display: flex; flex-direction: row; gap: var(--salt-spacing-100); width: 100%; } .saltSliderTrack-wrapper { align-items: center; cursor: var(--salt-cursor-hover); display: flex; flex: 1; height: var(--salt-size-selectable); position: relative; width: 100%; } .saltSliderTrack-disabled, .saltSliderTrack-disabled .saltSliderTrack-wrapper { cursor: var(--salt-cursor-disabled); } .saltSliderTrack-disabled .saltSliderTrack-wrapper { pointer-events: none; } .saltSliderTrack-rail { display: flex; flex: 100%; height: var(--salt-size-bar); justify-content: space-between; position: relative; } .saltSliderTrack-rail::before, .saltSliderTrack-rail::after { content: ""; display: block; height: 100%; } .saltSliderTrack-rail::before { background: var(--slider-track-fill); border-top-left-radius: var(--salt-palette-corner-weaker); border-bottom-left-radius: var(--salt-palette-corner-weaker); width: calc(var(--slider-progressPercentage) - var(--salt-spacing-fixed-300)); } .saltSliderTrack-hasMinTick.saltSliderTrack-rail::before { border-bottom-left-radius: unset; } .saltSliderTrack-rail::after { background: var(--slider-track-background); border-top-right-radius: var(--salt-palette-corner-weaker); border-bottom-right-radius: var(--salt-palette-corner-weaker); width: calc(100% - var(--slider-progressPercentage) - var(--salt-spacing-fixed-300)); } .saltSliderTrack-hasMaxTick.saltSliderTrack-rail::after { border-bottom-right-radius: unset; } .saltSliderTrack-range .saltSliderTrack-rail::before { background: var(--slider-track-background); width: calc(var(--slider-progressPercentageStart) - var(--salt-spacing-fixed-300)); } .saltSliderTrack-range .saltSliderTrack-rail::after { background: var(--slider-track-background); width: calc(100% - var(--slider-progressPercentageEnd) - var(--salt-spacing-fixed-300)); } .saltSliderTrack-range .saltSliderTrack-rail .saltSliderTrack-fill { background: var(--slider-track-fill); height: 100%; left: calc(var(--slider-progressPercentageStart) + var(--salt-spacing-fixed-300)); position: absolute; width: calc(var(--slider-progressPercentageEnd) - var(--slider-progressPercentageStart) - var(--salt-size-fixed-600)); } .saltSliderTrack-minLabel, .saltSliderTrack-maxLabel { user-select: none; } .saltSliderTrack-dragging, .saltSliderTrack-dragging .saltSliderTrack-wrapper { cursor: var(--salt-cursor-grab-active); } .saltSliderTrack-ticks { top: calc(var(--salt-size-bar) + var(--slider-tick-height)); position: absolute; width: 100%; } .saltSliderTrack-tick { background: var(--slider-track-background); height: var(--slider-tick-height); position: absolute; transform: translate(-50%); width: var(--salt-size-fixed-200); } .saltSliderTrack-withTicks .saltSliderTrack-tickHidden { visibility: hidden; } .saltSliderTrack-tickSelected { background: var(--slider-track-fill); } .saltSliderTrack-tick:first-of-type { transform: unset; } .saltSliderTrack-tick:last-of-type { transform: translateX(-100%); } .saltSliderTrack-marks { position: absolute; user-select: none; width: 100%; } .saltSliderTrack-markLabel { color: var(--salt-content-secondary-foreground); font-family: var(--salt-text-label-fontFamily); font-weight: var(--salt-text-label-fontWeight); font-size: var(--salt-text-label-fontSize); line-height: var(--salt-text-label-lineHeight); overflow: hidden; position: absolute; text-overflow: ellipsis; transform: translateX(-50%); top: calc(var(--slider-tick-height) + var(--salt-spacing-50)); white-space: nowrap; } .saltSliderTrack-constrainLabelPosition .saltSliderTrack-markLabel:first-of-type { transform: translateX(0%); } .saltSliderTrack-constrainLabelPosition .saltSliderTrack-markLabel:last-of-type { transform: translateX(-100%); } .saltFormField .saltSliderTrack.saltSliderTrack-withMark { margin-bottom: 0; } .saltFormField .saltSliderTrack-container { --saltFormField-label-width: 10%; height: var(--salt-size-base); } .saltFormField .saltSliderTrack-markLabel { top: calc((var(--salt-size-base) - var(--salt-size-bar)) / 2); } /* src/stepper/internal/StepConnector.css */ .saltStepConnector { grid-area: connector; transition-duration: inherit; transition-timing-function: inherit; transition-property: opacity, min-height; } .saltStepper-horizontal .saltStepConnector { position: absolute; transform: translateY(-100%); top: calc(var(--step-icon-size) / 2); left: calc(50% + calc(var(--step-icon-size) / 2 + var(--salt-spacing-100))); right: calc(-50% + calc(var(--step-icon-size) / 2 + var(--salt-spacing-100))); border-top-width: var(--salt-size-fixed-200); border-top-style: var(--salt-borderStyle-dotted); border-top-color: var(--salt-sentiment-neutral-track); } .saltStepper-horizontal .saltStep-stage-completed > .saltStepConnector, .saltStepper-horizontal .saltStep-stage-inprogress > .saltStepConnector { border-top-style: var(--salt-borderStyle-solid); } .saltStepper-vertical .saltStepConnector { min-height: var(--salt-size-base); align-self: stretch; justify-self: center; border-left-width: var(--salt-size-fixed-200); border-left-style: var(--salt-borderStyle-dotted); border-left-color: var(--salt-sentiment-neutral-track); } .saltStepper-vertical .saltStep-stage-completed > .saltStepConnector, .saltStepper-vertical .saltStep-stage-inprogress > .saltStepConnector { border-left-style: var(--salt-borderStyle-solid); } .saltStep-depth-0.saltStep:not(.saltStep-expanded):last-child > .saltStepConnector { opacity: 0; min-height: 0; } .saltStep-depth-0.saltStep-expanded:last-child .saltStep:not(.saltStep-expanded):last-child .saltStepConnector { opacity: 0; min-height: 0; } /* src/stepper/internal/StepExpandTrigger.css */ .saltStepExpandTrigger { grid-area: expand; } .saltButton.saltStepExpandTrigger:focus-visible { outline-offset: calc(-1 * var(--salt-focused-outlineWidth)); } /* src/stepper/internal/StepIcon.css */ .saltStepIcon { grid-area: icon; display: flex; justify-content: center; align-items: center; justify-self: center; } .saltStepper-vertical .saltStepIcon { height: var(--salt-size-base); } .saltStep-stage-pending > .saltStepIcon, .saltStep-stage-locked > .saltStepIcon { --saltIcon-color: var(--salt-content-secondary-foreground); } .saltStep-stage-inprogress > .saltStepIcon, .saltStep-stage-active > .saltStepIcon { --saltIcon-color: var(--salt-status-info-foreground-decorative); } .saltStep-stage-completed > .saltStepIcon { --saltIcon-color: var(--salt-status-success-foreground-decorative); } .saltStep-status-warning > .saltStepIcon { --saltIcon-color: var(--salt-status-warning-foreground-decorative); } .saltStep-status-error > .saltStepIcon { --saltIcon-color: var(--salt-status-error-foreground-decorative); } /* src/stepper/internal/StepText.css */ .saltStepText-label { grid-area: label; font-size: var(--salt-text-fontSize); line-height: var(--salt-text-lineHeight); font-family: var(--salt-text-fontFamily); color: var(--salt-content-primary-foreground); font-weight: var(--salt-text-fontWeight); } .saltStepper-horizontal .saltStepText-label { margin-top: var(--salt-spacing-50); } .saltStepper-vertical .saltStepText-label { padding-top: calc((var(--salt-size-base) - var(--salt-text-label-lineHeight)) / 2); padding-bottom: calc((var(--salt-size-base) - var(--salt-text-label-lineHeight)) / 2); padding-left: calc(var(--step-depth) * var(--salt-spacing-100)); } .saltStep-depth-0 > .saltText.saltStepText-label { font-weight: var(--salt-text-fontWeight-strong); } .saltStepText-description { grid-area: description; color: var(--salt-content-secondary-foreground); font-size: var(--salt-text-label-fontSize); font-weight: var(--salt-text-label-fontWeight-strong); font-family: var(--salt-text-label-fontFamily); line-height: var(--salt-text-label-lineHeight); letter-spacing: var(--salt-text-letterSpacing); } .saltStepper-vertical .saltStepText-description { padding-bottom: var(--salt-spacing-300); padding-left: calc(var(--step-depth) * var(--salt-spacing-100)); } .saltStep-status-warning > .saltStepText-description { color: var(--salt-status-warning-foreground-informative); } .saltStep-status-error > .saltStepText-description { color: var(--salt-status-error-foreground-informative); } /* src/efc56242-ef47-4712-a837-ef6de7fe6004.css */