From bf5a801fa8979d68a9a4a33647ef6cd6bd84a594 Mon Sep 17 00:00:00 2001
From: Greg Price <gprice@edx.org>
Date: Fri, 27 Sep 2013 11:04:51 -0400
Subject: [PATCH] Make discussion elements change color on focus

Previously, colors changed to afford interaction only on hover; now, all
elements with a hover color change behave the same way on focus.
---
 lms/static/sass/_discussion.scss | 32 +++++++++++++++-----------------
 1 file changed, 15 insertions(+), 17 deletions(-)

diff --git a/lms/static/sass/_discussion.scss b/lms/static/sass/_discussion.scss
index a685404d34..cd87927fc1 100644
--- a/lms/static/sass/_discussion.scss
+++ b/lms/static/sass/_discussion.scss
@@ -12,7 +12,7 @@
   text-shadow: 0 1px 0 rgba(0, 0, 0, .3);
   box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) inset, 0 1px 1px rgba(0, 0, 0, .15);
 
-  &:hover {
+  &:hover, &:focus {
     border-color: #297095;
     @include linear-gradient(top, #4fbbe4, #2090d0);
   }
@@ -32,7 +32,7 @@
   text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
   box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) inset, 0 1px 1px rgba(0, 0, 0, .15);
 
-  &:hover {
+  &:hover, &:focus {
     @include linear-gradient(top, $white, #ddd);
   }
 }
@@ -51,7 +51,7 @@
   text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.6);
   box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) inset, 0 1px 1px rgba(0, 0, 0, .15);
 
-  &:hover {
+  &:hover, &:focus {
     background: -webkit-linear-gradient(top, #888, #666);
   }
 }
@@ -217,8 +217,7 @@ body.discussion {
           color: #eee;
           @include transition(none);
 
-          &:hover,
-          &.focused {
+          &:hover, &:focus {
             background-color: #666;
           }
 
@@ -305,7 +304,7 @@ body.discussion {
       padding-bottom: 2px;
       height: 37px;
 
-      &:hover {
+      &:hover, &:focus {
         border-color: #222;
       }
     }
@@ -436,7 +435,7 @@ body.discussion {
       height: 37px;
       border-color: #333;
 
-      &:hover {
+      &:hover, &:focus {
         border-color: #222;
       }
     }
@@ -714,7 +713,7 @@ body.discussion {
       height: 100%;
       background-color: #dedede;
 
-      &:hover {
+      &:hover, &:focus {
         background-color: $white;
       }
     }
@@ -881,8 +880,7 @@ body.discussion {
           display: none;
         }
 
-        &:hover,
-        &.focused {
+        &:hover, &:focus {
           background-color: #636363;
         }
 
@@ -1015,7 +1013,7 @@ body.discussion {
       color: #333;
       line-height: 17px;
 
-      &:hover {
+      &:hover, &:focus {
         @include linear-gradient(top, rgba(255, 255, 255, .4), rgba(255, 255, 255, .2));
         color: #333;
       }
@@ -1067,7 +1065,7 @@ body.discussion {
       line-height: 33px;
       text-align: center;
 
-      &:hover {
+      &:hover, &:focus {
         background-image: none;
         background-color: #e6e6e6;
       }
@@ -1086,7 +1084,7 @@ body.discussion {
       background-color: $white;
       @include clearfix;
 
-      &:hover {
+      &:hover, &:focus {
         @include linear-gradient(top, rgba(255, 255, 255, .7), rgba(255, 255, 255, 0));
         background-color: #eee;
       }
@@ -2225,7 +2223,7 @@ body.discussion {
         padding-bottom: 2px;
         border-color: #333;
 
-        &:hover {
+        &:hover, &:focus {
           border-color: #222;
         }
       }
@@ -2522,7 +2520,7 @@ body.discussion {
       margin-top: $baseline/2;
       padding-bottom: 2px;
 
-      &:hover {
+      &:hover, &:focus {
         border-color: #222;
       }
     }
@@ -2596,7 +2594,7 @@ body.discussion {
         cursor: pointer;
       }
 
-      &:hover {
+      &:hover, &:focus {
         @include transition(opacity .2s linear 0s);
         opacity: 1.0;
       }
@@ -2659,7 +2657,7 @@ display:none;
   cursor:pointer;
   opacity: 0.8;
 
-  &:hover {
+  &:hover, &:focus {
     @include transition(opacity .2s linear 0s);
     opacity: 1.0;
   }