feat(web): unify data panel hierarchy
This commit is contained in:
@@ -7,6 +7,10 @@
|
||||
*/
|
||||
|
||||
.v2-workspace-panel-header {
|
||||
--v2-panel-accent: #708198;
|
||||
--v2-panel-accent-soft: rgba(112, 129, 152, .08);
|
||||
--v2-panel-chip-border: rgba(112, 129, 152, .16);
|
||||
--v2-panel-chip-background: #f5f7fa;
|
||||
display: flex;
|
||||
min-height: 52px;
|
||||
flex: 0 0 auto;
|
||||
@@ -18,6 +22,47 @@
|
||||
padding: 8px 14px;
|
||||
}
|
||||
|
||||
.v2-workspace-panel-header.tone-primary {
|
||||
--v2-panel-accent: #1268df;
|
||||
--v2-panel-accent-soft: rgba(18, 104, 223, .08);
|
||||
--v2-panel-chip-border: rgba(18, 104, 223, .16);
|
||||
--v2-panel-chip-background: #edf5ff;
|
||||
}
|
||||
|
||||
.v2-workspace-panel-header.tone-warning {
|
||||
--v2-panel-accent: #d97706;
|
||||
--v2-panel-accent-soft: rgba(217, 119, 6, .09);
|
||||
--v2-panel-chip-border: rgba(217, 119, 6, .17);
|
||||
--v2-panel-chip-background: #fff6e8;
|
||||
}
|
||||
|
||||
.v2-workspace-panel-header.tone-authority {
|
||||
--v2-panel-accent: #6656c8;
|
||||
--v2-panel-accent-soft: rgba(102, 86, 200, .08);
|
||||
--v2-panel-chip-border: rgba(102, 86, 200, .16);
|
||||
--v2-panel-chip-background: #f4f1ff;
|
||||
}
|
||||
|
||||
.v2-workspace-panel-header.tone-health {
|
||||
--v2-panel-accent: #0f8f68;
|
||||
--v2-panel-accent-soft: rgba(15, 143, 104, .08);
|
||||
--v2-panel-chip-border: rgba(15, 143, 104, .16);
|
||||
--v2-panel-chip-background: #eaf8f3;
|
||||
}
|
||||
|
||||
.v2-workspace-panel-header.tone-danger {
|
||||
--v2-panel-accent: #d9473f;
|
||||
--v2-panel-accent-soft: rgba(217, 71, 63, .08);
|
||||
--v2-panel-chip-border: rgba(217, 71, 63, .16);
|
||||
--v2-panel-chip-background: #fff2f1;
|
||||
}
|
||||
|
||||
.v2-workspace-panel-header.has-eyebrow {
|
||||
background:
|
||||
linear-gradient(90deg, var(--v2-panel-accent-soft) 0%, rgba(255, 255, 255, .94) 28%, #fff 100%);
|
||||
box-shadow: inset 3px 0 var(--v2-panel-accent);
|
||||
}
|
||||
|
||||
/*
|
||||
* Shared Semi UI mobile filter sheet.
|
||||
* Keep the same title hierarchy, scroll surface, condition card and action
|
||||
@@ -2534,6 +2579,43 @@
|
||||
gap: 3px;
|
||||
}
|
||||
|
||||
.v2-workspace-panel-header.has-eyebrow > .v2-workspace-panel-copy {
|
||||
display: grid;
|
||||
grid-template-columns: auto minmax(0, 1fr);
|
||||
grid-template-rows: auto auto;
|
||||
align-items: center;
|
||||
column-gap: 7px;
|
||||
row-gap: 1px;
|
||||
}
|
||||
|
||||
.v2-workspace-panel-eyebrow.semi-typography {
|
||||
display: inline-flex;
|
||||
min-height: 18px;
|
||||
align-items: center;
|
||||
grid-column: 1;
|
||||
grid-row: 1;
|
||||
border: 1px solid var(--v2-panel-chip-border);
|
||||
border-radius: 999px;
|
||||
background: var(--v2-panel-chip-background);
|
||||
padding-inline: 6px;
|
||||
color: var(--v2-panel-accent);
|
||||
font-size: 8px;
|
||||
font-weight: 750;
|
||||
letter-spacing: .04em;
|
||||
line-height: 16px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.v2-workspace-panel-header.has-eyebrow > .v2-workspace-panel-copy > h5.semi-typography {
|
||||
grid-column: 2;
|
||||
grid-row: 1;
|
||||
}
|
||||
|
||||
.v2-workspace-panel-header.has-eyebrow > .v2-workspace-panel-copy > .semi-typography:last-child:not(.v2-workspace-panel-eyebrow) {
|
||||
grid-column: 1 / -1;
|
||||
grid-row: 2;
|
||||
}
|
||||
|
||||
.v2-workspace-panel-header > .v2-workspace-panel-copy {
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
@@ -15550,12 +15632,34 @@
|
||||
}
|
||||
|
||||
.v2-mileage-results .v2-workspace-panel-copy {
|
||||
width: 82px;
|
||||
min-width: 82px;
|
||||
max-width: 82px;
|
||||
width: 108px;
|
||||
min-width: 108px;
|
||||
max-width: 108px;
|
||||
flex: none;
|
||||
}
|
||||
|
||||
.v2-mileage-results .v2-workspace-panel-header.has-eyebrow > .v2-workspace-panel-copy {
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
grid-template-rows: auto auto;
|
||||
align-content: center;
|
||||
justify-items: start;
|
||||
row-gap: 2px;
|
||||
}
|
||||
|
||||
.v2-mileage-results .v2-workspace-panel-header.has-eyebrow .v2-workspace-panel-eyebrow.semi-typography {
|
||||
grid-column: 1;
|
||||
grid-row: 1;
|
||||
min-height: 16px;
|
||||
padding-inline: 5px;
|
||||
font-size: 7px;
|
||||
line-height: 14px;
|
||||
}
|
||||
|
||||
.v2-mileage-results .v2-workspace-panel-header.has-eyebrow > .v2-workspace-panel-copy > h5.semi-typography {
|
||||
grid-column: 1;
|
||||
grid-row: 2;
|
||||
}
|
||||
|
||||
.v2-mileage-results .v2-workspace-panel-copy > h5.semi-typography {
|
||||
width: auto;
|
||||
overflow: visible;
|
||||
|
||||
Reference in New Issue
Block a user