Upstream/WordPress
1
0
Fork 0
mirror of https://github.com/WordPress/WordPress.git synced 2025-01-03 15:08:10 +01:00
Code Issues Projects Releases Wiki Activity

Customizer: Better hover/focus state for section titles and available widgets.

Browse Source 
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
This commit is contained in:
Helen Hou-Sandí 2016-09-14 16:15:29 +00:00
parent 794dd5d8cb
commit dd6da701b2
46 changed files with 240 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

9
wp-admin/css/colors/blue/colors-rtl.css
View File

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

2
wp-admin/css/colors/blue/colors-rtl.min.css vendored
View File

File diff suppressed because one or more lines are too long

9
wp-admin/css/colors/blue/colors.css
View File

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

2
wp-admin/css/colors/blue/colors.min.css vendored
View File

File diff suppressed because one or more lines are too long

9
wp-admin/css/colors/coffee/colors-rtl.css
View File

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

2
wp-admin/css/colors/coffee/colors-rtl.min.css vendored
View File

File diff suppressed because one or more lines are too long

9
wp-admin/css/colors/coffee/colors.css
View File

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

2
wp-admin/css/colors/coffee/colors.min.css vendored
View File

File diff suppressed because one or more lines are too long

9
wp-admin/css/colors/ectoplasm/colors-rtl.css
View File

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

2
wp-admin/css/colors/ectoplasm/colors-rtl.min.css vendored
View File

File diff suppressed because one or more lines are too long

9
wp-admin/css/colors/ectoplasm/colors.css
View File

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

2
wp-admin/css/colors/ectoplasm/colors.min.css vendored
View File

File diff suppressed because one or more lines are too long

9
wp-admin/css/colors/light/colors-rtl.css
View File

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

2
wp-admin/css/colors/light/colors-rtl.min.css vendored
View File

File diff suppressed because one or more lines are too long

9
wp-admin/css/colors/light/colors.css
View File

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

2
wp-admin/css/colors/light/colors.min.css vendored
View File

File diff suppressed because one or more lines are too long

9
wp-admin/css/colors/midnight/colors-rtl.css
View File

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

2
wp-admin/css/colors/midnight/colors-rtl.min.css vendored
View File

File diff suppressed because one or more lines are too long

9
wp-admin/css/colors/midnight/colors.css
View File

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

2
wp-admin/css/colors/midnight/colors.min.css vendored
View File

File diff suppressed because one or more lines are too long

9
wp-admin/css/colors/ocean/colors-rtl.css
View File

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

2
wp-admin/css/colors/ocean/colors-rtl.min.css vendored
View File

File diff suppressed because one or more lines are too long

9
wp-admin/css/colors/ocean/colors.css
View File

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

2
wp-admin/css/colors/ocean/colors.min.css vendored
View File

File diff suppressed because one or more lines are too long

9
wp-admin/css/colors/sunrise/colors-rtl.css
View File

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

2
wp-admin/css/colors/sunrise/colors-rtl.min.css vendored
View File

File diff suppressed because one or more lines are too long

9
wp-admin/css/colors/sunrise/colors.css
View File

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

2
wp-admin/css/colors/sunrise/colors.min.css vendored
View File

File diff suppressed because one or more lines are too long

37
wp-admin/css/customize-controls-rtl.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-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;
}
#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-right: 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 60px 20px 15px;
background: #fff;
border-bottom: 1px solid #e5e5e5;
border-right: 4px solid #fff;
cursor: pointer;
display: none;
}

2
wp-admin/css/customize-controls-rtl.min.css vendored
View File

File diff suppressed because one or more lines are too long

37
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;
}

2
wp-admin/css/customize-controls.min.css vendored
View File

File diff suppressed because one or more lines are too long

11
wp-admin/css/customize-nav-menus-rtl.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 {

2
wp-admin/css/customize-nav-menus-rtl.min.css vendored
View File

File diff suppressed because one or more lines are too long

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

2
wp-admin/css/customize-nav-menus.min.css vendored
View File

File diff suppressed because one or more lines are too long

3
wp-admin/css/customize-widgets-rtl.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-right: 4px solid #0073aa;
}
#customize-controls .widget-title h3 {

2
wp-admin/css/customize-widgets-rtl.min.css vendored
View File

File diff suppressed because one or more lines are too long

3
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
wp-admin/css/customize-widgets.min.css vendored
View File

File diff suppressed because one or more lines are too long

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

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

2
wp-admin/css/themes-rtl.min.css vendored
View File

File diff suppressed because one or more lines are too long

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

2
wp-admin/css/themes.min.css vendored
View File

File diff suppressed because one or more lines are too long

2
wp-includes/version.php
View File

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