WordPress.org

Make WordPress Core

Ticket #28983: responsive-admin-bar.diff

File responsive-admin-bar.diff, 2.7 KB (added by terminalpixel, 4 years ago)

Patch to use flexbox within the admin bar

  • src/wp-admin/css/colors/_admin.scss

     
    287287        color: $menu-highlight-icon;
    288288}
    289289
     290#wpadminbar #wp-admin-bar-my-account.with-avatar > .ab-empty-item img,
     291#wpadminbar #wp-admin-bar-my-account.with-avatar > a img {
     292        box-shadow: -8px 0 0 $menu-background, -8px 0 3px $menu-background; /* A little trick so that text doesn't appear to run under the avatar image */
     293}
    290294
     295
    291296/* Admin Bar: submenu */
    292297
    293298#wpadminbar .menupop .ab-sub-wrapper {
  • src/wp-includes/css/admin-bar.css

     
    8888        line-height: 32px;
    8989        height: 32px;
    9090        position: fixed;
     91        display: block;
     92        display: flex;
    9193        top: 0;
    9294        left: 0;
    9395        width: 100%;
     
    9698        background: #23282d;
    9799}
    98100
     101#wpadminbar .quicklinks {
     102        display: flex;
     103        width: 100%;
     104        justify-content: space-between;
     105}
     106
     107#wpadminbar .ab-top-menu {
     108        display: flex;
     109        justify-content: flex-start;
     110}
     111
    99112#wpadminbar .ab-sub-wrapper,
    100113#wpadminbar ul,
    101114#wpadminbar ul li {
     
    121134        float: left;
    122135}
    123136
     137#wpadminbar .ab-item {
     138        overflow: hidden;
     139}
     140
    124141#wpadminbar .ab-empty-item {
    125142        outline: none;
    126143}
     
    378395
    379396#wpadminbar .ab-top-secondary {
    380397        float: right;
     398        justify-content: flex-end;
     399        flex-direction: row-reverse;
    381400}
    382401
    383402#wpadminbar ul li:last-child,
     
    445464#wpadminbar #wp-admin-bar-user-info a {
    446465        background: none;
    447466        height: auto;
     467        overflow: visible;
    448468}
    449469
    450470#wpadminbar #wp-admin-bar-user-info span {
     
    463483        font-size: 11px;
    464484}
    465485
     486#wpadminbar #wp-admin-bar-my-account.with-avatar > a {
     487        /*display: flex;
     488        align-items: center;
     489        white-space: nowrap;
     490        text-overflow: ellipsis;*/
     491        position: relative;
     492}
     493
    466494#wpadminbar #wp-admin-bar-my-account.with-avatar > .ab-empty-item img,
    467495#wpadminbar #wp-admin-bar-my-account.with-avatar > a img {
     496        position: absolute;
    468497        width: auto;
    469498        height: 16px;
    470499        padding: 0;
     
    472501        background: #eee;
    473502        line-height: 24px;
    474503        vertical-align: middle;
    475         margin: -4px 0 0 6px;
     504        margin-left: 6px;
    476505        float: none;
    477506        display: inline;
     507        top: 7px;
     508        right: 8px;
     509        box-shadow: -8px 0 0 #23282d, -8px 0 3px #23282d; /* A little trick so that text doesn't appear to run under the avatar image */
    478510}
    479511
    480512#wpadminbar.ie8 #wp-admin-bar-my-account.with-avatar > .ab-empty-item img,
     
    9881020
    9891021        #wpadminbar .quicklinks li#wp-admin-bar-my-account.with-avatar > a img {
    9901022                position: absolute;
    991                 top: 13px;
     1023                top: 10px;
    9921024                right: 10px;
    9931025                width: 26px;
    9941026                height: 26px;