From ebe147cb133bf2c54d1de171dbaee5079836629e Mon Sep 17 00:00:00 2001
From: Kelly Choyce-Dwan <ryelle@git.wordpress.org>
Date: Thu, 26 Aug 2021 18:23:49 +0000
Subject: [PATCH] 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.



git-svn-id: https://develop.svn.wordpress.org/trunk@51672 602fd350-edb4-49c9-b593-d223f7449a82
---
 src/wp-includes/admin-bar.php     | 2 --
 src/wp-includes/css/admin-bar.css | 8 ++++++++
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/wp-includes/admin-bar.php b/src/wp-includes/admin-bar.php
index d36487ee56..b35a49fe1a 100644
--- a/src/wp-includes/admin-bar.php
+++ b/src/wp-includes/admin-bar.php
@@ -1167,10 +1167,8 @@ function _admin_bar_bump_cb() {
 	?>
 <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>
 	<?php
diff --git a/src/wp-includes/css/admin-bar.css b/src/wp-includes/css/admin-bar.css
index 3788753e8c..5720af7b41 100644
--- a/src/wp-includes/css/admin-bar.css
+++ b/src/wp-includes/css/admin-bar.css
@@ -1,3 +1,7 @@
+html {
+	--wp-admin--admin-bar--height: 32px;
+}
+
 #wpadminbar * {
 	height: auto;
 	width: auto;
@@ -729,6 +733,10 @@ html:lang(he-il) .rtl #wpadminbar * {
 }
 
 @media screen and (max-width: 782px) {
+	html {
+		--wp-admin--admin-bar--height: 46px;
+	}
+
 	/* Toolbar Touchification*/
 	html #wpadminbar {
 		height: 46px;