Merge pull request #5278 from consuldemocracy/vote_contrast

Make like/unlike buttons more accessible

app/assets/stylesheets/_consul_settings.scss

@@ -73,8 +73,8 @@ $border:            #dee0e3 !default;
 
 $debates:           $brand !default;
 
-$like:              #7bd2a8 !default;
-$unlike:            #ef8585 !default;
+$like:              #38a36f !default;
+$unlike:            #ea6666 !default;
 
 $delete:            #db2e0f !default;
 $check:             #46db91 !default;

app/assets/stylesheets/in_favor_against.scss

@@ -14,49 +14,61 @@
 
   button {
     background: #fff;
-    border: 2px solid;
     border-radius: rem-calc(3);
-    color: $text-light;
+    color: $dark-gray;
     display: inline-block;
     font-size: rem-calc(30);
     line-height: rem-calc(30);
     padding: rem-calc(3) rem-calc(6) rem-calc(6);
     position: relative;
 
+    &[aria-pressed=true] {
+      border-style: inset;
+      border-width: 3px 2px 2px 3px;
+
+      &:active {
+        border-style: outset;
+        border-width: 2px 3px 3px 2px;
+      }
+    }
+
+    &[aria-pressed=false] {
+      border-style: outset;
+      border-width: 2px 3px 3px 2px;
+
+      &:active {
+        border-style: inset;
+        border-width: 3px 2px 2px 3px;
+      }
+    }
+  }
+
+  @mixin like-unlike-icon($icon, $pressed-color) {
+    @include has-fa-icon($icon, regular);
+
     &:not([disabled]) {
-      &:hover,
-      &:active,
+      cursor: pointer;
+
+      &[aria-pressed=false]:hover,
+      &[aria-pressed=false]:active,
+      &[aria-pressed=true]:not(:hover, :active) {
+        @include has-fa-icon($icon, solid);
+      }
+
       &[aria-pressed=true] {
+        background: $pressed-color;
+        border-color: $pressed-color;
         color: #fff;
-        cursor: pointer;
       }
     }
   }
 
   .in-favor button {
-    @include has-fa-icon(thumbs-up, solid);
-
-    &:not([disabled]) {
-      &:hover,
-      &:active,
-      &[aria-pressed=true] {
-        background: $like;
-        border: 2px solid $like;
-      }
-    }
+    @include like-unlike-icon(thumbs-up, $like);
   }
 
   .against button {
-    @include has-fa-icon(thumbs-down, solid);
-
-    &:not([disabled]) {
-      &:hover,
-      &:active,
-      &[aria-pressed=true] {
-        background: $unlike;
-        border: 2px solid $unlike;
-      }
-    }
+    @include like-unlike-icon(thumbs-down, $unlike);
   }
 
   .percentage {

app/assets/stylesheets/layout.scss

@@ -1695,7 +1695,7 @@ table {
 
   button,
   form {
-    color: $text-light;
+    color: $dark-gray;
     display: inline-block;
   }
 
@@ -1707,22 +1707,25 @@ table {
     }
   }
 
-  .in-favor button {
-    @include has-fa-icon(thumbs-up, solid);
+  @mixin like-unlike-icon($icon, $pressed-color) {
+    @include has-fa-icon($icon, regular);
+
+    &[aria-pressed=false]:hover,
+    &[aria-pressed=true]:not(:hover) {
+      @include has-fa-icon($icon, solid);
+    }
 
-    &:hover,
     &[aria-pressed=true] {
-      color: $like;
+      color: $pressed-color;
     }
   }
 
-  .against button {
-    @include has-fa-icon(thumbs-down, solid);
+  .in-favor button {
+    @include like-unlike-icon(thumbs-up, $like);
+  }
 
-    &:hover,
-    &[aria-pressed=true] {
-      color: $unlike;
-    }
+  .against button {
+    @include like-unlike-icon(thumbs-down, $unlike);
   }
 }