git.roojs.org Git - bootswatch/blob - bower_components/bootstrap/less/progress-bars.less

   1 //
   2 // Progress bars
   3 // --------------------------------------------------
   4
   5
   6 // Bar 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 // Bar itself
  42 // -------------------------
  43
  44 // Outer container
  45 .progress {
  46   overflow: hidden;
  47   height: @line-height-computed;
  48   margin-bottom: @line-height-computed;
  49   background-color: @progress-bg;
  50   border-radius: @border-radius-base;
  51   .box-shadow(inset 0 1px 2px rgba(0,0,0,.1));
  52 }
  53
  54 // Bar of progress
  55 .progress-bar {
  56   float: left;
  57   width: 0%;
  58   height: 100%;
  59   font-size: @font-size-small;
  60   color: @progress-bar-color;
  61   text-align: center;
  62   background-color: @progress-bar-bg;
  63   .box-shadow(inset 0 -1px 0 rgba(0,0,0,.15));
  64   .transition(width .6s ease);
  65 }
  66
  67 // Striped bars
  68 .progress-striped .progress-bar {
  69   #gradient > .striped(@progress-bar-bg);
  70   .background-size(40px 40px);
  71 }
  72
  73 // Call animation for the active one
  74 .progress.active .progress-bar {
  75   -webkit-animation: progress-bar-stripes 2s linear infinite;
  76      -moz-animation: progress-bar-stripes 2s linear infinite;
  77       -ms-animation: progress-bar-stripes 2s linear infinite;
  78        -o-animation: progress-bar-stripes 2s linear infinite;
  79           animation: progress-bar-stripes 2s linear infinite;
  80 }
  81
  82
  83
  84 // Variations
  85 // -------------------------
  86
  87 // Danger (red)
  88 .progress-bar-danger {
  89   .progress-bar-variant(@progress-bar-danger-bg);
  90 }
  91
  92 // Success (green)
  93 .progress-bar-success {
  94   .progress-bar-variant(@progress-bar-success-bg);
  95 }
  96
  97 // Warning (orange)
  98 .progress-bar-warning {
  99   .progress-bar-variant(@progress-bar-warning-bg);
 100 }
 101
 102 // Info (teal)
 103 .progress-bar-info {
 104   .progress-bar-variant(@progress-bar-info-bg);
 105 }