diff options
1 files changed, 60 insertions, 0 deletions
| -rw-r--r-- | src/meters.less | 60 |
diff --git a/src/meters.less b/src/meters.less new file mode 100644 index 0000000..ada4371 --- /dev/null +++ b/src/meters.less @@ -0,0 +1,60 @@ +// Meters +// Credit: https://css-tricks.com/html5-meter-element/ +.meter { + appearance: none; + background: @core-bg-color; + border: 0; + display: block; + width: 100%; + height: 1.6rem; + + &::-webkit-meter-inner-element { + display: block; + } + + &::-webkit-meter-bar, + &::-webkit-meter-optimum-value, + &::-webkit-meter-suboptimum-value, + &::-webkit-meter-even-less-good-value { + border-radius: @border-radius; + } + + &::-webkit-meter-bar { + background: @core-bg-color; + } + + &::-webkit-meter-optimum-value { + background: @control-color-success; + } + + &::-webkit-meter-suboptimum-value { + background: @control-color-warning; + } + + &::-webkit-meter-even-less-good-value { + background: @control-color-danger; + } + + &::-moz-meter-bar, + &::-moz-meter-optimum, + &::-moz-meter-sub-optimum, + &::-moz-meter-sub-sub-optimum { + border-radius: @border-radius; + } + + &::-moz-meter-bar { + background: @core-bg-color; + } + + &:-moz-meter-optimum { + background: @control-color-success; + } + + &:-moz-meter-sub-optimum { + background: @control-color-warning; + } + + &:-moz-meter-sub-sub-optimum { + background: @control-color-danger; + } +} |