Use variable for menubar height

diff --git a/CRM/Core/Resources.php b/CRM/Core/Resources.php
index 3c88fedb387f36e91bdcc24fcd8b77f4cfb5bc43..eb34b4de58cae24d5bfc85b0ecce9adf090974a7 100644 (file)
--- 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 89b486963e872b54b53d406649d14ae1d1dad6ea..14f27c465db6c4d7af21992027947ef64748cc04 100644 (file)
--- 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 b238c51f40e1a51cc0628aa0be3eee90b93cdaa0..b291d4494203f87aa8d72abf15130c6f5e886e9d 100644 (file)
--- 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 8317feb0220533e7d15fd924855786d17e251cb5..e8e7ca1d2636a44d795bacc24c42d92f016e65c5 100644 (file)
--- 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 868a7864dad005731fadb6116131b286f7bf90c3..0697ea9aca5f801634bf574e89a8151f334a67b1 100644 (file)
--- 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 482f8c2ac643b9f7324a2add0e65bfded763d848..57ae08c6b9ce885f1b4da06dd0c2ddd6a72b4eea 100644 (file)
--- 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 792b59e7dfbee94b5ffa55597ba8ba4945e6d0e2..b5f8181f76f740057300a9015d3dec03ad77dbb7 100644 (file)
--- 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;
   }
 
 }