mirror of
https://github.com/WordPress/WordPress.git
synced 2024-06-28 07:45:02 +02:00
53c8c68365
Currently, the "Collapse menu" item is not focusable and keyboard users can't collapse/expand the admin menu. This aims to fix it so that screen readers no longer announce it as a clickable but it remains unfocusable and thus unusable. So it's now a button. Quoting joedolson at WordCamp Chicago 2014: "If it's supposed to act like a button, it should be a button." Also includes a grunt:precommit run that picked up some postcss changes to src/wp-includes/css/customize-preview.css Fixes #29958. Props ajercia, ipm-frommen for an iterative patch, valendesigns for an iterative patch, GaryJ for feedback, joedolson for feedback, helen for feedback Built from https://develop.svn.wordpress.org/trunk@39141 git-svn-id: http://core.svn.wordpress.org/trunk@39081 1a063a9b-81f0-0310-95a4-ce76da25c4cd
1 line
5.3 KiB
CSS
1 line
5.3 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 .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;-webkit-box-shadow:none;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;-webkit-border-radius:50%;border-radius:50%;border:2px solid #fff;-webkit-box-shadow:0 2px 1px rgba(46,68,83,.15);box-shadow:0 2px 1px rgba(46,68,83,.15);text-align:center;display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-flex-direction:row;-moz-box-orient:horizontal;-moz-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-pack:center;-webkit-justify-content:center;-moz-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-webkit-align-items:center;-moz-box-align:center;-ms-flex-align:center;align-items:center;cursor:pointer;padding:0;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:.4s;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{-webkit-animation-name:customize-partial-edit-shortcut-bounce-appear;animation-name:customize-partial-edit-shortcut-bounce-appear;pointer-events:auto}body.customize-partial-edit-shortcuts-hidden .customize-partial-edit-shortcut button{-webkit-animation-name:customize-partial-edit-shortcut-bounce-disappear;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}@-webkit-keyframes customize-partial-edit-shortcut-bounce-appear{20%,40%,60%,80%,from,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}20%{-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}40%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}60%{opacity:1;-webkit-transform:scale3d(1.03,1.03,1.03);transform:scale3d(1.03,1.03,1.03)}80%{-webkit-transform:scale3d(.97,.97,.97);transform:scale3d(.97,.97,.97)}to{opacity:1;-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}@keyframes customize-partial-edit-shortcut-bounce-appear{20%,40%,60%,80%,from,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}20%{-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}40%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}60%{opacity:1;-webkit-transform:scale3d(1.03,1.03,1.03);transform:scale3d(1.03,1.03,1.03)}80%{-webkit-transform:scale3d(.97,.97,.97);transform:scale3d(.97,.97,.97)}to{opacity:1;-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}@-webkit-keyframes customize-partial-edit-shortcut-bounce-disappear{20%,40%,60%,80%,from,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:1;-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}20%{-webkit-transform:scale3d(.97,.97,.97);transform:scale3d(.97,.97,.97)}40%{opacity:1;-webkit-transform:scale3d(1.03,1.03,1.03);transform:scale3d(1.03,1.03,1.03)}60%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}80%{-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}to{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}}@keyframes customize-partial-edit-shortcut-bounce-disappear{20%,40%,60%,80%,from,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:1;-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}20%{-webkit-transform:scale3d(.97,.97,.97);transform:scale3d(.97,.97,.97)}40%{opacity:1;-webkit-transform:scale3d(1.03,1.03,1.03);transform:scale3d(1.03,1.03,1.03)}60%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}80%{-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}to{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}}@media screen and (max-width:800px){.customize-partial-edit-shortcut button{left:-18px}} |