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 <suryav@ami.com>
diff --git a/src/components/AppHeader/AppHeader.vue b/src/components/AppHeader/AppHeader.vue
index 25c0f2b..b7c417f 100644
--- a/src/components/AppHeader/AppHeader.vue
+++ b/src/components/AppHeader/AppHeader.vue
@@ -249,9 +249,6 @@
</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 @@
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 @@
.navbar {
padding: 0;
background-color: $navbar-color;
-
@include media-breakpoint-up($responsive-layout-bp) {
height: $header-height;
}
diff --git a/src/components/AppNavigation/AppNavigation.vue b/src/components/AppNavigation/AppNavigation.vue
index eb8c2c6..45a95f5 100644
--- a/src/components/AppNavigation/AppNavigation.vue
+++ b/src/components/AppNavigation/AppNavigation.vue
@@ -103,10 +103,7 @@
};
</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;
diff --git a/src/components/Global/ButtonBackToTop.vue b/src/components/Global/ButtonBackToTop.vue
index f8d8b88..6d2f740 100644
--- a/src/components/Global/ButtonBackToTop.vue
+++ b/src/components/Global/ButtonBackToTop.vue
@@ -47,9 +47,6 @@
</script>
<style lang="scss" scoped>
-@import '@/assets/styles/bmc/helpers/_index.scss';
-@import '@/assets/styles/bootstrap/_helpers.scss';
-
.btn-top {
position: fixed;
bottom: 24px;
diff --git a/src/components/Global/FormFile.vue b/src/components/Global/FormFile.vue
index bb3b46f..fc9dd32 100644
--- a/src/components/Global/FormFile.vue
+++ b/src/components/Global/FormFile.vue
@@ -84,9 +84,6 @@
</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;
diff --git a/src/components/Global/InfoTooltip.vue b/src/components/Global/InfoTooltip.vue
index f5063e9..fc80216 100644
--- a/src/components/Global/InfoTooltip.vue
+++ b/src/components/Global/InfoTooltip.vue
@@ -31,9 +31,6 @@
</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;
diff --git a/src/components/Global/InputPasswordToggle.vue b/src/components/Global/InputPasswordToggle.vue
index fadb99a..b682cd5 100644
--- a/src/components/Global/InputPasswordToggle.vue
+++ b/src/components/Global/InputPasswordToggle.vue
@@ -53,9 +53,6 @@
</script>
<style lang="scss" scoped>
-@import '@/assets/styles/bmc/helpers/_index.scss';
-@import '@/assets/styles/bootstrap/_helpers.scss';
-
.input-password-toggle-container {
position: relative;
}
diff --git a/src/components/Global/LoadingBar.vue b/src/components/Global/LoadingBar.vue
index 49f2611..8b63093 100644
--- a/src/components/Global/LoadingBar.vue
+++ b/src/components/Global/LoadingBar.vue
@@ -74,9 +74,6 @@
</script>
<style lang="scss" scoped>
-@import '@/assets/styles/bmc/helpers/_index.scss';
-@import '@/assets/styles/bootstrap/_helpers.scss';
-
.progress {
position: absolute;
left: 0;
diff --git a/src/components/Global/PageContainer.vue b/src/components/Global/PageContainer.vue
index 0de5fe7..ab4adb6 100644
--- a/src/components/Global/PageContainer.vue
+++ b/src/components/Global/PageContainer.vue
@@ -17,10 +17,6 @@
};
</script>
<style lang="scss" scoped>
-@import '@/assets/styles/bmc/helpers/_index.scss';
-@import '@/assets/styles/bootstrap/_helpers.scss';
-
-@import 'bootstrap/dist/css/bootstrap.css';
main {
width: 100%;
height: 100%;
diff --git a/src/components/Global/PageSection.vue b/src/components/Global/PageSection.vue
index 15aa383..dd39ddd 100644
--- a/src/components/Global/PageSection.vue
+++ b/src/components/Global/PageSection.vue
@@ -18,9 +18,6 @@
</script>
<style lang="scss" scoped>
-@import '@/assets/styles/bmc/helpers/_index.scss';
-@import '@/assets/styles/bootstrap/_helpers.scss';
-
.page-section {
margin-bottom: $spacer * 4;
}
diff --git a/src/components/Global/PageTitle.vue b/src/components/Global/PageTitle.vue
index ca7f608..4f9ce5e 100644
--- a/src/components/Global/PageTitle.vue
+++ b/src/components/Global/PageTitle.vue
@@ -40,9 +40,6 @@
</script>
<style lang="scss" scoped>
-@import '@/assets/styles/bmc/helpers/_index.scss';
-@import '@/assets/styles/bootstrap/_helpers.scss';
-
.page-title {
margin-bottom: $spacer * 2;
}
diff --git a/src/components/Global/Search.vue b/src/components/Global/Search.vue
index 5c51678..65da87b 100644
--- a/src/components/Global/Search.vue
+++ b/src/components/Global/Search.vue
@@ -73,9 +73,6 @@
</script>
<style lang="scss" scoped>
-@import '@/assets/styles/bmc/helpers/_index.scss';
-@import '@/assets/styles/bootstrap/_helpers.scss';
-
.search-input {
padding-left: ($spacer * 2);
}
diff --git a/src/components/Global/StatusIcon.vue b/src/components/Global/StatusIcon.vue
index 6c1505e..4552633 100644
--- a/src/components/Global/StatusIcon.vue
+++ b/src/components/Global/StatusIcon.vue
@@ -34,9 +34,6 @@
</script>
<style lang="scss" scoped>
-@import '@/assets/styles/bmc/helpers/_index.scss';
-@import '@/assets/styles/bootstrap/_helpers.scss';
-
.status-icon {
vertical-align: text-bottom;
diff --git a/src/components/Global/TableFilter.vue b/src/components/Global/TableFilter.vue
index 2ed88bf..ba77720 100644
--- a/src/components/Global/TableFilter.vue
+++ b/src/components/Global/TableFilter.vue
@@ -111,11 +111,6 @@
</script>
<style lang="scss" scoped>
-@import '@/assets/styles/bmc/helpers/_index.scss';
-@import '@/assets/styles/bootstrap/_helpers.scss';
-
-@import 'bootstrap/dist/css/bootstrap.css';
-
.badge {
margin-right: $spacer / 2;
}
diff --git a/src/components/Global/TableToolbar.vue b/src/components/Global/TableToolbar.vue
index 85d7c9c..0bdb87b 100644
--- a/src/components/Global/TableToolbar.vue
+++ b/src/components/Global/TableToolbar.vue
@@ -71,17 +71,12 @@
</script>
<style lang="scss" scoped>
-@import '@/assets/styles/bmc/helpers/_index.scss';
-@import '@/assets/styles/bootstrap/_helpers.scss';
-
-@import 'bootstrap/dist/css/bootstrap.css';
-
$toolbar-height: 46px;
.toolbar-container {
width: 100%;
position: relative;
- //z-index: $zindex-dropdown + 1;
+ z-index: $zindex-dropdown + 1;
}
.toolbar-content {