No notes defined.
<div>
<div class="sds-accountCard -accountCardDanger" aria-describedby="input-text-error-message">
<div class="sds-accountCard__content sds-stackXxs">
<div>Compte Epicerie Fournisseurs</div>
<div class="sds-accountCard__meta sds-textHelper">LU55 0030 0566 9076 0000</div>
</div>
<div class="d-flex flex-column align-items-end">
<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>
<ul class="sds-btnGroup">
<li>
<button type="button" class="sds-btn -iconBtn -btnSecondary -btnInverse -btnSmall">
<span aria-hidden="true" class="sds-icon sds-icon-edit"></span>
</button>
</li>
<li>
<button type="button" class="sds-btn -iconBtn -btnSecondary -btnInverse -btnSmall">
<span aria-hidden="true" class="sds-icon sds-icon-close"></span>
</button>
</li>
</ul>
</div>
<div class="sds-accountCard__hint">
<p class="sds-hint sds-textHelperSmall -hintError" id="input-text-error-message">
<span class="sds-hint__icon sds-icon sds-icon-alert" aria-hidden="true"></span>
{Hint}
</p>
</div>
</div>
{% if hint %}
<div>
{% endif %}
<div class="{{ namespace }}accountCard{% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}"{% if hint %} aria-describedby="{{ hint.id }}"{% endif %}>
<div class="{{ namespace }}accountCard__content {{ namespace }}stackXxs">
<div>{{ title }}</div>
<div class="{{ namespace }}accountCard__meta {{ namespace }}textHelper">{{ meta | safe }}</div>
</div>
{% if amountInfo %}
<div class="d-flex flex-column align-items-end">
{% if amountLabel %}
<div class="{{ namespace }}dismissibleAccountCard__meta {{ namespace }}textHelper">Solde restant dû</div>
{% endif %}
{% if amount %}
{% render "@amount-body--positive-lg" %}
{% else %}
{% render "@amount-interactive--positive-lg" %}
{% endif %}
</div>
{% endif %}
{% if actions %}
<ul class="{{ namespace }}btnGroup">
<li>
{% render "@icon-btn-secondary-inverse--small",{icon: "icon-edit"},true %}
</li>
<li>
{% render "@icon-btn-secondary-inverse--small",{icon: "icon-close"},true %}
</li>
</ul>
{% endif %}
</div>
{% if hint %}
<div class="{{ namespace }}accountCard__hint">
{% if hint.success %}
{% render "@hint--success",{
attrs: {
id: hint.id
}
},true %}
{% elseif hint.error %}
{% render "@hint--error",{
attrs: {
id: hint.id
}
},true %}
{% elseif hint.neutralFeedback %}
{% if hint.neutralFeedback.info %}
{% render "@hint--info",{
attrs: {
id: hint.id
}
},true %}
{% elseif hint.neutralFeedback.warning %}
{% render "@hint--warning",{
attrs: {
id: hint.id
}
},true %}
{% endif %}
{% else %}
{% render "@hint",{
attrs: {
id: hint.id
}
},true %}
{% endif %}
</div>
{% endif %}
{% if hint %}
</div>
{% endif %}
/* variables specific to current element */
$element-specific-variables: "";
.#{$namespace}accountCard {
/* Save root element context for easy access if nesting is needed */
$self: &;
/* properties of current element + media queries */
display: flex;
align-items: center;
@include spacer-component-inset("sm");
@include spacer-component-inline("md");
border-radius: map-deep-get($design-tokens, "comp-account-card-border-radius");
@include custom-prop-fallback("background-color", "comp-account-card-primary-background-color");
@include custom-prop-fallback("color", "comp-account-card-primary-text-color");
/* 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 */
// accountCard___meta
&__meta {
// follows same logic as parent
@include custom-prop-fallback("color", "comp-account-card-primary-description-text-color");
}
// accountCard___content
&__content {
padding-right: map-deep-get($token-spacer-unit-map, "16");
margin-right: auto;
}
/* modifiers */
&.-accountCardSuccess {
@include custom-prop-fallback-override("comp-account-card-primary-background-color", "comp-account-card-success-background-color");
@include custom-prop-fallback-override("comp-account-card-primary-text-color", "comp-account-card-success-text-color");
@include custom-prop-fallback-override("comp-account-card-primary-description-text-color", "comp-account-card-success-text-color");
/* icon button icon color override */
@include custom-prop-fallback-override("comp-button-secondary-text-color", "comp-account-card-success-text-color");
}
&.-accountCardDanger {
@include custom-prop-fallback-override("comp-account-card-primary-background-color", "comp-account-card-danger-background-color");
@include custom-prop-fallback-override("comp-account-card-primary-text-color", "comp-account-card-danger-text-color");
@include custom-prop-fallback-override("comp-account-card-primary-description-text-color", "comp-account-card-danger-text-color");
/* icon button icon color override */
@include custom-prop-fallback-override("comp-button-secondary-text-color", "comp-account-card-danger-text-color");
}
&.-accountCardInfo {
@include custom-prop-fallback-override("comp-account-card-primary-background-color", "comp-account-card-info-background-color");
@include custom-prop-fallback-override("comp-account-card-primary-text-color", "comp-account-card-info-text-color");
@include custom-prop-fallback-override("comp-account-card-primary-description-text-color", "comp-account-card-info-text-color");
/* icon button icon color override */
@include custom-prop-fallback-override("comp-button-secondary-text-color", "comp-account-card-info-text-color");
}
&.-accountCardWarning {
@include custom-prop-fallback-override("comp-account-card-primary-background-color", "comp-account-card-warning-background-color");
@include custom-prop-fallback-override("comp-account-card-primary-text-color", "comp-account-card-warning-text-color");
@include custom-prop-fallback-override("comp-account-card-primary-description-text-color", "comp-account-card-warning-text-color");
/* icon button icon color override */
@include custom-prop-fallback-override("comp-button-secondary-text-color", "comp-account-card-warning-text-color");
}
// accountCard -altStyle
&.-altStyle {
// follows same logic as base element
}
/* random parent element */
/*
*
* Syntax : .randomParentElt & {}
*
*/
/* Pseudo Classes */
&:hover {
@media (hover: hover) {
}
}
&:focus {
}
&:active {
}
&:focus,
&:active {
}
}
/* variables specific to current element */
$element-specific-variables: "";
.#{$namespace}dismissibleAccountCard {
/* Save root element context for easy access if nesting is needed */
$self: &;
/* properties of current element + media queries */
display: flex;
align-items: center;
@include custom-prop-fallback("background-color", "sys-color-elevation-surface-sunken");
border-radius: map-deep-get($token-radius-map, "8");
@include spacer-component-inset("sm");
@include spacer-component-inline("md");
/* 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 */
// accountCard___meta
&__meta {
// follows same logic as parent
@include custom-prop-fallback("color", "sys-color-text-primary-muted");
}
&__content {
padding-right: map-deep-get($token-spacer-unit-map, "16");
margin-right: auto;
}
&__info {
display: flex;
align-items: center;
margin-left: auto;
@include spacer-component-inline("md");
}
/* modifiers */
// dismissibleAccountCard -altStyle
&.-altStyle {
// follows same logic as base element
}
/* random parent element */
/*
*
* Syntax : .randomParentElt & {}
*
*/
/* Pseudo Classes */
&:hover {
@media (hover: hover) {
}
}
&:focus {
}
&:active {
}
&:focus,
&:active {
}
}