pk/atst
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Dont use pseudo elements on meter elements, they're not supported in most browsers

Browse Source
This commit is contained in:
Andrew Croce 2018-08-28 09:16:41 -04:00
parent 1fb43a9fd6
commit 56685d3288
3 changed files with 15 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
styles/elements/_graphs.scss
View File

@ -1,6 +1,5 @@
meter {
-moz-appearance: none;
appearance: none;
display: block;
background: $color-gray-lightest;

16
styles/sections/_reports.scss
View File

@ -222,6 +222,8 @@
&.meter-cell {
padding-left: 0;
position: relative;
min-width: 4rem;
@include media($medium-screen) {
min-width: 12rem;
@ -231,7 +233,6 @@
width: 100%;
height: 3rem;
background: $color-white;
position: relative;
display: none;
@include media($medium-screen) {
@ -241,14 +242,17 @@
&::-webkit-meter-bar {
background: $color-white;
}
}
&::before {
content: attr(title);
position: absolute;
top: .5rem;
left: $gap;
.spend-table__meter-value {
@include h5;
@include media($medium-screen) {
display: block;
color: $color-white;
position: absolute;
top: 2.3rem;
left: $gap;
}
}
}

6
templates/workspace_reports.html
View File

@ -130,7 +130,8 @@
<td class='table-cell--align-right previous-month'>$30,000</td>
<td class='table-cell--align-right current-month'>$31,000</td>
<td class='table-cell--expand current-month meter-cell'>
<meter value='31000' min='0' max='62000' title='50%'></meter>
<span class='spend-table__meter-value'>50%</span>
<meter value='31000' min='0' max='62000'></meter>
</td>
</tr>
@ -166,7 +167,8 @@
<td class='table-cell--align-right previous-month'>$30,000</td>
<td class='table-cell--align-right current-month'>$31,000</td>
<td class='table-cell--expand current-month meter-cell'>
<meter value='31000' min='0' max='62000' title='50%'></meter>
<span class='spend-table__meter-value'>50%</span>
<meter value='31000' min='0' max='62000'></meter>
</td>
</tr>