Changeset 7858

Timestamp:

11/16/2018 08:34:10 PM (6 years ago)

Author:

coffee2code

Message:

Developer: Improve styling of handbook sidebar menu.

• Sets background color for expansion toggle to white for current item or its unexpanded ancestor (and unsets it for expanded ancestor)
• Highlights current item expansion toggle on hover, as done for non-current expansion toggles
• Removes focus outline

See [7856], [7857].

Location:

sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer

Files:

• scss/main.scss (modified) (3 diffs)
• stylesheets/main.css (modified) (3 diffs)

sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer/scss/main.scss

@@ -2000 +2000 @@
     font-size: 0.8em;
 
+    *:focus {
+        outline: 0;
+    }
     ul {
         margin-left: 0;
@@ -2066 +2069 @@
         }
     }
-    .open .expandable .dashicons:not(:focus) {
-        background: #fff;
-        color: #0073aa;
-    }
     & > ul > li {
         &:last-child {
@@ -2096 +2095 @@
     .current-menu-ancestor ul {
         display: block;
+    }
+    .current-menu-ancestor:not(.open) .expandable .dashicons:not(:focus),
+    .current-menu-item .expandable .dashicons:not(:focus) {
+        background: #fff;
+        color: #0073aa;
+    }
+    .current-menu-ancestor .expandable .dashicons:hover,
+    .current-menu-item .expandable .dashicons:hover {
+        background-color:: #0073aa !important;
+        color: #fff !important;
     }
     .children,

sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer/stylesheets/main.css

@@ -2387 +2387 @@
 }
 
+div[class*="-table-of-contents-container"] *:focus {
+  outline: 0;
+}
+
 div[class*="-table-of-contents-container"] ul {
   margin-left: 0;
@@ -2452 +2456 @@
 }
 
-div[class*="-table-of-contents-container"] .open .expandable .dashicons:not(:focus) {
-  background: #fff;
-  color: #0073aa;
-}
-
 div[class*="-table-of-contents-container"] > ul > li:last-child {
   border-bottom: 1px solid rgba(0, 0, 0, 0.05);
@@ -2483 +2482 @@
 div[class*="-table-of-contents-container"] .current-menu-ancestor ul {
   display: block;
+}
+
+div[class*="-table-of-contents-container"] .current-menu-ancestor:not(.open) .expandable .dashicons:not(:focus),
+div[class*="-table-of-contents-container"] .current-menu-item .expandable .dashicons:not(:focus) {
+  background: #fff;
+  color: #0073aa;
+}
+
+div[class*="-table-of-contents-container"] .current-menu-ancestor .expandable .dashicons:hover,
+div[class*="-table-of-contents-container"] .current-menu-item .expandable .dashicons:hover {
+  background-color: #0073aa !important;
+  color: #fff !important;
 }