Skip to content

Commit bbdc3fe

Browse files
feat(progress): add high contrast border (#7695)
1 parent afb4965 commit bbdc3fe

1 file changed

Lines changed: 11 additions & 0 deletions

File tree

‎src/patternfly/components/Progress/progress.scss‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,8 @@
88
--#{$progress}__bar--Height: var(--pf-t--global--spacer--md);
99
--#{$progress}__bar--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default); // the bar always needs white under it so that the semi-transparent color shows correctly
1010
--#{$progress}__bar--BorderRadius: var(--pf-t--global--border--radius--medium);
11+
--#{$progress}__bar--BorderColor: var(--pf-t--global--border--color--high-contrast);
12+
--#{$progress}__bar--BorderWidth: var(--pf-t--global--border--width--regular);
1113
--#{$progress}__measure--m-static-width--MinWidth: 4.5ch; // 4.5 because the % character is wider than a 0
1214
--#{$progress}__status--Gap: var(--pf-t--global--spacer--sm);
1315
--#{$progress}__status-icon--Color: var(--pf-t--global--icon--color--regular);
@@ -201,6 +203,15 @@
201203
overflow: hidden;
202204
background-color: var(--#{$progress}__bar--BackgroundColor);
203205
border-radius: var(--#{$progress}__bar--BorderRadius);
206+
207+
&::before {
208+
position: absolute;
209+
inset: 0;
210+
pointer-events: none;
211+
content: '';
212+
border: var(--#{$progress}__bar--BorderWidth) solid var(--#{$progress}__bar--BorderColor);
213+
border-radius: inherit;
214+
}
204215
}
205216

206217
// the progress__indicator is the part that advances (widens) as progress is made

0 commit comments

Comments
 (0)