Fallback meter

This commit is contained in:
Andrew Croce 2018-09-17 15:07:14 -04:00
parent 1715ac99b9
commit 9dd710ff94
2 changed files with 9 additions and 1 deletions

View File

@ -15,4 +15,10 @@ meter {
&::-moz-meter-bar {
background: $color-primary;
}
.meter__fallback {
display: inline-block;
background: $color-primary;
height: 100%;
}
}

View File

@ -35,7 +35,9 @@
</div>
<div>
<meter value='{{ spent }}' min='0' max='{{ budget }}' title='{{ spent | dollars }} Total spend to date'></meter>
<meter value='{{ spent }}' min='0' max='{{ budget }}' title='{{ spent | dollars }} Total spend to date'>
<div class='meter__fallback' style='width:{{ (spent / budget) * 100 }}%;'></div>
</meter>
<dl class='spend-summary__spent'>
<dt>Total spend to date</dt>