diff options
Diffstat (limited to 'lib/progress-bars.less')
| -rw-r--r-- | lib/progress-bars.less | 100 |
1 files changed, 100 insertions, 0 deletions
diff --git a/lib/progress-bars.less b/lib/progress-bars.less new file mode 100644 index 000000000..cc524cc9f --- /dev/null +++ b/lib/progress-bars.less @@ -0,0 +1,100 @@ +@-webkit-keyframes progress-bar-stripes { + from { + background-position: 0 0; + } + to { + background-position: 40px 0; + } +} + +@-moz-keyframes progress-bar-stripes { + from { + background-position: 0 0; + } + to { + background-position: 40px 0; + } +} + +@keyframes progress-bar-stripes { + from { + background-position: 0 0; + } + to { + background-position: 40px 0; + } +} + +.progress { + height: 25px; + margin-bottom: 18px; + overflow: hidden; + .box-shadow(inset 0 1px 1px 0 rgba(0,0,0,.3), 0 1px 0 0 #fff); + #gradient > .vertical(#fff, #f5f5f5); + .border-radius(10px); + border: 1px solid #ddd; + border-color: rgba(0,0,0,.0); + &.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; + } + } + &.animated { + .bar { + .transition(width .6s ease); + } + } + &.danger, + &.error { + .bar { + #gradient > .vertical(#ee5f5b, #c43c35); + } + &.striped { + .bar { + .background-size(40px, 40px); + #gradient > .striped(#ee5f5b); + } + } + } + &.success { + .bar { + #gradient > .vertical(#62c462, #57a957); + } + &.striped { + .bar { + .background-size(40px, 40px); + #gradient > .striped(#62c462); + } + } + } + &.info { + .bar { + #gradient > .vertical(#5bc0de, #339bb9); + } + &.striped { + .bar { + .background-size(40px, 40px); + #gradient > .striped(#5bc0de); + } + } + } + &.striped { + .bar { + .background-size(40px, 40px); + #gradient > .striped(#62c462); + } + } + .bar { + width: 0%; + height: 100%; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + .gradientBar(#62c462, #57a957); + @shadow: inset 0 2px 0 rgba(255,255,255,.2), inset -1px -1px 0 rgba(0,0,0,.25),inset 1px 1px 0 rgba(0,0,0,.25); + .box-shadow(@shadow); + .border-radius(10px); + } +}
\ No newline at end of file |