From 3f4c39e6a945d95c6b47aa1f81dad73d1aad0fc6 Mon Sep 17 00:00:00 2001 From: Prateek Saxena Date: Tue, 23 Sep 2014 16:20:42 -0700 Subject: [PATCH] buttons: Update focus state Currently the hover and focus state are exactly the same. The hover state is subtle and making it hard to navigate using a keyboard. Now the buttons have a border when focused. Bug: 62924 Change-Id: Ibd75f7caaf5f34d8bcc53381335a048cede26950 --- resources/src/mediawiki.less/mediawiki.ui/mixins.less | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/resources/src/mediawiki.less/mediawiki.ui/mixins.less b/resources/src/mediawiki.less/mediawiki.ui/mixins.less index ec9888f27e..d3220cc06b 100644 --- a/resources/src/mediawiki.less/mediawiki.ui/mixins.less +++ b/resources/src/mediawiki.less/mediawiki.ui/mixins.less @@ -36,16 +36,21 @@ .button-colors(@bgColor) { background: @bgColor; - &:hover, - &:focus { + &:hover { // The inner bottom bevel should match the active background color. box-shadow: 0 1px rgba(0, 0, 0, 10%), inset 0 -3px rgba(0, 0, 0, 20%); border-bottom-color: mix(#000, @bgColor, 20%); + } + + &:focus { + box-shadow:inset 0px 0px 0px 3px rgba(0, 0, 0, 20%); +// box-shadow: 0 1px rgba(0, 0, 0, 10%), inset 0 -3px rgba(0, 0, 0, 20%); outline: none; // remove outline in Firefox &::-moz-focus-inner { border-color: transparent; } + } &:active, -- 2.20.1