From 2c975a1cfcf62d8ff67900911415c0681bb85d9b Mon Sep 17 00:00:00 2001
From: Coleman Watts <coleman@civicrm.org>
Date: Wed, 24 Apr 2019 13:55:08 -0400
Subject: [PATCH] Use variable for menubar height

---
 CRM/Core/Resources.php    |  1 +
 css/crm-menubar.css       | 17 +++++++++++++++--
 css/menubar-backdrop.css  |  4 ++--
 css/menubar-drupal7.css   |  8 ++++----
 css/menubar-drupal8.css   | 13 ++++++++-----
 css/menubar-joomla.css    |  8 ++++----
 css/menubar-wordpress.css |  6 +++---
 7 files changed, 37 insertions(+), 20 deletions(-)

diff --git a/CRM/Core/Resources.php b/CRM/Core/Resources.php
index 3c88fedb38..eb34b4de58 100644
--- a/CRM/Core/Resources.php
+++ b/CRM/Core/Resources.php
@@ -852,6 +852,7 @@ class CRM_Core_Resources {
     }
     $vars = [
       'resourceBase' => rtrim($config->resourceBase, '/'),
+      'menubarHeight' => '40px',
       'menubarColor' => $color,
       'semiTransparentMenuColor' => 'rgba(' . implode(', ', CRM_Utils_Color::getRgb($color)) . ', .85)',
       'highlightColor' => CRM_Utils_Color::getHighlight($color),
diff --git a/css/crm-menubar.css b/css/crm-menubar.css
index 89b486963e..14f27c465d 100644
--- a/css/crm-menubar.css
+++ b/css/crm-menubar.css
@@ -131,7 +131,7 @@ input#crm-qsearch-input {
   border: 1px solid #ccc;
   margin: 4px 4px 0;
   padding: 2px 8px;
-  height: 30px;
+  height: calc($menubarHeight - 10px);
   width: 30px;
   transition: width .5s .05s, background-color .3s .05s;
   color: black;
@@ -224,7 +224,20 @@ body.crm-menubar-over-cms-menu #crm-menubar-toggle-position a i {
   }
 
   #civicrm-menu > li > a {
-    height: 40px;
+    height: $menubarHeight;
+    padding: 0 8px;
+  }
+
+  #civicrm-menu > li > a > * {
+    vertical-align: middle;
+  }
+
+  /* Pseudo-element to ensure vertical alignment */
+  #civicrm-menu > li > a:after {
+    content: '';
+    display: inline-block;
+    height: 100%;
+    vertical-align: middle;
   }
 
   #civicrm-menu > li > a.highlighted {
diff --git a/css/menubar-backdrop.css b/css/menubar-backdrop.css
index b238c51f40..b291d44942 100644
--- a/css/menubar-backdrop.css
+++ b/css/menubar-backdrop.css
@@ -2,10 +2,10 @@
 
   body.crm-menubar-visible.crm-menubar-over-cms-menu {
     border-top: 0 none !important;
-    margin-top: 40px;
+    margin-top: $menubarHeight;
   }
   body.crm-menubar-visible.crm-menubar-over-cms-menu.crm-menubar-wrapped {
-    margin-top: 80px;
+    margin-top: calc($menubarHeight * 2);
   }
   body.crm-menubar-visible.crm-menubar-over-cms-menu #admin-bar {
     visibility: hidden;
diff --git a/css/menubar-drupal7.css b/css/menubar-drupal7.css
index 8317feb022..e8e7ca1d26 100644
--- a/css/menubar-drupal7.css
+++ b/css/menubar-drupal7.css
@@ -5,10 +5,10 @@
   }
 
   body.crm-menubar-visible.crm-menubar-over-cms-menu {
-    padding-top: 40px !important;
+    padding-top: $menubarHeight !important;
   }
   body.crm-menubar-visible.crm-menubar-over-cms-menu.crm-menubar-wrapped {
-    padding-top: 80px !important;
+    padding-top: calc($menubarHeight * 2) !important;
   }
 
   body.crm-menubar-visible.crm-menubar-over-cms-menu #toolbar .toolbar-drawer {
