gabehf/sqm-dashboards
1
0
Fork 0
mirror of https://github.com/edcommonwealth/sqm-dashboards.git synced 2026-03-07 21:48:16 -08:00
Code Issues Projects Releases Packages Wiki Activity Actions

Specify harvey ball state classes as BEM modifier, not element

Browse source
This commit is contained in:
Liam Morley 2021-10-27 10:09:02 -04:00
parent dfc49d109a
commit 00a0e5868c
3 changed files with 12 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

12
app/assets/stylesheets/dashboard.scss
View file

@ -74,27 +74,27 @@
stroke: $black;
}
.harvey-ball__ideal {
.harvey-ball--ideal {
fill: $purple;
}
.harvey-ball__approval {
.harvey-ball--approval {
fill: $purple;
}
.harvey-ball__growth {
.harvey-ball--growth {
fill: $gold;
}
.harvey-ball__watch {
.harvey-ball--watch {
fill: $gold;
}
.harvey-ball__warning {
.harvey-ball--warning {
fill: $white;
}
.harvey-ball__no_zone {
.harvey-ball--no_zone {
stroke: $gray-2;
fill: $gray-3;
}

2
app/views/dashboard/_subcategory_card.html.erb
View file

@ -1,6 +1,6 @@
<div class="subcategory-card__benchmark-item">
<svg class="subcategory-card__circle" width="24" height="24" xmlns="http://www.w3.org/2000/svg">
<use class="harvey-ball harvey-ball__<%= presenter.color %>" xlink:href="#<%= presenter.harvey_ball_icon %>"></use>
<use class="harvey-ball harvey-ball--<%= presenter.color %>" xlink:href="#<%= presenter.harvey_ball_icon %>"></use>
</svg>
<div class="subcategory-card__name"><%= subcategory.name %></div>

10
app/views/dashboard/index.html.erb
View file

@ -51,19 +51,19 @@
<div class="harvey-ball-legend">
<div class="font-size-14">Warning</div>
<svg class="ms-3 me-1" width="16" height="16" xmlns="http://www.w3.org/2000/svg">
<use class="harvey-ball harvey-ball__warning" xlink:href="#full-circle"></use>
<use class="harvey-ball harvey-ball--warning" xlink:href="#full-circle"></use>
</svg>
<svg class="mx-1" width="16" height="16" xmlns="http://www.w3.org/2000/svg">
<use class="harvey-ball harvey-ball__watch" xlink:href="#one-quarter-circle"></use>
<use class="harvey-ball harvey-ball--watch" xlink:href="#one-quarter-circle"></use>
</svg>
<svg class="mx-1" width="16" height="16" xmlns="http://www.w3.org/2000/svg">
<use class="harvey-ball harvey-ball__growth" xlink:href="#half-circle"></use>
<use class="harvey-ball harvey-ball--growth" xlink:href="#half-circle"></use>
</svg>
<svg class="mx-1" width="16" height="16" xmlns="http://www.w3.org/2000/svg">
<use class="harvey-ball harvey-ball__approval" xlink:href="#three-quarter-circle"></use>
<use class="harvey-ball harvey-ball--approval" xlink:href="#three-quarter-circle"></use>
</svg>
<svg class="ms-1 me-3" width="16" height="16" xmlns="http://www.w3.org/2000/svg">
<use class="harvey-ball harvey-ball__ideal" xlink:href="#full-circle"></use>
<use class="harvey-ball harvey-ball--ideal" xlink:href="#full-circle"></use>
</svg>
<div class="font-size-14">Ideal</div>
</div>