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">
<div class="sds-sitfinBlock__header">
<div class="sds-sitfinBlock__heading d-flex align-items-center">
<button type="button" class="sds-btn -iconBtn -btnSecondary -btnSmall sds-sitfinBlock__collapseTrigger" data-toggle="collapse" data-target="#sitfin-collapse-2" aria-expanded="true">
<span class="sds-icon sds-icon-plus"></span>
</button>
<div class="h3">Épargne</div>
</div>
<div class="sds-sitfinBlock__meta sds-textHelper">
2 comptes
</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-2">
<div class="sds-sitfinBlock__collapseInner">
<div class="sds-sitfinBlock__row">
<div class="sds-sitfinBlock__rowAvatar">
<div class="sds-avatar centeredBgi -avatarSm -bank">
<img class="img-fluid" src="../../media/logos/logo-spuerkeess.png" alt="">
</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-btn -iconBtn -btnSecondary -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-pig-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-sitfinBlock__rowItem">
<span class="sds-dot sds-sitfinBlock__rowItemDot -dotBefore"></span>
<div class="sds-circularCompletion -dashed">
<a class="sds-circularCompletion__link d-flex flex-column align-items-center justify-content-center" href="#!">
<span class="sds-iconCircle -primaryG -smaller" aria-hidden="true">
<span class="sds-icon sds-icon-plus"></span>
</span>
<span class="sds-circularCompletion__more sds-textHelper sds-textSemiBold">Nouveau Projet</span>
</a>
</div>
<span class="sds-dot sds-sitfinBlock__rowItemDot -dotAfter"></span>
</div>
</div>
</div>
</div>
<div class="sds-sitfinBlock__row">
<div class="sds-sitfinBlock__rowAvatar">
<div class="sds-avatar centeredBgi -avatarSm -bank">
<img class="img-fluid" src="../../media/logos/logo-spuerkeess.png" alt="">
</div>
</div>
<div class="sds-sitfinBlock__rowInner -stacked">
<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-btn -iconBtn -btnSecondary -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-pig-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-sitfinBlock__rowItem">
<span class="sds-dot sds-sitfinBlock__rowItemDot -dotBefore"></span>
<div class="sds-circularCompletion sds-servicesColor">
<svg class="sds-circularCompletion__circleWrapper" viewBox="0 0 118 118" preserveAspectRatio="none" version="1.1" xmlns="http://www.w3.org/2000/svg">
<circle fill="none" class="sds-circularCompletion__circle" r="55" cx="59" cy="59" stroke-dasharray="346"></circle>
<circle fill="none" class="sds-circularCompletion__circle sds-circularCompletion__progress" r="55" cx="59" cy="59" stroke-dasharray="86.5 346"></circle>
</svg>
<img class="sds-circularCompletion__img" src="https:/design.spuerkeess.lu/media/illustrations/svg240x240/spot/sdsillu-constructiontoolsb.svg" alt="img alt">
<div class="sds-circularCompletion__dropdown dropdown">
<button type="button" class="sds-btn -iconBtn -btnSecondary" 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>
<span class="sds-dot sds-sitfinBlock__rowItemDot -dotAfter"></span>
</div>
<div class="sds-sitfinBlock__rowItem">
<span class="sds-dot sds-sitfinBlock__rowItemDot -dotBefore"></span>
<div class="sds-circularCompletion sds-mobiliteColor">
<svg class="sds-circularCompletion__circleWrapper" viewBox="0 0 118 118" preserveAspectRatio="none" version="1.1" xmlns="http://www.w3.org/2000/svg">
<circle fill="none" class="sds-circularCompletion__circle" r="55" cx="59" cy="59" stroke-dasharray="346"></circle>
<circle fill="none" class="sds-circularCompletion__circle sds-circularCompletion__progress" r="55" cx="59" cy="59" stroke-dasharray="346 346"></circle>
</svg>
<img class="sds-circularCompletion__img" src="https:/design.spuerkeess.lu/media/illustrations/svg240x240/spot/sdsillu-electriccarb.svg" alt="img alt">
<span class="sds-iconCircle -success100 -small sds-circularCompletion__complete" aria-hidden="true">
<span class="sds-icon sds-icon-check"></span>
<span class="sr-only">Project Complete</span>
</span>
<div class="sds-circularCompletion__dropdown dropdown">
<button type="button" class="sds-btn -iconBtn -btnSecondary" 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>
<span class="sds-dot sds-sitfinBlock__rowItemDot -dotAfter"></span>
</div>
<div class="sds-sitfinBlock__rowItem">
<span class="sds-dot sds-sitfinBlock__rowItemDot -dotBefore"></span>
<div class="sds-circularCompletion sds-loisirsColor">
<svg class="sds-circularCompletion__circleWrapper" viewBox="0 0 118 118" preserveAspectRatio="none" version="1.1" xmlns="http://www.w3.org/2000/svg">
<circle fill="none" class="sds-circularCompletion__circle" r="55" cx="59" cy="59" stroke-dasharray="346"></circle>
<circle fill="none" class="sds-circularCompletion__circle sds-circularCompletion__progress" r="55" cx="59" cy="59" stroke-dasharray="346 346"></circle>
</svg>
<img class="sds-circularCompletion__img" src="../../media/snet/components/circular-completion/holidays.jpg" alt="img alt">
<span class="sds-iconCircle -success100 -small sds-circularCompletion__complete" aria-hidden="true">
<span class="sds-icon sds-icon-check"></span>
<span class="sr-only">Project Complete</span>
</span>
<div class="sds-circularCompletion__dropdown dropdown">
<button type="button" class="sds-btn -iconBtn -btnSecondary" 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>
<span class="sds-dot sds-sitfinBlock__rowItemDot -dotAfter"></span>
</div>
<div class="sds-sitfinBlock__rowItem">
<span class="sds-dot sds-sitfinBlock__rowItemDot -dotBefore"></span>
<div class="sds-circularCompletion -dashed">
<a class="sds-circularCompletion__link d-flex flex-column align-items-center justify-content-center" href="#!">
<span class="sds-iconCircle -primaryG -smaller" aria-hidden="true">
<span class="sds-icon sds-icon-plus"></span>
</span>
<span class="sds-circularCompletion__more sds-textHelper sds-textSemiBold">Nouveau Projet</span>
</a>
</div>
<span class="sds-dot sds-sitfinBlock__rowItemDot -dotAfter"></span>
</div>
</div>
<a href="" class="sds-btn -iconBtn -btnSecondary sds-sitfinBlock__seeMore">
<span class="sds-icon sds-icon-arrownext"></span>
</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-secondary--small",{
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>
{% render "@amount--xtra-large-positive",{text: "{+#.###,##}"},true %}
</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 "@avatar--bank-img" %}
</div>
<div class="{{ namespace }}sitfinBlock__rowInner">
{% render "@snet-sitfin-card",{
classes: [namespace+"sitfinBlock__card"],
middleIcon: true,
externalIcon: true,
icon: ("https://design.spuerkeess.lu/media" + illustrativeIconsSDSPath + svg80xPath + "/product/sdsillustrativeicon-pig-p.svg"),
footerIcon: false,
footerBadge: false
},true %}
<div class="{{ namespace }}sitfinBlock__rowMoreCards">
<div class="{{ namespace }}sitfinBlock__rowItem">
{% render "@snet-dot",{classes: [namespace + "sitfinBlock__rowItemDot", "-dotBefore"]},true %}
{% render "@snet-circular-completion--add-project" %}
{% render "@snet-dot",{classes: [namespace + "sitfinBlock__rowItemDot", "-dotAfter"]},true %}
</div>
</div>
</div>
</div>
<div class="{{ namespace }}sitfinBlock__row">
<div class="{{ namespace }}sitfinBlock__rowAvatar">
{% render "@avatar--bank-img" %}
</div>
<div class="{{ namespace }}sitfinBlock__rowInner -stacked">
{% render "@snet-sitfin-card",{
classes: [namespace+"sitfinBlock__card"],
middleIcon: true,
externalIcon: true,
icon: ("https://design.spuerkeess.lu/media" + illustrativeIconsSDSPath + svg80xPath + "/product/sdsillustrativeicon-pig-p.svg"),
footerIcon: false,
footerBadge: false
},true %}
<div class="{{ namespace }}sitfinBlock__rowMoreCards">
<div class="{{ namespace }}sitfinBlock__rowItem">
{% render "@snet-dot",{classes: [namespace + "sitfinBlock__rowItemDot", "-dotBefore"]},true %}
{% render "@snet-circular-completion--services" %}
{% render "@snet-dot",{classes: [namespace + "sitfinBlock__rowItemDot", "-dotAfter"]},true %}
</div>
<div class="{{ namespace }}sitfinBlock__rowItem">
{% render "@snet-dot",{classes: [namespace + "sitfinBlock__rowItemDot", "-dotBefore"]},true %}
{% render "@snet-circular-completion--services-complete" %}
{% render "@snet-dot",{classes: [namespace + "sitfinBlock__rowItemDot", "-dotAfter"]},true %}
</div>
<div class="{{ namespace }}sitfinBlock__rowItem">
{% render "@snet-dot",{classes: [namespace + "sitfinBlock__rowItemDot", "-dotBefore"]},true %}
{% render "@snet-circular-completion--loisirs-complete" %}
{% render "@snet-dot",{classes: [namespace + "sitfinBlock__rowItemDot", "-dotAfter"]},true %}
</div>
<div class="{{ namespace }}sitfinBlock__rowItem">
{% render "@snet-dot",{classes: [namespace + "sitfinBlock__rowItemDot", "-dotBefore"]},true %}
{% render "@snet-circular-completion--add-project" %}
{% render "@snet-dot",{classes: [namespace + "sitfinBlock__rowItemDot", "-dotAfter"]},true %}
</div>
</div>
{% render "@icon-btn-secondary--default", {
classes: [namespace+"sitfinBlock__seeMore"],
eltType: "a",
icon: "icon-arrownext"
},true %}
</div>
</div>
</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-narrow-key: "md";
$sitfin-row-card-horizontal-spacing-wide-key: "lg";
$sitfin-row-card-horizontal-spacing-narrow: map-deep-get($token-spacer-inline-map, $sitfin-row-card-horizontal-spacing-narrow-key);
$sitfin-row-card-horizontal-spacing-wide: map-deep-get($token-spacer-inline-map, $sitfin-row-card-horizontal-spacing-wide-key);
$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: &;
--comp-sitfin-block-card-gap: 16px;
@include media-breakpoint-up("xl") {
--comp-sitfin-block-card-gap: 24px;
}
@media screen and (min-width: map-get($tweakpoint-map, "tablet")) {
--comp-sitfin-block-card-gap: 16px;
}
@media screen and (min-width: 1320px) {
--comp-sitfin-block-card-gap: 24px;
}
/* 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: center;
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;
}
}
#{$self}__cardWrapper:last-of-type #{$self}__card {
[class*="dotAfter"] {
display: none;
}
}
&.-stacked {
#{$self}__rowMoreCards {
#{$self}__cardWrapper {
&.-isSelected {
&.-stacked1 {
> * {
transform: translateX(calc(-#{$sitfin-card-width-global} - var(--comp-sitfin-block-card-gap)));
}
}
&.-stacked2 {
> * {
transform: translateX(calc(-#{$sitfin-card-width-global} - (var(--comp-sitfin-block-card-gap) * 4.5)));
}
}
&.-stacked3 {
> * {
transform: translateX(calc(-#{$sitfin-card-width-global} - (var(--comp-sitfin-block-card-gap) * 8)));
}
}
}
&:not([class*="stacked"]) {
.-stacked1 {
transform: translateX(calc(#{$sitfin-card-width-global} + var(--comp-sitfin-block-card-gap)));
}
.-stacked2 {
transform: translateX(calc(#{$sitfin-card-width-global} + (var(--comp-sitfin-block-card-gap) * 4.5)));
}
.-stacked3 {
transform: translateX(calc(#{$sitfin-card-width-global} + (var(--comp-sitfin-block-card-gap) * 8)));
}
}
&.-stacked2 {
margin-left: calc(#{$sitfin-card-width-global}*-1 + ( var(--comp-sitfin-block-card-gap) * 2.5));
}
&.-stacked3 {
margin-left: calc(#{$sitfin-card-width-global}*-1 + ( var(--comp-sitfin-block-card-gap) * 2.5));
}
}
#{$self}__card {
position: relative;
z-index: z("zero");
height: 100%;
transition: transform 0.15s linear;
&.-stacked1 {
z-index: z("zero");
&::before {
right: 100%;
left: auto;
width: var(--comp-sitfin-block-card-gap);
height: $border-width*2;
transform: translate(0, -50%);
}
}
&.-stacked2,
&.-stacked3 {
&::before,
&::after {
content: none;
}
[class*="dot"] {
display: none;
}
}
&.-stacked2 {
z-index: z("low");
}
&.-stacked3 {
z-index: z("high");
}
}
}
&::after {
content: "";
pointer-events: none;
position: absolute;
z-index: z("high");
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;
}
}
}
&__rowMoreCards {
position: relative;
display: flex;
align-items: center;
margin-left: var(--comp-sitfin-block-card-gap);
gap: var(--comp-sitfin-block-card-gap);
#{$self}__rowItem {
display: flex;
&:last-of-type {
[class*="dotAfter"] {
display: none;
}
}
}
#{$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: var(--comp-sitfin-block-card-gap);
height: $border-width*2;
background-color: $border-color;
}
}
}
&__seeMore {
position: sticky;
z-index: z("high") + 1;
right: var(--comp-sitfin-block-card-gap);
margin-left: var(--comp-sitfin-block-card-gap);
}
&__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, "sm"));
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 {
}
}