sds-sitfinBlock__collapseTrigger's aria-expanded attribute set to false if collapsed, to true if shown
sds-sitfinBlock__collapse gets a "show" class when shown
<div class="sds-sitfinBlock -hasAction">
<div class="sds-sitfinBlock__header">
<div class="sds-sitfinBlock__heading d-flex align-items-center">
<button type="button" class="sds-iconBtn -iconBtnBase -iconBtnSecondary -smaller sds-sitfinBlock__collapseTrigger" data-toggle="collapse" data-target="#sitfin-collapse-1" aria-expanded="true">
<span class="sds-icon sds-icon-plus"></span>
</button>
<div class="h3">Comptes & cartes</div>
</div>
<div class="sds-sitfinBlock__meta sds-textHelper">
3 comptes <br> 3 cartes
</div>
<div class="sds-amount -positive -amountXl">
<span class="sds-amount__value">{+#.###,##}</span>
<span class="sds-amount__currency">€</span>
</div>
</div>
<div class="sds-sitfinBlock__collapse collapse show" id="sitfin-collapse-1">
<div class="sds-sitfinBlock__collapseInner">
<div class="sds-sitfinBlock__row">
<div class="sds-sitfinBlock__rowAvatar">
<div class="sds-avatar centeredBgi -small -bank" style="background-image: url(../../media/logos/logo-spuerkeess.png)">
<span class="sds-icon sds-false"></span>
</div>
</div>
<div class="sds-sitfinBlock__rowInner">
<div class="sds-sitfinCard sds-sitfinBlock__card">
<div class="sds-sitfinCard__header">
<div class="sds-accountInfo">
<div class="sds-accountInfo__content">
<p class="sds-accountInfo__title">
<span class="text-truncate">
{Account Number}
</span>
</p>
<p class="sds-accountInfo__meta">LU## #### #### #### ####</p>
</div>
</div>
<div class="dropdown">
<button type="button" class="sds-iconBtn -iconBtnBase -iconBtnSecondary -ghost sds-sitfinCard__action" data-reference="parent" data-boundary="window" data-toggle="dropdown">
<span class="sds-icon sds-icon-more"></span>
</button>
<div aria-labelledby="" class="sds-actionMenu dropdown-menu dropdown-menu-right">
<a href="" class="sds-actionMenu__item dropdown-item">
Item 1
</a>
<a href="" class="sds-actionMenu__item dropdown-item">
Item 2
</a>
<a href="" class="sds-actionMenu__item dropdown-item">
Item 3
</a>
</div>
</div>
</div>
<div class="sds-sitfinCard__middle">
<div class="sds-sitfinCard__middleIcon">
<img class="img-fluid" src="https:/design.spuerkeess.lu/media/illustrative-icons/svg80x/product/sdsillustrativeicon-account-p.svg" alt="">
</div>
</div>
<div class="sds-sitfinCard__footer">
<div class="sds-sitfinCard__footerBlockStart">
<div class="text-truncate">
<div class="sds-amount -positive -amountLg">
<span class="sds-amount__value">{+#.###,##}</span>
<span class="sds-amount__currency">€</span>
</div>
</div>
</div>
</div>
<span class="sds-dot sds-sitfinCard__dotBefore"></span>
<span class="sds-dot sds-sitfinCard__dotAfter"></span>
</div>
<div class="sds-sitfinBlock__rowMoreCards">
<div class="sds-sitfinCard -rounded sds-sitfinBlock__card">
<div class="sds-sitfinCard__header">
<div class="sds-accountInfo">
<div class="sds-accountInfo__content">
<p class="sds-accountInfo__title">
<span class="text-truncate">
{Card Name}
</span>
</p>
<p class="sds-accountInfo__meta">LU## #### #### #### ####</p>
</div>
</div>
<div class="dropdown">
<button type="button" class="sds-iconBtn -iconBtnBase -iconBtnSecondary -ghost sds-sitfinCard__action" data-reference="parent" data-boundary="window" data-toggle="dropdown">
<span class="sds-icon sds-icon-more"></span>
</button>
<div aria-labelledby="" class="sds-actionMenu dropdown-menu dropdown-menu-right">
<a href="" class="sds-actionMenu__item dropdown-item">
Item 1
</a>
<a href="" class="sds-actionMenu__item dropdown-item">
Item 2
</a>
<a href="" class="sds-actionMenu__item dropdown-item">
Item 3
</a>
</div>
</div>
</div>
<div class="sds-sitfinCard__middle -hasSeparator">
<div class="sds-sitfinCard__middleIcon" data-toggle="tooltip" data-placement="bottom" title="Visa Debit">
<img class="img-fluid" src="../../media/snet/components/sitfin/visaclassic-small.png" alt="">
</div>
</div>
<div class="sds-sitfinCard__footer">
<div class="sds-sitfinCard__footerBlockStart">
<div class="text-truncate">
<span class="sds-sitfinCard__alert sds-icon sds-icon-alert"></span>
<div class="sds-amount -negative -amountLg">
<span class="sds-amount__value">{-#.###,##}</span>
<span class="sds-amount__currency">€</span>
</div>
<span class="sds-sitfinCard__helper sds-textHelper">/ {#.###} €</span>
</div>
</div>
</div>
<span class="sds-dot sds-sitfinCard__dotBefore"></span>
<span class="sds-dot sds-sitfinCard__dotAfter"></span>
</div>
<div class="sds-sitfinCard -rounded -dashed sds-sitfinBlock__card">
<div class="sds-sitfinCard__header">
<div class="sds-accountInfo">
<div class="sds-accountInfo__content">
<p class="sds-accountInfo__title">
<span class="text-truncate">
{Card Name}
</span>
</p>
<p class="sds-accountInfo__meta">#### • • • • • • • • ####</p>
</div>
</div>
<button type="button" class="sds-iconBtn -iconBtnBase -iconBtnSecondary -ghost sds-sitfinCard__action">
<span class="sds-icon sds-icon-cross"></span>
</button>
</div>
<div class="sds-sitfinCard__middle -hasSeparator">
<div class="sds-sitfinCard__middleIcon" data-toggle="tooltip" data-placement="bottom" title="Visa Debit">
<img class="img-fluid" src="../../media/snet/components/sitfin/visaclassic-small.png" alt="">
</div>
</div>
<div class="sds-sitfinCard__footer">
<div class="sds-sitfinCard__footerBlockStart">
<button type="button" class="sds-btn -btnBase -btnBaseSecondary -btnSmall">
<span class="sds-btn__text">Afficher</span>
</button>
</div>
</div>
<span class="sds-dot sds-sitfinCard__dotBefore"></span>
<span class="sds-dot sds-sitfinCard__dotAfter"></span>
</div>
</div>
</div>
</div>
<div class="sds-sitfinBlock__row">
<div class="sds-sitfinBlock__rowAvatar">
<div class="sds-avatar centeredBgi -small -bank" style="background-image: url(../../media/logos/logo-spuerkeess.png)">
<span class="sds-icon sds-false"></span>
</div>
</div>
<div class="sds-sitfinBlock__rowInner">
<div class="sds-sitfinCard sds-sitfinBlock__card">
<div class="sds-sitfinCard__header">
<div class="sds-accountInfo">
<div class="sds-accountInfo__content">
<p class="sds-accountInfo__title">
<span class="text-truncate">
{Account Number}
</span>
</p>
<p class="sds-accountInfo__meta">LU## #### #### #### ####</p>
</div>
</div>
<div class="dropdown">
<button type="button" class="sds-iconBtn -iconBtnBase -iconBtnSecondary -ghost sds-sitfinCard__action" data-reference="parent" data-boundary="window" data-toggle="dropdown">
<span class="sds-icon sds-icon-more"></span>
</button>
<div aria-labelledby="" class="sds-actionMenu dropdown-menu dropdown-menu-right">
<a href="" class="sds-actionMenu__item dropdown-item">
Item 1
</a>
<a href="" class="sds-actionMenu__item dropdown-item">
Item 2
</a>
<a href="" class="sds-actionMenu__item dropdown-item">
Item 3
</a>
</div>
</div>
</div>
<div class="sds-sitfinCard__middle">
<div class="sds-sitfinCard__middleIcon">
<img class="img-fluid" src="https:/design.spuerkeess.lu/media/illustrative-icons/svg80x/product/sdsillustrativeicon-account-p.svg" alt="">
</div>
</div>
<div class="sds-sitfinCard__footer">
<div class="sds-sitfinCard__footerBlockStart">
<div class="text-truncate">
<div class="sds-amount -positive -amountLg">
<span class="sds-amount__value">{+#.###,##}</span>
<span class="sds-amount__currency">€</span>
</div>
</div>
</div>
</div>
<span class="sds-dot sds-sitfinCard__dotBefore"></span>
<span class="sds-dot sds-sitfinCard__dotAfter"></span>
</div>
<div class="sds-sitfinBlock__rowMoreCards -stacked">
<div class="sds-sitfinCard -rounded sds-sitfinBlock__card">
<div class="sds-sitfinCard__header">
<div class="sds-accountInfo">
<div class="sds-accountInfo__content">
<p class="sds-accountInfo__title">
<span class="text-truncate">
{Card Name}
</span>
</p>
<p class="sds-accountInfo__meta">LU## #### #### #### ####</p>
</div>
</div>
<div class="dropdown">
<button type="button" class="sds-iconBtn -iconBtnBase -iconBtnSecondary -ghost sds-sitfinCard__action" data-reference="parent" data-boundary="window" data-toggle="dropdown">
<span class="sds-icon sds-icon-more"></span>
</button>
<div aria-labelledby="" class="sds-actionMenu dropdown-menu dropdown-menu-right">
<a href="" class="sds-actionMenu__item dropdown-item">
Item 1
</a>
<a href="" class="sds-actionMenu__item dropdown-item">
Item 2
</a>
<a href="" class="sds-actionMenu__item dropdown-item">
Item 3
</a>
</div>
</div>
</div>
<div class="sds-sitfinCard__footer">
<div class="sds-sitfinCard__footerBlockStart">
<div class="sds-sitfinCard__loader"></div>
</div>
</div>
<span class="sds-dot sds-sitfinCard__dotBefore"></span>
<span class="sds-dot sds-sitfinCard__dotAfter"></span>
</div>
<div class="sds-sitfinCard -rounded sds-sitfinBlock__card -stacked1">
<div class="sds-sitfinCard__header">
<div class="sds-accountInfo">
<div class="sds-accountInfo__content">
<p class="sds-accountInfo__title">
<span class="text-truncate">
{Card Name}
</span>
</p>
<p class="sds-accountInfo__meta">LU## #### #### #### ####</p>
</div>
</div>
<div class="dropdown">
<button type="button" class="sds-iconBtn -iconBtnBase -iconBtnSecondary -ghost sds-sitfinCard__action" data-reference="parent" data-boundary="window" data-toggle="dropdown">
<span class="sds-icon sds-icon-more"></span>
</button>
<div aria-labelledby="" class="sds-actionMenu dropdown-menu dropdown-menu-right">
<a href="" class="sds-actionMenu__item dropdown-item">
Item 1
</a>
<a href="" class="sds-actionMenu__item dropdown-item">
Item 2
</a>
<a href="" class="sds-actionMenu__item dropdown-item">
Item 3
</a>
</div>
</div>
</div>
<div class="sds-sitfinCard__middle -hasSeparator">
<div class="sds-sitfinCard__middleIcon" data-toggle="tooltip" data-placement="bottom" title="Visa Debit">
<img class="img-fluid" src="../../media/snet/components/sitfin/visaclassic-small.png" alt="">
</div>
</div>
<div class="sds-sitfinCard__footer">
<div class="sds-sitfinCard__footerBlockStart">
<div class="text-truncate">
<span class="sds-sitfinCard__alert sds-icon sds-icon-alert"></span>
<div class="sds-amount -negative -amountLg">
<span class="sds-amount__value">{-#.###,##}</span>
<span class="sds-amount__currency">€</span>
</div>
<span class="sds-sitfinCard__helper sds-textHelper">/ {#.###} €</span>
</div>
</div>
</div>
<span class="sds-dot sds-sitfinCard__dotBefore"></span>
<span class="sds-dot sds-sitfinCard__dotAfter"></span>
</div>
<div class="sds-sitfinCard -rounded sds-sitfinBlock__card -stacked2">
<div class="sds-sitfinCard__header">
<div class="sds-accountInfo">
<div class="sds-accountInfo__content">
<p class="sds-accountInfo__title">
<span class="text-truncate">
{Card Name}
</span>
</p>
<p class="sds-accountInfo__meta">LU## #### #### #### ####</p>
</div>
</div>
<div class="dropdown">
<button type="button" class="sds-iconBtn -iconBtnBase -iconBtnSecondary -ghost sds-sitfinCard__action" data-reference="parent" data-boundary="window" data-toggle="dropdown">
<span class="sds-icon sds-icon-more"></span>
</button>
<div aria-labelledby="" class="sds-actionMenu dropdown-menu dropdown-menu-right">
<a href="" class="sds-actionMenu__item dropdown-item">
Item 1
</a>
<a href="" class="sds-actionMenu__item dropdown-item">
Item 2
</a>
<a href="" class="sds-actionMenu__item dropdown-item">
Item 3
</a>
</div>
</div>
</div>
<div class="sds-sitfinCard__middle -hasSeparator">
<div class="sds-sitfinCard__middleIcon" data-toggle="tooltip" data-placement="bottom" title="Visa Debit">
<img class="img-fluid" src="../../media/snet/components/sitfin/visaclassic-small.png" alt="">
</div>
</div>
<div class="sds-sitfinCard__footer">
<div class="sds-sitfinCard__footerBlockStart">
<div class="text-truncate">
<span class="sds-sitfinCard__alert sds-icon sds-icon-alert"></span>
<div class="sds-amount -negative -amountLg">
<span class="sds-amount__value">{-#.###,##}</span>
<span class="sds-amount__currency">€</span>
</div>
<span class="sds-sitfinCard__helper sds-textHelper">/ {#.###} €</span>
</div>
</div>
</div>
<span class="sds-dot sds-sitfinCard__dotBefore"></span>
<span class="sds-dot sds-sitfinCard__dotAfter"></span>
</div>
<div class="sds-sitfinCard -rounded sds-sitfinBlock__card -stacked3">
<div class="sds-sitfinCard__header">
<div class="sds-accountInfo">
<div class="sds-accountInfo__content">
<p class="sds-accountInfo__title">
<span class="text-truncate">
{Card Name}
</span>
</p>
<p class="sds-accountInfo__meta">LU## #### #### #### ####</p>
</div>
</div>
<div class="dropdown">
<button type="button" class="sds-iconBtn -iconBtnBase -iconBtnSecondary -ghost sds-sitfinCard__action" data-reference="parent" data-boundary="window" data-toggle="dropdown">
<span class="sds-icon sds-icon-more"></span>
</button>
<div aria-labelledby="" class="sds-actionMenu dropdown-menu dropdown-menu-right">
<a href="" class="sds-actionMenu__item dropdown-item">
Item 1
</a>
<a href="" class="sds-actionMenu__item dropdown-item">
Item 2
</a>
<a href="" class="sds-actionMenu__item dropdown-item">
Item 3
</a>
</div>
</div>
</div>
<div class="sds-sitfinCard__middle -hasSeparator">
<div class="sds-sitfinCard__middleIcon" data-toggle="tooltip" data-placement="bottom" title="Visa Debit">
<img class="img-fluid" src="../../media/snet/components/sitfin/visaclassic-small.png" alt="">
</div>
</div>
<div class="sds-sitfinCard__footer">
<div class="sds-sitfinCard__footerBlockStart">
<div class="text-truncate">
<span class="sds-sitfinCard__alert sds-icon sds-icon-alert"></span>
<div class="sds-amount -negative -amountLg">
<span class="sds-amount__value">{-#.###,##}</span>
<span class="sds-amount__currency">€</span>
</div>
<span class="sds-sitfinCard__helper sds-textHelper">/ {#.###} €</span>
</div>
</div>
</div>
<span class="sds-dot sds-sitfinCard__dotBefore"></span>
<span class="sds-dot sds-sitfinCard__dotAfter"></span>
</div>
</div>
<a href="" class="sds-iconBtn -iconBtnBase -iconBtnSecondary sds-sitfinBlock__seeMore">
<span class="sds-icon sds-icon-arrownext"></span>
</a>
</div>
</div>
<div class="sds-sitfinBlock__row">
<div class="sds-sitfinBlock__rowAvatar">
<div class="sds-avatar centeredBgi -small -bank" style="background-image: url(../../media/snet/components/sitfin/revolut.png)">
<span class="sds-icon sds-false"></span>
</div>
</div>
<div class="sds-sitfinBlock__rowInner">
<div class="sds-sitfinCard sds-sitfinBlock__card">
<div class="sds-sitfinCard__header">
<div class="sds-accountInfo">
<div class="sds-accountInfo__content">
<p class="sds-accountInfo__title">
<span class="text-truncate">
</span>
</p>
<p class="sds-accountInfo__meta">LU## #### #### #### ####</p>
</div>
</div>
<div class="dropdown">
<button type="button" class="sds-iconBtn -iconBtnBase -iconBtnSecondary -ghost sds-sitfinCard__action" data-reference="parent" data-boundary="window" data-toggle="dropdown">
<span class="sds-icon sds-icon-more"></span>
</button>
<div aria-labelledby="" class="sds-actionMenu dropdown-menu dropdown-menu-right">
<a href="" class="sds-actionMenu__item dropdown-item">
Item 1
</a>
<a href="" class="sds-actionMenu__item dropdown-item">
Item 2
</a>
<a href="" class="sds-actionMenu__item dropdown-item">
Item 3
</a>
</div>
</div>
</div>
<div class="sds-sitfinCard__middle">
<div class="sds-sitfinCard__middleIcon">
<img class="img-fluid" src="https:/design.spuerkeess.lu/media/illustrative-icons/svg80x/product/sdsillustrativeicon-account-p.svg" alt="">
</div>
</div>
<div class="sds-sitfinCard__footer">
<div class="sds-sitfinCard__footerBlockStart">
<div class="sds-sitfinCard__loader"></div>
</div>
</div>
<span class="sds-dot sds-sitfinCard__dotBefore"></span>
<span class="sds-dot sds-sitfinCard__dotAfter"></span>
</div>
</div>
</div>
<div class="sds-sitfinBlock__row sds-sitfinBlock__btnRow">
<button type="button" class="sds-btn -btnBase -btnBaseSecondary">
<span class="sds-icon sds-icon-plus"></span>
<span class="sds-btn__text">Ajouter compte</span>
</button>
<div class="sds-sitfinBlock__overlapAvatars">
<a href="" class="sds-avatar centeredBgi -medium" style="background-image: url(../../media/snet/components/sitfin/n26.png)">
</a>
<a href="" class="sds-avatar centeredBgi -medium" style="background-image: url(../../media/snet/components/sitfin/revolut.png)">
</a>
<a href="" class="sds-avatar centeredBgi -medium" style="background-image: url(../../media/snet/components/sitfin/post.png)">
</a>
<a href="" class="sds-avatar centeredBgi -medium" style="background-image: url(../../media/snet/components/sitfin/bnp.png)">
</a>
<a href="" class="sds-avatar centeredBgi -medium" style="background-image: url(../../media/snet/components/sitfin/bil.png)">
</a>
</div>
</div>
</div>
</div>
</div>
<div class="{{ namespace }}sitfinBlock{% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}">
<div class="{{ namespace }}sitfinBlock__header">
<div class="{{ namespace }}sitfinBlock__heading d-flex align-items-center">
{% render "@icon-btn-base-secondary--smaller",{
classes: [namespace+"sitfinBlock__collapseTrigger"],
icon: "icon-plus",
attrs: {
"data-toggle": "collapse",
"data-target": "#"+sitfinCollapseID,
"aria-expanded": expanded
}
},true %}
<div class="h3">{{ title }}</div>
</div>
<div class="{{ namespace }}sitfinBlock__meta {{ namespace }}textHelper">
{{ meta | safe }}
</div>
{% if loading %}
{% render "@content-loading-block--btn-small" %}
{% else %}
{% render "@amount--xtra-large-positive",{text: "{+#.###,##}"},true %}
{% endif %}
</div>
<div class="{{ namespace }}sitfinBlock__collapse collapse{% if expanded === true %} show{% endif %}" id="{{ sitfinCollapseID }}">
<div class="{{ namespace }}sitfinBlock__collapseInner">
<div class="{{ namespace }}sitfinBlock__row">
<div class="{{ namespace }}sitfinBlock__rowAvatar">
{% render "@snet-avatar--bank-img" %}
</div>
<div class="{{ namespace }}sitfinBlock__rowInner">
{% render "@snet-sitfin-card",{
classes: [namespace+"sitfinBlock__card"],
middleIcon: true,
footerIcon: false,
footerBadge: false
},true %}
<div class="{{ namespace }}sitfinBlock__rowMoreCards">
{% render "@snet-sitfin-card--middle-icon-line-negative-limit",{
classes: [namespace+"sitfinBlock__card"]
},true %}
{% render "@snet-sitfin-card--rounded-border-dashed-visa",{
classes: [namespace+"sitfinBlock__card"]
},true %}
</div>
</div>
</div>
<div class="{{ namespace }}sitfinBlock__row">
<div class="{{ namespace }}sitfinBlock__rowAvatar">
{% render "@snet-avatar--bank-img" %}
</div>
<div class="{{ namespace }}sitfinBlock__rowInner">
{% render "@snet-sitfin-card",{
classes: [namespace+"sitfinBlock__card"],
middleIcon: true,
footerIcon: false,
footerBadge: false
},true %}
<div class="{{ namespace }}sitfinBlock__rowMoreCards -stacked">
{% render "@snet-sitfin-card--loading",{
classes: [namespace+"sitfinBlock__card"],
footerBadge: false
},true %}
{% render "@snet-sitfin-card--middle-icon-line-negative-limit",{classes: [namespace+"sitfinBlock__card","-stacked1"]},true %}
{% render "@snet-sitfin-card--middle-icon-line-negative-limit",{classes: [namespace+"sitfinBlock__card","-stacked2"]},true %}
{% render "@snet-sitfin-card--middle-icon-line-negative-limit",{classes: [namespace+"sitfinBlock__card","-stacked3"]},true %}
</div>
{% render "@icon-btn-base-secondary--default", {
classes: [namespace+"sitfinBlock__seeMore"],
eltType: "a",
icon: "icon-arrownext"
},true %}
</div>
</div>
<div class="{{ namespace }}sitfinBlock__row">
<div class="{{ namespace }}sitfinBlock__rowAvatar">
{% render "@snet-avatar--bank-img",{
img: "/snet/components/sitfin/revolut.png"
},true %}
</div>
<div class="{{ namespace }}sitfinBlock__rowInner">
{% render "@snet-sitfin-card",{
classes: [namespace+"sitfinBlock__card"],
middleIcon: true,
footerIcon: false,
footerBadge: false,
loading: true,
accountInfoTitle: ""
},true %}
</div>
</div>
{% if sitfinBlockAction %}
<div class="{{ namespace }}sitfinBlock__row {{ namespace }}sitfinBlock__btnRow">
{% render "@btn-base-secondary--icon-left",{
icon: "icon-plus",
text: "Ajouter compte"
},true %}
<div class="{{ namespace }}sitfinBlock__overlapAvatars">
{% render "@snet-avatar",{
eltType: "a",
img: "/snet/components/sitfin/n26.png"
},true %}
{% render "@snet-avatar",{
eltType: "a",
img: "/snet/components/sitfin/revolut.png"
},true %}
{% render "@snet-avatar",{
eltType: "a",
img: "/snet/components/sitfin/post.png"
},true %}
{% render "@snet-avatar",{
eltType: "a",
img: "/snet/components/sitfin/bnp.png"
},true %}
{% render "@snet-avatar",{
eltType: "a",
img: "/snet/components/sitfin/bil.png"
},true %}
</div>
</div>
{% endif %}
</div>
</div>
</div>
@use "sass:math";
/* variables specific to current element */
$sitfin-block-header-padding: map-deep-get($token-spacer-inline-map, "md");
$sitfin-collapse-inner-padding: map-deep-get($token-spacer-inline-map, "md");
$sitfin-row-padding-left: map-deep-get($token-sizes-unit-map, "56");
$sitfin-row-margin-top: map-deep-get($token-spacer-stack-max-map, "md");
$sitfin-row-card-horizontal-spacing: map-deep-get($token-spacer-inline-map, "md");
$sitfin-row-left-offset: (math.div(map-deep-get($token-icon-btn-size-map, "smaller", "width"), 2));
$sitfin-block-avatar-margin-right: map-deep-get($token-spacer-inline-map, "lg");
$sitfin-btn-row-margin-top: map-deep-get($token-spacer-stack-max-map, "lg");
.#{$namespace}sitfinBlock {
/* Save root element context for easy access if nesting is needed */
$self: &;
/* properties of current element + media queries */
background-color: map-deep-get($token-color-grayscale-map, "0");
border-radius: map-deep-get($token-radius-map, "16");
/* 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 */
// sitfinBlock__header
&__header {
// follows same logic as parent
display: flex;
align-items: center;
//justify-content: space-between;
@include spacer-component-inline("md");
padding: $sitfin-block-header-padding;
position: relative;
z-index: z("zero");
}
&__heading {
flex-shrink: 0;
@include make-col(4);
}
&__meta {
@include custom-prop-fallback("color", "sys-color-text-primary-muted");
margin-right: auto;
}
&__collapseTrigger {
margin-right: map-deep-get($token-spacer-inline-map, "lg");
&::before {
content: "";
position: absolute;
z-index: z("negative");
top: 50%;
bottom: 0;
left: $sitfin-row-left-offset*2;
transform: translateX(-50%) scaleY(0);
width: $border-width*2;
background-color: $border-color;
transition: transform 0.05s linear;
transition-delay: $transition-collapse-duration;
transform-origin: top;
}
&[aria-expanded="true"] {
&::before {
transition-delay: 0s;
transform: translateX(-50%) scaleY(1);
}
[class*="icon"] {
&::before {
content: map-deep-get($token-icon-map, "minus")
}
}
}
}
&__row,
&__rowInner {
display: flex;
}
&__row,
&__btnRow {
padding-left: $sitfin-row-padding-left;
}
&__row {
& + & {
margin-top: $sitfin-row-margin-top;
}
& + #{$self}__btnRow {
margin-top: $sitfin-btn-row-margin-top;
}
&:first-of-type {
#{$self}__rowAvatar::before {
top: -($sitfin-block-header-padding);
}
}
&:last-of-type {
#{$self}__rowAvatar::before {
top: -($sitfin-block-header-padding);
bottom: 50%;
}
#{$self}__rowAvatar::after {
content: none;
}
}
#{$self}__rowInner > #{$self}__rowItem:only-of-type,
#{$self}__rowInner > #{$self}__card:only-of-type {
[class*="dotAfter"] {
display: none;
}
}
}
&__btnRow#{$self}__btnRow {
position: relative;
&::before,
&::after {
content: "";
position: absolute;
left: $sitfin-row-left-offset;
}
&::before {
background-color: $border-color;
top: -($sitfin-btn-row-margin-top);
bottom: 50%;
width: $border-width*2;
transform: translateX(-50%);
}
&::after {
background-color: $border-color;
top: 50%;
width: ($sitfin-row-padding-left - $sitfin-row-left-offset);
height: $border-width*2;
transform: translateY(-50%);
}
}
&__rowInner {
display: inline-flex;
align-items: stretch;
position: relative;
width: 100%;
&::before {
content: "";
background-color: $border-color;
position: absolute;
top: 50%;
right: 100%;
transform: translateY(-50%);
width: ($sitfin-row-padding-left - $sitfin-row-left-offset);
height: $border-width*2;
}
#{$self}__rowItem,
#{$self}__card {
[class*="dot"] {
display: block;
}
}
}
&__rowMoreCards {
position: relative;
display: flex;
align-items: center;
margin-left: $sitfin-row-card-horizontal-spacing;
@include spacer-component-inline("md");
#{$self}__rowItem {
display: flex;
}
#{$self}__rowItem,
#{$self}__card {
align-items: center;
&::before {
content: "";
position: absolute;
z-index: z("zero");
top: 50%;
right: 100%;
left: auto;
transform: translate(0, -50%);
width: $sitfin-row-card-horizontal-spacing;
height: $border-width*2;
background-color: $border-color;
}
&:last-of-type {
//background-color: red;
[class*="dotAfter"] {
display: none;
}
}
}
&.-stacked {
flex-grow: 1;
align-items: stretch;
&::after {
content: "";
pointer-events: none;
position: absolute;
top: -(math.div($sitfin-collapse-inner-padding, 2));
bottom:-(math.div($sitfin-collapse-inner-padding, 2));
right: -($sitfin-collapse-inner-padding);
width: 5rem;
@include gradient-directional(rgba(map-deep-get($token-color-grayscale-map, "0",),0.05), map-deep-get($token-color-grayscale-map, "0",), 0%, 30%, 90deg, true);
background-color: transparent;
}
//#{$self}__rowItem,
#{$self}__card {
position: absolute;
left: 0;
height: 100%;
transition: transform 0.15s linear;
&.-isSelected {
transform: translateX(0);
}
&.-stacked1 {
&::before {
right: 100%;
left: auto;
width: $sitfin-row-card-horizontal-spacing;
height: $border-width*2;
transform: translate(0, -50%);
}
}
&.-stacked2,
&.-stacked3 {
&::before,
&::after {
content: none;
}
[class*="dot"] {
display: none;
}
}
&.-stacked1 {
transform: translateX(calc(100% + #{$sitfin-row-card-horizontal-spacing}));
}
&.-stacked2 {
transform: translateX(calc(100% + #{$sitfin-row-card-horizontal-spacing*3}));
}
&.-stacked3 {
transform: translateX(calc(100% + #{$sitfin-row-card-horizontal-spacing*5}));
}
}
}
}
&__seeMore {
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%);
}
&__rowAvatar {
display: flex;
align-items: center;
position: relative;
z-index: z("low");
margin-left: -($sitfin-row-padding-left);
margin-right: $sitfin-block-avatar-margin-right;
&::before,
&::after {
content: "";
background-color: $border-color;
position: absolute;
z-index: z("negative");
left: $sitfin-row-left-offset;
width: $border-width*2;
transform: translateX(-50%);
}
&::before {
top: -($sitfin-row-margin-top);
bottom: 50%;
}
&::after {
top: 50%;
bottom: 0;
}
}
&__collapseInner {
padding: $sitfin-block-header-padding $sitfin-collapse-inner-padding $sitfin-collapse-inner-padding;
}
&__overlapAvatars {
display: inline-flex;
flex-wrap: nowrap;
margin-left: map-deep-get($token-spacer-inline-map, "xl");
position: relative;
z-index: z("zero");
transform-style: preserve-3d; /* parent styles for overlapping elements */
> * {
position: relative;
margin-right: -(map-deep-get($token-spacer-inline-map, "md"));
transition: transform 0.15s linear;
box-shadow: map-deep-get($token-shadow-map, "active");
transform: rotateY(-1deg) skewY(1deg);
& ~ * {
/* style for overlapping "next" sibling elements lower than previous */
z-index: z("negative");
}
&:hover {
z-index: z("low");
transform: translateZ(1px) scale(1.1) rotateY(-1deg) skewY(1deg);
}
}
&.-borderItems {
> * {
background-color: map-deep-get($token-color-grayscale-map, "0");
border: $border-width solid $border-color;
}
}
}
&__rowItem {
position: relative;
}
&__rowItemDot {
position: absolute;
top: 50%;
z-index: z("low");
&.-dotBefore {
right: 100%;
transform: translate(100%,-50%);
}
&.-dotAfter {
left: 100%;
transform: translate(-100%,-50%);
}
}
/* modifiers */
// sitfinBlock -hasAction
&.-hasAction {
// follows same logic as base element
#{$self}__row:nth-last-of-type(2) {
#{$self}__rowAvatar::after {
border-left: $border-width*2 dashed $border-color;
background-color: transparent;
}
}
#{$self}__btnRow {
&::before,
&::after {
content: "";
background-color: transparent;
}
&::before {
border-left: $border-width*2 dashed $border-color;
}
&::after {
border-top: $border-width*2 dashed $border-color;
}
}
}
&.-noAccount {
#{$self}__collapseTrigger {
&::before {
border-left: $border-width*2 dashed $border-color;
background-color: transparent;
}
}
#{$self}__btnRow#{$self}__btnRow {
&::before {
top: -(math.div($sitfin-btn-row-margin-top, 2));
}
}
}
/* random parent element */
/*
*
* Syntax : .randomParentElt & {}
*
*/
/* Pseudo Classes */
&:hover {
@media (hover: hover) {
}
}
&:focus {
}
&:active {
}
&:focus,
&:active {
}
}