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 aria-hidden="true" class="sds-icon sds-icon-more"></span>
</button>
<div aria-labelledby="" class="sds-actionMenu dropdown-menu dropdown-menu-right">
<ul class="list-unstyled">
<li>
<a href="" class="sds-actionMenu__item dropdown-item">
Item 1
</a>
</li>
<li>
<a href="" class="sds-actionMenu__item dropdown-item">
Item 2
</a>
</li>
<li>
<a href="" class="sds-actionMenu__item dropdown-item">
Item 3
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="sds-sitfinCard__footer">
<div class="sds-sitfinCard__footerBlockStart">
<div class="text-truncate">
<span class="sds-sitfinCard__alert sds-icon sds-icon-alert"></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>
<span class="sds-sitfinCard__helper sds-textHelper">/ {#.###} €</span>
</div>
</div>
<img class="sds-sitfinCard__footerIcon" src="https:/design.spuerkeess.lu/media/illustrative-icons/svg80x/product/sdsillustrativeicon-account-p.svg" alt="">
</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-body--negative-lg",{text: "{-#.###,##}"},true %}
{% else %}
{% render "@amount-body--positive-lg",{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 "@dot",{classes: [namespace+"sitfinCard__dotBefore"]},true %}
{% render "@dot",{classes: [namespace+"sitfinCard__dotAfter"]},true %}
</div>
/* 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");
}
&[aria-expanded="true"] {
@include custom-prop-fallback("color", "sys-color-text-secondary-vivid", "true", "true");
outline: $border-width*2 solid var(--comp-button-secondary-pressed-border-color) !important;
}
}
&__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%;
background-color: $border-color;
}
&__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: $font-size-base;
}
}
&__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 & {}
*
*/
.#{$namespace}amount {
&.-amountLg {
.#{$namespace}amount__body {
@include custom-prop-fallback("font-family","sys-font-family-medium","true","true");
}
}
}
/* Pseudo Classes */
&:hover {
@media (hover: hover) {
box-shadow: map-deep-get($token-shadow-map,"active");
}
}
&:focus {
}
&:active {
}
&:focus,
&:active {
}
}