mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-18 11:36:36 +00:00
Code Issues Projects Releases Packages Wiki Activity

ProgressBar: Removed the css variables and use carbon-css instead.

Browse source 
The way of assigning the ProgressBar value has change. It is now a style
variable and scale-x is calculated in the css. This way prevent the
override of carbon css.
This commit is contained in:
jqlio18 2022-12-12 22:06:50 -05:00
commit dd542b5d05
1 changed files with 6 additions and 32 deletions
Download patch file Download diff file Expand all files Collapse all files

38
src/ProgressBar/ProgressBar.svelte
View file

@ -88,7 +88,7 @@
> >
<div <div
class:bx--progress-bar__bar="{true}" class:bx--progress-bar__bar="{true}"
style="transform: scaleX({capped / max})" style="--scale-x: {indeterminate ? 0 : capped / max}"
></div> ></div>
</div> </div>
{#if helperText} {#if helperText}
@ -99,36 +99,10 @@
</div> </div>
<style> <style>
.bx--progress-bar--error .bx--progress-bar__bar { .bx--progress-bar:not(.bx--progress-bar--indeterminate):not(
background-color: var(--cds-support-error, #da1e28); .bx--progress-bar--error
} ):not(.bx--progress-bar--finished)
.bx--progress-bar__bar {
.bx--progress-bar__status-icon { transform: scaleX(var(--scale-x));
float: right;
}
.bx--progress-bar--error .bx--progress-bar__helper-text,
.bx--progress-bar--error .bx--progress-bar__status-icon {
color: var(--cds-support-error, #da1e28);
}
.bx--progress-bar--finished .bx--progress-bar__bar {
background-color: var(--cds-support-success, #198038);
}
.bx--progress-bar--finished .bx--progress-bar__status-icon {
color: var(--cds-support-success, #198038);
}
.bx--progress-bar__status-icon {
flex-shrink: 0;
margin-left: 1rem;
}
.bx--progress-bar--error .bx--progress-bar__bar,
.bx--progress-bar--finished .bx--progress-bar__bar {
transform: scaleX(
1
) !important; /* Overwrite the style applied to the div */
} }
</style> </style>