Add the classes below to the lease offer item in order to:
<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>
<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 {
}
}