IntenseWebs/WordPress
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Customize: Use button with svg as click target instead of :before content, improving clickability of edit shortcuts in Firefox.

Browse Source 
Props sirbrillig, celloexpressions, delawski.
See #38532.

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


git-svn-id: http://core.svn.wordpress.org/trunk@39076 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Weston Ruter
2016-11-04 17:16:26 +00:00
parent 495b2d835f
commit f4c3b8352e
10 changed files with 75 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
wp-includes/css/customize-preview.css
View File

@@ -12,9 +12,9 @@
}
/* Make shortcut buttons essentially invisible */
.widget button.customize-partial-edit-shortcut,
.widget .customize-partial-edit-shortcut,
.customize-partial-edit-shortcut {
position: relative;
position: absolute;
float: left;
width: 1px; /* required to have a size to be focusable in Safari */
height: 1px;
@@ -28,23 +28,26 @@
z-index: 5;
}
.customize-partial-edit-shortcut:active {
.widget .customize-partial-edit-shortcut button:active,
.customize-partial-edit-shortcut button:active {
padding: 0;
border: 0;
}
/* Styles for the actual shortcut */
.customize-partial-edit-shortcut:before {
.widget .customize-partial-edit-shortcut button,
.customize-partial-edit-shortcut button {
position: absolute;
left: -36px;
color: #fff;
width: 30px;
height: 30px;
min-width: 30px;
min-height: 30px;
font-size: 18px;
font-family: dashicons;
content: '\f464';
z-index: 5;
background-color: #0085ba;
background: #0085ba;
border-radius: 50%;
border: 2px solid #fff;
box-shadow: 0 2px 1px rgba(46,68,83,0.15);
@@ -65,27 +68,36 @@
-1px 0 1px #006799;
}
.customize-partial-edit-shortcut:hover:before,
.customize-partial-edit-shortcut:focus:before {
.customize-partial-edit-shortcut button svg {
fill: #fff;
min-width: 20px;
min-height: 20px;
width: 20px;
height: 20px;
margin: auto;
}
.customize-partial-edit-shortcut button:hover,
.customize-partial-edit-shortcut button:focus {
background: #008ec2; /* matches primary buttons */
border-color: #191e23; /* provides visual focus style with 4.5 contrast against background color */
}
body.customize-partial-edit-shortcuts-shown .customize-partial-edit-shortcut:before {
body.customize-partial-edit-shortcuts-shown .customize-partial-edit-shortcut button {
animation-name: customize-partial-edit-shortcut-bounce-appear;
pointer-events: auto;
}
body.customize-partial-edit-shortcuts-hidden .customize-partial-edit-shortcut:before {
body.customize-partial-edit-shortcuts-hidden .customize-partial-edit-shortcut button {
animation-name: customize-partial-edit-shortcut-bounce-disappear;
pointer-events: none;
}
.page-sidebar-collapsed .customize-partial-edit-shortcut:before,
.customize-partial-edit-shortcut-hidden:before {
.page-sidebar-collapsed .customize-partial-edit-shortcut button,
.customize-partial-edit-shortcut-hidden .customize-partial-edit-shortcut button {
visibility: hidden;
}
.customize-partial-edit-shortcut-left-margin:before {
.customize-partial-edit-shortcut-left-margin.customize-partial-edit-shortcut button {
left: 0;
}
@@ -144,7 +156,7 @@ body.customize-partial-edit-shortcuts-hidden .customize-partial-edit-shortcut:be
}
@media screen and (max-width:800px) {
.customize-partial-edit-shortcut:before {
.customize-partial-edit-shortcut button {
left: -18px; /* Assume there will be less of a margin available on smaller screens */
}
}