<div class="sds-transactionChain">
<div class="sds-transactionChain__transactions">
<div class="sds-transactionBlock sds-box -noValidation">
<div class="sds-transactionBlock__inner">
<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>Compte Epicerie Fournisseurs</div>
<div class="sds-transactionBlock__meta sds-textHelper">
LU63 0000 2200 3300 4400
</div>
<div class="sds-amount -amountPositive -amountLg">
<div class="sds-amount__body">
<span class="sds-amount__value">{+#.###,##}</span>
<span class="sds-amount__currency">€</span>
</div>
</div>
</div>
</div>
<div class="d-flex justify-content-between flex-grow-1">
<div class="sds-transactionBlock__col sds-stackXxs">
<div class="sds-transactionBlock__meta sds-textHelper">Encodeur</div>
<div class="sds-avatarText -small">
<div class="sds-avatar centeredBgi -xtraSmall">
<img class="img-fluid" src="../../media/snet/avatars/avatarUser.png" alt="">
</div>
<div class="sds-avatarText__content">
<div class="sds-textSemiBold">Jil Schmit</div>
</div>
</div>
</div>
<div class="sds-transactionBlock__col sds-stackXxs text-right -dateEdit">
<div>
<div class="sds-transactionBlock__meta sds-textHelper">
Date d'exécution
</div>
<div class="sds-textSemiBold">23.03.2022</div>
</div>
<button type="button" class="sds-btn -iconBtn -btnSecondary">
<span class="sds-icon sds-icon-edit"></span>
</button>
</div>
</div>
</div>
</div>
<div class="sds-transactionBlock__rowContent sds-staticStackMd">
</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-date-edit" aria-expanded="true">
<span class="sds-icon sds-icon-plus"></span>
</button>
<div class="sds-transactionBlock__col -amount">
<div class="sds-amount -amountNeutral -amountXl">
<div class="sds-amount__body">
<span class="sds-amount__value">{#.###,##}</span>
<span class="sds-amount__currency">€</span>
</div>
</div>
</div>
<div class="sds-transactionBlock__col -transactions">
<span class="sds-numberCircle">
2
</span>
<div class="h4">Transactions</div>
</div>
</div>
</div>
</div>
</div>
<div class="sds-transactionBlock__collapse collapse show" id="transactionBlockCollapse-date-edit">
<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">
<div class="sds-amount__body">
<span class="sds-amount__value">{+#.###,##}</span>
<span class="sds-amount__currency">€</span>
</div>
</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">
Kant Institution
</span>
</p>
<p class="sds-accountInfo__meta">LU## #### #### #### ####</p>
</div>
</div>
</div>
</div>
<div class="sds-transactionBlock__col -communication">
<div>MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM</div>
<div>Facture 239284</div>
<div>Facture 239284</div>
<div>Facture 239284</div>
</div>
<div class="sds-transactionBlock__col -alignEnd">
<div class="sds-btnGroup">
<button type="button" class="sds-btn -iconBtn -btnSecondary sds-transactionBlock__edit">
<span class="sds-icon sds-icon-edit"></span>
</button>
<button type="button" class="sds-btn -iconBtn -btnSecondary sds-transactionBlock__cancel">
<span class="sds-icon sds-icon-cross"></span>
</button>
</div>
</div>
</div>
<div class="sds-transactionBlock__rowContent">
<div class="sds-transactionBlock__meta sds-textHelper">Réf. : { ############### } ・Transaction validée par {user} le {dd.mm.yyyy} à {hh:mm}</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="js-transactionChainOperations collapse show">
<div class="sds-transactionBlock__footer">
<div class="row no-bottom-gutter">
<div class="col-12">
<div class="d-flex justify-content-end">
<button type="button" class="sds-btn -btnSecondary" data-toggle="collapse" data-target=".js-transactionChainOperations">
<span class="sds-icon sds-icon-plus"></span>
<span class="sds-btn__text">Ajouter transaction</span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="js-transactionChainOperations sds-transactionChain__operationsCollapse collapse">
<div class="sds-transactionChain__operations sds-box -insetLg">
<div class="row row-sm">
<div class="col-6">
<div class="sds-stepInput">
<div class="sds-stepInput__item">
<div class="sds-stepInput__stepIcon">
<div class="sds-stepInput__circle">
<span class="sds-iconCircle -secondary100Outline -small" aria-hidden="true">
<span class="sds-icon sds-icon-euro"></span>
</span>
</div>
</div>
<div class="sds-stepInput__input">
<div class="form-group">
<label for="" class="sds-label -labelForm">
Montant
</label>
<div class="sds-input -hasShadow">
<input id="" class="sds-input form-control" type="number" placeholder="0" value="4000">
<div class="sds-input__shadowInput form-control" aria-hidden="true">
<div class="sds-input__shadowValue">
4000
</div>
<div class="sds-input__shadowCurrency">
€
</div>
</div>
</div>
</div>
</div>
</div>
<div class="sds-stepInput__item">
<div class="sds-stepInput__stepIcon">
<div class="sds-stepInput__circle">
<div class="sds-avatar centeredBgi -avatarSm -bank">
<span class="sds-icon sds-icon-instrument"></span>
</div>
</div>
</div>
<div class="sds-stepInput__input">
<div class="form-group">
<label for="" class="sds-label -labelForm">
Compte bénéficiaire
</label>
<div class="sds-input -autocomplete">
<input class="sds-input form-control" type="text" placeholder="Sélectionnez un compte" value="">
<div class="sds-input__autocomplete">
<form class="sds-input__autocompleteInner sds-box -insetLg sds-stackMd" action="">
<div class="h3">Comptes de la société</div>
<div class="sds-stackSm">
<div class="h4">Comptes et cartes</div>
<div class="sds-accountSelector__dropdownSection sds-stackSm">
<div class="sds-accountCard sds-showCustomIndicatorHover">
<label class="sds-accountCard__inner">
<input value="radio-value" type="radio" name="radio-name" class="sr-only sds-accountCard__input" id="" checked><span class="sds-radioDot sds-accountCard__checkItem" aria-hidden="true"></span>
<div class="sds-avatar centeredBgi -avatarSm">
<img class="img-fluid" src="../../media/snet/avatars/avatarUser.png" alt="">
</div>
<span class="sds-accountCard__content sds-stackXs">
<div>
Jil Schmit
</div>
<span class="sds-textHelper sds-accountCard__meta">
compte courant
</span>
</span>
<div class="sds-amount -amountPositive -amountLg">
<div class="sds-amount__body">
<span class="sds-amount__value">{+#.###,##}</span>
<span class="sds-amount__currency">€</span>
</div>
</div>
</label>
</div>
<div class="sds-accountCard sds-showCustomIndicatorHover">
<label class="sds-accountCard__inner">
<input value="radio-value" type="radio" name="radio-name" class="sr-only sds-accountCard__input" id=""><span class="sds-radioDot sds-accountCard__checkItem" aria-hidden="true"></span>
<div class="sds-avatar centeredBgi -avatarSm">
<img class="img-fluid" src="../../media/snet/avatars/avatarUser.png" alt="">
</div>
<span class="sds-accountCard__content sds-stackXs">
<div>
Jil Schmit
</div>
<span class="sds-textHelper sds-accountCard__meta">
compte courant
</span>
</span>
<div class="sds-amount -amountPositive -amountLg">
<div class="sds-amount__body">
<span class="sds-amount__value">{+#.###,##}</span>
<span class="sds-amount__currency">€</span>
</div>
</div>
</label>
</div>
<div class="sds-accountCard sds-showCustomIndicatorHover">
<label class="sds-accountCard__inner">
<input value="radio-value" type="radio" name="radio-name" class="sr-only sds-accountCard__input" id=""><span class="sds-radioDot sds-accountCard__checkItem" aria-hidden="true"></span>
<div class="sds-avatar centeredBgi -avatarSm">
<img class="img-fluid" src="../../media/snet/avatars/avatarUser.png" alt="">
</div>
<span class="sds-accountCard__content sds-stackXs">
<div>
Jil Schmit
</div>
<span class="sds-textHelper sds-accountCard__meta">
compte courant
</span>
</span>
<div class="sds-amount -amountPositive -amountLg">
<div class="sds-amount__body">
<span class="sds-amount__value">{+#.###,##}</span>
<span class="sds-amount__currency">€</span>
</div>
</div>
</label>
</div>
<div class="sds-accountCard sds-showCustomIndicatorHover">
<label class="sds-accountCard__inner">
<input value="radio-value" type="radio" name="radio-name" class="sr-only sds-accountCard__input" id=""><span class="sds-radioDot sds-accountCard__checkItem" aria-hidden="true"></span>
<div class="sds-avatar centeredBgi -avatarSm">
<img class="img-fluid" src="../../media/snet/avatars/avatarUser.png" alt="">
</div>
<span class="sds-accountCard__content sds-stackXs">
<div>
Jil Schmit
</div>
<span class="sds-textHelper sds-accountCard__meta">
compte courant
</span>
</span>
<span class="sds-badge badge -badgePrimary -badgeTonal">
non visible
</span>
</label>
</div>
<div class="sds-accountCard sds-showCustomIndicatorHover">
<label class="sds-accountCard__inner">
<input value="radio-value" type="radio" name="radio-name" class="sr-only sds-accountCard__input" id=""><span class="sds-radioDot sds-accountCard__checkItem" aria-hidden="true"></span>
<div class="sds-avatar centeredBgi -avatarSm">
<img class="img-fluid" src="../../media/snet/avatars/avatarUser.png" alt="">
</div>
<span class="sds-accountCard__content sds-stackXs">
<div>
Jil Schmit
</div>
<span class="sds-textHelper sds-accountCard__meta">
compte courant
</span>
</span>
<span class="sds-badge badge -badgePrimary -badgeTonal">
non visible
</span>
</label>
</div>
</div>
</div>
<div class="sds-stackSm">
<div class="h4">Epargne</div>
<div class="sds-accountSelector__dropdownSection sds-stackSm">
<div class="sds-accountCard sds-showCustomIndicatorHover">
<label class="sds-accountCard__inner">
<input value="radio-value" type="radio" name="radio-name" class="sr-only sds-accountCard__input" id=""><span class="sds-radioDot sds-accountCard__checkItem" aria-hidden="true"></span>
<div class="sds-avatar centeredBgi -avatarSm">
<img class="img-fluid" src="../../media/snet/avatars/avatarUser.png" alt="">
</div>
<span class="sds-accountCard__content sds-stackXs">
<div>
Jil Schmit
</div>
<span class="sds-textHelper sds-accountCard__meta">
compte courant
</span>
</span>
<div class="sds-amount -amountPositive -amountLg">
<div class="sds-amount__body">
<span class="sds-amount__value">{+#.###,##}</span>
<span class="sds-amount__currency">€</span>
</div>
</div>
</label>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-5">
<div class="form-group">
<label for="" class="sds-label -labelForm">
Communication
</label>
<div class="sds-input -multiple">
<input class="sds-input__field form-control" type="text" placeholder="Entrez une communication" value="Facture-986954857">
<input class="sds-input__field form-control" type="text" placeholder="" value="">
<input class="sds-input__field form-control" type="text" placeholder="" value="">
<input class="sds-input__field form-control" type="text" placeholder="" value="">
</div>
</div>
<div class="form-group d-flex flex-grow-1">
<div class="d-flex align-items-end justify-content-end flex-grow-1">
<button type="button" class="sds-btn -btnSecondary" disabled="">
<span class="sds-icon sds-icon-check"></span>
<span class="sds-btn__text">Enregistrer transaction</span>
</button>
</div>
</div>
</div>
<div class="col text-right">
<button type="button" class="sds-btn -iconBtn -btnSecondary" data-toggle="collapse" data-target=".js-transactionChainOperations">
<span class="sds-icon sds-icon-cross"></span>
</button>
</div>
</div>
</div>
</div>
</div>
<div class="{{ namespace }}transactionChain">
<div class="{{ namespace }}transactionChain__transactions">
{% render "@snet-transaction-block--transaction-chain-item",
{
additionalTransaction: additionalTransaction,
transactionBlockTransactionChaincollapsesShown: collapsesShown,
transactionBlockTransactionChainAttrs: {
"data-toggle": "collapse",
"data-target": ".js-transactionChainOperations"
}
},true %}
</div>
<div class="js-transactionChainOperations {{ namespace }}transactionChain__operationsCollapse collapse{% if collapsesShown %} show{% endif %}">
<div class="{{ namespace }}transactionChain__operations {{ namespace }}box -insetLg">
<div class="row row-sm">
<div class="col-6">
{% render "@snet-step-input--two"+stepInputState %}
</div>
<div class="col-5">
<div class="form-group">
{% render "@label--form",{text: "Communication"},true %}
{% render "@input--multiple",{
value: "Facture-986954857"
},true %}
</div>
<div class="form-group d-flex flex-grow-1">
<div class="d-flex align-items-end justify-content-end flex-grow-1">
{% if confirmationBtnState === "disabled" %}
{% set btnAttrs = {
disabled: disabled
} %}
{% else %}
{% set btnAttrs = null %}
{% endif %}
{% render "@btn-secondary--icon-left",{
icon: "icon-check",
text: "Enregistrer transaction",
attrs: btnAttrs
},true %}
</div>
</div>
</div>
<div class="col text-right">
{% render "@icon-btn-secondary",{
icon: "icon-cross",
attrs: {
"data-toggle": "collapse",
"data-target": ".js-transactionChainOperations"
}
},true %}
</div>
</div>
</div>
</div>
</div>
/* variables specific to current element */
$transaction-chain-item-inset-mobile: $transaction-block-padding-mobile-global;
$transaction-chain-item-inset-desktop: $transaction-block-padding-desktop-global;
$transaction-chain-stack-level: "md";
$transaction-chain-stack: map-deep-get($token-spacer-inset-map, $transaction-chain-stack-level);
.#{$namespace}transactionChain {
/* Save root element context for easy access if nesting is needed */
$self: &;
/* properties of current element + media queries */
@include spacer-component-stack($transaction-chain-stack-level);
/* 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 */
// transactionChain__transactions
&__transactions {
.#{$namespace}transactionBlock__row {
z-index: z("medium"); //needed in order for the pseudo element of the operations block to not go over the collapse toggle btn
}
}
// transactionChain__operations
&__operations {
// follows same logic as parent
position: relative;
z-index: z("medium");
.#{$namespace}stepInput__item:first-of-type .#{$namespace}stepInput__stepIcon {
&::after {
transition: top 0.15s linear
}
}
}
&__operationsCollapse {
&.show {
.#{$namespace}stepInput__item:first-of-type .#{$namespace}stepInput__stepIcon {
&::after {
top: -((map-deep-get($token-spacer-unit-map, "64")*2) + $transaction-chain-stack*2.5);
}
}
}
}
/* modifiers */
&.-operationsShown {
.#{$namespace}transactionBlock__row:last-child {
&::before {
bottom: 0;
}
}
.#{$namespace}stepInput__item:first-of-type .#{$namespace}stepInput__stepIcon {
&::after {
top: -(($transaction-chain-item-inset-mobile*2) + $transaction-chain-stack);
@include media-breakpoint-up(lg) {
top: -(($transaction-chain-item-inset-desktop*2) + $transaction-chain-stack);
}
}
}
}
/* random parent element */
/*
*
* Syntax : .randomParentElt & {}
*
*/
/* Pseudo Classes */
&:hover {
@media (hover: hover) {
}
}
&:focus {
}
&:active {
}
&:focus,
&:active {
}
}