rene
459cd425f2
PHASE 1 — Sofort-Cleanup ohne Risiko: - Neue Datei utilities.css mit ~25 Klassen für häufige Kombinationen: * text-xs-muted, text-xs-secondary, text-sm-muted, text-sm-secondary * flex-gap-2/3, flex-col-gap-2/3/4, flex-center-gap-1/2/3 * flex-between, flex-1-min, mb-1/3, mt-1/3 * icon-xs/sm/md/lg, label-block, caption - index.html bindet utilities.css ein - mb-3/mt-3 ergänzt (waren in design-system.css unvollständig) PHASE 2 — .by-tab Modifier für Vereinheitlichung: - .by-tabs.grid (mit --tab-cols Variable für Admin/Health/etc.) - .by-tabs.sticky (Desktop vertikale Tabs für Admin) - .by-tabs.wrap (Zuchthunde, flex-wrap statt scroll) - .by-tabs.separated (Sitting, mit eigenem Hintergrund + Border) PHASE 3 — Inline-Style → Klassen-Migration (Python-Script): - 948 Inline-Styles entfernt (5101 → 4153, -18%) - 962 Migrationen über 47 Page-Dateien - Top-Treffer: admin.js (180), health.js (67), dog-profile.js (67), litters.js (62), settings.js (61), zuchthunde.js (51) - Patterns: text-muted, text-secondary, text-danger, text-xs-muted, text-sm-muted, grid-2 (Duplikat-Bug behoben!), flex-col-gap-3, p-3/4, mb-2/3/4, hidden, w-full, flex-1, ... - Bewahrt bestehende class-Attribute (mergt korrekt) Alle 19 Tests grün. Kein visueller Diff erwartet (gleiche Property-Werte).
65 lines
2.9 KiB
CSS
65 lines
2.9 KiB
CSS
/* ============================================================
|
|
BAN YARO — Utility-Klassen für häufige Inline-Patterns
|
|
Ergänzt design-system.css (Single-Property-Utilities sind dort)
|
|
============================================================ */
|
|
|
|
/* ------------------------------------------------------------
|
|
Text + Farb-Kombinationen (häufigste Inline-Patterns)
|
|
------------------------------------------------------------ */
|
|
.text-xs-muted { font-size: var(--text-xs); color: var(--c-text-muted); }
|
|
.text-xs-secondary { font-size: var(--text-xs); color: var(--c-text-secondary); }
|
|
.text-sm-muted { font-size: var(--text-sm); color: var(--c-text-muted); }
|
|
.text-sm-secondary { font-size: var(--text-sm); color: var(--c-text-secondary); }
|
|
|
|
/* Caption = Mini-Label/Hinweis unter einem Wert */
|
|
.caption {
|
|
font-size: var(--text-xs);
|
|
color: var(--c-text-secondary);
|
|
margin-top: 2px;
|
|
}
|
|
|
|
/* ------------------------------------------------------------
|
|
Flex-Layouts (kombiniert)
|
|
------------------------------------------------------------ */
|
|
.flex-gap-2 { display: flex; gap: var(--space-2); }
|
|
.flex-gap-3 { display: flex; gap: var(--space-3); }
|
|
.flex-col-gap-2 { display: flex; flex-direction: column; gap: var(--space-2); }
|
|
.flex-col-gap-3 { display: flex; flex-direction: column; gap: var(--space-3); }
|
|
.flex-col-gap-4 { display: flex; flex-direction: column; gap: var(--space-4); }
|
|
|
|
.flex-center { display: flex; align-items: center; }
|
|
.flex-center-gap-1 { display: flex; align-items: center; gap: var(--space-1); }
|
|
.flex-center-gap-2 { display: flex; align-items: center; gap: var(--space-2); }
|
|
.flex-center-gap-3 { display: flex; align-items: center; gap: var(--space-3); }
|
|
|
|
.flex-between { display: flex; align-items: center; justify-content: space-between; }
|
|
.flex-between-gap-2 { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
|
|
|
|
/* min-width:0 + flex:1 — verhindert Overflow in Flex-Children */
|
|
.flex-1-min { flex: 1; min-width: 0; }
|
|
|
|
/* ------------------------------------------------------------
|
|
Spacing-Lücken in design-system.css füllen
|
|
------------------------------------------------------------ */
|
|
.mb-1 { margin-bottom: var(--space-1); }
|
|
.mb-3 { margin-bottom: var(--space-3); }
|
|
.mt-1 { margin-top: var(--space-1); }
|
|
.mt-3 { margin-top: var(--space-3); }
|
|
|
|
/* ------------------------------------------------------------
|
|
Icon-Größen (statt width:NNpx;height:NNpx inline)
|
|
------------------------------------------------------------ */
|
|
.icon-xs { width: 12px; height: 12px; }
|
|
.icon-sm { width: 14px; height: 14px; }
|
|
.icon-md { width: 18px; height: 18px; }
|
|
.icon-lg { width: 22px; height: 22px; }
|
|
|
|
/* ------------------------------------------------------------
|
|
Form-Helper
|
|
------------------------------------------------------------ */
|
|
.label-block {
|
|
display: block;
|
|
font-size: var(--text-sm);
|
|
font-weight: 600;
|
|
margin-bottom: var(--space-1);
|
|
}
|