style(ui): full UX/UI + motion pass across storefront, admin, editor
Some checks failed
Architecture Governance / architecture (push) Has been cancelled
Some checks failed
Architecture Governance / architecture (push) Has been cancelled
- fix save-bar buttons to use shared app-button primitive (were unstyled) - fix platform-nav-group border/radius via structural selectors, drop dead -middle/-right classes - storefront widgets (hero/categories/product-carousel/footer-nav): design tokens, hover/focus states, 44px touch targets, entrance motion, reduced- motion guards - admin dashboard cards + quick-actions: hover lift, entrance animation - admin product-form gallery remove badge: hover/focus + expanded hit area - project-editor section.shared button styles: hover/active/focus/disabled states + reduced-motion; section-switch fade-in motion Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
@@ -11,17 +11,17 @@
|
||||
<!-- Navigation Buttons (desktop) -->
|
||||
<nav class="platform-nav">
|
||||
<div class="platform-nav-group">
|
||||
<a [routerLink]="'/' | langRoute" routerLinkActive="platform-active" [routerLinkActiveOptions]="{exact: true}"
|
||||
(click)="closeMenu()" class="platform-nav-btn platform-nav-btn-left">
|
||||
<a [routerLink]="'/' | langRoute" routerLinkActive="platform-active" [routerLinkActiveOptions]="{exact: true}"
|
||||
(click)="closeMenu()" class="platform-nav-btn">
|
||||
{{ 'header.home' | translate }}
|
||||
</a>
|
||||
@if (headerConfig().showCategories) {
|
||||
<button type="button" (click)="navigateToCatalog()" class="platform-nav-btn platform-nav-btn-left">
|
||||
<button type="button" (click)="navigateToCatalog()" class="platform-nav-btn">
|
||||
{{ 'header.catalog' | translate }}
|
||||
</button>
|
||||
}
|
||||
@for (page of headerPages(); track page.id) {
|
||||
<button type="button" (click)="navigateToStatic(page.route)" class="platform-nav-btn platform-nav-btn-left">
|
||||
<button type="button" (click)="navigateToStatic(page.route)" class="platform-nav-btn">
|
||||
{{ page.title }}
|
||||
</button>
|
||||
}
|
||||
|
||||
@@ -553,34 +553,30 @@
|
||||
cursor: pointer;
|
||||
transition: background 0.3s ease;
|
||||
white-space: nowrap;
|
||||
|
||||
|
||||
&:not(:first-child) {
|
||||
border-left: none;
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
border-radius: 10px 0 0 10px;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-radius: 0 10px 10px 0;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: #a1b4b5;
|
||||
color: #1e3c38;
|
||||
}
|
||||
|
||||
|
||||
&.platform-active {
|
||||
background: #497671;
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
|
||||
.platform-nav-btn-left {
|
||||
border-radius: 10px 0 0 10px;
|
||||
padding: 6px 32px;
|
||||
}
|
||||
|
||||
.platform-nav-btn-middle {
|
||||
padding: 6px 40px;
|
||||
border-left: none;
|
||||
}
|
||||
|
||||
.platform-nav-btn-right {
|
||||
border-radius: 0 10px 10px 0;
|
||||
padding: 6px 28px;
|
||||
border-left: none;
|
||||
}
|
||||
|
||||
// Search Box
|
||||
.platform-search-wrapper {
|
||||
flex: 1;
|
||||
@@ -975,7 +971,7 @@
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
// Mobile Menu Backdrop — full-screen, blurred, blocks interaction
|
||||
// Mobile Menu Backdrop <EFBFBD> full-screen, blurred, blocks interaction
|
||||
.platform-menu-backdrop {
|
||||
display: block;
|
||||
position: fixed;
|
||||
|
||||
Reference in New Issue
Block a user