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 -isTimelineItem">
<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 -product -shopping" aria-hidden="true">
<span class="sds-icon sds-icon-shoppingbag"></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>Domiciliation relevé Post Telecom Test 1</div>
</div>
</div>
<button class="sds-sectionItem__toggle js-sectionItem__toggle" type="button">
<span class="sr-only">Show transaction detail</span>
</button>
</div>
<div class="sds-sectionItem__collapse collapse" id="" data-parent="">
<div class="sds-box sds-sectionItem__detail">
<div class="sds-sectionItem__detailInner">
<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 -product -shopping" aria-hidden="true">
<span class="sds-icon sds-icon-shoppingbag"></span>
</span>
</div>
</div>
<div class="sds-sectionItem__innerCol -justifyEnd -grow">
<div class="sds-btnGroup sds-sectionItem__aboveClickArea">
<button type="button" class="sds-btn -iconBtn -btnSecondary" data-toggle="tooltip" data-placement="top" data-title="Exclure de l’analyse">
<span class="sds-icon sds-icon-hidden"></span>
</button>
</div>
</div>
<button class="sds-sectionItem__toggle js-sectionItem__detailToggle" type="button">
<span class="sr-only">Close detail</span>
</button>
</div>
<div class="sds-sectionItem__detailContent">
<div class="h3">Domiciliation relevé Post Telecom Test 1</div>
<table class="sds-infoTable table">
<tbody>
<tr>
<td class="">
<div class="sds-infoTable__cellContent">
<div class="sds-label">
Montant de la transaction
</div>
</div>
</td>
<td class="">
<div class="sds-infoTable__cellContent">
<div class="sds-amount -negative -amountXl">
<span class="sds-amount__value">-165</span>
<span class="sds-amount__currency">€</span>
</div>
</div>
</td>
</tr>
<tr>
<td class="">
<div class="sds-infoTable__cellContent">
<div class="sds-label">
Date de la transaction
</div>
</div>
</td>
<td class="">
<div class="sds-infoTable__cellContent">
<div>
30.09.2021
</div>
</div>
</td>
</tr>
<tr>
<td class="">
<div class="sds-infoTable__cellContent">
<div class="sds-label">
Montant
</div>
</div>
</td>
<td class="">
<div class="sds-infoTable__cellContent">
<div class="sds-amount -negative">
<span class="sds-amount__value">-165</span>
<span class="sds-amount__currency">€</span>
</div>
</div>
</td>
</tr>
<tr>
<td class="">
<div class="sds-infoTable__cellContent">
<div class="sds-label">
Pays
</div>
</div>
</td>
<td class="">
<div class="sds-infoTable__cellContent">
<div>
Luxembourg
</div>
</div>
</td>
</tr>
</tbody>
</table>
</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">
{% if noCategory %}
{% render "@circle--default" %}
{% else %}
{% render "@icon-circle-mia"+product %}
{% endif %}
</div>
</div>
<div class="{{ namespace }}sectionItem__innerCol -grow">
<div class="{{ namespace }}stackXs">
{% render "@amount--negative" %}
{% if transactionIcon %}<span class="{{ namespace }}sectionItem__transactionAmountIcon {{ namespace }}icon {{ namespace }}icon-reload"></span>{% endif %}
<div>{{ communication }}</div>
</div>
</div>
<button class="{{ namespace }}sectionItem__toggle js-sectionItem__toggle" type="button" {% for attrKey, attr in sectionItemToggleOptions %} {{ attrKey }}="{{ attr }}"{% endfor %}>
<span class="sr-only">Show transaction detail</span>
</button>
</div>
<div class="{{ namespace }}sectionItem__collapse collapse" id="{{ collapseID }}" data-parent="{{ parentCollapse }}">
{% render "@snet-section-item-detail",{
communication: sectionItemDetailOptions.communication,
detailToggleOptions: sectionItemDetailOptions.detailToggleOptions,
product: product,
noCategory: noCategory
},true %}
</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 {
}
}