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
<!-- Default -->
<a href="" class="sds-navigationTile sds-box">
<span class="sds-navigationTile__img sds-brandIconWrapper">
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M47 12L35 12L35 10L47 10L47 12Z" fill="#DE0000" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M27 12L1 12V10H27V12ZM31.4 16H27.2267L22.3161 24.3866L25.073 23.2374C25.4889 23.064 25.9461 22.9677 26.4284 22.9677C28.3744 22.9677 29.95 24.5431 29.95 26.4839C29.95 28.4247 28.3744 30 26.4284 30C25.0608 30 23.874 29.2218 23.2901 28.0811L21.5098 28.9923C22.4227 30.776 24.2819 32 26.4284 32C29.4768 32 31.95 29.5315 31.95 26.4839C31.95 23.5049 29.5868 21.0791 26.6333 20.9715L28.3732 18H31.4V16ZM1 38H47V36H1V38ZM40.3185 15.4462L35.5952 22.5484C34.8454 23.5332 34.4 24.7576 34.4 26.0895C34.4 29.3709 37.1038 32 40.4007 32C43.6975 32 46.4014 29.3709 46.4014 26.0895C46.4014 22.8082 43.6975 20.179 40.4007 20.179C40.1058 20.179 39.8157 20.2 39.5319 20.2407L41.9839 16.5538L40.3185 15.4462ZM40.4007 30C42.6274 30 44.4014 28.2322 44.4014 26.0895C44.4014 23.9469 42.6274 22.179 40.4007 22.179C38.1739 22.179 36.4 23.9469 36.4 26.0895C36.4 28.2322 38.1739 30 40.4007 30ZM7.00014 16H5.01071L2.21045 19.6045L3.78984 20.8315L5.00014 19.2736V32H7.00014V16ZM14.1999 30.0001C15.9672 30.0001 17.3999 28.5674 17.3999 26.8C17.3999 25.0354 15.9716 23.6044 14.2079 23.6C14.2053 23.6 14.2026 23.6 14.2 23.6C14.1973 23.6 14.1946 23.6 14.1919 23.6C12.4283 23.6043 10.9999 25.0354 10.9999 26.8C10.9999 28.5674 12.4326 30.0001 14.1999 30.0001ZM11.4282 22.3995C10.7905 21.7198 10.4 20.8055 10.4 19.8C10.4 17.7013 12.1013 16 14.2 16C16.2987 16 18 17.7013 18 19.8C18 20.8056 17.6094 21.7199 16.9717 22.3996C18.4308 23.3205 19.3999 24.9471 19.3999 26.8C19.3999 29.6719 17.0718 32.0001 14.1999 32.0001C11.328 32.0001 8.99986 29.6719 8.99986 26.8C8.99986 24.9471 9.96906 23.3204 11.4282 22.3995ZM14.1929 21.6C13.202 21.5962 12.4 20.7918 12.4 19.8C12.4 18.8059 13.2059 18 14.2 18C15.1941 18 16 18.8059 16 19.8C16 20.7918 15.1979 21.5962 14.207 21.6C14.2046 21.6 14.2023 21.6 14.1999 21.6C14.1976 21.6 14.1952 21.6 14.1929 21.6Z" fill="#003060" />
</svg>
</span>
<div class="sds-label sds-textHelperSmall">
Pour l'environnement
</div>
</a>
<!-- Selected -->
<a href="" class="sds-navigationTile sds-box -isSelected">
<span class="sds-navigationTile__img sds-brandIconWrapper">
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M47 12L35 12L35 10L47 10L47 12Z" fill="#DE0000" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M27 12L1 12V10H27V12ZM31.4 16H27.2267L22.3161 24.3866L25.073 23.2374C25.4889 23.064 25.9461 22.9677 26.4284 22.9677C28.3744 22.9677 29.95 24.5431 29.95 26.4839C29.95 28.4247 28.3744 30 26.4284 30C25.0608 30 23.874 29.2218 23.2901 28.0811L21.5098 28.9923C22.4227 30.776 24.2819 32 26.4284 32C29.4768 32 31.95 29.5315 31.95 26.4839C31.95 23.5049 29.5868 21.0791 26.6333 20.9715L28.3732 18H31.4V16ZM1 38H47V36H1V38ZM40.3185 15.4462L35.5952 22.5484C34.8454 23.5332 34.4 24.7576 34.4 26.0895C34.4 29.3709 37.1038 32 40.4007 32C43.6975 32 46.4014 29.3709 46.4014 26.0895C46.4014 22.8082 43.6975 20.179 40.4007 20.179C40.1058 20.179 39.8157 20.2 39.5319 20.2407L41.9839 16.5538L40.3185 15.4462ZM40.4007 30C42.6274 30 44.4014 28.2322 44.4014 26.0895C44.4014 23.9469 42.6274 22.179 40.4007 22.179C38.1739 22.179 36.4 23.9469 36.4 26.0895C36.4 28.2322 38.1739 30 40.4007 30ZM7.00014 16H5.01071L2.21045 19.6045L3.78984 20.8315L5.00014 19.2736V32H7.00014V16ZM14.1999 30.0001C15.9672 30.0001 17.3999 28.5674 17.3999 26.8C17.3999 25.0354 15.9716 23.6044 14.2079 23.6C14.2053 23.6 14.2026 23.6 14.2 23.6C14.1973 23.6 14.1946 23.6 14.1919 23.6C12.4283 23.6043 10.9999 25.0354 10.9999 26.8C10.9999 28.5674 12.4326 30.0001 14.1999 30.0001ZM11.4282 22.3995C10.7905 21.7198 10.4 20.8055 10.4 19.8C10.4 17.7013 12.1013 16 14.2 16C16.2987 16 18 17.7013 18 19.8C18 20.8056 17.6094 21.7199 16.9717 22.3996C18.4308 23.3205 19.3999 24.9471 19.3999 26.8C19.3999 29.6719 17.0718 32.0001 14.1999 32.0001C11.328 32.0001 8.99986 29.6719 8.99986 26.8C8.99986 24.9471 9.96906 23.3204 11.4282 22.3995ZM14.1929 21.6C13.202 21.5962 12.4 20.7918 12.4 19.8C12.4 18.8059 13.2059 18 14.2 18C15.1941 18 16 18.8059 16 19.8C16 20.7918 15.1979 21.5962 14.207 21.6C14.2046 21.6 14.2023 21.6 14.1999 21.6C14.1976 21.6 14.1952 21.6 14.1929 21.6Z" fill="#003060" />
</svg>
</span>
<div class="sds-label sds-textHelperSmall">
Pour l'environnement
</div>
</a>
<!-- Small -->
<a href="" class="sds-navigationTile sds-box -small">
<span class="sds-navigationTile__img sds-brandIconWrapper">
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M47 12L35 12L35 10L47 10L47 12Z" fill="#DE0000" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M27 12L1 12V10H27V12ZM31.4 16H27.2267L22.3161 24.3866L25.073 23.2374C25.4889 23.064 25.9461 22.9677 26.4284 22.9677C28.3744 22.9677 29.95 24.5431 29.95 26.4839C29.95 28.4247 28.3744 30 26.4284 30C25.0608 30 23.874 29.2218 23.2901 28.0811L21.5098 28.9923C22.4227 30.776 24.2819 32 26.4284 32C29.4768 32 31.95 29.5315 31.95 26.4839C31.95 23.5049 29.5868 21.0791 26.6333 20.9715L28.3732 18H31.4V16ZM1 38H47V36H1V38ZM40.3185 15.4462L35.5952 22.5484C34.8454 23.5332 34.4 24.7576 34.4 26.0895C34.4 29.3709 37.1038 32 40.4007 32C43.6975 32 46.4014 29.3709 46.4014 26.0895C46.4014 22.8082 43.6975 20.179 40.4007 20.179C40.1058 20.179 39.8157 20.2 39.5319 20.2407L41.9839 16.5538L40.3185 15.4462ZM40.4007 30C42.6274 30 44.4014 28.2322 44.4014 26.0895C44.4014 23.9469 42.6274 22.179 40.4007 22.179C38.1739 22.179 36.4 23.9469 36.4 26.0895C36.4 28.2322 38.1739 30 40.4007 30ZM7.00014 16H5.01071L2.21045 19.6045L3.78984 20.8315L5.00014 19.2736V32H7.00014V16ZM14.1999 30.0001C15.9672 30.0001 17.3999 28.5674 17.3999 26.8C17.3999 25.0354 15.9716 23.6044 14.2079 23.6C14.2053 23.6 14.2026 23.6 14.2 23.6C14.1973 23.6 14.1946 23.6 14.1919 23.6C12.4283 23.6043 10.9999 25.0354 10.9999 26.8C10.9999 28.5674 12.4326 30.0001 14.1999 30.0001ZM11.4282 22.3995C10.7905 21.7198 10.4 20.8055 10.4 19.8C10.4 17.7013 12.1013 16 14.2 16C16.2987 16 18 17.7013 18 19.8C18 20.8056 17.6094 21.7199 16.9717 22.3996C18.4308 23.3205 19.3999 24.9471 19.3999 26.8C19.3999 29.6719 17.0718 32.0001 14.1999 32.0001C11.328 32.0001 8.99986 29.6719 8.99986 26.8C8.99986 24.9471 9.96906 23.3204 11.4282 22.3995ZM14.1929 21.6C13.202 21.5962 12.4 20.7918 12.4 19.8C12.4 18.8059 13.2059 18 14.2 18C15.1941 18 16 18.8059 16 19.8C16 20.7918 15.1979 21.5962 14.207 21.6C14.2046 21.6 14.2023 21.6 14.1999 21.6C14.1976 21.6 14.1952 21.6 14.1929 21.6Z" fill="#003060" />
</svg>
</span>
<div class="sds-label sds-textHelperSmall">
Pour l'environnement
</div>
</a>
<!-- Large -->
<a href="" class="sds-navigationTile sds-box -large">
<span class="sds-navigationTile__img sds-brandIconWrapper">
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M47 12L35 12L35 10L47 10L47 12Z" fill="#DE0000" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M27 12L1 12V10H27V12ZM31.4 16H27.2267L22.3161 24.3866L25.073 23.2374C25.4889 23.064 25.9461 22.9677 26.4284 22.9677C28.3744 22.9677 29.95 24.5431 29.95 26.4839C29.95 28.4247 28.3744 30 26.4284 30C25.0608 30 23.874 29.2218 23.2901 28.0811L21.5098 28.9923C22.4227 30.776 24.2819 32 26.4284 32C29.4768 32 31.95 29.5315 31.95 26.4839C31.95 23.5049 29.5868 21.0791 26.6333 20.9715L28.3732 18H31.4V16ZM1 38H47V36H1V38ZM40.3185 15.4462L35.5952 22.5484C34.8454 23.5332 34.4 24.7576 34.4 26.0895C34.4 29.3709 37.1038 32 40.4007 32C43.6975 32 46.4014 29.3709 46.4014 26.0895C46.4014 22.8082 43.6975 20.179 40.4007 20.179C40.1058 20.179 39.8157 20.2 39.5319 20.2407L41.9839 16.5538L40.3185 15.4462ZM40.4007 30C42.6274 30 44.4014 28.2322 44.4014 26.0895C44.4014 23.9469 42.6274 22.179 40.4007 22.179C38.1739 22.179 36.4 23.9469 36.4 26.0895C36.4 28.2322 38.1739 30 40.4007 30ZM7.00014 16H5.01071L2.21045 19.6045L3.78984 20.8315L5.00014 19.2736V32H7.00014V16ZM14.1999 30.0001C15.9672 30.0001 17.3999 28.5674 17.3999 26.8C17.3999 25.0354 15.9716 23.6044 14.2079 23.6C14.2053 23.6 14.2026 23.6 14.2 23.6C14.1973 23.6 14.1946 23.6 14.1919 23.6C12.4283 23.6043 10.9999 25.0354 10.9999 26.8C10.9999 28.5674 12.4326 30.0001 14.1999 30.0001ZM11.4282 22.3995C10.7905 21.7198 10.4 20.8055 10.4 19.8C10.4 17.7013 12.1013 16 14.2 16C16.2987 16 18 17.7013 18 19.8C18 20.8056 17.6094 21.7199 16.9717 22.3996C18.4308 23.3205 19.3999 24.9471 19.3999 26.8C19.3999 29.6719 17.0718 32.0001 14.1999 32.0001C11.328 32.0001 8.99986 29.6719 8.99986 26.8C8.99986 24.9471 9.96906 23.3204 11.4282 22.3995ZM14.1929 21.6C13.202 21.5962 12.4 20.7918 12.4 19.8C12.4 18.8059 13.2059 18 14.2 18C15.1941 18 16 18.8059 16 19.8C16 20.7918 15.1979 21.5962 14.207 21.6C14.2046 21.6 14.2023 21.6 14.1999 21.6C14.1976 21.6 14.1952 21.6 14.1929 21.6Z" fill="#003060" />
</svg>
</span>
<div class="sds-label sds-textHelperSmall">
Pour l'environnement
</div>
</a>
<!-- Icon Btn -->
<a href="" class="sds-navigationTile sds-box -small">
<span class="sds-btn -iconBtn -btnSecondary stretched-link">
<span class="sds-icon sds-icon-calendar"></span>
</span>
<div class="sds-label sds-textHelperSmall">
Pour l'environnement
</div>
</a>
<!-- Mia -->
<a href="" class="sds-navigationTile sds-box">
<span class="sds-iconCircle -product -logement -big" aria-hidden="true">
<span class="sds-icon sds-icon-house"></span>
</span>
<div class="sds-label sds-textHelperSmall">
Pour l'environnement
</div>
</a>
<!-- Media -->
<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>
<!-- Default -->
<{{ 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 }}>
<!-- Selected -->
<{{ 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 }}>
<!-- Small -->
<{{ 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 }}>
<!-- Large -->
<{{ 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 }}>
<!-- Icon Btn -->
<{{ 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 }}>
<!-- Mia -->
<{{ 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 %}>
{% render "@icon-circle-mia"+miaIconType,{
classes: ["-big"]
},true %}
{% render "@label--div",{
classes: [namespace + "textHelperSmall"],
text: text
},true %}
</{{ eltType }}>
<!-- Media -->
<{{ 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 {
}
}