From cc69b81ec16b7a17ef77394dfda9ef74e4d1ea1f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Javi=20Mart=C3=ADn?= <javim@elretirao.net>
Date: Thu, 6 May 2021 17:48:29 +0200
Subject: [PATCH] Simplify styles for the menu button

Using `currentcolor` and `color: inherit` is IMHO more expressive (we're
saying we want to use the same color as the text) and makes it easier to
customize these colors in other CONSUL installations. We also remove
duplication as we can use the same styles for both the admin and the
public layouts.
---
 app/assets/stylesheets/admin.scss  |  8 --------
 app/assets/stylesheets/layout.scss | 11 ++---------
 app/views/layouts/_header.html.erb |  2 +-
 3 files changed, 3 insertions(+), 18 deletions(-)

diff --git a/app/assets/stylesheets/admin.scss b/app/assets/stylesheets/admin.scss
index 65f44bbfb..8aede0497 100644
--- a/app/assets/stylesheets/admin.scss
+++ b/app/assets/stylesheets/admin.scss
@@ -159,14 +159,6 @@ $table-header:   #ecf1f6;
     right: 12px;
   }
 
-  .menu-icon {
-
-    &::after {
-      background: #000;
-      box-shadow: 0 7px 0 #000, 0 14px 0 #000;
-    }
-  }
-
   .notifications.unread-notifications::after {
     color: $admin-color;
   }
diff --git a/app/assets/stylesheets/layout.scss b/app/assets/stylesheets/layout.scss
index e4fd19f45..425c17d87 100644
--- a/app/assets/stylesheets/layout.scss
+++ b/app/assets/stylesheets/layout.scss
@@ -668,15 +668,8 @@ body > header,
 }
 
 .menu-icon {
-
-  &.dark {
-
-    &:hover::after,
-    &::after {
-      background: #fff;
-      box-shadow: 0 7px 0 #fff, 0 14px 0 #fff;
-    }
-  }
+  @include hamburger($color: currentcolor, $color-hover: currentcolor);
+  color: inherit;
 }
 
 .title-bar {
diff --git a/app/views/layouts/_header.html.erb b/app/views/layouts/_header.html.erb
index 346582e84..6aa11150b 100644
--- a/app/views/layouts/_header.html.erb
+++ b/app/views/layouts/_header.html.erb
@@ -16,7 +16,7 @@
     <div class="top-bar">
 
       <span data-responsive-toggle="responsive-menu" data-hide-for="medium" class="float-right">
-        <button type="button" class="menu-icon dark" data-toggle></button>
+        <button type="button" class="menu-icon" data-toggle></button>
         <%= t("application.menu") %>
       </span>