public/less/progress-bars.less

   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 }