Use the .sds-sectionItem__aboveClickArea class on items in columns that need to be interacted with. This lets them "float" over the js-sectionItem__toggle trigger element that covers the entirety of the section item.
<div class="sds-sectionItem">
<div class="sds-sectionItem__inner">
<div class="sds-sectionItem__innerCol -date">
<div class="sds-sectionItem__textMeta sds-textHelper">
18/03/2022
</div>
</div>
<div class="sds-sectionItem__innerCol -dot">
<div class="sds-sectionItem__dotWrapper">
<span class="sds-iconCircle -secondary10" aria-hidden="true">
<span class="sds-icon sds-icon-adviser"></span>
</span>
</div>
</div>
<div class="sds-sectionItem__innerCol -grow">
<div class="sds-stackXs">
<div class="sds-amount -negative">
<span class="sds-amount__value">{-#.###,##}</span>
<span class="sds-amount__currency">€</span>
</div>
<div>Lorem Ipsum</div>
</div>
</div>
<div class="sds-sectionItem__innerCol">
<div class="sds-sectionItem__textMeta sds-textHelper">
18/03/2022
</div>
</div>
</div>
</div>
<div class="{{ namespace }}sectionItem{% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}">
<div class="{{ namespace }}sectionItem__inner">
<div class="{{ namespace }}sectionItem__innerCol -date">
<div class="{{ namespace }}sectionItem__textMeta {{ namespace }}textHelper">
18/03/2022
</div>
</div>
<div class="{{ namespace }}sectionItem__innerCol -dot">
<div class="{{ namespace }}sectionItem__dotWrapper">
{% render "@icon-circle-regular--secondary-10" %}
</div>
</div>
<div class="{{ namespace }}sectionItem__innerCol -grow">
<div class="{{ namespace }}stackXs">
{% render "@amount--negative" %}
<div>Lorem Ipsum</div>
</div>
</div>
<div class="{{ namespace }}sectionItem__innerCol">
<div class="{{ namespace }}sectionItem__textMeta {{ namespace }}textHelper">
18/03/2022
</div>
</div>
</div>
</div>
@use "sass:math";
/* variables specific to current element */
$section-item-horiz-margin: $section-item-horiz-margin-global;
$section-item-horiz-padding: $section-item-horiz-padding-global;
$section-item-col-dot-min-height: $section-item-col-dot-min-height-global;
$section-item-col-dot-width: $section-item-col-dot-width-global;
$section-item-col-date-width: $section-item-col-date-width-global;
$section-item-vertical-padding: $section-item-vertical-padding-global;
.#{$namespace}sectionItem {
/* Save root element context for easy access if nesting is needed */
$self: &;
/* properties of current element + media queries */
/* 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 */
&__inner,
&__detailInner {
display: flex;
align-items: flex-start;
@include spacer-component-inset-vert-greater("md", "sm");
@include custom-prop-fallback("background-color", "comp-box-background-color");
border-radius: map-deep-get($token-radius-map, "16");
position: relative;
#{$self}__innerCol {
&.-dot {
&::before {
}
}
}
&:hover {
@media (hover: hover) {
@include custom-prop-fallback("background-color", "comp-box-sunken-background-color");
}
}
}
// sectionItem__innerCol
&__innerCol {
// follows same logic as parent
display: flex;
align-items: center;
flex-grow: 0;
flex-shrink: 0;
min-height: 40px;
& + & {
margin-left: map-deep-get($token-spacer-inline-map, "md");
}
&.-date {
width: $section-item-col-date-width;
justify-content: flex-end;
text-align: right;
white-space: nowrap;
}
&.-dot {
width: $section-item-col-dot-width;
//background-color: inherit;
display: flex;
align-items: flex-start;
align-self: stretch;
justify-content: center;
position: relative;
z-index: z("zero");
}
&.-grow {
flex-grow: 1;
flex-shrink: 1;
}
&.-content {
.#{$namespace}borderedImage {
margin-top: map-deep-get($token-spacer-unit-map, "24");
}
}
&.-justifyEnd {
justify-content: flex-end;
}
}
&__dotWrapper {
min-height: $section-item-col-dot-min-height;
display: flex;
background-color: inherit;
align-items: center;
justify-content: center;
}
&__textMeta {
@include custom-prop-fallback("color", "sys-color-text-primary-muted");
}
&__collapse {
position: relative;
z-index: z("low");
transition: none;
&.in {
transition: none !important;
}
&.show {
transition: none !important;
}
}
&__detail {
box-shadow: map-deep-get($token-shadow-map, "detail");
position: relative; // necessary for shadow to show above next element
margin: 0 (-($timeline-item-horiz-padding-global + $section-item-horiz-padding));
padding: map-deep-get($token-spacer-inset-map, "md") ($timeline-item-horiz-padding-global + $section-item-horiz-padding);
&::before {
content: "";
width: $border-width*2;
position: absolute;
z-index: z("zero");
top: 0;
height: 100%;
left: $timeline-item-horiz-padding-global + $section-item-col-date-width-global + $section-item-horiz-margin-global + math.div($section-item-col-dot-width-global, 2) + ($section-item-horiz-padding*2);
transform: translateX(-50%);
@include custom-prop-fallback("background-color", "sys-color-border-primary-moderate");
}
}
&__transactionAmountIcon {
@include custom-prop-fallback("color", "sys-color-text-primary-muted");
vertical-align: inherit;
position: relative;
top: 0.075em;
&::before {
font-size: 1em;
}
}
&__detailContent {
margin-top: map-deep-get($token-spacer-stack-max-map, "lg");
padding-left: $section-item-col-date-width + $section-item-col-dot-width + $section-item-horiz-padding + ($section-item-horiz-margin*2);
padding-right: $section-item-horiz-padding;
@include spacer-component-stack("md");
}
&__toggle {
position: absolute;
z-index: z("zero");
top: 0;
left: 0;
width: 100%;
height: 100%;
}
&__aboveClickArea {
position: relative;
z-index: z("low");
}
&__loaderContentShort {
max-width: 144px;
}
/* modifiers */
// sectionItem -isTimelineItem
&.-isTimelineItem {
// follows same logic as base element
#{$self}__innerCol {
&.-dot {
&::before,
&::after {
content: "";
position: absolute;
z-index: z("negative");
left: 50%;
transform: translateX(-50%);
width: $border-width*2;
@include custom-prop-fallback("background-color", "sys-color-border-primary-moderate");
}
&::before {
top: -#{$section-item-vertical-padding} !important;
height: $section-item-vertical-padding !important;
}
&::after {
bottom: -#{$section-item-vertical-padding} !important;
height: calc(100% - #{$section-item-vertical-padding * 1.5});
}
}
}
}
&.-noLineFirstItem {
#{$self}__innerCol {
&.-dot {
&::before {
height: 0 !important;
}
}
}
}
&.-noLineLastItem {
#{$self}__innerCol {
&.-dot {
&::before {
bottom: 50%;
}
}
}
}
&.-noHover {
#{$self}__inner {
&:hover {
@media (hover: hover) {
background-color: transparent;
}
}
}
}
&.-detailShown {
#{$self}__inner {
display: none;
}
}
&.-hasNotif {
#{$self}__inner {
#{$self}__innerCol {
&.-date {
position: relative;
z-index: z("zero");
&::before {
content: "";
position: absolute;
top: 50%;
transform: translateY(-50%);
left: calc(100% + #{map-deep-get($token-spacer-inline-map, "sm")});
@include custom-prop-fallback("background-image", "sys-color-background-secondary-gradient");
width: map-deep-get($token-sizes-unit-map, "8");
height: map-deep-get($token-sizes-unit-map, "8");
border-radius: map-deep-get($token-radius-map, "circle");
}
}
}
}
}
&.-dotNoWidth {
#{$self}__innerCol.-dot {
width: auto;
}
}
&.-isStatic {
&:hover {
@media (hover: hover) {
#{$self}__inner {
@include custom-prop-fallback("background-color", "comp-box-background-color");
}
}
}
}
/* random parent element */
/*
*
* Syntax : .randomParentElt & {}
*
*/
/* Pseudo Classes */
&:hover {
@media (hover: hover) {
}
}
&:focus {
}
&:active {
}
&:focus,
&:active {
}
}