Sitfin Card: Loading

No notes defined.

<div class="sds-sitfinCard -rounded">
    <div class="sds-sitfinCard__header">
        <div class="sds-accountInfo">

            <div class="sds-accountInfo__content">
                <p class="sds-accountInfo__title">
                    <span class="text-truncate">
                        {Card Name}
                    </span>

                </p>
                <p class="sds-accountInfo__meta">LU## #### #### #### ####</p>

            </div>
        </div>

        <div class="dropdown">
            <button type="button" class="sds-btn -iconBtn -btnSecondary -ghost sds-sitfinCard__action" data-reference="parent" data-boundary="window" data-toggle="dropdown">

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

            </button>
            <div aria-labelledby="" class="sds-actionMenu dropdown-menu dropdown-menu-right">

                <a href="" class="sds-actionMenu__item dropdown-item">

                    Item 1

                </a>

                <a href="" class="sds-actionMenu__item dropdown-item">

                    Item 2

                </a>

                <a href="" class="sds-actionMenu__item dropdown-item">

                    Item 3

                </a>

            </div>
        </div>

    </div>

    <div class="sds-sitfinCard__footer">
        <div class="sds-sitfinCard__footerBlockStart">

            <div class="sds-sitfinCard__loader"></div>

        </div>

        <div class="sds-badge badge -primary10 -stock">

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

            badge
        </div>

    </div>
    <span class="sds-dot sds-sitfinCard__dotBefore"></span>
    <span class="sds-dot sds-sitfinCard__dotAfter"></span>
</div>
{% if externalIcon %}
	{% set iconPath = icon %}
{% else %}
	{% set iconPath = (mediaPath + icon) | path %}
{% endif %}
<div class="{{ namespace }}sitfinCard{% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}">
	<div class="{{ namespace }}sitfinCard__header">
		{% render "@snet-account-info--no-avatar",{
			text: accountInfoTitle,
			meta: accountInfoMeta
		},true %}
		{% if dropdown %}
			<div class="dropdown">
				{% render "@icon-btn-secondary--ghost",{
					icon: "icon-more",
					classes: [namespace + "sitfinCard__action"],
					attrs: {
						"data-reference": "parent",
						"data-boundary": "window",
						"data-toggle": "dropdown"
					}
				},true %}
				{% render "@snet-action-menu",{classes: ["dropdown-menu-right"]},true %}
			</div>
		{% else %}
		{% render "@icon-btn-secondary--ghost",{
			icon: "icon-cross",
			classes: [namespace + "sitfinCard__action"]
		},true %}
		{% endif %}
	</div>
	{% if middleIcon %}
	<div class="{{ namespace }}sitfinCard__middle{% if middleIcon.line %} -hasSeparator{% endif %}">
		<div class="{{ namespace }}sitfinCard__middleIcon"{% if visa %} data-toggle="tooltip" data-placement="bottom" title="Visa Debit"{% endif %}>
			<img class="img-fluid" src="{{ iconPath }}" alt="">
		</div>
	</div>
	{% endif %}
	<div class="{{ namespace }}sitfinCard__footer">
		<div class="{{ namespace }}sitfinCard__footerBlockStart">
			{% if action %}
				{% render "@btn-secondary--small",{text: "Afficher"},true  %}
			{% elseif loading %}
				<div class="{{ namespace }}sitfinCard__loader"></div>
			{% else %}
				<div class="text-truncate">
					{% if warning %}
						<span class="{{ namespace }}sitfinCard__alert {{ namespace }}icon {{ namespace }}icon-alert"></span>
					{% endif %}
					{% if amountNegative %}
					{% render "@amount--large-negative",{text: "{-#.###,##}"},true %}
						{% else %}
					{% render "@amount--large-positive",{text: "{+#.###,##}"},true %}
					{% endif %}
					{% if footerHelper %}
						<span class="{{ namespace }}sitfinCard__helper {{ namespace }}textHelper">{{ footerHelper }}</span>
					{% endif %}
				</div>
				{% if footerHelperAdditional %}
					{% for key, item in footerHelperAdditional %}
						<div>
							<div class="text-truncate w-100 {{ namespace }}sitfinCard__helper {{ namespace }}textHelper">{{ item.text }}</div>
						</div>
					{% endfor %}
				{% endif %}
			{% endif %}
		</div>
		{% if footerIcon %}
			<img class="{{ namespace }}sitfinCard__footerIcon" src="{{ iconPath | path }}" alt="">
		{% else %}
			{% if footerBadge %}
				{% if badgeSuccessText %}
					{% render "@badge--success-10-icon",{text: badgeSuccessText},true %}
					{% else %}
					{% render "@badge--primary-10-icon",{text: badgePrimaryText},true %}
				{% endif %}
			{% endif %}
		{% endif %}
	</div>
	{% render "@snet-dot",{classes: [namespace+"sitfinCard__dotBefore"]},true %}
	{% render "@snet-dot",{classes: [namespace+"sitfinCard__dotAfter"]},true %}
