Use variable for menubar height

[civicrm-core.git] / css / crm-menubar.css

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 {