Update Sass architecture to require helper imports

- Restructuring file strucure to support single file components use of
Sass variables when imported into vuepress.
- Creating a scalable file structure using Sass best practices

Tested by building and testing both the vue web ui and the
the documentation application.

Signed-off-by: Derick Montague <derick.montague@ibm.com>
Change-Id: Iddcefbf305c8dac978ee24e903df33b609e395e3

8 files changed, 16 insertions, 0 deletions

diff --git a/src/components/AppHeader/AppHeader.vue b/src/components/AppHeader/AppHeader.vue
index d937293d..2ad208fc 100644
--- a/src/components/AppHeader/AppHeader.vue
+++ b/src/components/AppHeader/AppHeader.vue
@@ -141,6 +141,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import 'src/assets/styles/helpers';
+
 .link-skip-nav {
   position: absolute;
   top: -60px;
diff --git a/src/components/AppNavigation/AppNavigation.vue b/src/components/AppNavigation/AppNavigation.vue
index 2f56c28f..7a8389fb 100644
--- a/src/components/AppNavigation/AppNavigation.vue
+++ b/src/components/AppNavigation/AppNavigation.vue
@@ -142,6 +142,8 @@ export default {
 </script>
 
 <style scoped lang="scss">
+@import 'src/assets/styles/helpers';
+
 svg {
   fill: currentColor;
   height: 1.2rem;
diff --git a/src/components/Global/PageContainer.vue b/src/components/Global/PageContainer.vue
index 8396bd5b..91bf346f 100644
--- a/src/components/Global/PageContainer.vue
+++ b/src/components/Global/PageContainer.vue
@@ -11,6 +11,8 @@ 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 dcd85e61..58119986 100644
--- a/src/components/Global/PageSection.vue
+++ b/src/components/Global/PageSection.vue
@@ -18,6 +18,8 @@ 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 17c08849..c4a97754 100644
--- a/src/components/Global/PageTitle.vue
+++ b/src/components/Global/PageTitle.vue
@@ -23,6 +23,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import 'src/assets/styles/helpers';
+
 .page-title {
   margin-bottom: $spacer * 2;
 }
diff --git a/src/components/Global/StatusIcon.vue b/src/components/Global/StatusIcon.vue
index 11143212..655d57b0 100644
--- a/src/components/Global/StatusIcon.vue
+++ b/src/components/Global/StatusIcon.vue
@@ -30,6 +30,8 @@ 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/TableFilter.vue b/src/components/Global/TableFilter.vue
index d466d4e0..8d264fb4 100644
--- a/src/components/Global/TableFilter.vue
+++ b/src/components/Global/TableFilter.vue
@@ -84,6 +84,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import 'src/assets/styles/helpers';
+
 p {
   font-size: 1.2rem;
 }
diff --git a/src/components/Global/TableToolbar.vue b/src/components/Global/TableToolbar.vue
index 331f0076..b49b3154 100644
--- a/src/components/Global/TableToolbar.vue
+++ b/src/components/Global/TableToolbar.vue
@@ -67,6 +67,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import 'src/assets/styles/helpers';
+
 $toolbar-height: 46px;
 
 .toolbar-container {