Contents

// PROGRESS BARS
// -------------

// ANIMATIONS
// ----------

// Webkit
@-webkit-keyframes progress-bar-stripes
  from
    background-position: 0 0
  to
    background-position: 40px 0


// Firefox
@-moz-keyframes progress-bar-stripes
  from
    background-position: 0 0
  to
    background-position: 40px 0


// Spec
@keyframes progress-bar-stripes
  from
    background-position: 0 0
  to
    background-position: 40px 0


// THE BARS
// --------

// Outer container
.progress
  overflow: hidden
  height: 18px
  margin-bottom: 18px
  +gradient-vertical(#f5f5f5, #f9f9f9)
  +box-shadow(inset 0 1px 2px rgba(0, 0, 0, 0.1))
  +border-radius(4px)

// Bar of progress
.progress .bar
  width: 0%
  height: 18px
  color: $white
  font-size: 12px
  text-align: center
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25)
  +gradient-vertical(#149bdf, #0480be)
  +box-shadow(inset 0 -1px 0 rgba(0, 0, 0, 0.15))
  +box-sizing(border-box)
  +transition(width 0.6s ease)

// Striped bars
.progress-striped .bar
  +gradient-striped(#62c462)
  +background-size(40px 40px)

// Call animation for the active one
.progress.active .bar
  -webkit-animation: progress-bar-stripes 2s linear infinite
  -moz-animation: progress-bar-stripes 2s linear infinite
  animation: progress-bar-stripes 2s linear infinite

// COLORS
// ------

// Danger (red)
.progress-danger .bar
  +gradient-vertical(#ee5f5b, #c43c35)

.progress-danger.progress-striped .bar
  +gradient-striped(#ee5f5b)

// Success (green)
.progress-success .bar
  +gradient-vertical(#62c462, #57a957)

.progress-success.progress-striped .bar
  +gradient-striped(#62c462)

// Info (teal)
.progress.info .bar
  +gradient-vertical(#5bc0de, #339bb9)

.progress-info.progress-striped .bar
  +gradient-striped(#5bc0de)

Version data entries

2 entries across 2 versions & 1 rubygems

Version	Path
sass_twitter_bootstrap-0.1.alpha.2	stylesheets/sass_twitter_bootstrap/_progress-bars.sass
sass_twitter_bootstrap-0.1.alpha.1	stylesheets/sass_twitter_bootstrap/_progress-bars.sass