Mercurial > hg > isophonics-drupal-site
diff core/themes/classy/css/components/progress.css @ 0:4c8ae668cc8c
Initial import (non-working)
author | Chris Cannam |
---|---|
date | Wed, 29 Nov 2017 16:09:58 +0000 |
parents | |
children | 1fec387a4317 |
line wrap: on
line diff
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/core/themes/classy/css/components/progress.css Wed Nov 29 16:09:58 2017 +0000 @@ -0,0 +1,61 @@ +/** + * @file + * Visual styles for progress bar. + * + * @see progress.js + */ + +.progress__track { + border-color: #b3b3b3; + border-radius: 10em; + background-color: #f2f1eb; + background-image: -webkit-linear-gradient(#e7e7df, #f0f0f0); + background-image: linear-gradient(#e7e7df, #f0f0f0); + box-shadow: inset 0 1px 3px hsla(0, 0%, 0%, 0.16); +} +.progress__bar { + border: 1px #07629a solid; + background: #057ec9; + background-image: + -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%); + background-image: + -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%); + background-image: + linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15)), + linear-gradient(to right bottom, #0094f0 0%, #0094f0 25%, #007ecc 25%, #007ecc 50%, #0094f0 50%, #0094f0 75%, #0094f0 100%); + background-size: 40px 40px; + margin-top: -1px; + margin-left: -1px; /* LTR */ + padding: 0 1px; + height: 16px; + border-radius: 10em; + -webkit-animation: animate-stripes 3s linear infinite; + -moz-animation: animate-stripes 3s linear infinite; + -webkit-transition: width 0.5s ease-out; + transition: width 0.5s ease-out; +} +[dir="rtl"] .progress__bar { + margin-left: 0; + margin-right: -1px; + animation-direction: reverse; + -webkit-animation-direction: reverse; + -moz-animation-direction: reverse; +} + +/** + * Progress bar animations. + */ +@-webkit-keyframes animate-stripes { + 0% { background-position: 0 0, 0 0; } + 100% { background-position: 0 0, -80px 0; } +} +@-ms-keyframes animate-stripes { + 0% { background-position: 0 0, 0 0; } + 100% { background-position: 0 0, -80px 0; } +} +@keyframes animate-stripes { + 0% { background-position: 0 0, 0 0; } + 100% { background-position: 0 0, -80px 0; } +}