Skip to content

B
bootstrap
Commit f26821a8 authored by Mark Otto's avatar Mark Otto
Browse files
Options

fix progress bar animated biznas

parent 72a92f55
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 167 additions and 160 deletions
dist/css/bootstrap.css
View file @ f26821a8
......@@ -4,7 +4,7 @@
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
*/
/*! normalize.css v3.0.1 | MIT License | git.io/normalize */
/*! normalize.css v3.0.2 | MIT License | git.io/normalize */
html {
font-family: sans-serif;
-webkit-text-size-adjust: 100%;
......@@ -22,6 +22,7 @@ footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
......@@ -43,7 +44,7 @@ template {
display: none;
}
a {
background: transparent;
background-color: transparent;
}
a:active,
a:hover {
......@@ -187,8 +188,11 @@ td,
th {
padding: 0;
}
/*! Source: https://github.com/h5bp/html5-boilerplate/blob/master/src/css/main.css */
@media print {
* {
*,
*:before,
*:after {
color: #000 !important;
text-shadow: none !important;
background: transparent !important;
......@@ -586,10 +590,6 @@ blockquote footer:before {
.blockquote-reverse footer:after {
content: '\00A0 \2014';
}
blockquote:before,
blockquote:after {
content: "";
}
address {
margin-bottom: 24px;
font-style: normal;
......@@ -1494,6 +1494,7 @@ table th[class*="col-"] {
background-color: #ebcccc;
}
.table-responsive {
min-height: .01%;
overflow-x: auto;
}
@media screen and (max-width: 47.9em) {
......@@ -2516,9 +2517,11 @@ input[type="button"].btn-block {
}
.collapse {
display: none;
visibility: hidden;
}
.collapse.in {
display: block;
visibility: visible;
}
tr.collapse.in {
display: table-row;
......@@ -2533,6 +2536,15 @@ tbody.collapse.in {
-webkit-transition: height .35s ease;
-o-transition: height .35s ease;
transition: height .35s ease;
-webkit-transition-timing-function: ease;
-o-transition-timing-function: ease;
transition-timing-function: ease;
-webkit-transition-duration: .35s;
-o-transition-duration: .35s;
transition-duration: .35s;
-webkit-transition-property: height, visibility;
-o-transition-property: height, visibility;
transition-property: height, visibility;
}
.dropdown {
position: relative;
......@@ -3110,9 +3122,11 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
}
.tab-content > .tab-pane {
display: none;
visibility: hidden;
}
.tab-content > .active {
display: block;
visibility: visible;
}
.nav-tabs .dropdown-menu {
margin-top: -1px;
......@@ -3160,6 +3174,7 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
height: auto !important;
padding-bottom: 0;
overflow: visible !important;
visibility: visible !important;
}
.navbar-collapse.in {
overflow-y: visible;
......@@ -3212,8 +3227,6 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
right: 0;
left: 0;
z-index: 1030;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
@media (min-width: 48em) {
.navbar-fixed-top,
......@@ -4228,40 +4241,10 @@ a.list-group-item.active > .badge,
border-top-left-radius: .25rem;
border-bottom-left-radius: .25rem;
}
.progress[value="0"]::-webkit-progress-value {
min-width: 2rem;
color: #818a91;
background-color: transparent;
background-image: none;
}
.progress[value="100"]::-webkit-progress-value {
border-top-right-radius: .25rem;
border-bottom-right-radius: .25rem;
}
/* Commented out for now because linter.
@-moz-document url-prefix() {
.progress[value] {
background-color: #eee;
.border-radius(@border-radius-base);
.box-shadow(inset 0 .1rem .1rem rgba(0,0,0,.1));
}
.progress[value]::-moz-progress-bar {
background-color: #0074d9;
border-top-left-radius: @border-radius-base;
border-bottom-left-radius: @border-radius-base;
}
.progress[value="0"]::-moz-progress-bar {
color: @gray-light;
min-width: 2rem;
background-color: transparent;
background-image: none;
}
.progress[value="100"]::-moz-progress-bar {
border-top-right-radius: @border-radius-base;
border-bottom-right-radius: @border-radius-base;
}
}
*/
@media screen and (min-width:0\0) {
.progress {
background-color: #eee;
......@@ -4368,29 +4351,35 @@ a.list-group-item.active > .badge,
background-color: #d9534f;
}
}
.media,
.media-body {
overflow: hidden;
zoom: 1;
}
.media,
.media .media {
.media {
margin-top: 15px;
}
.media:first-child {
margin-top: 0;
}
.media-object {
display: block;
}
.media-heading {
margin: 0 0 5px;
.media-right,
.media > .pull-right {
padding-left: 10px;
}
.media-left,
.media > .pull-left {
margin-right: 10px;
padding-right: 10px;
}
.media > .pull-right {
margin-left: 10px;
.media-left,
.media-right,
.media-body {
display: table-cell;
vertical-align: top;
}
.media-middle {
vertical-align: middle;
}
.media-bottom {
vertical-align: bottom;
}
.media-heading {
margin-top: 0;
margin-bottom: 5px;
}
.media-list {
padding-left: 0;
......@@ -4582,7 +4571,8 @@ a.list-group-item-danger.active:focus {
.embed-responsive .embed-responsive-item,
.embed-responsive iframe,
.embed-responsive embed,
.embed-responsive object {
.embed-responsive object,
.embed-responsive video {
position: absolute;
top: 0;
bottom: 0;
......@@ -4629,23 +4619,27 @@ button.close {
right: 0;
bottom: 0;
left: 0;
z-index: 1050;
z-index: 1040;
display: none;
overflow: hidden;
-webkit-overflow-scrolling: touch;
outline: 0;
}
.modal.fade .modal-dialog {
-webkit-transform: translate3d(0, -25%, 0);
-webkit-transform: translate(0, -25%);
-webkit-transform: transition .3s ease-out;
-ms-transform: translate(0, -25%);
-ms-transform: transition .3s ease-out;
-o-transform: translate(0, -25%);
-o-transform: transition .3s ease-out;
transform: translate3d(0, -25%, 0);
transform: translate(0, -25%);
transform: transition .3s ease-out;
}
.modal.in .modal-dialog {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-transform: translate(0, 0);
-ms-transform: translate(0, 0);
-o-transform: translate(0, 0);
transform: translate(0, 0);
}
.modal-open .modal {
overflow-x: hidden;
......@@ -4673,7 +4667,6 @@ button.close {
right: 0;
bottom: 0;
left: 0;
z-index: 1040;
background-color: #000;
}
.modal-backdrop.fade {
......@@ -4733,7 +4726,7 @@ button.close {
width: 300px;
}
}
@media (min-width: 48em) {
@media (min-width: 62em) {
.modal-lg {
width: 900px;
}
......
dist/css/bootstrap.css.map
View file @ f26821a8
This diff was suppressed by a .gitattributes entry.
dist/css/bootstrap.min.css
View file @ f26821a8
This source diff could not be displayed because it is too large. You can view the blob instead.
docs/_includes/customizer-variables.html
View file @ f26821a8
......@@ -71,6 +71,11 @@
<input id="input-@link-hover-color" type="text" value="darken(@link-color, 15%)" data-var="@link-hover-color" class="form-control"/>
<p class="help-block">Link hover color set via <code>darken()</code> function.</p>
</div>
<div class="bs-customizer-input">
<label for="input-@link-hover-decoration">@link-hover-decoration</label>
<input id="input-@link-hover-decoration" type="text" value="underline" data-var="@link-hover-decoration" class="form-control"/>
<p class="help-block">Link hover decoration.</p>
</div>
</div>
<h2 id="global-settings">Global settings</h2>
<p>Quickly modify global styling by enabling or disabling features.</p>
......@@ -1251,6 +1256,11 @@
<input id="input-@progress-bar-color" type="text" value="#fff" data-var="@progress-bar-color" class="form-control"/>
<p class="help-block">Progress bar text color</p>
</div>
<div class="bs-customizer-input">
<label for="input-@progress-border-radius">@progress-border-radius</label>
<input id="input-@progress-border-radius" type="text" value="@border-radius-base" data-var="@progress-border-radius" class="form-control"/>
<p class="help-block">Variable for setting rounded corners on progress bar.</p>
</div>
<div class="bs-customizer-input">
<label for="input-@progress-bar-bg">@progress-bar-bg</label>
<input id="input-@progress-bar-bg" type="text" value="@brand-primary" data-var="@progress-bar-bg" class="form-control"/>
......
docs/assets/css/docs.min.css
View file @ f26821a8
This diff is collapsed.
docs/assets/js/customize.min.js
View file @ f26821a8
This diff is collapsed.
docs/assets/js/docs.min.js
View file @ f26821a8
This diff is collapsed.
docs/assets/js/raw-files.min.js
View file @ f26821a8
This diff is collapsed.
docs/assets/js/src/application.js
View file @ f26821a8
......@@ -87,7 +87,7 @@
// Activate animated progress bar
$('.bs-docs-activate-animated-progressbar').on('click', function () {
$(this).siblings('.progress').find('.progress-bar-striped').toggleClass('active')
$(this).prev('.progress-striped').toggleClass('progress-animated')
})
// Config ZeroClipboard
......
docs/components/progress.md
View file @ f26821a8
......@@ -50,10 +50,19 @@ Uses a gradient to create a striped effect.
<progress class="progress progress-striped progress-danger" value="100" max="100">100%</progress>
{% endexample %}
The striped gradient can also be animated. Add <code>.progress-animated</code> to <code>.progress</code> to animate the stripes right to left via CSS3 animations.
### Animated stripes
The striped gradient can also be animated. Add `.progress-animated` to `.progress` to animate the stripes right to left via CSS3 animations.
**Animated progress bars do not work in IE9, older versions of Firefox, and Opera 12** as they don't support CSS3 animations.
{% example html %}
<div class="bs-example">
<progress class="progress progress-striped" value="25" max="100">25%</progress>
<button type="button" class="btn btn-secondary bs-docs-activate-animated-progressbar" data-toggle="button" aria-pressed="false" autocomplete="off">
Toggle animation
</button>
</div>
{% highlight html %}
<progress class="progress progress-striped progress-animated" value="25" max="100">25%</progress>
{% endexample %}
{% endhighlight %}
docs/dist/css/bootstrap.css
View file @ f26821a8
......@@ -4,7 +4,7 @@
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
*/
/*! normalize.css v3.0.1 | MIT License | git.io/normalize */
/*! normalize.css v3.0.2 | MIT License | git.io/normalize */
html {
font-family: sans-serif;
-webkit-text-size-adjust: 100%;
......@@ -22,6 +22,7 @@ footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
......@@ -43,7 +44,7 @@ template {
display: none;
}
a {
background: transparent;
background-color: transparent;
}
a:active,
a:hover {
......@@ -187,8 +188,11 @@ td,
th {
padding: 0;
}
/*! Source: https://github.com/h5bp/html5-boilerplate/blob/master/src/css/main.css */
@media print {
* {
*,
*:before,
*:after {
color: #000 !important;
text-shadow: none !important;
background: transparent !important;
......@@ -586,10 +590,6 @@ blockquote footer:before {
.blockquote-reverse footer:after {
content: '\00A0 \2014';
}
blockquote:before,
blockquote:after {
content: "";
}
address {
margin-bottom: 24px;
font-style: normal;
......@@ -1494,6 +1494,7 @@ table th[class*="col-"] {
background-color: #ebcccc;
}
.table-responsive {
min-height: .01%;
overflow-x: auto;
}
@media screen and (max-width: 47.9em) {
......@@ -2516,9 +2517,11 @@ input[type="button"].btn-block {
}
.collapse {
display: none;
visibility: hidden;
}
.collapse.in {
display: block;
visibility: visible;
}
tr.collapse.in {
display: table-row;
......@@ -2533,6 +2536,15 @@ tbody.collapse.in {
-webkit-transition: height .35s ease;
-o-transition: height .35s ease;
transition: height .35s ease;
-webkit-transition-timing-function: ease;
-o-transition-timing-function: ease;
transition-timing-function: ease;
-webkit-transition-duration: .35s;
-o-transition-duration: .35s;
transition-duration: .35s;
-webkit-transition-property: height, visibility;
-o-transition-property: height, visibility;
transition-property: height, visibility;
}
.dropdown {
position: relative;
......@@ -3110,9 +3122,11 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
}
.tab-content > .tab-pane {
display: none;
visibility: hidden;
}
.tab-content > .active {
display: block;
visibility: visible;
}
.nav-tabs .dropdown-menu {
margin-top: -1px;
......@@ -3160,6 +3174,7 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
height: auto !important;
padding-bottom: 0;
overflow: visible !important;
visibility: visible !important;
}
.navbar-collapse.in {
overflow-y: visible;
......@@ -3212,8 +3227,6 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
right: 0;
left: 0;
z-index: 1030;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
@media (min-width: 48em) {
.navbar-fixed-top,
......@@ -4228,40 +4241,10 @@ a.list-group-item.active > .badge,
border-top-left-radius: .25rem;
border-bottom-left-radius: .25rem;
}
.progress[value="0"]::-webkit-progress-value {
min-width: 2rem;
color: #818a91;
background-color: transparent;
background-image: none;
}
.progress[value="100"]::-webkit-progress-value {
border-top-right-radius: .25rem;
border-bottom-right-radius: .25rem;
}
/* Commented out for now because linter.
@-moz-document url-prefix() {
.progress[value] {
background-color: #eee;
.border-radius(@border-radius-base);
.box-shadow(inset 0 .1rem .1rem rgba(0,0,0,.1));
}
.progress[value]::-moz-progress-bar {
background-color: #0074d9;
border-top-left-radius: @border-radius-base;
border-bottom-left-radius: @border-radius-base;
}
.progress[value="0"]::-moz-progress-bar {
color: @gray-light;
min-width: 2rem;
background-color: transparent;
background-image: none;
}
.progress[value="100"]::-moz-progress-bar {
border-top-right-radius: @border-radius-base;
border-bottom-right-radius: @border-radius-base;
}
}
*/
@media screen and (min-width:0\0) {
.progress {
background-color: #eee;
......@@ -4368,29 +4351,35 @@ a.list-group-item.active > .badge,
background-color: #d9534f;
}
}
.media,
.media-body {
overflow: hidden;
zoom: 1;
}
.media,
.media .media {
.media {
margin-top: 15px;
}
.media:first-child {
margin-top: 0;
}
.media-object {
display: block;
}
.media-heading {
margin: 0 0 5px;
.media-right,
.media > .pull-right {
padding-left: 10px;
}
.media-left,
.media > .pull-left {
margin-right: 10px;
padding-right: 10px;
}
.media > .pull-right {
margin-left: 10px;
.media-left,
.media-right,
.media-body {
display: table-cell;
vertical-align: top;
}
.media-middle {
vertical-align: middle;
}
.media-bottom {
vertical-align: bottom;
}
.media-heading {
margin-top: 0;
margin-bottom: 5px;
}
.media-list {
padding-left: 0;
......@@ -4582,7 +4571,8 @@ a.list-group-item-danger.active:focus {
.embed-responsive .embed-responsive-item,
.embed-responsive iframe,
.embed-responsive embed,
.embed-responsive object {
.embed-responsive object,
.embed-responsive video {
position: absolute;
top: 0;
bottom: 0;
......@@ -4629,23 +4619,27 @@ button.close {
right: 0;
bottom: 0;
left: 0;
z-index: 1050;
z-index: 1040;
display: none;
overflow: hidden;
-webkit-overflow-scrolling: touch;
outline: 0;
}
.modal.fade .modal-dialog {
-webkit-transform: translate3d(0, -25%, 0);
-webkit-transform: translate(0, -25%);
-webkit-transform: transition .3s ease-out;
-ms-transform: translate(0, -25%);
-ms-transform: transition .3s ease-out;
-o-transform: translate(0, -25%);
-o-transform: transition .3s ease-out;
transform: translate3d(0, -25%, 0);
transform: translate(0, -25%);
transform: transition .3s ease-out;
}
.modal.in .modal-dialog {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-transform: translate(0, 0);
-ms-transform: translate(0, 0);
-o-transform: translate(0, 0);
transform: translate(0, 0);
}
.modal-open .modal {
overflow-x: hidden;
......@@ -4673,7 +4667,6 @@ button.close {
right: 0;
bottom: 0;
left: 0;
z-index: 1040;
background-color: #000;
}
.modal-backdrop.fade {
......@@ -4733,7 +4726,7 @@ button.close {
width: 300px;
}
}
@media (min-width: 48em) {
@media (min-width: 62em) {
.modal-lg {
width: 900px;
}
......
docs/dist/css/bootstrap.css.map
View file @ f26821a8
This diff was suppressed by a .gitattributes entry.
docs/dist/css/bootstrap.min.css
View file @ f26821a8
This source diff could not be displayed because it is too large. You can view the blob instead.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment