CSS: Highlight a couple of elements on focus

Menu, tabs, hover menu and dropdown tabs. Keyboard navigation starts
making sense right now.

refs #6164
This commit is contained in:
Thomas Gelf 2014-05-09 16:09:03 +00:00
parent 6523af711c
commit 7153e41ada
2 changed files with 35 additions and 1 deletions

View File

@ -53,6 +53,16 @@
#menu > ul > li.active li.active a {
color: #121212;
text-shadow: 1px 1px 0 #555;
}
#menu > ul > li.active li a:focus {
color: #121212;
}
#menu > ul > li > a:focus {
color: #121212;
text-shadow: none;
}
#menu > ul > li.active li a:hover {
@ -148,6 +158,10 @@
text-decoration: underline;
}
#menu li.hover > ul a:focus {
text-shadow: 1px 1px 0 #ddd;
}
#menu li.hover > ul > li.active > a {
font-weight: bold;
color: white;

View File

@ -30,6 +30,22 @@ ul.tabs li a {
margin-right: 0.5em;
}
ul.tabs > li > a {
border-radius: 3px 3px 0 0;
-moz-border-radius: 3px 3px 0 0;
-webkit-border-radius: 3px 3px 0 0;
}
ul.tabs > li > a:focus {
color: #eee;
text-shadow: 1px 1px 1px #ddd;
}
ul.tabs > li.active > a:focus {
text-shadow: 1px 1px 2px #555;
color: #555;
}
ul.tabs li.active a, ul.tabs li.dropdown:hover, ul.tabs li.dropdown.hover {
background-color: white;
color: #333;
@ -84,7 +100,11 @@ ul.tabs ul.dropdown-menu li a {
margin: 0;
}
ul.tabs ul.dropdown-menu li a:hover {
ul.tabs ul.dropdown-menu li a:focus {
color: #333;
}
ul.tabs ul.dropdown-menu li a:hover, ul.tabs ul.dropdown-menu li a:focus {
background-color: #ccc;
color: #333;
}