Transaction Block: Default

No notes defined.

<div class="sds-transactionBlock sds-box ">
    <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">
                                <div>
                                    <div class="sds-transactionBlock__meta sds-textHelper">
                                        Date d'exécution
                                    </div>
                                    <div class="sds-textSemiBold">23.03.2022</div>
                                </div>

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

                        <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>
{% 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--smaller",{
							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>
  • 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