Fix Stitch redesign: border defaults, tab underline, 3-col carrier grid
Three small but visible regressions in the previous step: 1. Tailwind's "border" utility only sets the width; with preflight disabled the style fell back to the browser default (none), so the carrier cards in step 1 rendered without any visible outline. Add a minimal *,::before,::after rule that restores border-style: solid and a sensible default border-color, mirroring the relevant slice of preflight without breaking legacy screens. 2. The active tab underline was a mix of Tailwind border-b-2 utility classes on the button and a CSS border-bottom override. Because the button used flex items-center inside an li, the underline floated somewhere in the middle of the header instead of hugging the bottom. Drop the Tailwind border-* classes and switch to a single inset box-shadow at the bottom of the button, which always anchors to the header's lower edge regardless of padding. 3. The carrier grid was 4 columns on lg, which made 6 providers wrap awkwardly. Match the Stitch mockup: 2 cols on small screens, 3 on lg. Card corner radius shrunk from rounded-lg back to rounded (4px) to match the Stitch tool-style aesthetic. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
1 parent
a535dcee38
commit
e464a4160d
2 files changed
+30
-27
No files matched your search
+1
-1
@@ -65,7 +65,7 @@ async function renderWizardAnbieterButtons() {
|
||||
anbieter.forEach(a => {
|
||||
const btn = document.createElement('button');
|
||||
btn.type = 'button';
|
||||
btn.className = 'group flex flex-col items-center justify-center p-lg border border-outline-variant rounded-lg bg-surface-container-lowest hover:-translate-y-1 hover:shadow-sm hover:border-primary transition-all duration-200 h-32';
|
||||
btn.className = 'group flex flex-col items-center justify-center p-lg border border-outline-variant rounded bg-surface-container-lowest hover:-translate-y-1 hover:shadow-sm hover:border-primary transition-all duration-200 h-32';
|
||||
btn.innerHTML = `
|
||||
<span class="material-symbols-outlined text-4xl text-on-surface-variant group-hover:text-primary mb-sm" style="font-variation-settings: 'FILL' 1;">cell_tower</span>
|
||||
<span class="text-title-sm text-on-surface"></span>
|
||||
|
||||
Reference in new issue
Block a user