sdarbinyan/marketplaces
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
c461d9bd5f378bc5f0ac730fe7665b2c48896049
marketplaces/src/app/components/delivery-selector/delivery-selector.component.scss

66 lines
1.4 KiB
SCSS
Raw Normal View History

delivery
2026-06-21 23:13:01 +04:00
:host {
display: block;
}
.delivery-selector {
margin-top: 12px;
padding: 12px;
style(design-system): normalize exact-match border-radius literals to tokens Mechanical sweep for border-radius: 4px/8px/12px/13px/999px replaced with var(--radius-xs/sm/md/lg/full, <same value>) across src/app. Only exact matches to existing token values were touched (20px, 16px, 10px, 6px, 3px, 2px etc. were left as-is since no token maps to them without a visible size change on at least one tenant theme — see docs/UI-DESIGN-REVIEW.md).
2026-07-20 03:27:25 +04:00
border-radius: var(--radius-md, 12px);
fix(storefront): premium UX polish for cart, checkout - 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>
2026-07-23 11:57:23 +04:00
border: 1px solid var(--border-color);
background: var(--bg-secondary);
delivery
2026-06-21 23:13:01 +04:00
}
.delivery-label {
display: block;
margin-bottom: 8px;
style(design-system): roll out font-size scale across storefront/builder/backoffice Mechanical, value-preserving substitution: every literal font-size declaration across src/app (89 files) that matched one of the 9 typography scale steps introduced earlier (--font-size-xs..4xl) was replaced with var(--font-size-STEP, <same-or-nearest-step-value>). Values within ~0.03rem/1px of a scale step were snapped to that step (e.g. 0.85rem and 0.8rem both -> --font-size-sm/0.8125rem; 0.9rem and 0.875rem -> --font-size-base/0.875rem) to consolidate roughly 15 near-duplicate sizes down to the 9-step scale, per the RC design-system finalization brief. This eliminates most of the font-size fragmentation found across the app (previously: 0.7/0.72/0.75/0.78/0.8/0.8125/0.85/ 0.875/0.9/0.9375/0.95/1/1.05/1.1/1.125/1.15/1.2/1.25/1.3/1.35/1.4/1.5/ 1.75/2rem all in live use simultaneously). Not touched (deliberately, see docs/UI-DESIGN-REVIEW.md): 3rem+ display sizes (too large a jump to any existing step, would need a --font-size-5xl addition), font-size values expressed via clamp()/calc(), and any component listed as intentionally distinct (code-editor syntax tokens, theme brand colors).
2026-07-20 03:26:17 +04:00
font-size: var(--font-size-sm, 0.8125rem);
style(design-system): normalize font-weight literals (400/500/600/700) to tokens Mechanical, value-preserving: font-weight: 400/500/600/700 -> var(--font-weight-normal/medium/semibold/bold, <same value>) across src/app. Note: cart.component.scss now sits ~771 bytes over its per-file budget in angular.json due to longer var() strings; non-fatal build warning, noted in docs/UI-DESIGN-REVIEW.md as a follow-up (either bump the component style budget slightly or accept the warning).
2026-07-20 03:28:56 +04:00
font-weight: var(--font-weight-bold, 700);
fix(storefront): premium UX polish for cart, checkout - 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>
2026-07-23 11:57:23 +04:00
color: var(--text-primary);
delivery
2026-06-21 23:13:01 +04:00
}
.delivery-control select {
width: 100%;
padding: 10px 12px;
fix(storefront): premium UX polish for cart, checkout - 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>
2026-07-23 11:57:23 +04:00
border-radius: var(--radius-sm, 10px);
border: 1px solid var(--border-color);
background: var(--bg-primary);
color: var(--text-primary);
style(design-system): roll out font-size scale across storefront/builder/backoffice Mechanical, value-preserving substitution: every literal font-size declaration across src/app (89 files) that matched one of the 9 typography scale steps introduced earlier (--font-size-xs..4xl) was replaced with var(--font-size-STEP, <same-or-nearest-step-value>). Values within ~0.03rem/1px of a scale step were snapped to that step (e.g. 0.85rem and 0.8rem both -> --font-size-sm/0.8125rem; 0.9rem and 0.875rem -> --font-size-base/0.875rem) to consolidate roughly 15 near-duplicate sizes down to the 9-step scale, per the RC design-system finalization brief. This eliminates most of the font-size fragmentation found across the app (previously: 0.7/0.72/0.75/0.78/0.8/0.8125/0.85/ 0.875/0.9/0.9375/0.95/1/1.05/1.1/1.125/1.15/1.2/1.25/1.3/1.35/1.4/1.5/ 1.75/2rem all in live use simultaneously). Not touched (deliberately, see docs/UI-DESIGN-REVIEW.md): 3rem+ display sizes (too large a jump to any existing step, would need a --font-size-5xl addition), font-size values expressed via clamp()/calc(), and any component listed as intentionally distinct (code-editor syntax tokens, theme brand colors).
2026-07-20 03:26:17 +04:00
font-size: var(--font-size-base, 0.875rem);
delivery
2026-06-21 23:13:01 +04:00
line-height: 1.4;
fix(storefront): premium UX polish for cart, checkout - 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>
2026-07-23 11:57:23 +04:00
transition: border-color var(--transition-normal), box-shadow var(--transition-normal);
&:hover {
border-color: var(--primary-color);
}
delivery
2026-06-21 23:13:01 +04:00
}
fix(storefront): premium UX polish for cart, checkout - 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>
2026-07-23 11:57:23 +04:00
.delivery-control select:focus-visible {
delivery
2026-06-21 23:13:01 +04:00
outline: none;
fix(storefront): premium UX polish for cart, checkout - 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>
2026-07-23 11:57:23 +04:00
border-color: var(--primary-color);
delivery
2026-06-21 23:13:01 +04:00
box-shadow: 0 0 0 3px rgba(73, 118, 113, 0.12);
}
.delivery-meta {
display: grid;
gap: 4px;
margin-top: 10px;
fix(storefront): premium UX polish for cart, checkout - 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>
2026-07-23 11:57:23 +04:00
font-size: var(--font-size-sm, 0.8125rem);
color: var(--text-secondary);
delivery
2026-06-21 23:13:01 +04:00
line-height: 1.45;
}
.delivery-chip {
display: inline-flex;
align-items: center;
padding: 6px 10px;
style(design-system): normalize exact-match border-radius literals to tokens Mechanical sweep for border-radius: 4px/8px/12px/13px/999px replaced with var(--radius-xs/sm/md/lg/full, <same value>) across src/app. Only exact matches to existing token values were touched (20px, 16px, 10px, 6px, 3px, 2px etc. were left as-is since no token maps to them without a visible size change on at least one tenant theme — see docs/UI-DESIGN-REVIEW.md).
2026-07-20 03:27:25 +04:00
border-radius: var(--radius-full, 999px);
style(design-system): roll out font-size scale across storefront/builder/backoffice Mechanical, value-preserving substitution: every literal font-size declaration across src/app (89 files) that matched one of the 9 typography scale steps introduced earlier (--font-size-xs..4xl) was replaced with var(--font-size-STEP, <same-or-nearest-step-value>). Values within ~0.03rem/1px of a scale step were snapped to that step (e.g. 0.85rem and 0.8rem both -> --font-size-sm/0.8125rem; 0.9rem and 0.875rem -> --font-size-base/0.875rem) to consolidate roughly 15 near-duplicate sizes down to the 9-step scale, per the RC design-system finalization brief. This eliminates most of the font-size fragmentation found across the app (previously: 0.7/0.72/0.75/0.78/0.8/0.8125/0.85/ 0.875/0.9/0.9375/0.95/1/1.05/1.1/1.125/1.15/1.2/1.25/1.3/1.35/1.4/1.5/ 1.75/2rem all in live use simultaneously). Not touched (deliberately, see docs/UI-DESIGN-REVIEW.md): 3rem+ display sizes (too large a jump to any existing step, would need a --font-size-5xl addition), font-size values expressed via clamp()/calc(), and any component listed as intentionally distinct (code-editor syntax tokens, theme brand colors).
2026-07-20 03:26:17 +04:00
font-size: var(--font-size-sm, 0.8125rem);
style(design-system): normalize font-weight literals (400/500/600/700) to tokens Mechanical, value-preserving: font-weight: 400/500/600/700 -> var(--font-weight-normal/medium/semibold/bold, <same value>) across src/app. Note: cart.component.scss now sits ~771 bytes over its per-file budget in angular.json due to longer var() strings; non-fatal build warning, noted in docs/UI-DESIGN-REVIEW.md as a follow-up (either bump the component style budget slightly or accept the warning).
2026-07-20 03:28:56 +04:00
font-weight: var(--font-weight-bold, 700);
delivery
2026-06-21 23:13:01 +04:00
}
.delivery-chip--digital {
color: #2563eb;
background: rgba(37, 99, 235, 0.12);
}
Reference in New Issue Copy Permalink