Make WordPress Core

Changeset 50549


Ignore:
Timestamp:
03/18/2021 09:42:12 PM (3 years ago)
Author:
ryelle
Message:

Administration: Make focus states consistent in admin menu when collapsed.

When collapsed or on a small screen, these styles would override the color schemes, causing a dark background to appear regardless of the color scheme's settings. This change also uses focus-within to show or hide the menu item's arrow, consistent with how the arrow behaves on hover.

Props afercia, Bueltge.
Fixes #32579.

Location:
trunk/src/wp-admin/css
Files:
2 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-admin/css/admin-menu.css

    r50162 r50549  
    214214    overflow: visible;
    215215    word-wrap: break-word;
    216 }
    217 
    218 #adminmenu .wp-submenu,
    219 .folded #adminmenu a.wp-has-current-submenu:focus + .wp-submenu,
    220 .folded #adminmenu .wp-has-current-submenu .wp-submenu {
    221216    padding: 7px 0 8px;
    222217    z-index: 9999;
     
    232227}
    233228
     229#adminmenu a.wp-has-current-submenu:focus + .wp-submenu {
     230    top: 0;
     231}
     232
    234233#adminmenu .wp-has-current-submenu .wp-submenu,
    235234.no-js li.wp-has-current-submenu:hover .wp-submenu,
    236 #adminmenu a.wp-has-current-submenu:focus + .wp-submenu,
    237235#adminmenu .wp-has-current-submenu .wp-submenu.sub-open,
    238236#adminmenu .wp-has-current-submenu.opensub .wp-submenu {
     
    246244    margin-top: 0;
    247245    box-shadow: none;
    248     background-color: #2c3338;
     246}
     247
     248.folded #adminmenu .wp-has-current-submenu .wp-submenu {
     249    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2);
    249250}
    250251
     
    266267#adminmenu li.wp-has-current-submenu a.wp-has-current-submenu,
    267268#adminmenu li.current a.menu-top,
    268 .folded #adminmenu li.wp-has-current-submenu,
    269 .folded #adminmenu li.current.menu-top,
    270269#adminmenu .wp-menu-arrow,
    271270#adminmenu .wp-has-current-submenu .wp-submenu .wp-submenu-head,
     
    446445}
    447446
    448 .folded ul#adminmenu li:hover a.wp-has-current-submenu:after {
     447.folded ul#adminmenu li:hover a.wp-has-current-submenu:after,
     448.folded ul#adminmenu li.wp-has-current-submenu:focus-within a.wp-has-current-submenu:after {
    449449    display: none;
    450450}
     
    457457
    458458/* flyout menu arrow */
    459 #adminmenu li.wp-has-submenu.wp-not-current-submenu:hover:after {
     459#adminmenu li.wp-has-submenu.wp-not-current-submenu:hover:after,
     460#adminmenu li.wp-has-submenu.wp-not-current-submenu:focus-within:after {
    460461    right: 0;
    461462    border: 8px solid transparent;
     
    469470}
    470471
    471 .folded ul#adminmenu li.wp-has-submenu.wp-not-current-submenu:hover:after {
     472.folded ul#adminmenu li.wp-has-submenu.wp-not-current-submenu:hover:after,
     473.folded ul#adminmenu li.wp-has-submenu.wp-not-current-submenu:focus-within:after {
    472474    border-width: 4px;
    473475    margin-top: -4px;
     
    475477}
    476478
    477 #adminmenu li.wp-has-submenu.wp-not-current-submenu.opensub:hover:after {
     479#adminmenu li.wp-has-submenu.wp-not-current-submenu.opensub:hover:after,
     480#adminmenu li.wp-has-submenu.wp-not-current-submenu:focus-within:after {
    478481    border-right-color: #2c3338;
    479482}
     
    710713    }
    711714
    712     .auto-fold ul#adminmenu li:hover a.wp-has-current-submenu:after {
     715    .auto-fold ul#adminmenu li:hover a.wp-has-current-submenu:after,
     716    .auto-fold ul#adminmenu li:focus-within a.wp-has-current-submenu:after {
    713717        display: none;
    714718    }
    715719
    716     .auto-fold ul#adminmenu li.wp-has-submenu.wp-not-current-submenu:hover:after {
     720    .auto-fold ul#adminmenu li.wp-has-submenu.wp-not-current-submenu:hover:after,
     721    .auto-fold ul#adminmenu li.wp-has-submenu.wp-not-current-submenu:focus-within:after {
    717722        border-width: 4px;
    718723        margin-top: -4px;
     
    809814    }
    810815
    811     .auto-fold ul#adminmenu li.wp-has-submenu.wp-not-current-submenu:hover:after {
     816    .auto-fold ul#adminmenu li.wp-has-submenu.wp-not-current-submenu:hover:after,
     817    .auto-fold ul#adminmenu li.wp-has-submenu.wp-not-current-submenu:focus-within:after {
    812818        display: none;
    813819    }
     
    841847    }
    842848
    843     .auto-fold ul#adminmenu li:hover a.wp-has-current-submenu:after {
     849    .auto-fold ul#adminmenu li:hover a.wp-has-current-submenu:after,
     850    .auto-fold ul#adminmenu li:focus-within a.wp-has-current-submenu:after {
    844851        display: block;
    845852    }
  • trunk/src/wp-admin/css/colors/_admin.scss

    r50386 r50549  
    287287#adminmenu .wp-has-current-submenu .wp-submenu,
    288288#adminmenu .wp-has-current-submenu.opensub .wp-submenu,
    289 .folded #adminmenu .wp-has-current-submenu .wp-submenu,
    290289#adminmenu a.wp-has-current-submenu:focus + .wp-submenu {
    291290    background: $menu-submenu-background;
    292291}
    293292
    294 #adminmenu li.wp-has-submenu.wp-not-current-submenu.opensub:hover:after {
     293#adminmenu li.wp-has-submenu.wp-not-current-submenu.opensub:hover:after,
     294#adminmenu li.wp-has-submenu.wp-not-current-submenu:focus-within:after {
    295295    border-right-color: $menu-submenu-background;
    296296}
     
    302302#adminmenu .wp-submenu a,
    303303#adminmenu .wp-has-current-submenu .wp-submenu a,
    304 .folded #adminmenu .wp-has-current-submenu .wp-submenu a,
    305304#adminmenu a.wp-has-current-submenu:focus + .wp-submenu a,
    306305#adminmenu .wp-has-current-submenu.opensub .wp-submenu a {
Note: See TracChangeset for help on using the changeset viewer.