The navigation tile has various ways through which a "selected/active" state can be rendered
button, the selected state can be given by setting the aria-expanded attribute to true
<a href="" class="sds-navigationTile sds-box -justifyInlineStart">
<div class="sds-media -mediaSm -mediaHasBg -mediaRounded">
<img src="../../media/spuerkeess-site/components/product/cards/sdsillu-product-card-classic.png" alt="">
</div>
<div class="sds-label sds-textHelperSmall">
Pour l'environnement
</div>
</a>
<{{ eltType}} {% if eltType === "a" %} href="{{ href }}"{% elseif eltType === "button" %} type="button"{%- endif -%} class="{{ namespace }}navigationTile {{ namespace }}box{% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}" {% for attrKey, attr in attrs %} {{ attrKey }}="{{ attr }}"{% endfor %}{% if disabled %} disabled{% endif %}>
{% if onlyText %}
{% else %}
{% if imgUrl %}
<span class="{{ namespace }}navigationTile__img {{ namespace }}brandIconWrapper">
{% if inlineSVG %}
{{ inlineSVG | safe }}
{% else %}
<img src="{{ imgUrl }}{{ icon }}.svg" alt="">
{% endif %}
</span>
{% elseif media %}
{% render "@media--background", {
img: img
} ,true %}
{% else %}
{% render "@icon-btn-secondary",{
eltType: "span",
classes: ["stretched-link"],
icon: icon
}, true %}
{% endif %}
{% endif %}
{% render "@label--div",{
classes: [namespace + "textHelperSmall"],
text: text
},true %}
</{{ eltType }}>
/* variables specific to current element */
$element-specific-variables: "";
.#{$namespace}navigationTile,
.#{$namespace}navigationCard {
/* Save root element context for easy access if nesting is needed */
$self: ".#{$namespace}navigationTile";
$selfToRemove: ".#{$namespace}navigationCard";
/* properties of current element + media queries */
display: flex;
flex-direction: column;
align-items: center;
@include custom-prop-fallback("padding","comp-tile-inset-h");
@include spacer-component-stack-static-gap("sm");
text-align: center;
position: relative;
z-index: z("zero");
@include custom-prop-fallback("background-color","comp-tile-background-color");
@include custom-prop-fallback-override("comp-label-text-color","comp-tile-heading-text-color");
flex-grow: 1;
hyphens: auto;
/* Pseudo Elements */
&::before,
&::after {
content: "";
position: absolute;
z-index: z("negative");
pointer-events: none;
top: 0;
right: 0;
bottom: 0;
left: 0;
border-radius: inherit;
transition: opacity 0.15s linear;
@include custom-prop-fallback("background-color","comp-tile-background-color");
}
&::before {
box-shadow: map-deep-get($token-shadow-map, "active");
}
&::after {
box-shadow: map-deep-get($token-shadow-map, "detail");
opacity: 0;
}
/*
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 {
BUTTON#{$self},
BUTTON#{$selfToRemove} {
width: 100%;
}
}
/* children - write selector in full in comments in order to facilitate search */
// navigationCard__img
&__img {
width: map-deep-get($token-sizes-unit-map, "64");
height: map-deep-get($token-sizes-unit-map, "64");
svg,
IMG {
width: 100%;
height: 100%;
object-fit: contain;
}
}
/* modifiers */
// navigationCard -noInteraction
&.-noInteraction {
// follows same logic as base element
&::before,
&::after {
content: none;
}
}
&[aria-pressed="true"],
&.-isSelected,
&.-isActive {
@include custom-prop-fallback-box-shadow-color(0,0,0,$border-width*2, "comp-tile-active-border-color");
}
&.-small {
#{$self}__img,
#{$selfToRemove}__img {
width: map-deep-get($token-sizes-unit-map, "48");
height: map-deep-get($token-sizes-unit-map, "48");
}
}
&.-large {
#{$self}__img,
#{$selfToRemove}__img {
width: map-deep-get($token-sizes-unit-map, "96");
height: map-deep-get($token-sizes-unit-map, "96");
@include media-breakpoint-up("lg") {
width: 144px;
height: 144px;
}
}
}
&.-justifyInlineStart {
align-items: flex-start;
text-align: left;
}
&[disabled] {
&::before {
opacity: 1 !important;
}
&::after {
opacity: 0 !important;
}
> * {
opacity: 0.48;
}
}
/* random parent element */
/*
*
* Syntax : .randomParentElt & {}
*
*/
/* Pseudo Classes */
&:hover,
&:focus {
@media (hover: hover) {
&::before {
opacity: 0;
}
&::after {
opacity: 1;
}
}
}
&:focus {
}
&:active {
}
&:focus,
&:active {
}
}