diff options
Diffstat (limited to 'xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_progress-bars.scss')
| -rw-r--r-- | xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_progress-bars.scss | 95 |
1 files changed, 40 insertions, 55 deletions
diff --git a/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_progress-bars.scss b/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_progress-bars.scss index 567a1a5..7302b72 100644 --- a/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_progress-bars.scss +++ b/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_progress-bars.scss @@ -1,95 +1,80 @@ -// PROGRESS BARS -// ------------- +// +// Progress bars +// -------------------------------------------------- -// ANIMATIONS -// ---------- +// Bar animations +// ------------------------- -// Webkit +// WebKit @-webkit-keyframes progress-bar-stripes { - from { background-position: 0 0; } - to { background-position: 40px 0; } + from { background-position: 40px 0; } + to { background-position: 0 0; } } -// Firefox -@-moz-keyframes progress-bar-stripes { - from { background-position: 0 0; } - to { background-position: 40px 0; } -} - -// Spec +// Spec and IE10+ @keyframes progress-bar-stripes { - from { background-position: 0 0; } - to { background-position: 40px 0; } + from { background-position: 40px 0; } + to { background-position: 0 0; } } -// THE BARS -// -------- +// Bar itself +// ------------------------- // Outer container .progress { overflow: hidden; - height: 18px; - margin-bottom: 18px; - @include gradient-vertical(#f5f5f5, #f9f9f9); + height: $line-height-computed; + margin-bottom: $line-height-computed; + background-color: $progress-bg; + border-radius: $border-radius-base; @include box-shadow(inset 0 1px 2px rgba(0,0,0,.1)); - @include border-radius(4px); } // Bar of progress -.progress .bar { +.progress-bar { + float: left; width: 0%; - height: 18px; - color: $white; - font-size: 12px; + height: 100%; + font-size: $font-size-small; + line-height: $line-height-computed; + color: $progress-bar-color; text-align: center; - text-shadow: 0 -1px 0 rgba(0,0,0,.25); - @include gradient-vertical(#149bdf, #0480be); + background-color: $progress-bar-bg; @include box-shadow(inset 0 -1px 0 rgba(0,0,0,.15)); - @include box-sizing(border-box); @include transition(width .6s ease); } // Striped bars -.progress-striped .bar { - @include gradient-striped(#62c462); - @include background-size(40px 40px); +.progress-striped .progress-bar { + @include gradient-striped(); + background-size: 40px 40px; } // Call animation for the active one -.progress.active .bar { - -webkit-animation: progress-bar-stripes 2s linear infinite; - -moz-animation: progress-bar-stripes 2s linear infinite; - animation: progress-bar-stripes 2s linear infinite; +.progress.active .progress-bar { + @include animation(progress-bar-stripes 2s linear infinite); } -// COLORS -// ------ +// Variations +// ------------------------- -// Danger (red) -.progress-danger .bar { - @include gradient-vertical(#ee5f5b, #c43c35); -} -.progress-danger.progress-striped .bar { - @include gradient-striped(#ee5f5b); +.progress-bar-success { + @include progress-bar-variant($progress-bar-success-bg); } -// Success (green) -.progress-success .bar { - @include gradient-vertical(#62c462, #57a957); +.progress-bar-info { + @include progress-bar-variant($progress-bar-info-bg); } -.progress-success.progress-striped .bar { - @include gradient-striped(#62c462); + +.progress-bar-warning { + @include progress-bar-variant($progress-bar-warning-bg); } -// Info (teal) -.progress-info .bar { - @include gradient-vertical(#5bc0de, #339bb9); +.progress-bar-danger { + @include progress-bar-variant($progress-bar-danger-bg); } -.progress-info.progress-striped .bar { - @include gradient-striped(#5bc0de); -}
\ No newline at end of file |