Add ability to customize theme styles

Showcases how different themes/styles can be supported using
.env variables. If an environemnt name is specified during
the build process, an overrides file will be pulled in to
allow modifications to color and font definitions.

This commit includes possible style modifications with the openpower
env name as an example. To see the openpower changes, add the variable
definition VUE_APP_NAME="openpower" to your .env.development.local file
or build using 'npm run build -- --mode openpower'

- Moves helper imports into vue config to allow for
  specific import order
- Removed helper imports in SFCs

Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com>
Change-Id: Iaf7a59c24fda06a7b74e23f2f042fb3300cb2056

9 files changed, 0 insertions, 18 deletions

diff --git a/src/components/Global/LoadingBar.vue b/src/components/Global/LoadingBar.vue
index d1736d6a..8f7b785c 100644
--- a/src/components/Global/LoadingBar.vue
+++ b/src/components/Global/LoadingBar.vue
@@ -72,8 +72,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import 'src/assets/styles/helpers';
-
 .progress {
   position: absolute;
   left: 0;
diff --git a/src/components/Global/PageContainer.vue b/src/components/Global/PageContainer.vue
index 91bf346f..8396bd5b 100644
--- a/src/components/Global/PageContainer.vue
+++ b/src/components/Global/PageContainer.vue
@@ -11,8 +11,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import 'src/assets/styles/helpers';
-
 main {
   width: 100%;
   height: 100%;
diff --git a/src/components/Global/PageSection.vue b/src/components/Global/PageSection.vue
index 96f7134e..ddf204d3 100644
--- a/src/components/Global/PageSection.vue
+++ b/src/components/Global/PageSection.vue
@@ -18,8 +18,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import 'src/assets/styles/helpers';
-
 .page-section {
   margin-bottom: $spacer * 2;
 }
diff --git a/src/components/Global/PageTitle.vue b/src/components/Global/PageTitle.vue
index dc0738e2..a77e0a07 100644
--- a/src/components/Global/PageTitle.vue
+++ b/src/components/Global/PageTitle.vue
@@ -23,8 +23,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import 'src/assets/styles/helpers';
-
 .page-title {
   margin-bottom: $spacer * 2;
 }
diff --git a/src/components/Global/Search.vue b/src/components/Global/Search.vue
index e3703559..9ebf4680 100644
--- a/src/components/Global/Search.vue
+++ b/src/components/Global/Search.vue
@@ -50,8 +50,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import 'src/assets/styles/helpers';
-
 .search-input {
   padding-left: ($spacer * 2);
 }
diff --git a/src/components/Global/StatusIcon.vue b/src/components/Global/StatusIcon.vue
index 56088050..6de6d310 100644
--- a/src/components/Global/StatusIcon.vue
+++ b/src/components/Global/StatusIcon.vue
@@ -31,8 +31,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import 'src/assets/styles/helpers';
-
 .status-icon {
   vertical-align: text-bottom;
   &.success {
diff --git a/src/components/Global/TableDateFilter.vue b/src/components/Global/TableDateFilter.vue
index e73d7d51..ab501ea3 100644
--- a/src/components/Global/TableDateFilter.vue
+++ b/src/components/Global/TableDateFilter.vue
@@ -165,8 +165,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import 'src/assets/styles/helpers';
-
 .b-form-datepicker {
   position: absolute;
   right: 0;
diff --git a/src/components/Global/TableFilter.vue b/src/components/Global/TableFilter.vue
index b514483f..d6a954be 100644
--- a/src/components/Global/TableFilter.vue
+++ b/src/components/Global/TableFilter.vue
@@ -131,8 +131,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import 'src/assets/styles/helpers';
-
 .badge {
   margin-right: $spacer / 2;
 }
diff --git a/src/components/Global/TableToolbar.vue b/src/components/Global/TableToolbar.vue
index bb18ceb5..70389e8f 100644
--- a/src/components/Global/TableToolbar.vue
+++ b/src/components/Global/TableToolbar.vue
@@ -68,8 +68,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import 'src/assets/styles/helpers';
-
 $toolbar-height: 46px;
 
 .toolbar-container {