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