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