Various CSS work
This commit is contained in:
parent
ef174af0e1
commit
15579acba8
52 changed files with 8001 additions and 944 deletions
|
|
@ -2,36 +2,9 @@
|
|||
* Cash Register - Page Styling
|
||||
*
|
||||
* Filter bar, stats, table, forms, and difference box
|
||||
* Reuses: swp-sticky-header, swp-header-content (page.css)
|
||||
*/
|
||||
|
||||
/* ===========================================
|
||||
STICKY HEADER CONTAINER
|
||||
=========================================== */
|
||||
swp-cash-sticky-header {
|
||||
display: block;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: var(--z-sticky);
|
||||
background: var(--color-surface);
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
/* Override tab-bar sticky when inside sticky header */
|
||||
swp-cash-sticky-header swp-tab-bar {
|
||||
position: static;
|
||||
top: auto;
|
||||
}
|
||||
|
||||
/* ===========================================
|
||||
KASSE HEADER (Stats above tabs)
|
||||
=========================================== */
|
||||
swp-cash-header {
|
||||
display: block;
|
||||
background: var(--color-surface);
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
padding: var(--spacing-10) var(--spacing-12);
|
||||
}
|
||||
|
||||
/* ===========================================
|
||||
FILTER BAR
|
||||
=========================================== */
|
||||
|
|
@ -375,16 +348,40 @@ swp-status-badge::before {
|
|||
background: currentColor;
|
||||
}
|
||||
|
||||
swp-status-badge.approved {
|
||||
/* Status variants */
|
||||
swp-status-badge.approved,
|
||||
swp-status-badge.active {
|
||||
background: color-mix(in srgb, var(--color-green) 15%, transparent);
|
||||
color: var(--color-green);
|
||||
}
|
||||
|
||||
swp-status-badge.draft {
|
||||
swp-status-badge.draft,
|
||||
swp-status-badge.invited {
|
||||
background: color-mix(in srgb, var(--color-amber) 15%, transparent);
|
||||
color: #b45309;
|
||||
}
|
||||
|
||||
/* Role variants */
|
||||
swp-status-badge.owner {
|
||||
background: color-mix(in srgb, var(--color-teal) 15%, transparent);
|
||||
color: var(--color-teal);
|
||||
}
|
||||
|
||||
swp-status-badge.admin {
|
||||
background: color-mix(in srgb, var(--color-purple) 15%, transparent);
|
||||
color: var(--color-purple);
|
||||
}
|
||||
|
||||
swp-status-badge.leader {
|
||||
background: color-mix(in srgb, var(--color-blue) 15%, transparent);
|
||||
color: var(--color-blue);
|
||||
}
|
||||
|
||||
swp-status-badge.employee {
|
||||
background: var(--color-background-alt);
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
/* ===========================================
|
||||
TWO-COLUMN GRID (Detail View)
|
||||
=========================================== */
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue