Customize: Use `button` with `svg` as click target instead of `:before` content, improving clickability of edit shortcuts in Firefox.
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
parent
495b2d835f
commit
f4c3b8352e
|
|
@ -1045,8 +1045,8 @@ span + .edit-link:before,
|
||||||
outline: 1px dotted;
|
outline: 1px dotted;
|
||||||
}
|
}
|
||||||
|
|
||||||
.secondary-navigation .customize-partial-edit-shortcut:before,
|
.secondary-navigation .customize-partial-edit-shortcut button,
|
||||||
.footer-sidebar .widget:first-child .customize-partial-edit-shortcut:before {
|
.footer-sidebar .widget:first-child .customize-partial-edit-shortcut button {
|
||||||
left: 0;
|
left: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -317,7 +317,7 @@ body.colors-custom,
|
||||||
.colors-custom .next.page-numbers:hover,
|
.colors-custom .next.page-numbers:hover,
|
||||||
.colors-custom .site-content .wp-playlist-light .wp-playlist-item:hover,
|
.colors-custom .site-content .wp-playlist-light .wp-playlist-item:hover,
|
||||||
.colors-custom .site-content .wp-playlist-light .wp-playlist-item:focus,
|
.colors-custom .site-content .wp-playlist-light .wp-playlist-item:focus,
|
||||||
.colors-custom .customize-partial-edit-shortcut:before {
|
.colors-custom .customize-partial-edit-shortcut button {
|
||||||
background: hsl( ' . esc_attr( $hue ) . ', ' . esc_attr( $saturation ) . ', 46% ); /* base: #767676; */
|
background: hsl( ' . esc_attr( $hue ) . ', ' . esc_attr( $saturation ) . ', 46% ); /* base: #767676; */
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -2967,7 +2967,7 @@ object {
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Add some space around the visual edit shortcut buttons. */
|
/* Add some space around the visual edit shortcut buttons. */
|
||||||
.twentyseventeen-panel .customize-partial-edit-shortcut:before {
|
.twentyseventeen-panel .customize-partial-edit-shortcut button {
|
||||||
top: 30px;
|
top: 30px;
|
||||||
left: 30px;
|
left: 30px;
|
||||||
}
|
}
|
||||||
|
|
@ -2983,7 +2983,7 @@ object {
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Prevent icon colors from clashing with color schemes. */
|
/* Prevent icon colors from clashing with color schemes. */
|
||||||
.colors-custom .customize-partial-edit-shortcut:before {
|
.colors-custom .customize-partial-edit-shortcut button {
|
||||||
text-shadow: 0 -1px 1px rgba(0,0,0,.2),
|
text-shadow: 0 -1px 1px rgba(0,0,0,.2),
|
||||||
1px 0 1px rgba(0,0,0,.2),
|
1px 0 1px rgba(0,0,0,.2),
|
||||||
0 1px 1px rgba(0,0,0,.2),
|
0 1px 1px rgba(0,0,0,.2),
|
||||||
|
|
|
||||||
|
|
@ -12,9 +12,9 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Make shortcut buttons essentially invisible */
|
/* Make shortcut buttons essentially invisible */
|
||||||
.widget button.customize-partial-edit-shortcut,
|
.widget .customize-partial-edit-shortcut,
|
||||||
.customize-partial-edit-shortcut {
|
.customize-partial-edit-shortcut {
|
||||||
position: relative;
|
position: absolute;
|
||||||
float: right;
|
float: right;
|
||||||
width: 1px; /* required to have a size to be focusable in Safari */
|
width: 1px; /* required to have a size to be focusable in Safari */
|
||||||
height: 1px;
|
height: 1px;
|
||||||
|
|
@ -28,23 +28,26 @@
|
||||||
z-index: 5;
|
z-index: 5;
|
||||||
}
|
}
|
||||||
|
|
||||||
.customize-partial-edit-shortcut:active {
|
.widget .customize-partial-edit-shortcut button:active,
|
||||||
|
.customize-partial-edit-shortcut button:active {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
border: 0;
|
border: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Styles for the actual shortcut */
|
/* Styles for the actual shortcut */
|
||||||
.customize-partial-edit-shortcut:before {
|
.widget .customize-partial-edit-shortcut button,
|
||||||
|
.customize-partial-edit-shortcut button {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: -36px;
|
right: -36px;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
width: 30px;
|
width: 30px;
|
||||||
height: 30px;
|
height: 30px;
|
||||||
|
min-width: 30px;
|
||||||
|
min-height: 30px;
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
font-family: dashicons;
|
|
||||||
content: '\f464';
|
|
||||||
z-index: 5;
|
z-index: 5;
|
||||||
background-color: #0085ba;
|
background-color: #0085ba;
|
||||||
|
background: #0085ba;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
border: 2px solid #fff;
|
border: 2px solid #fff;
|
||||||
box-shadow: 0 2px 1px rgba(46,68,83,0.15);
|
box-shadow: 0 2px 1px rgba(46,68,83,0.15);
|
||||||
|
|
@ -65,27 +68,36 @@
|
||||||
1px 0 1px #006799;
|
1px 0 1px #006799;
|
||||||
}
|
}
|
||||||
|
|
||||||
.customize-partial-edit-shortcut:hover:before,
|
.customize-partial-edit-shortcut button svg {
|
||||||
.customize-partial-edit-shortcut:focus:before {
|
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 */
|
background: #008ec2; /* matches primary buttons */
|
||||||
border-color: #191e23; /* provides visual focus style with 4.5 contrast against background color */
|
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;
|
animation-name: customize-partial-edit-shortcut-bounce-appear;
|
||||||
pointer-events: auto;
|
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;
|
animation-name: customize-partial-edit-shortcut-bounce-disappear;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.page-sidebar-collapsed .customize-partial-edit-shortcut:before,
|
.page-sidebar-collapsed .customize-partial-edit-shortcut button,
|
||||||
.customize-partial-edit-shortcut-hidden:before {
|
.customize-partial-edit-shortcut-hidden .customize-partial-edit-shortcut button {
|
||||||
visibility: hidden;
|
visibility: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
.customize-partial-edit-shortcut-left-margin:before {
|
.customize-partial-edit-shortcut-left-margin.customize-partial-edit-shortcut button {
|
||||||
right: 0;
|
right: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -144,7 +156,7 @@ body.customize-partial-edit-shortcuts-hidden .customize-partial-edit-shortcut:be
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (max-width:800px) {
|
@media screen and (max-width:800px) {
|
||||||
.customize-partial-edit-shortcut:before {
|
.customize-partial-edit-shortcut button {
|
||||||
right: -18px; /* Assume there will be less of a margin available on smaller screens */
|
right: -18px; /* Assume there will be less of a margin available on smaller screens */
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1 +1 @@
|
||||||
.customize-partial-refreshing{opacity:.25;-webkit-transition:opacity .25s;transition:opacity .25s;cursor:progress}.customize-partial-refreshing.widget-customizer-highlighted-widget{-webkit-box-shadow:none;box-shadow:none}.customize-partial-edit-shortcut,.widget button.customize-partial-edit-shortcut{position:relative;float:right;width:1px;height:1px;padding:0;margin:-1px -1px 0 0;border:0;background:0 0;color:transparent;box-shadow:none;outline:0;z-index:5}.customize-partial-edit-shortcut:active{padding:0;border:0}.customize-partial-edit-shortcut:before{position:absolute;right:-36px;color:#fff;width:30px;height:30px;font-size:18px;font-family:dashicons;content:'\f464';z-index:5;background-color:#0085ba;border-radius:50%;border:2px solid #fff;box-shadow:0 2px 1px rgba(46,68,83,.15);text-align:center;display:flex;flex-direction:row;justify-content:center;align-items:center;cursor:pointer;padding:0;animation-fill-mode:both;animation-duration:.4s;opacity:0;pointer-events:none;text-shadow:0 -1px 1px #006799,-1px 0 1px #006799,0 1px 1px #006799,1px 0 1px #006799}.customize-partial-edit-shortcut:focus:before,.customize-partial-edit-shortcut:hover:before{background:#008ec2;border-color:#191e23}body.customize-partial-edit-shortcuts-shown .customize-partial-edit-shortcut:before{animation-name:customize-partial-edit-shortcut-bounce-appear;pointer-events:auto}body.customize-partial-edit-shortcuts-hidden .customize-partial-edit-shortcut:before{animation-name:customize-partial-edit-shortcut-bounce-disappear;pointer-events:none}.customize-partial-edit-shortcut-hidden:before,.page-sidebar-collapsed .customize-partial-edit-shortcut:before{visibility:hidden}.customize-partial-edit-shortcut-left-margin:before{right:0}@keyframes customize-partial-edit-shortcut-bounce-appear{20%,40%,60%,80%,from,to{animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;transform:scale3d(.3,.3,.3)}20%{transform:scale3d(1.1,1.1,1.1)}40%{transform:scale3d(.9,.9,.9)}60%{opacity:1;transform:scale3d(1.03,1.03,1.03)}80%{transform:scale3d(.97,.97,.97)}to{opacity:1;transform:scale3d(1,1,1)}}@keyframes customize-partial-edit-shortcut-bounce-disappear{20%,40%,60%,80%,from,to{animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:1;transform:scale3d(1,1,1)}20%{transform:scale3d(.97,.97,.97)}40%{opacity:1;transform:scale3d(1.03,1.03,1.03)}60%{transform:scale3d(.9,.9,.9)}80%{transform:scale3d(1.1,1.1,1.1)}to{opacity:0;transform:scale3d(.3,.3,.3)}}@media screen and (max-width:800px){.customize-partial-edit-shortcut:before{right:-18px}}
|
.customize-partial-refreshing{opacity:.25;-webkit-transition:opacity .25s;transition:opacity .25s;cursor:progress}.customize-partial-refreshing.widget-customizer-highlighted-widget{-webkit-box-shadow:none;box-shadow:none}.customize-partial-edit-shortcut,.widget .customize-partial-edit-shortcut{position:absolute;float:right;width:1px;height:1px;padding:0;margin:-1px -1px 0 0;border:0;background:0 0;color:transparent;box-shadow:none;outline:0;z-index:5}.customize-partial-edit-shortcut button:active,.widget .customize-partial-edit-shortcut button:active{padding:0;border:0}.customize-partial-edit-shortcut button,.widget .customize-partial-edit-shortcut button{position:absolute;right:-36px;color:#fff;width:30px;height:30px;min-width:30px;min-height:30px;font-size:18px;z-index:5;background:#0085ba;border-radius:50%;border:2px solid #fff;box-shadow:0 2px 1px rgba(46,68,83,.15);text-align:center;display:flex;flex-direction:row;justify-content:center;align-items:center;cursor:pointer;padding:0;animation-fill-mode:both;animation-duration:.4s;opacity:0;pointer-events:none;text-shadow:0 -1px 1px #006799,-1px 0 1px #006799,0 1px 1px #006799,1px 0 1px #006799}.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:focus,.customize-partial-edit-shortcut button:hover{background:#008ec2;border-color:#191e23}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 button{animation-name:customize-partial-edit-shortcut-bounce-disappear;pointer-events:none}.customize-partial-edit-shortcut-hidden .customize-partial-edit-shortcut button,.page-sidebar-collapsed .customize-partial-edit-shortcut button{visibility:hidden}.customize-partial-edit-shortcut-left-margin.customize-partial-edit-shortcut button{right:0}@keyframes customize-partial-edit-shortcut-bounce-appear{20%,40%,60%,80%,from,to{animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;transform:scale3d(.3,.3,.3)}20%{transform:scale3d(1.1,1.1,1.1)}40%{transform:scale3d(.9,.9,.9)}60%{opacity:1;transform:scale3d(1.03,1.03,1.03)}80%{transform:scale3d(.97,.97,.97)}to{opacity:1;transform:scale3d(1,1,1)}}@keyframes customize-partial-edit-shortcut-bounce-disappear{20%,40%,60%,80%,from,to{animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:1;transform:scale3d(1,1,1)}20%{transform:scale3d(.97,.97,.97)}40%{opacity:1;transform:scale3d(1.03,1.03,1.03)}60%{transform:scale3d(.9,.9,.9)}80%{transform:scale3d(1.1,1.1,1.1)}to{opacity:0;transform:scale3d(.3,.3,.3)}}@media screen and (max-width:800px){.customize-partial-edit-shortcut button{right:-18px}}
|
||||||
|
|
@ -12,9 +12,9 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Make shortcut buttons essentially invisible */
|
/* Make shortcut buttons essentially invisible */
|
||||||
.widget button.customize-partial-edit-shortcut,
|
.widget .customize-partial-edit-shortcut,
|
||||||
.customize-partial-edit-shortcut {
|
.customize-partial-edit-shortcut {
|
||||||
position: relative;
|
position: absolute;
|
||||||
float: left;
|
float: left;
|
||||||
width: 1px; /* required to have a size to be focusable in Safari */
|
width: 1px; /* required to have a size to be focusable in Safari */
|
||||||
height: 1px;
|
height: 1px;
|
||||||
|
|
@ -28,23 +28,26 @@
|
||||||
z-index: 5;
|
z-index: 5;
|
||||||
}
|
}
|
||||||
|
|
||||||
.customize-partial-edit-shortcut:active {
|
.widget .customize-partial-edit-shortcut button:active,
|
||||||
|
.customize-partial-edit-shortcut button:active {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
border: 0;
|
border: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Styles for the actual shortcut */
|
/* Styles for the actual shortcut */
|
||||||
.customize-partial-edit-shortcut:before {
|
.widget .customize-partial-edit-shortcut button,
|
||||||
|
.customize-partial-edit-shortcut button {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: -36px;
|
left: -36px;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
width: 30px;
|
width: 30px;
|
||||||
height: 30px;
|
height: 30px;
|
||||||
|
min-width: 30px;
|
||||||
|
min-height: 30px;
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
font-family: dashicons;
|
|
||||||
content: '\f464';
|
|
||||||
z-index: 5;
|
z-index: 5;
|
||||||
background-color: #0085ba;
|
background-color: #0085ba;
|
||||||
|
background: #0085ba;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
border: 2px solid #fff;
|
border: 2px solid #fff;
|
||||||
box-shadow: 0 2px 1px rgba(46,68,83,0.15);
|
box-shadow: 0 2px 1px rgba(46,68,83,0.15);
|
||||||
|
|
@ -65,27 +68,36 @@
|
||||||
-1px 0 1px #006799;
|
-1px 0 1px #006799;
|
||||||
}
|
}
|
||||||
|
|
||||||
.customize-partial-edit-shortcut:hover:before,
|
.customize-partial-edit-shortcut button svg {
|
||||||
.customize-partial-edit-shortcut:focus:before {
|
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 */
|
background: #008ec2; /* matches primary buttons */
|
||||||
border-color: #191e23; /* provides visual focus style with 4.5 contrast against background color */
|
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;
|
animation-name: customize-partial-edit-shortcut-bounce-appear;
|
||||||
pointer-events: auto;
|
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;
|
animation-name: customize-partial-edit-shortcut-bounce-disappear;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.page-sidebar-collapsed .customize-partial-edit-shortcut:before,
|
.page-sidebar-collapsed .customize-partial-edit-shortcut button,
|
||||||
.customize-partial-edit-shortcut-hidden:before {
|
.customize-partial-edit-shortcut-hidden .customize-partial-edit-shortcut button {
|
||||||
visibility: hidden;
|
visibility: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
.customize-partial-edit-shortcut-left-margin:before {
|
.customize-partial-edit-shortcut-left-margin.customize-partial-edit-shortcut button {
|
||||||
left: 0;
|
left: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -144,7 +156,7 @@ body.customize-partial-edit-shortcuts-hidden .customize-partial-edit-shortcut:be
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (max-width:800px) {
|
@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 */
|
left: -18px; /* Assume there will be less of a margin available on smaller screens */
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1 +1 @@
|
||||||
.customize-partial-refreshing{opacity:.25;-webkit-transition:opacity .25s;transition:opacity .25s;cursor:progress}.customize-partial-refreshing.widget-customizer-highlighted-widget{-webkit-box-shadow:none;box-shadow:none}.customize-partial-edit-shortcut,.widget button.customize-partial-edit-shortcut{position:relative;float:left;width:1px;height:1px;padding:0;margin:-1px 0 0 -1px;border:0;background:0 0;color:transparent;box-shadow:none;outline:0;z-index:5}.customize-partial-edit-shortcut:active{padding:0;border:0}.customize-partial-edit-shortcut:before{position:absolute;left:-36px;color:#fff;width:30px;height:30px;font-size:18px;font-family:dashicons;content:'\f464';z-index:5;background-color:#0085ba;border-radius:50%;border:2px solid #fff;box-shadow:0 2px 1px rgba(46,68,83,.15);text-align:center;display:flex;flex-direction:row;justify-content:center;align-items:center;cursor:pointer;padding:0;animation-fill-mode:both;animation-duration:.4s;opacity:0;pointer-events:none;text-shadow:0 -1px 1px #006799,1px 0 1px #006799,0 1px 1px #006799,-1px 0 1px #006799}.customize-partial-edit-shortcut:focus:before,.customize-partial-edit-shortcut:hover:before{background:#008ec2;border-color:#191e23}body.customize-partial-edit-shortcuts-shown .customize-partial-edit-shortcut:before{animation-name:customize-partial-edit-shortcut-bounce-appear;pointer-events:auto}body.customize-partial-edit-shortcuts-hidden .customize-partial-edit-shortcut:before{animation-name:customize-partial-edit-shortcut-bounce-disappear;pointer-events:none}.customize-partial-edit-shortcut-hidden:before,.page-sidebar-collapsed .customize-partial-edit-shortcut:before{visibility:hidden}.customize-partial-edit-shortcut-left-margin:before{left:0}@keyframes customize-partial-edit-shortcut-bounce-appear{20%,40%,60%,80%,from,to{animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;transform:scale3d(.3,.3,.3)}20%{transform:scale3d(1.1,1.1,1.1)}40%{transform:scale3d(.9,.9,.9)}60%{opacity:1;transform:scale3d(1.03,1.03,1.03)}80%{transform:scale3d(.97,.97,.97)}to{opacity:1;transform:scale3d(1,1,1)}}@keyframes customize-partial-edit-shortcut-bounce-disappear{20%,40%,60%,80%,from,to{animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:1;transform:scale3d(1,1,1)}20%{transform:scale3d(.97,.97,.97)}40%{opacity:1;transform:scale3d(1.03,1.03,1.03)}60%{transform:scale3d(.9,.9,.9)}80%{transform:scale3d(1.1,1.1,1.1)}to{opacity:0;transform:scale3d(.3,.3,.3)}}@media screen and (max-width:800px){.customize-partial-edit-shortcut:before{left:-18px}}
|
.customize-partial-refreshing{opacity:.25;-webkit-transition:opacity .25s;transition:opacity .25s;cursor:progress}.customize-partial-refreshing.widget-customizer-highlighted-widget{-webkit-box-shadow:none;box-shadow:none}.customize-partial-edit-shortcut,.widget .customize-partial-edit-shortcut{position:absolute;float:left;width:1px;height:1px;padding:0;margin:-1px 0 0 -1px;border:0;background:0 0;color:transparent;box-shadow:none;outline:0;z-index:5}.customize-partial-edit-shortcut button:active,.widget .customize-partial-edit-shortcut button:active{padding:0;border:0}.customize-partial-edit-shortcut button,.widget .customize-partial-edit-shortcut button{position:absolute;left:-36px;color:#fff;width:30px;height:30px;min-width:30px;min-height:30px;font-size:18px;z-index:5;background:#0085ba;border-radius:50%;border:2px solid #fff;box-shadow:0 2px 1px rgba(46,68,83,.15);text-align:center;display:flex;flex-direction:row;justify-content:center;align-items:center;cursor:pointer;padding:0;animation-fill-mode:both;animation-duration:.4s;opacity:0;pointer-events:none;text-shadow:0 -1px 1px #006799,1px 0 1px #006799,0 1px 1px #006799,-1px 0 1px #006799}.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:focus,.customize-partial-edit-shortcut button:hover{background:#008ec2;border-color:#191e23}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 button{animation-name:customize-partial-edit-shortcut-bounce-disappear;pointer-events:none}.customize-partial-edit-shortcut-hidden .customize-partial-edit-shortcut button,.page-sidebar-collapsed .customize-partial-edit-shortcut button{visibility:hidden}.customize-partial-edit-shortcut-left-margin.customize-partial-edit-shortcut button{left:0}@keyframes customize-partial-edit-shortcut-bounce-appear{20%,40%,60%,80%,from,to{animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;transform:scale3d(.3,.3,.3)}20%{transform:scale3d(1.1,1.1,1.1)}40%{transform:scale3d(.9,.9,.9)}60%{opacity:1;transform:scale3d(1.03,1.03,1.03)}80%{transform:scale3d(.97,.97,.97)}to{opacity:1;transform:scale3d(1,1,1)}}@keyframes customize-partial-edit-shortcut-bounce-disappear{20%,40%,60%,80%,from,to{animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:1;transform:scale3d(1,1,1)}20%{transform:scale3d(.97,.97,.97)}40%{opacity:1;transform:scale3d(1.03,1.03,1.03)}60%{transform:scale3d(.9,.9,.9)}80%{transform:scale3d(1.1,1.1,1.1)}to{opacity:0;transform:scale3d(.3,.3,.3)}}@media screen and (max-width:800px){.customize-partial-edit-shortcut button{left:-18px}}
|
||||||
|
|
@ -138,12 +138,13 @@ wp.customize.selectiveRefresh = ( function( $, api ) {
|
||||||
* @returns {void}
|
* @returns {void}
|
||||||
*/
|
*/
|
||||||
positionEditShortcut: function( placement, $editShortcut ) {
|
positionEditShortcut: function( placement, $editShortcut ) {
|
||||||
var $placementContainer = $( placement.container );
|
var $placementContainer = $( placement.container ), $editButton;
|
||||||
$placementContainer.prepend( $editShortcut );
|
$placementContainer.prepend( $editShortcut );
|
||||||
if ( ! $placementContainer.is( ':visible' ) || 'none' === $placementContainer.css( 'display' ) ) {
|
if ( ! $placementContainer.is( ':visible' ) || 'none' === $placementContainer.css( 'display' ) ) {
|
||||||
$editShortcut.addClass( 'customize-partial-edit-shortcut-hidden' );
|
$editShortcut.addClass( 'customize-partial-edit-shortcut-hidden' );
|
||||||
}
|
}
|
||||||
$editShortcut.toggleClass( 'customize-partial-edit-shortcut-left-margin', $editShortcut.offset().left < 1 );
|
$editButton = $editShortcut.find( 'button' );
|
||||||
|
$editShortcut.toggleClass( 'customize-partial-edit-shortcut-left-margin', $editButton.offset().left < 2 );
|
||||||
},
|
},
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
@ -214,14 +215,20 @@ wp.customize.selectiveRefresh = ( function( $, api ) {
|
||||||
* @return {jQuery} The edit shortcut button element.
|
* @return {jQuery} The edit shortcut button element.
|
||||||
*/
|
*/
|
||||||
createEditShortcut: function() {
|
createEditShortcut: function() {
|
||||||
var partial = this, shortcutTitle;
|
var partial = this, shortcutTitle, $buttonContainer, $button, $image;
|
||||||
shortcutTitle = partial.getEditShortcutTitle();
|
shortcutTitle = partial.getEditShortcutTitle();
|
||||||
return $( '<button>', {
|
$buttonContainer = $( '<span>', {
|
||||||
'aria-label': shortcutTitle,
|
|
||||||
'title': shortcutTitle,
|
|
||||||
'type': 'button',
|
|
||||||
'class': 'customize-partial-edit-shortcut ' + partial.getEditShortcutClassName()
|
'class': 'customize-partial-edit-shortcut ' + partial.getEditShortcutClassName()
|
||||||
} );
|
} );
|
||||||
|
$button = $( '<button>', {
|
||||||
|
'aria-label': shortcutTitle,
|
||||||
|
'title': shortcutTitle,
|
||||||
|
'class': 'customize-partial-edit-shortcut-button'
|
||||||
|
} );
|
||||||
|
$image = $( '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M13.89 3.39l2.71 2.72c.46.46.42 1.24.03 1.64l-8.01 8.02-5.56 1.16 1.16-5.58s7.6-7.63 7.99-8.03c.39-.39 1.22-.39 1.68.07zm-2.73 2.79l-5.59 5.61 1.11 1.11 5.54-5.65zm-2.97 8.23l5.58-5.6-1.07-1.08-5.59 5.6z"/></svg>' );
|
||||||
|
$button.append( $image );
|
||||||
|
$buttonContainer.append( $button );
|
||||||
|
return $buttonContainer;
|
||||||
},
|
},
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
|
||||||
File diff suppressed because one or more lines are too long
|
|
@ -4,7 +4,7 @@
|
||||||
*
|
*
|
||||||
* @global string $wp_version
|
* @global string $wp_version
|
||||||
*/
|
*/
|
||||||
$wp_version = '4.7-beta1-39135';
|
$wp_version = '4.7-beta1-39136';
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.
|
* Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue