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
diff --git a/src/views/Control/ServerPowerOperations/BootSettings.vue b/src/views/Control/ServerPowerOperations/BootSettings.vue
index c912749..0558a1b 100644
--- a/src/views/Control/ServerPowerOperations/BootSettings.vue
+++ b/src/views/Control/ServerPowerOperations/BootSettings.vue
@@ -142,7 +142,9 @@
</script>
<style lang="scss" scoped>
+@import 'src/assets/styles/helpers';
+
.boot-settings {
- background-color: $gray-200;
+ background-color: gray('200');
}
</style>
diff --git a/src/views/Login/Login.vue b/src/views/Login/Login.vue
index c15e5f5..d373be2 100644
--- a/src/views/Login/Login.vue
+++ b/src/views/Login/Login.vue
@@ -145,6 +145,8 @@
</script>
<style lang="scss" scoped>
+@import 'src/assets/styles/helpers';
+
.login-container {
@include media-breakpoint-up(md) {
background: linear-gradient(to right, $light 50%, $container-bgd 50%);
diff --git a/src/views/Overview/Overview.vue b/src/views/Overview/Overview.vue
index bf8e213..9ddf49d 100644
--- a/src/views/Overview/Overview.vue
+++ b/src/views/Overview/Overview.vue
@@ -126,6 +126,7 @@
</script>
<style lang="scss" scoped>
+@import 'src/assets/styles/helpers';
.quicklinks-section {
margin-bottom: $spacer * 2;
margin-left: $spacer * -1;
diff --git a/src/views/Overview/OverviewQuickLinks.vue b/src/views/Overview/OverviewQuickLinks.vue
index 3a0b9cf..da56b5d 100644
--- a/src/views/Overview/OverviewQuickLinks.vue
+++ b/src/views/Overview/OverviewQuickLinks.vue
@@ -80,6 +80,8 @@
</script>
<style lang="scss" scoped>
+@import 'src/assets/styles/helpers';
+
dd,
dl {
margin: 0;