-isHidden hides the element with a transition
<div class="sds-popupInfo">
<div class="sds-popupInfo__body">
<div class="sds-popupInfo__inner sds-box -insetLg sds-boxShadowInteraction sds-stackXl">
<div class="sds-aboveClickArea text-right">
<button type="button" class="sds-btn -iconBtn -btnSecondary" aria-label="Close">
<span class="sds-icon sds-icon-close"></span>
</button>
</div>
<div class="sds-exceptionStackLg">
<img class="img-fluid" src="../../media/spuerkeess-site/components/timeline-story/timeline-story-img-1.png" alt="image alt">
</div>
<div class="sds-stackLg">
<div class="h4">Image</div>
<p class="sds-textBodyLg">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius, nihil, suscipit. Inventore molestias necessitatibus nesciunt quas ullam vero. Cupiditate dignissimos earum eius et fuga impedit ipsum nesciunt possimus, quod voluptatibus.</p>
</div>
<a href="" class="sds-btn -btnSecondary stretched-link">
<span class="sds-btn__text">Plus d'infos</span>
</a>
</div>
</div>
</div>
<div class="{{ namespace }}popupInfo{% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}">
<div class="{{ namespace }}popupInfo__body">
<div class="{{ namespace }}popupInfo__inner {{ namespace }}box -insetLg {{ namespace }}boxShadowInteraction {{ namespace }}stackXl">
<div class="{{ namespace }}aboveClickArea text-right">
{% render "@icon-btn-secondary",{
icon: "icon-close",
attrs: {
"aria-label": "Close"
}
},true %}
</div>
<div class="{{ namespace }}exceptionStackLg">
<img class="img-fluid" src="{{ (mediaPath + "/spuerkeess-site/components/timeline-story/timeline-story-img-1.png") | path }}" alt="image alt">
</div>
<div class="{{ namespace }}stackLg">
<div class="h4">Image</div>
<p class="{{ namespace }}textBodyLg">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius, nihil, suscipit. Inventore molestias necessitatibus nesciunt quas ullam vero. Cupiditate dignissimos earum eius et fuga impedit ipsum nesciunt possimus, quod voluptatibus.</p>
</div>
{% render "@btn-secondary", {
classes: ["stretched-link"],
eltType: "a",
text: "Plus d'infos"
} ,true %}
</div>
</div>
</div>
@use "sass:math";
/* variables specific to current element */
$element-specific-variables: "";
.#{$namespace}popupInfo {
/* Save root element context for easy access if nesting is needed */
$self: &;
/* properties of current element + media queries */
position: fixed;
z-index: z("dropdown");
top: $nav-sub-nav-height-desktop-global + map-deep-get($token-spacer-stack-max-map, "xl");
left: 0;
right: 0;
@include containerPaddingInline();
pointer-events: none;
transition: opacity $transition-collapse-duration ease-out;
@include media-breakpoint-up("lg") {
top: $nav-sub-nav-height-desktop-global + map-deep-get($token-spacer-stack-max-map, "3xl") + map-deep-get($token-spacer-stack-max-map, "md");
}
/* 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 */
&__body {
max-width: map-deep-get($token-sizes-component-map, "content-section");
width: 100%;
margin: auto;
display: flex;
justify-content: flex-end;
}
// popupInfo__inner
&__inner {
// follows same logic as parent
position: relative;
max-width: 400px;
width: 100%;
pointer-events: auto;
}
/* modifiers */
// popupInfo -altStyle
&.-isHidden {
// follows same logic as base element
opacity: 0;
}
/* random parent element */
/*
*
* Syntax : .randomParentElt & {}
*
*/
/* Pseudo Classes */
&:hover {
@media (hover: hover) {
}
}
&:focus {
}
&:active {
}
&:focus,
&:active {
}
}