David DyerandClaude Sonnet 5
9a32d34662
Breaks the single 2,167-line styles.scss into abstracts/base/components/
layout/pages partials, forwarded from styles.scss (now a manifest only)
via @use. Organized by what each rule is/does rather than by page, since
a lot of it is intentionally shared — the item/announcement/user admin
list grids share one CSS Grid system across three admin pages, and
.knot/.rule-row/.hero-ctas/the announcement banner are used on both
index.php and menu.php. Splitting by page would have fought that.
abstracts/tokens — :root custom properties
base/reset, utilities — bare-element defaults, small reusable utility classes
components/* — buttons, cards/panels, forms, status-badge,
admin data-grid, admin modal, announcement
banner, dividers, social-row
layout/* — header/nav, footer, admin nav+dashboard shell
pages/* — home, public menu, admin login/menu/hours
One real content move: .category-panel .panel-head's mobile override
now sits next to its desktop rule in pages/admin-menu instead of inside
the shared admin-data-grid mobile block — keeping it there would have
broken a same-specificity cascade order dependency once split across
files.
Verified behavior-preserving: fresh build's declaration count, class-
token set, and declaration multiset all match the pre-split styles.css
exactly; homepage, menu page, and admin login spot-checked visually and
via computed styles.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
70 lines
1.9 KiB
SCSS
70 lines
1.9 KiB
SCSS
.status-badge {
|
|
display: inline-flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
gap: 0.4rem;
|
|
font-family: var(--font-mono);
|
|
font-size: 0.72rem;
|
|
letter-spacing: 0.08em;
|
|
text-transform: uppercase;
|
|
padding: 0.25rem 0.6rem;
|
|
border-radius: 0.125rem;
|
|
white-space: nowrap;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
.status-badge.active {
|
|
background: rgba(51, 80, 63, 0.4);
|
|
border: 1px solid var(--green);
|
|
color: #9fe2bf;
|
|
}
|
|
|
|
.status-badge.inactive {
|
|
background: rgba(138, 115, 74, 0.2);
|
|
border: 1px solid var(--rule);
|
|
color: var(--ink-muted);
|
|
}
|
|
|
|
/* Both the menu item and announcement status badges double as their own
|
|
toggle control — a plain <button> would otherwise pick up the
|
|
browser's default chrome underneath the badge's own background/border.
|
|
Scoped to the element type so it's a no-op wherever a status-badge is
|
|
still a plain read-only <span>. Width is fixed per context below
|
|
(each page's label set is a different length) so toggling never
|
|
changes the badge's — and therefore the Status column's — width and
|
|
shoves every other column sideways. */
|
|
button.status-badge {
|
|
appearance: none;
|
|
-webkit-appearance: none;
|
|
cursor: pointer;
|
|
justify-content: center;
|
|
transition: opacity .15s ease;
|
|
}
|
|
|
|
button.status-badge:hover {
|
|
opacity: 0.8;
|
|
}
|
|
|
|
button.status-badge:disabled {
|
|
cursor: not-allowed;
|
|
opacity: 0.5;
|
|
}
|
|
|
|
/* "● Available" is the longest menu item label, ~6.7rem measured. */
|
|
.item-row button.status-badge {
|
|
width: 7rem;
|
|
}
|
|
|
|
/* "⏳ Scheduled" is the longest announcement label, ~7rem measured. */
|
|
.ann-row button.status-badge {
|
|
width: 7.25rem;
|
|
}
|
|
|
|
/* "○ Disabled" is the longer of the two user labels. Not scoped to
|
|
button.status-badge like the two above — your own row's badge is a
|
|
plain non-interactive span (see users.php), and it still needs to line
|
|
up in the same column. */
|
|
.user-row .status-badge {
|
|
width: 7rem;
|
|
}
|