Changeset 51672

Timestamp:

08/26/2021 06:23:49 PM (4 years ago)

Author:

ryelle

Message:

Toolbar: Provide a CSS custom property for the admin bar height.

This new custom property, --wp-admin--admin-bar--height, reflects the admin bar's height and adjusts responsively on smaller screens. It can be used to offset content to avoid overlapping the admin bar, without needing to copy the media query.

This also removes a workaround only needed for Internet Explorer 6 and below.

Props nico23, sabernhardt.
Fixes #52623.

Location:

trunk/src/wp-includes

Files:

• admin-bar.php (modified) (1 diff)
• css/admin-bar.css (modified) (2 diffs)

trunk/src/wp-includes/admin-bar.php

@@ -1168 +1168 @@
 <style<?php echo $type_attr; ?> media="screen">
     html { margin-top: 32px !important; }
-    * html body { margin-top: 32px !important; }
     @media screen and ( max-width: 782px ) {
         html { margin-top: 46px !important; }
-        * html body { margin-top: 46px !important; }
     }
 </style>

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

@@ +1 @@
+html {
+    --wp-admin--admin-bar--height: 32px;
+}
+
 #wpadminbar * {
     height: auto;
@@ -730 +734 @@
 
 @media screen and (max-width: 782px) {
+    html {
+        --wp-admin--admin-bar--height: 46px;
+    }
+
     /* Toolbar Touchification*/
     html #wpadminbar {