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:
kerimatilganandClaude Opus 4.7 committed
1 parent
a535dcee38
commit
e464a4160d
2 files changed
+30
-27
No files matched your search
+29
-26
@@ -86,6 +86,12 @@
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||
}
|
||||
/* Tailwind preflight is disabled to keep legacy screens working;
|
||||
manually restore the border defaults Tailwind utilities expect. */
|
||||
*, ::before, ::after {
|
||||
border-color: #c3c6d7;
|
||||
border-style: solid;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style>
|
||||
@@ -120,19 +126,28 @@
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Nav-tab active state — paired with the Tailwind classes on the
|
||||
inactive baseline. Override colour + bottom border for active tab. */
|
||||
/* Nav-tab states. The active tab gets a 2px underline anchored to
|
||||
the bottom edge of the dark header via inset box-shadow. */
|
||||
header .nav-tab {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
padding: 0 8px;
|
||||
background: transparent;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
padding: 0 8px;
|
||||
font-family: inherit;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
color: #c3c6d7;
|
||||
transition: color 0.15s, box-shadow 0.15s;
|
||||
}
|
||||
header .nav-tab:hover {
|
||||
color: #eaf1ff;
|
||||
}
|
||||
header .nav-tab.active {
|
||||
color: #eaf1ff !important;
|
||||
border-bottom: 2px solid #b4c5ff !important;
|
||||
padding-top: 2px;
|
||||
color: #eaf1ff;
|
||||
box-shadow: inset 0 -2px 0 0 #b4c5ff;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
@@ -969,26 +984,14 @@
|
||||
<span class="material-symbols-outlined text-inverse-on-surface">monitoring</span>
|
||||
<span class="text-title-sm font-semibold text-inverse-on-surface">Provisions-Tracker</span>
|
||||
</div>
|
||||
<nav class="hidden md:flex items-end h-full">
|
||||
<nav class="hidden md:flex items-stretch h-full">
|
||||
<ul class="flex gap-lg h-full">
|
||||
<li class="h-full flex items-center">
|
||||
<button class="nav-tab active h-full flex items-center px-sm text-body-md text-inverse-on-surface border-b-2 border-primary-fixed-dim pt-[2px] transition-colors" onclick="showTab('schaltung')">Schaltung erfassen</button>
|
||||
</li>
|
||||
<li class="h-full flex items-center">
|
||||
<button class="nav-tab h-full flex items-center px-sm text-body-md text-on-surface-variant hover:text-inverse-on-surface transition-colors" onclick="showTab('overview')">Übersicht</button>
|
||||
</li>
|
||||
<li class="h-full flex items-center">
|
||||
<button class="nav-tab h-full flex items-center px-sm text-body-md text-on-surface-variant hover:text-inverse-on-surface transition-colors" onclick="showTab('provisionen')">Provisionen</button>
|
||||
</li>
|
||||
<li class="h-full flex items-center">
|
||||
<button class="nav-tab h-full flex items-center px-sm text-body-md text-on-surface-variant hover:text-inverse-on-surface transition-colors" onclick="showTab('geloeschte')">Gelöschte Schaltungen</button>
|
||||
</li>
|
||||
<li class="h-full flex items-center">
|
||||
<button class="nav-tab h-full flex items-center px-sm text-body-md text-on-surface-variant hover:text-inverse-on-surface transition-colors" onclick="showTab('admin')">Administration</button>
|
||||
</li>
|
||||
<li class="h-full flex items-center admin-only" style="display:none">
|
||||
<button class="nav-tab h-full flex items-center px-sm text-body-md text-on-surface-variant hover:text-inverse-on-surface transition-colors" onclick="showTab('users')">Benutzer</button>
|
||||
</li>
|
||||
<li class="h-full flex"><button class="nav-tab active" onclick="showTab('schaltung')">Schaltung erfassen</button></li>
|
||||
<li class="h-full flex"><button class="nav-tab" onclick="showTab('overview')">Übersicht</button></li>
|
||||
<li class="h-full flex"><button class="nav-tab" onclick="showTab('provisionen')">Provisionen</button></li>
|
||||
<li class="h-full flex"><button class="nav-tab" onclick="showTab('geloeschte')">Gelöschte Schaltungen</button></li>
|
||||
<li class="h-full flex"><button class="nav-tab" onclick="showTab('admin')">Administration</button></li>
|
||||
<li class="h-full flex admin-only" style="display:none"><button class="nav-tab" onclick="showTab('users')">Benutzer</button></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<div class="flex items-center gap-md">
|
||||
@@ -1013,7 +1016,7 @@
|
||||
<h1 class="text-headline-md text-on-surface mb-xs">Neue Schaltung</h1>
|
||||
<p class="text-body-sm text-on-surface-variant">Schritt 1 von 2: Anbieter wählen</p>
|
||||
</div>
|
||||
<div id="wizardAnbieterButtons" class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-md"></div>
|
||||
<div id="wizardAnbieterButtons" class="grid grid-cols-2 lg:grid-cols-3 gap-md"></div>
|
||||
</div>
|
||||
|
||||
<!-- Step 2: VO + Tarif + Tarifoptionen + Kundendaten -->
|
||||
|
||||
+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