From 01da81870818c364a67d9ba97ca84aec9afbcc4d Mon Sep 17 00:00:00 2001
From: Yoshie Muranaka <yoshiemuranaka@gmail.com>
Date: Wed, 8 Jul 2020 15:46:43 -0700
Subject: Update use of Sass variables for better theming

Use Bootstrap color functions for theme-colors and grays instead
of directly referencing Sass variable to allow more flexible
theming.

Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com>
Change-Id: Id08b77ff6df3bdf99400dcdfe964853706f1070f
---
 src/components/AppHeader/AppHeader.vue | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

(limited to 'src/components/AppHeader/AppHeader.vue')

diff --git a/src/components/AppHeader/AppHeader.vue b/src/components/AppHeader/AppHeader.vue
index a69d6d9fe..7f18e1d28 100644
--- a/src/components/AppHeader/AppHeader.vue
+++ b/src/components/AppHeader/AppHeader.vue
@@ -179,7 +179,7 @@ export default {
   }
 
   .nav-item {
-    fill: $light;
+    fill: theme-color('light');
   }
 
   .navbar {
@@ -194,7 +194,7 @@ export default {
 
     .helper-menu {
       @include media-breakpoint-down(sm) {
-        background-color: $gray-800;
+        background-color: gray('800');
         width: 100%;
         justify-content: flex-end;
 
@@ -217,7 +217,7 @@ export default {
   }
 
   .nav-trigger {
-    fill: $light;
+    fill: theme-color('light');
     width: $header-height;
     height: $header-height;
     transition: none;
@@ -227,12 +227,12 @@ export default {
     }
 
     &:hover {
-      fill: $light;
-      background-color: $dark;
+      fill: theme-color('light');
+      background-color: theme-color('dark');
     }
 
     &.open {
-      background-color: $gray-800;
+      background-color: gray('800');
     }
 
     @include media-breakpoint-up($responsive-layout-bp) {
-- 
cgit v1.2.3

