topbar feature - set a diffrent background color of all submenus

New option to set a different background-color for the submenus of a menu in the topbar.
For example if the topbar-background is transparent.
new var $topbar-background-submenu

diff --git a/scss/components/_top-bar.scss b/scss/components/_top-bar.scss
index afdb55dc970d03827e03e79b55f5bf8c12639e80..4f2c6c65026301ceb2d6f1cbf9d8683c0a46ef16 100644 (file)
--- a/scss/components/_top-bar.scss
+++ b/scss/components/_top-bar.scss
@@ -14,6 +14,10 @@ $topbar-padding: 0.5rem !default;
 /// @type Color
 $topbar-background: $light-gray !default;
 
+/// Background color submenus within the top bar. Usefull if $topbar-background is transparent.
+/// @type Color
+$topbar-submenu-background: $topbar-background !default;
+
 /// Spacing for the top bar title.
 /// @type Number
 $topbar-title-spacing: 1rem !default;
@@ -41,6 +45,13 @@ $topbar-input-width: 200px !default;
     background-color: $topbar-background;
   }
 
+  // check if $topbar-background is differnt from $topbar-background-submenu
+  @if ($topbar-background != $topbar-submenu-background) {
+    ul ul {
+      background-color: $topbar-submenu-background;
+    }
+  }
+
   input {
     width: $topbar-input-width;
     margin-#{$global-right}: 1rem;

diff --git a/scss/settings/_settings.scss b/scss/settings/_settings.scss
index 4c246b66235110d23bd685ef6940ff9e855b9c7b..90f90a48df695d0569c46bf0a748f9cb8b38caeb 100644 (file)
--- a/scss/settings/_settings.scss
+++ b/scss/settings/_settings.scss
@@ -544,6 +544,7 @@ $tooltip-radius: $global-radius;
 
 $topbar-padding: 0.5rem;
 $topbar-background: $light-gray;
+$topbar-submenu-background: $topbar-background;
 $topbar-title-spacing: 1rem;
 $topbar-input-width: 200px;