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/Global/PageSection.vue  | 2 +-
 src/components/Global/Search.vue       | 2 +-
 src/components/Global/TableToolbar.vue | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

(limited to 'src/components/Global')

diff --git a/src/components/Global/PageSection.vue b/src/components/Global/PageSection.vue
index 58119986..6f44a3a3 100644
--- a/src/components/Global/PageSection.vue
+++ b/src/components/Global/PageSection.vue
@@ -31,7 +31,7 @@ h2 {
     content: '';
     display: block;
     width: 100px;
-    border: 1px solid $gray-300;
+    border: 1px solid gray('300');
     margin-top: 10px;
   }
 }
diff --git a/src/components/Global/Search.vue b/src/components/Global/Search.vue
index b4be4637..c385740b 100644
--- a/src/components/Global/Search.vue
+++ b/src/components/Global/Search.vue
@@ -59,6 +59,6 @@ export default {
   left: 10px;
   top: 12px;
   z-index: 4;
-  stroke: $gray-400;
+  stroke: gray('400');
 }
 </style>
diff --git a/src/components/Global/TableToolbar.vue b/src/components/Global/TableToolbar.vue
index 05b96699..2fbbd6cd 100644
--- a/src/components/Global/TableToolbar.vue
+++ b/src/components/Global/TableToolbar.vue
@@ -79,7 +79,7 @@ $toolbar-height: 46px;
 
 .toolbar-content {
   height: $toolbar-height;
-  background-color: $primary;
+  background-color: theme-color('primary');
   color: $white;
   position: absolute;
   left: 0;
-- 
cgit v1.2.3