Add enterprise appliance experience Phase 1 foundation
This commit is contained in:
1 parent
b3eec34158
commit
ebaa2e7219
69 files changed
+6832
-18
No files matched your search
@@ -159,6 +159,26 @@ a { color: inherit; text-decoration: none; }
|
||||
font-size: .6875rem; font-weight: 600; letter-spacing: .02em;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
/* Shared enterprise state and accessibility primitives. */
|
||||
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
|
||||
outline: 3px solid var(--brand);
|
||||
outline-offset: 2px;
|
||||
box-shadow: var(--shadow-focus);
|
||||
}
|
||||
.cx-state { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--border); border-radius: var(--radius-pill); padding: 3px 9px; font-weight: 600; }
|
||||
.cx-state::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
|
||||
.cx-state-ready { color: var(--green); background: var(--green-lt); border-color: var(--green-border); }
|
||||
.cx-state-degraded, .cx-state-stale { color: var(--amber); background: var(--amber-lt); border-color: var(--amber-border); }
|
||||
.cx-state-failed { color: var(--red); background: var(--red-lt); border-color: var(--red-border); }
|
||||
.cx-state-loading, .cx-state-empty, .cx-state-restricted, .cx-state-unavailable { color: var(--text-secondary); background: var(--surface2); }
|
||||
.cx-alert { border: 1px solid var(--border); border-radius: var(--radius-md); padding: 12px 14px; }
|
||||
.cx-alert[data-severity="critical"] { border-color: var(--red-border); background: var(--red-lt); }
|
||||
.cx-alert[data-severity="warning"] { border-color: var(--amber-border); background: var(--amber-lt); }
|
||||
.cx-error { color: var(--red); font-weight: 600; }
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
*, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
|
||||
}
|
||||
.badge-pill.violet { background: var(--brand-lt); color: var(--brand-text); border: 1px solid var(--brand-border); }
|
||||
.badge-pill.green { background: var(--green-lt); color: var(--green); border: 1px solid var(--green-border); }
|
||||
.badge-pill.amber { background: var(--amber-lt); color: var(--amber); border: 1px solid var(--amber-border); }
|
||||
|
||||
Reference in new issue
Block a user