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 { meter {
-moz-appearance: none; -moz-appearance: none;
appearance: none;
display: block; display: block;
background: $color-gray-lightest; background: $color-gray-lightest;

18
styles/sections/_reports.scss
View File

@ -222,6 +222,8 @@
&.meter-cell { &.meter-cell {
padding-left: 0; padding-left: 0;
position: relative;
min-width: 4rem;
@include media($medium-screen) { @include media($medium-screen) {
min-width: 12rem; min-width: 12rem;
@ -231,7 +233,6 @@
width: 100%; width: 100%;
height: 3rem; height: 3rem;
background: $color-white; background: $color-white;
position: relative;
display: none; display: none;
@include media($medium-screen) { @include media($medium-screen) {
@ -241,14 +242,17 @@
&::-webkit-meter-bar { &::-webkit-meter-bar {
background: $color-white; background: $color-white;
} }
}
&::before { .spend-table__meter-value {
content: attr(title); @include h5;
position: absolute;
top: .5rem; @include media($medium-screen) {
left: $gap; display: block;
@include h5;
color: $color-white; 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 previous-month'>$30,000</td>
<td class='table-cell--align-right current-month'>$31,000</td> <td class='table-cell--align-right current-month'>$31,000</td>
<td class='table-cell--expand current-month meter-cell'> <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> </td>
</tr> </tr>
@ -166,7 +167,8 @@
<td class='table-cell--align-right previous-month'>$30,000</td> <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--align-right current-month'>$31,000</td>
<td class='table-cell--expand current-month meter-cell'> <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> </td>
</tr> </tr>