PageRenderTime 114ms CodeModel.GetById 47ms app.highlight 1ms RepoModel.GetById 1ms app.codeStats 0ms

/media/jui/less/progress-bars.less

https://bitbucket.org/eternaware/joomus
LESS | 122 lines | 79 code | 21 blank | 22 comment | 0 complexity | 2491c88f4051d01f36578b79e29c52ef MD5 | raw file
Possible License(s): LGPL-2.1
  1//
  2// Progress bars
  3// --------------------------------------------------
  4
  5
  6// ANIMATIONS
  7// ----------
  8
  9// Webkit
 10@-webkit-keyframes progress-bar-stripes {
 11  from  { background-position: 40px 0; }
 12  to    { background-position: 0 0; }
 13}
 14
 15// Firefox
 16@-moz-keyframes progress-bar-stripes {
 17  from  { background-position: 40px 0; }
 18  to    { background-position: 0 0; }
 19}
 20
 21// IE9
 22@-ms-keyframes progress-bar-stripes {
 23  from  { background-position: 40px 0; }
 24  to    { background-position: 0 0; }
 25}
 26
 27// Opera
 28@-o-keyframes progress-bar-stripes {
 29  from  { background-position: 0 0; }
 30  to    { background-position: 40px 0; }
 31}
 32
 33// Spec
 34@keyframes progress-bar-stripes {
 35  from  { background-position: 40px 0; }
 36  to    { background-position: 0 0; }
 37}
 38
 39
 40
 41// THE BARS
 42// --------
 43
 44// Outer container
 45.progress {
 46  overflow: hidden;
 47  height: @baseLineHeight;
 48  margin-bottom: @baseLineHeight;
 49  #gradient > .vertical(#f5f5f5, #f9f9f9);
 50  .box-shadow(inset 0 1px 2px rgba(0,0,0,.1));
 51  .border-radius(4px);
 52}
 53
 54// Bar of progress
 55.progress .bar {
 56  width: 0%;
 57  height: 100%;
 58  color: @white;
 59  float: left;
 60  font-size: 12px;
 61  text-align: center;
 62  text-shadow: 0 -1px 0 rgba(0,0,0,.25);
 63  #gradient > .vertical(#149bdf, #0480be);
 64  .box-shadow(inset 0 -1px 0 rgba(0,0,0,.15));
 65  .box-sizing(border-box);
 66  .transition(width .6s ease);
 67}
 68.progress .bar + .bar {
 69  .box-shadow(~"inset 1px 0 0 rgba(0,0,0,.15), inset 0 -1px 0 rgba(0,0,0,.15)");
 70}
 71
 72// Striped bars
 73.progress-striped .bar {
 74  #gradient > .striped(#149bdf);
 75  .background-size(40px 40px);
 76}
 77
 78// Call animation for the active one
 79.progress.active .bar {
 80  -webkit-animation: progress-bar-stripes 2s linear infinite;
 81     -moz-animation: progress-bar-stripes 2s linear infinite;
 82      -ms-animation: progress-bar-stripes 2s linear infinite;
 83       -o-animation: progress-bar-stripes 2s linear infinite;
 84          animation: progress-bar-stripes 2s linear infinite;
 85}
 86
 87
 88
 89// COLORS
 90// ------
 91
 92// Danger (red)
 93.progress-danger .bar, .progress .bar-danger {
 94  #gradient > .vertical(#ee5f5b, #c43c35);
 95}
 96.progress-danger.progress-striped .bar, .progress-striped .bar-danger {
 97  #gradient > .striped(#ee5f5b);
 98}
 99
100// Success (green)
101.progress-success .bar, .progress .bar-success {
102  #gradient > .vertical(#62c462, #57a957);
103}
104.progress-success.progress-striped .bar, .progress-striped .bar-success {
105  #gradient > .striped(#62c462);
106}
107
108// Info (teal)
109.progress-info .bar, .progress .bar-info {
110  #gradient > .vertical(#5bc0de, #339bb9);
111}
112.progress-info.progress-striped .bar, .progress-striped .bar-info {
113  #gradient > .striped(#5bc0de);
114}
115
116// Warning (orange)
117.progress-warning .bar, .progress .bar-warning {
118  #gradient > .vertical(lighten(@orange, 15%), @orange);
119}
120.progress-warning.progress-striped .bar, .progress-striped .bar-warning {
121  #gradient > .striped(lighten(@orange, 15%));
122}