From 75fd269493500f039e520286a5b3968568ae0373 Mon Sep 17 00:00:00 2001
From: Wieland Lindenthal <w.lindenthal@forkmerge.com>
Date: Mon, 6 Feb 2017 16:08:41 +0100
Subject: [PATCH] Remove mixin `toggle-menu-item-background`
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

As we want to use CSS variables we can’t use SASS mixins for setting
colors.
---
 app/assets/stylesheets/layout/_main_menu.sass | 75 ++++++++++++-------
 app/views/custom_styles/_inline_css.erb       | 11 +++
 2 files changed, 61 insertions(+), 25 deletions(-)

diff --git a/app/assets/stylesheets/layout/_main_menu.sass b/app/assets/stylesheets/layout/_main_menu.sass
index eacf61d2da..86c5dfb02e 100644
--- a/app/assets/stylesheets/layout/_main_menu.sass
+++ b/app/assets/stylesheets/layout/_main_menu.sass
@@ -29,29 +29,8 @@
 $toggler-width: 40px
 
 @mixin highlight-left-item-border
-  border-left: $main-menu-selected-hover-indicator-width solid $main-menu-selected-hover-indicator-color
-
-@mixin toggle-menu-item-background($bg-color: $main-menu-bg-hover-selected-background, $color: $main-menu-selected-font-color)
-  @include default-transition
-
-  &:hover
-    background: $bg-color
-
-    @if $main-menu-enable-toggle-highlighting != true
-      // simultaneously hover all menu item anchor tags
-      > a
-        color: $color
-
-  > a
-    @include default-transition
-    cursor: pointer
-    text-decoration: none
-
-    &.selected, &.selected + a
-      background: $bg-color
-
-    &:hover, &.selected, &.selected + a
-      color: $color
+  border-left: $main-menu-selected-hover-indicator-width solid      $main-menu-selected-hover-indicator-color
+  border-left: $main-menu-selected-hover-indicator-width solid var(--main-menu-selected-hover-indicator-color)
 
 #main-menu
   bottom: auto
@@ -81,7 +60,31 @@ $toggler-width: 40px
 
         .main-item-wrapper
           display: flex
-          +toggle-menu-item-background
+
+          @include default-transition
+
+          &:hover
+            background: $main-menu-bg-hover-selected-background
+            background: var(--main-menu-bg-hover-selected-background)
+
+            @if $main-menu-enable-toggle-highlighting != true
+              // simultaneously hover all menu item anchor tags
+              > a
+                color: $main-menu-selected-font-color
+
+          > a
+            @include default-transition
+            cursor: pointer
+            text-decoration: none
+
+            &.selected, &.selected + a
+              background:      $main-menu-bg-hover-selected-background
+              background: var(--main-menu-bg-hover-selected-background)
+
+            &:hover, &.selected, &.selected + a
+              color: $main-menu-selected-font-color
+
+
 
           // left item border hover / selected effect
           &:hover
@@ -147,7 +150,29 @@ $toggler-width: 40px
       &.unattached
         border-top: 1px solid #ddd
       li
-        +toggle-menu-item-background($main-menu-child-bg-hover-selected-color, $main-menu-child-selected-font-color)
+        @include default-transition
+
+        &:hover
+          background:      $main-menu-child-bg-hover-selected-color
+          background: var(--main-menu-child-bg-hover-selected-color)
+
+          @if $main-menu-enable-toggle-highlighting != true
+            // simultaneously hover all menu item anchor tags
+            > a
+              color: $main-menu-child-selected-font-color
+
+        > a
+          @include default-transition
+          cursor: pointer
+          text-decoration: none
+
+          &.selected, &.selected + a
+            background:      $main-menu-child-bg-hover-selected-color
+            background: var(--main-menu-child-bg-hover-selected-color)
+
+
+          &:hover, &.selected, &.selected + a
+            color: $main-menu-child-selected-font-color
 
         a
           padding-left: 10px
diff --git a/app/views/custom_styles/_inline_css.erb b/app/views/custom_styles/_inline_css.erb
index aa093ee2fc..f9688c0239 100644
--- a/app/views/custom_styles/_inline_css.erb
+++ b/app/views/custom_styles/_inline_css.erb
@@ -44,6 +44,17 @@ See doc/COPYRIGHT.rdoc for more details.
   :root {
   <%  DesignColor.overwritten.each do |design_color| %>
     --<%= design_color.variable %>: <%= design_color.hexcode %>;
+    <% if design_color.variable == "primary-color" %>
+
+    <% end %>
+    <% if design_color.variable == "primary-color-dark" %>
+      --main-menu-child-bg-hover-selected-color:  <%= design_color.hexcode %>;
+      --main-menu-selected-hover-indicator-color: <%= design_color.hexcode %>;
+      --main-menu-bg-hover-selected-background: url() no-repeat <%= design_color.hexcode %>;
+    <% end %>
+    <% if design_color.variable == "alternative-color" %>
+
+    <% end %>
   <% end %>
   }