Ticket #29158: 29158.left-border.1.diff

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

@@ -485 +485 @@
         border-bottom-color: $highlight-color;
 }
 
+#customize-controls .control-section:hover > .accordion-section-title,
+#customize-controls .control-section .accordion-section-title:hover,
+#customize-controls .control-section.open .accordion-section-title,
+#customize-controls .control-section .accordion-section-title:focus,
+.customize-panel-back:hover,
+.customize-panel-back:focus,
+.customize-section-back:hover,
+.customize-section-back:focus,
+#available-widgets .widget-tpl:hover,
+#available-widgets .widget-tpl.selected {
+        border-left-color: $highlight-color;
+}
+
 /* Responsive Component */
 
 div#wp-responsive-toggle a:before {

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

@@ -49 +49 @@
 
 #customize-controls .customize-info {
         border: none;
-        border-top: 1px solid #ddd;
         border-bottom: 1px solid #ddd;
         margin-bottom: 15px;
 }
@@ -156 +155 @@
         color: #555;
         background-color: #fff;
         border-bottom: 1px solid #eee;
+        border-left: 4px solid #fff;
 }
 
 #customize-theme-controls .accordion-section-title:after {
@@ -172 +172 @@
 #customize-controls .control-section .accordion-section-title:hover,
 #customize-controls .control-section.open .accordion-section-title,
 #customize-controls .control-section .accordion-section-title:focus {
-        color: #23282d;
+        color: #191e23;
         background: #f5f5f5;
+        border-left: 4px solid #0073aa;
 }
 
+#accordion-section-themes + .control-section {
+        border-top: 1px solid #ddd;
+}
+
 .js .control-section:hover .accordion-section-title,
 .js .control-section .accordion-section-title:hover,
 .js .control-section.open .accordion-section-title,
@@ -203 +208 @@
         border-bottom-color: #ddd;
 }
 
+#customize-theme-controls .control-panel-content .control-section:nth-child(2),
+#customize-theme-controls .control-panel-nav_menus .control-section:nth-child(3) {
+        border-top: 1px solid #ddd;
+}
+
 #customize-theme-controls > ul {
         margin: 0;
 }
@@ -330 +340 @@
         background: #fff;
         border: none;
         border-right: 1px solid #ddd;
+        border-left: 4px solid #fff;
         -webkit-box-shadow: none;
         box-shadow: none;
         cursor: pointer;
@@ -362 +373 @@
 #customize-controls .panel-meta.customize-info .accordion-section-title:hover {
         background: #fff;
         color: #555;
+        border-left: none;
 }
 
 .customize-controls-close:focus,
@@ -368 +380 @@
 .customize-controls-close:hover,
 .customize-controls-preview-toggle:focus,
 .customize-controls-preview-toggle:hover {
-        background: #ddd;
+        background: #fff;
         border-color: #ccc;
-        color: #000;
+        color: #191e23;
         outline: none;
         -webkit-box-shadow: none;
         box-shadow: none;
 }
 
+
+.customize-controls-close:focus,
+.customize-controls-preview-toggle:focus {
+        text-decoration: underline;
+}
+
 .customize-panel-back:hover,
 .customize-panel-back:focus,
 .customize-section-back:hover,
 .customize-section-back:focus {
-        color: #23282d;
+        color: #191e23;
         background: #f5f5f5;
+        border-left: 4px solid #0073aa;
         outline: none;
         -webkit-box-shadow: none;
         box-shadow: none;
@@ -400 +419 @@
         font: normal 20px/72px dashicons;
         content: "\f341";
         position: relative;
-        left: 13px;
+        left: 9px;
 }
 
 .wp-full-overlay-sidebar .wp-full-overlay-header {
@@ -976 +995 @@
         animation: customize-reload .75s;
 }
 
-.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;
+        background: #fff;
+        color: #555;
+        border-top: 1px solid #ddd;
+        border-bottom: 1px solid #ddd;
+        border-left: none;
+        margin-top: 0;
 }
 
-#customize-theme-controls .control-section-themes .accordion-section-title:hover,
-#customize-theme-controls .control-section-themes .accordion-section-title:focus {
-        color: #555;
-        background-color: #fff;
+#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;
 }
 
-.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 {
         margin: 15px 0;
 }
 
@@ -1444 +1470 @@
         padding: 20px 15px 20px 60px;
         background: #fff;
         border-bottom: 1px solid #e5e5e5;
+        border-left: 4px solid #fff;
         cursor: pointer;
         display: none;
 }

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

@@ -1 @@
-#accordion-section-menu_locations {
+#customize-theme-controls #accordion-section-menu_locations {
         position: relative;
         margin-bottom: 15px;
 }
 
+#customize-theme-controls #accordion-section-menu_locations > .accordion-section-title {
+        border-bottom-color: #ddd;
+}
+
 .menu-in-location,
 .menu-in-locations {
         display: block;
@@ -809 +813 @@
 
 /* Add/delete Menus */
 
+#customize-theme-controls .control-panel-content .control-section-nav_menu:nth-last-child(2) .accordion-section-title {
+        border-bottom-color: #ddd;
+}
+
 /* @todo update selector */
 #accordion-section-add_menu {
         margin: 15px 12px;
+        overflow: hidden;
 }
 
 .new-menu-section-content {

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

@@ -229 +229 @@
 
 #available-widgets .widget-tpl:hover,
 #available-widgets .widget-tpl.selected {
-        background: #eee;
+        background: #f5f5f5;
         border-bottom-color: #ccc;
+        border-left: 4px solid #0073aa;
 }
 
 #customize-controls .widget-title h3 {

src/wp-admin/css/themes.css

@@ -1485 +1485 @@
         position: fixed;
         bottom: 0;
         left: 0;
-        width: 300px;
+        width: 299px;
         height: 45px;
         border-top: 1px solid #ddd;
         background: #eee;