Changeset 39249

Timestamp:

11/15/2016 06:10:16 PM (10 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;
 }