WordPress.org

Make WordPress Core

Ticket #29958: 29958.2.patch

File 29958.2.patch, 6.9 KB (added by afercia, 5 years ago)
  • src/wp-admin/css/admin-menu.css

     
    262262.folded #adminmenu .wp-has-current-submenu.opensub .wp-submenu,
    263263.folded #adminmenu a.menu-top:focus + .wp-submenu,
    264264.folded #adminmenu .wp-has-current-submenu a.menu-top:focus + .wp-submenu,
    265 .no-js.folded #adminmenu .wp-has-submenu:hover .wp-submenu  {
     265.no-js.folded #adminmenu .wp-has-submenu:hover .wp-submenu {
    266266        top: 0;
    267267        left: 36px;
    268268}
     
    380380}
    381381
    382382.folded #adminmenu div.wp-menu-image {
    383         width: 35px;
    384383        height: 30px;
    385384        position: absolute;
    386385        z-index: 25;
     
    533532        display: none;
    534533}
    535534
    536 #collapse-menu {
    537         font-size: 13px;
     535#collapse-button {
     536        display: block;
     537        width: 100%;
     538        height: 34px;
     539        margin: 0;
     540        border: none;
     541        padding: 0;
     542        position: relative;
     543        overflow: visible;
    538544        line-height: 34px;
    539         margin-top: 10px;
     545        background: none;
    540546        color: #aaa;
    541         -webkit-transition: all .1s ease-in-out;
    542         transition: all .1s ease-in-out;
     547        cursor: pointer;
     548        outline: 0;
     549        text-align: center;
    543550}
    544551
    545 #collapse-menu:hover,
    546 #collapse-menu:hover #collapse-button div:after {
     552#collapse-button:hover,
     553#collapse-button:focus {
    547554        color: #45bbe6;
    548555}
    549556
    550 .folded #collapse-menu span {
    551         display: none;
     557#collapse-button .collapse-button-icon,
     558#collapse-button .collapse-button-label {
     559        /* absolutely positioned to avoid 1px shift in IE when button is pressed */
     560        display: block;
     561        position: absolute;
     562        top: 0;
     563        left: 0;
    552564}
    553565
    554 #collapse-button,
    555 #collapse-button div {
    556         width: 15px;
    557         height: 15px;
     566#collapse-button .collapse-button-icon {
     567        width: 36px;
     568        height: 34px;
     569        line-height: 34px;
    558570}
    559571
    560 #collapse-button {
    561         float: left;
    562         height: 15px;
    563         margin: 10px 8px 10px 11px;
    564         width: 15px;
    565         -webkit-border-radius: 10px;
    566         border-radius: 10px;
     572#collapse-button .collapse-button-label {
     573        padding: 0 0 0 36px;
     574        line-height: 34px;
    567575}
    568576
    569 #wpwrap #collapse-button div {
    570         padding: 0;
     577.folded #collapse-button .collapse-button-label,
     578#collapse-button .screen-reader-text {
     579        /* screen-reader-text hidden also for screen readers, read out when folded or auto-fold */
     580        display: none;
    571581}
    572582
    573 #collapse-button div:after {
     583.folded #collapse-button .screen-reader-text {
     584        display: inline;
     585}
     586
     587#collapse-button .collapse-button-icon:after {
    574588        content: '\f148';
    575589        display: block;
    576         line-height: 15px;
    577         left: -3px;
    578         top: -3px;
    579         color: #aaa;
     590        position: relative;
     591        top: 7px;
     592        text-align: center;
    580593        font: normal 20px/1 'dashicons' !important;
    581594        speak: none;
    582         margin: 0 auto;
    583         padding: 0 !important;
    584         position: relative;
    585         text-align: center;
    586         width: 20px;
    587         -webkit-transition: all .1s ease-in-out;
    588         transition: all .1s ease-in-out;
    589595        -webkit-font-smoothing: antialiased;
    590596        -moz-osx-font-smoothing: grayscale;
    591597}
    592598
    593 .folded #collapse-button div:after,
    594 .rtl #collapse-button div:after {
     599.folded #collapse-button .collapse-button-icon:after,
     600.rtl #collapse-button .collapse-button-icon:after {
    595601        -webkit-transform: rotate(180deg);
    596602        -ms-transform: rotate(180deg);
    597         transform: rotate(180deg);
     603        /* fix Firefox sub-pixel rendering see https://bugzilla.mozilla.org/show_bug.cgi?id=739176 */
     604        transform: rotate(180.001deg);
    598605}
    599606
    600 .rtl.folded #collapse-button div:after {
     607.rtl.folded #collapse-button .collapse-button-icon:after {
    601608        -webkit-transform: none;
    602609        -ms-transform: none;
    603610        transform: none;
    604611}
    605612
     613#collapse-button .collapse-button-icon:after,
     614#collapse-button .collapse-button-label {
     615        -webkit-transition: all .1s ease-in-out;
     616        transition: all .1s ease-in-out;
     617}
     618
     619
    606620/**
    607621 * Toolbar menu toggle
    608622 */
     
    630644        .auto-fold #adminmenu .wp-has-current-submenu .wp-submenu.sub-open,
    631645        .auto-fold #adminmenu .wp-has-current-submenu.opensub .wp-submenu,
    632646        .auto-fold #adminmenu a.menu-top:focus + .wp-submenu,
    633         .auto-fold #adminmenu .wp-has-current-submenu a.menu-top:focus + .wp-submenu  {
     647        .auto-fold #adminmenu .wp-has-current-submenu a.menu-top:focus + .wp-submenu {
    634648                top: 0px;
    635649                left: 36px;
    636650        }
     
    669683
    670684        .auto-fold #adminmenu div.wp-menu-image {
    671685                height: 30px;
    672                 width: 34px;
    673686                position: absolute;
    674687                z-index: 25;
    675688        }
     
    708721                z-index: 10000;
    709722        }
    710723
    711         .auto-fold #collapse-menu span {
     724        .auto-fold #collapse-menu .collapse-button-label {
    712725                display: none;
    713726        }
    714727
    715         .auto-fold #collapse-button div {
    716                 background: none;
     728        .auto-fold #collapse-button .screen-reader-text {
     729                display: inline;
    717730        }
    718731
    719         .auto-fold #collapse-button div:after {
     732        .auto-fold #collapse-button .collapse-button-icon:after {
    720733                -webkit-transform: rotate(180deg);
    721734                -ms-transform: rotate(180deg);
    722                 transform: rotate(180deg);
     735                transform: rotate(180.001deg);
    723736        }
    724737
    725         .rtl.auto-fold #collapse-button div:after {
     738        .rtl.auto-fold #collapse-button .collapse-button-icon:after {
    726739                -webkit-transform: none;
    727740                -ms-transform: none;
    728741                transform: none;
  • src/wp-admin/css/colors/_admin.scss

     
    235235
    236236/* Admin Menu: collapse button */
    237237
    238 #collapse-menu {
     238#collapse-button {
    239239    color: $menu-collapse-text;
    240240}
    241241
    242 #collapse-menu:hover {
    243     color: $menu-collapse-focus-text;
     242#collapse-button:hover,
     243#collapse-button:focus {
     244    color: $menu-submenu-focus-text;
    244245}
    245246
    246 #collapse-button div:after {
    247     color: $menu-collapse-icon;
    248 }
    249247
    250 #collapse-menu:hover #collapse-button div:after {
    251     color: $menu-collapse-focus-icon;
    252 }
    253 
    254 
    255248/* Admin Bar */
    256249
    257250#wpadminbar {
  • src/wp-admin/js/common.js

     
    207207                $(e.target).parent().siblings('a').get(0).click();
    208208        });
    209209
    210         $('#collapse-menu').on('click.collapse-menu', function() {
     210        $('#collapse-menu').on('click.collapse-menu', '#collapse-button', function() {
    211211                var body = $( document.body ), respWidth, state;
    212212
    213213                // reset any compensation for submenus near the bottom of the screen
  • src/wp-admin/menu-header.php

     
    201201                echo "</li>";
    202202        }
    203203
    204         echo '<li id="collapse-menu" class="hide-if-no-js"><div id="collapse-button"><div></div></div>';
    205         echo '<span>' . esc_html__( 'Collapse menu' ) . '</span>';
    206         echo '</li>';
     204        echo '<li id="collapse-menu" class="hide-if-no-js"><button type="button" id="collapse-button" aria-live="polite" aria-relevant="all" aria-atomic="true" aria-role="status">' .
     205                '<span class="collapse-button-icon"></span><span class="collapse-button-label">' . esc_html__( 'Collapse menu' ) . '</span>' .
     206                '<span class="screen-reader-text">' . esc_html__( 'Expand menu' ) . '</span>' .
     207                '</button></li>';
    207208}
    208209
    209210?>