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