From 5d126400fac28112ae1f0766dceb9f8dcecd8af0 Mon Sep 17 00:00:00 2001 From: Yan Zhu Date: Wed, 1 Mar 2017 16:36:59 +0800 Subject: ADD: Meters element experimental support --- README.md | 4 --- dist/spectre-exp.css | 49 ++++++++++++++++++++++++++++++++++++ dist/spectre-exp.min.css | 2 +- docs/css/spectre-exp.css | 49 ++++++++++++++++++++++++++++++++++++ docs/css/spectre-exp.min.css | 2 +- docs/experimentals.html | 39 ++++++++++++++++++++++++++++ spectre-exp.less | 1 + src/meters.less | 60 ++++++++++++++++++++++++++++++++++++++++++++ 8 files changed, 200 insertions(+), 6 deletions(-) create mode 100644 src/meters.less diff --git a/README.md b/README.md index 6af4aec..af58eac 100644 --- a/README.md +++ b/README.md @@ -72,10 +72,6 @@ You can compile your custom version of Spectre.css. Read [the documentation](htt - [Utilities](http://picturepan2.github.io/spectre/utilities.html) - layout, positions, display, text, shapes, loading things -### Tools - -- [Responsive Resizer](http://picturepan2.github.io/spectre/tools/resizer) - responsive test tool - ### Browser support Spectre uses [Autoprefixer](https://github.com/postcss/autoprefixer) to make most styles compatible with earlier browsers and [Normalize.css](https://necolas.github.io/normalize.css/) for CSS resets. Spectre is designed for modern browsers. For best compatibility, these browsers are recommended: - Chrome (last three) diff --git a/dist/spectre-exp.css b/dist/spectre-exp.css index 8a3ab8e..31cbeaa 100644 --- a/dist/spectre-exp.css +++ b/dist/spectre-exp.css @@ -1,4 +1,53 @@ /*! 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; diff --git a/dist/spectre-exp.min.css b/dist/spectre-exp.min.css index b1aa660..7473662 100644 --- a/dist/spectre-exp.min.css +++ b/dist/spectre-exp.min.css @@ -1 +1 @@ -/*! Spectre.css Experimentals | MIT License | github.com/picturepan2/spectre */.progress{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;color:#5764c6;height:.4rem;width:100%}.progress::-webkit-progress-bar{background:#efefef;border-radius:.2rem}.progress::-webkit-progress-value{background:#5764c6;border-radius:.2rem}.progress::-moz-progress-bar{background:#5764c6;border-radius:.2rem}.slider{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:0 0;display:block;height:2.4rem;width:100%}.slider::-webkit-slider-thumb{-webkit-appearance:none;background:#5764c6;border-radius:50%;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.2rem}.slider::-moz-range-thumb{background:#5764c6;border:0;border-radius:50%;height:1.2rem;transition:transform .2s ease,-webkit-transform .2s ease;transition:transform .2s ease;transition:-webkit-transform .2s ease;width:1.2rem}.slider::-ms-thumb{background:#5764c6;border:0;border-radius:50%;height:1.2rem;transition:transform .2s ease,-webkit-transform .2s ease;transition:transform .2s ease;transition:-webkit-transform .2s ease;width:1.2rem}.slider:active::-webkit-slider-thumb{-webkit-transform:scale(1.25);transform:scale(1.25)}.slider:active::-moz-range-thumb{transform:scale(1.25)}.slider:active::-ms-thumb{-ms-transform:scale(1.25);transform:scale(1.25)}.slider::-webkit-slider-runnable-track{background:#efefef;border-radius:.2rem;height:.4rem;width:100%}.slider::-moz-range-track{background:#efefef;border-radius:.2rem;height:.4rem;width:100%}.slider::-ms-track{background:#efefef;border-radius:.2rem;height:.4rem;width:100%}.slider::-ms-fill-lower{background:#5764c6} \ No newline at end of file +/*! 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-even-less-good-value,.meter::-webkit-meter-optimum-value,.meter::-webkit-meter-suboptimum-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;border:0;color:#5764c6;height:.4rem;width:100%}.progress::-webkit-progress-bar{background:#efefef;border-radius:.2rem}.progress::-webkit-progress-value{background:#5764c6;border-radius:.2rem}.progress::-moz-progress-bar{background:#5764c6;border-radius:.2rem}.slider{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:0 0;display:block;height:2.4rem;width:100%}.slider::-webkit-slider-thumb{-webkit-appearance:none;background:#5764c6;border-radius:50%;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.2rem}.slider::-moz-range-thumb{background:#5764c6;border:0;border-radius:50%;height:1.2rem;transition:transform .2s ease,-webkit-transform .2s ease;transition:transform .2s ease;transition:-webkit-transform .2s ease;width:1.2rem}.slider::-ms-thumb{background:#5764c6;border:0;border-radius:50%;height:1.2rem;transition:transform .2s ease,-webkit-transform .2s ease;transition:transform .2s ease;transition:-webkit-transform .2s ease;width:1.2rem}.slider:active::-webkit-slider-thumb{-webkit-transform:scale(1.25);transform:scale(1.25)}.slider:active::-moz-range-thumb{transform:scale(1.25)}.slider:active::-ms-thumb{-ms-transform:scale(1.25);transform:scale(1.25)}.slider::-webkit-slider-runnable-track{background:#efefef;border-radius:.2rem;height:.4rem;width:100%}.slider::-moz-range-track{background:#efefef;border-radius:.2rem;height:.4rem;width:100%}.slider::-ms-track{background:#efefef;border-radius:.2rem;height:.4rem;width:100%}.slider::-ms-fill-lower{background:#5764c6} \ No newline at end of file diff --git a/docs/css/spectre-exp.css b/docs/css/spectre-exp.css index 8a3ab8e..31cbeaa 100644 --- a/docs/css/spectre-exp.css +++ b/docs/css/spectre-exp.css @@ -1,4 +1,53 @@ /*! 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; diff --git a/docs/css/spectre-exp.min.css b/docs/css/spectre-exp.min.css index b1aa660..7473662 100644 --- a/docs/css/spectre-exp.min.css +++ b/docs/css/spectre-exp.min.css @@ -1 +1 @@ -/*! Spectre.css Experimentals | MIT License | github.com/picturepan2/spectre */.progress{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;color:#5764c6;height:.4rem;width:100%}.progress::-webkit-progress-bar{background:#efefef;border-radius:.2rem}.progress::-webkit-progress-value{background:#5764c6;border-radius:.2rem}.progress::-moz-progress-bar{background:#5764c6;border-radius:.2rem}.slider{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:0 0;display:block;height:2.4rem;width:100%}.slider::-webkit-slider-thumb{-webkit-appearance:none;background:#5764c6;border-radius:50%;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.2rem}.slider::-moz-range-thumb{background:#5764c6;border:0;border-radius:50%;height:1.2rem;transition:transform .2s ease,-webkit-transform .2s ease;transition:transform .2s ease;transition:-webkit-transform .2s ease;width:1.2rem}.slider::-ms-thumb{background:#5764c6;border:0;border-radius:50%;height:1.2rem;transition:transform .2s ease,-webkit-transform .2s ease;transition:transform .2s ease;transition:-webkit-transform .2s ease;width:1.2rem}.slider:active::-webkit-slider-thumb{-webkit-transform:scale(1.25);transform:scale(1.25)}.slider:active::-moz-range-thumb{transform:scale(1.25)}.slider:active::-ms-thumb{-ms-transform:scale(1.25);transform:scale(1.25)}.slider::-webkit-slider-runnable-track{background:#efefef;border-radius:.2rem;height:.4rem;width:100%}.slider::-moz-range-track{background:#efefef;border-radius:.2rem;height:.4rem;width:100%}.slider::-ms-track{background:#efefef;border-radius:.2rem;height:.4rem;width:100%}.slider::-ms-fill-lower{background:#5764c6} \ No newline at end of file +/*! 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-even-less-good-value,.meter::-webkit-meter-optimum-value,.meter::-webkit-meter-suboptimum-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;border:0;color:#5764c6;height:.4rem;width:100%}.progress::-webkit-progress-bar{background:#efefef;border-radius:.2rem}.progress::-webkit-progress-value{background:#5764c6;border-radius:.2rem}.progress::-moz-progress-bar{background:#5764c6;border-radius:.2rem}.slider{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:0 0;display:block;height:2.4rem;width:100%}.slider::-webkit-slider-thumb{-webkit-appearance:none;background:#5764c6;border-radius:50%;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.2rem}.slider::-moz-range-thumb{background:#5764c6;border:0;border-radius:50%;height:1.2rem;transition:transform .2s ease,-webkit-transform .2s ease;transition:transform .2s ease;transition:-webkit-transform .2s ease;width:1.2rem}.slider::-ms-thumb{background:#5764c6;border:0;border-radius:50%;height:1.2rem;transition:transform .2s ease,-webkit-transform .2s ease;transition:transform .2s ease;transition:-webkit-transform .2s ease;width:1.2rem}.slider:active::-webkit-slider-thumb{-webkit-transform:scale(1.25);transform:scale(1.25)}.slider:active::-moz-range-thumb{transform:scale(1.25)}.slider:active::-ms-thumb{-ms-transform:scale(1.25);transform:scale(1.25)}.slider::-webkit-slider-runnable-track{background:#efefef;border-radius:.2rem;height:.4rem;width:100%}.slider::-moz-range-track{background:#efefef;border-radius:.2rem;height:.4rem;width:100%}.slider::-ms-track{background:#efefef;border-radius:.2rem;height:.4rem;width:100%}.slider::-ms-fill-lower{background:#5764c6} \ No newline at end of file diff --git a/docs/experimentals.html b/docs/experimentals.html index 336cb1d..4e8755c 100644 --- a/docs/experimentals.html +++ b/docs/experimentals.html @@ -59,6 +59,9 @@
  • Experimentals