diff options
Diffstat (limited to 'src/assets/styles/bmc/custom')
-rw-r--r-- | src/assets/styles/bmc/custom/_alert.scss | 64 | ||||
-rw-r--r-- | src/assets/styles/bmc/custom/_badge.scss | 21 | ||||
-rw-r--r-- | src/assets/styles/bmc/custom/_base.scss | 7 | ||||
-rw-r--r-- | src/assets/styles/bmc/custom/_bootstrap-grid.scss | 8 | ||||
-rw-r--r-- | src/assets/styles/bmc/custom/_buttons.scss | 43 | ||||
-rw-r--r-- | src/assets/styles/bmc/custom/_calendar.scss | 8 | ||||
-rw-r--r-- | src/assets/styles/bmc/custom/_dropdown.scss | 22 | ||||
-rw-r--r-- | src/assets/styles/bmc/custom/_forms.scss | 56 | ||||
-rw-r--r-- | src/assets/styles/bmc/custom/_index.scss | 14 | ||||
-rw-r--r-- | src/assets/styles/bmc/custom/_modal.scss | 7 | ||||
-rw-r--r-- | src/assets/styles/bmc/custom/_pagination.scss | 20 | ||||
-rw-r--r-- | src/assets/styles/bmc/custom/_tables.scss | 63 | ||||
-rw-r--r-- | src/assets/styles/bmc/custom/_toasts.scss | 44 |
13 files changed, 377 insertions, 0 deletions
diff --git a/src/assets/styles/bmc/custom/_alert.scss b/src/assets/styles/bmc/custom/_alert.scss new file mode 100644 index 00000000..0b7b518a --- /dev/null +++ b/src/assets/styles/bmc/custom/_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/bmc/custom/_badge.scss b/src/assets/styles/bmc/custom/_badge.scss new file mode 100644 index 00000000..7acd73a0 --- /dev/null +++ b/src/assets/styles/bmc/custom/_badge.scss @@ -0,0 +1,21 @@ +.badge-pill { + // Need to explicitly set border-radius + // for pill variant because global $enable-rounded + // Bootstrap setting removes rounded pill style + border-radius: 10rem; + fill: currentColor; + font-weight: 400; + line-height: 1.5; + display: inline-flex; + .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/bmc/custom/_base.scss b/src/assets/styles/bmc/custom/_base.scss new file mode 100644 index 00000000..39a4aaa7 --- /dev/null +++ b/src/assets/styles/bmc/custom/_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/custom/_bootstrap-grid.scss b/src/assets/styles/bmc/custom/_bootstrap-grid.scss new file mode 100644 index 00000000..7ad7c81b --- /dev/null +++ b/src/assets/styles/bmc/custom/_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/bmc/custom/_buttons.scss b/src/assets/styles/bmc/custom/_buttons.scss new file mode 100644 index 00000000..b9b8073b --- /dev/null +++ b/src/assets/styles/bmc/custom/_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/bmc/custom/_calendar.scss b/src/assets/styles/bmc/custom/_calendar.scss new file mode 100644 index 00000000..bf7572e2 --- /dev/null +++ b/src/assets/styles/bmc/custom/_calendar.scss @@ -0,0 +1,8 @@ +.b-calendar-nav { + .btn { + &:hover { + background: none; + color: $dark; + } + } +}
\ No newline at end of file diff --git a/src/assets/styles/bmc/custom/_dropdown.scss b/src/assets/styles/bmc/custom/_dropdown.scss new file mode 100644 index 00000000..c7d39548 --- /dev/null +++ b/src/assets/styles/bmc/custom/_dropdown.scss @@ -0,0 +1,22 @@ +.dropdown-item { + padding-left: $spacer/2; +} + +.b-dropdown-form { + padding: $spacer/2; + .form-group { + margin-bottom: $spacer/2; + } +} + +// 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 + +.table-filter { + .dropdown-menu { + z-index: $zindex-dropdown + 1; + padding: 0; + } +}
\ No newline at end of file diff --git a/src/assets/styles/bmc/custom/_forms.scss b/src/assets/styles/bmc/custom/_forms.scss new file mode 100644 index 00000000..8d3ed9e4 --- /dev/null +++ b/src/assets/styles/bmc/custom/_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/bmc/custom/_index.scss b/src/assets/styles/bmc/custom/_index.scss new file mode 100644 index 00000000..0c393c57 --- /dev/null +++ b/src/assets/styles/bmc/custom/_index.scss @@ -0,0 +1,14 @@ +// OpenBMC Global Style Overrides of out of the box +// Bootstrap styles +@import "./alert"; +@import "./badge"; +@import "./base"; +@import "./bootstrap-grid"; +@import "./buttons"; +@import "./calendar"; +@import "./dropdown"; +@import "./forms"; +@import "./modal"; +@import "./pagination"; +@import "./tables"; +@import "./toasts";
\ No newline at end of file diff --git a/src/assets/styles/bmc/custom/_modal.scss b/src/assets/styles/bmc/custom/_modal.scss new file mode 100644 index 00000000..5d3b6014 --- /dev/null +++ b/src/assets/styles/bmc/custom/_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/bmc/custom/_pagination.scss b/src/assets/styles/bmc/custom/_pagination.scss new file mode 100644 index 00000000..4fed21ba --- /dev/null +++ b/src/assets/styles/bmc/custom/_pagination.scss @@ -0,0 +1,20 @@ +.table-pagination-select { + display: flex; + flex-direction: row-reverse; + select { + width: fit-content; + } + label { + margin-left: $spacer; + line-height: $spacer * 2; + } +} + +.b-pagination { + .page-item.active button { + color: $dark; + background-color: $white; + border-color: $border-color; + box-shadow: inset 0px -3px $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 new file mode 100644 index 00000000..b20feb0d --- /dev/null +++ b/src/assets/styles/bmc/custom/_tables.scss @@ -0,0 +1,63 @@ +.table { + position: relative; + z-index: $zindex-dropdown; + + td { + border-top: 1px solid $gray-300; + border-bottom: 1px solid $gray-300; + &:first-of-type { + border-left: 1px solid $gray-300; + } + &:last-of-type { + border-right: 1px solid $gray-300; + } + } + + // thead-light added for specificiy + .thead-light th { + border: none; + color: $dark; + } + + .status-icon svg { + width: 1rem; + height: auto; + } + + .b-table-has-details { + td { + border-bottom: none; + } + .table-row-expand svg { + transform: rotate(180deg); + } + } + + .b-table-details { + background-color: $light; + td { + padding-left: calc(50px + (#{$table-cell-padding} * 2)); + } + dl { + margin: 0; + } + dt { + display: inline-block; + margin-right: $spacer / 2; + } + dd { + display: inline-block; + } + } + + .table-row-expand { + width: 50px; + .btn { + padding: 0; + width: 50px; + } + svg { + fill: $dark; + } + } +}
\ No newline at end of file diff --git a/src/assets/styles/bmc/custom/_toasts.scss b/src/assets/styles/bmc/custom/_toasts.scss new file mode 100644 index 00000000..9295b17e --- /dev/null +++ b/src/assets/styles/bmc/custom/_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 |