No notes defined.
<a href="" class="sds-expensesCard sds-box -insetLg sds-stackLg">
<div class="sds-expensesCard__header">
<div class="h4">Top catégories dépenses</div>
<div class="text-uppercase sds-textHelperSmall">Derniers 30 jours</div>
</div>
<div class="sds-expensesCard__content">
<div class="sds-expensesCard__contentInner">
<div class="sds-expensesCard__item -xtraLarge sds-stackSm">
<span class="sds-iconCircle -secondary10 sds-expensesCard__icon" aria-hidden="true">
<span class="sds-icon sds-icon-hourglass"></span>
</span>
<div class="sds-expensesCard__itemText">
30%
</div>
</div>
<div class="sds-expensesCard__item -large sds-stackSm">
<span class="sds-iconCircle -product -mobilite sds-expensesCard__icon" aria-hidden="true">
<span class="sds-icon sds-icon-car"></span>
</span>
<div class="sds-expensesCard__itemText">
25%
</div>
</div>
<div class="sds-expensesCard__item -medium sds-stackSm">
<span class="sds-iconCircle -product -shopping sds-expensesCard__icon" aria-hidden="true">
<span class="sds-icon sds-icon-shoppingbag"></span>
</span>
<div class="sds-expensesCard__itemText">
20%
</div>
</div>
<div class="sds-expensesCard__item sds-stackSm -isInactive">
<span class="sds-iconCircle -product -alimentation sds-expensesCard__icon" aria-hidden="true">
<span class="sds-icon sds-icon-shoppingcart"></span>
</span>
<div class="sds-expensesCard__itemText">
--%
</div>
</div>
<div class="sds-expensesCard__item sds-stackSm -isInactive">
<span class="sds-iconCircle -product -enfants sds-expensesCard__icon" aria-hidden="true">
<span class="sds-icon sds-icon-toys"></span>
</span>
<div class="sds-expensesCard__itemText">
--%
</div>
</div>
</div>
<span class="sds-iconCircle -ghost sds-expensesCard__linkIcon" aria-hidden="true">
<span class="sds-icon sds-icon-chevronright"></span>
</span>
</div>
</a>
<{{ eltType}}{% if eltType %} href="{{ href }}"{% endif%} class="{{ namespace }}expensesCard {{ namespace }}box -insetLg {{ namespace }}stackLg{% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}">
<div class="{{ namespace }}expensesCard__header">
<div class="h4">Top catégories dépenses</div>
<div class="text-uppercase {{ namespace }}textHelperSmall">Derniers 30 jours</div>
</div>
<div class="{{ namespace }}expensesCard__content">
{% if empty %}
{% render '@snet-empty-state--title-text',{
icon: "icon-graphline-l",
title: "{Title}",
text: "{Subtitle}",
textBodyLg: true,
button: false,
classes: ["-noPadding"]
}, true %}
{% else %}
<div class="{{ namespace }}expensesCard__contentInner">
<div class="{{ namespace }}expensesCard__item -xtraLarge {{ namespace }}stackSm">
{% render "@icon-circle-regular--secondary-10",{
classes: [namespace+"expensesCard__icon"],
icon: "icon-hourglass"
},true %}
<div class="{{ namespace }}expensesCard__itemText">
30%
</div>
</div>
<div class="{{ namespace }}expensesCard__item -large {{ namespace }}stackSm">
{% render "@icon-circle-mia--mobilite",{
classes: [namespace+"expensesCard__icon"]
},true %}
<div class="{{ namespace }}expensesCard__itemText">
25%
</div>
</div>
<div class="{{ namespace }}expensesCard__item -medium {{ namespace }}stackSm">
{% render "@icon-circle-mia--shopping",{
classes: [namespace+"expensesCard__icon"]
},true %}
<div class="{{ namespace }}expensesCard__itemText">
20%
</div>
</div>
<div class="{{ namespace }}expensesCard__item {{ namespace }}stackSm{% if isInactive %} -isInactive{% endif %}">
{% render "@icon-circle-mia--alimentation",{
classes: [namespace+"expensesCard__icon"]
},true %}
<div class="{{ namespace }}expensesCard__itemText">
{% if isInactive %}--{% else %}15{% endif %}%
</div>
</div>
<div class="{{ namespace }}expensesCard__item {{ namespace }}stackSm{% if isInactive %} -isInactive{% endif %}">
{% render "@icon-circle-mia--enfants",{
classes: [namespace+"expensesCard__icon"]
},true %}
<div class="{{ namespace }}expensesCard__itemText">
{% if isInactive %}--{% else %}10{% endif %}%
</div>
</div>
</div>
{% render "@icon-circle-regular--ghost",{
classes: [namespace+"expensesCard__linkIcon"],
icon: "icon-chevronright"
},true %}
{% endif %}
</div>
</{{ eltType }}>
/* variables specific to current element */
$element-specific-variables: "";
.#{$namespace}expensesCard {
/* Save root element context for easy access if nesting is needed */
$self: &;
/* properties of current element + media queries */
display: block;
/* 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 */
// expensesCard__header
&__header {
// follows same logic as parent
color: map-deep-get($token-color-brand-map, "secondary", "100");
display: flex;
flex-wrap: wrap;
align-items: baseline;
@include spacer-component-inline("sm");
}
&__content {
display: flex;
align-items: center;
}
&__contentInner {
display: flex;
align-items: flex-end;
width: 100%;
height: 100%;
@include spacer-component-inline("xs");
}
&__item {
text-align: center;
flex-shrink: 0;
display: flex;
flex-direction: column;
align-items: flex-start;
flex-grow: 1;
#{$self}__icon,
#{$self}__itemText {
width: map-deep-get($token-sizes-unit-map, "40");
}
&.-xtraLarge {
#{$self}__icon,
#{$self}__itemText {
width: map-deep-get($token-sizes-unit-map, "64");
}
#{$self}__icon {
height: map-deep-get($token-sizes-unit-map, "64");
> * {
&::before {
font-size: 38px;
}
}
}
}
&.-large {
// follows same logic as base element
#{$self}__icon,
#{$self}__itemText {
width: 56px;
}
#{$self}__icon {
height: 56px;
> * {
&::before {
font-size: 33px;
}
}
}
}
&.-medium {
// follows same logic as base element
#{$self}__icon,
#{$self}__itemText {
width: 48px;
}
#{$self}__icon {
height: 48px;
> * {
&::before {
font-size: 28px;
}
}
}
}
&.-isInactive {
#{$self}__icon {
position: relative;
background-color: transparent;
&::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: inherit;
background-color: map-deep-get($token-color-brand-map, "secondary", "06");
}
}
}
}
&__linkIcon {
margin-left: map-deep-get($token-spacer-inline-map, "md");
}
/* modifiers */
// expensesCard -empty
&.-empty {
// follows same logic as base element
&:hover,
&:focus {
@media (hover: hover) {
box-shadow: none;
}
}
}
/* random parent element */
/*
*
* Syntax : .randomParentElt & {}
*
*/
/* Pseudo Classes */
&:hover,
&:focus {
@media (hover: hover) {
box-shadow: map-deep-get($token-shadow-map, "hover");
#{$self}__linkIcon {
background-color: map-deep-get($token-color-brand-map, "secondary", "06");
color: map-deep-get($token-color-brand-map, "secondary", "100");
}
}
}
&:focus {
}
&:active {
}
&:focus,
&:active {
}
}