@@ -47,10 +47,10 @@
     min-height: 30px;
   }
   body.crm-menubar-visible.crm-menubar-below-cms-menu.admin-menu {
-    padding-top: 40px !important;
+    padding-top: $menubarHeight !important;
   }
   body.crm-menubar-visible.crm-menubar-below-cms-menu.crm-menubar-wrapped.admin-menu {
-    padding-top: 80px !important;
+    padding-top: calc($menubarHeight * 2) !important;
   }
   body.crm-menubar-visible.crm-menubar-over-cms-menu #admin-menu {
     display: none;
diff --git a/css/menubar-drupal8.css b/css/menubar-drupal8.css
index 868a7864da..0697ea9aca 100644
--- a/css/menubar-drupal8.css
+++ b/css/menubar-drupal8.css
@@ -26,19 +26,22 @@ nav#civicrm-menu-nav .crm-menubar-toggle-btn-icon {
 
 @media (min-width: 768px) {
 
-  body.crm-menubar-visible.crm-menubar-over-cms-menu #toolbar-administration  {
+  body.crm-menubar-visible.crm-menubar-over-cms-menu #toolbar-administration {
     display: none;
   }
 
   body.crm-menubar-visible.crm-menubar-over-cms-menu {
-    padding-top: 40px !important;
+    padding-top: $menubarHeight !important;
   }
-  body.crm-menubar-visible.crm-menubar-over-cms-menu.crm-menubar-wrapped,
+  body.crm-menubar-visible.crm-menubar-over-cms-menu.crm-menubar-wrapped {
+    padding-top: calc($menubarHeight * 2) !important;
+  }
+  /* The Drupal menu is 40px tall so we add that to our menubar height */
   body.crm-menubar-visible.crm-menubar-below-cms-menu {
-    padding-top: 80px !important;
+    padding-top: calc($menubarHeight + 40px) !important;
   }
   body.crm-menubar-visible.crm-menubar-below-cms-menu.crm-menubar-wrapped {
-    padding-top: 120px !important;
+    padding-top: calc($menubarHeight * 2 + 40px) !important;
   }
 
   body.crm-menubar-below-cms-menu > #civicrm-menu-nav ul#civicrm-menu {
diff --git a/css/menubar-joomla.css b/css/menubar-joomla.css
index 482f8c2ac6..57ae08c6b9 100644
--- a/css/menubar-joomla.css
+++ b/css/menubar-joomla.css
@@ -1,17 +1,17 @@
 @media (min-width: 768px) {
 
   body.crm-menubar-over-cms-menu.crm-menubar-visible {
-    padding-top: 40px;
+    padding-top: $menubarHeight;
   }
   body.crm-menubar-over-cms-menu.crm-menubar-visible.crm-menubar-wrapped {
-    padding-top: 80px;
+    padding-top: calc($menubarHeight * 2);
   }
 
   body.crm-menubar-below-cms-menu.crm-menubar-visible {
-    margin-top: 40px;
+    margin-top: $menubarHeight;
   }
   body.crm-menubar-below-cms-menu.crm-menubar-visible.crm-menubar-wrapped {
-    margin-top: 80px;
+    margin-top: calc($menubarHeight * 2);
   }
 
 }
diff --git a/css/menubar-wordpress.css b/css/menubar-wordpress.css
index 792b59e7df..b5f8181f76 100644
--- a/css/menubar-wordpress.css
+++ b/css/menubar-wordpress.css
@@ -23,13 +23,13 @@
   }
 
   body.crm-menubar-below-cms-menu.crm-menubar-visible #wpbody {
-    padding-top: 40px;
+    padding-top: $menubarHeight;
   }
   body.crm-menubar-below-cms-menu.crm-menubar-visible.crm-menubar-wrapped #wpbody {
-    padding-top: 80px;
+    padding-top: calc($menubarHeight * 2);
   }
   body.crm-menubar-over-cms-menu.crm-menubar-visible.crm-menubar-wrapped #adminmenuwrap {
-    margin-top: 40px;
+    margin-top: $menubarHeight;
   }
 
 }
-- 
2.25.1