From 4373b3dd0b25b7e3af1b0b268f3b55a1d650e398 Mon Sep 17 00:00:00 2001
From: Coleman Watts <coleman@civicrm.org>
Date: Thu, 25 Apr 2019 22:48:14 -0400
Subject: [PATCH] Add css variable for menubar breakpoint

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

diff --git a/CRM/Core/Resources.php b/CRM/Core/Resources.php
index eb34b4de58..92c86e6bed 100644
--- a/CRM/Core/Resources.php
+++ b/CRM/Core/Resources.php
@@ -853,6 +853,8 @@ class CRM_Core_Resources {
     $vars = [
       'resourceBase' => rtrim($config->resourceBase, '/'),
       'menubarHeight' => '40px',
+      'breakMin' => '768px',
+      'breakMax' => '767px',
       '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 14f27c465d..1754568a41 100644
--- a/css/crm-menubar.css
+++ b/css/crm-menubar.css
@@ -183,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
   -----------------------------------------------
@@ -263,7 +263,7 @@ body.crm-menubar-over-cms-menu #crm-menubar-toggle-position a i {
   }
 }
 
-@media (max-width: 768px) {
+@media (max-width: $breakMax) {
   /* hide the menu in mobile view */
   #crm-menubar-state:not(:checked) ~ #civicrm-menu {
     display: none;
diff --git a/css/menubar-backdrop.css b/css/menubar-backdrop.css
index b291d44942..ef980b240b 100644
--- a/css/menubar-backdrop.css
+++ b/css/menubar-backdrop.css
@@ -1,4 +1,4 @@
-@media (min-width: 768px) {
+@media (min-width: $breakMin) {
 
   body.crm-menubar-visible.crm-menubar-over-cms-menu {
     border-top: 0 none !important;
@@ -28,7 +28,7 @@
   }
 
 }
-@media (max-width: 768px) {
+@media (max-width: $breakMax) {
 
   body.backdrop-admin-bar-position-absolute #civicrm-menu-nav {
     position: absolute;
diff --git a/css/menubar-drupal7.css b/css/menubar-drupal7.css
index e8e7ca1d26..f5c663160b 100644
--- a/css/menubar-drupal7.css
+++ b/css/menubar-drupal7.css
@@ -1,4 +1,4 @@
-@media (min-width: 768px) {
+@media (min-width: $breakMin) {
 
   body.crm-menubar-visible.crm-menubar-over-cms-menu #toolbar {
     display: none;
@@ -67,7 +67,7 @@
 }
 
 /* For adminimal_admin_menu */
-@media (min-width: 768px) and (max-width: 1024px) {
+@media (min-width: $breakMin) and (max-width: 1024px) {
 
   body.crm-menubar-visible.crm-menubar-over-cms-menu.admin-menu.adminimal-menu > .slicknav_menu {
     display: none;
@@ -80,7 +80,7 @@
   }
 }
 
-@media (max-width: 768px) {
+@media (max-width: $breakMax) {
 
   body.toolbar.crm-menubar-visible #toolbar-home {
     visibility: hidden;
diff --git a/css/menubar-drupal8.css b/css/menubar-drupal8.css
index 0697ea9aca..c143dc967f 100644
--- a/css/menubar-drupal8.css
+++ b/css/menubar-drupal8.css
@@ -24,7 +24,7 @@ nav#civicrm-menu-nav .crm-menubar-toggle-btn-icon {
   left: 44px;
 }
 
-@media (min-width: 768px) {
+@media (min-width: $breakMin) {
 
   body.crm-menubar-visible.crm-menubar-over-cms-menu #toolbar-administration {
     display: none;
diff --git a/css/menubar-joomla.css b/css/menubar-joomla.css
index 57ae08c6b9..48422b5e38 100644
--- a/css/menubar-joomla.css
+++ b/css/menubar-joomla.css
@@ -1,4 +1,4 @@
-@media (min-width: 768px) {
+@media (min-width: $breakMin) {
 
   body.crm-menubar-over-cms-menu.crm-menubar-visible {
     padding-top: $menubarHeight;
@@ -15,7 +15,7 @@
   }
 
 }
-@media (max-width: 768px) {
+@media (max-width: $breakMax) {
 
   body #civicrm-menu-nav {
     position: absolute;
diff --git a/css/menubar-wordpress.css b/css/menubar-wordpress.css
index b5f8181f76..e87fc6e527 100644
--- a/css/menubar-wordpress.css
+++ b/css/menubar-wordpress.css
@@ -1,4 +1,4 @@
-@media (min-width: 768px) {
+@media (min-width: $breakMin) {
 
   body.crm-menubar-over-cms-menu.crm-menubar-visible #wpbody {
     padding-top: 8px;
@@ -33,7 +33,7 @@
   }
 
 }
-@media (min-width: 768px) and (max-width: 960px) {
+@media (min-width: $breakMin) and (max-width: 960px) {
 
   /* For the auto-fold toolbar */
   .wp-toolbar body.crm-menubar-below-cms-menu.auto-fold > #civicrm-menu-nav #civicrm-menu {
@@ -42,7 +42,7 @@
   }
 
 }
-@media (max-width: 768px) {
+@media (max-width: $breakMax) {
 
   body #civicrm-menu-nav .crm-menubar-toggle-btn {
     position: absolute;
-- 
2.25.1