Use an added style and shadow for the focused element.

This commit is contained in:
Graham Fairweather 2018-01-16 16:04:16 +01:00
parent 291acd27f3
commit 8cc60d2249
3 changed files with 25 additions and 5 deletions

View file

@ -1,5 +1,11 @@
<template> <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 class="ivu-load-loop" type="load-c" v-if="loading"></Icon>
<Icon :type="icon" v-if="icon && !loading"></Icon> <Icon :type="icon" v-if="icon && !loading"></Icon>
<span v-if="showSlot" ref="slot"><slot></slot></span> <span v-if="showSlot" ref="slot"><slot></slot></span>
@ -46,6 +52,7 @@
}, },
data () { data () {
return { return {
isFocused: false,
showSlot: true showSlot: true
}; };
}, },
@ -59,15 +66,22 @@
[`${prefixCls}-${this.shape}`]: !!this.shape, [`${prefixCls}-${this.shape}`]: !!this.shape,
[`${prefixCls}-${this.size}`]: !!this.size, [`${prefixCls}-${this.size}`]: !!this.size,
[`${prefixCls}-loading`]: this.loading != null && this.loading, [`${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: { methods: {
handleBlur () {
this.isFocused = false;
},
handleClick (event) { handleClick (event) {
this.$emit('click', event); this.$emit('click', event);
} },
handleFocus () {
this.isFocused = true;
},
}, },
mounted () { mounted () {
this.showSlot = this.$slots.default !== undefined; this.showSlot = this.$slots.default !== undefined;

View file

@ -4,6 +4,11 @@
.btn; .btn;
.btn-default; .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{ &-long{
width: 100%; width: 100%;
} }

View file

@ -27,11 +27,12 @@
.button-variant(@color; @background; @border) { .button-variant(@color; @background; @border) {
.button-color(@color; @background; @border); .button-color(@color; @background; @border);
&:hover, &:hover
&:focus // &:focus
{ {
.button-color(tint(@color, 20%); tint(@background, 20%); tint(@border, 20%)); .button-color(tint(@color, 20%); tint(@background, 20%); tint(@border, 20%));
} }
&:active, &:active,
&.active { &.active {
.button-color(shade(@color, 5%); shade(@background, 5%); shade(@background, 5%)); .button-color(shade(@color, 5%); shade(@background, 5%); shade(@background, 5%));