coreui / coreui-pro / 34000950507

94%

main: 94%

push

github

feat(Progress): gradient bars and a segmented variant (#1181)

* feat(Progress): gradient bars and a segmented variant

Add `--cui-progress-bar-bg-image` (default `none`), painted by `.progress-bar`
over its colour, so a gradient is a single variable set on the `.progress` or
on one bar. The stripes move to their own tokens, `--cui-progress-bar-stripes`
and `--cui-progress-bar-stripe-color`, and `.progress-bar-striped` layers the
pattern over the image with a per-layer `background-size`. The stripe
keyframes shift only the first background layer, so the image below does not
scroll with the animation.

Add `.progress-segmented`: a three-layer mask (two caps, one body) tiled with
`space` along the track that cuts a `.progress` or `.progress-stacked` into
whole rounded pills sized by `--cui-progress-segment-width` and
`--cui-progress-segment-gap`; the gaps absorb the remainder of the width. The
body layer repeats horizontally only — with `space` on both axes a track at
least twice the body's height tiled it vertically and squared the pills. The
variant zeroes the track radius and shadow, on the nested `.progress` of a
stack too, since the pill outline replaces both.

Docs: Gradients and Segmented sections, segmented tokens under Customizing,
migration entries. sass-true covers the token maps.

* fix(Progress): hard-edged segment caps

The cap circles faded over 1 px, which the body layer's hard edge did not, so
the joint showed a soft shoulder that grew with zoom. A hard stop is
antialiased by the browser like any gradient edge and lines up with the body.

* docs(Progress): drop the stacked segmented example

The section's first sentence already says the mask covers .progress-stacked,
and the example set its height on the stack, which the nested .progress does
not follow, so the fill covered only the top half.

* feat(Progress): segment corner radius token

Add `--cui-progress-segment-border-radius`, half the segment width by default,
so a segmented trac... (continued)

4903 of 5510 branches covered (88.98%)

Branch coverage included in aggregate %.

83 of 86 new or added lines in 1 file covered. (96.51%)

9464 of 9865 relevant lines covered (95.94%)

393.0 hits per line