Welcome to mirror list, hosted at ThFree Co, Russian Federation.

github.com/twbs/bootstrap-rubygem.git - Unnamed repository; edit this file 'description' to name the repository.
summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat (limited to 'assets/stylesheets/bootstrap/_progress.scss')
-rw-r--r--assets/stylesheets/bootstrap/_progress.scss141
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;
}