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 { &::-moz-meter-bar {
background: $color-primary; background: $color-primary;
} }
.meter__fallback {
display: inline-block;
background: $color-primary;
height: 100%;
}
} }

View File

@ -35,7 +35,9 @@
</div> </div>
<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'> <dl class='spend-summary__spent'>
<dt>Total spend to date</dt> <dt>Total spend to date</dt>