Transaction Block: Transaction Chain Item

Ready

Notes
HTML
View
Info
Assets

No notes defined.


        
        <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 -positive -amountLg">
                                    <span class="sds-amount__value">{+#.###,##}</span>

                                    <span class="sds-amount__currency">€</span>

                                </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 -amountXl">
                                <span class="sds-amount__value">335,30</span>

                                <span class="sds-amount__currency">€</span>

                            </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">
                                                <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">
                                                    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">

                            <span class="sds-icon sds-icon-plus"></span>

                            <span class="sds-btn__text">Ajouter transaction</span>

                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>


        {% if rowRejected %}
	{% set hasItemCircle = true %}
	{% set itemConnectorClasses = [namespace + "transactionBlock__itemConnector", "-noBranching"] %}
	{% set itemConnectorIconCircleOptions =  {
		classes: ["-primary100", "-smaller"],
		icon: ["icon-cross"]
	} %}
{% elseif rowAccepted %}
	{% set hasItemCircle = true %}
	{% set itemConnectorClasses = [namespace + "transactionBlock__itemConnector", "-noBranching"] %}
	{% set itemConnectorIconCircleOptions =  {
		classes: ["-success100", "-smaller"],
		icon: ["icon-check"]
	} %}
{% else %}
	{% set hasItemCircle = false %}
	{% set itemConnectorClasses = [namespace + "transactionBlock__itemConnector"] %}
{% endif %}
<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 -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>Compte Epicerie Fournisseurs</div>
								<div class="{{ namespace }}transactionBlock__meta {{ namespace }}textHelper">
									LU63 0000 2200 3300 4400
								</div>
								{% render "@amount--large-positive" %}
							</div>
						</div>
						<div class="d-flex justify-content-between flex-grow-1">
							<div class="{{ namespace }}transactionBlock__col {{ namespace }}stackXxs">
								<div class="{{ namespace }}transactionBlock__meta {{ namespace }}textHelper">Encodeur</div>
								{% render "@snet-avatar-text--extra-small" %}
							</div>
							<div class="{{ namespace }}transactionBlock__col {{ namespace }}stackXxs text-right{% if dateEdit %} -dateEdit{% endif %}">
								<div>
									<div class="{{ namespace }}transactionBlock__meta {{ namespace }}textHelper">
										Date d'exécution
									</div>
									<div class="{{ namespace }}textSemiBold">23.03.2022</div>
								</div>
								{% if dateEdit %}{% render "@icon-btn-secondary",{claases: [namespace+"transactionBlock__dateEdit"],icon: "icon-edit"},true %}{% endif %}
							</div>
						</div>
					</div>
				</div>
				{% if additionalContent %}
				<div class="{{ namespace }}transactionBlock__rowContent {{ namespace }}staticStackMd">
					{% if alert %}
					{% render "@snet-alert--primary-30",{
						text: "Le compte séléctionné n’est pas {error notification}",
						dismissible: false
					},true %}
					{% endif %}
				</div>
				{% endif %}
			</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" %}
						</div>
						<div class="{{ namespace }}transactionBlock__col -transactions">
							{% render "@snet-number-circle",{text: "2"},true %}
							<div class="h4">Transactions</div>
						</div>
					</div>
					{% if totalActions %}
						<div class="{{ namespace }}transactionBlock__col -alignEnd">
							<div class="{{ namespace }}btnGroup">
								{% render "@icon-btn-secondary",{
									icon: "icon-edit",
									classes: [namespace + "transactionBlock__edit"]
								}, true %}
								{% render "@icon-btn-secondary",{
									icon: "icon-cross",
									classes: [namespace + "transactionBlock__cancel"]
								}, true %}
								{% render "@icon-btn-secondary",{
									icon: "icon-check",
									classes: [namespace + "transactionBlock__validate"]
								}, true %}
							</div>
						</div>
					{% endif %}
				</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{% if rowRejected %} -rejected{% elseif rowAccepted %} -accepted{% endif %}">
					<div class="{{ namespace }}transactionBlock__rowOuter {{ namespace }}staticStackMd w-100">
						<div class="{{ namespace }}transactionBlock__rowInner">
							<div class="{{ namespace }}transactionBlock__colWrapperFixed">
								{% render "@snet-item-connector",{
									classes: itemConnectorClasses,
									iconCircle: hasItemCircle,
									iconCircleOptions: itemConnectorIconCircleOptions
								},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" %}
								</div>
							</div>
							<div class="{{ namespace }}transactionBlock__col -communication">
								<div>MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM</div>
								<div>Facture 239284</div>
								<div>Facture 239284</div>
								<div>Facture 239284</div>
							</div>
							{% if additionalRowActions %}
								<div class="{{ namespace }}transactionBlock__col -alignEnd">
									<div class="{{ namespace }}btnGroup">
										{% render "@icon-btn-secondary",{
											icon: "icon-edit",
											classes: [namespace + "transactionBlock__edit"]
										}, true %}
										{% render "@icon-btn-secondary",{
											icon: "icon-cross",
											classes: [namespace + "transactionBlock__cancel"]
										}, true %}
									</div>
								</div>
							{% endif %}
						</div>
						{% if additionalContent or rowRejected %}
							<div class="{{ namespace }}transactionBlock__rowContent">
								{% if alert %}
								{% render "@snet-alert--primary-30",{
									text: "Le compte séléctionné n’est pas {error notification}",
									dismissible: false
								},true %}
								{% endif %}
								{% if reference %}
								<div class="{{ namespace }}transactionBlock__meta {{ namespace }}textHelper">Réf. : { ############### } ・Transaction validée par {user} le {dd.mm.yyyy} à {hh:mm}</div>
								{% endif %}
							</div>
						{% endif %}
					</div>
				</div>
				{% if additionalTransaction %}
					<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: itemConnectorClasses,
										iconCircle: hasItemCircle,
										iconCircleOptions: itemConnectorIconCircleOptions
									},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" %}
									</div>
								</div>
								<div class="{{ namespace }}transactionBlock__col">
									Facture 239284
								</div>
								{% if additionalRowActions %}
									<div class="{{ namespace }}transactionBlock__col -alignEnd">
										<div class="{{ namespace }}btnGroup">
											{% render "@icon-btn-secondary",{
												icon: "icon-edit",
												classes: [namespace + "transactionBlock__edit"]
											}, true %}
											{% render "@icon-btn-secondary",{
												icon: "icon-cross",
												classes: [namespace + "transactionBlock__cancel"]
											}, true %}
										</div>
									</div>
								{% endif %}
							</div>
							{% if additionalContent or rowRejected %}
								<div class="{{ namespace }}transactionBlock__rowContent">
									{% if alert %}
										{% render "@snet-alert--primary-30",{
											text: "Le compte séléctionné n’est pas {error notification}",
											dismissible: false
										},true %}
									{% endif %}
									{% if reference %}
										<div class="{{ namespace }}transactionBlock__meta {{ namespace }}textHelper">Réf. : { ############### } ・Transaction validée par {user} le {dd.mm.yyyy} à {hh:mm}</div>
									{% endif %}
								</div>
							{% endif %}
						</div>
					</div>
				{% endif %}
			</div>
		</div>
	</div>
	{% if isTransactionChainItem %}
		<div class="js-transactionChainOperations collapse{% if transactionBlockTransactionChaincollapsesShown %}{% else %} show{% endif %}">
			<div class="{{ namespace }}transactionBlock__footer">
				<div class="row no-bottom-gutter">
					<div class="col-12">
						<div class="d-flex justify-content-end">
							{% render "@btn-secondary--icon-left",{
								icon: "icon-plus",
								text: "Ajouter transaction",
								attrs: transactionBlockTransactionChainAttrs
							},true %}
						</div>
					</div>
				</div>
			</div>
		</div>
	{% endif %}
</div>

Handle: @snet-transaction-block--transaction-chain-item
Preview:
- With layout
- Component only
Filesystem Path: components/snet/organisms/transaction-block/transaction-block.njk
References (12): @avatar--image-small, @amount--large-positive, @snet-avatar-text--extra-small, @icon-btn-secondary, @snet-alert--primary-30, @snet-item-connector, @icon-btn-secondary--small, @amount--xtra-large, @snet-number-circle, @snet-arrow-amount, @snet-account-info--small, @btn-secondary--icon-left
Referenced by (2): @snet-transaction-chain, @snet-transaction-chain--validate

File:

Content:


                                /* 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 {
	}

}

URL: /components/raw/snet-transaction-block/_transaction-block.scss
Filesystem Path: components/snet/organisms/transaction-block/_transaction-block.scss
Size: 10.4 KB