Specify harvey ball state classes as BEM modifier, not element

pull/1/head
Liam Morley 4 years ago
parent dfc49d109a
commit 00a0e5868c

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

@ -1,6 +1,6 @@
<div class="subcategory-card__benchmark-item"> <div class="subcategory-card__benchmark-item">
<svg class="subcategory-card__circle" width="24" height="24" xmlns="http://www.w3.org/2000/svg"> <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> </svg>
<div class="subcategory-card__name"><%= subcategory.name %></div> <div class="subcategory-card__name"><%= subcategory.name %></div>

@ -51,19 +51,19 @@
<div class="harvey-ball-legend"> <div class="harvey-ball-legend">
<div class="font-size-14">Warning</div> <div class="font-size-14">Warning</div>
<svg class="ms-3 me-1" width="16" height="16" xmlns="http://www.w3.org/2000/svg"> <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>
<svg class="mx-1" width="16" height="16" xmlns="http://www.w3.org/2000/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>
<svg class="mx-1" width="16" height="16" xmlns="http://www.w3.org/2000/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>
<svg class="mx-1" width="16" height="16" xmlns="http://www.w3.org/2000/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>
<svg class="ms-1 me-3" width="16" height="16" xmlns="http://www.w3.org/2000/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> </svg>
<div class="font-size-14">Ideal</div> <div class="font-size-14">Ideal</div>
</div> </div>

Loading…
Cancel
Save