From 8cc60d2249cc43ebf6ef083f0e18145ca8947e29 Mon Sep 17 00:00:00 2001
From: Graham Fairweather <xotic750@gmail.com>
Date: Tue, 16 Jan 2018 16:04:16 +0100
Subject: [PATCH] Use an added style and shadow for the focused element.

---
 src/components/button/button.vue  | 20 +++++++++++++++++---
 src/styles/components/button.less |  5 +++++
 src/styles/mixins/button.less     |  5 +++--
 3 files changed, 25 insertions(+), 5 deletions(-)

diff --git a/src/components/button/button.vue b/src/components/button/button.vue
index 21a0d031..ff859f0d 100644
--- a/src/components/button/button.vue
+++ b/src/components/button/button.vue
@@ -1,5 +1,11 @@
 <template>
-    <button :type="htmlType" :class="classes" :disabled="disabled" @click="handleClick">
+    <button
+        :type="htmlType"
+        :class="classes"
+        :disabled="disabled"
+        @blur="handleBlur"
+        @click="handleClick"
+        @focus="handleFocus">
         <Icon class="ivu-load-loop" type="load-c" v-if="loading"></Icon>
         <Icon :type="icon" v-if="icon && !loading"></Icon>
         <span v-if="showSlot" ref="slot"><slot></slot></span>
@@ -46,6 +52,7 @@
         },
         data () {
             return {
+                isFocused: false,
                 showSlot: true
             };
         },
@@ -59,15 +66,22 @@
                         [`${prefixCls}-${this.shape}`]: !!this.shape,
                         [`${prefixCls}-${this.size}`]: !!this.size,
                         [`${prefixCls}-loading`]: this.loading != null && this.loading,
-                        [`${prefixCls}-icon-only`]: !this.showSlot && (!!this.icon || this.loading)
+                        [`${prefixCls}-icon-only`]: !this.showSlot && (!!this.icon || this.loading),
+                        [`${prefixCls}-focused`]: this.isFocused
                     }
                 ];
             }
         },
         methods: {
+            handleBlur () {
+                this.isFocused = false;
+            },
             handleClick (event) {
                 this.$emit('click', event);
-            }
+            },
+            handleFocus () {
+                this.isFocused = true;
+            },
         },
         mounted () {
             this.showSlot = this.$slots.default !== undefined;
diff --git a/src/styles/components/button.less b/src/styles/components/button.less
index dd3c97cd..72bb640b 100644
--- a/src/styles/components/button.less
+++ b/src/styles/components/button.less
@@ -4,6 +4,11 @@
     .btn;
     .btn-default;
 
+    &.@{btn-prefix-cls}-focused {
+        box-shadow: 0 0 2px @link-hover-color, 0 0 2px @link-hover-color, 0 0 2px @link-hover-color, 0 0 2px @link-hover-color;
+        z-index: 1;
+    }
+
     &-long{
         width: 100%;
     }
diff --git a/src/styles/mixins/button.less b/src/styles/mixins/button.less
index e34a1982..d802546e 100644
--- a/src/styles/mixins/button.less
+++ b/src/styles/mixins/button.less
@@ -27,11 +27,12 @@
 .button-variant(@color; @background; @border) {
     .button-color(@color; @background; @border);
 
-    &:hover,
-    &:focus
+    &:hover
+    // &:focus
     {
         .button-color(tint(@color, 20%); tint(@background, 20%); tint(@border, 20%));
     }
+
     &:active,
     &.active {
         .button-color(shade(@color, 5%); shade(@background, 5%); shade(@background, 5%));