From 56b63d60b7428a55eb1a7d364c1f79464354836b Mon Sep 17 00:00:00 2001
From: Andreas Nedbal <andy@pixelde.su>
Date: Mon, 27 Apr 2020 18:39:01 +0200
Subject: [PATCH] Add "navbar-themed" class to use CSS variables in navigation

---
 app/assets/stylesheets/_variables.scss        | 27 +++++++++-
 app/assets/stylesheets/overrides/_navbar.scss | 50 +++++++++++++++++++
 app/views/navigation/_main.haml               |  2 +-
 3 files changed, 77 insertions(+), 2 deletions(-)
 create mode 100644 app/assets/stylesheets/overrides/_navbar.scss

diff --git a/app/assets/stylesheets/_variables.scss b/app/assets/stylesheets/_variables.scss
index 91f8ace7..cd0ef8a5 100644
--- a/app/assets/stylesheets/_variables.scss
+++ b/app/assets/stylesheets/_variables.scss
@@ -7,7 +7,32 @@ $card-border-width: 0;
 // List Groups
 $list-group-border-width: 0;
 
+// nProgress
+$nprogress-color: lighten($navbar-inverse-bg, 25%);
+
 :root {
   --background: #f0edf4;
-  --primary-text: #ffffff;
+  --card-bg: #ffffff;
+  --card-cap-bg: #f7f7f7;
+
+  /**
+   NOTE for all *-text variables
+   ----------------------------------------------
+   The text-variables are present as triplets
+   because in some places it's required to adjust
+   their transparency.
+
+   So, for general usage, use:
+   color: RGB(var(--*-text));
+
+   And for transparent usage, use:
+   color: rgba(var(--*-text), .7); 
+
+   The uppercase RGB is required because internally
+   SassC wants more than one argument for rgb(),
+   hence writing RGB() bypasses that check, but
+   browsers interpret it correctly.
+   */
+
+  --primary-text: 255, 255, 255;
 }
\ No newline at end of file
diff --git a/app/assets/stylesheets/overrides/_navbar.scss b/app/assets/stylesheets/overrides/_navbar.scss
new file mode 100644
index 00000000..f5959ff0
--- /dev/null
+++ b/app/assets/stylesheets/overrides/_navbar.scss
@@ -0,0 +1,50 @@
+.navbar-themed {
+  .navbar-brand {
+    color: RGB(var(--primary-text));
+
+    &:hover,
+    &:focus {
+      color: RGB(var(--primary-text));
+    }
+  }
+
+  .navbar-nav {
+    .nav-link {
+      color: rgba(var(--primary-text), .5);
+
+      &:hover,
+      &:focus {
+        color: rgba(var(--primary-text), .75);
+      }
+
+      &.disabled {
+        color: rgba(var(--primary-text), .25);
+      }
+    }
+
+    .show > .nav-link,
+    .active > .nav-link,
+    .nav-link.show,
+    .nav-link.active {
+      color: RGB(var(--primary-text));
+    }
+  }
+
+  .navbar-toggler {
+    color: RGB(var(--primary-text));
+    border-color: RGB(var(--primary-text));
+  }
+
+  .navbar-toggler-icon {
+    background-image: escape-svg($navbar-dark-toggler-icon-bg);
+  }
+
+  .navbar-text {
+    color: RGB(var(--primary-text));
+    a,
+    a:hover,
+    a:focus {
+      color: RGB(var(--primary-text));
+    }
+  }
+}
\ No newline at end of file
diff --git a/app/views/navigation/_main.haml b/app/views/navigation/_main.haml
index a24f0fd9..8e0aea46 100644
--- a/app/views/navigation/_main.haml
+++ b/app/views/navigation/_main.haml
@@ -1,4 +1,4 @@
-%nav.navbar.navbar-dark.navbar-expand-lg.bg-primary.fixed-top{role: "navigation"}
+%nav.navbar.navbar-themed.navbar-expand-lg.bg-primary.fixed-top{role: "navigation"}
   .container{class: ios_web_app? ? "ios-web-app" : ''}
     %a.navbar-brand{href: "/"}= APP_CONFIG['site_name']
     %button.navbar-toggler{"data-target" => "#j2-main-navbar-collapse", "data-toggle" => "collapse", type: "button"}