Changeset 6459 for sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg/css/components/_wporg-header.scss

Timestamp:

01/29/2018 11:42:42 PM (8 years ago)

Author:

obenland

Message:

WPorg: Make subnav tab accessible

See #3091.

File:

• sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg/css/components/_wporg-header.scss (modified) (13 diffs)

sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg/css/components/_wporg-header.scss

@@ -53 +53 @@
         max-width: 75%;
         min-width: 200px;
-        padding: 20px 0 0;
         position: absolute;
         text-align: left;
+        top: 100%;
         transition: left 0.3s;
         z-index: 100000;
 
-        &.active {
+        &.toggled {
             left: 0;
         }
@@ -89 +89 @@
         }
 
+        a:hover,
+        a.current,
+        &.current-menu-item a,
+        &.current_page_parent a {
+            color: #00a0d2;
+        }
+
         &#download,
         &.download {
@@ -123 +130 @@
 
             &.current,
-            &.current-menu-item {
-                a {
-                    color: #eee;
-                }
-            }
-
+            &.current-menu-item,
             .uparrow {
                 display: none;
@@ -134 +136 @@
         }
 
-        a:hover,
-        a.current,
-        &.current-menu-item a,
-        &.current_page_parent a {
-            color: #00a0d2;
-        }
-    }
-
-    .nav-submenu {
-        display: none;
-        margin-bottom: 10px;
-        margin-top: -15px;
-        padding: 0;
-        position: static;
-
-        li a {
-            height: 24px;
-            line-height: 24px;
-            margin-left: 20px;
+        .nav-submenu {
+            clip: rect(1px, 1px, 1px, 1px);
+            height: 1px;
+            left: -2px;
+            margin: 0;
+            overflow: hidden;
+            padding: 0;
+            position: absolute;
+            width: 1px;
+            z-index: 99999;
+
+            li a {
+                height: 24px;
+                line-height: 24px;
+                margin: 0;
+            }
         }
     }
@@ -195 +194 @@
 
             .button {
-                background: #191e23 url( //s.w.org/wp-includes/images/admin-bar-sprite.png?d=20120831 ) no-repeat 2px 4px;
+                background: #191e23 url( //s.w.org/wp-includes/images/admin-bar-sprite.png?d=20120831 ) no-repeat 2px 5px;
                 border: none;
                 border-radius: 0;
@@ -231 +230 @@
         }
 
+        #headline h2 {
+            text-rendering: optimizeLegibility;
+        }
+
         #wporg-header-menu {
             float:left;
@@ -247 +250 @@
 
             a {
-                color: #eee;
-                display: block;
-                font-family: "Open Sans", Helvetica, Arial, "Liberation Sans", sans-serif;
-                font-size: 13px;
-                font-weight: 600;
                 height: 46px;
-                line-height: 34px;
-                margin: 0 4px;
                 padding: 0 6px;
 
@@ -290 +286 @@
             }
 
-            .nav-submenu li {
-                float: none;
-
-                a {
-                    height: 34px;
-                    line-height: 34px;
-                    margin-left: 6px;
-                }
-            }
-        }
-
-        .nav-submenu {
-            background: #32373c;
-            border: #32373c solid 1px;
-            border-top: 0;
-            display: none !important;/* Prevents #wporg-header ul overwriting this */
-            margin-top: -1px;
-            min-width: 0;
-        }
-
-        ul li:hover .nav-submenu,
-        ul li .nav-submenu:hover {
-            display: block !important;/* Prevents #wporg-header ul overwriting this */
-            left:0;
-            margin-left:0;
-            position: absolute;
-            top: 46px;
-            width: auto;
-            z-index: 101;
-        }
-
-        #headline h2 {
-            text-rendering: optimizeLegibility;
+            .nav-submenu {
+                background: #32373c;
+                border: #32373c solid 1px;
+                border-top: 0;
+                margin-top: -1px;
+                min-width: 0;
+
+                li {
+                    float: none;
+
+                    a {
+                        height: 34px;
+                        line-height: 34px;
+                    }
+                }
+            }
+        }
+
+        ul.nav-menu li:hover > ul,
+        .nav-menu ul li:hover > ul,
+        ul.nav-menu .focus > ul,
+        .nav-menu .focus > ul {
+            clip: inherit;
+            height: inherit;
+            overflow: inherit;
+            width: inherit;
         }
 
@@ -334 +323 @@
 
 #mobile-menu-button {
+    background: none;
+    border: none;
+    box-shadow: none;
     display: block;
     float: left;
@@ -340 +332 @@
     font-style: normal;
     font-weight: normal;
-    height: 32px;
     left: 10px;
     line-height: 1;
+    padding: 1px;
     position: absolute;
     text-align: center;
     text-decoration: inherit;
+    text-shadow: none;
     top: 75px;
     transition: color .1s ease-in;
     vertical-align: top;
-    width: 39px;
-    -webkit-font-smoothing: antialiased;
-
     &:before {
         border: none;
@@ -360 +350 @@
         float: left;
         font: normal 50px/1 'Dashicons';
-        height: 32px;
         margin: 0;
         outline: none;
@@ -366 +355 @@
         text-decoration: none;
         vertical-align: middle;
-        width: 39px;
         -webkit-font-smoothing: antialiased;
-    }
-
-    &:hover {
-        background:none;
     }
 
@@ -377 +361 @@
         display: none;
     }
+
+    -webkit-font-smoothing: antialiased;
 }