Button: add focus style (#1116)

pull/1207/head
杨奕 2016-11-17 12:21:33 +08:00 committed by Leopoldthecoder
parent a9703bb05c
commit edeae0a2a4
2 changed files with 15 additions and 7 deletions

View File

@ -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;
}

View File

@ -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;