git.roojs.org Git - roojs1/blob - scss/bootstrap/_progress.scss

   1 // Disable animation if transitions are disabled
   2 @if $enable-transitions {
   3   @keyframes progress-bar-stripes {
   4     from { background-position: $progress-height 0; }
   5     to { background-position: 0 0; }
   6   }
   7 }
   8
   9 .progress {
  10   display: flex;
  11   height: $progress-height;
  12   overflow: hidden; // force rounded corners by cropping it
  13   line-height: 0;
  14   @include font-size($progress-font-size);
  15   background-color: $progress-bg;
  16   @include border-radius($progress-border-radius);
  17   @include box-shadow($progress-box-shadow);
  18 }
  19
  20 .progress-bar {
  21   display: flex;
  22   flex-direction: column;
  23   justify-content: center;
  24   overflow: hidden;
  25   color: $progress-bar-color;
  26   text-align: center;
  27   white-space: nowrap;
  28   background-color: $progress-bar-bg;
  29   @include transition($progress-bar-transition);
  30 }
  31
  32 .progress-bar-striped {
  33   @include gradient-striped();
  34   background-size: $progress-height $progress-height;
  35 }
  36
  37 @if $enable-transitions {
  38   .progress-bar-animated {
  39     animation: progress-bar-stripes $progress-bar-animation-timing;
  40
  41     @if $enable-prefers-reduced-motion-media-query {
  42       @media (prefers-reduced-motion: reduce) {
  43         animation: none;
  44       }
  45     }
  46   }
  47 }