Merge pull request #1094 from webcompat/labels-contrast-color

Fix #482 Labels contrast color and fix hover issues
webcompat · Jun 15, 2016 · 20a3c70 · 20a3c70
2 parents 8c1febc + 68d309c
commit 20a3c70
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 35 deletions.
diff --git a/webcompat/static/css/development/components/tag.css b/webcompat/static/css/development/components/tag.css
@@ -15,15 +15,8 @@
   color:#404040;
 }
 
-  /* event */
-  .wc-Tag--filter:hover,
-  .wc-Tag.is-active,
-  .wc-Tag-filter:focus {
-    color:#fff;
-  }
-
   /* modifier */
-  .wc-tag--filter {
+  .wc-Tag--filter {
     cursor:pointer;
   }
 
@@ -45,8 +38,8 @@
   }
 
     /* event */
-    .wc-Tag--new.wc-tag--filter:hover
-    .wc-Tag--new.wc-tag--filter:focus,
+    .wc-Tag--new.wc-Tag--filter:hover,
+    .wc-Tag--new.wc-Tag--filter:focus,
     .wc-Tag--new.is-active,
     .wc-Tag--new.wc-Tag--label {
       background-color:var(--base-stateNew);
@@ -58,8 +51,8 @@
   }
 
     /* event */
-    .wc-Tag--needsDiagnosis.wc-tag--filter:hover
-    .wc-Tag--needsDiagnosis.wc-tag--filter:focus,
+    .wc-Tag--needsDiagnosis.wc-Tag--filter:hover,
+    .wc-Tag--needsDiagnosis.wc-Tag--filter:focus,
     .wc-Tag--needsDiagnosis.is-active,
     .wc-Tag--needsDiagnosis.wc-Tag--label {
       background-color:var(--base-stateNeedsDiagnosis);
@@ -71,8 +64,8 @@
   }
 
     /* event */
-    .wc-Tag--needsContact.wc-tag--filter:hover,
-    .wc-Tag--needsContact.wc-tag--filter:focus,
+    .wc-Tag--needsContact.wc-Tag--filter:hover,
+    .wc-Tag--needsContact.wc-Tag--filter:focus,
     .wc-Tag--needsContact.is-active,
     .wc-Tag--needsContact.wc-Tag--label {
       background-color:var(--base-stateNeedsContact);
@@ -84,8 +77,8 @@
   }
 
     /* event */
-    .wc-Tag--ready.wc-tag--filter:hover,
-    .wc-Tag--ready.wc-tag--filter:focus,
+    .wc-Tag--ready.wc-Tag--filter:hover,
+    .wc-Tag--ready.wc-Tag--filter:focus,
     .wc-Tag--ready.is-active,
     .wc-Tag--ready.wc-Tag--label {
       background-color:var(--base-stateReady);
@@ -97,8 +90,8 @@
   }
 
     /* event */
-    .wc-Tag--sitewait.wc-tag--filter:hover,
-    .wc-Tag--sitewait.wc-tag--filter:focus,
+    .wc-Tag--sitewait.wc-Tag--filter:hover,
+    .wc-Tag--sitewait.wc-Tag--filter:focus,
     .wc-Tag--sitewait.is-active,
     .wc-Tag--sitewait.wc-Tag--label {
       background-color:var(--base-stateSitewait);
@@ -110,8 +103,8 @@
   }
 
     /* event */
-    .wc-Tag--close.wc-tag--filter:hover,
-    .wc-Tag--close.wc-tag--filter:focus,
+    .wc-Tag--close.wc-Tag--filter:hover,
+    .wc-Tag--close.wc-Tag--filter:focus,
     .wc-Tag--close.is-active,
     .wc-Tag--close.wc-Tag--label {
       background-color:var(--base-stateClose);
@@ -123,22 +116,22 @@
   }
 
     /* event */
-    .wc-Tag--fixed.wc-tag--filter:hover,
-    .wc-Tag--fixed.wc-tag--filter:focus,
+    .wc-Tag--fixed.wc-Tag--filter:hover,
+    .wc-Tag--fixed.wc-Tag--filter:focus,
     .wc-Tag--fixed.is-active,
     .wc-Tag--fixed.wc-Tag--label {
       background-color:var(--base-stateFixed);
     }
-    
+
   /* Tag Appears to work */
   .wc-Tag--worksforme {
     border-color:var(--base-stateWorksForMe);
   }
 
     /* event */
-    .wc-Tag--worksforme.wc-tag--filter:hover,
-    .wc-Tag--worksforme.wc-tag--filter:focus,
+    .wc-Tag--worksforme.wc-Tag--filter:hover,
+    .wc-Tag--worksforme.wc-Tag--filter:focus,
     .wc-Tag--worksforme.is-active,
     .wc-Tag--worksforme.wc-Tag--label {
       background-color:var(--base-stateWorksForMe);
-    }
+    }
diff --git a/webcompat/templates/web_modules/tag.html b/webcompat/templates/web_modules/tag.html
@@ -1,16 +1,18 @@
 {% macro tag(type, category) %}
 
-{% if type == 'filter' %}
+  {% if type == 'filter' %}
 
+    <button
+      type="button"
+      class="wc-Tag wc-Tag--filter wc-Tag--{{ category.name }} r-ResetButton js-Tag"
+      data-filter="{{ category.dataAttribute }}"
+    >
+      <span class="wc-Tag-count"></span> {{ category.label }}</span>
+    </button>
 
-<button type="button" class="wc-Tag wc-tag--filter wc-Tag--{{ category.name }} r-ResetButton js-Tag" data-filter="{{ category.dataAttribute }}">
-  <span class="wc-Tag-count"></span> {{ category.label }}</span>
-</button>
+  {% elif type == 'tag' %}
 
-{% elif type == 'tag' %}
+    <div class="wc-Tag wc-Tag--label wc-Tag--<%= stateClass %>"><%= issueState %></div>
 
-<div class="wc-Tag wc-Tag--label wc-Tag--<%= stateClass %>"><%= issueState %></div>
-
-
-{% endif %}
+  {% endif %}
 {% endmacro %}