Pārlūkot izejas kodu

Add CSS reaction to focus on buttons

Miraty 3 gadi atpakaļ
vecāks
revīzija
5068d6bd26
1 mainītis faili ar 12 papildinājumiem un 10 dzēšanām
  1. 12 10
      less/buttons.less

+ 12 - 10
less/buttons.less

@@ -17,7 +17,7 @@
   @media @light {
     border-color: @darkHtColor;
     color: @darkHtColor;
-    &:hover {
+    &:hover, &:focus {
       background-color: @darkHtColor;
       &::selection {
         color: @darkHtColor;
@@ -31,7 +31,7 @@
   @media @dark {
     border-color: @lightHtColor;
     color: @lightHtColor;
-    &:hover {
+    &:hover, &:focus {
       background-color: @lightHtColor;
       &::selection {
         color: @lightHtColor;
@@ -49,7 +49,7 @@
   @media @light {
     border-color: @darkRegColor;
     color: @darkRegColor;
-    &:hover {
+    &:hover, &:focus {
       background-color: @darkRegColor;
       &::selection {
         color: @darkRegColor;
@@ -63,7 +63,7 @@
   @media @dark {
     border-color: @lightRegColor;
     color: @lightRegColor;
-    &:hover {
+    &:hover, &:focus {
       background-color: @lightRegColor;
       &::selection {
         color: @lightRegColor;
@@ -81,7 +81,7 @@
   @media @light {
     border-color: @darkNsColor;
     color: @darkNsColor;
-    &:hover {
+    &:hover, &:focus {
       background-color: @darkNsColor;
       &::selection {
         color: @darkNsColor;
@@ -95,7 +95,7 @@
   @media @dark {
     border-color: @lightNsColor;
     color: @lightNsColor;
-    &:hover {
+    &:hover, &:focus {
       background-color: @lightNsColor;
       &::selection {
         color: @lightNsColor;
@@ -113,7 +113,7 @@
   @media @light {
     border-color: @darkAuthColor;
     color: @darkAuthColor;
-    &:hover {
+    &:hover, &:focus {
       background-color: @darkAuthColor;
       &::selection {
         color: @darkAuthColor;
@@ -127,7 +127,7 @@
   @media @dark {
     border-color: @lightAuthColor;
     color: @lightAuthColor;
-    &:hover {
+    &:hover, &:focus {
       background-color: @lightAuthColor;
       &::selection {
         color: @lightAuthColor;
@@ -140,7 +140,8 @@
 }
 
 @media @light {
-  .htButton:hover, .regButton:hover, .nsButton:hover, .authButton:hover {
+  .htButton:hover, .regButton:hover, .nsButton:hover, .authButton:hover,
+  .htButton:focus, .regButton:focus, .nsButton:focus, .authButton:focus {
     color: @lightColor;
     &::selection {
       background-color: @lightColor;
@@ -149,7 +150,8 @@
 }
 
 @media @dark {
-  .htButton:hover, .regButton:hover, .nsButton:hover, .authButton:hover {
+  .htButton:hover, .regButton:hover, .nsButton:hover, .authButton:hover,
+  .htButton:focus, .regButton:focus, .nsButton:focus, .authButton:focus {
     color: @darkColor;
     &::selection {
       background-color: @darkColor;