No notes defined.
<div class="sds-transactionBlock sds-box ">
<div class="sds-transactionBlock__inner">
<div class="sds-transactionBlock__row -infoHeader">
<div class="sds-transactionBlock__rowOuter sds-staticStackMd w-100">
<div class="sds-transactionBlock__rowInner">
<span class="sds-btn -iconBtn -btnSecondary -btnSmall">
<span class="sds-icon sds-icon-multipletransfer"></span>
</span>
<div class="sds-transactionBlock__headerInfo d-flex align-items-baseline">
<div>
<div class="sds-textSemiBold">Virement multiple</div>
<div class="sds-textHelper sds-transactionBlock__meta">
Débit {individuel || global}
</div>
</div>
<div>
<div class="sds-textHelper sds-transactionBlock__meta">
Réf. S-Net Business : S-NET #####-###
</div>
<div class="sds-textHelper sds-transactionBlock__meta">
Votre réf. : #################
</div>
</div>
</div>
<div class="ml-auto align-self-center">
<div class="sds-transactionState -paid -textHelper">
<div class="sds-icon sds-icon-checkcircleborder" aria-hidden="true"></div>
<div class="sds-transactionState__text">Comptabilisé</div>
</div>
</div>
</div>
</div>
</div>
<div class="sds-transactionBlock__row -first">
<div class="sds-transactionBlock__rowOuter sds-staticStackMd w-100">
<div class="sds-transactionBlock__rowInner">
<div class="sds-transactionBlock__mainInfo">
<div class="sds-transactionBlock__mainInfoAccount">
<div class="sds-avatar centeredBgi -avatarSm">
<img class="img-fluid" src="../../media/snet/avatars/avatarCactus.png" alt="">
</div>
<div class="sds-stackXxs">
<div>{Account Name}</div>
<div class="sds-transactionBlock__meta sds-textHelper">
LU## ##### ##### #####
</div>
<div class="sds-amount -positive -amountLg">
<span class="sds-amount__value">{+#.###,##}</span>
<span class="sds-amount__currency">€</span>
</div>
</div>
</div>
<div class="d-flex justify-content-end flex-grow-1">
<div class="sds-transactionBlock__col sds-stackXxs text-right">
<div>
<div class="sds-transactionBlock__meta sds-textHelper">
Date d'exécution souhaitée
</div>
<div class="sds-textSemiBold">{DD.MM.YYYY}</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="sds-transactionBlock__row -total">
<div class="sds-transactionBlock__rowOuter sds-staticStackMd w-100">
<div class="sds-transactionBlock__rowInner">
<div class="sds-transactionBlock__colWrapperFixed">
<span class="sds-itemConnector sds-transactionBlock__itemConnector">
</span>
<button type="button" class="sds-btn -iconBtn -btnSecondary -btnSmall sds-transactionBlock__collapseToggle" data-toggle="collapse" data-target="#transactionBlockCollapse-suiviTransactionDetail-1" aria-expanded="true">
<span class="sds-icon sds-icon-plus"></span>
</button>
<div class="sds-transactionBlock__col -amount">
<div class="sds-amount -amountXl">
<span class="sds-amount__value">{+#.###,##}</span>
<span class="sds-amount__currency">€</span>
</div>
</div>
<div class="sds-transactionBlock__col -transactions">
<span class="sds-numberCircle">
2
</span>
<p class="sds-textSemiBold">Transactions</p>
</div>
</div>
</div>
</div>
</div>
<div class="sds-transactionBlock__collapse collapse show" id="transactionBlockCollapse-suiviTransactionDetail-1">
<div class="sds-transactionBlock__collapseInner">
<div class="sds-transactionBlock__row">
<div class="sds-transactionBlock__rowOuter sds-staticStackMd w-100">
<div class="sds-transactionBlock__rowInner">
<div class="sds-transactionBlock__colWrapperFixed">
<span class="sds-itemConnector sds-transactionBlock__itemConnector">
</span>
<div class="sds-transactionBlock__col -amount">
<div class="sds-arrowAmount sds-transactionBlock__arrowAmount">
<div class="sds-arrowAmount__bg">
<div class="sds-amount">
<span class="sds-amount__value">{+#.###,##}</span>
<span class="sds-amount__currency">€</span>
</div>
</div>
</div>
</div>
<div class="sds-transactionBlock__col -account">
<div class="sds-accountInfo">
<div class="sds-avatar centeredBgi -avatarSm">
<img class="img-fluid" src="../../media/snet/avatars/avatarCactus.png" alt="">
</div>
<div class="sds-accountInfo__content">
<p class="sds-accountInfo__title">
<span class="text-truncate">
{Account Name}
</span>
<span class="sds-accountInfo__whitelisted sds-icon sds-icon-badgevalid"></span>
</p>
<p class="sds-accountInfo__meta">LU## #### #### #### ####</p>
</div>
</div>
</div>
</div>
<div class="sds-transactionBlock__col -communication">
<div>{Communication}</div>
</div>
</div>
</div>
</div>
<div class="sds-transactionBlock__row">
<div class="sds-transactionBlock__rowOuter sds-staticStackMd w-100">
<div class="sds-transactionBlock__rowInner">
<div class="sds-transactionBlock__colWrapperFixed">
<span class="sds-itemConnector sds-transactionBlock__itemConnector">
</span>
<div class="sds-transactionBlock__col -amount">
<div class="sds-arrowAmount sds-transactionBlock__arrowAmount">
<div class="sds-arrowAmount__bg">
<div class="sds-amount">
<span class="sds-amount__value">{+#.###,##}</span>
<span class="sds-amount__currency">€</span>
</div>
</div>
</div>
</div>
<div class="sds-transactionBlock__col -account">
<div class="sds-accountInfo">
<div class="sds-avatar centeredBgi -avatarSm">
<img class="img-fluid" src="../../media/snet/avatars/avatarCactus.png" alt="">
</div>
<div class="sds-accountInfo__content">
<p class="sds-accountInfo__title">
<span class="text-truncate">
{Account Name}
</span>
</p>
<p class="sds-accountInfo__meta">LU## #### #### #### ####</p>
</div>
</div>
</div>
</div>
<div class="sds-transactionBlock__col -communication">
{Communication}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="{{ namespace }}transactionBlock {{ namespace }}box {% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}">
<div class="{{ namespace }}transactionBlock__inner">
<div class="{{ namespace }}transactionBlock__row -infoHeader">
<div class="{{ namespace }}transactionBlock__rowOuter {{ namespace }}staticStackMd w-100">
<div class="{{ namespace }}transactionBlock__rowInner">
{% render "@icon-btn-secondary--small",{
icon: "icon-multipletransfer",
eltType: "span"
},true %}
<div class="{{ namespace }}transactionBlock__headerInfo d-flex align-items-baseline">
<div>
<div class="{{ namespace }}textSemiBold">Virement multiple</div>
<div class="{{ namespace }}textHelper {{ namespace }}transactionBlock__meta">
Débit {individuel || global}
</div>
</div>
<div>
<div class="{{ namespace }}textHelper {{ namespace }}transactionBlock__meta">
Réf. S-Net Business : S-NET #####-###
</div>
<div class="{{ namespace }}textHelper {{ namespace }}transactionBlock__meta">
Votre réf. : #################
</div>
</div>
</div>
<div class="ml-auto align-self-center">
{% render "@snet-transaction-state--paid-small" %}
</div>
</div>
</div>
</div>
<div class="{{ namespace }}transactionBlock__row -first{% if accountRowRejected%} -rejected{% elseif accountRowAccepted %} -accepted{% endif %}">
<div class="{{ namespace }}transactionBlock__rowOuter {{ namespace }}staticStackMd w-100">
<div class="{{ namespace }}transactionBlock__rowInner">
<div class="{{ namespace }}transactionBlock__mainInfo">
<div class="{{ namespace }}transactionBlock__mainInfoAccount">
{% render "@avatar--image-small",{
img: "/snet/avatars/avatarCactus.png"
},true %}
<div class="{{ namespace }}stackXxs">
<div>{Account Name}</div>
<div class="{{ namespace }}transactionBlock__meta {{ namespace }}textHelper">
LU## ##### ##### #####
</div>
{% if amountVisible %}
{% render "@amount--large-positive" %}
{% else %}
{% render "@badge--primary-tonal",{text: "Solde non visible"},true %}
{% endif %}
</div>
</div>
<div class="d-flex justify-content-end flex-grow-1">
<div class="{{ namespace }}transactionBlock__col {{ namespace }}stackXxs text-right">
<div>
<div class="{{ namespace }}transactionBlock__meta {{ namespace }}textHelper">
Date d'exécution souhaitée
</div>
<div class="{{ namespace }}textSemiBold">{DD.MM.YYYY}</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="{{ namespace }}transactionBlock__row -total">
<div class="{{ namespace }}transactionBlock__rowOuter {{ namespace }}staticStackMd w-100">
<div class="{{ namespace }}transactionBlock__rowInner">
<div class="{{ namespace }}transactionBlock__colWrapperFixed">
{% render "@snet-item-connector",{classes: [namespace + "transactionBlock__itemConnector"]},true %}
{% set expanded = false %}
{% if shown %}
{% set expanded = true %}
{% else %}
{% set expanded = false %}
{% endif %}
{% render "@icon-btn-secondary--small",{
icon: "icon-plus",
classes: [namespace + "transactionBlock__collapseToggle"],
attrs: {
"data-toggle": "collapse",
"data-target": "#transactionBlockCollapse-"+transactionBlockCollapseID,
"aria-expanded": expanded
}
}, true %}
<div class="{{ namespace }}transactionBlock__col -amount">
{% render "@amount--xtra-large",{
text: "{+#.###,##}"
}, true %}
</div>
<div class="{{ namespace }}transactionBlock__col -transactions">
{% render "@snet-number-circle",{text: "2"},true %}
<p class="{{ namespace }}textSemiBold">Transactions</p>
</div>
</div>
</div>
</div>
</div>
<div class="{{ namespace }}transactionBlock__collapse collapse{% if shown %} show{% endif %}" id="transactionBlockCollapse-{{ transactionBlockCollapseID }}">
<div class="{{ namespace }}transactionBlock__collapseInner">
<div class="{{ namespace }}transactionBlock__row">
<div class="{{ namespace }}transactionBlock__rowOuter {{ namespace }}staticStackMd w-100">
<div class="{{ namespace }}transactionBlock__rowInner">
<div class="{{ namespace }}transactionBlock__colWrapperFixed">
{% render "@snet-item-connector",{classes: [namespace + "transactionBlock__itemConnector"]},true %}
<div class="{{ namespace }}transactionBlock__col -amount">
{% render "@snet-arrow-amount",{classes: [namespace + "transactionBlock__arrowAmount"]},true %}
</div>
<div class="{{ namespace }}transactionBlock__col -account">
{% render "@snet-account-info--small",{
text: "{Account Name}",
whitelisted: true}
,true %}
</div>
</div>
<div class="{{ namespace }}transactionBlock__col -communication">
<div>{Communication}</div>
</div>
</div>
</div>
</div>
<div class="{{ namespace }}transactionBlock__row">
<div class="{{ namespace }}transactionBlock__rowOuter {{ namespace }}staticStackMd w-100">
<div class="{{ namespace }}transactionBlock__rowInner">
<div class="{{ namespace }}transactionBlock__colWrapperFixed">
{% render "@snet-item-connector",{classes: [namespace + "transactionBlock__itemConnector"]},true %}
<div class="{{ namespace }}transactionBlock__col -amount">
{% render "@snet-arrow-amount",{classes: [namespace + "transactionBlock__arrowAmount"]},true %}
</div>
<div class="{{ namespace }}transactionBlock__col -account">
{% render "@snet-account-info--small",{
text: "{Account Name}"
}, true %}
</div>
</div>
<div class="{{ namespace }}transactionBlock__col -communication">
{Communication}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
/* variables specific to current element */
$transaction-block-amount-price-col: $transaction-block-amount-price-col-global;
$transaction-block-account-info-col: $transaction-block-account-info-col-global;
$transaction-block-padding-mobile: $transaction-block-padding-mobile-global;
$transaction-block-padding-desktop: $transaction-block-padding-desktop-global;
$transaction-block-negative-margin: $transaction-block-negative-margin-global;
$transaction-block-row-padding: $transaction-block-row-padding-global;
$transaction-block-row-fixed-col-total-width: $transaction-block-row-fixed-col-total-width-global;
$transaction-block-row-account-avatar-spacing: "md";
$transaction-block-row-has-state-top-spacing: map-deep-get($token-spacer-stack-max-map, "sm");
.#{$namespace}transactionBlock {
/* Save root element context for easy access if nesting is needed */
$self: &;
/* properties of current element + media queries */
@include custom-prop-fallback("padding", "sys-space-inset-horizontal-1000");
@include media-breakpoint-up(lg) {
@include custom-prop-fallback("padding", "sys-space-inset-horizontal-1500");
}
/* 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 */
// transactionBlock__inner
&__inner {
margin: -($transaction-block-negative-margin);
border-radius: map-deep-get($token-radius-map, "8");
}
&__row,
&__rowInner {
display: flex;
align-items: flex-start;
@include spacer-component-inline("lg");
}
&__row {
position: relative;
z-index: z("zero");
padding: $transaction-block-row-padding;
border-radius: map-deep-get($token-radius-map, "16");
&::before {
content: "";
position: absolute;
z-index: z("negative");
top: 0;
bottom: 0;
left: map-deep-get($token-spacer-unit-map, "24");
transform: translateX(-50%);
width: $border-width*2;
@include custom-prop-fallback("background-color", "sys-color-border-primary-moderate");
}
&.-first.-first {
&::before {
height: auto;
top: map-deep-get($token-spacer-stack-max-map, "xxl");
}
}
&:last-child {
&::before {
height: $item-connector-dimensions-global + $border-width;
bottom: auto;
}
}
&.-total {
#{$self}__itemConnector {
display: none;
}
&::before {
bottom: 50%;
}
}
&.-first.-first,
&.-total.-total {
z-index: z("high");
}
&.-infoHeader {
&,
#{$self}__rowInner {
align-items: center;
border-bottom: $border-width solid;
@include custom-prop-fallback("border-color", "sys-color-border-primary-moderate");
padding-bottom: map-deep-get($token-spacer-inset-map, "lg");
padding-left: 0;
padding-right: 0;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
margin-bottom: map-deep-get($token-spacer-inset-map, "sm");
margin-left: map-deep-get($token-spacer-inset-map, "sm");
margin-right: map-deep-get($token-spacer-inset-map, "sm");
@include spacer-component-inline("md");
}
#{$self}__rowInner {
padding: 0;
border-bottom: none;
margin: 0;
}
&::before {
content: none;
}
}
&.-detailFullHeight {
&::before {
height: calc(100% - #{map-deep-get($token-spacer-unit-map,"8")});
}
#{$self}__itemConnector {
align-self: flex-end;
&::before {
top: auto;
bottom: 0;
transform: translate(-50%, 0);
}
&::after {
content: none;
}
}
}
&:not(.-total):not(.-detailFullHeight):not(.-infoHeader):not(.-first):hover {
@media (hover: hover) {
@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");
}
}
}
}
&.-rejected,
&.-accepted {
& + & {
margin-top: $transaction-block-row-has-state-top-spacing;
}
&::before {
top: -($transaction-block-row-has-state-top-spacing);
}
}
&.-rejected {
// follows same logic as base element
@include custom-prop-fallback("background-color", "sys-color-background-secondary-6");
#{$self}__arrowAmount .#{$namespace}amount {
@include custom-prop-fallback("background-color", "sys-color-background-secondary-6");
}
#{$self}__edit,
#{$self}__validate {
visibility: hidden;
}
#{$self}__cancel {
@include custom-prop-fallback("background-color", "sys-color-background-secondary-100");
@include custom-prop-fallback("color", "sys-color-text-neutral-inverse");
}
}
// transactionBlock -dateEdit
// transactionBlock -accepted
&.-accepted {
// follows same logic as base element
@include custom-prop-fallback("background-color", "sys-color-background-status-success-6");
#{$self}__arrowAmount .#{$namespace}amount {
@include custom-prop-fallback("background-color", "sys-color-background-status-success-6");
}
#{$self}__edit,
#{$self}__cancel {
visibility: hidden;
}
#{$self}__validate {
@include custom-prop-fallback("background-color", "sys-color-background-status-success-100");
@include custom-prop-fallback("color", "sys-color-text-neutral-inverse");
}
}
}
&__rowContent {
padding-left: $avatar-small-dimensions-global + map-deep-get($token-spacer-inline-map, $transaction-block-row-account-avatar-spacing);
padding-bottom: map-deep-get($token-spacer-inset-map, "sm");
}
&__mainInfo {
// follows same logic as parent
display: flex;
align-items: flex-start;
justify-content: space-between;
@include spacer-component-inline("lg");
width: 100%;
}
&__mainInfoAccount {
display: flex;
align-items: center;
@include spacer-component-inline($transaction-block-row-account-avatar-spacing);
position: relative;
width: $transaction-block-row-fixed-col-total-width;
flex-shrink: 0;
}
&__meta {
@include custom-prop-fallback("color", "sys-color-text-primary-muted");
}
&__itemConnector {
margin-right: map-deep-get($token-spacer-inline-map, "md");
}
&__misc {
text-align: right;
}
&__headerInfo {
@include spacer-component-inline("lg");
}
&__collapseInner {
padding-top: map-deep-get($token-spacer-unit-map,"8");
#{$self}__row {
&:first-child {
&::before {
top: -(map-deep-get($token-spacer-unit-map,"8"));
}
}
}
}
&__collapseToggle {
margin-right: map-deep-get($token-spacer-inline-map, "md") !important;
&::after {
content: "";
position: absolute;
z-index: z("negative");
top: 50%;
bottom: 0;
left: map-deep-get($token-spacer-unit-map, "24");
transform: translateX(-50%) scaleY(0);
width: $border-width*2;
@include custom-prop-fallback("background-color", "sys-color-border-primary-moderate");
transition: transform 0.025s linear;
transition-delay: $transition-collapse-duration;
}
&[aria-expanded="true"] {
> * {
&::before {
content: map-deep-get($token-icon-map, "minus")
}
}
&::after {
transform: translateX(-50%) scaleY(1);
transition-delay: 0s;
}
}
}
&__arrowAmount {
.#{$namespace}amount {
@include custom-prop-fallback("background-color", "comp-box-background-color");
padding-left: 0;
}
}
&__colWrapperFixed {
display: flex;
align-items: center;
width: $transaction-block-row-fixed-col-total-width;
> * + * {
margin-right: $transaction-block-row-element-horizontal-margin-global;
&:last-child {
margin-right: 0;
}
}
}
&__col {
&.-amount {
width: $transaction-block-amount-price-col;
@include spacer-component-inline("md");
flex-shrink: 0;
}
&.-account {
width: $transaction-block-account-info-col;
//margin-right: map-deep-get($token-spacer-inline-map, "lg");
}
&.-alignEnd {
margin-left: auto;
}
&.-transactions {
display: flex;
align-items: center;
@include spacer-component-inline("md");
}
&.-dateEdit {
display: flex;
@include spacer-component-inline("lg");
}
&.-communication {
min-width: 0;
> * {
@include text-truncate;
}
}
}
&__transactionDataIcon {
margin-left: 0.225em;
}
&__infoTable {
flex-grow: 1;
}
&__footer {
margin-top: map-deep-get($token-spacer-unit-map, "24");
}
/* modifiers */
// transactionBlock -rejected
&.-rejected {
// follows same logic as base element
#{$self}__inner,
#{$self}__arrowAmount .#{$namespace}amount {
@include custom-prop-fallback("background-color", "sys-color-background-secondary-6");
}
#{$self}__edit,
#{$self}__validate {
visibility: hidden;
}
#{$self}__cancel {
@include custom-prop-fallback("background-color", "sys-color-background-secondary-100");
@include custom-prop-fallback("color", "sys-color-text-neutral-inverse");
}
}
// transactionBlock -dateEdit
// transactionBlock -accepted
&.-accepted {
// follows same logic as base element
#{$self}__inner,
#{$self}__arrowAmount .#{$namespace}amount {
@include custom-prop-fallback("background-color", "sys-color-background-status-success-6");
}
#{$self}__edit,
#{$self}__cancel {
visibility: hidden;
}
#{$self}__validate {
@include custom-prop-fallback("background-color", "sys-color-background-secondary-100");
@include custom-prop-fallback("color", "sys-color-text-neutral-inverse");
}
}
&.-notCollapsible {
#{$self}__row.-total {
#{$self}__itemConnector {
display: inline-flex;
}
#{$self}__collapseToggle {
display: none;
}
#{$self}__edit {
display: none;
}
}
}
&.-noValidation {
#{$self}__cancel {
margin-right: 0;
}
#{$self}__validate {
display: none;
}
}
&.-fluidTransactions {
#{$self}__colWrapperFixed {
width: auto;
}
#{$self}__col {
&.-amount {
width: $transaction-block-amount-price-col-global;
}
}
}
/* random parent element */
/*
*
* Syntax : .randomParentElt & {}
*
*/
/* Pseudo Classes */
&:hover {
@media (hover: hover) {
}
}
&:focus {
}
&:active {
}
&:focus,
&:active {
}
}