Changeset 38602

Timestamp:

09/14/2016 04:14:20 PM (8 years ago)

Author:

helen

Message:

Customizer: Better hover/focus state for section titles and available widgets.

The 4px border pattern is found in a number of places across the admin, including plugins, notices, and Press This.

props celloexpressions, folletto, hugobaeta.
see #29158.

Location:

trunk/src/wp-admin/css

Files:

• colors/_admin.scss (modified) (1 diff)
• customize-controls.css (modified) (7 diffs)
• customize-nav-menus.css (modified) (2 diffs)
• customize-widgets.css (modified) (1 diff)
• themes.css (modified) (1 diff)

trunk/src/wp-admin/css/colors/_admin.scss

@@ -486 +486 @@
 }
 
+
+
+
+
+
+
+
+
+
 /* Responsive Component */
 

trunk/src/wp-admin/css/customize-controls.css

@@ -50 +50 @@
 #customize-controls .customize-info {
     border: none;
-    border-top: 1px solid #ddd;
     border-bottom: 1px solid #ddd;
     margin-bottom: 15px;
@@ -157 +156 @@
     background-color: #fff;
     border-bottom: 1px solid #eee;
+
 }
 
@@ -173 +173 @@
 #customize-controls .control-section.open .accordion-section-title,
 #customize-controls .control-section .accordion-section-title:focus {
-    color: #23282d;
+    color: #;
     background: #f5f5f5;
+
+
+
+
+
 }
 
@@ -202 +207 @@
 #customize-theme-controls .control-section:last-of-type > .accordion-section-title {
     border-bottom-color: #ddd;
+
+
+
+
+
 }
 
@@ -363 +373 @@
     background: #fff;
     color: #555;
+
 }
 
@@ -977 +988 @@
 }
 
-.control-section-themes .accordion-section-title {
+#customize-theme-controls .control-section-themes .accordion-section-title:hover, /* Not a focusable element. */
+#customize-theme-controls .control-section-themes .accordion-section-title {
     cursor: default;
-}
-
-#customize-theme-controls .control-section-themes .accordion-section-title:hover,
-#customize-theme-controls .control-section-themes .accordion-section-title:focus {
+    background: #fff;
     color: #555;
-    background-color: #fff;
-}
-
-.control-section-themes .accordion-section-title {
+    border-top: 1px solid #ddd;
+    border-bottom: 1px solid #ddd;
+    border-left: none;
+    margin-top: 0;
+}
+
+#customize-theme-controls .control-section-themes .customize-themes-panel .accordion-section-title:first-child:hover, /* Not a focusable element. */
+#customize-theme-controls .control-section-themes .customize-themes-panel .accordion-section-title:first-child {
+    border-top: 0;
+}
+
+#customize-theme-controls .control-section-themes > .accordion-section-title:hover, /* Not a focusable element. */
+#customize-theme-controls .control-section-themes > .accordion-section-title {
     margin: 15px 0;
 }
@@ -1445 +1463 @@
     background: #fff;
     border-bottom: 1px solid #e5e5e5;
+
     cursor: pointer;
     display: none;

trunk/src/wp-admin/css/customize-nav-menus.css

@@ -1 @@
-#accordion-section-menu_locations {
+#accordion-section-menu_locations {
     position: relative;
     margin-bottom: 15px;
+
+
+
+
 }
 
@@ -810 +814 @@
 /* Add/delete Menus */
 
+
+
+
+
 /* @todo update selector */
 #accordion-section-add_menu {
     margin: 15px 12px;
+
 }
 

trunk/src/wp-admin/css/customize-widgets.css

@@ -230 +230 @@
 #available-widgets .widget-tpl:hover,
 #available-widgets .widget-tpl.selected {
-    background: #eee;
+    background: #;
     border-bottom-color: #ccc;
+
 }
 

trunk/src/wp-admin/css/themes.css

@@ -1488 +1488 @@
     bottom: 0;
     left: 0;
-    width: 300px;
+    width: px;
     height: 45px;
     border-top: 1px solid #ddd;