www.aleph1.co.uk Git - yaffs-website/blob - web/core/themes/classy/css/components/progress.css

   1 /**
   2  * @file
   3  * Visual styles for progress bar.
   4  *
   5  * @see progress.js
   6  */
   7
   8 .progress__track {
   9   border-color: #b3b3b3;
  10   border-radius: 10em;
  11   background-color: #f2f1eb;
  12   background-image: -webkit-linear-gradient(#e7e7df, #f0f0f0);
  13   background-image: linear-gradient(#e7e7df, #f0f0f0);
  14   box-shadow: inset 0 1px 3px hsla(0, 0%, 0%, 0.16);
  15 }
  16 .progress__bar {
  17   border: 1px #07629a solid;
  18   background: #057ec9;
  19   background-image:
  20     -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15)),
  21     -webkit-linear-gradient(left top, #0094f0 0%, #0094f0 25%, #007ecc 25%, #007ecc 50%, #0094f0 50%, #0094f0 75%, #0094f0 100%);
  22   background-image:
  23     linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15)),
  24     linear-gradient(to right bottom, #0094f0 0%, #0094f0 25%, #007ecc 25%, #007ecc 50%, #0094f0 50%, #0094f0 75%, #0094f0 100%);
  25   background-size: 40px 40px;
  26   margin-top: -1px;
  27   margin-left: -1px; /* LTR */
  28   padding: 0 1px;
  29   height: 16px;
  30   border-radius: 10em;
  31   -webkit-animation: animate-stripes 3s linear infinite;
  32   -moz-animation: animate-stripes 3s linear infinite;
  33   -webkit-transition: width 0.5s ease-out;
  34   transition: width 0.5s ease-out;
  35 }
  36 [dir="rtl"] .progress__bar {
  37   margin-left: 0;
  38   margin-right: -1px;
  39   animation-direction: reverse;
  40   -webkit-animation-direction: reverse;
  41   -moz-animation-direction: reverse;
  42 }
  43
  44 @media screen and (prefers-reduced-motion: reduce) {
  45   .progress__bar {
  46     -webkit-animation: none;
  47     -moz-animation: none;
  48     -webkit-transition: none;
  49     transition: none;
  50   }
  51 }
  52
  53 /**
  54  * Progress bar animations.
  55  */
  56 @-webkit-keyframes animate-stripes {
  57   0% { background-position: 0 0, 0 0; }
  58   100% { background-position: 0 0, -80px 0; }
  59 }
  60
  61 @-ms-keyframes animate-stripes {
  62   0% { background-position: 0 0, 0 0; }
  63   100% { background-position: 0 0, -80px 0; }
  64 }
  65
  66 @keyframes animate-stripes {
  67   0% { background-position: 0 0, 0 0; }
  68   100% { background-position: 0 0, -80px 0; }
  69 }