1 | // stylelint-disable at-rule-no-vendor-prefix
|
---|
2 |
|
---|
3 | //
|
---|
4 | // Progress bars
|
---|
5 | // --------------------------------------------------
|
---|
6 |
|
---|
7 |
|
---|
8 | // Bar animations
|
---|
9 | // -------------------------
|
---|
10 |
|
---|
11 | // WebKit
|
---|
12 | @-webkit-keyframes progress-bar-stripes {
|
---|
13 | from { background-position: 40px 0; }
|
---|
14 | to { background-position: 0 0; }
|
---|
15 | }
|
---|
16 |
|
---|
17 | // Spec and IE10+
|
---|
18 | @keyframes progress-bar-stripes {
|
---|
19 | from { background-position: 40px 0; }
|
---|
20 | to { background-position: 0 0; }
|
---|
21 | }
|
---|
22 |
|
---|
23 |
|
---|
24 | // Bar itself
|
---|
25 | // -------------------------
|
---|
26 |
|
---|
27 | // Outer container
|
---|
28 | .progress {
|
---|
29 | height: @line-height-computed;
|
---|
30 | margin-bottom: @line-height-computed;
|
---|
31 | overflow: hidden;
|
---|
32 | background-color: @progress-bg;
|
---|
33 | border-radius: @progress-border-radius;
|
---|
34 | .box-shadow(inset 0 1px 2px rgba(0, 0, 0, .1));
|
---|
35 | }
|
---|
36 |
|
---|
37 | // Bar of progress
|
---|
38 | .progress-bar {
|
---|
39 | float: left;
|
---|
40 | width: 0%;
|
---|
41 | height: 100%;
|
---|
42 | font-size: @font-size-small;
|
---|
43 | line-height: @line-height-computed;
|
---|
44 | color: @progress-bar-color;
|
---|
45 | text-align: center;
|
---|
46 | background-color: @progress-bar-bg;
|
---|
47 | .box-shadow(inset 0 -1px 0 rgba(0, 0, 0, .15));
|
---|
48 | .transition(width .6s ease);
|
---|
49 | }
|
---|
50 |
|
---|
51 | // Striped bars
|
---|
52 | //
|
---|
53 | // `.progress-striped .progress-bar` is deprecated as of v3.2.0 in favor of the
|
---|
54 | // `.progress-bar-striped` class, which you just add to an existing
|
---|
55 | // `.progress-bar`.
|
---|
56 | .progress-striped .progress-bar,
|
---|
57 | .progress-bar-striped {
|
---|
58 | #gradient > .striped();
|
---|
59 | background-size: 40px 40px;
|
---|
60 | }
|
---|
61 |
|
---|
62 | // Call animation for the active one
|
---|
63 | //
|
---|
64 | // `.progress.active .progress-bar` is deprecated as of v3.2.0 in favor of the
|
---|
65 | // `.progress-bar.active` approach.
|
---|
66 | .progress.active .progress-bar,
|
---|
67 | .progress-bar.active {
|
---|
68 | .animation(progress-bar-stripes 2s linear infinite);
|
---|
69 | }
|
---|
70 |
|
---|
71 |
|
---|
72 | // Variations
|
---|
73 | // -------------------------
|
---|
74 |
|
---|
75 | .progress-bar-success {
|
---|
76 | .progress-bar-variant(@progress-bar-success-bg);
|
---|
77 | }
|
---|
78 |
|
---|
79 | .progress-bar-info {
|
---|
80 | .progress-bar-variant(@progress-bar-info-bg);
|
---|
81 | }
|
---|
82 |
|
---|
83 | .progress-bar-warning {
|
---|
84 | .progress-bar-variant(@progress-bar-warning-bg);
|
---|
85 | }
|
---|
86 |
|
---|
87 | .progress-bar-danger {
|
---|
88 | .progress-bar-variant(@progress-bar-danger-bg);
|
---|
89 | }
|
---|