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/App.vue b/src/App.vue
index 35a743c..3a56c7c 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -35,6 +35,5 @@
</script>
<style lang="scss">
-//@import '@/assets/styles/_obmc-custom';
-//@import './assets/styles/bootstrap/_helpers.scss';
+@import '@/assets/styles/_obmc-custom';
</style>
diff --git a/src/assets/styles/bmc/custom/_buttons.scss b/src/assets/styles/bmc/custom/_buttons.scss
index 597766c..0ab7baa 100644
--- a/src/assets/styles/bmc/custom/_buttons.scss
+++ b/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
diff --git a/src/assets/styles/bmc/custom/_dropdown.scss b/src/assets/styles/bmc/custom/_dropdown.scss
index 56d2ace..82dda86 100644
--- a/src/assets/styles/bmc/custom/_dropdown.scss
+++ b/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");
}
}
-}
\ No newline at end of file
+}
diff --git a/src/assets/styles/bmc/custom/_tables.scss b/src/assets/styles/bmc/custom/_tables.scss
index deeddc3..e8b5a83 100644
--- a/src/assets/styles/bmc/custom/_tables.scss
+++ b/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");
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 {
diff --git a/src/layouts/AppLayout.vue b/src/layouts/AppLayout.vue
index 4f46848..2002269 100644
--- a/src/layouts/AppLayout.vue
+++ b/src/layouts/AppLayout.vue
@@ -70,9 +70,6 @@
</script>
<style lang="scss" scoped>
-@import '@/assets/styles/bmc/helpers/_index.scss';
-@import '@/assets/styles/bootstrap/_helpers.scss';
-
.app-container {
display: grid;
grid-template-columns: 100%;
diff --git a/src/layouts/LoginLayout.vue b/src/layouts/LoginLayout.vue
index a79228f..36a070c 100644
--- a/src/layouts/LoginLayout.vue
+++ b/src/layouts/LoginLayout.vue
@@ -24,7 +24,7 @@
<div class="login-aside__logo-bmc">
<img
svg-inline
- height="60px"
+ height="60"
src="@/assets/images/built-on-openbmc-logo.svg"
alt="Built on OpenBMC"
/>
@@ -44,16 +44,9 @@
};
},
};
-('');
</script>
<style lang="scss" scoped>
-@import '@/assets/styles/bmc/helpers/_index.scss';
-@import '@/assets/styles/bootstrap/_helpers.scss';
-
-@import '@/assets/styles/bmc/helpers';
-@import '@/assets/styles/bootstrap/_helpers';
-
.login-container {
background: gray('100');
display: flex;
diff --git a/src/main.js b/src/main.js
index 92c5c90..9637de9 100644
--- a/src/main.js
+++ b/src/main.js
@@ -13,12 +13,6 @@
import store from './store';
import eventBus from './eventBus';
-import './assets/styles/bmc/helpers/_index.scss';
-import './assets/styles/bootstrap/_helpers.scss';
-
-import 'bootstrap/dist/css/bootstrap.css';
-import 'bootstrap-vue/dist/bootstrap-vue.css';
-
import {
BootstrapVue,
AlertPlugin,
diff --git a/src/views/ChangePassword/ChangePassword.vue b/src/views/ChangePassword/ChangePassword.vue
index 7778ebe..a6ac5ab 100644
--- a/src/views/ChangePassword/ChangePassword.vue
+++ b/src/views/ChangePassword/ChangePassword.vue
@@ -136,11 +136,6 @@
</script>
<style lang="scss" scoped>
-@import '@/assets/styles/bmc/helpers/_index.scss';
-@import '@/assets/styles/bootstrap/_helpers.scss';
-
-@import '@/assets/styles/bootstrap/_helpers.scss';
-
.change-password__form-container {
@include media-breakpoint-up('md') {
max-width: 360px;
diff --git a/src/views/Operations/Firmware/FirmwareCardsBios.vue b/src/views/Operations/Firmware/FirmwareCardsBios.vue
index 85e3df2..a2994cc 100644
--- a/src/views/Operations/Firmware/FirmwareCardsBios.vue
+++ b/src/views/Operations/Firmware/FirmwareCardsBios.vue
@@ -73,11 +73,6 @@
</script>
<style lang="scss" scoped>
-@import '@/assets/styles/bmc/helpers/_index.scss';
-@import '@/assets/styles/bootstrap/_helpers.scss';
-
-@import '@/assets/styles/bootstrap/_helpers.scss';
-
.page-section {
margin-top: -$spacer * 1.5;
}
diff --git a/src/views/Operations/Kvm/KvmConsole.vue b/src/views/Operations/Kvm/KvmConsole.vue
index 2b3084c..64ee897 100644
--- a/src/views/Operations/Kvm/KvmConsole.vue
+++ b/src/views/Operations/Kvm/KvmConsole.vue
@@ -176,14 +176,7 @@
};
</script>
-<style lang="scss">
-@import '@/assets/styles/bmc/custom/_kvm.scss';
-</style>
-
-<style lang="scss" scoped>
-@import '@/assets/styles/bmc/helpers/_index.scss';
-@import '@/assets/styles/bootstrap/_helpers.scss';
-
+<style scoped lang="scss">
.button-ctrl-alt-delete {
float: right;
}
diff --git a/src/views/Operations/RebootBmc/RebootBmc.vue b/src/views/Operations/RebootBmc/RebootBmc.vue
index 0865d77..d8c529c 100644
--- a/src/views/Operations/RebootBmc/RebootBmc.vue
+++ b/src/views/Operations/RebootBmc/RebootBmc.vue
@@ -88,7 +88,4 @@
};
</script>
-<style lang="scss" scoped>
-@import '@/assets/styles/bmc/helpers/_index.scss';
-@import '@/assets/styles/bootstrap/_helpers.scss';
-</style>
+<style lang="scss" scoped></style>
diff --git a/src/views/Operations/SerialOverLan/SerialOverLanConsole.vue b/src/views/Operations/SerialOverLan/SerialOverLanConsole.vue
index b711422..8f1c4bc 100644
--- a/src/views/Operations/SerialOverLan/SerialOverLanConsole.vue
+++ b/src/views/Operations/SerialOverLan/SerialOverLanConsole.vue
@@ -163,9 +163,6 @@
</script>
<style lang="scss" scoped>
-@import '@/assets/styles/bmc/helpers/_index.scss';
-@import '@/assets/styles/bootstrap/_helpers.scss';
-
@import '~xterm/css/xterm.css';
#terminal {
diff --git a/src/views/Overview/OverviewCard.vue b/src/views/Overview/OverviewCard.vue
index 342bf98..7cfe558 100644
--- a/src/views/Overview/OverviewCard.vue
+++ b/src/views/Overview/OverviewCard.vue
@@ -77,9 +77,6 @@
</script>
<style lang="scss" scoped>
-@import '@/assets/styles/bmc/helpers/_index.scss';
-@import '@/assets/styles/bootstrap/_helpers.scss';
-
a {
vertical-align: middle;
font-size: 14px;
diff --git a/src/views/Overview/OverviewEvents.vue b/src/views/Overview/OverviewEvents.vue
index 0056af4..147f30c 100644
--- a/src/views/Overview/OverviewEvents.vue
+++ b/src/views/Overview/OverviewEvents.vue
@@ -91,9 +91,6 @@
</script>
<style lang="scss" scoped>
-@import '@/assets/styles/bmc/helpers/_index.scss';
-@import '@/assets/styles/bootstrap/_helpers.scss';
-
.status-icon {
vertical-align: text-top;
}
diff --git a/src/views/Overview/OverviewQuickLinks.vue b/src/views/Overview/OverviewQuickLinks.vue
index 506de11..d9d7797 100644
--- a/src/views/Overview/OverviewQuickLinks.vue
+++ b/src/views/Overview/OverviewQuickLinks.vue
@@ -56,9 +56,6 @@
</script>
<style lang="scss" scoped>
-@import '@/assets/styles/bmc/helpers/_index.scss';
-@import '@/assets/styles/bootstrap/_helpers.scss';
-
dd,
dl {
margin: 0;
diff --git a/src/views/SecurityAndAccess/Policies/Policies.vue b/src/views/SecurityAndAccess/Policies/Policies.vue
index 6cba883..58d8363 100644
--- a/src/views/SecurityAndAccess/Policies/Policies.vue
+++ b/src/views/SecurityAndAccess/Policies/Policies.vue
@@ -257,9 +257,6 @@
</script>
<style lang="scss" scoped>
-@import '@/assets/styles/bmc/helpers/_index.scss';
-@import '@/assets/styles/bootstrap/_helpers.scss';
-
.setting-section {
border-bottom: 1px solid gray('300');
}
diff --git a/src/views/SecurityAndAccess/UserManagement/UserManagement.vue b/src/views/SecurityAndAccess/UserManagement/UserManagement.vue
index cfe04a6..cb057a7 100644
--- a/src/views/SecurityAndAccess/UserManagement/UserManagement.vue
+++ b/src/views/SecurityAndAccess/UserManagement/UserManagement.vue
@@ -425,9 +425,6 @@
</script>
<style lang="scss" scoped>
-@import '@/assets/styles/bmc/helpers/_index.scss';
-@import '@/assets/styles/bootstrap/_helpers.scss';
-
.btn.collapsed {
svg {
transform: rotate(180deg);