Merge pull request #14122 from colemanw/menubarHeight

[REF] Use variable for menubar height

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),

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 {

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;

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;

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 {

css/menubar-joomla.css

 @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);
   }
 
 }

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;
   }
 
 }