sergiotarxz
/
Wordpress
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

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.



git-svn-id: https://develop.svn.wordpress.org/trunk@38602 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Helen Hou-Sandi 2016-09-14 16:14:20 +00:00
parent 433b4fbfba
commit 683f7bc4d3
5 changed files with 50 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/wp-admin/css/colors/_admin.scss
View File

@ -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 {

37
src/wp-admin/css/customize-controls.css
View File

@ -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;
}
#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;
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
border-left: none;
margin-top: 0;
}
.control-section-themes .accordion-section-title {
#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;
}
@ -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;
}

11
src/wp-admin/css/customize-nav-menus.css
View File

@ -1,8 +1,12 @@
#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 {

3
src/wp-admin/css/customize-widgets.css
View File

@ -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 {

2
src/wp-admin/css/themes.css
View File

@ -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;