diff options
Diffstat (limited to 'src/assets/styles/vendor-overrides')
10 files changed, 295 insertions, 0 deletions
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 |