WordPress.org

Make WordPress Core

Ticket #28599: 28599-admin-menu-focus-bar.diff

File 28599-admin-menu-focus-bar.diff, 2.7 KB (added by florianziegler, 6 years ago)

admin menu focus bar

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

    diff --git src/wp-admin/css/admin-menu.css src/wp-admin/css/admin-menu.css
    index f4da4e4..3dc0fe6 100644
     
    181181        color: #45bbe6;
    182182}
    183183
     184/* On hover & focus display the blue "focus bar" on the left, darker background */
     185.admin-color-fresh #adminmenu a:hover,
     186.admin-color-fresh #adminmenu li.menu-top > a:focus,
     187.admin-color-fresh #adminmenu .wp-submenu a:hover,
     188.admin-color-fresh #adminmenu .wp-submenu a:focus {
     189    box-shadow: inset 4px 0 0 0 #45bbe6;
     190    transition: box-shadow .2s linear;
     191}
     192/* Top menu item color stays blue, when submenu is open */
     193.admin-color-fresh #adminmenu li.opensub > a {
     194    color: #45bbe6;
     195}
     196/* Focus bar in white, when menu item is current */
     197.admin-color-fresh #adminmenu li.current a:hover,
     198.admin-color-fresh #adminmenu li.current a:focus,
     199.admin-color-fresh #adminmenu li.wp-has-current-submenu > a:hover,
     200.admin-color-fresh #adminmenu li.wp-has-current-submenu > a:focus,
     201.admin-color-fresh #adminmenu .wp-submenu li.current a:hover,
     202.admin-color-fresh #adminmenu .wp-submenu li.current a:focus {
     203    box-shadow: inset 4px 0 0 0 white;
     204}
     205
    184206#adminmenu li.menu-top {
    185207        border: none;
    186208        min-height: 34px;
    div.wp-menu-image:before { 
    375397        color: #fff;
    376398}
    377399
    378 #adminmenu li:hover div.wp-menu-image:before {
     400#adminmenu li:hover div.wp-menu-image:before,
     401/* Makes menu image blue on focus */
     402.admin-color-fresh #adminmenu li a:focus div.wp-menu-image:before,
     403/* Keep menu image blue when submenu is open */
     404.admin-color-fresh #adminmenu li.opensub div.wp-menu-image:before {
    379405        color: #45bbe6;
    380406}
     407.admin-color-fresh #adminmenu li.current:hover div.wp-menu-image:before,
     408.admin-color-fresh #adminmenu li.current a:focus div.wp-menu-image:before,
     409/* Keeps icon white when it has the current submenu */
     410.admin-color-fresh #adminmenu li.wp-has-current-submenu.opensub div.wp-menu-image:before,
     411.admin-color-fresh #adminmenu li.wp-has-current-submenu a:focus div.wp-menu-image:before {
     412        color: #fff;
     413}
    381414
    382415.folded #adminmenu div.wp-menu-image {
    383416        width: 35px;
  • src/wp-admin/js/user-profile.js

    diff --git src/wp-admin/js/user-profile.js src/wp-admin/js/user-profile.js
    index 2dd6e2a..710dc52 100644
     
    120120                                        color_scheme: $this.children( 'input[name="admin_color"]' ).val(),
    121121                                        nonce:        $('#color-nonce').val()
    122122                                });
     123
     124                // update body class
     125                $( 'body' ).removeClass( function ( index, classes ) {
     126                    return ( classes.match( /(^|\s)admin-color-\S+/g ) || [] ).join(' ');
     127                }).addClass( 'admin-color-' + $this.children( 'input[name="admin_color"]' ).val() );
    123128                        }
    124129                });
    125130        });