No notes defined.
<!-- Default -->
<div class="sds-progress progress">
<div class="progress-bar sds-progress__bar" role="progressbar" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<!-- Negative No Bg -->
<div class="sds-progress progress -noBg">
<div class="progress-bar sds-progress__bar -negative" role="progressbar" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<!-- Positive No Bg -->
<div class="sds-progress progress -noBg">
<div class="progress-bar sds-progress__bar -positive" role="progressbar" style="width: 60%" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<!-- Negative Two Values -->
<div class="sds-progress progress">
<div class="progress-bar sds-progress__bar -negative" role="progressbar" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
<div class="progress-bar sds-progress__bar -negative -faded" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<!-- Small Black -->
<div class="sds-progress progress -small">
<div class="progress-bar sds-progress__bar -black" role="progressbar" style="width: 70%" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<!-- Stepper -->
<div class="sds-progress progress -stepper -small">
<div class="progress-bar sds-progress__bar" role="progressbar" style="width: 70%" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<!-- Xtrasmall Primary Badge -->
<div class="sds-progress progress -primary -xtraSmall rounded-0 -hasBadge">
<div class="progress-bar sds-progress__bar rounded-0" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
<span class="sds-badge badge -badgeHighlight sds-progress__badge -badgeSm">
25%
</span>
</div>
<!-- Xtrasmall Success Badge -->
<div class="sds-progress progress -success -xtraSmall rounded-0 -hasBadge">
<div class="progress-bar sds-progress__bar rounded-0" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
<span class="sds-badge badge -badgeSuccess sds-progress__badge -badgeSm">
100%
</span>
</div>
<!-- Validity -->
<div class="sds-progress progress -validityGradient">
<div class="progress-bar sds-progress__bar" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<!-- Validity No Progress -->
<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>
<!-- Default -->
<div class="{{ namespace }}progress progress{% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}">
<div class="progress-bar {{ namespace }}progress__bar{% for mod in progressStyles %} {{ mod }}{% endfor %}" role="progressbar" style="width: {{ progressValuePecentage }}%" aria-valuenow="{{ progressValue }}" aria-valuemin="0" aria-valuemax="100"{% if current %} aria-current="true"{% endif %}{% for attrKey, attr in attrs %} {{ attrKey }}="{{ attr }}"{% endfor %}></div>
{% if badgeHighlight %}
{% render "@badge--highlight",{
text: progressValue+"%",
classes: [namespace + "progress__badge","-badgeSm"]
},true %}
{% elseif badgeSuccess %}
{% render "@badge--success",{
text: progressValue+"%",
classes: [namespace + "progress__badge","-badgeSm"]
},true %}
{% endif %}
{% if secondaryProgressBar %}
<div class="progress-bar {{ namespace }}progress__bar{% for mod in secondaryProgressStyles %} {{ mod }}{% endfor %}" role="progressbar" style="width: {{ progressValueSecondary }}%" aria-valuenow="{{ progressValueSecondary }}" aria-valuemin="0" aria-valuemax="100"></div>
{% endif %}
</div>
<!-- Negative No Bg -->
<div class="{{ namespace }}progress progress{% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}">
<div class="progress-bar {{ namespace }}progress__bar{% for mod in progressStyles %} {{ mod }}{% endfor %}" role="progressbar" style="width: {{ progressValuePecentage }}%" aria-valuenow="{{ progressValue }}" aria-valuemin="0" aria-valuemax="100"{% if current %} aria-current="true"{% endif %}{% for attrKey, attr in attrs %} {{ attrKey }}="{{ attr }}"{% endfor %}></div>
{% if badgeHighlight %}
{% render "@badge--highlight",{
text: progressValue+"%",
classes: [namespace + "progress__badge","-badgeSm"]
},true %}
{% elseif badgeSuccess %}
{% render "@badge--success",{
text: progressValue+"%",
classes: [namespace + "progress__badge","-badgeSm"]
},true %}
{% endif %}
{% if secondaryProgressBar %}
<div class="progress-bar {{ namespace }}progress__bar{% for mod in secondaryProgressStyles %} {{ mod }}{% endfor %}" role="progressbar" style="width: {{ progressValueSecondary }}%" aria-valuenow="{{ progressValueSecondary }}" aria-valuemin="0" aria-valuemax="100"></div>
{% endif %}
</div>
<!-- Positive No Bg -->
<div class="{{ namespace }}progress progress{% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}">
<div class="progress-bar {{ namespace }}progress__bar{% for mod in progressStyles %} {{ mod }}{% endfor %}" role="progressbar" style="width: {{ progressValuePecentage }}%" aria-valuenow="{{ progressValue }}" aria-valuemin="0" aria-valuemax="100"{% if current %} aria-current="true"{% endif %}{% for attrKey, attr in attrs %} {{ attrKey }}="{{ attr }}"{% endfor %}></div>
{% if badgeHighlight %}
{% render "@badge--highlight",{
text: progressValue+"%",
classes: [namespace + "progress__badge","-badgeSm"]
},true %}
{% elseif badgeSuccess %}
{% render "@badge--success",{
text: progressValue+"%",
classes: [namespace + "progress__badge","-badgeSm"]
},true %}
{% endif %}
{% if secondaryProgressBar %}
<div class="progress-bar {{ namespace }}progress__bar{% for mod in secondaryProgressStyles %} {{ mod }}{% endfor %}" role="progressbar" style="width: {{ progressValueSecondary }}%" aria-valuenow="{{ progressValueSecondary }}" aria-valuemin="0" aria-valuemax="100"></div>
{% endif %}
</div>
<!-- Negative Two Values -->
<div class="{{ namespace }}progress progress{% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}">
<div class="progress-bar {{ namespace }}progress__bar{% for mod in progressStyles %} {{ mod }}{% endfor %}" role="progressbar" style="width: {{ progressValuePecentage }}%" aria-valuenow="{{ progressValue }}" aria-valuemin="0" aria-valuemax="100"{% if current %} aria-current="true"{% endif %}{% for attrKey, attr in attrs %} {{ attrKey }}="{{ attr }}"{% endfor %}></div>
{% if badgeHighlight %}
{% render "@badge--highlight",{
text: progressValue+"%",
classes: [namespace + "progress__badge","-badgeSm"]
},true %}
{% elseif badgeSuccess %}
{% render "@badge--success",{
text: progressValue+"%",
classes: [namespace + "progress__badge","-badgeSm"]
},true %}
{% endif %}
{% if secondaryProgressBar %}
<div class="progress-bar {{ namespace }}progress__bar{% for mod in secondaryProgressStyles %} {{ mod }}{% endfor %}" role="progressbar" style="width: {{ progressValueSecondary }}%" aria-valuenow="{{ progressValueSecondary }}" aria-valuemin="0" aria-valuemax="100"></div>
{% endif %}
</div>
<!-- Small Black -->
<div class="{{ namespace }}progress progress{% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}">
<div class="progress-bar {{ namespace }}progress__bar{% for mod in progressStyles %} {{ mod }}{% endfor %}" role="progressbar" style="width: {{ progressValuePecentage }}%" aria-valuenow="{{ progressValue }}" aria-valuemin="0" aria-valuemax="100"{% if current %} aria-current="true"{% endif %}{% for attrKey, attr in attrs %} {{ attrKey }}="{{ attr }}"{% endfor %}></div>
{% if badgeHighlight %}
{% render "@badge--highlight",{
text: progressValue+"%",
classes: [namespace + "progress__badge","-badgeSm"]
},true %}
{% elseif badgeSuccess %}
{% render "@badge--success",{
text: progressValue+"%",
classes: [namespace + "progress__badge","-badgeSm"]
},true %}
{% endif %}
{% if secondaryProgressBar %}
<div class="progress-bar {{ namespace }}progress__bar{% for mod in secondaryProgressStyles %} {{ mod }}{% endfor %}" role="progressbar" style="width: {{ progressValueSecondary }}%" aria-valuenow="{{ progressValueSecondary }}" aria-valuemin="0" aria-valuemax="100"></div>
{% endif %}
</div>
<!-- Stepper -->
<div class="{{ namespace }}progress progress{% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}">
<div class="progress-bar {{ namespace }}progress__bar{% for mod in progressStyles %} {{ mod }}{% endfor %}" role="progressbar" style="width: {{ progressValuePecentage }}%" aria-valuenow="{{ progressValue }}" aria-valuemin="0" aria-valuemax="100"{% if current %} aria-current="true"{% endif %}{% for attrKey, attr in attrs %} {{ attrKey }}="{{ attr }}"{% endfor %}></div>
{% if badgeHighlight %}
{% render "@badge--highlight",{
text: progressValue+"%",
classes: [namespace + "progress__badge","-badgeSm"]
},true %}
{% elseif badgeSuccess %}
{% render "@badge--success",{
text: progressValue+"%",
classes: [namespace + "progress__badge","-badgeSm"]
},true %}
{% endif %}
{% if secondaryProgressBar %}
<div class="progress-bar {{ namespace }}progress__bar{% for mod in secondaryProgressStyles %} {{ mod }}{% endfor %}" role="progressbar" style="width: {{ progressValueSecondary }}%" aria-valuenow="{{ progressValueSecondary }}" aria-valuemin="0" aria-valuemax="100"></div>
{% endif %}
</div>
<!-- Xtrasmall Primary Badge -->
<div class="{{ namespace }}progress progress{% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}">
<div class="progress-bar {{ namespace }}progress__bar{% for mod in progressStyles %} {{ mod }}{% endfor %}" role="progressbar" style="width: {{ progressValuePecentage }}%" aria-valuenow="{{ progressValue }}" aria-valuemin="0" aria-valuemax="100"{% if current %} aria-current="true"{% endif %}{% for attrKey, attr in attrs %} {{ attrKey }}="{{ attr }}"{% endfor %}></div>
{% if badgeHighlight %}
{% render "@badge--highlight",{
text: progressValue+"%",
classes: [namespace + "progress__badge","-badgeSm"]
},true %}
{% elseif badgeSuccess %}
{% render "@badge--success",{
text: progressValue+"%",
classes: [namespace + "progress__badge","-badgeSm"]
},true %}
{% endif %}
{% if secondaryProgressBar %}
<div class="progress-bar {{ namespace }}progress__bar{% for mod in secondaryProgressStyles %} {{ mod }}{% endfor %}" role="progressbar" style="width: {{ progressValueSecondary }}%" aria-valuenow="{{ progressValueSecondary }}" aria-valuemin="0" aria-valuemax="100"></div>
{% endif %}
</div>
<!-- Xtrasmall Success Badge -->
<div class="{{ namespace }}progress progress{% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}">
<div class="progress-bar {{ namespace }}progress__bar{% for mod in progressStyles %} {{ mod }}{% endfor %}" role="progressbar" style="width: {{ progressValuePecentage }}%" aria-valuenow="{{ progressValue }}" aria-valuemin="0" aria-valuemax="100"{% if current %} aria-current="true"{% endif %}{% for attrKey, attr in attrs %} {{ attrKey }}="{{ attr }}"{% endfor %}></div>
{% if badgeHighlight %}
{% render "@badge--highlight",{
text: progressValue+"%",
classes: [namespace + "progress__badge","-badgeSm"]
},true %}
{% elseif badgeSuccess %}
{% render "@badge--success",{
text: progressValue+"%",
classes: [namespace + "progress__badge","-badgeSm"]
},true %}
{% endif %}
{% if secondaryProgressBar %}
<div class="progress-bar {{ namespace }}progress__bar{% for mod in secondaryProgressStyles %} {{ mod }}{% endfor %}" role="progressbar" style="width: {{ progressValueSecondary }}%" aria-valuenow="{{ progressValueSecondary }}" aria-valuemin="0" aria-valuemax="100"></div>
{% endif %}
</div>
<!-- Validity -->
<div class="{{ namespace }}progress progress{% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}">
<div class="progress-bar {{ namespace }}progress__bar{% for mod in progressStyles %} {{ mod }}{% endfor %}" role="progressbar" style="width: {{ progressValuePecentage }}%" aria-valuenow="{{ progressValue }}" aria-valuemin="0" aria-valuemax="100"{% if current %} aria-current="true"{% endif %}{% for attrKey, attr in attrs %} {{ attrKey }}="{{ attr }}"{% endfor %}></div>
{% if badgeHighlight %}
{% render "@badge--highlight",{
text: progressValue+"%",
classes: [namespace + "progress__badge","-badgeSm"]
},true %}
{% elseif badgeSuccess %}
{% render "@badge--success",{
text: progressValue+"%",
classes: [namespace + "progress__badge","-badgeSm"]
},true %}
{% endif %}
{% if secondaryProgressBar %}
<div class="progress-bar {{ namespace }}progress__bar{% for mod in secondaryProgressStyles %} {{ mod }}{% endfor %}" role="progressbar" style="width: {{ progressValueSecondary }}%" aria-valuenow="{{ progressValueSecondary }}" aria-valuemin="0" aria-valuemax="100"></div>
{% endif %}
</div>
<!-- Validity No Progress -->
<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 {
}
}