1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 | @mixin progress-container {
|
7 | height: $progress-height;
|
8 | margin-bottom: $progress-margin-bottom;
|
9 | border-radius: $progress-radius;
|
10 | background-color: $progress-background;
|
11 | }
|
12 |
|
13 |
|
14 | @mixin progress-meter {
|
15 | position: relative;
|
16 | display: block;
|
17 | width: 0%;
|
18 | height: 100%;
|
19 | background-color: $progress-meter-background;
|
20 |
|
21 | @if has-value($progress-radius) {
|
22 | border-radius: $global-radius;
|
23 | }
|
24 | }
|
25 |
|
26 |
|
27 | @mixin progress-meter-text {
|
28 | @include absolute-center;
|
29 | position: absolute;
|
30 | margin: 0;
|
31 | font-size: 0.75rem;
|
32 | font-weight: bold;
|
33 | color: $white;
|
34 | white-space: nowrap;
|
35 |
|
36 | @if has-value($progress-radius) {
|
37 | border-radius: $progress-radius;
|
38 | }
|
39 | }
|
40 |
|
41 | @mixin foundation-progress-bar {
|
42 |
|
43 | .progress {
|
44 | @include progress-container;
|
45 |
|
46 | @each $name, $color in $foundation-palette {
|
47 | &.#{$name} {
|
48 | .progress-meter {
|
49 | background-color: $color;
|
50 | }
|
51 | }
|
52 | }
|
53 | }
|
54 |
|
55 |
|
56 | .progress-meter {
|
57 | @include progress-meter;
|
58 | }
|
59 |
|
60 |
|
61 | .progress-meter-text {
|
62 | @include progress-meter-text;
|
63 | }
|
64 | }
|