Commit dd6da701 authored by Helen Hou-Sandí's avatar Helen Hou-Sandí

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.


Built from https://develop.svn.wordpress.org/trunk@38602


git-svn-id: http://core.svn.wordpress.org/trunk@38545 1a063a9b-81f0-0310-95a4-ce76da25c4cd
parent 794dd5d8
......@@ -485,6 +485,15 @@ body.more-filters-opened .more-filters:focus:before {
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 */
div#wp-responsive-toggle a:before {
......
......@@ -498,6 +498,15 @@ body.more-filters-opened .more-filters:focus:before {
border-bottom-color: #096484;
}
#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-right-color: #096484;
}
/* Responsive Component */
div#wp-responsive-toggle a:before {
color: #e5f8ff;
......
This diff is collapsed.
......@@ -498,6 +498,15 @@ body.more-filters-opened .more-filters:focus:before {
border-bottom-color: #096484;
}
#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: #096484;
}
/* Responsive Component */
div#wp-responsive-toggle a:before {
color: #e5f8ff;
......
This diff is collapsed.
......@@ -498,6 +498,15 @@ body.more-filters-opened .more-filters:focus:before {
border-bottom-color: #c7a589;
}
#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-right-color: #c7a589;
}
/* Responsive Component */
div#wp-responsive-toggle a:before {
color: #f3f2f1;
......
......@@ -498,6 +498,15 @@ body.more-filters-opened .more-filters:focus:before {
border-bottom-color: #c7a589;
}
#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: #c7a589;
}
/* Responsive Component */
div#wp-responsive-toggle a:before {
color: #f3f2f1;
......
This diff is collapsed.
......@@ -498,6 +498,15 @@ body.more-filters-opened .more-filters:focus:before {
border-bottom-color: #a3b745;
}
#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-right-color: #a3b745;
}
/* Responsive Component */
div#wp-responsive-toggle a:before {
color: #ece6f6;
......
......@@ -498,6 +498,15 @@ body.more-filters-opened .more-filters:focus:before {
border-bottom-color: #a3b745;
}
#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: #a3b745;
}
/* Responsive Component */
div#wp-responsive-toggle a:before {
color: #ece6f6;
......
......@@ -498,6 +498,15 @@ body.more-filters-opened .more-filters:focus:before {
border-bottom-color: #04a4cc;
}
#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-right-color: #04a4cc;
}
/* Responsive Component */
div#wp-responsive-toggle a:before {
color: #999;
......
......@@ -498,6 +498,15 @@ body.more-filters-opened .more-filters:focus:before {
border-bottom-color: #04a4cc;
}
#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: #04a4cc;
}
/* Responsive Component */
div#wp-responsive-toggle a:before {
color: #999;
......
This diff is collapsed.
......@@ -498,6 +498,15 @@ body.more-filters-opened .more-filters:focus:before {
border-bottom-color: #e14d43;
}
#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-right-color: #e14d43;
}
/* Responsive Component */
div#wp-responsive-toggle a:before {
color: #f1f2f3;
......
......@@ -498,6 +498,15 @@ body.more-filters-opened .more-filters:focus:before {
border-bottom-color: #e14d43;
}
#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: #e14d43;
}
/* Responsive Component */
div#wp-responsive-toggle a:before {
color: #f1f2f3;
......
This diff is collapsed.
......@@ -498,6 +498,15 @@ body.more-filters-opened .more-filters:focus:before {
border-bottom-color: #9ebaa0;
}
#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-right-color: #9ebaa0;
}
/* Responsive Component */
div#wp-responsive-toggle a:before {
color: #f2fcff;
......
......@@ -498,6 +498,15 @@ body.more-filters-opened .more-filters:focus:before {
border-bottom-color: #9ebaa0;
}
#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: #9ebaa0;
}
/* Responsive Component */
div#wp-responsive-toggle a:before {
color: #f2fcff;
......
This diff is collapsed.
......@@ -498,6 +498,15 @@ body.more-filters-opened .more-filters:focus:before {
border-bottom-color: #dd823b;
}
#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-right-color: #dd823b;
}
/* Responsive Component */
div#wp-responsive-toggle a:before {
color: #f3f1f1;
......
......@@ -498,6 +498,15 @@ body.more-filters-opened .more-filters:focus:before {
border-bottom-color: #dd823b;
}
#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: #dd823b;
}
/* Responsive Component */
div#wp-responsive-toggle a:before {
color: #f3f1f1;
......
This diff is collapsed.
......@@ -49,7 +49,6 @@ body {
#customize-controls .customize-info {
border: none;
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
margin-bottom: 15px;
}
......@@ -156,6 +155,7 @@ body {
color: #555;
background-color: #fff;
border-bottom: 1px solid #eee;
border-right: 4px solid #fff;
}
#customize-theme-controls .accordion-section-title:after {
......@@ -172,8 +172,13 @@ body {
#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-right: 4px solid #0073aa;
}
#accordion-section-themes + .control-section {
border-top: 1px solid #ddd;
}
.js .control-section:hover .accordion-section-title,
......@@ -203,6 +208,11 @@ body {
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;
}
......@@ -362,6 +372,7 @@ h3.customize-section-title {
#customize-controls .panel-meta.customize-info .accordion-section-title:hover {
background: #fff;
color: #555;
border-right: none;
}
.customize-controls-close:focus,
......@@ -976,17 +987,24 @@ p.customize-section-description {
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-right: 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,6 +1462,7 @@ body.adding-widget .add-new-widget:before,
padding: 20px 60px 20px 15px;
background: #fff;
border-bottom: 1px solid #e5e5e5;
border-right: 4px solid #fff;
cursor: pointer;
display: none;
}
......
This diff is collapsed.
......@@ -49,7 +49,6 @@ body {
#customize-controls .customize-info {
border: none;
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
margin-bottom: 15px;
}
......@@ -156,6 +155,7 @@ body {
color: #555;
background-color: #fff;
border-bottom: 1px solid #eee;
border-left: 4px solid #fff;
}
#customize-theme-controls .accordion-section-title:after {
......@@ -172,8 +172,13 @@ body {
#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,
......@@ -203,6 +208,11 @@ body {
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;
}
......@@ -362,6 +372,7 @@ h3.customize-section-title {
#customize-controls .panel-meta.customize-info .accordion-section-title:hover {
background: #fff;
color: #555;
border-left: none;
}
.customize-controls-close:focus,
......@@ -976,17 +987,24 @@ p.customize-section-description {
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,6 +1462,7 @@ body.adding-widget .add-new-widget:before,
padding: 20px 15px 20px 60px;
background: #fff;
border-bottom: 1px solid #e5e5e5;
border-left: 4px solid #fff;
cursor: pointer;
display: none;
}
......
This diff is collapsed.
#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,9 +813,14 @@ body.adding-menu-items #customize-preview {
/* 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 {
......
#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,9 +813,14 @@ body.adding-menu-items #customize-preview {
/* 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 {
......
This diff is collapsed.
......@@ -229,8 +229,9 @@
#available-widgets .widget-tpl:hover,
#available-widgets .widget-tpl.selected {
background: #eee;
background: #f5f5f5;
border-bottom-color: #ccc;
border-right: 4px solid #0073aa;
}
#customize-controls .widget-title h3 {
......
This diff is collapsed.
......@@ -229,8 +229,9 @@
#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 {
......
This diff is collapsed.
......@@ -1487,7 +1487,7 @@ body.full-overlay-active {
position: fixed;
bottom: 0;
right: 0;
width: 300px;
width: 299px;
height: 45px;
border-top: 1px solid #ddd;
background: #eee;
......
This diff is collapsed.
......@@ -1487,7 +1487,7 @@ body.full-overlay-active {
position: fixed;
bottom: 0;
left: 0;
width: 300px;
width: 299px;
height: 45px;
border-top: 1px solid #ddd;
background: #eee;
......
This diff is collapsed.
......@@ -4,7 +4,7 @@
*
* @global string $wp_version
*/
$wp_version = '4.7-alpha-38601';
$wp_version = '4.7-alpha-38602';
/**
* Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment