From 1723f427f59bb6bf62bb35de93c7226aef2e8727 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 13 Nov 2018 16:30:01 +0300
Subject: updates

---
 src/components/contrast_ratio/contrast_ratio.vue | 50 +++++++++---------------
 1 file changed, 18 insertions(+), 32 deletions(-)

(limited to 'src/components/contrast_ratio/contrast_ratio.vue')

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;
   }
 }
-- 
cgit v1.2.3-70-g09d2