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 (9 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;
 }