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 -noAccount">
<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-3-1" aria-expanded="true">
<span class="sds-icon sds-icon-plus"></span>
</button>
<div class="h3">Investissement</div>
</div>
</div>
<div class="sds-sitfinBlock__collapse collapse show" id="sitfin-collapse-3-1">
<div class="sds-sitfinBlock__collapseInner">
<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">Ouvrir un portefeuille-titres</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>
</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>
<div class="{{ namespace }}sitfinBlock__collapse collapse{% if expanded === true %} show{% endif %}" id="{{ sitfinCollapseID }}">
<div class="{{ namespace }}sitfinBlock__collapseInner">
<div class="{{ namespace }}sitfinBlock__row {{ namespace }}sitfinBlock__btnRow">
{% render "@btn-base-secondary--icon-left",{
icon: "icon-plus",
text: "Ouvrir un portefeuille-titres"
},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 %}
</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: 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 {
}
}