Changeset 39249

Timestamp:

11/15/2016 06:10:16 PM (8 years ago)

Author:

helen

Message:

Customize: More visible focus and hover states for close and back buttons.

props celloexpressions, folletto.
fixes #29158.

Location:

trunk/src/wp-admin/css

Files:

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

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

@@ -468 +468 @@
 }
 
-/* Customize */
-
-#customize-theme-controls .widget-area-select .selected {
-    background-color: $menu-highlight-background;
-    color: $menu-highlight-text;
-}
-
-#customize-footer-actions .devices button:focus {
-    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,
-#available-widgets .widget-tpl:hover,
-#available-widgets .widget-tpl.selected {
-    border-left-color: $highlight-color;
-}
-
 /* Responsive Component */
 

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

@@ -22 +22 @@
 
 #customize-controls .description {
-    color: #555;
+    color: #555d66;
 }
 
@@ -83 +83 @@
 #customize-controls .customize-info .accordion-section-title {
     background: #fff;
-    color: #555;
+    color: #555d66;
     border-left: none;
     border-right: none;
@@ -93 +93 @@
 #customize-controls .customize-info .accordion-section-title:hover:after,
 #customize-controls .customize-info .accordion-section-title:focus:after {
-    color: #333;
+    color: #32373c;
 }
 
@@ -135 +135 @@
     -webkit-appearance: none;
     background: transparent;
-    color: #555;
+    color: #555d66;
     border: none;
 }
@@ -154 +154 @@
 #customize-controls .customize-info .customize-section-description,
 #customize-controls .no-widget-areas-rendered-notice {
-    color: #555;
+    color: #555d66;
     display: none;
     background: #fff;
@@ -188 +188 @@
 
 #customize-theme-controls .accordion-section-title {
-    color: #555;
+    color: #555d66;
     background-color: #fff;
-    border-bottom: 1px solid #eee;
+    border-bottom: 1px solid #ddd;
     border-left: 4px solid #fff;
+    transition: .15s color ease-in-out,
+                .15s background-color ease-in-out,
+                .15s border-color ease-in-out;
 }
 
@@ -206 +209 @@
 
 #customize-theme-controls .accordion-section-content {
-    color: #555;
+    color: #555d66;
     background: transparent;
 }
@@ -214 +217 @@
 #customize-controls .control-section.open .accordion-section-title,
 #customize-controls .control-section .accordion-section-title:focus {
-    color: #191e23;
-    background: #f5f5f5;
-    border-left: 4px solid #0073aa;
+    color: #0073aa;
+    background: #f3f3f5;
+    border-left-color: #0073aa;
 }
 
@@ -227 +230 @@
 .js .control-section.open .accordion-section-title,
 .js .control-section .accordion-section-title:focus {
-    background: #f5f5f5;
+    background: #f3f3f5;
 }
 
@@ -234 +237 @@
 #customize-theme-controls .control-section.open .accordion-section-title:after,
 #customize-theme-controls .control-section .accordion-section-title:focus:after {
-    color: #23282d;
+    color: #0073aa;
 }
 
@@ -414 +417 @@
     margin: 0;
     line-height: 21px;
-    color: #555;
+    color: #555d66;
 }
 
@@ -438 +441 @@
     left: 0;
     width: 45px;
-    height: 45px;
+    height: 41px;
     padding: 0 2px 0 0;
     background: #eee;
     border: none;
+    border-top: 4px solid #eee;
     border-right: 1px solid #ddd;
     color: #444;
     text-align: left;
     cursor: pointer;
-    -webkit-transition: color .1s ease-in-out, background .1s ease-in-out;
-    transition: color .1s ease-in-out, background .1s ease-in-out;
+    -webkit-transition: color .15s ease-in-out,
+                        border-color .15s ease-in-out,
+                        background .15s ease-in-out;
+    transition: color .1s ease-in-out,
+                border-color .15s ease-in-out,
+                background .15s ease-in-out;
     -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
@@ -464 +472 @@
     border: none;
     border-right: 1px solid #ddd;
+    border-left: 4px solid #fff;
     -webkit-box-shadow: none;
     box-shadow: none;
     cursor: pointer;
