diff options
27 files changed, 90 insertions, 39 deletions
diff --git a/src/assets/styles/_obmc-custom.scss b/src/assets/styles/_obmc-custom.scss index c063458c..068364cf 100644 --- a/src/assets/styles/_obmc-custom.scss +++ b/src/assets/styles/_obmc-custom.scss @@ -1,10 +1,3 @@ -// BMC Helpers must be imported before Bootstrap helpers to -// take advantage of Bootstrap's use of the Sass !default -// statement. Moving this helper after results in Bootstrap -// variables taking precedence over BMC's -@import "./bmc/helpers"; -@import "./bootstrap/helpers"; - // Vendor styles @import "./bootstrap"; @import "~bootstrap-vue/src/index"; diff --git a/src/components/AppHeader/AppHeader.vue b/src/components/AppHeader/AppHeader.vue index 4162add8..b977b5f9 100644 --- a/src/components/AppHeader/AppHeader.vue +++ b/src/components/AppHeader/AppHeader.vue @@ -160,8 +160,6 @@ export default { </script> <style lang="scss"> -@import 'src/assets/styles/helpers'; - .app-header { .link-skip-nav { position: absolute; diff --git a/src/components/AppNavigation/AppNavigation.vue b/src/components/AppNavigation/AppNavigation.vue index e1c6fbf8..be80171b 100644 --- a/src/components/AppNavigation/AppNavigation.vue +++ b/src/components/AppNavigation/AppNavigation.vue @@ -213,8 +213,6 @@ export default { </script> <style scoped lang="scss"> -@import 'src/assets/styles/helpers'; - svg { fill: currentColor; height: 1.2rem; diff --git a/src/components/Global/LoadingBar.vue b/src/components/Global/LoadingBar.vue index d1736d6a..8f7b785c 100644 --- a/src/components/Global/LoadingBar.vue +++ b/src/components/Global/LoadingBar.vue @@ -72,8 +72,6 @@ export default { </script> <style lang="scss" scoped> -@import 'src/assets/styles/helpers'; - .progress { position: absolute; left: 0; diff --git a/src/components/Global/PageContainer.vue b/src/components/Global/PageContainer.vue index 91bf346f..8396bd5b 100644 --- a/src/components/Global/PageContainer.vue +++ b/src/components/Global/PageContainer.vue @@ -11,8 +11,6 @@ export default { </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 96f7134e..ddf204d3 100644 --- a/src/components/Global/PageSection.vue +++ b/src/components/Global/PageSection.vue @@ -18,8 +18,6 @@ export default { </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 dc0738e2..a77e0a07 100644 --- a/src/components/Global/PageTitle.vue +++ b/src/components/Global/PageTitle.vue @@ -23,8 +23,6 @@ export default { </script> <style lang="scss" scoped> -@import 'src/assets/styles/helpers'; - .page-title { margin-bottom: $spacer * 2; } diff --git a/src/components/Global/Search.vue b/src/components/Global/Search.vue index e3703559..9ebf4680 100644 --- a/src/components/Global/Search.vue +++ b/src/components/Global/Search.vue @@ -50,8 +50,6 @@ export default { </script> <style lang="scss" scoped> -@import 'src/assets/styles/helpers'; - .search-input { padding-left: ($spacer * 2); } diff --git a/src/components/Global/StatusIcon.vue b/src/components/Global/StatusIcon.vue index 56088050..6de6d310 100644 --- a/src/components/Global/StatusIcon.vue +++ b/src/components/Global/StatusIcon.vue @@ -31,8 +31,6 @@ export default { </script> <style lang="scss" scoped> -@import 'src/assets/styles/helpers'; - .status-icon { vertical-align: text-bottom; &.success { diff --git a/src/components/Global/TableDateFilter.vue b/src/components/Global/TableDateFilter.vue index e73d7d51..ab501ea3 100644 --- a/src/components/Global/TableDateFilter.vue +++ b/src/components/Global/TableDateFilter.vue @@ -165,8 +165,6 @@ export default { </script> <style lang="scss" scoped> -@import 'src/assets/styles/helpers'; - .b-form-datepicker { position: absolute; right: 0; diff --git a/src/components/Global/TableFilter.vue b/src/components/Global/TableFilter.vue index b514483f..d6a954be 100644 --- a/src/components/Global/TableFilter.vue +++ b/src/components/Global/TableFilter.vue @@ -131,8 +131,6 @@ export default { </script> <style lang="scss" scoped> -@import 'src/assets/styles/helpers'; - .badge { margin-right: $spacer / 2; } diff --git a/src/components/Global/TableToolbar.vue b/src/components/Global/TableToolbar.vue index bb18ceb5..70389e8f 100644 --- a/src/components/Global/TableToolbar.vue +++ b/src/components/Global/TableToolbar.vue @@ -68,8 +68,6 @@ export default { </script> <style lang="scss" scoped> -@import 'src/assets/styles/helpers'; - $toolbar-height: 46px; .toolbar-container { diff --git a/src/env/assets/fonts/IBM_Plex_Sans/IBMPlexSans-Italic.woff b/src/env/assets/fonts/IBM_Plex_Sans/IBMPlexSans-Italic.woff Binary files differnew file mode 100644 index 00000000..7e62ab4e --- /dev/null +++ b/src/env/assets/fonts/IBM_Plex_Sans/IBMPlexSans-Italic.woff diff --git a/src/env/assets/fonts/IBM_Plex_Sans/IBMPlexSans-Light.woff b/src/env/assets/fonts/IBM_Plex_Sans/IBMPlexSans-Light.woff Binary files differnew file mode 100644 index 00000000..8824a0de --- /dev/null +++ b/src/env/assets/fonts/IBM_Plex_Sans/IBMPlexSans-Light.woff diff --git a/src/env/assets/fonts/IBM_Plex_Sans/IBMPlexSans-LightItalic.woff b/src/env/assets/fonts/IBM_Plex_Sans/IBMPlexSans-LightItalic.woff Binary files differnew file mode 100644 index 00000000..b079a5ec --- /dev/null +++ b/src/env/assets/fonts/IBM_Plex_Sans/IBMPlexSans-LightItalic.woff diff --git a/src/env/assets/fonts/IBM_Plex_Sans/IBMPlexSans-Regular.woff b/src/env/assets/fonts/IBM_Plex_Sans/IBMPlexSans-Regular.woff Binary files differnew file mode 100644 index 00000000..79bdeab7 --- /dev/null +++ b/src/env/assets/fonts/IBM_Plex_Sans/IBMPlexSans-Regular.woff diff --git a/src/env/assets/fonts/IBM_Plex_Sans/IBMPlexSans-SemiBold.woff b/src/env/assets/fonts/IBM_Plex_Sans/IBMPlexSans-SemiBold.woff Binary files differnew file mode 100644 index 00000000..ce9534ca --- /dev/null +++ b/src/env/assets/fonts/IBM_Plex_Sans/IBMPlexSans-SemiBold.woff diff --git a/src/env/assets/fonts/IBM_Plex_Sans/IBMPlexSans-SemiBoldItalic.woff b/src/env/assets/fonts/IBM_Plex_Sans/IBMPlexSans-SemiBoldItalic.woff Binary files differnew file mode 100644 index 00000000..f00b6edb --- /dev/null +++ b/src/env/assets/fonts/IBM_Plex_Sans/IBMPlexSans-SemiBoldItalic.woff diff --git a/src/env/assets/styles/_intel.scss b/src/env/assets/styles/_intel.scss new file mode 100644 index 00000000..e69de29b --- /dev/null +++ b/src/env/assets/styles/_intel.scss diff --git a/src/env/assets/styles/_openpower.scss b/src/env/assets/styles/_openpower.scss new file mode 100644 index 00000000..f1bf4320 --- /dev/null +++ b/src/env/assets/styles/_openpower.scss @@ -0,0 +1,57 @@ +@font-face { + font-family: 'Plex'; + src: url('~@/env/assets/fonts/IBM_Plex_Sans/IBMPlexSans-Light.woff') format('woff'); + font-weight: 200; +} +@font-face { + font-family: 'Plex'; + src: url('~@/env/assets/fonts/IBM_Plex_Sans/IBMPlexSans-LightItalic.woff') format('woff'); + font-weight: 200; + font-style: italic; +} +@font-face { + font-family: 'Plex'; + src: url('~@/env/assets/fonts/IBM_Plex_Sans/IBMPlexSans-Regular.woff') format('woff'); + font-weight: 400; +} +@font-face { + font-family: 'Plex'; + src: url('~@/env/assets/fonts/IBM_Plex_Sans/IBMPlexSans-Italic.woff') format('woff'); + font-weight: 400; + font-style: italic; +} +@font-face { + font-family: 'Plex'; + src: url('~@/env/assets/fonts/IBM_Plex_Sans/IBMPlexSans-SemiBold.woff') format('woff'); + font-weight: 700; +} +@font-face { + font-family: 'Plex'; + src: url('~@/env/assets/fonts/IBM_Plex_Sans/IBMPlexSans-SemiBoldItalic.woff') format('woff'); + font-weight: 700; + font-style: italic; +} + +// IBM Plex with Bootstrap default as fallbacks +// https://getbootstrap.com/docs/4.4/content/reboot/#native-font-stack + +$font-family-base: 'Plex', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + +// IBM gray palette +$gray-100: #F4F4F4; +// $gray-200: #E0E0E0; Use default OpenBMC $gray-200 +// $gray-300: #C6C6C6; Use default OpenBMC $gray-300 +$gray-400: #A8A8A8; +$gray-500: #8D8D8D; +$gray-600: #6F6F6F; +$gray-700: #525252; +$gray-800: #333333; +$gray-900: #161616; + +// IBM theme colors +$theme-colors: ( + "primary": #0F62FE, + "danger": #DA1E28, + "success": #24A146, + "warning": #F1C21B +);
\ No newline at end of file diff --git a/src/layouts/AppLayout.vue b/src/layouts/AppLayout.vue index 6950e338..8edc338d 100644 --- a/src/layouts/AppLayout.vue +++ b/src/layouts/AppLayout.vue @@ -54,8 +54,6 @@ export default { </script> <style lang="scss" scoped> -@import 'src/assets/styles/helpers'; - .app-container { display: grid; grid-template-columns: 100%; diff --git a/src/layouts/LoginLayout.vue b/src/layouts/LoginLayout.vue index e92cf05e..674f4eb2 100644 --- a/src/layouts/LoginLayout.vue +++ b/src/layouts/LoginLayout.vue @@ -33,8 +33,6 @@ export default { </script> <style lang="scss" scoped> -@import 'src/assets/styles/helpers'; - .login-container { @include media-breakpoint-up(md) { background: linear-gradient( diff --git a/src/views/Control/Kvm/KvmConsole.vue b/src/views/Control/Kvm/KvmConsole.vue index 080f72e8..6881b690 100644 --- a/src/views/Control/Kvm/KvmConsole.vue +++ b/src/views/Control/Kvm/KvmConsole.vue @@ -57,7 +57,6 @@ export default { </script> <style scoped lang="scss"> -@import 'src/assets/styles/helpers'; #terminal { height: calc(100vh - 42px); } diff --git a/src/views/Control/ServerPowerOperations/BootSettings.vue b/src/views/Control/ServerPowerOperations/BootSettings.vue index 16d567a7..8f54cbb8 100644 --- a/src/views/Control/ServerPowerOperations/BootSettings.vue +++ b/src/views/Control/ServerPowerOperations/BootSettings.vue @@ -147,8 +147,6 @@ export default { </script> <style lang="scss" scoped> -@import 'src/assets/styles/helpers'; - .boot-settings { background-color: gray('200'); } diff --git a/src/views/Overview/Overview.vue b/src/views/Overview/Overview.vue index ba934130..46944cc8 100644 --- a/src/views/Overview/Overview.vue +++ b/src/views/Overview/Overview.vue @@ -154,7 +154,6 @@ export default { </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 d3a19403..8dc1c8eb 100644 --- a/src/views/Overview/OverviewQuickLinks.vue +++ b/src/views/Overview/OverviewQuickLinks.vue @@ -98,8 +98,6 @@ export default { </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 c681f470..81763622 100644 --- a/vue.config.js +++ b/vue.config.js @@ -1,6 +1,39 @@ const CompressionPlugin = require('compression-webpack-plugin'); module.exports = { + css: { + loaderOptions: { + sass: { + prependData: () => { + const envName = process.env.VUE_APP_ENV_NAME; + if (envName !== undefined) { + // If there is an env name defined, import Sass + // overrides. + // It is important that these imports stay in this + // order to make sure enviroment overrides + // take precedence over the default BMC styles + return ` + @import "@/assets/styles/bmc/helpers"; + @import "@/env/assets/styles/_${process.env.VUE_APP_ENV_NAME}"; + @import "@/assets/styles/bootstrap/_helpers"; + `; + } else { + // Include helper imports so single file components + // do not need to include helper imports + + // BMC Helpers must be imported before Bootstrap helpers to + // take advantage of Bootstrap's use of the Sass !default + // statement. Moving this helper after results in Bootstrap + // variables taking precedence over BMC's + return ` + @import "@/assets/styles/bmc/helpers"; + @import "@/assets/styles/bootstrap/_helpers"; + `; + } + } + } + } + }, devServer: { https: true, proxy: { |