From 6e2bbcaa5e19bb933d8024ff5d6fcff34f91e034 Mon Sep 17 00:00:00 2001 From: Alexander Schmitz Date: Wed, 23 Jul 2014 22:11:03 -0400 Subject: Theme: Add visual focus outline for checkbox and radio buttons This adds a focus outline matching that roughly from chrome osx --- themes/base/theme.css | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) (limited to 'themes') diff --git a/themes/base/theme.css b/themes/base/theme.css index 7553d4c58..0722cf754 100644 --- a/themes/base/theme.css +++ b/themes/base/theme.css @@ -55,6 +55,9 @@ .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, .ui-button, + +/* We use html here because we need a greater specificity to make sure disabled +works properly when clicked or hovered */ html .ui-button.ui-state-disabled:hover, html .ui-button.ui-state-disabled:active { border: 1px solid #c5c5c5/*{borderColorDefault}*/; @@ -98,6 +101,11 @@ a.ui-button:focus { color: #2b2b2b/*{fcHover}*/; text-decoration: none; } + +/* This cant be configured with themeroller because its new may end up added later */ +.ui-visual-focus { + box-shadow: 0 0 3px 1px rgb(94, 158, 214); +} .ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active, @@ -196,7 +204,8 @@ a.ui-button:active, .ui-state-hover .ui-icon, .ui-state-focus .ui-icon, .ui-button:hover .ui-icon, -.ui-button:focus .ui-icon { +.ui-button:focus .ui-icon, +.ui-state-default .ui-icon { background-image: url("images/ui-icons_555555_256x240.png")/*{iconsHover}*/; } .ui-state-active .ui-icon, -- cgit v1.2.3