diff options
Diffstat (limited to 'assets/stylesheets/bootstrap/_progress.scss')
-rw-r--r-- | assets/stylesheets/bootstrap/_progress.scss | 141 |
1 files changed, 14 insertions, 127 deletions
diff --git a/assets/stylesheets/bootstrap/_progress.scss b/assets/stylesheets/bootstrap/_progress.scss index c2364fe..02e4c3b 100644 --- a/assets/stylesheets/bootstrap/_progress.scss +++ b/assets/stylesheets/bootstrap/_progress.scss @@ -1,145 +1,32 @@ -// // Progress animations -// - @keyframes progress-bar-stripes { - from { background-position: $spacer-y 0; } + from { background-position: $progress-height 0; } to { background-position: 0 0; } } - -// // Basic progress bar -// - .progress { - display: block; - width: 100%; - height: $spacer-y; // todo: make a new var for this - margin-bottom: $spacer-y; -} -.progress[value] { - // Set overall background - background-color: $progress-bg; - // Remove Firefox and Opera border - border: 0; - // Reset the default appearance - appearance: none; - // Set overall border radius - @include border-radius($progress-border-radius); -} - -// Filled-in portion of the bar -.progress[value]::-ms-fill { - background-color: $progress-bar-color; - // Remove right-hand border of value bar from IE10+/Edge - border: 0; -} -.progress[value]::-moz-progress-bar { - background-color: $progress-bar-color; - @include border-left-radius($progress-border-radius); -} -.progress[value]::-webkit-progress-value { - background-color: $progress-bar-color; - @include border-left-radius($progress-border-radius); -} -// Tweaks for full progress bar -.progress[value="100"]::-moz-progress-bar { - @include border-right-radius($progress-border-radius); -} -.progress[value="100"]::-webkit-progress-value { - @include border-right-radius($progress-border-radius); -} - -// Unfilled portion of the bar -.progress[value]::-webkit-progress-bar { + display: flex; + overflow: hidden; // force rounded corners by cropping it + font-size: $progress-font-size; + line-height: $progress-height; + text-align: center; background-color: $progress-bg; @include border-radius($progress-border-radius); - @include box-shadow($progress-box-shadow); } -base::-moz-progress-bar, // Absurd-but-syntactically-valid selector to make these styles Firefox-only -.progress[value] { - background-color: $progress-bg; - @include border-radius($progress-border-radius); - @include box-shadow($progress-box-shadow); -} - -// IE9 hacks to accompany custom markup. We don't need to scope this via media queries, but I feel better doing it anyway. -@media screen and (min-width:0\0) { - .progress { - background-color: $progress-bg; - @include border-radius($progress-border-radius); - @include box-shadow($progress-box-shadow); - } - .progress-bar { - display: inline-block; - height: $spacer-y; - text-indent: -999rem; // Simulate hiding of value as in native `<progress>` - background-color: $progress-bar-color; - @include border-left-radius($progress-border-radius); - } - .progress[width="100%"] { - @include border-right-radius($progress-border-radius); - } +.progress-bar { + height: $progress-height; + color: $progress-bar-color; + background-color: $progress-bar-bg; } - -// // Striped -// - -.progress-striped[value]::-webkit-progress-value { +.progress-bar-striped { @include gradient-striped(); - background-size: $spacer-y $spacer-y; -} -.progress-striped[value]::-moz-progress-bar { - @include gradient-striped(); - background-size: $spacer-y $spacer-y; -} -.progress-striped[value]::-ms-fill { - @include gradient-striped(); - background-size: $spacer-y $spacer-y; -} -// IE9 -@media screen and (min-width:0\0) { - .progress-bar-striped { - @include gradient-striped(); - background-size: $spacer-y $spacer-y; - } + background-size: $progress-height $progress-height; } - -// // Animated -// - -.progress-animated[value]::-webkit-progress-value { - animation: progress-bar-stripes 2s linear infinite; -} -.progress-animated[value]::-moz-progress-bar { - animation: progress-bar-stripes 2s linear infinite; -} -// IE9 -@media screen and (min-width:0\0) { - .progress-animated .progress-bar-striped { - animation: progress-bar-stripes 2s linear infinite; - } -} - - -// -// Variations -// - -.progress-success { - @include progress-variant($progress-bar-success-bg); -} -.progress-info { - @include progress-variant($progress-bar-info-bg); -} -.progress-warning { - @include progress-variant($progress-bar-warning-bg); -} -.progress-danger { - @include progress-variant($progress-bar-danger-bg); +.progress-bar-animated { + animation: progress-bar-stripes $progress-bar-animation-timing; } |