WordPress.org

Make WordPress Core

Ticket #29958: 29958.4.patch

File 29958.4.patch, 6.9 KB (added by afercia, 4 years ago)

  • src/wp-admin/css/admin-menu.css

     
    264264.folded #adminmenu .wp-has-current-submenu.opensub .wp-submenu,
    265265.folded #adminmenu a.menu-top:focus + .wp-submenu,
    266266.folded #adminmenu .wp-has-current-submenu a.menu-top:focus + .wp-submenu,
    267 .no-js.folded #adminmenu .wp-has-submenu:hover .wp-submenu  {
     267.no-js.folded #adminmenu .wp-has-submenu:hover .wp-submenu {
    268268        top: 0;
    269269        left: 36px;
    270270}
    … …  
    383383}
    384384
    385385.folded #adminmenu div.wp-menu-image {
    386         width: 35px;
    387386        height: 30px;
    388387        position: absolute;
    389388        z-index: 25;
    … …  
    533532        display: none;
    534533}
    535534
    536 #collapse-menu {
    537         font-size: 13px;
    538         line-height: 34px;
    539         margin-top: 10px;
    540         color: #00b9eb;
    541         color: rgba(240,245,250,0.6);
    542         -webkit-transition: all .1s ease-in-out;
    543         transition: all .1s ease-in-out;
     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;
     544        line-height: 34px;
     545        background: none;
     546        color: #aaa;
     547        cursor: pointer;
     548        outline: 0;
     549        text-align: center;
    544550}
    545551
    546 #collapse-menu:hover,
    547 #collapse-menu:hover #collapse-button div:after {
    548         color: #00b9eb;
     552#collapse-button:hover,
     553#collapse-button:focus {
     554        color: #45bbe6;
    549555}
    550556
    551 .folded #collapse-menu span {
    552         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;
    553564}
    554565
    555 #collapse-button,
    556 #collapse-button div {
    557         width: 15px;
    558         height: 15px;
     566#collapse-button .collapse-button-icon {
     567        width: 36px;
     568        height: 34px;
     569        line-height: 34px;
    559570}
    560571
    561 #collapse-button {
    562         float: left;
    563         height: 15px;
    564         margin: 10px 8px 10px 11px;
    565         width: 15px;
    566         -webkit-border-radius: 10px;
    567         border-radius: 10px;
     572#collapse-button .collapse-button-label {
     573        padding: 0 0 0 36px;
     574        line-height: 34px;
    568575}
    569576
    570 #wpwrap #collapse-button div {
    571         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;
    572581}
    573582
    574 #collapse-button div:after {
     583.folded #collapse-button .screen-reader-text {
     584        display: inline;
     585}
     586
     587#collapse-button .collapse-button-icon:after {
    575588        content: '\f148';
    576589        display: block;
    577         line-height: 15px;
    578         left: -3px;
    579         top: -3px;
    580         color: #00b9eb;
    581         color: rgba(240,245,250,0.6);
     590        position: relative;
     591        top: 7px;
     592        text-align: center;
    582593        font: normal 20px/1 'dashicons' !important;
    583594        speak: none;
    584         margin: 0 auto;
    585         padding: 0 !important;
    586         position: relative;
    587         text-align: center;
    588         width: 20px;
    589         -webkit-transition: all .1s ease-in-out;
    590         transition: all .1s ease-in-out;
    591595        -webkit-font-smoothing: antialiased;
    592596        -moz-osx-font-smoothing: grayscale;
    593597}
    594598
    595599/* rtl:ignore */
    596 .folded #collapse-button div:after,
    597 .rtl #collapse-button div:after {
     600.folded #collapse-button .collapse-button-icon:after,
     601.rtl #collapse-button .collapse-button-icon:after {
    598602        -webkit-transform: rotate(180deg);
    599603        -ms-transform: rotate(180deg);
    600604        transform: rotate(180deg);
    601605}
    602606
    603 .rtl.folded #collapse-button div:after {
     607.rtl.folded #collapse-button .collapse-button-icon:after {
    604608        -webkit-transform: none;
    605609        -ms-transform: none;
    606610        transform: none;
    607611}
    608612
     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
    609619/**
    610620 * Toolbar menu toggle
    611621 */
    … …  
    638648        .auto-fold #adminmenu .wp-has-current-submenu .wp-submenu.sub-open,
    639649        .auto-fold #adminmenu .wp-has-current-submenu.opensub .wp-submenu,
    640650        .auto-fold #adminmenu a.menu-top:focus + .wp-submenu,
    641         .auto-fold #adminmenu .wp-has-current-submenu a.menu-top:focus + .wp-submenu  {
     651        .auto-fold #adminmenu .wp-has-current-submenu a.menu-top:focus + .wp-submenu {
    642652                top: 0px;
    643653                left: 36px;
    644654        }
    … …  
    677687
    678688        .auto-fold #adminmenu div.wp-menu-image {
    679689                height: 30px;
    680                 width: 34px;
    681690                position: absolute;
    682691                z-index: 25;
    683692        }
    … …  
    716725                z-index: 10000;
    717726        }
    718727
    719         .auto-fold #collapse-menu span {
     728        .auto-fold #collapse-menu .collapse-button-label {
    720729                display: none;
    721730        }
    722731
    723         .auto-fold #collapse-button div {
    724                 background: none;
     732        .auto-fold #collapse-button .screen-reader-text {
     733                display: inline;
    725734        }
    726735
    727736        /* rtl:ignore */
    728         .auto-fold #collapse-button div:after {
     737        .auto-fold #collapse-button .collapse-button-icon:after {
    729738                -webkit-transform: rotate(180deg);
    730739                -ms-transform: rotate(180deg);
    731740                transform: rotate(180deg);
    732741        }
    733742
    734         .rtl.auto-fold #collapse-button div:after {
     743        .rtl.auto-fold #collapse-button .collapse-button-icon:after {
    735744                -webkit-transform: none;
    736745                -ms-transform: none;
    737746                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

     
    208208                $(e.target).parent().siblings('a').get(0).click();
    209209        });
    210210
    211         $('#collapse-menu').on('click.collapse-menu', function() {
     211        $( '#collapse-menu' ).on( 'click.collapse-menu', '#collapse-button', function() {
    212212                var body = $( document.body ), respWidth, state;
    213213
    214214                // reset any compensation for submenus near the bottom of the screen

  • src/wp-admin/menu-header.php

     
    212212                echo "</li>";
    213213        }
    214214
    215         echo '<li id="collapse-menu" class="hide-if-no-js"><div id="collapse-button"><div></div></div>';
    216         echo '<span>' . esc_html__( 'Collapse menu' ) . '</span>';
    217         echo '</li>';
     215        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">' .
     216                '<span class="collapse-button-icon"></span><span class="collapse-button-label">' . __( 'Collapse menu' ) . '</span>' .
     217                '<span class="screen-reader-text">' . __( 'Expand menu' ) . '</span>' .
     218                '</button></li>';
    218219}
    219220
    220221?>