shop.balmet.com

Unnamed repository; edit this file 'description' to name the repository.
Log | Files | Refs | README

_progress-bars.scss (2079B)

      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 // Spec and IE10+
     16 @keyframes progress-bar-stripes {
     17   from  { background-position: 40px 0; }
     18   to    { background-position: 0 0; }
     19 }
     20 
     21 
     22 // Bar itself
     23 // -------------------------
     24 
     25 // Outer container
     26 .progress {
     27   overflow: hidden;
     28   height: $line-height-computed;
     29   margin-bottom: $line-height-computed;
     30   background-color: $progress-bg;
     31   border-radius: $progress-border-radius;
     32   @include box-shadow(inset 0 1px 2px rgba(0,0,0,.1));
     33 }
     34 
     35 // Bar of progress
     36 .progress-bar {
     37   float: left;
     38   width: 0%;
     39   height: 100%;
     40   font-size: $font-size-small;
     41   line-height: $line-height-computed;
     42   color: $progress-bar-color;
     43   text-align: center;
     44   background-color: $progress-bar-bg;
     45   @include box-shadow(inset 0 -1px 0 rgba(0,0,0,.15));
     46   @include transition(width .6s ease);
     47 }
     48 
     49 // Striped bars
     50 //
     51 // `.progress-striped .progress-bar` is deprecated as of v3.2.0 in favor of the
     52 // `.progress-bar-striped` class, which you just add to an existing
     53 // `.progress-bar`.
     54 .progress-striped .progress-bar,
     55 .progress-bar-striped {
     56   @include gradient-striped;
     57   background-size: 40px 40px;
     58 }
     59 
     60 // Call animation for the active one
     61 //
     62 // `.progress.active .progress-bar` is deprecated as of v3.2.0 in favor of the
     63 // `.progress-bar.active` approach.
     64 .progress.active .progress-bar,
     65 .progress-bar.active {
     66   @include animation(progress-bar-stripes 2s linear infinite);
     67 }
     68 
     69 
     70 // Variations
     71 // -------------------------
     72 
     73 .progress-bar-success {
     74   @include progress-bar-variant($progress-bar-success-bg);
     75 }
     76 
     77 .progress-bar-info {
     78   @include progress-bar-variant($progress-bar-info-bg);
     79 }
     80 
     81 .progress-bar-warning {
     82   @include progress-bar-variant($progress-bar-warning-bg);
     83 }
     84 
     85 .progress-bar-danger {
     86   @include progress-bar-variant($progress-bar-danger-bg);
     87 }