rbowen / centos / centos.org

Forked from centos/centos.org 4 years ago
Clone

Blame content/assets/css/bootstrap/_progress-bars.scss

e8ec7a
//
e8ec7a
// Progress bars
e8ec7a
// --------------------------------------------------
e8ec7a
e8ec7a
e8ec7a
// Bar animations
e8ec7a
// -------------------------
e8ec7a
e8ec7a
// Webkit
e8ec7a
@-webkit-keyframes progress-bar-stripes {
e8ec7a
  from  { background-position: 40px 0; }
e8ec7a
  to    { background-position: 0 0; }
e8ec7a
}
e8ec7a
e8ec7a
// Firefox
e8ec7a
@-moz-keyframes progress-bar-stripes {
e8ec7a
  from  { background-position: 40px 0; }
e8ec7a
  to    { background-position: 0 0; }
e8ec7a
}
e8ec7a
e8ec7a
// Opera
e8ec7a
@-o-keyframes progress-bar-stripes {
e8ec7a
  from  { background-position: 0 0; }
e8ec7a
  to    { background-position: 40px 0; }
e8ec7a
}
e8ec7a
e8ec7a
// Spec and IE10+
e8ec7a
@keyframes progress-bar-stripes {
e8ec7a
  from  { background-position: 40px 0; }
e8ec7a
  to    { background-position: 0 0; }
e8ec7a
}
e8ec7a
e8ec7a
e8ec7a
e8ec7a
// Bar itself
e8ec7a
// -------------------------
e8ec7a
e8ec7a
// Outer container
e8ec7a
.progress {
e8ec7a
  overflow: hidden;
e8ec7a
  height: $line-height-computed;
e8ec7a
  margin-bottom: $line-height-computed;
e8ec7a
  background-color: $progress-bg;
e8ec7a
  border-radius: $border-radius-base;
e8ec7a
  @include box-shadow(inset 0 1px 2px rgba(0,0,0,.1));
e8ec7a
}
e8ec7a
e8ec7a
// Bar of progress
e8ec7a
.progress-bar {
e8ec7a
  float: left;
e8ec7a
  width: 0%;
e8ec7a
  height: 100%;
e8ec7a
  font-size: $font-size-small;
e8ec7a
  color: $progress-bar-color;
e8ec7a
  text-align: center;
e8ec7a
  background-color: $progress-bar-bg;
e8ec7a
  @include box-shadow(inset 0 -1px 0 rgba(0,0,0,.15));
e8ec7a
  @include transition(width .6s ease);
e8ec7a
}
e8ec7a
e8ec7a
// Striped bars
e8ec7a
.progress-striped .progress-bar {
e8ec7a
  @include gradient-striped($progress-bar-bg);
e8ec7a
  background-size: 40px 40px;
e8ec7a
}
e8ec7a
e8ec7a
// Call animation for the active one
e8ec7a
.progress.active .progress-bar {
e8ec7a
  -webkit-animation: progress-bar-stripes 2s linear infinite;
e8ec7a
     -moz-animation: progress-bar-stripes 2s linear infinite;
e8ec7a
      -ms-animation: progress-bar-stripes 2s linear infinite;
e8ec7a
       -o-animation: progress-bar-stripes 2s linear infinite;
e8ec7a
          animation: progress-bar-stripes 2s linear infinite;
e8ec7a
}
e8ec7a
e8ec7a
e8ec7a
e8ec7a
// Variations
e8ec7a
// -------------------------
e8ec7a
e8ec7a
.progress-bar-success {
e8ec7a
  @include progress-bar-variant($progress-bar-success-bg);
e8ec7a
}
e8ec7a
e8ec7a
.progress-bar-info {
e8ec7a
  @include progress-bar-variant($progress-bar-info-bg);
e8ec7a
}
e8ec7a
e8ec7a
.progress-bar-warning {
e8ec7a
  @include progress-bar-variant($progress-bar-warning-bg);
e8ec7a
}
e8ec7a
e8ec7a
.progress-bar-danger {
e8ec7a
  @include progress-bar-variant($progress-bar-danger-bg);
e8ec7a
}