_s: Use .screen-reader-text rather than .assistive-text.

With 3.6 introducing many HTML5 improvements the need for custom
searchform and comment templates will vanish. To cope with core's
.screen-reader-text class, let's make the switch early.

Commit also adds core's focus styles for screen reader texts, so they
can actually be used.
This commit is contained in:
obenland 2013-03-13 15:39:05 -07:00
parent bdecbd3734
commit 1ba2f62752
5 changed files with 27 additions and 7 deletions

View file

@ -341,12 +341,32 @@ a:active {
}
/* Text meant only for screen readers */
.assistive-text {
clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
.screen-reader-text {
clip: rect(1px, 1px, 1px, 1px);
position: absolute !important;
}
.screen-reader-text:hover,
.screen-reader-text:active,
.screen-reader-text:focus {
background-color: #f1f1f1;
border-radius: 3px;
box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
clip: auto !important;
color: #21759b;
display: block;
font-size: 14px;
font-weight: bold;
height: auto;
left: 5px;
line-height: normal;
padding: 15px 23px 14px;
text-decoration: none;
top: 5px;
width: auto;
z-index: 100000; /* Above WP toolbar */
}
/* Clearing */
.clear:before,
.clear:after,