library-mirrors/jquery-ui
1
0
Fork 0
mirror of https://github.com/jquery/jquery-ui.git synced 2024-11-21 11:04:24 +00:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Theme: Add visual focus outline for checkbox and radio buttons

Browse Source 
This adds a focus outline matching that roughly from chrome osx
This commit is contained in:
Alexander Schmitz 2014-07-23 22:11:03 -04:00
parent 25d0c85718
commit 6e2bbcaa5e
1 changed files with 10 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
themes/base/theme.css
View File

@ -55,6 +55,9 @@
.ui-widget-content .ui-state-default, .ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default, .ui-widget-header .ui-state-default,
.ui-button, .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:hover,
html .ui-button.ui-state-disabled:active { html .ui-button.ui-state-disabled:active {
border: 1px solid #c5c5c5/*{borderColorDefault}*/; border: 1px solid #c5c5c5/*{borderColorDefault}*/;
@ -98,6 +101,11 @@ a.ui-button:focus {
color: #2b2b2b/*{fcHover}*/; color: #2b2b2b/*{fcHover}*/;
text-decoration: none; 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-state-active,
.ui-widget-content .ui-state-active, .ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active, .ui-widget-header .ui-state-active,
@ -196,7 +204,8 @@ a.ui-button:active,
.ui-state-hover .ui-icon, .ui-state-hover .ui-icon,
.ui-state-focus .ui-icon, .ui-state-focus .ui-icon,
.ui-button:hover .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}*/; background-image: url("images/ui-icons_555555_256x240.png")/*{iconsHover}*/;
} }
.ui-state-active .ui-icon, .ui-state-active .ui-icon,