-    -webkit-transition: color .1s ease-in-out, background .1s ease-in-out;
-    transition: color .1s ease-in-out, background .1s ease-in-out;
+    -webkit-transition: color .15s ease-in-out,
+                        border-color .15s ease-in-out,
+                        background .15s ease-in-out;
+    transition: color .15s ease-in-out,
+                border-color .15s ease-in-out,
+                background .15s ease-in-out;
 }
 
@@ -491 +504 @@
 #customize-controls .cannot-expand:hover .accordion-section-title {
     background: #fff;
-    color: #555;
+    color: #555d66;
     border-left-color: #fff;
 }
@@ -499 +512 @@
 .customize-controls-preview-toggle:focus,
 .customize-controls-preview-toggle:hover {
-    background: #ddd;
-    border-color: #ccc;
-    color: #000;
+    background: #fff;
+    color: #0073aa;
+    border-top-color: #0073aa;
     outline: none;
     -webkit-box-shadow: none;
     box-shadow: none;
 }
+
 
 .customize-panel-back:hover,
@@ -511 +525 @@
 .customize-section-back:hover,
 .customize-section-back:focus {
-    color: #23282d;
-    background: #f5f5f5;
+    color: #0073aa;
+    background: #f3f3f5;
+    border-left-color: #0073aa;
     outline: none;
     -webkit-box-shadow: none;
@@ -522 +537 @@
     content: "\f335";
     position: relative;
-    top: 1px;
+    top: -3px;
     left: 13px;
 }
@@ -531 +546 @@
     content: "\f341";
     position: relative;
-    left: 13px;
+    left: 9px;
 }
 
@@ -891 +906 @@
 
 .customize-control-color .dropdown .dropdown-content {
-    background-color: #555;
+    background-color: #555d66;
     border: 1px solid rgba(0, 0, 0, 0.15);
 }
@@ -975 +990 @@
     position: absolute;
     width: 100%;
-    color: #555;
+    color: #555d66;
     white-space: nowrap;
     text-overflow: ellipsis;
@@ -1030 +1045 @@
     font-size: 20px;
     color: #fff;
-    background: #555;
+    background: #555d66;
     background: rgba(0, 0, 0, 0.5);
     position: absolute;
@@ -1211 +1226 @@
     cursor: default;
     background: #fff;
-    color: #555;
+    color: #555d66;
     border-top: 1px solid #ddd;
     border-bottom: 1px solid #ddd;
@@ -1761 +1776 @@
     border-bottom: 1px solid #ddd;
     border-left: 4px solid #fff;
+    transition: .15s color ease-in-out,
+                .15s background-color ease-in-out,
+                .15s border-color ease-in-out;
     cursor: pointer;
     display: none;
@@ -1836 +1854 @@
         border: 0;
         border-right: 1px solid #ddd;
-        color: #444;
+        color: #555d66;
         cursor: pointer;
         -webkit-transition: color .1s ease-in-out, background .1s ease-in-out;
@@ -1917 +1935 @@
         margin: 0;
         line-height: 24px;
-        color: #555;
+        color: #555d66;
         display: block;
         overflow: hidden;

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

@@ -230 +230 @@
 #available-widgets .widget-tpl:hover,
 #available-widgets .widget-tpl.selected {
-    background: #f5f5f5;
+    background: #f3f3f5;
     border-bottom-color: #ccc;
+    color: #0073aa;
     border-left: 4px solid #0073aa;
 }

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

@@ -1642 +1642 @@
     border-top: 1px solid transparent;
     border-bottom: 4px solid transparent;
-    -webkit-transition: background .1s ease-in-out;
-    transition: background .1s ease-in-out;
+    transition: .15s color ease-in-out,
+                .15s background-color ease-in-out,
+                .15s border-color ease-in-out;
 }
 
@@ -1671 +1672 @@
 }
 
-.wp-full-overlay-footer .devices button:focus {
-    background-color: #fff;
+.wp-full-overlay-footer .devices button:focus,
+.wp-full-overlay-footer .devices button.active:hover {
     border-bottom-color: #0073aa;
 }
 
-.wp-full-overlay-footer .devices button.active:before,
+.wp-full-overlay-footer .devices button.active:before {
+    color: #191e23;
+}
+
 .wp-full-overlay-footer .devices button:hover:before,
 .wp-full-overlay-footer .devices button:focus:before {
-    color: #191e23;
+    color: #0073aa;
 }