github
/
element
mirror of https://github.com/ElemeFE/element
1
0
Fork 0
Code Issues Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
packages/theme-default/src/button.css
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); @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); color: var(--color-primary);
border-color: @color; border-color: @color;
} }
@ -45,7 +46,8 @@
} }
@when plain { @when plain {
&:hover { &:hover,
&:focus {
background: #fff; background: #fff;
border-color: var(--color-primary); border-color: var(--color-primary);
color: var(--color-primary); color: var(--color-primary);
@ -66,7 +68,8 @@
@when disabled { @when disabled {
&, &,
&:hover { &:hover,
&:focus {
color: var(--button-disabled-color); color: var(--button-disabled-color);
cursor: not-allowed; cursor: not-allowed;
background-image: none; background-image: none;
@ -80,7 +83,8 @@
&.is-plain { &.is-plain {
&, &,
&:hover { &:hover,
&:focus {
background-color: #fff; background-color: #fff;
border-color: #d3dce6; border-color: #d3dce6;
color: #C0CCDA; color: #C0CCDA;
@ -135,7 +139,8 @@
padding-left: 0; padding-left: 0;
padding-right: 0; padding-right: 0;
&:hover { &:hover,
&:focus {
color: tint(var(--color-primary), var(--button-hover-tint-percent)); color: tint(var(--color-primary), var(--button-hover-tint-percent));
} }
&:active { &:active {
@ -171,6 +176,7 @@
} }
&:hover, &:hover,
&:focus,
&:active { &:active {
z-index: 1; z-index: 1;
} }

6
packages/theme-default/src/mixins/_button.css
View File

@ -3,7 +3,8 @@
background-color: $background-color; background-color: $background-color;
border-color: $border-color; border-color: $border-color;
&:hover { &:hover,
&:focus {
background: tint($background-color, var(--button-hover-tint-percent)); background: tint($background-color, var(--button-hover-tint-percent));
border-color: tint($border-color, var(--button-hover-tint-percent)); border-color: tint($border-color, var(--button-hover-tint-percent));
color: $color; color: $color;
@ -27,7 +28,8 @@
border: var(--border-base); border: var(--border-base);
color: var(--button-default-color); color: var(--button-default-color);
&:hover { &:hover,
&:focus {
background: #fff; background: #fff;
border-color: $border-color; border-color: $border-color;
color: $background-color; color: $background-color;