/* ============================================================================================= SalX.UI — component styles Every selector is sx-prefixed, so this sheet is safe to load alongside MudBlazor from Phase 0. Components consume LAYER 2 tokens only, always with a fallback. This sheet must be self-contained: utilities.css is NOT loaded app-wide until cutover, so no component may rely on d-flex / gap-N / pa-N here. Contents, in tier order (the file grows by appending): Tier 1 tone + text-style classes · SxText · SxIcon · SxButton · SxIconButton · SxStack · SxGrid/SxGridItem · SxSurface · SxDivider · SxSpacer · motifs (glass, grain, glow, focus) Tier 2 dialog · snackbar · popover host (menu / tooltip / popover) · overlay Tier 3 field chrome · text / numeric / select / checkbox / switch / radio · date + time pickers Tier 4 chip · alert · banner · spinner · progress bar · skeleton · avatar · badge Tier 5 layout · container · card · collapse · expansion · tabs · tables + sort + pager · app bar · toolbar · drawer · nav menu · list · pagination · image · link · fab · stepper · chat Tier 6 pinned columns + sticky footer + fill (the two data grids) · tree · pie chart · sr-only ============================================================================================= */ /* --------------------------------------------------------------------------------------------- Tone → colour. `Tone.Default` sets nothing (inherit the surface's text colour). --------------------------------------------------------------------------------------------- */ .sx-tone-inherit { color: inherit; } .sx-tone-muted { color: var(--sx-text-2, #4b5565); } .sx-tone-accent { color: var(--sx-accent-text, #1a63b3); } .sx-tone-accent2 { color: var(--sx-accent2-text, #5b49c0); } .sx-tone-numeric { color: var(--sx-numeric-text, #0a6f5a); } .sx-tone-success { color: var(--sx-success-text, #136a42); } .sx-tone-warning { color: var(--sx-warning-text, #8a4b00); } .sx-tone-danger { color: var(--sx-danger-text, #b42f2f); } .sx-tone-info { color: var(--sx-info-text, #086a7c); } .sx-tone-contrast { color: var(--sx-contrast-text, #f3f5f9); } /* Tone ladder as custom properties — buttons, chips and any filled control read these. */ .sx-btn, .sx-icon-btn { --_base: var(--sx-neutral, #e3e7ee); --_hover: var(--sx-neutral-hover, #d6dbe5); --_pressed: var(--sx-neutral-pressed, #c6ccd8); --_soft: var(--sx-neutral-soft, rgba(16, 24, 40, 0.06)); --_soft-border: var(--sx-neutral-soft-border, rgba(16, 24, 40, 0.16)); --_text: var(--sx-neutral-text, #151a24); --_on: var(--sx-neutral-on, #151a24); } .sx-btn--t-muted, .sx-icon-btn--t-muted { --_text: var(--sx-text-2, #4b5565); } .sx-btn--t-inherit, .sx-icon-btn--t-inherit { --_base: currentColor; --_hover: currentColor; --_pressed: currentColor; --_soft: color-mix(in srgb, currentColor 12%, transparent); --_soft-border: color-mix(in srgb, currentColor 32%, transparent); --_text: inherit; --_on: var(--sx-surface-1, #fff); } .sx-btn--t-accent, .sx-icon-btn--t-accent { --_base: var(--sx-accent, #1f6fc6); --_hover: var(--sx-accent-hover, #1a63b3); --_pressed: var(--sx-accent-pressed, #165699); --_soft: var(--sx-accent-soft, rgba(31, 111, 198, 0.1)); --_soft-border: var(--sx-accent-soft-border, rgba(31, 111, 198, 0.28)); --_text: var(--sx-accent-text, #1a63b3); --_on: var(--sx-accent-on, #fff); } .sx-btn--t-accent2, .sx-icon-btn--t-accent2 { --_base: var(--sx-accent2, #6d5bd0); --_hover: var(--sx-accent2-hover, #5b49c0); --_pressed: var(--sx-accent2-pressed, #4d3daa); --_soft: var(--sx-accent2-soft, rgba(109, 91, 208, 0.1)); --_soft-border: var(--sx-accent2-soft-border, rgba(109, 91, 208, 0.28)); --_text: var(--sx-accent2-text, #5b49c0); --_on: var(--sx-accent2-on, #fff); } .sx-btn--t-numeric, .sx-icon-btn--t-numeric { --_base: var(--sx-numeric, #0c8068); --_hover: var(--sx-numeric-hover, #0a6f5a); --_pressed: var(--sx-numeric-pressed, #085e4c); --_soft: var(--sx-numeric-soft, rgba(12, 128, 104, 0.1)); --_soft-border: var(--sx-numeric-soft-border, rgba(12, 128, 104, 0.3)); --_text: var(--sx-numeric-text, #0a6f5a); --_on: var(--sx-text-on-status, #fff); } .sx-btn--t-success, .sx-icon-btn--t-success { --_base: var(--sx-success, #177a4d); --_hover: var(--sx-success-hover, #136a42); --_pressed: var(--sx-success-pressed, #105a38); --_soft: var(--sx-success-soft, rgba(23, 122, 77, 0.1)); --_soft-border: var(--sx-success-soft-border, rgba(23, 122, 77, 0.3)); --_text: var(--sx-success-text, #136a42); --_on: var(--sx-text-on-status, #fff); } .sx-btn--t-warning, .sx-icon-btn--t-warning { --_base: var(--sx-warning, #a85d08); --_hover: var(--sx-warning-hover, #8a4b00); --_pressed: var(--sx-warning-pressed, #733e00); --_soft: var(--sx-warning-soft, rgba(168, 93, 8, 0.1)); --_soft-border: var(--sx-warning-soft-border, rgba(168, 93, 8, 0.3)); --_text: var(--sx-warning-text, #8a4b00); --_on: var(--sx-text-on-status, #fff); } .sx-btn--t-danger, .sx-icon-btn--t-danger { --_base: var(--sx-danger, #c93a3a); --_hover: var(--sx-danger-hover, #b42f2f); --_pressed: var(--sx-danger-pressed, #9d2828); --_soft: var(--sx-danger-soft, rgba(201, 58, 58, 0.1)); --_soft-border: var(--sx-danger-soft-border, rgba(201, 58, 58, 0.3)); --_text: var(--sx-danger-text, #b42f2f); --_on: var(--sx-text-on-status, #fff); } .sx-btn--t-info, .sx-icon-btn--t-info { --_base: var(--sx-info, #0b7a8f); --_hover: var(--sx-info-hover, #086a7c); --_pressed: var(--sx-info-pressed, #065a6a); --_soft: var(--sx-info-soft, rgba(11, 122, 143, 0.1)); --_soft-border: var(--sx-info-soft-border, rgba(11, 122, 143, 0.3)); --_text: var(--sx-info-text, #086a7c); --_on: var(--sx-text-on-status, #fff); } .sx-btn--t-contrast, .sx-icon-btn--t-contrast { --_base: var(--sx-contrast-bg, #1f2533); --_hover: color-mix(in srgb, var(--sx-contrast-bg, #1f2533) 88%, var(--sx-contrast-text, #fff)); --_pressed: color-mix(in srgb, var(--sx-contrast-bg, #1f2533) 78%, var(--sx-contrast-text, #fff)); --_soft: color-mix(in srgb, var(--sx-contrast-bg, #1f2533) 12%, transparent); --_soft-border: color-mix(in srgb, var(--sx-contrast-bg, #1f2533) 32%, transparent); --_text: var(--sx-text-1, #151a24); --_on: var(--sx-contrast-text, #f3f5f9); } /* --------------------------------------------------------------------------------------------- TextStyle → type. One class per step. No colour here — Tone does colour. --------------------------------------------------------------------------------------------- */ .sx-text-display-lg { font-size: var(--sx-text-display-lg-size, 2.75rem); line-height: var(--sx-text-display-lg-line, 1.1); letter-spacing: var(--sx-text-display-lg-tracking, -0.02em); font-weight: var(--sx-text-display-lg-weight, 600); } .sx-text-display-md { font-size: var(--sx-text-display-md-size, 2.25rem); line-height: var(--sx-text-display-md-line, 1.15); letter-spacing: var(--sx-text-display-md-tracking, -0.015em); font-weight: var(--sx-text-display-md-weight, 600); } .sx-text-display-sm { font-size: var(--sx-text-display-sm-size, 1.875rem); line-height: var(--sx-text-display-sm-line, 1.2); letter-spacing: var(--sx-text-display-sm-tracking, -0.01em); font-weight: var(--sx-text-display-sm-weight, 600); } .sx-text-title-lg { font-size: var(--sx-text-title-lg-size, 1.5rem); line-height: var(--sx-text-title-lg-line, 1.3); letter-spacing: var(--sx-text-title-lg-tracking, -0.005em); font-weight: var(--sx-text-title-lg-weight, 600); } .sx-text-title-md { font-size: var(--sx-text-title-md-size, 1.25rem); line-height: var(--sx-text-title-md-line, 1.35); letter-spacing: var(--sx-text-title-md-tracking, 0); font-weight: var(--sx-text-title-md-weight, 600); } .sx-text-title-sm { font-size: var(--sx-text-title-sm-size, 1rem); line-height: var(--sx-text-title-sm-line, 1.5); letter-spacing: var(--sx-text-title-sm-tracking, 0); font-weight: var(--sx-text-title-sm-weight, 600); } .sx-text-label-lg { font-size: var(--sx-text-label-lg-size, 0.875rem); line-height: var(--sx-text-label-lg-line, 1.45); letter-spacing: var(--sx-text-label-lg-tracking, 0.005em); font-weight: var(--sx-text-label-lg-weight, 500); } .sx-text-body { font-size: var(--sx-text-body-size, 1rem); line-height: var(--sx-text-body-line, 1.55); letter-spacing: var(--sx-text-body-tracking, 0); font-weight: var(--sx-text-body-weight, 400); } .sx-text-body-sm { font-size: var(--sx-text-body-sm-size, 0.875rem); line-height: var(--sx-text-body-sm-line, 1.5); letter-spacing: var(--sx-text-body-sm-tracking, 0); font-weight: var(--sx-text-body-sm-weight, 400); } .sx-text-caption { font-size: var(--sx-text-caption-size, 0.75rem); line-height: var(--sx-text-caption-line, 1.4); letter-spacing: var(--sx-text-caption-tracking, 0.01em); font-weight: var(--sx-text-caption-weight, 400); } .sx-text-overline { font-size: var(--sx-text-overline-size, 0.6875rem); line-height: var(--sx-text-overline-line, 1.4); letter-spacing: var(--sx-text-overline-tracking, 0.08em); font-weight: var(--sx-text-overline-weight, 600); text-transform: uppercase; } .sx-text-mono { font-family: var(--sx-font-mono, monospace); font-size: var(--sx-text-mono-size, 0.8125rem); line-height: var(--sx-text-mono-line, 1.5); letter-spacing: var(--sx-text-mono-tracking, 0); font-weight: var(--sx-text-mono-weight, 400); font-variant-numeric: tabular-nums; } /* Text colour ramps (type does the hierarchy work, not colour). */ .sx-text-1 { color: var(--sx-text-1, #151a24); } .sx-text-2 { color: var(--sx-text-2, #4b5565); } .sx-text-3 { color: var(--sx-text-3, #616a7d); } .sx-text-disabled { color: var(--sx-text-disabled, #a3a9b8); } /* --------------------------------------------------------------------------------------------- SxText --------------------------------------------------------------------------------------------- */ .sx-text { margin: 0; font-family: inherit; } .sx-text--inline { display: inline; } .sx-text--start { text-align: start; } .sx-text--center { text-align: center; } .sx-text--end { text-align: end; } /* --------------------------------------------------------------------------------------------- SxIcon --------------------------------------------------------------------------------------------- */ .sx-icon { display: inline-block; vertical-align: middle; flex-shrink: 0; width: var(--sx-icon-size, var(--sx-icon-md, 22px)); height: var(--sx-icon-size, var(--sx-icon-md, 22px)); color: inherit; } .sx-icon--xs { --sx-icon-size: var(--sx-icon-xs, 14px); } .sx-icon--sm { --sx-icon-size: var(--sx-icon-sm, 18px); } .sx-icon--md { --sx-icon-size: var(--sx-icon-md, 22px); } .sx-icon--lg { --sx-icon-size: var(--sx-icon-lg, 28px); } .sx-icon--xl { --sx-icon-size: var(--sx-icon-xl, 36px); } /* --------------------------------------------------------------------------------------------- SxButton --------------------------------------------------------------------------------------------- */ .sx-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 0.5em; box-sizing: border-box; margin: 0; border: 1px solid transparent; border-radius: var(--sx-radius-sm, 10px); background: none; font-family: inherit; font-weight: 500; line-height: 1; letter-spacing: 0.005em; text-decoration: none; white-space: nowrap; vertical-align: middle; cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; transition: background-color var(--sx-dur-fast, 120ms) var(--sx-ease-out, ease), color var(--sx-dur-fast, 120ms) var(--sx-ease-out, ease), border-color var(--sx-dur-fast, 120ms) var(--sx-ease-out, ease), box-shadow var(--sx-dur-fast, 120ms) var(--sx-ease-out, ease); } .sx-btn:hover { text-decoration: none; } .sx-btn--xs { min-height: 24px; padding: 0 8px; font-size: 0.75rem; --_icon: 14px; } .sx-btn--sm { min-height: 28px; padding: 0 10px; font-size: 0.8125rem; --_icon: 16px; } .sx-btn--md { min-height: 34px; padding: 0 14px; font-size: 0.875rem; --_icon: 18px; } .sx-btn--lg { min-height: 40px; padding: 0 18px; font-size: 0.9375rem; --_icon: 20px; } .sx-btn--xl { min-height: 48px; padding: 0 22px; font-size: 1rem; --_icon: 22px; } .sx-btn .sx-btn__icon { --sx-icon-size: var(--_icon); } .sx-btn__label { display: inline-block; } /* --sx-edge-on-fill, not --sx-edge: on a saturated fill the 0.65-white glass edge reads as a hard white bar across the top of the button rather than a lit edge. */ .sx-btn--solid { background: var(--_base); color: var(--_on); box-shadow: var(--sx-edge-on-fill, none), var(--sx-shadow-1, none); } .sx-btn--solid:not(:disabled):hover { background: var(--_hover); } .sx-btn--solid:not(:disabled):active { background: var(--_pressed); box-shadow: none; } .sx-btn--soft { background: var(--_soft); color: var(--_text); } .sx-btn--soft:not(:disabled):hover { border-color: var(--_soft-border); } .sx-btn--soft:not(:disabled):active { background: color-mix(in srgb, var(--_soft), var(--_base) 12%); } .sx-btn--outline { background: transparent; color: var(--_text); border-color: var(--_soft-border); } .sx-btn--outline:not(:disabled):hover { background: var(--_soft); } .sx-btn--outline:not(:disabled):active { background: color-mix(in srgb, var(--_soft), var(--_base) 12%); } .sx-btn--ghost { background: transparent; color: var(--_text); } .sx-btn--ghost:not(:disabled):hover { background: var(--_soft); } .sx-btn--ghost:not(:disabled):active { background: color-mix(in srgb, var(--_soft), var(--_base) 12%); } .sx-btn--full { display: flex; width: 100%; } .sx-btn:disabled, .sx-btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; box-shadow: none; } .sx-btn:focus-visible { outline: none; box-shadow: var(--sx-focus-shadow, 0 0 0 2px #1f6fc6); } .sx-btn--loading { color: transparent !important; cursor: progress; } .sx-btn--loading .sx-btn__icon { visibility: hidden; } .sx-btn__spinner { position: absolute; inset: 0; margin: auto; width: 1.1em; height: 1.1em; border-radius: 50%; border: 2px solid transparent; border-top-color: var(--_text); border-right-color: var(--_text); animation: sx-spin 0.8s linear infinite; } .sx-btn--solid .sx-btn__spinner { border-top-color: var(--_on); border-right-color: var(--_on); } @keyframes sx-spin { to { transform: rotate(360deg); } } /* The one glowing element per view (dark theme). Add to a Solid Accent button. */ .sx-btn--glow { box-shadow: var(--sx-edge-on-fill, none), var(--sx-shadow-1, none), var(--sx-accent-glow, none); } /* --------------------------------------------------------------------------------------------- SxIconButton — circular, ghost by default, 44px hit area on touch without changing layout. --------------------------------------------------------------------------------------------- */ .sx-icon-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; margin: 0; padding: 0; border: 1px solid transparent; border-radius: 50%; background: none; color: var(--_text); font: inherit; line-height: 1; text-decoration: none; vertical-align: middle; cursor: pointer; user-select: none; flex-shrink: 0; -webkit-tap-highlight-color: transparent; transition: background-color var(--sx-dur-fast, 120ms) var(--sx-ease-out, ease), color var(--sx-dur-fast, 120ms) var(--sx-ease-out, ease), box-shadow var(--sx-dur-fast, 120ms) var(--sx-ease-out, ease); } .sx-icon-btn--xs { width: 24px; height: 24px; --_icon: 14px; } .sx-icon-btn--sm { width: 30px; height: 30px; --_icon: 18px; } .sx-icon-btn--md { width: 36px; height: 36px; --_icon: 20px; } .sx-icon-btn--lg { width: 42px; height: 42px; --_icon: 24px; } .sx-icon-btn--xl { width: 48px; height: 48px; --_icon: 28px; } .sx-icon-btn .sx-icon-btn__icon { --sx-icon-size: var(--_icon); } .sx-icon-btn--ghost:not(:disabled):hover, .sx-icon-btn--outline:not(:disabled):hover { background: var(--_soft); } .sx-icon-btn--outline { border-color: var(--_soft-border); } .sx-icon-btn--soft { background: var(--_soft); } .sx-icon-btn--soft:not(:disabled):hover { border-color: var(--_soft-border); } .sx-icon-btn--solid { background: var(--_base); color: var(--_on); box-shadow: var(--sx-edge-on-fill, none), var(--sx-shadow-1, none); } .sx-icon-btn--solid:not(:disabled):hover { background: var(--_hover); } .sx-icon-btn:not(:disabled):active { background: color-mix(in srgb, var(--_soft), var(--_base) 14%); } .sx-icon-btn--solid:not(:disabled):active { background: var(--_pressed); } .sx-icon-btn:disabled, .sx-icon-btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; box-shadow: none; } .sx-icon-btn:focus-visible { outline: none; box-shadow: var(--sx-focus-shadow, 0 0 0 2px #1f6fc6); } @media (pointer: coarse) { .sx-icon-btn::after { content: ""; position: absolute; top: 50%; left: 50%; width: max(100%, var(--sx-touch-min, 44px)); height: max(100%, var(--sx-touch-min, 44px)); transform: translate(-50%, -50%); } } /* --------------------------------------------------------------------------------------------- SxStack --------------------------------------------------------------------------------------------- */ .sx-stack { display: flex; flex-direction: column; gap: var(--sx-stack-gap, 12px); box-sizing: border-box; } .sx-stack--row { flex-direction: row; } .sx-stack--row-reverse { flex-direction: row-reverse; } .sx-stack--column-reverse { flex-direction: column-reverse; } .sx-stack--wrap { flex-wrap: wrap; } .sx-stack--align-start { align-items: flex-start; } .sx-stack--align-center { align-items: center; } .sx-stack--align-end { align-items: flex-end; } .sx-stack--align-stretch { align-items: stretch; } .sx-stack--align-baseline { align-items: baseline; } .sx-stack--justify-start { justify-content: flex-start; } .sx-stack--justify-center { justify-content: center; } .sx-stack--justify-end { justify-content: flex-end; } .sx-stack--justify-between { justify-content: space-between; } .sx-stack--justify-around { justify-content: space-around; } .sx-stack--justify-evenly { justify-content: space-evenly; } .sx-stack--stretch-start > :first-child { flex: 1 1 auto; } .sx-stack--stretch-end > :last-child { flex: 1 1 auto; } .sx-stack--stretch-middle > :not(:first-child):not(:last-child) { flex: 1 1 auto; } .sx-stack--stretch-all > * { flex: 1 1 auto; } /* --------------------------------------------------------------------------------------------- SxGrid / SxGridItem — 12 columns, mobile-first spans at Mud's breakpoints. --------------------------------------------------------------------------------------------- */ .sx-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--sx-grid-gap, 24px); width: 100%; box-sizing: border-box; } .sx-grid--align-start { align-items: start; } .sx-grid--align-center { align-items: center; } .sx-grid--align-end { align-items: end; } .sx-grid--align-stretch { align-items: stretch; } .sx-grid--align-baseline { align-items: baseline; } .sx-col { grid-column: span 12; min-width: 0; box-sizing: border-box; } .sx-col-1 { grid-column: span 1; } .sx-col-2 { grid-column: span 2; } .sx-col-3 { grid-column: span 3; } .sx-col-4 { grid-column: span 4; } .sx-col-5 { grid-column: span 5; } .sx-col-6 { grid-column: span 6; } .sx-col-7 { grid-column: span 7; } .sx-col-8 { grid-column: span 8; } .sx-col-9 { grid-column: span 9; } .sx-col-10 { grid-column: span 10; } .sx-col-11 { grid-column: span 11; } .sx-col-12 { grid-column: span 12; } @media (min-width: 600px) { .sx-col-sm-1 { grid-column: span 1; } .sx-col-sm-2 { grid-column: span 2; } .sx-col-sm-3 { grid-column: span 3; } .sx-col-sm-4 { grid-column: span 4; } .sx-col-sm-5 { grid-column: span 5; } .sx-col-sm-6 { grid-column: span 6; } .sx-col-sm-7 { grid-column: span 7; } .sx-col-sm-8 { grid-column: span 8; } .sx-col-sm-9 { grid-column: span 9; } .sx-col-sm-10 { grid-column: span 10; } .sx-col-sm-11 { grid-column: span 11; } .sx-col-sm-12 { grid-column: span 12; } } @media (min-width: 960px) { .sx-col-md-1 { grid-column: span 1; } .sx-col-md-2 { grid-column: span 2; } .sx-col-md-3 { grid-column: span 3; } .sx-col-md-4 { grid-column: span 4; } .sx-col-md-5 { grid-column: span 5; } .sx-col-md-6 { grid-column: span 6; } .sx-col-md-7 { grid-column: span 7; } .sx-col-md-8 { grid-column: span 8; } .sx-col-md-9 { grid-column: span 9; } .sx-col-md-10 { grid-column: span 10; } .sx-col-md-11 { grid-column: span 11; } .sx-col-md-12 { grid-column: span 12; } } @media (min-width: 1280px) { .sx-col-lg-1 { grid-column: span 1; } .sx-col-lg-2 { grid-column: span 2; } .sx-col-lg-3 { grid-column: span 3; } .sx-col-lg-4 { grid-column: span 4; } .sx-col-lg-5 { grid-column: span 5; } .sx-col-lg-6 { grid-column: span 6; } .sx-col-lg-7 { grid-column: span 7; } .sx-col-lg-8 { grid-column: span 8; } .sx-col-lg-9 { grid-column: span 9; } .sx-col-lg-10 { grid-column: span 10; } .sx-col-lg-11 { grid-column: span 11; } .sx-col-lg-12 { grid-column: span 12; } } @media (min-width: 1920px) { .sx-col-xl-1 { grid-column: span 1; } .sx-col-xl-2 { grid-column: span 2; } .sx-col-xl-3 { grid-column: span 3; } .sx-col-xl-4 { grid-column: span 4; } .sx-col-xl-5 { grid-column: span 5; } .sx-col-xl-6 { grid-column: span 6; } .sx-col-xl-7 { grid-column: span 7; } .sx-col-xl-8 { grid-column: span 8; } .sx-col-xl-9 { grid-column: span 9; } .sx-col-xl-10 { grid-column: span 10; } .sx-col-xl-11 { grid-column: span 11; } .sx-col-xl-12 { grid-column: span 12; } } /* --------------------------------------------------------------------------------------------- SxSurface — the shared skeleton. Elevation is shadow on light and surface value on dark; both come from the tokens. Every raised step carries the glass edge (motif #1). No `position` here on purpose: MudPaper never set one and absolutely-positioned children rely on that. Add `.sx-grain` only to hosts that set position themselves. --------------------------------------------------------------------------------------------- */ .sx-surface { box-sizing: border-box; color: var(--sx-text-1, #151a24); background: var(--sx-surface-1, #fbfcfe); border-radius: var(--sx-radius-md, 14px); transition: box-shadow var(--sx-dur-base, 200ms) var(--sx-ease-out, ease), background-color var(--sx-dur-base, 200ms) var(--sx-ease-out, ease); } .sx-surface--e0 { background: var(--sx-surface-1, #fbfcfe); box-shadow: none; } .sx-surface--e1 { background: var(--sx-surface-2, #ffffff); box-shadow: var(--sx-edge, none), var(--sx-shadow-1, none); } .sx-surface--e2 { background: var(--sx-surface-2, #ffffff); box-shadow: var(--sx-edge, none), var(--sx-shadow-2, none); } .sx-surface--e3 { background: var(--sx-surface-3, #ffffff); box-shadow: var(--sx-edge, none), var(--sx-shadow-3, none); } .sx-surface--e4 { background: var(--sx-surface-3, #ffffff); box-shadow: var(--sx-edge, none), var(--sx-shadow-4, none); } .sx-surface--e5 { background: var(--sx-surface-4, #ffffff); box-shadow: var(--sx-edge, none), var(--sx-shadow-5, none); } .sx-surface--outline { background: var(--sx-surface-1, #fbfcfe); box-shadow: none; border: 1px solid var(--sx-line, rgba(16, 24, 40, 0.08)); } .sx-surface--sunken { background: var(--sx-surface-sunken, #eceff5); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04); } .sx-surface--square { border-radius: 0; } .sx-surface--clickable { cursor: pointer; } .sx-surface--clickable:hover { background-image: linear-gradient(var(--sx-surface-hover, rgba(20, 40, 80, 0.05)), var(--sx-surface-hover, rgba(20, 40, 80, 0.05))); } .sx-surface--clickable:focus-visible { outline: none; box-shadow: var(--sx-focus-shadow, 0 0 0 2px #1f6fc6); } /* Frosted glass. Opaque fallback where backdrop-filter is unsupported — never transparent-and-unreadable. */ .sx-glass { box-sizing: border-box; color: var(--sx-text-1, #151a24); border-radius: var(--sx-radius-md, 14px); background: var(--sx-glass-bg-fallback, #fbfcfe); border: 1px solid var(--sx-line, rgba(16, 24, 40, 0.08)); box-shadow: var(--sx-edge, none), var(--sx-shadow-2, none); } @supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) { .sx-glass { background: var(--sx-glass-bg, rgba(255, 255, 255, 0.7)); -webkit-backdrop-filter: var(--sx-glass-filter, blur(20px)); backdrop-filter: var(--sx-glass-filter, blur(20px)); } } /* Matte grain overlay — add to any large surface. Needs position: relative on the host. */ .sx-grain::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background-image: var(--sx-grain, none); opacity: var(--sx-grain-opacity, 0.03); pointer-events: none; mix-blend-mode: multiply; } [data-sx-theme="dark"] .sx-grain::after, [data-sx-theme="portal"] .sx-grain::after { mix-blend-mode: screen; } /* Accent glow — the dark theme's frost. Exactly one per view. */ .sx-glow { box-shadow: var(--sx-edge, none), var(--sx-shadow-2, none), var(--sx-accent-glow, none); } /* The soft double focus ring (motif #2) as a class, for elements that manage their own outline. */ .sx-focus-ring:focus-visible { outline: none; box-shadow: var(--sx-focus-shadow, 0 0 0 2px #1f6fc6); } /* --------------------------------------------------------------------------------------------- SxDivider / SxSpacer --------------------------------------------------------------------------------------------- */ .sx-divider { flex-shrink: 0; margin: 0; border: 0; border-top: 1px solid var(--sx-divider, rgba(16, 24, 40, 0.07)); width: 100%; box-sizing: border-box; } .sx-divider--vertical { width: 0; height: 100%; border-top: 0; border-left: 1px solid var(--sx-divider, rgba(16, 24, 40, 0.07)); } .sx-divider--flex { height: auto; align-self: stretch; } .sx-divider--inset { width: auto; margin-inline-start: 72px; } .sx-divider--middle { width: auto; margin-inline: 16px; } .sx-spacer { flex-grow: 1; } /* ============================================================================================= TIER 2 — services & overlays (Phase 2) ============================================================================================= */ body.sx-scroll-lock { overflow: hidden !important; } /* --------------------------------------------------------------------------------------------- SxDialog — scrim + panel. The panel is surface-4 (the brightest step), radius xl, shadow-5 and the glass edge; the scrim is the theme's scrim colour with a light blur so the page recedes. z-index comes inline from the instance (SxZIndex.Dialog + order × 2). --------------------------------------------------------------------------------------------- */ .sx-dialog-host { display: contents; } .sx-dialog-layer { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; padding: 16px; box-sizing: border-box; } .sx-dialog-scrim { position: absolute; inset: 0; background: var(--sx-scrim, rgba(15, 20, 35, 0.45)); animation: sx-fade-in var(--sx-dur-fast, 120ms) var(--sx-ease-out, ease) both; } @supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) { .sx-dialog-scrim { -webkit-backdrop-filter: blur(var(--sx-scrim-blur, 2px)); backdrop-filter: blur(var(--sx-scrim-blur, 2px)); } } .sx-dialog { position: relative; display: flex; flex-direction: column; box-sizing: border-box; max-width: 100%; max-height: calc(100dvh - 32px); color: var(--sx-text-1, #151a24); background: var(--sx-surface-4, #ffffff); border-radius: var(--sx-radius-xl, 24px); box-shadow: var(--sx-edge, none), var(--sx-shadow-5, 0 24px 56px -12px rgba(0, 0, 0, 0.3)); outline: none; animation: sx-dialog-in var(--sx-dur-base, 200ms) var(--sx-ease-out, ease) both; } .sx-dialog--xs { width: min(444px, 100%); } .sx-dialog--sm { width: min(600px, 100%); } .sx-dialog--md { width: min(960px, 100%); } .sx-dialog--lg { width: min(1280px, 100%); } .sx-dialog--xl { width: min(1920px, 100%); } .sx-dialog--none { width: auto; } .sx-dialog:not(.sx-dialog--full-width) { width: auto; } .sx-dialog--xs:not(.sx-dialog--full-width) { max-width: 444px; } .sx-dialog--sm:not(.sx-dialog--full-width) { max-width: 600px; } .sx-dialog--md:not(.sx-dialog--full-width) { max-width: 960px; } .sx-dialog--lg:not(.sx-dialog--full-width) { max-width: 1280px; } .sx-dialog--xl:not(.sx-dialog--full-width) { max-width: 1920px; } .sx-dialog-layer--fullscreen { padding: 0; } .sx-dialog--fullscreen { width: 100%; max-width: none; height: 100dvh; max-height: none; border-radius: 0; } .sx-dialog__header { display: flex; align-items: flex-start; gap: 12px; padding: 20px 20px 8px 24px; } .sx-dialog__title { flex: 1 1 auto; min-width: 0; align-self: center; font-size: var(--sx-text-title-md-size, 1.125rem); line-height: var(--sx-text-title-md-line, 1.35); font-weight: var(--sx-text-title-md-weight, 600); letter-spacing: var(--sx-text-title-md-tracking, -0.005em); } .sx-dialog__title:empty { display: none; } .sx-dialog__close { flex: 0 0 auto; margin: -4px -6px 0 0; } .sx-dialog__content { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 8px 24px 20px; overscroll-behavior: contain; } .sx-dialog__header + .sx-dialog__content { padding-top: 4px; } .sx-dialog__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; padding: 4px 20px 20px; } @media (max-width: 599.98px) { .sx-dialog-layer { padding: 12px; } .sx-dialog { max-height: calc(100dvh - 24px); border-radius: var(--sx-radius-lg, 18px); } .sx-dialog__header { padding: 16px 12px 6px 18px; } .sx-dialog__content { padding: 6px 18px 16px; } .sx-dialog__actions { padding: 4px 14px 16px; } } @keyframes sx-fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes sx-dialog-in { from { opacity: 0; transform: translateY(10px) scale(0.98); } to { opacity: 1; transform: none; } } /* --------------------------------------------------------------------------------------------- SxOverlay — hand-rolled modal panels. Scrim + centred content, rendered in place. --------------------------------------------------------------------------------------------- */ .sx-overlay { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; padding: 16px; box-sizing: border-box; } .sx-overlay--absolute { position: absolute; } .sx-overlay__scrim { position: absolute; inset: 0; background: var(--sx-scrim, rgba(15, 20, 35, 0.45)); animation: sx-fade-in var(--sx-dur-fast, 120ms) var(--sx-ease-out, ease) both; } @supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) { .sx-overlay__scrim { -webkit-backdrop-filter: blur(var(--sx-scrim-blur, 2px)); backdrop-filter: blur(var(--sx-scrim-blur, 2px)); } } .sx-overlay__content { position: relative; max-width: 100%; max-height: 100%; display: flex; align-items: center; justify-content: center; animation: sx-dialog-in var(--sx-dur-base, 200ms) var(--sx-ease-out, ease) both; } .sx-overlay__content > * { max-width: 100%; } /* --------------------------------------------------------------------------------------------- Popover host — shared by menus, tooltips and popovers. Positioned by sx.js (left/top/z-index inline); starts hidden so it can be measured, then fades in. --------------------------------------------------------------------------------------------- */ .sx-popover { position: fixed; left: 0; top: 0; visibility: hidden; opacity: 0; transform: translateY(-4px); transition: opacity var(--sx-dur-fast, 120ms) var(--sx-ease-out, ease), transform var(--sx-dur-fast, 120ms) var(--sx-ease-out, ease); outline: none; box-sizing: border-box; max-width: calc(100vw - 16px); } .sx-popover[data-side="top"] { transform: translateY(4px); } .sx-popover[data-side="left"] { transform: translateX(4px); } .sx-popover[data-side="right"] { transform: translateX(-4px); } .sx-popover--open { opacity: 1; transform: none !important; } /* Generic panel (SxPopover) — a raised surface with the glass edge. */ .sx-popover-anchor { display: inline-block; width: 0; height: 0; overflow: hidden; } .sx-popover-panel { color: var(--sx-text-1, #151a24); background: var(--sx-surface-3, #ffffff); border-radius: var(--sx-radius-md, 14px); box-shadow: var(--sx-edge, none), var(--sx-shadow-4, 0 12px 32px -8px rgba(0, 0, 0, 0.2)); border: 1px solid var(--sx-line, rgba(16, 24, 40, 0.08)); } /* --------------------------------------------------------------------------------------------- SxMenu — the list. Continuous radius: panel 14px, 6px padding → rows 8px. --------------------------------------------------------------------------------------------- */ .sx-menu-anchor { display: inline-flex; align-items: center; vertical-align: middle; } .sx-menu__activator { display: inline-flex; align-items: center; cursor: pointer; } .sx-menu { color: var(--sx-text-1, #151a24); background: var(--sx-surface-3, #ffffff); border-radius: var(--sx-radius-md, 14px); box-shadow: var(--sx-edge, none), var(--sx-shadow-4, 0 12px 32px -8px rgba(0, 0, 0, 0.2)); border: 1px solid var(--sx-line, rgba(16, 24, 40, 0.08)); padding: 6px; min-width: 160px; overflow: auto; overscroll-behavior: contain; } .sx-menu__list { display: flex; flex-direction: column; gap: 1px; } .sx-menu__list > .sx-divider { margin: 5px 6px; width: auto; } .sx-menu-item { position: relative; display: flex; align-items: center; gap: 10px; width: 100%; min-height: 36px; padding: 6px 12px; margin: 0; border: 0; border-radius: 8px; background: transparent; color: inherit; font: inherit; font-size: var(--sx-text-body-sm-size, 0.875rem); line-height: 1.3; text-align: start; white-space: nowrap; cursor: pointer; box-sizing: border-box; transition: background-color var(--sx-dur-fast, 120ms) var(--sx-ease-out, ease); } .sx-menu--dense .sx-menu-item { min-height: 30px; padding: 4px 10px; } .sx-menu-item:hover { background: var(--sx-surface-hover, rgba(20, 40, 80, 0.05)); } .sx-menu-item:focus-visible { outline: none; box-shadow: var(--sx-focus-shadow, 0 0 0 2px #1f6fc6); } .sx-menu-item:active { background: var(--sx-neutral-soft, rgba(16, 24, 40, 0.06)); } .sx-menu-item:disabled { color: var(--sx-text-disabled, #a3a9b8); cursor: default; } .sx-menu-item:disabled .sx-menu-item__icon { color: var(--sx-text-disabled, #a3a9b8); } .sx-menu-item__icon { flex: 0 0 auto; } .sx-menu-item__label { flex: 1 1 auto; min-width: 0; } /* When any row carries an icon, align every label past the icon column. */ .sx-menu__list:has(.sx-menu-item__icon) .sx-menu-item { padding-inline-start: 40px; } .sx-menu__list:has(.sx-menu-item__icon) .sx-menu-item__icon { position: absolute; inset-inline-start: 12px; top: 50%; transform: translateY(-50%); } .sx-menu--dense .sx-menu__list:has(.sx-menu-item__icon) .sx-menu-item { padding-inline-start: 36px; } .sx-menu--dense .sx-menu__list:has(.sx-menu-item__icon) .sx-menu-item__icon { inset-inline-start: 10px; } /* --------------------------------------------------------------------------------------------- SxTooltip — contrast (inverse) surface, caption size, optional arrow. --------------------------------------------------------------------------------------------- */ .sx-tooltip-anchor { display: inline-flex; vertical-align: middle; max-width: 100%; } .sx-tooltip-anchor--block { display: block; } .sx-tooltip { pointer-events: none; max-width: min(320px, calc(100vw - 16px)); padding: 6px 10px; border-radius: var(--sx-radius-sm, 10px); /* --sx-surface-2 / --sx-text-1, NOT --sx-contrast-*. tokens.css now hands this element the OPPOSITE theme's token set (see the `.sx-tooltip` pair in both theme blocks), so its own base surface already IS the inverted colour — and reading --sx-contrast-bg here would invert it a second time and hand back the page's own background. Everything inside the bubble now resolves from the same inverted set, which is what makes chips and muted text legible on it. */ background: var(--sx-surface-2, #1f2533); color: var(--sx-text-1, #f3f5f9); font-size: var(--sx-text-caption-size, 0.75rem); line-height: var(--sx-text-caption-line, 1.4); font-weight: 500; letter-spacing: 0.005em; box-shadow: var(--sx-shadow-3, 0 6px 16px -4px rgba(0, 0, 0, 0.25)); white-space: normal; overflow-wrap: anywhere; } .sx-tooltip--arrow::before { content: ""; position: absolute; width: 10px; height: 10px; background: inherit; transform: rotate(45deg); border-radius: 2px; } .sx-tooltip--arrow[data-side="bottom"]::before { top: -5px; left: calc(var(--sx-arrow-x, 50%) - 5px); } .sx-tooltip--arrow[data-side="top"]::before { bottom: -5px; left: calc(var(--sx-arrow-x, 50%) - 5px); } .sx-tooltip--arrow[data-side="right"]::before { left: -5px; top: calc(var(--sx-arrow-y, 50%) - 5px); } .sx-tooltip--arrow[data-side="left"]::before { right: -5px; top: calc(var(--sx-arrow-y, 50%) - 5px); } /* --------------------------------------------------------------------------------------------- SxSnackbar — top-right stack of frosted toasts. Severity shows as a soft icon disc, not a loud fill; the message stays in the surface's text colour. Danger uses role=alert. --------------------------------------------------------------------------------------------- */ .sx-snackbar-region { position: fixed; top: 16px; right: 16px; z-index: var(--sx-z-snackbar, 1500); display: flex; flex-direction: column; align-items: flex-end; gap: 10px; width: min(420px, calc(100vw - 32px)); pointer-events: none; } .sx-snackbar { pointer-events: auto; display: flex; align-items: flex-start; gap: 10px; width: 100%; min-width: 0; padding: 10px 8px 10px 12px; box-sizing: border-box; color: var(--sx-text-1, #151a24); background: var(--sx-glass-bg-fallback, #fbfcfe); border: 1px solid var(--sx-glass-border, rgba(255, 255, 255, 0.6)); border-radius: var(--sx-radius-lg, 18px); box-shadow: var(--sx-edge, none), var(--sx-shadow-4, 0 12px 32px -8px rgba(0, 0, 0, 0.2)); animation: sx-toast-in var(--sx-dur-base, 200ms) var(--sx-ease-out, ease) both; } @supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) { .sx-snackbar { background: var(--sx-glass-bg, rgba(255, 255, 255, 0.7)); -webkit-backdrop-filter: var(--sx-glass-filter, blur(20px)); backdrop-filter: var(--sx-glass-filter, blur(20px)); } } .sx-snackbar__icon { flex: 0 0 auto; display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: var(--sx-radius-full, 9999px); margin-top: 1px; } .sx-snackbar--info .sx-snackbar__icon { background: var(--sx-info-soft, rgba(11, 122, 143, 0.1)); color: var(--sx-info-text, #086a7c); } .sx-snackbar--success .sx-snackbar__icon { background: var(--sx-success-soft, rgba(23, 122, 77, 0.1)); color: var(--sx-success-text, #136a42); } .sx-snackbar--warning .sx-snackbar__icon { background: var(--sx-warning-soft, rgba(168, 93, 8, 0.1)); color: var(--sx-warning-text, #8a4b00); } .sx-snackbar--danger .sx-snackbar__icon { background: var(--sx-danger-soft, rgba(201, 58, 58, 0.1)); color: var(--sx-danger-text, #b42f2f); } .sx-snackbar__message { flex: 1 1 auto; min-width: 0; padding-top: 5px; font-size: var(--sx-text-body-sm-size, 0.875rem); line-height: 1.4; overflow-wrap: anywhere; } .sx-snackbar__action { flex: 0 0 auto; margin-top: 1px; } .sx-snackbar__close { flex: 0 0 auto; margin-top: 2px; color: var(--sx-text-3, #616a7d); } @keyframes sx-toast-in { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } } @media (max-width: 599.98px) { .sx-snackbar-region { top: 12px; right: 12px; left: 12px; width: auto; } } /* ============================================================================================= TIER 3 — inputs (Phase 3) Every field in the old app was Outlined + Dense, so there is one look here, not a variant matrix. The label is stacked above the box rather than notched into the border: simpler, always legible, and identical for text, numeric, select and picker controls. ============================================================================================= */ /* A field fills its container by default. It used to be shrink-to-fit, which sized every field to its control's intrinsic width — a textarea's ~20 columns, an input's `size` — so fields in a grid cell or a form column came out stubby and unrelated to the space they were given, and the only way out was FullWidth="true" at the call site. The default is now the common case; the rare field that must size to its content (a toolbar row that reads as a sentence, a field sharing a line with buttons) opts out with FullWidth="false" → `.sx-field--auto` below. */ .sx-field { display: flex; width: 100%; flex-direction: column; gap: 5px; min-width: 0; max-width: 100%; box-sizing: border-box; text-align: start; } /* Retained so FullWidth="true" keeps meaning what it says; identical to the default now. */ .sx-field--full { display: flex; width: 100%; } /* The opt-out. Declared after the base rule — same specificity, so source order decides. In a flex row this restores content sizing, which is what lets `flex-grow-1` siblings share the line and what stops a wrapping row from breaking to one item per line. */ .sx-field--auto { display: inline-flex; width: auto; } /* Inline label (Inline="true"). Label beside the box instead of above it, which takes a ~56px stacked row down to ~38px — the difference between a tender list that fits and one that scrolls. The label column is fixed width (override per-call with InlineLabelWidth) so a stack of inline fields keeps its boxes on one vertical edge rather than stepping in and out with each label's length. `align-items: center` is what puts a neighbouring button on the box's centre line; with the stacked layout the label pushed the box down and any unlabelled sibling sat too high. */ .sx-field--inline { flex-direction: row; align-items: center; gap: 10px; flex-wrap: wrap; } .sx-field--inline > .sx-field__label { flex: 0 0 var(--sx-field-label-w, 88px); max-width: var(--sx-field-label-w, 88px); /* Long labels truncate rather than wrapping the box onto a second line — wrapping would defeat the height saving that is the whole point of this variant. */ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; line-height: 38px; } .sx-field--inline > .sx-field__box { flex: 1 1 0; min-width: 0; } /* The message line spans the full width underneath, indented past the label column so it reads as belonging to the input rather than to the label. */ .sx-field--inline > .sx-field__message { flex: 1 0 100%; margin-left: calc(var(--sx-field-label-w, 88px) + 10px); } /* Narrow screens: fall back to the stacked layout. Below this width the label column would leave the input too cramped to type a money amount into. */ @media (max-width: 480px) { .sx-field--inline { flex-direction: column; align-items: stretch; gap: 5px; } .sx-field--inline > .sx-field__label { flex: 0 0 auto; max-width: 100%; line-height: 1.3; } .sx-field--inline > .sx-field__message { margin-left: 0; } } .sx-field__label { display: inline-flex; align-items: center; gap: 2px; font-size: var(--sx-text-label-lg-size, 0.8125rem); line-height: 1.3; font-weight: var(--sx-text-label-lg-weight, 600); letter-spacing: 0.005em; color: var(--sx-text-2, #4b5565); cursor: pointer; } .sx-field__required { color: var(--sx-danger-text, #b42f2f); font-weight: 700; } .sx-field__box { position: relative; display: flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 10px; box-sizing: border-box; background: var(--sx-surface-2, #ffffff); border: 1px solid var(--sx-line-input, rgba(16, 24, 40, 0.48)); border-radius: var(--sx-radius-sm, 10px); transition: border-color var(--sx-dur-fast, 120ms) var(--sx-ease-out, ease), box-shadow var(--sx-dur-fast, 120ms) var(--sx-ease-out, ease), background-color var(--sx-dur-fast, 120ms) var(--sx-ease-out, ease); } .sx-field__box:hover { border-color: var(--sx-text-2, #4b5565); } /* The soft double focus ring (motif #2) lands on the box, not the bare input. */ .sx-field__box:focus-within { border-color: var(--sx-accent, #1f6fc6); box-shadow: var(--sx-focus-shadow, 0 0 0 2px #1f6fc6); } .sx-field--multiline .sx-field__box { align-items: flex-start; padding-block: 8px; } .sx-field--error .sx-field__box { border-color: var(--sx-danger, #c93a3a); } .sx-field--error .sx-field__box:focus-within { border-color: var(--sx-danger, #c93a3a); box-shadow: 0 0 0 1.5px var(--sx-danger, #c93a3a), 0 0 0 6px var(--sx-danger-soft, rgba(201, 58, 58, 0.18)); } .sx-field--error .sx-field__label { color: var(--sx-danger-text, #b42f2f); } .sx-field--disabled { opacity: 0.6; } .sx-field--disabled .sx-field__box { background: var(--sx-surface-sunken, #eceff5); border-style: dashed; } .sx-field--disabled .sx-field__label { cursor: default; } .sx-field--readonly .sx-field__box { background: var(--sx-surface-sunken, #eceff5); } .sx-field__control { flex: 1 1 auto; display: flex; align-items: center; min-width: 0; } .sx-field--multiline .sx-field__control { align-items: stretch; } .sx-field__adornment { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px; color: var(--sx-text-3, #616a7d); font-size: var(--sx-text-body-sm-size, 0.875rem); line-height: 1; } .sx-field__adornment-text { white-space: nowrap; } .sx-field__adornment--button { margin: 0; padding: 4px; border: 0; border-radius: var(--sx-radius-xs, 6px); background: transparent; color: inherit; font: inherit; cursor: pointer; } .sx-field__adornment--button:hover { background: var(--sx-surface-hover, rgba(20, 40, 80, 0.05)); } .sx-field__adornment--button:focus-visible { outline: none; box-shadow: var(--sx-focus-shadow, 0 0 0 2px #1f6fc6); } .sx-field__adornment--button:disabled { cursor: default; } .sx-field__message { font-size: var(--sx-text-caption-size, 0.75rem); line-height: var(--sx-text-caption-line, 1.4); color: var(--sx-text-3, #616a7d); padding-inline: 2px; } .sx-field__message--error { color: var(--sx-danger-text, #b42f2f); } /* --------------------------------------------------------------------------------------------- The bare control. The box owns the border and background; the input owns nothing but the text. --------------------------------------------------------------------------------------------- */ .sx-input { flex: 1 1 auto; width: 100%; min-width: 0; margin: 0; padding: 8px 0; border: 0; background: transparent; color: var(--sx-text-1, #151a24); font-family: inherit; font-size: var(--sx-text-body-sm-size, 0.875rem); line-height: 1.4; outline: none; box-sizing: border-box; } /* reset.css applies the double focus ring to a BARE `:focus-visible`, which the inner control matches too — so a focused field drew the box's ring AND a second ring hugging just the input, inside the border. The box owns focus for the whole field (`:focus-within` above); the control contributes nothing. Do not add `outline: none` here alone — the ring is a box-shadow. */ .sx-input:focus-visible, .sx-input:focus { outline: none; box-shadow: none; border-radius: 0; } .sx-input::placeholder { color: var(--sx-text-3, #616a7d); opacity: 0.8; } .sx-input:disabled { color: var(--sx-text-disabled, #a3a9b8); -webkit-text-fill-color: var(--sx-text-disabled, #a3a9b8); cursor: default; } .sx-input--multiline { padding-block: 0; resize: vertical; min-height: calc(1.4em * 2); } /* An auto-growing textarea re-sizes itself to its content on every keystroke, so a manual drag is overwritten on the next character typed. Offering the grip there advertises a control that does not hold. Plain multiline fields keep `resize: vertical` from the rule above. */ .sx-input--autogrow { resize: none; } /* Numerals stay tabular so digits line up column-wise, but the text is start-aligned: these fields sit behind a leading `$` adornment, and end-aligned text drifted away from it leaving a gap the operator had to scan across. */ .sx-input--numeric { text-align: start; font-variant-numeric: tabular-nums; } .sx-input__clear, .sx-input__spin-btn { flex: 0 0 auto; display: inline-grid; place-items: center; margin: 0; padding: 0; border: 0; background: transparent; color: var(--sx-text-3, #616a7d); cursor: pointer; } .sx-input__clear { width: 20px; height: 20px; border-radius: var(--sx-radius-full, 9999px); } .sx-input__clear:hover { background: var(--sx-surface-hover, rgba(20, 40, 80, 0.05)); color: var(--sx-text-1, #151a24); } .sx-input__clear:focus-visible { outline: none; box-shadow: var(--sx-focus-shadow, 0 0 0 2px #1f6fc6); } .sx-input__counter { flex: 0 0 auto; font-size: var(--sx-text-caption-size, 0.75rem); color: var(--sx-text-3, #616a7d); font-variant-numeric: tabular-nums; } /* Our own spinner: type=number's native one cannot be styled and scroll-changes the value. */ .sx-input__spin { flex: 0 0 auto; display: flex; flex-direction: column; gap: 1px; } .sx-input__spin-btn { height: 13px; width: 18px; border-radius: var(--sx-radius-xs, 6px); } .sx-input__spin-btn:hover { background: var(--sx-surface-hover, rgba(20, 40, 80, 0.05)); color: var(--sx-text-1, #151a24); } .sx-input__spin-btn:disabled { opacity: 0.4; cursor: default; } /* Reveal on hover/focus only — a permanent pair of arrows on every money field is noise. */ .sx-input__spin { opacity: 0; transition: opacity var(--sx-dur-fast, 120ms) var(--sx-ease-out, ease); } .sx-field__box:hover .sx-input__spin, .sx-field__box:focus-within .sx-input__spin { opacity: 1; } @media (hover: none) { .sx-input__spin { opacity: 1; } } /* --------------------------------------------------------------------------------------------- SxSelect — native