Mixins: Progress Bars
Create a progress bar to show mobile users of progress through sliders
Where to Find
- You can find these styles in
integration/snippets/common/progress-bar.scss.
1.progress-bar__container {
2 display: flex;
3 align-items: center;
4 width: calc(100% - 18px);
5 margin: 14px 0 0;
6
7 .progress-bar__inner,
8 .progress-bar__wrapper {
9 display: block;
10 height: 5px;
11 }
12
13 .progress-bar__wrapper {
14 width: 100%;
15 min-width: auto;
16 border-radius: 4px;
17 background: rgba(color(pure-black), .1);
18 overflow: hidden;
19 }
20
21 .progress-bar__inner {
22 width: 1%;
23 transition: width .2s ease-in-out;
24 background: rgba(0, 119, 200, 1);
25 }
26
27 .progress-bar__slide-count {
28 display: block;
29 position: relative;
30 right: -31px;
31 width: 50px;
32 font-family: $font-barlow-sans;
33 font-size: 16px;
34 font-weight: $font-weight-semi-bold;
35 line-height: 1.2;
36 letter-spacing: 4px;
37 color: color(pure-black);
38 i {
39 display: inline-block;
40 width: 3px;
41 }
42 }
43}
44
45.slick-dotted {
46 &.slick-slider {
47 margin-bottom: 0;
48 }
49}
50
51.slick-dots {
52 display: none !important; // sass-lint:disable-line no-important
53}
54
55
56@include media-breakpoint-up(lg) {
57 .progress-bar__container {
58 display: none;
59 }
60
61 .slick-dotted {
62 &.slick-slider {
63 margin-bottom: 30px;
64 }
65 }
66
67 .slick-dots {
68 display: flex !important; // sass-lint:disable-line no-important
69 align-items: center;
70 justify-content: center;
71 max-width: 930px;
72 }
73}
74
75@include media-breakpoint-up(xl) {
76 .bs-section--add-progress-bar {
77 .slick-dots {
78 max-width: 1170px;
79 }
80 }
81}