</div>
  • Content:
    /* variables specific to current element */
    
    $element-specific-variables: "";
    
    .#{$namespace}sitfinCard {
    
    	/* Save root element context for easy access if nesting is needed */
    
    	$self: &;
    
    	/* properties of current element  + media queries */
    	display: flex;
    	flex-direction: column;
    	justify-content: space-between;
    	position: relative;
    	border: $border-width solid;
    	@include custom-prop-fallback("border-color","sys-color-border-primary-moderate");
    	@include spacer-component-inset-horiz-greater("sm","md");
    	@include custom-prop-fallback("background-color", "comp-box-background-color");
    	width: $sitfin-card-width-global;
    	min-height: $sitfin-card-height-global;
    	border-radius: map-deep-get($token-radius-map, "4");
    	flex-shrink: 0;
    
    	/* Pseudo Elements */
    
    	&::before {
    	}
    
    	&::after {
    	}
    
    	/*
    	Include elements that are linked to the current element but have to reside at the root level of the stylesheet
    	(e.g: keyframes)
    	*/
    	@at-root {
    		@keyframes sitfinSlidingLoader {
    			0% {
    				background-position: 100% 100%;
    			}
    
    			100% {
    				background-position: -100% 100%; /*OR top left*/
    			}
    		}
    	}
    
    
    	/* children - write selector in full in comments in order to facilitate search */
    
    	// sitfinCard__header
    	&__header {
    
    		// follows same logic as parent
    
    		display: flex;
    		justify-content: space-between;
    		width: 100%;
    		background-color: inherit;
    
    	}
    
    	&__action#{$self}__action {
    
    		position: relative;
    		top: -(map-deep-get($token-spacer-stack-max-map, "sm"));
    		right: 0;
    
    		&:hover,
    		&:focus {
    			background-color: inherit !important;
    			@include custom-prop-fallback("color", "sys-color-text-secondary-vivid", "true", "true");
    		}
    
    	}
    
    	&__middle {
    		
    		//position: relative;
    		//top: -(map-deep-get($token-spacer-stack-map, "xs"));
    		background-color: inherit;
    		width: 100%;
    
    		&.-hasSeparator {
    
    			&::after {
    				content: "";
    				display: block;
    				height: $border-width;
    				@include custom-prop-fallback("background-color", "sys-color-border-primary-subtle");
    
    			}
    
    		}
    
    	}
    
    	&__middleIcon {
    		position: absolute;
    		z-index: z("low");
    		top: 50%;
    		transform: translateY(-50%);
    		right: map-deep-get($token-spacer-inset-map, "md");
    		background-color: inherit;
    		width: map-deep-get($token-sizes-unit-map, "40");
    		padding-left: map-deep-get($token-spacer-inline-map, "md");
    		box-sizing: content-box;
    	}
    
    	&__footer {
    		display: flex;
    		justify-content: space-between;
    		align-items: flex-end;
    		width: 100%;
    		@include spacer-component-inline("md");
    	}
    	
    	&__footerIcon {
    
    		width: map-deep-get($token-sizes-unit-map, "40");
    		position: relative;
    		top: 0.125em;
    	}
    
    	&__footerBlockStart {
    
    		flex-grow: 1;
    		@include spacer-component-inline("xs");
    		position: relative;
    		min-width: 0; // for truncate in flex context
    
    	}
    
    	&__loader {
    
    		@extend %skeletonUnit;
    		min-height: map-deep-get($token-sizes-unit-map, "16");
    		transform: translateY(-50%);
    
    	}
    
    	&__dotBefore,
    	&__dotAfter {
    
    		display: none;
    		position: absolute;
    		top: 50%;
    
    	}
    
    	&__dotBefore {
    
    		right: 100%;
    		transform: translateY(-50%) translateX(50%);
    
    	}
    
    	&__dotAfter {
    
    		left: 100%;
    		transform: translateY(-50%) translateX(-50%);
    	}
    
    	&__alert {
    
    		@include custom-prop-fallback("color", "sys-color-text-status-warning-vivid");
    
    		&::before {
    			font-size: map-deep-get($token-font-size-map, "body", "m");
    		}
    
    	}
    
    	&__helper {
    
    		@include custom-prop-fallback("color", "sys-color-text-primary-muted");
    
    	}
    
    
    	/* modifiers */
    
    	// sitfinCard -rounded
    	&.-rounded {
    
    		// follows same logic as base element
    
    		border-radius: map-deep-get($token-radius-map, "24");
    
    	}
    	
    	&.-dashed {
    
    		border-style: dashed;
    
    	}
    
    	/* random parent element */
    	/* 
    	*
    	*   Syntax : .randomParentElt & {}
    	*
    	*/
    
    	/* Pseudo Classes */
    
    	&:hover {
    		@media (hover: hover) {
    			box-shadow: map-deep-get($token-shadow-map,"active");
    		}
    	}
    
    	&:focus {
    	}
    
    	&:active {
    	}
    
    	&:focus,
    	&:active {
    	}
    
    }
  • URL: /components/raw/snet-sitfin-card/_sitfin-card.scss
  • Filesystem Path: components/snet/molecules/sitfin-card/_sitfin-card.scss
  • Size: 3.9 KB