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/assets/styles/_helpers.scss b/src/assets/styles/_helpers.scss
new file mode 100644
index 0000000..f01c00b
--- /dev/null
+++ b/src/assets/styles/_helpers.scss
@@ -0,0 +1,3 @@
+// Import required for all single file components that use Sass variables
+@import "./bmc/helpers";
+@import "./vendor/bootstrap/helpers";
diff --git a/src/assets/styles/_obmc-custom.scss b/src/assets/styles/_obmc-custom.scss
index 7e43e62..f443799 100644
--- a/src/assets/styles/_obmc-custom.scss
+++ b/src/assets/styles/_obmc-custom.scss
@@ -1,51 +1,20 @@
-@import "./variables";
-@import "~bootstrap/scss/functions";
-@import "~bootstrap/scss/variables";
-@import "~bootstrap/scss/mixins";
-@import "./motion";
+// BMC Helpers must be imported before Boostrap helpers to
+// take advantage of Bootstrap's use of the Sass !default
+// statement. Moving this helper after results in Boostrap
+// variables taking precedence over BMC's
+@import "./bmc/helpers";
+@import "./vendor/bootstrap/helpers";
-@import "~bootstrap/scss/root";
-@import "~bootstrap/scss/reboot";
-@import "~bootstrap/scss/alert";
-@import "~bootstrap/scss/badge";
-@import "~bootstrap/scss/breadcrumb";
-@import "~bootstrap/scss/button-group";
-@import "~bootstrap/scss/buttons";
-@import "~bootstrap/scss/card";
-@import "~bootstrap/scss/close";
-@import "~bootstrap/scss/code";
-@import "~bootstrap/scss/custom-forms";
-@import "~bootstrap/scss/dropdown";
-@import "~bootstrap/scss/forms";
-@import "~bootstrap/scss/grid";
-@import "~bootstrap/scss/images";
-@import "~bootstrap/scss/input-group";
-@import "~bootstrap/scss/list-group";
-@import "~bootstrap/scss/media";
-@import "~bootstrap/scss/modal";
-@import "~bootstrap/scss/nav";
-@import "~bootstrap/scss/navbar";
-@import "~bootstrap/scss/pagination";
-@import "~bootstrap/scss/popover";
-@import "~bootstrap/scss/progress";
-@import "~bootstrap/scss/spinners";
-@import "~bootstrap/scss/tables";
-@import "~bootstrap/scss/toasts";
-@import "~bootstrap/scss/tooltip";
-@import "~bootstrap/scss/transitions";
-@import "~bootstrap/scss/type";
-@import "~bootstrap/scss/utilities";
-@import "~bootstrap/scss/print";
+// BMC Base files must folow Bootstrap base files
+// to assure BMC base styles override Boostrap base files
+@import "./vendor/bootstrap/base";
+@import "./bmc/base";
-@import "~bootstrap-vue/src/index.scss";
+// Conmponents and Utilities from the third-party
+// libraries follow base files
+@import "./vendor/bootstrap/components";
+@import "./vendor/bootstrap/utils";
+@import "./vendor/bootstrap-vue/index";
-@import "./alerts";
-@import "./badge";
-@import "./bootstrap-grid";
-@import "./buttons";
-@import "./dropdown";
-@import "./form-components";
-@import "./modal";
-@import "./table";
-@import "./toast";
-@import "./typography";
\ No newline at end of file
+// Vendor overrides must be the last file imported
+@import "./vendor-overrides/bootstrap/index";
diff --git a/src/assets/styles/_typography.scss b/src/assets/styles/bmc/_base.scss
similarity index 100%
rename from src/assets/styles/_typography.scss
rename to src/assets/styles/bmc/_base.scss
diff --git a/src/assets/styles/bmc/_helpers.scss b/src/assets/styles/bmc/_helpers.scss
new file mode 100644
index 0000000..bec209b
--- /dev/null
+++ b/src/assets/styles/bmc/_helpers.scss
@@ -0,0 +1,3 @@
+@import "./helpers/colors";
+@import "./helpers/variables";
+@import "./helpers/motion";
\ No newline at end of file
diff --git a/src/assets/styles/_colors.scss b/src/assets/styles/bmc/helpers/_colors.scss
similarity index 100%
rename from src/assets/styles/_colors.scss
rename to src/assets/styles/bmc/helpers/_colors.scss
diff --git a/src/assets/styles/_motion.scss b/src/assets/styles/bmc/helpers/_motion.scss
similarity index 100%
rename from src/assets/styles/_motion.scss
rename to src/assets/styles/bmc/helpers/_motion.scss
diff --git a/src/assets/styles/_variables.scss b/src/assets/styles/bmc/helpers/_variables.scss
similarity index 100%
rename from src/assets/styles/_variables.scss
rename to src/assets/styles/bmc/helpers/_variables.scss
diff --git a/src/assets/styles/_alerts.scss b/src/assets/styles/vendor-overrides/bootstrap/_alert.scss
similarity index 100%
rename from src/assets/styles/_alerts.scss
rename to src/assets/styles/vendor-overrides/bootstrap/_alert.scss
diff --git a/src/assets/styles/_badge.scss b/src/assets/styles/vendor-overrides/bootstrap/_badge.scss
similarity index 100%
rename from src/assets/styles/_badge.scss
rename to src/assets/styles/vendor-overrides/bootstrap/_badge.scss
diff --git a/src/assets/styles/_bootstrap-grid.scss b/src/assets/styles/vendor-overrides/bootstrap/_bootstrap-grid.scss
similarity index 100%
rename from src/assets/styles/_bootstrap-grid.scss
rename to src/assets/styles/vendor-overrides/bootstrap/_bootstrap-grid.scss
diff --git a/src/assets/styles/_buttons.scss b/src/assets/styles/vendor-overrides/bootstrap/_buttons.scss
similarity index 100%
rename from src/assets/styles/_buttons.scss
rename to src/assets/styles/vendor-overrides/bootstrap/_buttons.scss
diff --git a/src/assets/styles/_dropdown.scss b/src/assets/styles/vendor-overrides/bootstrap/_dropdown.scss
similarity index 100%
rename from src/assets/styles/_dropdown.scss
rename to src/assets/styles/vendor-overrides/bootstrap/_dropdown.scss
diff --git a/src/assets/styles/_form-components.scss b/src/assets/styles/vendor-overrides/bootstrap/_forms.scss
similarity index 100%
rename from src/assets/styles/_form-components.scss
rename to src/assets/styles/vendor-overrides/bootstrap/_forms.scss
diff --git a/src/assets/styles/vendor-overrides/bootstrap/_index.scss b/src/assets/styles/vendor-overrides/bootstrap/_index.scss
new file mode 100644
index 0000000..d7634db
--- /dev/null
+++ b/src/assets/styles/vendor-overrides/bootstrap/_index.scss
@@ -0,0 +1,11 @@
+// OpenBMC Global Style Overrides of out of the box
+// Bootstrap styles
+@import "./alert";
+@import "./badge";
+@import "./bootstrap-grid";
+@import "./buttons";
+@import "./dropdown";
+@import "./forms";
+@import "./modal";
+@import "./tables";
+@import "./toasts";
\ No newline at end of file
diff --git a/src/assets/styles/_modal.scss b/src/assets/styles/vendor-overrides/bootstrap/_modal.scss
similarity index 100%
rename from src/assets/styles/_modal.scss
rename to src/assets/styles/vendor-overrides/bootstrap/_modal.scss
diff --git a/src/assets/styles/_table.scss b/src/assets/styles/vendor-overrides/bootstrap/_tables.scss
similarity index 100%
rename from src/assets/styles/_table.scss
rename to src/assets/styles/vendor-overrides/bootstrap/_tables.scss
diff --git a/src/assets/styles/_toast.scss b/src/assets/styles/vendor-overrides/bootstrap/_toasts.scss
similarity index 100%
rename from src/assets/styles/_toast.scss
rename to src/assets/styles/vendor-overrides/bootstrap/_toasts.scss
diff --git a/src/assets/styles/vendor/bootstrap-vue/_index.scss b/src/assets/styles/vendor/bootstrap-vue/_index.scss
new file mode 100644
index 0000000..c10e1f0
--- /dev/null
+++ b/src/assets/styles/vendor/bootstrap-vue/_index.scss
@@ -0,0 +1 @@
+@import "~bootstrap-vue/src/index";
diff --git a/src/assets/styles/vendor/bootstrap/_base.scss b/src/assets/styles/vendor/bootstrap/_base.scss
new file mode 100644
index 0000000..1af0344
--- /dev/null
+++ b/src/assets/styles/vendor/bootstrap/_base.scss
@@ -0,0 +1,4 @@
+@import "~bootstrap/scss/root";
+@import "~bootstrap/scss/reboot";
+@import "~bootstrap/scss/transitions";
+@import "~bootstrap/scss/type";
\ No newline at end of file
diff --git a/src/assets/styles/vendor/bootstrap/_components.scss b/src/assets/styles/vendor/bootstrap/_components.scss
new file mode 100644
index 0000000..8341cdc
--- /dev/null
+++ b/src/assets/styles/vendor/bootstrap/_components.scss
@@ -0,0 +1,26 @@
+@import "~bootstrap/scss/alert";
+@import "~bootstrap/scss/badge";
+@import "~bootstrap/scss/breadcrumb";
+@import "~bootstrap/scss/button-group";
+@import "~bootstrap/scss/buttons";
+@import "~bootstrap/scss/card";
+@import "~bootstrap/scss/close";
+@import "~bootstrap/scss/code";
+@import "~bootstrap/scss/custom-forms";
+@import "~bootstrap/scss/dropdown";
+@import "~bootstrap/scss/forms";
+@import "~bootstrap/scss/grid";
+@import "~bootstrap/scss/images";
+@import "~bootstrap/scss/input-group";
+@import "~bootstrap/scss/list-group";
+@import "~bootstrap/scss/media";
+@import "~bootstrap/scss/modal";
+@import "~bootstrap/scss/nav";
+@import "~bootstrap/scss/navbar";
+@import "~bootstrap/scss/pagination";
+@import "~bootstrap/scss/popover";
+@import "~bootstrap/scss/progress";
+@import "~bootstrap/scss/spinners";
+@import "~bootstrap/scss/tables";
+@import "~bootstrap/scss/toasts";
+@import "~bootstrap/scss/tooltip";
\ No newline at end of file
diff --git a/src/assets/styles/vendor/bootstrap/_helpers.scss b/src/assets/styles/vendor/bootstrap/_helpers.scss
new file mode 100644
index 0000000..1055578
--- /dev/null
+++ b/src/assets/styles/vendor/bootstrap/_helpers.scss
@@ -0,0 +1,3 @@
+@import "~bootstrap/scss/functions";
+@import "~bootstrap/scss/variables";
+@import "~bootstrap/scss/mixins";
\ No newline at end of file
diff --git a/src/assets/styles/vendor/bootstrap/_utils.scss b/src/assets/styles/vendor/bootstrap/_utils.scss
new file mode 100644
index 0000000..f0b5c44
--- /dev/null
+++ b/src/assets/styles/vendor/bootstrap/_utils.scss
@@ -0,0 +1,2 @@
+@import "~bootstrap/scss/utilities";
+@import "~bootstrap/scss/print";
\ No newline at end of file
diff --git a/src/components/AppHeader/AppHeader.vue b/src/components/AppHeader/AppHeader.vue
index d937293..2ad208f 100644
--- a/src/components/AppHeader/AppHeader.vue
+++ b/src/components/AppHeader/AppHeader.vue
@@ -141,6 +141,8 @@
</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 2f56c28..7a8389f 100644
--- a/src/components/AppNavigation/AppNavigation.vue
+++ b/src/components/AppNavigation/AppNavigation.vue
@@ -142,6 +142,8 @@
</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 8396bd5..91bf346 100644
--- a/src/components/Global/PageContainer.vue
+++ b/src/components/Global/PageContainer.vue
@@ -11,6 +11,8 @@
</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 dcd85e6..5811998 100644
--- a/src/components/Global/PageSection.vue
+++ b/src/components/Global/PageSection.vue
@@ -18,6 +18,8 @@
</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 17c0884..c4a9775 100644
--- a/src/components/Global/PageTitle.vue
+++ b/src/components/Global/PageTitle.vue
@@ -23,6 +23,8 @@
</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 1114321..655d57b 100644
--- a/src/components/Global/StatusIcon.vue
+++ b/src/components/Global/StatusIcon.vue
@@ -30,6 +30,8 @@
</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 d466d4e..8d264fb 100644
--- a/src/components/Global/TableFilter.vue
+++ b/src/components/Global/TableFilter.vue
@@ -84,6 +84,8 @@
</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 331f007..b49b315 100644
--- a/src/components/Global/TableToolbar.vue
+++ b/src/components/Global/TableToolbar.vue
@@ -67,6 +67,8 @@
</script>
<style lang="scss" scoped>
+@import 'src/assets/styles/helpers';
+
$toolbar-height: 46px;
.toolbar-container {
diff --git a/src/layouts/AppLayout.vue b/src/layouts/AppLayout.vue
index 8edc338..6950e33 100644
--- a/src/layouts/AppLayout.vue
+++ b/src/layouts/AppLayout.vue
@@ -54,6 +54,8 @@
</script>
<style lang="scss" scoped>
+@import 'src/assets/styles/helpers';
+
.app-container {
display: grid;
grid-template-columns: 100%;
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;
diff --git a/vue.config.js b/vue.config.js
index 882944f..c681f47 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -1,15 +1,6 @@
const CompressionPlugin = require('compression-webpack-plugin');
module.exports = {
- css: {
- loaderOptions: {
- scss: {
- prependData: `
- @import "@/assets/styles/_obmc-custom.scss";
- `
- }
- }
- },
devServer: {
https: true,
proxy: {