WordPress.org

Make WordPress Core

Ticket #28599: 28599-currentcolor-arrow.diff

File 28599-currentcolor-arrow.diff, 4.1 KB (added by florianziegler, 6 years ago)

Using currentColor for the focus bar, submenu indicating arrows now show up on focus

  • 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..1af8a59 100644
     
    181181        color: #45bbe6;
    182182}
    183183
     184/* On hover & focus display the blue "focus bar" on the left, darker background */
     185#adminmenu a:hover,
     186#adminmenu li.menu-top > a:focus,
     187#adminmenu .wp-submenu a:hover,
     188#adminmenu .wp-submenu a:focus {
     189    box-shadow: inset 4px 0 0 0 currentColor;
     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: currentColor;
     195}
     196/* Focus bar in white, when menu item is current */
     197#adminmenu li.current a:hover,
     198#adminmenu li.current a:focus,
     199#adminmenu li.wp-has-current-submenu > a:hover,
     200#adminmenu li.wp-has-current-submenu > a:focus,
     201#adminmenu .wp-submenu li.current a:hover,
     202#adminmenu .wp-submenu li.current a:focus {
     203    box-shadow: inset 4px 0 0 0 currentColor;
     204}
     205
    184206#adminmenu li.menu-top {
    185207        border: none;
    186208        min-height: 34px;
     
    235257#adminmenu li.menu-top:hover,
    236258#adminmenu li.opensub > a.menu-top,
    237259#adminmenu li > a.menu-top:focus {
     260    color: #45bbe6; /* .menu-top color should be blue like the icon, when submenu is open */
    238261        position: relative;
    239262        background-color: #111;
    240263}
    div.wp-menu-image:before { 
    375398        color: #fff;
    376399}
    377400
    378 #adminmenu li:hover div.wp-menu-image:before {
     401#adminmenu li:hover div.wp-menu-image:before,
     402/* Makes menu image blue on focus */
     403.admin-color-fresh #adminmenu li a:focus div.wp-menu-image:before,
     404/* Keep menu image blue when submenu is open */
     405.admin-color-fresh #adminmenu li.opensub div.wp-menu-image:before {
    379406        color: #45bbe6;
    380407}
     408.admin-color-fresh #adminmenu li.current:hover div.wp-menu-image:before,
     409.admin-color-fresh #adminmenu li.current a:focus div.wp-menu-image:before,
     410/* Keeps icon white when it has the current submenu */
     411.admin-color-fresh #adminmenu li.wp-has-current-submenu.opensub div.wp-menu-image:before,
     412.admin-color-fresh #adminmenu li.wp-has-current-submenu a:focus div.wp-menu-image:before {
     413        color: #fff;
     414}
    381415
    382416.folded #adminmenu div.wp-menu-image {
    383417        width: 35px;
    ul#adminmenu > li.current > a.current:after { 
    444478}
    445479
    446480/* flyout menu arrow */
    447 #adminmenu li.wp-has-submenu.wp-not-current-submenu:hover:after {
     481#adminmenu li.wp-has-submenu.wp-not-current-submenu:hover:after,
     482/* Add submenu indicating arrows on focus */
     483.admin-color-fresh #adminmenu li a.wp-has-submenu.wp-not-current-submenu:focus:after,
     484.admin-color-fresh #adminmenu li.opensub a.wp-has-submenu.wp-not-current-submenu:after {
    448485        right: 0;
    449486        border: solid transparent;
    450487        content: " ";
    ul#adminmenu > li.current > a.current:after { 
    463500        top: 18px;
    464501}
    465502
    466 #adminmenu li.wp-has-submenu.wp-not-current-submenu.opensub:hover:after {
     503#adminmenu li.wp-has-submenu.wp-not-current-submenu.opensub:hover:after,
     504.admin-color-fresh #adminmenu li a.wp-has-submenu.wp-not-current-submenu:focus:after,
     505.admin-color-fresh #adminmenu li.opensub a.wp-has-submenu.wp-not-current-submenu:after {
    467506        border-right-color: #333;
    468507}
    469508
    li#wp-admin-bar-menu-toggle { 
    896935                -moz-box-sizing: border-box;
    897936                box-sizing: border-box;
    898937        }
     938    /* Hide the submenu indicating arrows */
     939    .admin-color-fresh #adminmenu li a.wp-has-submenu.wp-not-current-submenu:focus:after,
     940    .admin-color-fresh #adminmenu li.opensub a.wp-has-submenu.wp-not-current-submenu:after {
     941        border-right-color: transparent;
     942    }
    899943}
    900944
    901945/* Smartphone */
  • 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        });