Ticket #28983: responsive-admin-bar.diff

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

@@ -287 +287 @@
         color: $menu-highlight-icon;
 }
 
+#wpadminbar #wp-admin-bar-my-account.with-avatar > .ab-empty-item img,
+#wpadminbar #wp-admin-bar-my-account.with-avatar > a img {
+        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 */
+}
 
+
 /* Admin Bar: submenu */
 
 #wpadminbar .menupop .ab-sub-wrapper {

src/wp-includes/css/admin-bar.css

@@ -88 +88 @@
         line-height: 32px;
         height: 32px;
         position: fixed;
+        display: block;
+        display: flex;
         top: 0;
         left: 0;
         width: 100%;
@@ -96 +98 @@
         background: #23282d;
 }
 
+#wpadminbar .quicklinks {
+        display: flex;
+        width: 100%;
+        justify-content: space-between;
+}
+
+#wpadminbar .ab-top-menu {
+        display: flex;
+        justify-content: flex-start;
+}
+
 #wpadminbar .ab-sub-wrapper,
 #wpadminbar ul,
 #wpadminbar ul li {
@@ -121 +134 @@
         float: left;
 }
 
+#wpadminbar .ab-item {
+        overflow: hidden;
+}
+
 #wpadminbar .ab-empty-item {
         outline: none;
 }
@@ -378 +395 @@
 
 #wpadminbar .ab-top-secondary {
         float: right;
+        justify-content: flex-end;
+        flex-direction: row-reverse;
 }
 
 #wpadminbar ul li:last-child,
@@ -445 +464 @@
 #wpadminbar #wp-admin-bar-user-info a {
         background: none;
         height: auto;
+        overflow: visible;
 }
 
 #wpadminbar #wp-admin-bar-user-info span {
@@ -463 +483 @@
         font-size: 11px;
 }
 
+#wpadminbar #wp-admin-bar-my-account.with-avatar > a {
+        /*display: flex;
+        align-items: center;
+        white-space: nowrap;
+        text-overflow: ellipsis;*/
+        position: relative;
+}
+
 #wpadminbar #wp-admin-bar-my-account.with-avatar > .ab-empty-item img,
 #wpadminbar #wp-admin-bar-my-account.with-avatar > a img {
+        position: absolute;
         width: auto;
         height: 16px;
         padding: 0;
@@ -472 +501 @@
         background: #eee;
         line-height: 24px;
         vertical-align: middle;
-        margin: -4px 0 0 6px;
+        margin-left: 6px;
         float: none;
         display: inline;
+        top: 7px;
+        right: 8px;
+        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 */
 }
 
 #wpadminbar.ie8 #wp-admin-bar-my-account.with-avatar > .ab-empty-item img,
@@ -988 +1020 @@
 
         #wpadminbar .quicklinks li#wp-admin-bar-my-account.with-avatar > a img {
                 position: absolute;
-                top: 13px;
+                top: 10px;
                 right: 10px;
                 width: 26px;
                 height: 26px;