SILVER/NODEDC_DESIGN_GUIDELINE
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

feat(ui): add spatial clipping scale and compact record actions

Browse Source
This commit is contained in:
Codex
2026-09-21 08:45:10 +03:00
parent 67025ee209
commit 8dd9190573
15 changed files with 263 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/ui-core/styles.css
+49
View File
@@ -842,6 +842,33 @@ textarea.nodedc-field__control {
cursor: default;
}
.nodedc-select-option-row { display: flex; align-items: stretch; gap: 0.2rem; }
.nodedc-select-option-row > .nodedc-dropdown-option { flex: 1; min-width: 0; }
.nodedc-select-option-row > .nodedc-icon-button {
width: 2.35rem; height: auto; flex: 0 0 2.35rem;
border-radius: 0; background: transparent; box-shadow: none;
color: var(--nodedc-text-muted);
}
.nodedc-select-option-row > .nodedc-icon-button > svg { width: 15px; height: 15px; transform: none; }
.nodedc-select-option-row > .nodedc-icon-button:hover:not(:disabled),
.nodedc-select-option-row > .nodedc-icon-button:focus-visible { background: transparent; color: var(--nodedc-text-primary); }
.nodedc-select-option-row > .nodedc-icon-button[data-tone="danger"]:hover:not(:disabled),
.nodedc-select-option-row > .nodedc-icon-button[data-tone="danger"]:focus-visible { color: rgb(var(--nodedc-danger-rgb)); }
.nodedc-select-option-row > .nodedc-icon-button:active:not(:disabled) { transform: none; }
.nodedc-range-scale { position: relative; width: calc(var(--nodedc-control-height) * 0.4); height: 100%; min-height: 6rem; }
.nodedc-range[data-orientation="vertical"] { width: 100%; height: 100%; border: 0; outline: 0; box-shadow: none; }
.nodedc-range[data-orientation="vertical"]::before { inset: auto 0 0; width: 100%; height: var(--nodedc-range-progress); }
.nodedc-range[data-orientation="vertical"] input[type="range"] { writing-mode: vertical-lr; direction: rtl; }
.nodedc-range[data-orientation="vertical"] .nodedc-range__label { left: 50%; max-width: none; font-size: calc(var(--nodedc-font-size-sm) * 0.9); writing-mode: vertical-rl; transform: translate(-50%, -50%) rotate(180deg); }
.nodedc-range-scale__limit { position: absolute; left: calc(100% + 0.4rem); color: var(--nodedc-text-primary); font-size: calc(var(--nodedc-font-size-xs) * 0.9); font-weight: var(--nodedc-font-weight-medium); line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap; pointer-events: none; }
.nodedc-range-scale[data-limit-side="left"] .nodedc-range-scale__limit { right: calc(100% + 0.4rem); left: auto; text-align: right; }
.nodedc-range-scale__limit--max { top: 0.75rem; }
.nodedc-range-scale__limit--min { bottom: 0.75rem; }
.nodedc-range[data-orientation="vertical"] .nodedc-range__fill-text { clip-path: inset(calc(100% - var(--nodedc-range-progress)) 0 0 round var(--nodedc-radius-circle)); }
/* Native ranges may match focus-visible after pointer input too. Keep every
state perimeter-free; underline both contrast layers to identify focus. */
.nodedc-range[data-orientation="vertical"]:has(input:focus-visible) .nodedc-range__label { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 2px; }
.nodedc-range__label,
.nodedc-range__value {
position: absolute;
@@ -1627,6 +1654,8 @@ textarea.nodedc-field__control {
.nodedc-application-panel__head {
display: flex;
flex-wrap: wrap;
min-width: 0;
min-height: 3.55rem;
align-items: flex-start;
justify-content: space-between;
@@ -1635,6 +1664,7 @@ textarea.nodedc-field__control {
.nodedc-application-panel__titles {
display: grid;
flex: 1 1 18rem;
min-width: 0;
gap: 0.24rem;
padding: 0.2rem 0.25rem;
@@ -1669,12 +1699,17 @@ textarea.nodedc-field__control {
.nodedc-application-panel__actions {
display: flex;
flex: 0 0 auto;
flex-wrap: wrap;
max-width: 100%;
margin-left: auto;
align-items: center;
gap: 0.45rem;
}
.nodedc-application-panel__tools {
display: flex;
min-width: 0;
max-width: 100%;
align-items: center;
margin-right: 0.1rem;
}
@@ -3926,6 +3961,20 @@ textarea.nodedc-field__control {
.nodedc-status[data-variant="indicator"][data-tone="danger"]::before { background: rgb(var(--nodedc-danger-rgb)); }
.nodedc-status[data-variant="indicator"][data-tone="accent"]::before { background: rgb(var(--nodedc-accent-rgb)); }
.nodedc-status[data-pulse="true"]::before {
content: ""; display: block; width: .42rem; height: .42rem; flex: 0 0 .42rem;
border-radius: var(--nodedc-radius-circle); background: currentColor;
animation: nodedc-status-pulse 1.6s ease-in-out infinite;
}
.nodedc-status[data-pulse="true"]:not([data-variant="indicator"]) { gap: .42rem; }
@keyframes nodedc-status-pulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: .35; transform: scale(.75); }
}
@media (prefers-reduced-motion: reduce) {
.nodedc-status[data-pulse="true"]::before { animation: none; }
}
/* Shared product landing and environment settings. */
.nodedc-landing-stage {
position: relative;