Merge pull request #14552 from eileenmcnaughton/tear

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

diff --git a/css/crm-menubar.css b/css/crm-menubar.css
index aa53639ccc1e17d94351141a9f8a34e4deb1b28a..c1a0e5413f5d97c4f7c0d4880a3dfb29941ffecf 100644 (file)
--- a/css/crm-menubar.css
+++ b/css/crm-menubar.css
@@ -131,9 +131,10 @@ 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;
 }
 a.highlighted #crm-qsearch-input,
 #crm-qsearch-input:focus,
@@ -142,16 +143,16 @@ a.highlighted #crm-qsearch-input,
   width: 130px;
 }
 input#crm-qsearch-input:-ms-input-placeholder {
-  font-family: 'FontAwesome';
+  font-family: 'FontAwesome', sans-serif;
 }
 input#crm-qsearch-input::-webkit-input-placeholder {
-  font-family: 'FontAwesome';
+  font-family: 'FontAwesome', sans-serif;
 }
 input#crm-qsearch-input::-moz-placeholder {
-  font-family: 'FontAwesome';
+  font-family: 'FontAwesome', sans-serif;
 }
 input#crm-qsearch-input::placeholder {
-  font-family: 'FontAwesome';
+  font-family: 'FontAwesome', sans-serif;
 }
 
 ul.crm-quickSearch-results {
@@ -182,7 +183,7 @@ body.crm-menubar-over-cms-menu #crm-menubar-toggle-position a i {
   transform: rotate(180deg);
 }
 
-@media (min-width: 768px) {
+@media (min-width: $breakMin) {
 
   /* Switch to desktop layout
   -----------------------------------------------
@@ -218,12 +219,25 @@ body.crm-menubar-over-cms-menu #crm-menubar-toggle-position a i {
   }
 
   #civicrm-menu li a {
-    background-color: $semiTransparentMenuColor;
+    background-color: $menuItemColor;
     color: $textColor;
   }
 
   #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:not(#crm-qsearch) > a:after {
+    content: '';
+    display: inline-block;
+    height: 100%;
+    vertical-align: middle;
   }
 
   #civicrm-menu > li > a.highlighted {
@@ -240,12 +254,16 @@ body.crm-menubar-over-cms-menu #crm-menubar-toggle-position a i {
     z-index: 99999;
   }
 
+  body.crm-menubar-above-crm-container #civicrm-menu {
+    z-index: 100;
+  }
+
   body.crm-menubar-hidden #civicrm-menu {
     display: none;
   }
 }
 
-@media (max-width: 768px) {
+@media (max-width: $breakMax) {
   /* hide the menu in mobile view */
   #crm-menubar-state:not(:checked) ~ #civicrm-menu {
     display: none;