From 408657262515e015a2964aafb8a1c76fb5259699 Mon Sep 17 00:00:00 2001 From: Derick Montague Date: Mon, 13 Apr 2020 17:01:19 -0500 Subject: 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 Change-Id: Iddcefbf305c8dac978ee24e903df33b609e395e3 --- src/assets/styles/_alerts.scss | 64 ------------------- src/assets/styles/_badge.scss | 19 ------ src/assets/styles/_bootstrap-grid.scss | 8 --- src/assets/styles/_buttons.scss | 43 ------------- src/assets/styles/_colors.scss | 74 ---------------------- src/assets/styles/_dropdown.scss | 21 ------ src/assets/styles/_form-components.scss | 56 ---------------- src/assets/styles/_helpers.scss | 3 + src/assets/styles/_modal.scss | 7 -- src/assets/styles/_motion.scss | 14 ---- src/assets/styles/_obmc-custom.scss | 65 +++++-------------- src/assets/styles/_table.scss | 22 ------- src/assets/styles/_toast.scss | 44 ------------- src/assets/styles/_typography.scss | 7 -- src/assets/styles/_variables.scss | 12 ---- src/assets/styles/bmc/_base.scss | 7 ++ src/assets/styles/bmc/_helpers.scss | 3 + src/assets/styles/bmc/helpers/_colors.scss | 74 ++++++++++++++++++++++ src/assets/styles/bmc/helpers/_motion.scss | 14 ++++ src/assets/styles/bmc/helpers/_variables.scss | 12 ++++ .../styles/vendor-overrides/bootstrap/_alert.scss | 64 +++++++++++++++++++ .../styles/vendor-overrides/bootstrap/_badge.scss | 19 ++++++ .../bootstrap/_bootstrap-grid.scss | 8 +++ .../vendor-overrides/bootstrap/_buttons.scss | 43 +++++++++++++ .../vendor-overrides/bootstrap/_dropdown.scss | 21 ++++++ .../styles/vendor-overrides/bootstrap/_forms.scss | 56 ++++++++++++++++ .../styles/vendor-overrides/bootstrap/_index.scss | 11 ++++ .../styles/vendor-overrides/bootstrap/_modal.scss | 7 ++ .../styles/vendor-overrides/bootstrap/_tables.scss | 22 +++++++ .../styles/vendor-overrides/bootstrap/_toasts.scss | 44 +++++++++++++ src/assets/styles/vendor/bootstrap-vue/_index.scss | 1 + src/assets/styles/vendor/bootstrap/_base.scss | 4 ++ .../styles/vendor/bootstrap/_components.scss | 26 ++++++++ src/assets/styles/vendor/bootstrap/_helpers.scss | 3 + src/assets/styles/vendor/bootstrap/_utils.scss | 2 + src/components/AppHeader/AppHeader.vue | 2 + src/components/AppNavigation/AppNavigation.vue | 2 + src/components/Global/PageContainer.vue | 2 + src/components/Global/PageSection.vue | 2 + src/components/Global/PageTitle.vue | 2 + src/components/Global/StatusIcon.vue | 2 + src/components/Global/TableFilter.vue | 2 + src/components/Global/TableToolbar.vue | 2 + src/layouts/AppLayout.vue | 2 + .../Control/ServerPowerOperations/BootSettings.vue | 4 +- src/views/Login/Login.vue | 2 + src/views/Overview/Overview.vue | 1 + src/views/Overview/OverviewQuickLinks.vue | 2 + 48 files changed, 487 insertions(+), 440 deletions(-) delete mode 100644 src/assets/styles/_alerts.scss delete mode 100644 src/assets/styles/_badge.scss delete mode 100644 src/assets/styles/_bootstrap-grid.scss delete mode 100644 src/assets/styles/_buttons.scss delete mode 100644 src/assets/styles/_colors.scss delete mode 100644 src/assets/styles/_dropdown.scss delete mode 100644 src/assets/styles/_form-components.scss create mode 100644 src/assets/styles/_helpers.scss delete mode 100644 src/assets/styles/_modal.scss delete mode 100644 src/assets/styles/_motion.scss delete mode 100644 src/assets/styles/_table.scss delete mode 100644 src/assets/styles/_toast.scss delete mode 100644 src/assets/styles/_typography.scss delete mode 100644 src/assets/styles/_variables.scss create mode 100644 src/assets/styles/bmc/_base.scss create mode 100644 src/assets/styles/bmc/_helpers.scss create mode 100644 src/assets/styles/bmc/helpers/_colors.scss create mode 100644 src/assets/styles/bmc/helpers/_motion.scss create mode 100644 src/assets/styles/bmc/helpers/_variables.scss create mode 100644 src/assets/styles/vendor-overrides/bootstrap/_alert.scss create mode 100644 src/assets/styles/vendor-overrides/bootstrap/_badge.scss create mode 100644 src/assets/styles/vendor-overrides/bootstrap/_bootstrap-grid.scss create mode 100644 src/assets/styles/vendor-overrides/bootstrap/_buttons.scss create mode 100644 src/assets/styles/vendor-overrides/bootstrap/_dropdown.scss create mode 100644 src/assets/styles/vendor-overrides/bootstrap/_forms.scss create mode 100644 src/assets/styles/vendor-overrides/bootstrap/_index.scss create mode 100644 src/assets/styles/vendor-overrides/bootstrap/_modal.scss create mode 100644 src/assets/styles/vendor-overrides/bootstrap/_tables.scss create mode 100644 src/assets/styles/vendor-overrides/bootstrap/_toasts.scss create mode 100644 src/assets/styles/vendor/bootstrap-vue/_index.scss create mode 100644 src/assets/styles/vendor/bootstrap/_base.scss create mode 100644 src/assets/styles/vendor/bootstrap/_components.scss create mode 100644 src/assets/styles/vendor/bootstrap/_helpers.scss create mode 100644 src/assets/styles/vendor/bootstrap/_utils.scss (limited to 'src') diff --git a/src/assets/styles/_alerts.scss b/src/assets/styles/_alerts.scss deleted file mode 100644 index 0b7b518a..00000000 --- a/src/assets/styles/_alerts.scss +++ /dev/null @@ -1,64 +0,0 @@ -.alert { - display: flex; - padding: $spacer; - border-width: 0 0 0 3px; - color: $gray-800; - margin-bottom: $spacer; - - &.small { - padding: $spacer / 2; - font-size: 1rem; - } - - .close { - font-weight: 300; - opacity: 1; - } - - .alert-icon { - display: inline-flex; - align-items: center; - margin-right: $spacer; - margin-bottom: $spacer; - - @include media-breakpoint-up(sm) { - margin-bottom: 0; - } - } - - .alert-content { - flex: 1 1 auto; - } - - .alert-title { - margin-bottom: $spacer / 2; - } - - .alert-msg { - p + p { - margin-bottom: $spacer; - } - - p:last-of-type { - margin-bottom: 0; - } - } - - &.alert-info { - border-left-color: $info; - background-color: $info-light; - fill: $info; - } - - &.alert-danger { - border-left-color: $danger; - background-color: $danger-light; - fill: $danger; - } - - &.alert-warning { - border-left-color: $warning; - background-color: $warning-light; - fill: $warning; - } - } \ No newline at end of file diff --git a/src/assets/styles/_badge.scss b/src/assets/styles/_badge.scss deleted file mode 100644 index 68e7482f..00000000 --- a/src/assets/styles/_badge.scss +++ /dev/null @@ -1,19 +0,0 @@ -.badge-pill { - // Need to explicitly set border-radius - // for pill variant because global $enable-rounded - // Boostrap setting removes rounded pill style - border-radius: 10rem; - fill: currentColor; - font-weight: 400; - .close { - font-size: 1em; - margin-left: $spacer/2; - font-weight: inherit; - color: inherit; - } -} - -.badge-primary { - background-color: $info-light; - color: $info; -} \ No newline at end of file diff --git a/src/assets/styles/_bootstrap-grid.scss b/src/assets/styles/_bootstrap-grid.scss deleted file mode 100644 index 7ad7c81b..00000000 --- a/src/assets/styles/_bootstrap-grid.scss +++ /dev/null @@ -1,8 +0,0 @@ -.container-xl { - // Fluid layout container class sets 100% - // width until xl breakpoint. Once a max-width - // is set, setting the left margin to 0 is needed - // so the content doesn't center align - // https://bootstrap-vue.org/docs/components/layout#fluid-width-container - margin-left: 0; -} \ No newline at end of file diff --git a/src/assets/styles/_buttons.scss b/src/assets/styles/_buttons.scss deleted file mode 100644 index b9b8073b..00000000 --- a/src/assets/styles/_buttons.scss +++ /dev/null @@ -1,43 +0,0 @@ -.btn { - font-weight: $headings-font-weight; - padding-top: $spacer / 2; - padding-right: $spacer; - padding-bottom: $spacer / 2; - padding-left: $spacer; - - // Buttons with SVGs and text expect - // text to be wrapped in a span element - svg + span { - margin-left: $spacer / 4; - } -} - -.btn-primary { - fill: currentColor; -} - -.btn-secondary { - fill: currentColor; -} - -.btn-link { - fill: $primary; - text-decoration: none !important; - - &:focus { - box-shadow: $btn-focus-box-shadow; - } - &:hover { - fill: darken($primary, 15%); - } -} - -.btn:disabled { - color: $gray-600; - fill: currentColor; - - &:not(.btn-link) { - border-color: $gray-400; - background-color: $gray-400; - } -} \ No newline at end of file diff --git a/src/assets/styles/_colors.scss b/src/assets/styles/_colors.scss deleted file mode 100644 index 28bfe890..00000000 --- a/src/assets/styles/_colors.scss +++ /dev/null @@ -1,74 +0,0 @@ -// SASS Color Variables -$black: #000; -$white: #fff; - -$blue-100: #eff2fb; -$blue-500: #2d60e5; - -$green-100: #ecfdf1; -$green-500: #0a7d06; - -$red-100: #feeeed; -$red-500: #da1416; - -$yellow-100: #fff8e4; -$yellow-500: #efc100; - -$gray-100: #fafafa; -$gray-200: #f4f4f4; -$gray-300: #dcdee0; -$gray-400: #ccc; -$gray-500: #b3b3b3; -$gray-600: #999999; -$gray-700: #666666; -$gray-800: #333333; -$gray-900: #161616; - -// SASS Base Color Variables -$blue: $blue-500; -$green: $green-500; -$red: $red-500; -$yellow: $yellow-500; - -// Bootstrap will generate CSS variables for -// all of the colors in this map. -// https://getbootstrap.com/docs/4.0/getting-started/theming/#css-variables -$colors: ( - "blue": $blue, - "green": $green, - "red": $red, - "yellow": $yellow, -); - -// SASS Theme Color Variables -// Can be used as variants -$danger: $red; -$dark: $gray-900; -$info: $blue; -$light: $gray-100; -$primary: $blue; -$secondary: $gray-800; -$success: $green; -$warning: $yellow; - -// Sass Color Variable Accents -// Used for component styles and are -// not available as variants -$danger-light: $red-100; -$info-light: $blue-100; -$warning-light: $yellow-100; -$success-light: $green-100; - -// Bootstrap will generate CSS variables for -// all of the colors in this map. -// https://getbootstrap.com/docs/4.0/getting-started/theming/#css-variables -$theme-colors: ( - "primary": $primary, - "secondary": $secondary, - "dark": $dark, - "light": $light, - "danger": $danger, - "info": $info, - "success": $success, - "warning": $warning -); diff --git a/src/assets/styles/_dropdown.scss b/src/assets/styles/_dropdown.scss deleted file mode 100644 index 0eb310f6..00000000 --- a/src/assets/styles/_dropdown.scss +++ /dev/null @@ -1,21 +0,0 @@ -.dropdown-item { - padding-left: $spacer/2; -} - -.b-dropdown-form { - padding: $spacer/2; - .form-group { - margin-bottom: $spacer/2; - } -} - -.table-filter { - // Adding component style to global stylesheet because - // single-file component scoped styles aren't - // being applied to dynamically appended elements - // The overflow menu should be above the table - .dropdown-menu { - z-index: $zindex-dropdown + 1; - padding: 0; - } -} \ No newline at end of file diff --git a/src/assets/styles/_form-components.scss b/src/assets/styles/_form-components.scss deleted file mode 100644 index 8d3ed9e4..00000000 --- a/src/assets/styles/_form-components.scss +++ /dev/null @@ -1,56 +0,0 @@ -.form-text { - margin-top: -$spacer / 4; - margin-bottom: $spacer / 2; - color: $gray-800; -} - -.col-form-label { - color: $gray-800; - font-size: 14px; -} - -.form-group { - margin-bottom: $spacer * 2; -} - -.custom-select, -.custom-control-label, -.form-control { - //important needed to override validation colors on radio labels - color: $dark !important; - font-size: 16px; - border-color: $gray-400 !important; - &.is-invalid, - &:invalid { - border-bottom: 2px solid $danger !important; - } -} - -.custom-control { - .custom-control-input[disabled=disabled] { - & + .custom-control-label { - // Disabled label for checkbox, radio, - // switch bootstrap form components - color: $gray-700!important; - } - } -} - -.b-form-tag-remove { - // X button to remove tag - font-weight: normal; -} - -.b-form-tags-button { - // Add button inside input field - white-space: nowrap; - margin-right: -$spacer; - &.btn-link-primary { - color: $primary; - fill: currentColor; - } -} - -.form-background { - background-color: $container-bgd; -} \ No newline at end of file diff --git a/src/assets/styles/_helpers.scss b/src/assets/styles/_helpers.scss new file mode 100644 index 00000000..f01c00b7 --- /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/_modal.scss b/src/assets/styles/_modal.scss deleted file mode 100644 index 5d3b6014..00000000 --- a/src/assets/styles/_modal.scss +++ /dev/null @@ -1,7 +0,0 @@ -.modal-header { - .close { - font-weight: normal; - color: $dark; - opacity: 1; - } -} \ No newline at end of file diff --git a/src/assets/styles/_motion.scss b/src/assets/styles/_motion.scss deleted file mode 100644 index 55a3eed9..00000000 --- a/src/assets/styles/_motion.scss +++ /dev/null @@ -1,14 +0,0 @@ -$duration--fast-01: 70ms; //Micro-interactions such as button and toggle -$duration--fast-02: 110ms; //Micro-interactions such as fade -$duration--moderate-01: 150ms; //Micro-interactions, small expansion, short distance movements -$duration--moderate-02: 240ms; //Expansion, system communication, toast -$duration--slow-01: 400ms; //Large expansion, important system notifications -$duration--slow-02: 700ms; //Background dimming - -// https://www.carbondesignsystem.com/guidelines/motion/basics/#easing -$standard-easing--productive: cubic-bezier(0.2, 0, 0.38, 0.9); -$standard-easing--expressive: cubic-bezier(0.4, 0.14, 0.3, 1); -$entrance-easing--productive: cubic-bezier(0, 0, 0.38, 0.9); -$entrance-easing--expressive: cubic-bezier(0, 0, 0.3, 1); -$exit-easing--productive: cubic-bezier(0.2, 0, 1, 0.9); -$exit-easing--expressive: cubic-bezier(0.4, 0.14, 1, 1); \ No newline at end of file diff --git a/src/assets/styles/_obmc-custom.scss b/src/assets/styles/_obmc-custom.scss index 7e43e62b..f443799f 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/_table.scss b/src/assets/styles/_table.scss deleted file mode 100644 index 2372d257..00000000 --- a/src/assets/styles/_table.scss +++ /dev/null @@ -1,22 +0,0 @@ -table { - position: relative; - z-index: $zindex-dropdown; - .status-icon svg { - width: 1rem; - height: auto; - } -} - -.table-light { - td { - border-top: none; - border-bottom: 1px solid $gray-300; - } -} - -.thead-light.thead-light { - th { - border: none; - color: $dark; - } -} \ No newline at end of file diff --git a/src/assets/styles/_toast.scss b/src/assets/styles/_toast.scss deleted file mode 100644 index 9295b17e..00000000 --- a/src/assets/styles/_toast.scss +++ /dev/null @@ -1,44 +0,0 @@ -.b-toaster { - top: 75px!important; // make sure toasts do not hide top header -} - -.toast { - padding: $spacer/2 $spacer/2 $spacer/2 $spacer; - border-width: 0 0 0 3px; - .close { - font-weight: 300; - opacity: 1; - } -} - -.toast-header { - background-color: inherit!important; //override specificity - border: none; - color: $dark!important; //override specificity - padding-bottom: 0; -} - -.toast-body { - color: $dark; - padding-top: 0; -} - -.b-toast-success .toast { - border-left-color: $success!important; - background-color: $success-light; -} - -.b-toast-info .toast { - border-left-color: $info!important; - background-color: $info-light; -} - -.b-toast-danger .toast { - border-left-color: $danger!important; - background-color: $danger-light; -} - -.b-toast-warning .toast { - border-left-color: $warning!important; - background-color: $warning-light; -} \ No newline at end of file diff --git a/src/assets/styles/_typography.scss b/src/assets/styles/_typography.scss deleted file mode 100644 index 39a4aaa7..00000000 --- a/src/assets/styles/_typography.scss +++ /dev/null @@ -1,7 +0,0 @@ -dt, -legend, -label { - color: $gray-800; - font-size: 14px; - font-weight: 400; -} diff --git a/src/assets/styles/_variables.scss b/src/assets/styles/_variables.scss deleted file mode 100644 index f59cfc1c..00000000 --- a/src/assets/styles/_variables.scss +++ /dev/null @@ -1,12 +0,0 @@ -@import "./colors"; - -// Override Bootstrap Variables - node_modules/Bootstrap/scss/_variables.scss -$enable-rounded: false; -$enable-validation-icons: false; - -// OpenBMC Custom Variables -$responsive-layout-bp: lg; -$header-height: 56px; -$navigation-width: 300px; -$container-bgd: $gray-200; -$primary-nav-hover: $gray-300; \ No newline at end of file diff --git a/src/assets/styles/bmc/_base.scss b/src/assets/styles/bmc/_base.scss new file mode 100644 index 00000000..39a4aaa7 --- /dev/null +++ b/src/assets/styles/bmc/_base.scss @@ -0,0 +1,7 @@ +dt, +legend, +label { + color: $gray-800; + font-size: 14px; + font-weight: 400; +} diff --git a/src/assets/styles/bmc/_helpers.scss b/src/assets/styles/bmc/_helpers.scss new file mode 100644 index 00000000..bec209be --- /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/bmc/helpers/_colors.scss b/src/assets/styles/bmc/helpers/_colors.scss new file mode 100644 index 00000000..28bfe890 --- /dev/null +++ b/src/assets/styles/bmc/helpers/_colors.scss @@ -0,0 +1,74 @@ +// SASS Color Variables +$black: #000; +$white: #fff; + +$blue-100: #eff2fb; +$blue-500: #2d60e5; + +$green-100: #ecfdf1; +$green-500: #0a7d06; + +$red-100: #feeeed; +$red-500: #da1416; + +$yellow-100: #fff8e4; +$yellow-500: #efc100; + +$gray-100: #fafafa; +$gray-200: #f4f4f4; +$gray-300: #dcdee0; +$gray-400: #ccc; +$gray-500: #b3b3b3; +$gray-600: #999999; +$gray-700: #666666; +$gray-800: #333333; +$gray-900: #161616; + +// SASS Base Color Variables +$blue: $blue-500; +$green: $green-500; +$red: $red-500; +$yellow: $yellow-500; + +// Bootstrap will generate CSS variables for +// all of the colors in this map. +// https://getbootstrap.com/docs/4.0/getting-started/theming/#css-variables +$colors: ( + "blue": $blue, + "green": $green, + "red": $red, + "yellow": $yellow, +); + +// SASS Theme Color Variables +// Can be used as variants +$danger: $red; +$dark: $gray-900; +$info: $blue; +$light: $gray-100; +$primary: $blue; +$secondary: $gray-800; +$success: $green; +$warning: $yellow; + +// Sass Color Variable Accents +// Used for component styles and are +// not available as variants +$danger-light: $red-100; +$info-light: $blue-100; +$warning-light: $yellow-100; +$success-light: $green-100; + +// Bootstrap will generate CSS variables for +// all of the colors in this map. +// https://getbootstrap.com/docs/4.0/getting-started/theming/#css-variables +$theme-colors: ( + "primary": $primary, + "secondary": $secondary, + "dark": $dark, + "light": $light, + "danger": $danger, + "info": $info, + "success": $success, + "warning": $warning +); diff --git a/src/assets/styles/bmc/helpers/_motion.scss b/src/assets/styles/bmc/helpers/_motion.scss new file mode 100644 index 00000000..55a3eed9 --- /dev/null +++ b/src/assets/styles/bmc/helpers/_motion.scss @@ -0,0 +1,14 @@ +$duration--fast-01: 70ms; //Micro-interactions such as button and toggle +$duration--fast-02: 110ms; //Micro-interactions such as fade +$duration--moderate-01: 150ms; //Micro-interactions, small expansion, short distance movements +$duration--moderate-02: 240ms; //Expansion, system communication, toast +$duration--slow-01: 400ms; //Large expansion, important system notifications +$duration--slow-02: 700ms; //Background dimming + +// https://www.carbondesignsystem.com/guidelines/motion/basics/#easing +$standard-easing--productive: cubic-bezier(0.2, 0, 0.38, 0.9); +$standard-easing--expressive: cubic-bezier(0.4, 0.14, 0.3, 1); +$entrance-easing--productive: cubic-bezier(0, 0, 0.38, 0.9); +$entrance-easing--expressive: cubic-bezier(0, 0, 0.3, 1); +$exit-easing--productive: cubic-bezier(0.2, 0, 1, 0.9); +$exit-easing--expressive: cubic-bezier(0.4, 0.14, 1, 1); \ No newline at end of file diff --git a/src/assets/styles/bmc/helpers/_variables.scss b/src/assets/styles/bmc/helpers/_variables.scss new file mode 100644 index 00000000..f59cfc1c --- /dev/null +++ b/src/assets/styles/bmc/helpers/_variables.scss @@ -0,0 +1,12 @@ +@import "./colors"; + +// Override Bootstrap Variables - node_modules/Bootstrap/scss/_variables.scss +$enable-rounded: false; +$enable-validation-icons: false; + +// OpenBMC Custom Variables +$responsive-layout-bp: lg; +$header-height: 56px; +$navigation-width: 300px; +$container-bgd: $gray-200; +$primary-nav-hover: $gray-300; \ No newline at end of file diff --git a/src/assets/styles/vendor-overrides/bootstrap/_alert.scss b/src/assets/styles/vendor-overrides/bootstrap/_alert.scss new file mode 100644 index 00000000..0b7b518a --- /dev/null +++ b/src/assets/styles/vendor-overrides/bootstrap/_alert.scss @@ -0,0 +1,64 @@ +.alert { + display: flex; + padding: $spacer; + border-width: 0 0 0 3px; + color: $gray-800; + margin-bottom: $spacer; + + &.small { + padding: $spacer / 2; + font-size: 1rem; + } + + .close { + font-weight: 300; + opacity: 1; + } + + .alert-icon { + display: inline-flex; + align-items: center; + margin-right: $spacer; + margin-bottom: $spacer; + + @include media-breakpoint-up(sm) { + margin-bottom: 0; + } + } + + .alert-content { + flex: 1 1 auto; + } + + .alert-title { + margin-bottom: $spacer / 2; + } + + .alert-msg { + p + p { + margin-bottom: $spacer; + } + + p:last-of-type { + margin-bottom: 0; + } + } + + &.alert-info { + border-left-color: $info; + background-color: $info-light; + fill: $info; + } + + &.alert-danger { + border-left-color: $danger; + background-color: $danger-light; + fill: $danger; + } + + &.alert-warning { + border-left-color: $warning; + background-color: $warning-light; + fill: $warning; + } + } \ No newline at end of file diff --git a/src/assets/styles/vendor-overrides/bootstrap/_badge.scss b/src/assets/styles/vendor-overrides/bootstrap/_badge.scss new file mode 100644 index 00000000..68e7482f --- /dev/null +++ b/src/assets/styles/vendor-overrides/bootstrap/_badge.scss @@ -0,0 +1,19 @@ +.badge-pill { + // Need to explicitly set border-radius + // for pill variant because global $enable-rounded + // Boostrap setting removes rounded pill style + border-radius: 10rem; + fill: currentColor; + font-weight: 400; + .close { + font-size: 1em; + margin-left: $spacer/2; + font-weight: inherit; + color: inherit; + } +} + +.badge-primary { + background-color: $info-light; + color: $info; +} \ No newline at end of file diff --git a/src/assets/styles/vendor-overrides/bootstrap/_bootstrap-grid.scss b/src/assets/styles/vendor-overrides/bootstrap/_bootstrap-grid.scss new file mode 100644 index 00000000..7ad7c81b --- /dev/null +++ b/src/assets/styles/vendor-overrides/bootstrap/_bootstrap-grid.scss @@ -0,0 +1,8 @@ +.container-xl { + // Fluid layout container class sets 100% + // width until xl breakpoint. Once a max-width + // is set, setting the left margin to 0 is needed + // so the content doesn't center align + // https://bootstrap-vue.org/docs/components/layout#fluid-width-container + margin-left: 0; +} \ No newline at end of file diff --git a/src/assets/styles/vendor-overrides/bootstrap/_buttons.scss b/src/assets/styles/vendor-overrides/bootstrap/_buttons.scss new file mode 100644 index 00000000..b9b8073b --- /dev/null +++ b/src/assets/styles/vendor-overrides/bootstrap/_buttons.scss @@ -0,0 +1,43 @@ +.btn { + font-weight: $headings-font-weight; + padding-top: $spacer / 2; + padding-right: $spacer; + padding-bottom: $spacer / 2; + padding-left: $spacer; + + // Buttons with SVGs and text expect + // text to be wrapped in a span element + svg + span { + margin-left: $spacer / 4; + } +} + +.btn-primary { + fill: currentColor; +} + +.btn-secondary { + fill: currentColor; +} + +.btn-link { + fill: $primary; + text-decoration: none !important; + + &:focus { + box-shadow: $btn-focus-box-shadow; + } + &:hover { + fill: darken($primary, 15%); + } +} + +.btn:disabled { + color: $gray-600; + fill: currentColor; + + &:not(.btn-link) { + border-color: $gray-400; + background-color: $gray-400; + } +} \ No newline at end of file diff --git a/src/assets/styles/vendor-overrides/bootstrap/_dropdown.scss b/src/assets/styles/vendor-overrides/bootstrap/_dropdown.scss new file mode 100644 index 00000000..0eb310f6 --- /dev/null +++ b/src/assets/styles/vendor-overrides/bootstrap/_dropdown.scss @@ -0,0 +1,21 @@ +.dropdown-item { + padding-left: $spacer/2; +} + +.b-dropdown-form { + padding: $spacer/2; + .form-group { + margin-bottom: $spacer/2; + } +} + +.table-filter { + // Adding component style to global stylesheet because + // single-file component scoped styles aren't + // being applied to dynamically appended elements + // The overflow menu should be above the table + .dropdown-menu { + z-index: $zindex-dropdown + 1; + padding: 0; + } +} \ No newline at end of file diff --git a/src/assets/styles/vendor-overrides/bootstrap/_forms.scss b/src/assets/styles/vendor-overrides/bootstrap/_forms.scss new file mode 100644 index 00000000..8d3ed9e4 --- /dev/null +++ b/src/assets/styles/vendor-overrides/bootstrap/_forms.scss @@ -0,0 +1,56 @@ +.form-text { + margin-top: -$spacer / 4; + margin-bottom: $spacer / 2; + color: $gray-800; +} + +.col-form-label { + color: $gray-800; + font-size: 14px; +} + +.form-group { + margin-bottom: $spacer * 2; +} + +.custom-select, +.custom-control-label, +.form-control { + //important needed to override validation colors on radio labels + color: $dark !important; + font-size: 16px; + border-color: $gray-400 !important; + &.is-invalid, + &:invalid { + border-bottom: 2px solid $danger !important; + } +} + +.custom-control { + .custom-control-input[disabled=disabled] { + & + .custom-control-label { + // Disabled label for checkbox, radio, + // switch bootstrap form components + color: $gray-700!important; + } + } +} + +.b-form-tag-remove { + // X button to remove tag + font-weight: normal; +} + +.b-form-tags-button { + // Add button inside input field + white-space: nowrap; + margin-right: -$spacer; + &.btn-link-primary { + color: $primary; + fill: currentColor; + } +} + +.form-background { + background-color: $container-bgd; +} \ No newline at end of file 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 00000000..d7634db9 --- /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/vendor-overrides/bootstrap/_modal.scss b/src/assets/styles/vendor-overrides/bootstrap/_modal.scss new file mode 100644 index 00000000..5d3b6014 --- /dev/null +++ b/src/assets/styles/vendor-overrides/bootstrap/_modal.scss @@ -0,0 +1,7 @@ +.modal-header { + .close { + font-weight: normal; + color: $dark; + opacity: 1; + } +} \ No newline at end of file diff --git a/src/assets/styles/vendor-overrides/bootstrap/_tables.scss b/src/assets/styles/vendor-overrides/bootstrap/_tables.scss new file mode 100644 index 00000000..2372d257 --- /dev/null +++ b/src/assets/styles/vendor-overrides/bootstrap/_tables.scss @@ -0,0 +1,22 @@ +table { + position: relative; + z-index: $zindex-dropdown; + .status-icon svg { + width: 1rem; + height: auto; + } +} + +.table-light { + td { + border-top: none; + border-bottom: 1px solid $gray-300; + } +} + +.thead-light.thead-light { + th { + border: none; + color: $dark; + } +} \ No newline at end of file diff --git a/src/assets/styles/vendor-overrides/bootstrap/_toasts.scss b/src/assets/styles/vendor-overrides/bootstrap/_toasts.scss new file mode 100644 index 00000000..9295b17e --- /dev/null +++ b/src/assets/styles/vendor-overrides/bootstrap/_toasts.scss @@ -0,0 +1,44 @@ +.b-toaster { + top: 75px!important; // make sure toasts do not hide top header +} + +.toast { + padding: $spacer/2 $spacer/2 $spacer/2 $spacer; + border-width: 0 0 0 3px; + .close { + font-weight: 300; + opacity: 1; + } +} + +.toast-header { + background-color: inherit!important; //override specificity + border: none; + color: $dark!important; //override specificity + padding-bottom: 0; +} + +.toast-body { + color: $dark; + padding-top: 0; +} + +.b-toast-success .toast { + border-left-color: $success!important; + background-color: $success-light; +} + +.b-toast-info .toast { + border-left-color: $info!important; + background-color: $info-light; +} + +.b-toast-danger .toast { + border-left-color: $danger!important; + background-color: $danger-light; +} + +.b-toast-warning .toast { + border-left-color: $warning!important; + background-color: $warning-light; +} \ No newline at end of file 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 00000000..c10e1f05 --- /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 00000000..1af03449 --- /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 00000000..8341cdc1 --- /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 00000000..1055578b --- /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 00000000..f0b5c44a --- /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 diff --git a/src/components/AppHeader/AppHeader.vue b/src/components/AppHeader/AppHeader.vue index d937293d..2ad208fc 100644 --- a/src/components/AppHeader/AppHeader.vue +++ b/src/components/AppHeader/AppHeader.vue @@ -141,6 +141,8 @@ export default { diff --git a/src/views/Login/Login.vue b/src/views/Login/Login.vue index c15e5f53..d373be22 100644 --- a/src/views/Login/Login.vue +++ b/src/views/Login/Login.vue @@ -145,6 +145,8 @@ export default {