fixed image styles

adobecom · Jan 21, 2025 · 323b1dd · 323b1dd
1 parent aef94f3
commit 323b1dd
Show file tree

Hide file tree

Showing 6 changed files with 38 additions and 32 deletions.
diff --git a/libs/deps/mas/mas.js b/libs/deps/mas/mas.js
@@ -1694,6 +1694,14 @@ merch-card[variant="ccd-slice"] [slot='body-s'] a.spectrum-Link {
         font-size: 14px;
         line-height: 18px;
     }
+
+    merch-card[variant="ah-single-plan"] [slot='image'] img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+        border-radius: 16px;
+        overflow: hidden;
+    }
 `;var uc={mnemonics:{size:"s"},backgroundImage:{tag:"div",slot:"image"},title:{tag:"h3",slot:"heading-xs"},description:{tag:"div",slot:"body-xxs"},prices:{tag:"p",slot:"price"},ctas:{slot:"cta",size:"S"},allowedColors:["gray"]},De=class extends C{getGlobalCSS(){return Wo}get aemFragmentMapping(){return uc}renderLayout(){return x`
       <div class="content">
         <div class="header">
@@ -1779,14 +1787,6 @@ merch-card[variant="ccd-slice"] [slot='body-s'] a.spectrum-Link {
         width: 199px;
         overflow: hidden;
     }
-
-    :host([variant='ah-single-plan']) ::slotted([slot='image']) img {
-        width: 100%;
-        height: 100%;
-        object-fit: cover;
-        border-radius: 16px;
-        overflow: hidden;
-    }
   `);customElements.define("ah-single-plan",De);var Kn=(e,t=!1)=>{switch(e.variant){case"catalog":return new at(e);case"image":return new Ar(e);case"inline-heading":return new Er(e);case"mini-compare-chart":return new st(e);case"plans":return new ct(e);case"product":return new Ue(e);case"segment":return new lt(e);case"special-offers":return new ht(e);case"twp":return new dt(e);case"ccd-suggested":return new ut(e);case"ccd-slice":return new mt(e);case"ah-single-plan":return new De(e);default:return t?void 0:new Ue(e)}},qo=()=>{let e=[];return e.push(at.variantStyle),e.push(st.variantStyle),e.push(Ue.variantStyle),e.push(ct.variantStyle),e.push(lt.variantStyle),e.push(ht.variantStyle),e.push(dt.variantStyle),e.push(ut.variantStyle),e.push(mt.variantStyle),e.push(De.variantStyle),e};var Zo=document.createElement("style");Zo.innerHTML=`
 :root {
     --consonant-merch-card-detail-font-size: 12px;

diff --git a/libs/deps/mas/merch-card.js b/libs/deps/mas/merch-card.js
@@ -1719,6 +1719,14 @@ merch-card[variant="ccd-slice"] [slot='body-s'] a.spectrum-Link {
         font-size: 14px;
         line-height: 18px;
     }
+
+    merch-card[variant="ah-single-plan"] [slot='image'] img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+        border-radius: 16px;
+        overflow: hidden;
+    }
 `;var Bo={mnemonics:{size:"s"},backgroundImage:{tag:"div",slot:"image"},title:{tag:"h3",slot:"heading-xs"},description:{tag:"div",slot:"body-xxs"},prices:{tag:"p",slot:"price"},ctas:{slot:"cta",size:"S"},allowedColors:["gray"]},q=class extends E{getGlobalCSS(){return Ur}get aemFragmentMapping(){return Bo}renderLayout(){return ko`
       <div class="content">
         <div class="header">
@@ -1804,14 +1812,6 @@ merch-card[variant="ccd-slice"] [slot='body-s'] a.spectrum-Link {
         width: 199px;
         overflow: hidden;
     }
-
-    :host([variant='ah-single-plan']) ::slotted([slot='image']) img {
-        width: 100%;
-        height: 100%;
-        object-fit: cover;
-        border-radius: 16px;
-        overflow: hidden;
-    }
   `);customElements.define("ah-single-plan",q);var Et=(e,t=!1)=>{switch(e.variant){case"catalog":return new ne(e);case"image":return new Fe(e);case"inline-heading":return new $e(e);case"mini-compare-chart":return new ae(e);case"plans":return new ie(e);case"product":return new W(e);case"segment":return new se(e);case"special-offers":return new ce(e);case"twp":return new le(e);case"ccd-suggested":return new he(e);case"ccd-slice":return new de(e);case"ah-single-plan":return new q(e);default:return t?void 0:new W(e)}},zr=()=>{let e=[];return e.push(ne.variantStyle),e.push(ae.variantStyle),e.push(W.variantStyle),e.push(ie.variantStyle),e.push(se.variantStyle),e.push(ce.variantStyle),e.push(le.variantStyle),e.push(he.variantStyle),e.push(de.variantStyle),e.push(q.variantStyle),e};var Gr=document.createElement("style");Gr.innerHTML=`
 :root {
     --consonant-merch-card-detail-font-size: 12px;

diff --git a/libs/features/mas/dist/mas.js b/libs/features/mas/dist/mas.js
@@ -1694,6 +1694,14 @@ merch-card[variant="ccd-slice"] [slot='body-s'] a.spectrum-Link {
         font-size: 14px;
         line-height: 18px;
     }
+
+    merch-card[variant="ah-single-plan"] [slot='image'] img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+        border-radius: 16px;
+        overflow: hidden;
+    }
 `;var uc={mnemonics:{size:"s"},backgroundImage:{tag:"div",slot:"image"},title:{tag:"h3",slot:"heading-xs"},description:{tag:"div",slot:"body-xxs"},prices:{tag:"p",slot:"price"},ctas:{slot:"cta",size:"S"},allowedColors:["gray"]},De=class extends C{getGlobalCSS(){return Wo}get aemFragmentMapping(){return uc}renderLayout(){return x`
       <div class="content">
         <div class="header">
@@ -1779,14 +1787,6 @@ merch-card[variant="ccd-slice"] [slot='body-s'] a.spectrum-Link {
         width: 199px;
         overflow: hidden;
     }
-
-    :host([variant='ah-single-plan']) ::slotted([slot='image']) img {
-        width: 100%;
-        height: 100%;
-        object-fit: cover;
-        border-radius: 16px;
-        overflow: hidden;
-    }
   `);customElements.define("ah-single-plan",De);var Kn=(e,t=!1)=>{switch(e.variant){case"catalog":return new at(e);case"image":return new Ar(e);case"inline-heading":return new Er(e);case"mini-compare-chart":return new st(e);case"plans":return new ct(e);case"product":return new Ue(e);case"segment":return new lt(e);case"special-offers":return new ht(e);case"twp":return new dt(e);case"ccd-suggested":return new ut(e);case"ccd-slice":return new mt(e);case"ah-single-plan":return new De(e);default:return t?void 0:new Ue(e)}},qo=()=>{let e=[];return e.push(at.variantStyle),e.push(st.variantStyle),e.push(Ue.variantStyle),e.push(ct.variantStyle),e.push(lt.variantStyle),e.push(ht.variantStyle),e.push(dt.variantStyle),e.push(ut.variantStyle),e.push(mt.variantStyle),e.push(De.variantStyle),e};var Zo=document.createElement("style");Zo.innerHTML=`
 :root {
     --consonant-merch-card-detail-font-size: 12px;

diff --git a/libs/features/mas/docs/styles.css b/libs/features/mas/docs/styles.css
@@ -228,6 +228,12 @@ merch-card[variant='ccd-slice'][size='wide'] {
     }
 }
 
+.ah-single-plan {
+    display: flex;
+    justify-content: center;
+    width: 100%;
+}
+
 .flex-cards {
     display: flex;
     flex-wrap: wrap;

diff --git a/libs/features/mas/src/variants/ah-single-plan.css.js b/libs/features/mas/src/variants/ah-single-plan.css.js
@@ -33,4 +33,12 @@ export const CSS = `
         font-size: 14px;
         line-height: 18px;
     }
+
+    merch-card[variant="ah-single-plan"] [slot='image'] img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+        border-radius: 16px;
+        overflow: hidden;
+    }
 `;
diff --git a/libs/features/mas/src/variants/ah-single-plan.js b/libs/features/mas/src/variants/ah-single-plan.js
@@ -111,14 +111,6 @@ export class AHSinglePlan extends VariantLayout {
         width: 199px;
         overflow: hidden;
     }
-
-    :host([variant='ah-single-plan']) ::slotted([slot='image']) img {
-        width: 100%;
-        height: 100%;
-        object-fit: cover;
-        border-radius: 16px;
-        overflow: hidden;
-    }
   `;
 }