Improve emoji selection backgrounds

laCour · Feb 12, 2017 · 96d8e7c · 96d8e7c
1 parent 90fcb63
commit 96d8e7c
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 23 deletions.
diff --git a/scss/helpers/_variables.scss b/scss/helpers/_variables.scss
@@ -34,5 +34,10 @@ $code-colors: (
   quote: #b0bec5, hr: $color-shade-dark, link: $base-link-color
 );
 
+// Emoji Hover Colors
+$emoji-hover-colors: (
+  0: #b7e887, 1: #b5e0fe, 2: #f9ef67, 3: #f3c1fd, 4: #ffe1ae, 5: #e0dfff
+);
+
 // Font Families
 // $base-font-family may be set in themes to override the chat font-family
diff --git a/scss/modules/emojis/_base.scss b/scss/modules/emojis/_base.scss
@@ -38,29 +38,13 @@
     background: $color-shade-darkest;
   }
 
-  .emoji_li {
-    a:hover {
-      background: $base-link-color-active;
-    }
-
-    a.green:hover,
-    &.key_selection a.green {
-      background: $color-highlight;
-    }
-
-    a.yellow:hover,
-    &.key_selection a.yellow {
-      background: $color-highlight;
-    }
-
-    a.blue:hover,
-    &.key_selection a.blue {
-      background: $color-highlight;
-    }
-
-    a.pink:hover,
-    &.key_selection a.pink {
-      background: $color-highlight;
+  .emoji_li,
+  &[data-using-keyboard=true] .emoji_li {
+    @for $i from 0 through 5 {
+      &[data-color-index="#{$i}"]:hover,
+      &[data-color-index="#{$i}"].key_selection {
+        background: transparentize(map-get($emoji-hover-colors, $i), 0.5);
+      }
     }
   }