Use more specific styling for kinds in ProgressBar

This commit is contained in:
Bogdan 2023-05-31 04:00:52 +03:00 committed by Mark McDowall
parent d44656bca1
commit dd31c913d2
2 changed files with 34 additions and 34 deletions

View File

@ -16,6 +16,38 @@
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15); box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
color: var(--white); color: var(--white);
transition: width 0.6s ease; transition: width 0.6s ease;
&.primary {
background-color: var(--primaryColor);
}
&.danger {
background-color: var(--dangerColor);
&:global(.colorImpaired) {
background: repeating-linear-gradient(90deg, color(#f05050 shade(5%)), color(#f05050 shade(5%)) 5px, color(#f05050 shade(15%)) 5px, color(#f05050 shade(15%)) 10px);
}
}
&.success {
background-color: var(--successColor);
}
&.purple {
background-color: var(--purple);
}
&.warning {
background-color: var(--warningColor);
&:global(.colorImpaired) {
background: repeating-linear-gradient(45deg, #ffa500, #ffa500 5px, color(#ffa500 tint(15%)) 5px, color(#ffa500 tint(15%)) 10px);
}
}
&.info {
background-color: var(--infoColor);
}
} }
.frontTextContainer { .frontTextContainer {
@ -45,38 +77,6 @@
cursor: default; cursor: default;
} }
.primary {
background-color: var(--primaryColor);
}
.danger {
background-color: var(--dangerColor);
&:global(.colorImpaired) {
background: repeating-linear-gradient(90deg, color(#f05050 shade(5%)), color(#f05050 shade(5%)) 5px, color(#f05050 shade(15%)) 5px, color(#f05050 shade(15%)) 10px);
}
}
.success {
background-color: var(--successColor);
}
.purple {
background-color: var(--purple);
}
.warning {
background-color: var(--warningColor);
&:global(.colorImpaired) {
background: repeating-linear-gradient(45deg, #ffa500, #ffa500 5px, color(#ffa500 tint(15%)) 5px, color(#ffa500 tint(15%)) 10px);
}
}
.info {
background-color: var(--infoColor);
}
.small { .small {
height: $progressBarSmallHeight; height: $progressBarSmallHeight;

View File

@ -38,7 +38,7 @@ function ProgressBar(props) {
{ {
showText && width ? showText && width ?
<div <div
className={styles.backTextContainer} className={classNames(styles.backTextContainer, styles[kind])}
style={{ width: actualWidth }} style={{ width: actualWidth }}
> >
<div className={styles.backText}> <div className={styles.backText}>
@ -67,7 +67,7 @@ function ProgressBar(props) {
{ {
showText ? showText ?
<div <div
className={styles.frontTextContainer} className={classNames(styles.frontTextContainer, styles[kind])}
style={{ width: progressPercent }} style={{ width: progressPercent }}
> >
<div <div