Merge pull request #149 from picturepan2/feature/meter-exp v0.2.4

Feature/meter exp

1 files changed, 84 insertions, 8 deletions

diff --git a/docs/css/spectre-exp.css b/docs/css/spectre-exp.css
index 342c224..1d85409 100644
--- a/docs/css/spectre-exp.css
+++ b/docs/css/spectre-exp.css
@@ -1,15 +1,67 @@
 /*! Spectre.css Experimentals | MIT License | github.com/picturepan2/spectre */
+.meter {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  background: #f8f8f8;
+  border: 0;
+  display: block;
+  height: 1.6rem;
+  width: 100%;
+}
+.meter::-webkit-meter-inner-element {
+  display: block;
+}
+.meter::-webkit-meter-bar,
+.meter::-webkit-meter-optimum-value,
+.meter::-webkit-meter-suboptimum-value,
+.meter::-webkit-meter-even-less-good-value {
+  border-radius: .2rem;
+}
+.meter::-webkit-meter-bar {
+  background: #f8f8f8;
+}
+.meter::-webkit-meter-optimum-value {
+  background: #32b643;
+}
+.meter::-webkit-meter-suboptimum-value {
+  background: #ffb700;
+}
+.meter::-webkit-meter-even-less-good-value {
+  background: #e85600;
+}
+.meter::-moz-meter-bar,
+.meter::-moz-meter-optimum,
+.meter::-moz-meter-sub-optimum,
+.meter::-moz-meter-sub-sub-optimum {
+  border-radius: .2rem;
+}
+.meter::-moz-meter-bar {
+  background: #f8f8f8;
+}
+.meter:-moz-meter-optimum {
+  background: #32b643;
+}
+.meter:-moz-meter-sub-optimum {
+  background: #ffb700;
+}
+.meter:-moz-meter-sub-sub-optimum {
+  background: #e85600;
+}
 .progress {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
+  background: #efefef;
   border: 0;
+  border-radius: .2rem;
   color: #5764c6;
   height: .4rem;
+  position: relative;
   width: 100%;
 }
 .progress::-webkit-progress-bar {
-  background: #efefef;
+  background: transparent;
   border-radius: .2rem;
 }
 .progress::-webkit-progress-value {
@@ -20,6 +72,30 @@
   background: #5764c6;
   border-radius: .2rem;
 }
+.progress:indeterminate {
+  -webkit-animation: progress-indeterminate 1.5s linear infinite;
+  animation: progress-indeterminate 1.5s linear infinite;
+  background: #efefef linear-gradient(to right, #5764c6 30%, #efefef 30%) top left / 150% 150% no-repeat;
+}
+.progress:indeterminate::-moz-progress-bar {
+  background: transparent;
+}
+@-webkit-keyframes progress-indeterminate {
+  0% {
+    background-position: 200% 0;
+  }
+  100% {
+    background-position: -200% 0;
+  }
+}
+@keyframes progress-indeterminate {
+  0% {
+    background-position: 200% 0;
+  }
+  100% {
+    background-position: -200% 0;
+  }
+}
 .slider {
   -webkit-appearance: none;
   -moz-appearance: none;
@@ -33,32 +109,32 @@
   -webkit-appearance: none;
   background: #5764c6;
   border-radius: 50%;
-  height: 1.4rem;
-  margin-top: -.5rem;
+  height: 1.2rem;
+  margin-top: -.4rem;
   transition: transform .2s ease, -webkit-transform .2s ease;
   transition: transform .2s ease;
   transition: -webkit-transform .2s ease;
-  width: 1.4rem;
+  width: 1.2rem;
 }
 .slider::-moz-range-thumb {
   background: #5764c6;
   border: 0;
   border-radius: 50%;
-  height: 1.4rem;
+  height: 1.2rem;
   transition: transform .2s ease, -webkit-transform .2s ease;
   transition: transform .2s ease;
   transition: -webkit-transform .2s ease;
-  width: 1.4rem;
+  width: 1.2rem;
 }
 .slider::-ms-thumb {
   background: #5764c6;
   border: 0;
   border-radius: 50%;
-  height: 1.4rem;
+  height: 1.2rem;
   transition: transform .2s ease, -webkit-transform .2s ease;
   transition: transform .2s ease;
   transition: -webkit-transform .2s ease;
-  width: 1.4rem;
+  width: 1.2rem;
 }
 .slider:active::-webkit-slider-thumb {
   -webkit-transform: scale(1.25);