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,
  22       #0094f0 0%,
  23       #0094f0 25%,
  24       #007ecc 25%,
  25       #007ecc 50%,
  26       #0094f0 50%,
  27       #0094f0 75%,
  28       #0094f0 100% );
  29   background-image:
  30     -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15)), -webkit-linear-gradient(left top, #0094f0 0%, #0094f0 25%, #007ecc 25%, #007ecc 50%, #0094f0 50%, #0094f0 75%, #0094f0 100%);
  31   background-image:
  32     linear-gradient( to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15) ),
  33     linear-gradient( to right bottom,
  34       #0094f0 0%,
  35       #0094f0 25%,
  36       #007ecc 25%,
  37       #007ecc 50%,
  38       #0094f0 50%,
  39       #0094f0 75%,
  40       #0094f0 100% );
  41   background-size: 40px 40px;
  42   margin-top: -1px;
  43   margin-left: -1px; /* LTR */
  44   padding: 0 1px;
  45   height: 16px;
  46   border-radius: 10em;
  47   -webkit-animation: animate-stripes 3s linear infinite;
  48   -moz-animation: animate-stripes 3s linear infinite;
  49   -webkit-transition: width 0.5s ease-out;
  50   transition: width 0.5s ease-out;
  51 }
  52 [dir="rtl"] .progress__bar {
  53   margin-left: 0;
  54   margin-right: -1px;
  55   animation-direction: reverse;
  56   -webkit-animation-direction: reverse;
  57   -moz-animation-direction: reverse;
  58 }
  59
  60 /**
  61  * Progress bar animations.
  62  */
  63 @-webkit-keyframes animate-stripes {
  64   0% {background-position: 0 0, 0 0;} 100% {background-position: 0 0, -80px 0;}
  65 }
  66 @-ms-keyframes animate-stripes {
  67   0% {background-position: 0 0, 0 0;} 100% {background-position: 0 0, -80px 0;}
  68 }
  69 @keyframes animate-stripes {
  70   0% {background-position: 0 0, 0 0;} 100% {background-position: 0 0, -80px 0;}
  71 }