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