99560202c3
- cart.component.scss: normalize hardcoded hex colors to design tokens (--text-primary, --text-secondary, --bg-primary/--bg-secondary/ --bg-tertiary, --border-color, --error-color, --success-color, --warning-color, --shadow-*, --transition-*, --radius-* fallbacks) across cart items, quantity controls, summary, login gate, terms checkbox, payment modal, payment-active QR screen, and bank-payment iframe modal - cart.component.scss: deduplicate an accidental duplicate .close-modal-btn rule block (identical CSS repeated twice) - cart.component.scss: add focus-visible rings to clear-cart, remove, quantity, checkout, close-modal, retry-payment, copy/open-link, telegram-login, and card-payment buttons - cart.component.scss: delivery-required warning now pairs an icon with the text instead of relying on color/background alone - cart.component.html: add warning icon + role="alert" to the delivery-required notice; add aria-live/aria-label to the quantity value so screen readers announce quantity changes - delivery-selector.component.scss: normalize hardcoded hex colors to design tokens; remove dead :host-context(.cart-container.alt) rules left over after the .alt theme was removed from cart.component in RC-Visual-02 (cart-container never carries an .alt class anymore); add hover/focus-visible states to the delivery <select> Build verified green via `npm run build`. Out of scope / skipped: - Did not restructure the payment modal or bank-payment iframe overlay into shared app-dialog - it has custom multi-step state (creating/ waiting/success/error/timeout) and an already-implemented manual focus-trap; restructuring it is a composition change, not visual polish - Did not convert clearCart()'s native confirm() to a custom confirm-remove dialog - no existing storefront confirm-dialog pattern to follow, and adding one is a composition/architecture change - spinner-large/spinner-small left untouched per RC-Visual-02 guidance (in-progress action state, not content loading) - .email-form block (email/phone capture after payment success) is dead CSS behind commented-out markup; left in place rather than deleting, since removing it is a code-cleanup call, not visual polish - region-selector/language-selector are header-only, not part of the cart/checkout flow - left untouched - no dedicated checkout page exists; checkout is the payment section of the cart page, covered above Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
66 lines
1.4 KiB
SCSS
66 lines
1.4 KiB
SCSS
:host {
|
|
display: block;
|
|
}
|
|
|
|
.delivery-selector {
|
|
margin-top: 12px;
|
|
padding: 12px;
|
|
border-radius: var(--radius-md, 12px);
|
|
border: 1px solid var(--border-color);
|
|
background: var(--bg-secondary);
|
|
}
|
|
|
|
.delivery-label {
|
|
display: block;
|
|
margin-bottom: 8px;
|
|
font-size: var(--font-size-sm, 0.8125rem);
|
|
font-weight: var(--font-weight-bold, 700);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.delivery-control select {
|
|
width: 100%;
|
|
padding: 10px 12px;
|
|
border-radius: var(--radius-sm, 10px);
|
|
border: 1px solid var(--border-color);
|
|
background: var(--bg-primary);
|
|
color: var(--text-primary);
|
|
font-size: var(--font-size-base, 0.875rem);
|
|
line-height: 1.4;
|
|
transition: border-color var(--transition-normal), box-shadow var(--transition-normal);
|
|
|
|
&:hover {
|
|
border-color: var(--primary-color);
|
|
}
|
|
}
|
|
|
|
.delivery-control select:focus-visible {
|
|
outline: none;
|
|
border-color: var(--primary-color);
|
|
box-shadow: 0 0 0 3px rgba(73, 118, 113, 0.12);
|
|
}
|
|
|
|
.delivery-meta {
|
|
display: grid;
|
|
gap: 4px;
|
|
margin-top: 10px;
|
|
font-size: var(--font-size-sm, 0.8125rem);
|
|
color: var(--text-secondary);
|
|
line-height: 1.45;
|
|
}
|
|
|
|
.delivery-chip {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
padding: 6px 10px;
|
|
border-radius: var(--radius-full, 999px);
|
|
font-size: var(--font-size-sm, 0.8125rem);
|
|
font-weight: var(--font-weight-bold, 700);
|
|
}
|
|
|
|
.delivery-chip--digital {
|
|
color: #2563eb;
|
|
background: rgba(37, 99, 235, 0.12);
|
|
}
|
|
|