style: add Sass configuration for Vue 3

Configure sass in the vue.config.js file and remove the
import of the scss file from each page. The styles are
handled by the css loaderOptions in the config file.
Every component and page has the appropriate style applied.
The appearance adjusts to the openBmc webui in Vue 2.

Change-Id: I3773c063646185b80b7bd61d05aa80a993cbd121
Signed-off-by: Surya Venkatesan <[email protected]>

Author: suryav9724

src/App.vue

@@ -35,6 +35,5 @@ export default {
 </script>
 
 <style lang="scss">
-//@import '@/assets/styles/_obmc-custom';
-//@import './assets/styles/bootstrap/_helpers.scss';
+@import '@/assets/styles/_obmc-custom';
 </style>

src/assets/styles/bmc/custom/_buttons.scss

@@ -73,7 +73,7 @@
   position: absolute;
   right: 0;
   top: 0;
-  //z-index: $zindex-dropdown + 1;
+  z-index: $zindex-dropdown + 1;
 }
 
 // Contain input buttons within input

src/assets/styles/bmc/custom/_dropdown.scss

@@ -1,8 +1,6 @@
-@import 'bootstrap/dist/css/bootstrap.css';
-
 // Make calendar visible over the table
 .dropdown-menu {
-  //z-index: $zindex-dropdown + 1;
+  z-index: $zindex-dropdown + 1;
   padding: 0;
 }
 .dropdown-item {
@@ -30,4 +28,4 @@
       box-shadow: inset 0 0 0 2px theme-color("primary");
     }
   }
-}
+}

src/assets/styles/bmc/custom/_tables.scss

@@ -1,8 +1,6 @@
-@import 'bootstrap/dist/css/bootstrap.css'
-
 .table {
   position: relative;
-  //z-index: $zindex-dropdown;
+  z-index: $zindex-dropdown;
 
   td {
     border-top: 1px solid gray("300");

src/components/AppHeader/AppHeader.vue

@@ -249,9 +249,6 @@ export default {
 </script>
 
 <style lang="scss">
-@import '@/assets/styles/bmc/helpers/_index.scss';
-@import '@/assets/styles/bootstrap/_helpers.scss';
-
 @mixin focus-box-shadow($padding-color: $navbar-color, $outline-color: $white) {
   box-shadow:
     inset 0 0 0 3px $padding-color,
@@ -262,11 +259,11 @@ export default {
     position: absolute;
     top: -60px;
     left: 0.5rem;
-    //z-index: $zindex-popover;
-    //transition: $duration--moderate-01 $exit-easing--expressive;
+    z-index: $zindex-popover;
+    transition: $duration--moderate-01 $exit-easing--expressive;
     &:focus {
       top: 0.5rem;
-      //transition-timing-function: $entrance-easing--expressive;
+      transition-timing-function: $entrance-easing--expressive;
     }
   }
   .navbar-text,
@@ -295,7 +292,6 @@ export default {
   .navbar {
     padding: 0;
     background-color: $navbar-color;
-
     @include media-breakpoint-up($responsive-layout-bp) {
       height: $header-height;
     }

src/components/AppNavigation/AppNavigation.vue

@@ -103,10 +103,7 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped>
-@import '@/assets/styles/bmc/helpers/_index.scss';
-@import '@/assets/styles/bootstrap/_helpers.scss';
-
+<style scoped lang="scss">
 svg {
   fill: currentColor;
   height: 1.2rem;

src/components/Global/ButtonBackToTop.vue

@@ -47,9 +47,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import '@/assets/styles/bmc/helpers/_index.scss';
-@import '@/assets/styles/bootstrap/_helpers.scss';
-
 .btn-top {
   position: fixed;
   bottom: 24px;

src/components/Global/FormFile.vue

@@ -84,9 +84,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import '@/assets/styles/bmc/helpers/_index.scss';
-@import '@/assets/styles/bootstrap/_helpers.scss';
-
 .form-control-file {
   opacity: 0;
   height: 0;

src/components/Global/InfoTooltip.vue

@@ -31,9 +31,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import '@/assets/styles/bmc/helpers/_index.scss';
-@import '@/assets/styles/bootstrap/_helpers.scss';
-
 .btn-tooltip {
   padding: 0;
   line-height: 1em;

src/components/Global/InputPasswordToggle.vue

@@ -53,9 +53,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import '@/assets/styles/bmc/helpers/_index.scss';
-@import '@/assets/styles/bootstrap/_helpers.scss';
-
 .input-password-toggle-container {
   position: relative;
 }