From 3e3a33075841d313288b22eb309631b08df45a90 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=A8=E5=A5=95?=
 <Leopoldthecoder@users.noreply.github.com>
Date: Thu, 17 Nov 2016 12:21:33 +0800
Subject: [PATCH] Button: add focus style (#1116)

---
 packages/theme-default/src/button.css         | 16 +++++++++++-----
 packages/theme-default/src/mixins/_button.css |  6 ++++--
 2 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/packages/theme-default/src/button.css b/packages/theme-default/src/button.css
index 941b0b7f7..9724daab7 100644
--- a/packages/theme-default/src/button.css
+++ b/packages/theme-default/src/button.css
@@ -23,7 +23,8 @@
     
     @mixin button-size var(--button-padding-vertical), var(--button-padding-horizontal), var(--button-font-size), var(--button-border-radius);
 
-    &:hover {
+    &:hover,
+    &:focus {
       color: var(--color-primary);
       border-color: @color;
     }
@@ -45,7 +46,8 @@
     }
 
     @when plain {
-      &:hover {
+      &:hover,
+      &:focus {
         background: #fff;
         border-color: var(--color-primary);
         color: var(--color-primary);
@@ -66,7 +68,8 @@
 
     @when disabled {
       &,
-      &:hover {
+      &:hover,
+      &:focus {
         color: var(--button-disabled-color);
         cursor: not-allowed;
         background-image: none;
@@ -80,7 +83,8 @@
 
       &.is-plain {
         &,
-        &:hover {
+        &:hover,
+        &:focus {
           background-color: #fff;
           border-color: #d3dce6;
           color: #C0CCDA;
@@ -135,7 +139,8 @@
       padding-left: 0;
       padding-right: 0;
 
-      &:hover {
+      &:hover,
+      &:focus {
         color: tint(var(--color-primary), var(--button-hover-tint-percent));
       }
       &:active {
@@ -171,6 +176,7 @@
       }
 
       &:hover,
+      &:focus,
       &:active {
         z-index: 1;
       }
diff --git a/packages/theme-default/src/mixins/_button.css b/packages/theme-default/src/mixins/_button.css
index 55288e9e4..dbc440c8e 100644
--- a/packages/theme-default/src/mixins/_button.css
+++ b/packages/theme-default/src/mixins/_button.css
@@ -3,7 +3,8 @@
   background-color: $background-color;
   border-color: $border-color;
 
-  &:hover {
+  &:hover,
+  &:focus {
     background: tint($background-color, var(--button-hover-tint-percent));
     border-color: tint($border-color, var(--button-hover-tint-percent));
     color: $color;
@@ -27,7 +28,8 @@
     border: var(--border-base);
     color: var(--button-default-color);
 
-    &:hover {
+    &:hover,
+    &:focus {
       background: #fff;
       border-color: $border-color;
       color: $background-color;