|
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687 |
- //
- // Progress bars
- // --------------------------------------------------
-
-
- // Bar animations
- // -------------------------
-
- // WebKit
- @-webkit-keyframes progress-bar-stripes {
- from { background-position: 40px 0; }
- to { background-position: 0 0; }
- }
-
- // Spec and IE10+
- @keyframes progress-bar-stripes {
- from { background-position: 40px 0; }
- to { background-position: 0 0; }
- }
-
-
- // Bar itself
- // -------------------------
-
- // Outer container
- .progress {
- overflow: hidden;
- height: @line-height-computed;
- margin-bottom: @line-height-computed;
- background-color: @progress-bg;
- border-radius: @progress-border-radius;
- .box-shadow(inset 0 1px 2px rgba(0,0,0,.1));
- }
-
- // Bar of progress
- .progress-bar {
- float: left;
- width: 0%;
- height: 100%;
- font-size: @font-size-small;
- line-height: @line-height-computed;
- color: @progress-bar-color;
- text-align: center;
- background-color: @progress-bar-bg;
- .box-shadow(inset 0 -1px 0 rgba(0,0,0,.15));
- .transition(width .6s ease);
- }
-
- // Striped bars
- //
- // `.progress-striped .progress-bar` is deprecated as of v3.2.0 in favor of the
- // `.progress-bar-striped` class, which you just add to an existing
- // `.progress-bar`.
- .progress-striped .progress-bar,
- .progress-bar-striped {
- #gradient > .striped();
- background-size: 40px 40px;
- }
-
- // Call animation for the active one
- //
- // `.progress.active .progress-bar` is deprecated as of v3.2.0 in favor of the
- // `.progress-bar.active` approach.
- .progress.active .progress-bar,
- .progress-bar.active {
- .animation(progress-bar-stripes 2s linear infinite);
- }
-
-
- // Variations
- // -------------------------
-
- .progress-bar-success {
- .progress-bar-variant(@progress-bar-success-bg);
- }
-
- .progress-bar-info {
- .progress-bar-variant(@progress-bar-info-bg);
- }
-
- .progress-bar-warning {
- .progress-bar-variant(@progress-bar-warning-bg);
- }
-
- .progress-bar-danger {
- .progress-bar-variant(@progress-bar-danger-bg);
- }
|