[fa375fe] | 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 | }
|
---|