No notes defined.
<div class="sds-box -insetLg sds-transactionTableBlock">
<div class="sds-transactionTableBlock__header">
<nav>
<ul class="sds-toggleTab list-unstyled nav" id="" role="tablist">
<li class="nav-item" role="presentation">
<button type="button" class="sds-btn -btnSecondary -btnSmall sds-toggleTab__btn -isActive active" id="" data-toggle="tab" data-target="#ordres-a-valider" role="tab" aria-controls="ordres-a-valider" aria-selected="true">
<span class="sds-btn__text">Ordres de virement</span>
<div class="sds-badge badge sds-btn__badge -primary100 -small">
99+
</div>
</button>
</li>
<li class="nav-item" role="presentation">
<button type="button" class="sds-btn -btnSecondary -btnSmall sds-toggleTab__btn" id="" data-toggle="tab" data-target="#ordres-valides" role="tab" aria-controls="ordres-valides" aria-selected="false">
<span class="sds-btn__text">Ordres permanents</span>
</button>
</li>
</li>
</ul>
</nav>
</div>
<div class="sds-transactionTableBlock__tableWrapper">
<div class="tab-content">
<div class="tab-pane fade show active" id="ordres-a-valider" role="tabpanel" aria-labelledby="">
<div class="sds-transactionTableBlock__tableResponsive table-responsive">
<table class="table table-borderless">
<thead>
<tr>
<th class="sds-transactionTableBlock__typeCol text-center">
<div class="sds-transactionTableBlock__heading sds-textHelperSmall">Type</div>
</th>
<th class="sds-transactionTableBlock__accountInfoWidth">
<div class="sds-transactionTableBlock__heading sds-textHelperSmall">Donneur d'ordre</div>
</th>
<th class="sds-transactionTableBlock__amountInfoWidth">
<div class="sds-transactionTableBlock__amountHeaderCol">
<div class="sds-transactionTableBlock__heading sds-textHelperSmall">Montant</div>
</div>
</th>
<th>
<div class="sds-transactionTableBlock__heading sds-textHelperSmall">Bénéficiaire</div>
</th>
<th>
<div class="sds-transactionTableBlock__dateCol d-flex align-items-center">
<div class="sds-transactionTableBlock__heading sds-textHelperSmall">Date de première échéance souhaitée</div>
<span class="sds-icon sds-icon-arrowbottom"></span>
</div>
</th>
<th class="position-relative">
<div class="sds-transactionTableBlock__statusCol d-flex align-items-center">
<div class="sds-transactionTableBlock__heading sds-textHelperSmall">Statut</div>
<button class="d-flex align-items-center stretched-link" type="button" data-toggle="modal" data-target="#statusListModal">
<span class="sds-icon sds-icon-infocircleborder"></span>
<span class="sr-only">Show status list</span>
</button>
</div>
</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
<div class="tab-pane fade" id="ordres-valides" role="tabpanel" aria-labelledby="">
<div class="sds-transactionTableBlock__tableResponsive table-responsive">
<table class="table table-borderless">
<thead>
<tr>
<th class="sds-transactionTableBlock__typeCol text-center">
<div class="sds-transactionTableBlock__heading sds-textHelperSmall">Type</div>
</th>
<th class="sds-transactionTableBlock__accountInfoWidth">
<div class="sds-transactionTableBlock__heading sds-textHelperSmall">Donneur d'ordre</div>
</th>
<th class="sds-transactionTableBlock__amountInfoWidth">
<div class="sds-transactionTableBlock__amountHeaderCol">
<div class="sds-transactionTableBlock__heading sds-textHelperSmall">Montant</div>
</div>
</th>
<th>
<div class="sds-transactionTableBlock__heading sds-textHelperSmall">Bénéficiaire</div>
</th>
<th>
<div class="sds-transactionTableBlock__dateCol d-flex align-items-center">
<div class="sds-transactionTableBlock__heading sds-textHelperSmall">Date de première échéance souhaitée</div>
<span class="sds-icon sds-icon-arrowbottom"></span>
</div>
</th>
<th class="position-relative">
<div class="sds-transactionTableBlock__statusCol d-flex align-items-center">
<div class="sds-transactionTableBlock__heading sds-textHelperSmall">Statut</div>
<button class="d-flex align-items-center stretched-link" type="button" data-toggle="modal" data-target="#statusListModal">
<span class="sds-icon sds-icon-infocircleborder"></span>
<span class="sr-only">Show status list</span>
</button>
</div>
</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<div class="{{ namespace }}box -insetLg {{ namespace }}transactionTableBlock{% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}">
<div class="{{ namespace }}transactionTableBlock__header">
{% render "@toggle-tab--tabs",toggleTabOptions,true %}
</div>
<div class="{{ namespace }}transactionTableBlock__tableWrapper">
<div class="tab-content">
<div class="tab-pane fade show active" id="{{ toggleTabOptions.toggleTabItems[0].target }}" role="tabpanel" aria-labelledby="{{ toggleTabOptions.toggleTabItems[0].id }}">
<div class="{{ namespace }}transactionTableBlock__tableResponsive table-responsive">
<table class="table table-borderless">
<thead>
<tr>
<th class="{{ namespace }}transactionTableBlock__typeCol text-center">
<div class="{{ namespace }}transactionTableBlock__heading {{ namespace }}textHelperSmall">Type</div>
</th>
<th class="{{ namespace }}transactionTableBlock__accountInfoWidth">
<div class="{{ namespace }}transactionTableBlock__heading {{ namespace }}textHelperSmall">Donneur d'ordre</div>
</th>
<th class="{{ namespace }}transactionTableBlock__amountInfoWidth">
<div class="{{ namespace }}transactionTableBlock__amountHeaderCol">
<div class="{{ namespace }}transactionTableBlock__heading {{ namespace }}textHelperSmall">Montant</div>
</div>
</th>
<th>
<div class="{{ namespace }}transactionTableBlock__heading {{ namespace }}textHelperSmall">Bénéficiaire</div>
</th>
<th>
<div class="{{ namespace }}transactionTableBlock__dateCol d-flex align-items-center">
<div class="{{ namespace }}transactionTableBlock__heading {{ namespace }}textHelperSmall">Date de première échéance souhaitée</div>
<span class="{{ namespace }}icon {{ namespace }}icon-arrowbottom"></span>
</div>
</th>
<th class="position-relative">
<div class="{{ namespace }}transactionTableBlock__statusCol d-flex align-items-center">
<div class="{{ namespace }}transactionTableBlock__heading {{ namespace }}textHelperSmall">Statut</div>
<button class="d-flex align-items-center stretched-link" type="button" data-toggle="modal" data-target="#statusListModal">
<span class="{{ namespace }}icon {{ namespace }}icon-infocircleborder"></span>
<span class="sr-only">Show status list</span>
</button>
</div>
</th>
</tr>
</thead>
<tbody>
{% if empty %}
<tr class="{{ namespace }}transactionTableBlock__row">
<td colspan="6">
{% render "@snet-empty-state--no-result",{
icon: "icon-transaction",
text: "Aucun ordre de virement"},true %}
</td>
</tr>
{% else %}
{% for key, row in rowOrdresVirements %}
<tr class="{{ namespace }}transactionTableBlock__row -hasAction{% if row.rowModifier %} {{ row.rowModifier }}{% endif %}">
<td>
<div>
{% render "@icon-btn-secondary-inverse",{
classes: [namespace + "transactionTableBlock__typeBtn"],
icon: row.iconCircleIcon,
eltType: "span",
attrs: {
"data-toggle": "tooltip",
"data-placement" :"top",
"title": row.iconCircleTooltipText
}
},true %}
</div>
</td>
<td class="{{ namespace }}transactionTableBlock__accountInfoWidth">
<div>
{% render "@snet-account-info--meta-small-no-avatar",{
classes: [namespace + "aboveClickArea"]
},true %}
</div>
</td>
<td class="{{ namespace }}transactionTableBlock__amountInfoWidth">
<div>
{% render "@snet-arrow-amount--padding-left-meta",{
classes: [namespace+"transactionTableBlock__arrowAmount"]
},true %}
</div>
</td>
<td>
<div>
{% if row.multiple %}
<div class="{{ namespace }}textSemiBold">
2 bénéficiaires
</div>
{% else %}
{% render "@snet-account-info--meta-small-no-avatar",{
text: "Nemrod Services SA",
meta: "LU98 0384 3094 3248 9348"
},true %}
{% endif %}
</div>
</td>
<td>
<div class="{{ namespace }}transactionTableBlock__dateCol">
<div class="{{ namespace }}stackXxs">
01.02.2023
{% if row.dateMeta %}
<div class="text-truncate {{ namespace }}transactionTableBlock__meta {{ namespace }}textHelperSmall">
{{ row.dateMeta | safe }}
</div>
{% endif %}
</div>
</div>
</td>
<td>
{% render "@snet-transaction-state",{
icon: row.transactionStateIcon,
modifiers: row.transactionStateType,
text: row.transactionStateText,
classes: ["-textHelper"]
},true %}
</td>
<td>
<button class="{{ namespace }}transactionTableBlock__rowAction" data-toggle="modal" data-target="#suiviTransactionsModalDetail-1" data-row-id="tableRow-suivi-{{ loop.index }}">
<span class="sr-only">afficher la modale contenant les détails de la transaction</span>
</button>
</td>
</tr>
{% endfor %}
{% endif %}
</tbody>
</table>
</div>
</div>
<div class="tab-pane fade" id="{{ toggleTabOptions.toggleTabItems[1].target }}" role="tabpanel" aria-labelledby="{{ toggleTabOptions.toggleTabItems[1].id }}">
<div class="{{ namespace }}transactionTableBlock__tableResponsive table-responsive">
<table class="table table-borderless">
<thead>
<tr>
<th class="{{ namespace }}transactionTableBlock__typeCol text-center">
<div class="{{ namespace }}transactionTableBlock__heading {{ namespace }}textHelperSmall">Type</div>
</th>
<th class="{{ namespace }}transactionTableBlock__accountInfoWidth">
<div class="{{ namespace }}transactionTableBlock__heading {{ namespace }}textHelperSmall">Donneur d'ordre</div>
</th>
<th class="{{ namespace }}transactionTableBlock__amountInfoWidth">
<div class="{{ namespace }}transactionTableBlock__amountHeaderCol">
<div class="{{ namespace }}transactionTableBlock__heading {{ namespace }}textHelperSmall">Montant</div>
</div>
</th>
<th>
<div class="{{ namespace }}transactionTableBlock__heading {{ namespace }}textHelperSmall">Bénéficiaire</div>
</th>
<th>
<div class="{{ namespace }}transactionTableBlock__dateCol d-flex align-items-center">
<div class="{{ namespace }}transactionTableBlock__heading {{ namespace }}textHelperSmall">Date de première échéance souhaitée</div>
<span class="{{ namespace }}icon {{ namespace }}icon-arrowbottom"></span>
</div>
</th>
<th class="position-relative">
<div class="{{ namespace }}transactionTableBlock__statusCol d-flex align-items-center">
<div class="{{ namespace }}transactionTableBlock__heading {{ namespace }}textHelperSmall">Statut</div>
<button class="d-flex align-items-center stretched-link" type="button" data-toggle="modal" data-target="#statusListModal">
<span class="{{ namespace }}icon {{ namespace }}icon-infocircleborder"></span>
<span class="sr-only">Show status list</span>
</button>
</div>
</th>
</tr>
</thead>
<tbody>
{% if empty %}
<tr class="{{ namespace }}transactionTableBlock__row">
<td colspan="6">
{% render "@snet-empty-state--no-result",{
icon: "icon-transaction",
text: "Aucun ordre de virement"},true %}
</td>
</tr>
{% else %}
{% for key, row in rowOrdresPermanents %}
<tr class="{{ namespace }}transactionTableBlock__row -hasAction{% if row.rowModifier %} {{ rowModifier }}{% endif %}">
<td>
<div>
{% render "@icon-btn-secondary-inverse",{
classes: [namespace + "transactionTableBlock__typeBtn"],
icon: row.iconCircleIcon,
eltType: "span",
attrs: {
"data-toggle": "tooltip",
"data-placement" :"top",
"title": row.iconCircleTooltipText
}
},true %}
</div>
</td>
<td class="{{ namespace }}transactionTableBlock__accountInfoWidth">
<div>
{% render "@snet-account-info--meta-small-no-avatar" %}
</div>
</td>
<td class="{{ namespace }}transactionTableBlock__amountInfoWidth">
<div>
{% render "@snet-arrow-amount--padding-left-meta",{
classes: [namespace+"transactionTableBlock__arrowAmount"]
},true %}
</div>
</td>
<td>
<div>
{% render "@snet-account-info--meta-small-no-avatar",{
text: "Nemrod Services SA",
meta: "LU98 0384 3094 3248 9348"
},true %}
</div>
</td>
<td>
<div class="{{ namespace }}transactionTableBlock__dateCol">
01.02.2023
{% if row.dateMeta %}
<div class="text-truncate {{ namespace }}transactionTableBlock__meta {{ namespace }}textHelperSmall">
{{ row.dateMeta | safe }}
</div>
{% endif %}
</div>
</td>
<td>
{% render "@snet-transaction-state",{
icon: row.transactionStateIcon,
modifiers: row.transactionStateType,
text: row.transactionStateText,
classes: ["-textHelper"]
},true %}
</td>
<td>
<button class="{{ namespace }}transactionTableBlock__rowAction" data-toggle="modal" data-target="#suiviTransactionsModalDetail-1" data-row-id="tableRow-suivi-tab2-{{ loop.index }}">
<span class="sr-only">afficher la modale contenant les détails de la transaction</span>
</button>
</td>
</tr>
{% endfor %}
{% endif %}
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
/* variables specific to current element */
$transaction-table-block-cell-padding: $transaction-table-block-cell-padding-global;
$transaction-table-block-arrow-amount-bg: $transaction-table-block-arrow-amount-bg-global;
$transaction-table-block-row-negative-margin-mobile: $transaction-table-block-row-negative-margin-mobile-global;
$transaction-table-block-row-negative-margin-desktop: $transaction-table-block-row-negative-margin-desktop-global;
.#{$namespace}transactionTableBlock {
/* 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 {
@keyframes tableRowModifiedBG {
0% {
@include custom-prop-fallback("background-color", "sys-color-text-highlight-muted");
}
100% {
@include custom-prop-fallback("background-image", "sys-color-elevation-surface-flat");
}
}
}
/* children - write selector in full in comments in order to facilitate search */
&__header {
padding-bottom: map-deep-get($token-spacer-inset-map, "lg");
}
&__heading {
@include custom-prop-fallback("color", "sys-color-text-primary-vivid");
font-weight: map-deep-get($token-font-weight-map, "bold");
font-family: map-deep-get($token-font-family-map, "text");
}
&__tableWrapper {
margin: 0 (-($transaction-table-block-row-negative-margin-mobile)) (-($transaction-table-block-row-negative-margin-mobile)) (-($transaction-table-block-row-negative-margin-mobile));
@include media-breakpoint-up(lg) {
margin: 0 (-($transaction-table-block-row-negative-margin-desktop)) (-($transaction-table-block-row-negative-margin-desktop)) (-($transaction-table-block-row-negative-margin-desktop));
}
}
&__tableResponsive {
padding: 0 $transaction-table-block-row-negative-margin-mobile;
@include media-breakpoint-up(lg) {
padding: 0 $transaction-table-block-row-negative-margin-desktop;
}
}
TR TH,
TR TD {
/* @TODO remove when old styles are not needed */
padding-left: $transaction-table-block-cell-padding !important;
padding-right: $transaction-table-block-cell-padding !important;
}
TR TD {
vertical-align: top !important;
}
TR TH {
padding-top: 0 !important;
border-bottom: $border-width solid $border-color !important;
}
THEAD TH {
vertical-align: middle !important;
}
&__row.-hasAction,
TR {
position: relative;
z-index: z("zero");
&.-isDeleted,
&.-isValidated {
#{$self}__rowAction {
pointer-events: none;
&::before {
border-color: transparent !important;
}
}
}
&.-isDeleted {
#{$self}__rowAction {
&::before {
@include custom-prop-fallback("background-color", "sys-color-background-status-danger-6",true,true);
}
}
#{$self}__arrowAmount {
.#{$namespace}amount {
@include custom-prop-fallback("background-color", "sys-color-background-status-danger-6",true,true);
}
}
}
&.-isValidated {
#{$self}__rowAction {
&::before {
@include custom-prop-fallback("background-color", "sys-color-background-status-success-6",true,true);
}
}
#{$self}__arrowAmount {
.#{$namespace}amount {
@include custom-prop-fallback("background-color", "sys-color-background-status-success-6",true,true);
}
}
}
TD:first-of-type,
TH:first-of-type {
padding-left: 0 !important;
}
TD:last-of-type,
TH:last-of-type {
padding-right: 0 !important;
}
TD:last-of-type {
padding-left: 0 !important;
padding-right: 0 !important;
}
}
&__row {
&.-hasAction {
&:hover {
#{$self}__rowAction {
&::before {
@include custom-prop-fallback("background-color", "sys-color-background-primary-6");
}
}
#{$self}__arrowAmount {
.#{$namespace}amount {
@include custom-prop-fallback("background-color", "sys-color-background-primary-6");
}
}
}
}
}
//max-width: 220px on column 2
//max-width: 260px; column 3
// transactionTableBlock__accountInfoWidth
&__accountInfoWidth {
// follows same logic as parent
width: 220px + ($transaction-table-block-cell-padding*2);
}
// transactionTableBlock__amountInfoWidth
&__amountInfoWidth {
// follows same logic as parent
width: 260px + ($transaction-table-block-cell-padding*2);
}
&__typeCol {
width: map-deep-get($token-sizes-unit-map, "56");
}
&__amountHeaderCol {
padding-left: $arrowm-amount-offset-left-global + $transaction-table-block-cell-padding !important;
min-width: 220px;
}
&__dateCol {width: 150px;}
&__rowAction {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: map-deep-get($token-radius-map, "16");
width: 100%;
&::before {
content: "";
position: absolute;
z-index: z("negative");
top: 0;
left: -($transaction-table-block-row-negative-margin-mobile);
right: -($transaction-table-block-row-negative-margin-mobile);
bottom: 0;
border-radius: map-deep-get($token-radius-map, "16");
@include media-breakpoint-up(lg) {
left: -($transaction-table-block-row-negative-margin-desktop);
right: -($transaction-table-block-row-negative-margin-desktop);
}
}
&:hover{
&::before {
background-color: $transaction-table-block-arrow-amount-bg;
border: 0 !important;
}
}
&:focus {
&::before {
top: $border-width*2;
bottom: $border-width*2;
border: $border-width*2 solid $border-color;
}
}
}
&__dateCol,
&__statusCol {
@include spacer-component-inline("sm");
[class*="icon"] {
&::before {
font-size: 1em;
}
}
}
&__dateCol {
[class*="icon"] {
&::before {
@include custom-prop-fallback("color", "sys-color-background-neutral-100");
}
}
}
&__statusCol {}
&__typeBtn {
position: relative;
z-index: z("low");
}
&__meta {
@include custom-prop-fallback("color", "sys-color-text-primary-muted");
}
/* modifiers */
// transactionTableBlock -altStyle
&.-altStyle {
// follows same logic as base element
}
/* random parent element */
/*
*
* Syntax : .randomParentElt & {}
*
*/
/* Pseudo Classes */
&:hover {
@media (hover: hover) {
}
}
&:focus {
}
&:active {
}
&:focus,
&:active {
}
}