No notes defined.
<div class="sds-stackmd">
<div class="sds-progress progress -validityGradientNoProgress" aria-hidden="true">
<div class="sds-progress__indicator" style="left: 78%;"></div>
</div>
<div class="sds-textHelperSmall sds-metaColor text-right">150.000,00 €</div>
</div>
<div class="{{ namespace }}stackmd">
<div class="{{ namespace }}progress progress{% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}" aria-hidden="true">
<div class="{{ namespace }}progress__indicator" style="left: 78%;"></div>
</div>
<div class="{{ namespace }}textHelperSmall {{ namespace }}metaColor text-right">150.000,00 €</div>
</div>
/* variables specific to current element */
$element-specific-variables: "";
.#{$namespace}progress {
/* Save root element context for easy access if nesting is needed */
$self: &;
/* properties of current element + media queries */
/* 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 */
// progress__bar
&__bar {
// follows same logic as parent
&:not(:last-child) {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
& + & {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
@include custom-prop-fallback("background-color", "comp-progress-bar-segment-background-color");
&.-negative {
@include custom-prop-fallback("background-color", "sys-color-background-status-danger-100");
&.-faded {
@include custom-prop-fallback("background-color", "sys-color-background-secondary-30");
}
}
&.-positive {
@include custom-prop-fallback("background-color", "sys-color-background-status-success-100");
}
&.-black {
@include custom-prop-fallback("background-color", "sys-color-background-neutral-black");
}
}
&__badge {
position: relative;
z-index: z("low");
}
/* modifiers */
// progress -small
&.-small {
// follows same logic as base element
height: map-deep-get($token-sizes-unit-map, "4");
}
// progress -xtraSmall
&.-xtraSmall {
height: $border-width*2;
}
&.-stepper {
@include custom-prop-fallback("background-color", "sys-color-background-primary-60");
#{$self}__bar {
@include custom-prop-fallback("background-color", "sys-color-elevation-surface-flat");
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
}
&.-primary {
@include custom-prop-fallback("background-color", "sys-color-background-neutral-60");
#{$self}__badge,
#{$self}__bar {
@include custom-prop-fallback("background-color", "comp-progress-bar-segment-background-color");
}
}
&.-success {
@include custom-prop-fallback("background-color", "sys-color-background-neutral-60");
#{$self}__bar {
@include custom-prop-fallback("background-color", "sys-color-background-status-success-100");
}
}
&.-hasBadge {
overflow: visible;
background-color: transparent;
height: auto !important;
align-items: center;
&::before {
content: "";
position: absolute;
top: 50%;
left: 0;
right: 0;
transform: translateY(-50%);
@include custom-prop-fallback("background-color", "sys-color-background-neutral-60");
height: $border-width*2;
}
#{$self}__bar {
overflow: visible;
position: relative;
}
&.-xtraSmall {
#{$self}__bar {
height: $border-width*2;
}
}
}
&.-validityGradient {
#{$self}__bar {
mask: linear-gradient(to left, rgba(map-deep-get($token-color-grayscale-map,"0"),1), rgba(map-deep-get($token-color-grayscale-map,"0"),1));
&::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
@include gradient-x-three-colors(map-deep-get($token-color-brand-map, "success", "100"), map-deep-get($token-color-brand-map, "warning", "100"), map-deep-get($token-color-brand-map, "primary", "100"), 25%, 50%, 75%);
}
&.-validityMask {
position: absolute;
top: 0;
right: 0;
height: 100%;
@include custom-prop-fallback("background-color", "sys-color-background-neutral-60");
}
}
}
&.-validityGradientNoProgress {
position: relative;
overflow: visible;
@include gradient-x-three-colors(map-deep-get($token-color-brand-map, "primary", "100"), map-deep-get($token-color-brand-map, "warning", "100"), map-deep-get($token-color-brand-map, "success", "100"), 15%, 25%, 75%);
#{$self}__indicator {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: map-deep-get($token-sizes-unit-map, "4");
height: map-deep-get($token-sizes-unit-map, "24");
border-radius: map-deep-get($token-radius-map, "2");
@include custom-prop-fallback("background-color", "sys-color-background-neutral-black");
}
}
&.-noBg {
background-color: transparent !important;
}
/* random parent element */
/*
*
* Syntax : .randomParentElt & {}
*
*/
/* Pseudo Classes */
&:hover {
@media (hover: hover) {
}
}
&:focus {
}
&:active {
}
&:focus,
&:active {
}
}