mirror of
https://github.com/WordPress/WordPress.git
synced 2024-10-01 00:27:38 +02:00
71afe657b6
* Edit shortcuts show initially for a moment and then fade away so as to not get in the way of the preview. * Visibility of edit shortcuts is toggled by clicking/touching anywhere inert in the document. * Implements UI for mobile and touch devices which do not support shift-click. * Adds `editShortcutVisibility` state. * Adds new methods to `wp.customize.selectiveRefresh.Partial` for managing edit shortcuts. Incorporates aspects of the Customize Direct Manipulation feature plugin. Props sirbrillig, mattwiebe, celloexpressions, melchoyce, westonruter, afercia. Fixes #27403. Built from https://develop.svn.wordpress.org/trunk@38967 git-svn-id: http://core.svn.wordpress.org/trunk@38910 1a063a9b-81f0-0310-95a4-ce76da25c4cd
1 line
2.8 KiB
CSS
1 line
2.8 KiB
CSS
.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}body.customize-partial-edit-shortcuts-flash .customize-partial-edit-shortcut:before{animation-duration:1.5s;animation-delay:.4s;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-absolute,.widget button.customize-partial-edit-shortcut-absolute{position:static}.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}} |