Add the classes below to the lease offer item in order to:
<!-- Default -->
<article class="sds-leaseOffer sds-box -insetLg sds-scaleInteraction">
<div class="sds-leaseOffer__inner">
<div class="sds-leaseOffer__miscInfo">
<img src="../../media/spuerkeess-site/components/lease-offer/opel-sign.png" class="sds-leaseOffer__brand" />
<div class="sds-leaseOffer__badgeContainer row row-xs">
<div class="col-auto">
<div class="sds-badge badge -badgeSuccess -badgeMuted">
Prime écologique incluse
</div>
</div>
</div>
</div>
<div class="sds-leaseOffer__header sds-stackXs">
<h3 class="h3">Jeep Avenger Longitude BEV</h3>
<p>Electrique - Automatique</p>
</div>
<div class="sds-leaseOffer__optionsZone">
<div class="sds-box__outOfBoundsLg">
<div class="sds-leaseOffer__imgWrapper">
<div class="sds-leaseOffer__imgWrapperInner">
<img class="sds-leaseOffer__img img-fluid" src="https://cdn.imagin.studio/getImage?&=&customer=spuerkeess&make=opel&modelFamily=mokka-e&modelRange=mokka-e&modelVariant=od&modelYear=2021&powerTrain=fossil&transmission=0&bodySize=5&trim=0&paintId=pspc0068&angle=23&width=800&zoomType=fullscreen" alt="">
</div>
</div>
</div>
<div class="sds-leaseOffer__configOptions">
<div class="sds-leaseOffer__configLabel">
Disponible en:
</div>
<div class="sds-leaseOffer__configColors">
<span class="sds-colorOption -small" style="background-color: #000000"></span>
<span class="sds-colorOption -small" style="background-color: #E8DC85"></span>
<span class="sds-colorOption -small" style="background-color: #B3B3B2"></span>
<span class="sds-colorOption -small" style="background-color: #22AA77"></span>
</div>
</div>
</div>
<div class="sds-leaseOffer__priceArea sds-stackXs">
<div class="d-flex align-items-baseline flex-wrap">
<div class="sds-amount sds-leaseOffer__price h1">
<span class="sds-amount__value">563,00</span>
<span class="sds-amount__currency">€</span>
</div>
<span class="sds-leaseOffer__priceMisc">TVA incluse</span>
</div>
<p class="sds-formDisclaimer">
par mois pour un leasing sur 5 ans et 10.000 km/an
</p>
</div>
<div class="sds-label sds-leaseOffer__highlightMessage -highlight">
Délai de livraison : 6 mois
<button type="button" class="sds-infoDot sds-label__infoDot -small" data-trigger="focus" data-container="body" data-placement="left" data-toggle="popover" title="Popover title" data-content="Le détail de la / des transactions (bénéficiaire et communication) sera masqué dans les mouvements des transactions (sur S-Net Pro et dans les extraits de compte)">
<span class="sds-icon sds-icon-infocirclefill"></span>
<span class="sr-only">Show more info</span>
</button>
</div>
<a href="" class="sds-leaseOffer__action">
<div class="sds-leaseOffer__actionInner">
<span class="sds-btn -btnPrimary">
<span class="sds-btn__text">Configurer</span>
</span>
</div>
</a>
</div>
</article>
<!-- Highlight -->
<section class="sds-section -sectionSunken -leaseOfferWrapper">
<div class="sds-section__innerWrapper">
<div class="sds-section__inner">
<div class="container">
<article class="sds-leaseOffer sds-box -insetLg -highlight">
<div class="sds-leaseOffer__inner">
<div class="sds-leaseOffer__miscInfo">
<img src="../../media/spuerkeess-site/components/lease-offer/opel-sign.png" class="sds-leaseOffer__brand" />
<div class="sds-leaseOffer__badgeContainer row row-xs">
<div class="col-auto">
<div class="sds-badge badge -badgeSuccess -badgeMuted">
Prime écologique incluse
</div>
</div>
<div class="col-auto">
<div class="sds-badge badge -badgeInfo -badgeMuted">
Délai de livraison: 6 mois
</div>
</div>
</div>
</div>
<div class="sds-leaseOffer__header sds-stackXs">
<h2 class="h2">
Jeep Avenger Longitude BEV
<span class="sds-headingLight">Electrique - Automatique</span>
</h2>
</div>
<div class="sds-leaseOffer__optionsZone">
<div class="sds-box__outOfBoundsLg">
<div class="sds-leaseOffer__imgWrapper">
<div class="sds-leaseOffer__imgWrapperInner">
<div class="sds-leaseOffer__plus">
<svg class="sds-leaseOffer__plusSvg" width="314" height="315" viewBox="0 0 314 315" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path class="sds-leaseOffer__plusSvgColor" d="M157.776 0.00200132C71.0702 -0.431216 0.435219 69.5231 0.00200133 156.228C-0.431216 242.934 69.523 313.569 156.208 314.002C166.337 314.064 176.259 313.115 185.873 311.32C249.37 299.499 299.458 249.473 311.279 185.873C312.971 176.755 313.919 167.389 313.981 157.796C314.415 71.0909 244.481 0.455852 157.776 0.0226351" fill="#DE0000" />
<path d="M147.415 41.4884C145.868 44.0464 145.352 46.2744 145.352 52.7933V145.357H52.7883C46.2901 145.357 44.062 145.873 41.4833 147.4C38.3889 149.463 36.5117 152.887 36.5117 156.992C36.5117 160.272 37.7083 163.119 39.7712 165.182C40.2869 165.698 182.135 307.546 185.889 311.3C249.386 299.48 299.495 249.453 311.295 185.853C306.22 180.778 165.301 39.8793 164.95 39.5286C162.908 37.6101 160.144 36.4961 157.008 36.4961C152.903 36.4961 149.458 38.3734 147.415 41.4678" fill="url(#paint0_linear_2844_102641)" />
<path d="M272.518 147.418C269.939 145.871 267.711 145.376 261.213 145.376H168.628V52.8117C168.628 46.3135 168.113 44.0855 166.566 41.5068C164.503 38.4124 161.078 36.5352 156.973 36.5352C152.868 36.5352 149.443 38.4124 147.38 41.5068C145.833 44.0649 145.317 46.2929 145.317 52.8117V145.376H52.7532C46.2343 145.376 44.027 145.892 41.4483 147.418C38.3539 149.481 36.4766 152.906 36.4766 157.011C36.4766 161.116 38.3539 164.541 41.4483 166.603C44.0064 168.151 46.2343 168.666 52.7532 168.666H145.317V261.231C145.317 267.749 145.833 269.957 147.38 272.535C149.443 275.609 152.868 277.507 156.973 277.507C161.078 277.507 164.503 275.63 166.566 272.535C168.113 269.957 168.628 267.749 168.628 261.231V168.666H261.213C267.711 168.666 269.939 168.151 272.518 166.603C275.592 164.541 277.49 161.116 277.49 157.011C277.49 152.906 275.612 149.481 272.518 147.418Z" fill="white" />
<defs>
<linearGradient id="paint0_linear_2844_102641" x1="74" y1="85" x2="270.5" y2="256" gradientUnits="userSpaceOnUse">
<stop stop-color="white" />
<stop offset="1" stop-color="white" stop-opacity="0" />
</linearGradient>
</defs>
</svg>
</div>
<img class="sds-leaseOffer__img img-fluid" src="https://cdn.imagin.studio/getImage?&=&customer=spuerkeess&make=opel&modelFamily=mokka-e&modelRange=mokka-e&modelVariant=od&modelYear=2021&powerTrain=fossil&transmission=0&bodySize=5&trim=0&paintId=pspc0068&angle=23&width=1000&zoomType=fullscreen" alt="">
</div>
</div>
</div>
<div class="sds-leaseOffer__configOptions">
<div class="sds-leaseOffer__configLabel">
Disponible en:
</div>
<div class="sds-leaseOffer__configColors">
<span class="sds-colorOption -small" style="background-color: #000000"></span>
<span class="sds-colorOption -small" style="background-color: #E8DC85"></span>
<span class="sds-colorOption -small" style="background-color: #B3B3B2"></span>
<span class="sds-colorOption -small" style="background-color: #22AA77"></span>
</div>
</div>
</div>
<div class="sds-leaseOffer__priceArea sds-stackXs">
<div class="d-flex align-items-baseline flex-wrap">
<div class="sds-amount sds-leaseOffer__price h1">
<span class="sds-amount__value">563,00</span>
<span class="sds-amount__currency">€</span>
</div>
<span class="sds-leaseOffer__priceMisc">TVA incluse</span>
</div>
<p class="sds-formDisclaimer">
par mois pour un leasing sur 5 ans et 10.000 km/an
</p>
</div>
<div class="sds-label sds-leaseOffer__highlightMessage -highlight">
Délai de livraison : 6 mois
<button type="button" class="sds-infoDot sds-label__infoDot -small" data-trigger="focus" data-container="body" data-placement="left" data-toggle="popover" title="Popover title" data-content="Le détail de la / des transactions (bénéficiaire et communication) sera masqué dans les mouvements des transactions (sur S-Net Pro et dans les extraits de compte)">
<span class="sds-icon sds-icon-infocirclefill"></span>
<span class="sr-only">Show more info</span>
</button>
</div>
<a href="" class="sds-leaseOffer__action">
<div class="sds-leaseOffer__actionInner">
<span class="sds-btn -btnPrimary">
<span class="sds-btn__text">Configurer</span>
</span>
</div>
</a>
</div>
</article>
</div>
</div>
</div>
</section>
<!-- Custom -->
<article class="sds-leaseOffer sds-box -insetLg sds-scaleInteraction -custom">
<div class="sds-leaseOffer__inner">
<div class="sds-leaseOffer__optionsZone">
<div class="sds-box__outOfBoundsLg">
<div class="sds-leaseOffer__imgWrapper">
<div class="sds-leaseOffer__imgWrapperInner">
<img class="sds-leaseOffer__img img-fluid" src="https://cdn.imagin.studio/getImage?&=&customer=spuerkeess&make=opel&modelFamily=mokka-e&modelRange=mokka-e&modelVariant=od&modelYear=2021&powerTrain=fossil&transmission=0&bodySize=5&trim=0&paintId=pspc0068&angle=23&width=800&zoomType=fullscreen" alt="">
</div>
</div>
</div>
</div>
<div class="sds-stackLg">
<div class="sds-stackXs">
<div class="h3">Vous n'avez pas trouvé la voiture qui vous ressemble ?</div>
<p>Demander une offre Lease Plus sur mesure</p>
</div>
<a href="" class="sds-btn -btnPrimary stretched-link">
<span class="sds-btn__text">Demander une offre Lease Plus sur mesure</span>
</a>
</div>
</div>
</article>
<!-- Default -->
{% if highlight %}
<section class="{{ namespace }}section -sectionSunken -leaseOfferWrapper">
<div class="{{ namespace }}section__innerWrapper">
<div class="{{ namespace }}section__inner">
<div class="container">
{% endif %}
<article class="{{ namespace }}leaseOffer {{ namespace }}box -insetLg {% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}">
<div class="{{ namespace }}leaseOffer__inner">
<div class="{{ namespace }}leaseOffer__miscInfo">
<img src="{{ (mediaPath + brand) | path }}" class="{{ namespace }}leaseOffer__brand"/>
{% if prime or deliveryDelay %}
<div class="{{ namespace }}leaseOffer__badgeContainer row row-xs">
{% if prime %}
<div class="col-auto">
{% render "@badge--success-muted",{
text: "Prime écologique incluse"
},true %}
</div>
{% endif %}
{% if deliveryDelay %}
<div class="col-auto">
{% render "@badge--info-muted",{
text: "Délai de livraison: 6 mois"
},true %}
</div>
{% endif %}
</div>
{% endif %}
</div>
<div class="{{ namespace }}leaseOffer__header {{ namespace }}stackXs">
{% if highlight %}
{% render "@heading--h2-subtext",{
text: title,
subText: subTitle
},true %}
{% else %}
<h3 class="h3">{{ title }}</h3>
<p>{{ subTitle }}</p>
{% endif %}
</div>
<div class="{{ namespace }}leaseOffer__optionsZone">
<div class="{{ namespace }}box__outOfBoundsLg">
<div class="{{ namespace }}leaseOffer__imgWrapper">
<div class="{{ namespace }}leaseOffer__imgWrapperInner">
{% if highlight %}
<div class="{{ namespace }}leaseOffer__plus">
<svg class="{{ namespace }}leaseOffer__plusSvg" width="314" height="315" viewBox="0 0 314 315" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path class="{{ namespace }}leaseOffer__plusSvgColor" d="M157.776 0.00200132C71.0702 -0.431216 0.435219 69.5231 0.00200133 156.228C-0.431216 242.934 69.523 313.569 156.208 314.002C166.337 314.064 176.259 313.115 185.873 311.32C249.37 299.499 299.458 249.473 311.279 185.873C312.971 176.755 313.919 167.389 313.981 157.796C314.415 71.0909 244.481 0.455852 157.776 0.0226351" fill="#DE0000"/>
<path d="M147.415 41.4884C145.868 44.0464 145.352 46.2744 145.352 52.7933V145.357H52.7883C46.2901 145.357 44.062 145.873 41.4833 147.4C38.3889 149.463 36.5117 152.887 36.5117 156.992C36.5117 160.272 37.7083 163.119 39.7712 165.182C40.2869 165.698 182.135 307.546 185.889 311.3C249.386 299.48 299.495 249.453 311.295 185.853C306.22 180.778 165.301 39.8793 164.95 39.5286C162.908 37.6101 160.144 36.4961 157.008 36.4961C152.903 36.4961 149.458 38.3734 147.415 41.4678" fill="url(#paint0_linear_2844_102641)"/>
<path d="M272.518 147.418C269.939 145.871 267.711 145.376 261.213 145.376H168.628V52.8117C168.628 46.3135 168.113 44.0855 166.566 41.5068C164.503 38.4124 161.078 36.5352 156.973 36.5352C152.868 36.5352 149.443 38.4124 147.38 41.5068C145.833 44.0649 145.317 46.2929 145.317 52.8117V145.376H52.7532C46.2343 145.376 44.027 145.892 41.4483 147.418C38.3539 149.481 36.4766 152.906 36.4766 157.011C36.4766 161.116 38.3539 164.541 41.4483 166.603C44.0064 168.151 46.2343 168.666 52.7532 168.666H145.317V261.231C145.317 267.749 145.833 269.957 147.38 272.535C149.443 275.609 152.868 277.507 156.973 277.507C161.078 277.507 164.503 275.63 166.566 272.535C168.113 269.957 168.628 267.749 168.628 261.231V168.666H261.213C267.711 168.666 269.939 168.151 272.518 166.603C275.592 164.541 277.49 161.116 277.49 157.011C277.49 152.906 275.612 149.481 272.518 147.418Z" fill="white"/>
<defs>
<linearGradient id="paint0_linear_2844_102641" x1="74" y1="85" x2="270.5" y2="256" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
</defs>
</svg>
</div>
{% endif %}
<img class="{{ namespace }}leaseOffer__img img-fluid" src="{{ carImg }}" alt="">
</div>
</div>
</div>
<div class="{{ namespace }}leaseOffer__configOptions">
<div class="{{ namespace }}leaseOffer__configLabel">
Disponible en:
</div>
<div class="{{ namespace }}leaseOffer__configColors">
{% for key, colorItem in colorOptions %}
{% render "@color-option--small", {
background: colorItem.background
}, true %}
{% endfor %}
</div>
</div>
</div>
<div class="{{ namespace }}leaseOffer__priceArea {{ namespace }}stackXs">
<div class="d-flex align-items-baseline flex-wrap">
{% render "@amount",{
classes: [namespace+"leaseOffer__price", "h1"],
text: price
},true %}
<span class="{{ namespace }}leaseOffer__priceMisc">TVA incluse</span>
</div>
{% render "@form-disclaimer", {
modifiers: [],
text: "par mois pour un leasing sur 5 ans et 10.000 km/an"
},true %}
</div>
{% if deliveryDelayInfo %}
{% render "@label--info-dot", {
modifiers: [],
classes: [namespace + "leaseOffer__highlightMessage", "-highlight"],
eltType: ["div"],
text: "Délai de livraison : 6 mois"
},true %}
{% endif %}
<a href="" class="{{ namespace }}leaseOffer__action">
<div class="{{ namespace }}leaseOffer__actionInner">
{% render "@btn-primary", {
eltType: "span",
text: "Configurer"
}, true %}
</div>
</a>
</div>
</article>
{% if highlight %}
</div>
</div>
</div>
</section>
{% endif %}
<!-- Highlight -->
{% if highlight %}
<section class="{{ namespace }}section -sectionSunken -leaseOfferWrapper">
<div class="{{ namespace }}section__innerWrapper">
<div class="{{ namespace }}section__inner">
<div class="container">
{% endif %}
<article class="{{ namespace }}leaseOffer {{ namespace }}box -insetLg {% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}">
<div class="{{ namespace }}leaseOffer__inner">
<div class="{{ namespace }}leaseOffer__miscInfo">
<img src="{{ (mediaPath + brand) | path }}" class="{{ namespace }}leaseOffer__brand"/>
{% if prime or deliveryDelay %}
<div class="{{ namespace }}leaseOffer__badgeContainer row row-xs">
{% if prime %}
<div class="col-auto">
{% render "@badge--success-muted",{
text: "Prime écologique incluse"
},true %}
</div>
{% endif %}
{% if deliveryDelay %}
<div class="col-auto">
{% render "@badge--info-muted",{
text: "Délai de livraison: 6 mois"
},true %}
</div>
{% endif %}
</div>
{% endif %}
</div>
<div class="{{ namespace }}leaseOffer__header {{ namespace }}stackXs">
{% if highlight %}
{% render "@heading--h2-subtext",{
text: title,
subText: subTitle
},true %}
{% else %}
<h3 class="h3">{{ title }}</h3>
<p>{{ subTitle }}</p>
{% endif %}
</div>
<div class="{{ namespace }}leaseOffer__optionsZone">
<div class="{{ namespace }}box__outOfBoundsLg">
<div class="{{ namespace }}leaseOffer__imgWrapper">
<div class="{{ namespace }}leaseOffer__imgWrapperInner">
{% if highlight %}
<div class="{{ namespace }}leaseOffer__plus">
<svg class="{{ namespace }}leaseOffer__plusSvg" width="314" height="315" viewBox="0 0 314 315" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path class="{{ namespace }}leaseOffer__plusSvgColor" d="M157.776 0.00200132C71.0702 -0.431216 0.435219 69.5231 0.00200133 156.228C-0.431216 242.934 69.523 313.569 156.208 314.002C166.337 314.064 176.259 313.115 185.873 311.32C249.37 299.499 299.458 249.473 311.279 185.873C312.971 176.755 313.919 167.389 313.981 157.796C314.415 71.0909 244.481 0.455852 157.776 0.0226351" fill="#DE0000"/>
<path d="M147.415 41.4884C145.868 44.0464 145.352 46.2744 145.352 52.7933V145.357H52.7883C46.2901 145.357 44.062 145.873 41.4833 147.4C38.3889 149.463 36.5117 152.887 36.5117 156.992C36.5117 160.272 37.7083 163.119 39.7712 165.182C40.2869 165.698 182.135 307.546 185.889 311.3C249.386 299.48 299.495 249.453 311.295 185.853C306.22 180.778 165.301 39.8793 164.95 39.5286C162.908 37.6101 160.144 36.4961 157.008 36.4961C152.903 36.4961 149.458 38.3734 147.415 41.4678" fill="url(#paint0_linear_2844_102641)"/>
<path d="M272.518 147.418C269.939 145.871 267.711 145.376 261.213 145.376H168.628V52.8117C168.628 46.3135 168.113 44.0855 166.566 41.5068C164.503 38.4124 161.078 36.5352 156.973 36.5352C152.868 36.5352 149.443 38.4124 147.38 41.5068C145.833 44.0649 145.317 46.2929 145.317 52.8117V145.376H52.7532C46.2343 145.376 44.027 145.892 41.4483 147.418C38.3539 149.481 36.4766 152.906 36.4766 157.011C36.4766 161.116 38.3539 164.541 41.4483 166.603C44.0064 168.151 46.2343 168.666 52.7532 168.666H145.317V261.231C145.317 267.749 145.833 269.957 147.38 272.535C149.443 275.609 152.868 277.507 156.973 277.507C161.078 277.507 164.503 275.63 166.566 272.535C168.113 269.957 168.628 267.749 168.628 261.231V168.666H261.213C267.711 168.666 269.939 168.151 272.518 166.603C275.592 164.541 277.49 161.116 277.49 157.011C277.49 152.906 275.612 149.481 272.518 147.418Z" fill="white"/>
<defs>
<linearGradient id="paint0_linear_2844_102641" x1="74" y1="85" x2="270.5" y2="256" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
</defs>
</svg>
</div>
{% endif %}
<img class="{{ namespace }}leaseOffer__img img-fluid" src="{{ carImg }}" alt="">
</div>
</div>
</div>
<div class="{{ namespace }}leaseOffer__configOptions">
<div class="{{ namespace }}leaseOffer__configLabel">
Disponible en:
</div>
<div class="{{ namespace }}leaseOffer__configColors">
{% for key, colorItem in colorOptions %}
{% render "@color-option--small", {
background: colorItem.background
}, true %}
{% endfor %}
</div>
</div>
</div>
<div class="{{ namespace }}leaseOffer__priceArea {{ namespace }}stackXs">
<div class="d-flex align-items-baseline flex-wrap">
{% render "@amount",{
classes: [namespace+"leaseOffer__price", "h1"],
text: price
},true %}
<span class="{{ namespace }}leaseOffer__priceMisc">TVA incluse</span>
</div>
{% render "@form-disclaimer", {
modifiers: [],
text: "par mois pour un leasing sur 5 ans et 10.000 km/an"
},true %}
</div>
{% if deliveryDelayInfo %}
{% render "@label--info-dot", {
modifiers: [],
classes: [namespace + "leaseOffer__highlightMessage", "-highlight"],
eltType: ["div"],
text: "Délai de livraison : 6 mois"
},true %}
{% endif %}
<a href="" class="{{ namespace }}leaseOffer__action">
<div class="{{ namespace }}leaseOffer__actionInner">
{% render "@btn-primary", {
eltType: "span",
text: "Configurer"
}, true %}
</div>
</a>
</div>
</article>
{% if highlight %}
</div>
</div>
</div>
</section>
{% endif %}
<!-- Custom -->
<article class="{{ namespace }}leaseOffer {{ namespace }}box -insetLg {% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}">
<div class="{{ namespace }}leaseOffer__inner">
<div class="{{ namespace }}leaseOffer__optionsZone">
<div class="{{ namespace }}box__outOfBoundsLg">
<div class="{{ namespace }}leaseOffer__imgWrapper">
<div class="{{ namespace }}leaseOffer__imgWrapperInner">
<img class="{{ namespace }}leaseOffer__img img-fluid" src="{{ carImg }}" alt="">
</div>
</div>
</div>
</div>
<div class="{{ namespace }}stackLg">
<div class="{{ namespace }}stackXs">
<div class="h3">Vous n'avez pas trouvé la voiture qui vous ressemble ?</div>
<p>Demander une offre Lease Plus sur mesure</p>
</div>
{% render "@btn-primary", {
classes: ["stretched-link"],
eltType: "a",
text: "Demander une offre Lease Plus sur mesure"
}, true %}
</div>
</div>
</article>
@use "sass:math";
@use "sass:list";
/* variables specific to current element */
$img-aspect-ratio: list.slash(16,10);
$img-max-height: 625px;
.#{$namespace}leaseOffer {
/* Save root element context for easy access if nesting is needed */
$self: &;
/* properties of current element + media queries */
position: relative;
z-index: z("zero");
/* Pseudo Elements */
&::before {
}
&::after {
}
/*
Include elements that are linked to the current element but have to reside at the root level of the stylesheet
(e.g: keyframes)
*/
@at-root {
}
/* children - write selector in full in comments in order to facilitate search */
&__inner {
height: 100%;
@include spacer-component-stack("lg");
display: flex;
flex-direction: column;
}
&__brand {
width: map-deep-get($token-sizes-unit-map, "32");
height: map-deep-get($token-sizes-unit-map, "32");
object-fit: contain;
object-position: center;
}
&__miscInfo {
display: flex;
justify-content: space-between;
gap: map-deep-get($token-spacer-grid-map, "xs")
}
&__img {
aspect-ratio: $img-aspect-ratio;
display: block;
margin: auto;
}
&__configOptions {
display: flex;
align-items: center;
@include spacer-component-inline("md")
}
&__configColors {
display: flex;
align-items: center;
@include spacer-component-inline("xs");
}
&__priceArea {
@include spacer-component-stack-exception("xl");
padding-bottom: map-deep-get($token-spacer-inset-map, "md");
@include media-breakpoint-up("lg") {
padding-bottom: map-deep-get($token-spacer-inset-map, "lg");
}
}
// leaseOffer__price
&__priceMisc,
&__price {
// follows same logic as parent
@include custom-prop-fallback("color", "sys-color-text-primary-vivid",true,true);
}
x
&__price {
margin-right: map-deep-get($token-spacer-inline-map, "md");
}
&__highlightMessage {
@include spacer-component-stack-exception("xl");
order: 10;
}
&__badgeContainer {
justify-content: flex-end;
margin-bottom: -(map-deep-get($token-spacer-stack-max-map, "xs")) !important;
> * {
padding-left: map-deep-get($token-spacer-inset-map, "xs") !important;
padding-right: map-deep-get($token-spacer-inset-map, "xs") !important;
margin-bottom: map-deep-get($token-spacer-stack-max-map, "xs") !important;
}
}
&__action {
height: 0;
margin: 0 auto;
@extend .stretched-link;
&:focus {
@media (hover: hover) {
#{$self}__actionInner {
opacity: 1;
transform: translateY(-90px);
}
}
}
}
&__actionInner {
padding: map-deep-get($token-spacer-inline-map, "sm");
box-shadow: map-deep-get($token-shadow-map, "active");
background-color: rgba(map-deep-get($token-color-grayscale-map, "0"), 0.8);
border-radius: map-deep-get($token-button-size-big-map, "desktop", "border-radius");
opacity: 0;
transform: translateY(-100%);
transition: opacity 0.15s linear, transform 0.15s ease-out;
position: relative;
z-index: z("low");
}
&__miscInfo {
order: 1;
}
&__header {
order: 2;
}
&__optionsZone {
order: 3;
}
&__priceArea {
order: 5;
}
&__highlightMessage {
order: 6;
}
&__action {
order: 4;
}
/* modifiers */
// leaseOffer -highlight
&.-highlight {
// follows same logic as base element
position: relative;
background-color: transparent;
padding: 0;
#{$self}__imgWrapperInner {
position: relative;
width: 100%;
}
#{$self}__plus {
flex-shrink: 0;
position: absolute;
z-index: z("negative");
bottom: 55%;
right: 0;
//transform: translate(0, -125%);
overflow: hidden;
width: map-deep-get($token-sizes-unit-map, "96");
height: map-deep-get($token-sizes-unit-map, "96");
padding-left: map-deep-get($token-spacer-inset-map, "lg");
@media screen and (min-width: 400px) {
overflow: visible;
padding-left: 0;
max-width: 200px;
width: 25%;
bottom: 65%;
height: auto;
}
@include media-breakpoint-up("lg"){
width: 40%;
max-width: 314px;
bottom: 58%;
right: 0;
}
@include media-breakpoint-up("xl"){
bottom: 65%;
}
}
#{$self}__plusSvg {
width: map-deep-get($token-sizes-unit-map, "96");
height: map-deep-get($token-sizes-unit-map, "96");
@media screen and (min-width: 400px) {
max-width: 100%;
width: auto;
height: auto;
}
}
#{$self}__plusSvgColor {
@include custom-prop-fallback("fill", "sys-color-text-secondary-vivid",true,true);
}
@include media-breakpoint-up("md") {
#{$self}__imgWrapper {
display: flex;
align-items: center;
justify-content: center;
}
}
@include media-breakpoint-up("lg") {
position: relative;
@include make-row();
align-items: center;
justify-content: space-between;
&::before {
content: "";
aspect-ratio: $img-aspect-ratio;
max-height: $img-max-height;
@include make-col-ready();
width: auto;
@include make-col(8);
flex-shrink: 0;
}
#{$self}__inner {
@include make-col-ready();
@include make-col(4);
position: static;
}
#{$self}__badgeContainer {
position: absolute;
z-index: z("low");
top: 0;
left: $grid-gutter-width*0.5;
@include make-col((12-8));
padding: 0;
justify-content: flex-start;
}
#{$self}__imgWrapper {
@include make-col-ready();
@include make-col(8);
position: absolute;
aspect-ratio: $img-aspect-ratio;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 100%;
max-height: $img-max-height;
}
#{$self}__img {
transform: translateY(10%);
max-height: 100%;
}
#{$self}__action {
height: auto;
opacity: 1;
margin-left: 0;
order: 5;
@include spacer-component-stack-exception("md");
&::after {
//content: none;
}
}
#{$self}__actionInner {
opacity: 1;
padding: 0;
box-shadow: none;
transform: none !important;
}
}
&.-imageEnd {
@include media-breakpoint-up("lg") {
flex-direction: row-reverse;
#{$self}__imgWrapper {
left: auto;
right: 0;
}
#{$self}__plus {
left: 0;
right: auto;
}
#{$self}__badgeContainer {
left: auto;
right: $grid-gutter-width*0.5;
justify-content: flex-end;
}
}
}
}
&.-plusSecondary {
#{$self}__plusSvgColor {
@include custom-prop-fallback("fill", "sys-color-text-primary-vivid",true,true);
}
}
&.-custom {
#{$self}__inner {
justify-content: center;
}
#{$self}__optionsZone {
order: 0
}
}
/* random parent element */
/*
*
* Syntax : .randomParentElt & {}
*
*/
/* Pseudo Classes */
&:hover {
@media (hover: hover) {
#{$self}__actionInner {
opacity: 1;
transform: translateY(-175%);
}
}
}
&:focus {
}
&:active {
}
&:focus,
&:active {
}
}