themes/default/less/progress-bars.less

   1 // PROGRESS BARS
   2 // -------------
   3
   4
   5 // ANIMATIONS
   6 // ----------
   7
   8 // Webkit
   9 @-webkit-keyframes progress-bar-stripes {
  10   from  { background-position: 0 0; }
  11   to    { background-position: 40px 0; }
  12 }
  13
  14 // Firefox
  15 @-moz-keyframes progress-bar-stripes {
  16   from  { background-position: 0 0; }
  17   to    { background-position: 40px 0; }
  18 }
  19
  20 // Spec
  21 @keyframes progress-bar-stripes {
  22   from  { background-position: 0 0; }
  23   to    { background-position: 40px 0; }
  24 }
  25
  26
  27
  28 // THE BARS
  29 // --------
  30
  31 // Outer container
  32 .progress {
  33   overflow: hide;
  34   height: 18px;
  35   margin-bottom: 18px;
  36   #gradient > .vertical(#f5f5f5, #f9f9f9);
  37   .box-shadow(inset 0 1px 2px rgba(0,0,0,.1));
  38   .border-radius(4px);
  39 }
  40
  41 // Bar of progress
  42 .progress .bar {
  43   width: 0%;
  44   height: 18px;
  45   color: @white;
  46   font-size: 12px;
  47   text-align: center;
  48   text-shadow: 0 -1px 0 rgba(0,0,0,.25);
  49   #gradient > .vertical(#149bdf, #0480be);
  50   .box-shadow(inset 0 -1px 0 rgba(0,0,0,.15));
  51   .box-sizing(border-box);
  52   .transition(width .6s ease);
  53 }
  54
  55
  56 // Striped bars
  57 .progress-striped .bar {
  58   #gradient > .striped(#62c462);
  59   .background-size(40px 40px);
  60 }
  61
  62 // Call animation for the active one
  63 .progress.active .bar {
  64   -webkit-animation: progress-bar-stripes 2s linear infinite;
  65      -moz-animation: progress-bar-stripes 2s linear infinite;
  66           animation: progress-bar-stripes 2s linear infinite;
  67 }
  68
  69
  70
  71 // COLORS
  72 // ------
  73
  74 // Danger (red)
  75 .progress-danger .bar {
  76   #gradient > .vertical(#ee5f5b, #c43c35);
  77 }
  78 .progress-danger.progress-striped .bar {
  79   #gradient > .striped(#ee5f5b);
  80 }
  81
  82 // Success (green)
  83 .progress-success .bar {
  84   #gradient > .vertical(#62c462, #57a957);
  85 }
  86 .progress-success.progress-striped .bar {
  87   #gradient > .striped(#62c462);
  88 }
  89
  90 // Info (teal)
  91 .progress-info .bar {
  92   #gradient > .vertical(#5bc0de, #339bb9);
  93 }
  94 .progress-info.progress-striped .bar {
  95   #gradient > .striped(#5bc0de);
  96 }
  97
  98 .progress-files .bar {
  99   #gradient > .vertical(@orange, darken(@orange, 10%));
 100 }
 101 .progress-leads .bar {
 102   #gradient > .vertical(@green, darken(@green, 10%));
 103 }
 104 .progress-notes .bar {
 105   #gradient > .vertical(@yellow, darken(@yellow, 10%));
 106 }
 107 .progress-contacts .bar {
 108   #gradient > .vertical(@blue, darken(@blue, 10%));
 109 }
 110 .progress-documents .bar {
 111   #gradient > .vertical(@purple, darken(@purple, 10%));
 112 }
 113 .progress-min .bar {
 114   #gradient > .vertical(@red, darken(@red, 10%));
 115 }
 116 .progress-mid .bar {
 117   #gradient > .vertical(@orange, darken(@orange, 10%));
 118 }
 119 .progress-near .bar {
 120   #gradient > .vertical(@yellow, darken(@yellow, 10%));
 121 }
 122 .progress-closed .bar {
 123   #gradient > .vertical(@green, darken(@green, 10%));
 124 }
 125 .progress-halt .bar {
 126   #gradient > .vertical(@gray, darken(@gray, 10%));
 127 }
 128