diff options
Diffstat (limited to 'src/components/contrast_ratio/contrast_ratio.vue')
| -rw-r--r-- | src/components/contrast_ratio/contrast_ratio.vue | 50 |
1 files changed, 18 insertions, 32 deletions
diff --git a/src/components/contrast_ratio/contrast_ratio.vue b/src/components/contrast_ratio/contrast_ratio.vue index 6c4a59b6..a428e75f 100644 --- a/src/components/contrast_ratio/contrast_ratio.vue +++ b/src/components/contrast_ratio/contrast_ratio.vue @@ -1,41 +1,28 @@ <template> -<div class="contrast-ratio"> - <span class="label"> - Contrast: - </span> - <span> - <span> - {{contrast.text}} +<span class="contrast-ratio"> + <span :title="`Contrast is ${contrast.text}`" class="rating"> + <span v-if="contrast.aaa"> + <i class="icon-thumbs-up-alt"/> + </span> + <span v-if="!contrast.aaa && contrast.aa"> + <i class="icon-adjust"/> </span> - <span class="rating"> - <span v-if="contrast.aaa"> - AAA - </span> - <span v-if="!contrast.aaa && contrast.aa"> - AA - </span> - <span v-if="!contrast.aaa && !contrast.aa"> - bad - </span> + <span v-if="!contrast.aaa && !contrast.aa"> + <i class="icon-attention"/> </span> </span> - <span v-if="large"> - <span> - 18pt+: + <span class="rating" v-if="large" :title="`Contrast is ${contrast.text} (18pt+)`"> + <span v-if="contrast.aaa"> + <i class="icon-thumbs-up-alt"/> + </span> + <span v-if="!contrast.aaa && contrast.aa"> + <i class="icon-adjust"/> </span> - <span class="rating"> - <span v-if="contrast.aaa"> - AAA - </span> - <span v-if="!contrast.aaa && contrast.aa"> - AA - </span> - <span v-if="!contrast.aaa && !contrast.aa"> - bad - </span> + <span v-if="!contrast.aaa && !contrast.aa"> + <i class="icon-attention"/> </span> </span> -</div> +</span> </template> <script> @@ -57,7 +44,6 @@ export default { .rating { display: inline-block; - min-width: 3em; text-align: center; } } |