diff --git a/libs/features/mas/web-components/src/variants/ccd-suggested.css.js b/libs/features/mas/web-components/src/variants/ccd-suggested.css.js index d047d15e74..f0e96ac7c9 100644 --- a/libs/features/mas/web-components/src/variants/ccd-suggested.css.js +++ b/libs/features/mas/web-components/src/variants/ccd-suggested.css.js @@ -20,16 +20,6 @@ merch-card[variant="ccd-suggested"] [slot='heading-xs'] { } -merch-card[variant="ccd-suggested"] [slot='price'] { - display: flex; - align-items: center; -} - -merch-card[variant="ccd-suggested"] [slot='cta'] { - display: flex; - align-items: center; -} - merch-card[variant="ccd-suggested"] [slot='cta'] a { text-decoration: none; color: var(--merch-color-grey-60); diff --git a/libs/features/mas/web-components/src/variants/ccd-suggested.js b/libs/features/mas/web-components/src/variants/ccd-suggested.js index 71b7c1db57..a81d5024b1 100644 --- a/libs/features/mas/web-components/src/variants/ccd-suggested.js +++ b/libs/features/mas/web-components/src/variants/ccd-suggested.js @@ -11,9 +11,9 @@ export class CCDSuggested extends VariantLayout { renderLayout () { return html`
-
+
-
+
@@ -40,18 +40,28 @@ export class CCDSuggested extends VariantLayout { height: auto; } - :host([variant='ccd-suggested']) .top-secton { + :host([variant='ccd-suggested']) .header { display: flex; flex-flow: wrap; place-self: flex-start; } - :host([variant='ccd-suggested']) .header { + :host([variant='ccd-suggested']) .headings { padding-inline-start: var(--consonant-merch-spacing-xxs); } - :host([variant='ccd-suggested'][strip-size='small']) { - width: + :host([variant='ccd-suggested']) ::slotted([slot='icons']) { + flex-flow: wrap; + place-self: flex-start; + } + + :host([variant='ccd-suggested']) ::slotted([slot='heading-xs']) { + font-size: var(--consonant-merch-card-heading-xxs-font-size); + line-height: var(--consonant-merch-card-heading-xxs-line-height); + } + + :host([variant='ccd-suggested']) ::slotted([slot='detail-m']) { + color: var(--merch-color-grey-60); } :host([variant='ccd-suggested'][strip-size='wide']) ::slotted([slot='body-xs']) { @@ -62,11 +72,17 @@ export class CCDSuggested extends VariantLayout { padding-inline-start: 48px; } - :host([variant='ccd-suggested']) slot[name='detail-m'] { - flex-flow: wrap; - place-self: flex-start; + :host([variant='ccd-suggested']) ::slotted([slot='price']) { + display: flex; + align-items: center; + } + + :host([variant='ccd-suggested']) ::slotted([slot='cta']) { + display: flex; + align-items: center; } + :host([variant='ccd-suggested']) .footer { display: flex; justify-content: space-between;