Changeset 21529

Timestamp:

08/15/12 18:40:11 (21 months ago)

Author:

azaozz

Message:

Add :focus style to all links, use JS to blur() them on click so the style is only visible when tabbing, props lessbloat, see #21324

Location:

trunk/wp-admin

Files:

• css/colors-classic.dev.css (modified) (4 diffs)
• css/colors-fresh.dev.css (modified) (4 diffs)
• css/wp-admin.dev.css (modified) (1 diff)
• js/common.dev.js (modified) (1 diff)

trunk/wp-admin/css/colors-classic.dev.css

@@ -248 +248 @@
 }
 
-.wrap .add-new-h2 {
+.wrap .add-new-h2,
+.wrap .add-new-h2:active {
     background: #f1f1f1;
+}
+
+.wrap .add-new-h2:focus {
+    background: #c7e7fd;
 }
 
@@ -466 +471 @@
 
 a:hover,
-a:active,
+a:active {
+    color: #d54e21;
+}
+
 a:focus {
-    color: #d54e21;
+    background: #c7e7fd;
+    color: #124964;
+}
+
+a:active {
+    background: none;
+    outline: thin dotted;
+}
+
+#adminmenu a:active {
+    outline: none;
 }
 
@@ -592 +610 @@
 }
 
-th.sortable a:hover, th.sortable a:active, th.sortable a:focus {
+th.sortable a:hover,
+th.sortable a:active,
+th.sortable a:focus {
     color: #333;
+}
+
+th.sortable a:focus {
+    background: #e1e1e1;
+    background-image: -webkit-gradient(linear, left bottom, left top, from(#dcdcdc), to(#e9e9e9));
+    background-image: -webkit-linear-gradient(bottom, #dcdcdc, #e9e9e9);
+    background-image:    -moz-linear-gradient(bottom, #dcdcdc, #e9e9e9);
+    background-image:      -o-linear-gradient(bottom, #dcdcdc, #e9e9e9);
+    background-image: linear-gradient(to top, #dcdcdc, #e9e9e9);
 }
 
@@ -1852 +1881 @@
 }
 
+#screen-meta-links a:focus {
+    background: #c7e7fd url(../images/arrows.png) no-repeat right 4px;
+    color: #124964;
+}
+
+#screen-meta-links a:active {
+    background-color: transparent url(../images/arrows.png) no-repeat right 4px;
+}
+
 #screen-meta-links a.show-settings.screen-meta-active  {
     background: transparent url(../images/arrows-vs.png) no-repeat right -31px;

trunk/wp-admin/css/colors-fresh.dev.css

@@ -239 +239 @@
 }
 
-.wrap .add-new-h2 {
+.wrap .add-new-h2,
+.wrap .add-new-h2:active {
     background: #f1f1f1;
+}
+
+.wrap .add-new-h2:focus {
+    background: #c7e7fd;
 }
 
@@ -457 +462 @@
 
 a:hover,
-a:active,
+a:active {
+    color: #d54e21;
+}
+
 a:focus {
-    color: #d54e21;
+    background: #c7e7fd;
+    color: #124964;
+}
+
+a:active {
+    background: none;
+    outline: thin dotted;
+}
+
+#adminmenu a:active {
+    outline: none;
 }
 
@@ -583 +601 @@
 }
 
-th.sortable a:hover, th.sortable a:active, th.sortable a:focus {
+th.sortable a:hover,
+th.sortable a:active,
+th.sortable a:focus {
     color: #333;
+}
+
+th.sortable a:focus {
+    background: #e1e1e1;
+    background-image: -webkit-gradient(linear, left bottom, left top, from(#dcdcdc), to(#e9e9e9));
+    background-image: -webkit-linear-gradient(bottom, #dcdcdc, #e9e9e9);
+    background-image:    -moz-linear-gradient(bottom, #dcdcdc, #e9e9e9);
+    background-image:      -o-linear-gradient(bottom, #dcdcdc, #e9e9e9);
+    background-image: linear-gradient(to top, #dcdcdc, #e9e9e9);
 }
 
@@ -863 +892 @@
 #screen-meta-links a.show-settings {
     background: transparent url(../images/arrows.png) no-repeat right 4px;
+}
+
+#screen-meta-links a:focus {
+    background: #c7e7fd url(../images/arrows.png) no-repeat right 4px;
+    color: #124964;
+}
+
+#screen-meta-links a:active {
+    background-color: transparent url(../images/arrows.png) no-repeat right 4px;
 }
 

trunk/wp-admin/css/wp-admin.dev.css

@@ -454 +454 @@
 .subsubsub a.current {
     font-weight: bold;
-    background: none;
     border: none;
 }

trunk/wp-admin/js/common.dev.js

@@ -376 +376 @@
         });
     }
+
+    // Blur accessibility link background color onclick
+    $(document).on('click.wp-accessibility-blur', 'a', function() {
+        $(this).blur();
+    });
 });