From 3f4094d08b873e17464a51c817ea7d41177f848d Mon Sep 17 00:00:00 2001 From: "Andrey V.Kosteltsev" Date: Mon, 4 Jul 2022 23:11:28 +0300 Subject: IBS: _ibs UI Theme --- src/assets/images/_ibs/login-aside-vector.svg | 8 + src/assets/images/_ibs/login-company-logo.svg | 16 ++ src/assets/images/_ibs/login-main-vector.svg | 8 + src/assets/images/_ibs/logo-header.svg | 16 ++ src/assets/styles/_obmc-ibs.scss | 6 + src/assets/styles/bmc/_ibs/_alert.scss | 70 +++++++ src/assets/styles/bmc/_ibs/_badge.scss | 21 +++ src/assets/styles/bmc/_ibs/_base.scss | 102 ++++++++++ src/assets/styles/bmc/_ibs/_bootstrap-grid.scss | 28 +++ src/assets/styles/bmc/_ibs/_buttons.scss | 174 +++++++++++++++++ src/assets/styles/bmc/_ibs/_calendar.scss | 17 ++ src/assets/styles/bmc/_ibs/_card.scss | 37 ++++ src/assets/styles/bmc/_ibs/_dropdown.scss | 49 +++++ src/assets/styles/bmc/_ibs/_forms.scss | 210 +++++++++++++++++++++ src/assets/styles/bmc/_ibs/_index.scss | 24 +++ src/assets/styles/bmc/_ibs/_kvm.scss | 12 ++ src/assets/styles/bmc/_ibs/_modal.scss | 12 ++ src/assets/styles/bmc/_ibs/_pagination.scss | 24 +++ src/assets/styles/bmc/_ibs/_section-divider.scss | 3 + src/assets/styles/bmc/_ibs/_sol.scss | 3 + src/assets/styles/bmc/_ibs/_tables.scss | 188 ++++++++++++++++++ src/assets/styles/bmc/_ibs/_toasts.scss | 61 ++++++ src/assets/styles/bmc/_ibs/pages/_firmware.scss | 13 ++ src/assets/styles/bmc/_ibs/pages/_inventory.scss | 9 + src/assets/styles/bmc/_ibs/pages/_login.scss | 23 +++ .../styles/bmc/_ibs/pages/_power-operations.scss | 9 + src/assets/styles/bmc/_ibs/pages/_security.scss | 9 + .../styles/bmc/_ibs/pages/_virtual-media.scss | 47 +++++ 28 files changed, 1199 insertions(+) create mode 100644 src/assets/images/_ibs/login-aside-vector.svg create mode 100644 src/assets/images/_ibs/login-company-logo.svg create mode 100644 src/assets/images/_ibs/login-main-vector.svg create mode 100644 src/assets/images/_ibs/logo-header.svg create mode 100644 src/assets/styles/_obmc-ibs.scss create mode 100644 src/assets/styles/bmc/_ibs/_alert.scss create mode 100644 src/assets/styles/bmc/_ibs/_badge.scss create mode 100644 src/assets/styles/bmc/_ibs/_base.scss create mode 100644 src/assets/styles/bmc/_ibs/_bootstrap-grid.scss create mode 100644 src/assets/styles/bmc/_ibs/_buttons.scss create mode 100644 src/assets/styles/bmc/_ibs/_calendar.scss create mode 100644 src/assets/styles/bmc/_ibs/_card.scss create mode 100644 src/assets/styles/bmc/_ibs/_dropdown.scss create mode 100644 src/assets/styles/bmc/_ibs/_forms.scss create mode 100644 src/assets/styles/bmc/_ibs/_index.scss create mode 100644 src/assets/styles/bmc/_ibs/_kvm.scss create mode 100644 src/assets/styles/bmc/_ibs/_modal.scss create mode 100644 src/assets/styles/bmc/_ibs/_pagination.scss create mode 100644 src/assets/styles/bmc/_ibs/_section-divider.scss create mode 100644 src/assets/styles/bmc/_ibs/_sol.scss create mode 100644 src/assets/styles/bmc/_ibs/_tables.scss create mode 100644 src/assets/styles/bmc/_ibs/_toasts.scss create mode 100644 src/assets/styles/bmc/_ibs/pages/_firmware.scss create mode 100644 src/assets/styles/bmc/_ibs/pages/_inventory.scss create mode 100644 src/assets/styles/bmc/_ibs/pages/_login.scss create mode 100644 src/assets/styles/bmc/_ibs/pages/_power-operations.scss create mode 100644 src/assets/styles/bmc/_ibs/pages/_security.scss create mode 100644 src/assets/styles/bmc/_ibs/pages/_virtual-media.scss (limited to 'src/assets') diff --git a/src/assets/images/_ibs/login-aside-vector.svg b/src/assets/images/_ibs/login-aside-vector.svg new file mode 100644 index 00000000..8d1c1731 --- /dev/null +++ b/src/assets/images/_ibs/login-aside-vector.svg @@ -0,0 +1,8 @@ + + + + diff --git a/src/assets/images/_ibs/login-company-logo.svg b/src/assets/images/_ibs/login-company-logo.svg new file mode 100644 index 00000000..57d11ff4 --- /dev/null +++ b/src/assets/images/_ibs/login-company-logo.svg @@ -0,0 +1,16 @@ + + + + + + + + + + diff --git a/src/assets/images/_ibs/login-main-vector.svg b/src/assets/images/_ibs/login-main-vector.svg new file mode 100644 index 00000000..69d2dd75 --- /dev/null +++ b/src/assets/images/_ibs/login-main-vector.svg @@ -0,0 +1,8 @@ + + + + diff --git a/src/assets/images/_ibs/logo-header.svg b/src/assets/images/_ibs/logo-header.svg new file mode 100644 index 00000000..3ba2b022 --- /dev/null +++ b/src/assets/images/_ibs/logo-header.svg @@ -0,0 +1,16 @@ + + + + + + + + + + diff --git a/src/assets/styles/_obmc-ibs.scss b/src/assets/styles/_obmc-ibs.scss new file mode 100644 index 00000000..eb22535d --- /dev/null +++ b/src/assets/styles/_obmc-ibs.scss @@ -0,0 +1,6 @@ +// Vendor styles +@import "./bootstrap"; +@import "~bootstrap-vue/src/index"; + +// IBS BMC styles +@import "./bmc/_ibs"; diff --git a/src/assets/styles/bmc/_ibs/_alert.scss b/src/assets/styles/bmc/_ibs/_alert.scss new file mode 100644 index 00000000..d85e9127 --- /dev/null +++ b/src/assets/styles/bmc/_ibs/_alert.scss @@ -0,0 +1,70 @@ +.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: flex-start; + 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: theme-color("info"); + background-color: theme-color-light("info"); + fill: theme-color("info"); + } + + &.alert-success { + border-left-color: theme-color("success"); + background-color: theme-color-light("success"); + fill: theme-color("success"); + } + + &.alert-danger { + border-left-color: theme-color("danger"); + background-color: theme-color-light("danger"); + fill: theme-color("danger"); + } + + &.alert-warning { + border-left-color: theme-color("warning"); + background-color: theme-color-light("warning"); + fill: theme-color("warning"); + } +} diff --git a/src/assets/styles/bmc/_ibs/_badge.scss b/src/assets/styles/bmc/_ibs/_badge.scss new file mode 100644 index 00000000..7d59e9a6 --- /dev/null +++ b/src/assets/styles/bmc/_ibs/_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: theme-color-light("info"); + color: theme-color("info"); +} diff --git a/src/assets/styles/bmc/_ibs/_base.scss b/src/assets/styles/bmc/_ibs/_base.scss new file mode 100644 index 00000000..40806995 --- /dev/null +++ b/src/assets/styles/bmc/_ibs/_base.scss @@ -0,0 +1,102 @@ + +// +// Scrollbars: +// +/* W3C standard: Firefox only */ +* { + scrollbar-width: thin; + scrollbar-color: rgba(12,32,64,.7) transparent; +} + +/* For Chrome/Edge/Safari */ +*::-webkit-scrollbar { + height: 3px; + width: 3px; +} + +*::-webkit-scrollbar-track { + background: transparent; +} + +*::-webkit-scrollbar-thumb { + background-color: rgba(12,32,64,.7); + border-radius: 2px; + border: 2px solid transparent; +} + +// +// Headers: +// +h1, +.h1 { + font-size: 2.25rem !important; + font-weight: 500; + line-height: 1.2; +} + +h2, +.h2 { + font-size: 1.5rem !important; + font-weight: 500; + line-height: 1.2; +} + +h3, +.h3 { + font-size: 1.5rem !important; + font-weight: 400; + line-height: 1.2; +} + +h4, +.h4 { + font-size: 1.25rem !important; + font-weight: 400; + line-height: 1.2; +} + +h5, +.h5 { + font-size: 1rem !important; + font-weight: 500; + line-height: 1.2; +} + +h6, +.h6 { + font-size: 0.825rem !important; + font-weight: 500; + line-height: 1.2; +} + + +.navbar-brand { + font-size: 1.4rem !important; +} + +.nav-link--current{ + background-color: $red-light-background !important; + color: $red !important; + &:hover, + &:focus { + background-color: $red-light-background !important; + color: $red !important; + } +} + +.btn-link:active, .nav-link:active { + background-color: $red-light-background !important; + color: $red !important; +} + +.app-header .navbar-text, .app-header .nav-link, .app-header .btn-link { + &:hover { + background-color: $red-40 !important; + } + &:active { + background-color: $red-active !important; + } + &:focus { + outline: 0; + } +} diff --git a/src/assets/styles/bmc/_ibs/_bootstrap-grid.scss b/src/assets/styles/bmc/_ibs/_bootstrap-grid.scss new file mode 100644 index 00000000..87332f4b --- /dev/null +++ b/src/assets/styles/bmc/_ibs/_bootstrap-grid.scss @@ -0,0 +1,28 @@ +.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; +} + +@media (min-width: 1200px) { + .container-xl { + max-width: unset !important; + } + .col-md-9, + .col-xl-9, + .col-xl-10, + .col-xl-11 { + flex: 0 0 100%; + max-width: unset !important; + } +} + +@media (min-width: 768px) { + .col-md-9 { + flex: 0 0 100%; + max-width: unset !important; + } +} diff --git a/src/assets/styles/bmc/_ibs/_buttons.scss b/src/assets/styles/bmc/_ibs/_buttons.scss new file mode 100644 index 00000000..b3a69757 --- /dev/null +++ b/src/assets/styles/bmc/_ibs/_buttons.scss @@ -0,0 +1,174 @@ +.btn { + padding-top: $spacer / 2; + padding-right: $spacer; + padding-bottom: $spacer / 2; + padding-left: $spacer; + display: inline-flex; + align-items: center; + justify-content: space-around; + svg { + margin-right: $spacer / 4; + } + &:disabled { + color: $red; + fill: currentColor; + box-shadow: none !important; + &:not(.btn-link) { + border-color: gray("400"); + background-color: gray("400"); + } + } +} + +.btn-primary { + background-color: $red; + border-radius: $border-radius; + border: none; + box-shadow: 1px 2px 2px -1px #4f252566 inset; + &:hover { + background-color: $red-hover; + } + &:not(:disabled):not(.disabled):active:focus, + &:focus-visible { + border: none; + box-shadow: none; + background-color: $red-click; + } + &:focus { + border: none; + box-shadow: 0px 0px 0px 4px $red-shadow; + background-color: $red; + } + &:active { + border: none; + box-shadow: none; + background-color: $red; + } +} + +.btn-secondary { + background-color: $dark; + color: $gray-2; + border-radius: $border-radius; + border: none; + box-shadow: 1px 2px 4px -1px rgb(79 37 37 / 10%) inset; + font-style: normal; + font-weight: 600; + font-size: 16px; + line-height: 20px; + &:hover { + background-color: $dark-hover; + color: $gray-2; + } + &:focus { + border: none; + box-shadow: 0px 0px 0px 4px $red-shadow; + color: $gray-2; + background-color: $dark; + } + &:not(:disabled):not(.disabled):active:focus, + &:focus-visible { + border: none; + box-shadow: none; + color: $gray-2; + background-color: $dark; + } +} + +.btn-unstiled { + border: none; + &:focus { + box-shadow: none; + } + &:active { + box-shadow: none; + } +} + +.btn-popover { + border: none; + color: $red; + height: 28px; + border-radius: $border-radius; + font-weight: 500; + font-size: 12px; + transition: ease-in 0.2s; + &:hover { + color: $white; + transition: ease-in 0.2s; + } + &:focus { + box-shadow: none; + } + &:active { + box-shadow: none; + } + &.selected-unit-button { + transition: ease-in 0.2s; + color: $white; + } + &.selected-choice-button { + transition: ease-in 0.2s; + color: $white; + } +} + +.btn-toogle-popover { + justify-content: flex-start; + width: 25px; + height: 16px; + padding: 0; + &:focus { + box-shadow: none; + } + &:active { + box-shadow: none; + } +} + +// Global style for all button link +.btn-link { + color: $text-primary; + text-decoration: none !important; + &:hover { + background-color: gray("200"); + color: theme-color("primary"); + } + &:active { + background-color: gray("300"); + } + &:disabled { + box-shadow: $btn-focus-box-shadow; + } + &.collapsed { + .icon-expand { + transform: rotate(180deg); + transition: 0.3s linear; + } + .icon-expand-right { + transform: rotate(180deg); + transition: 0.3s linear; + } + } +} + +// Icon only buttons +.btn-icon-only svg { + margin-right: 0; +} + +// Datepicker, clear search and Password toggle buttons +.input-action-btn, +.btn-datepicker { + position: absolute; + right: 0; + top: 0; + z-index: $zindex-dropdown + 1; +} + +// Contain input buttons within input +.btn-datepicker .dropdown-toggle, +.input-action-btn { + padding: 6px; + margin: 1px; +} diff --git a/src/assets/styles/bmc/_ibs/_calendar.scss b/src/assets/styles/bmc/_ibs/_calendar.scss new file mode 100644 index 00000000..9a53169d --- /dev/null +++ b/src/assets/styles/bmc/_ibs/_calendar.scss @@ -0,0 +1,17 @@ +.b-calendar-nav { + .btn { + &:hover { + background: none; + color: theme-color("dark"); + } + } +} + +.b-calendar-grid .btn { + display: inline-block; +} + +// Date picker focus +.b-calendar .b-calendar-grid { + padding: 6px 12px; +} diff --git a/src/assets/styles/bmc/_ibs/_card.scss b/src/assets/styles/bmc/_ibs/_card.scss new file mode 100644 index 00000000..d7ac04d2 --- /dev/null +++ b/src/assets/styles/bmc/_ibs/_card.scss @@ -0,0 +1,37 @@ +.card { + border-radius: $border-radius; + .bg-success { + background-color: theme-color-light('success')!important; + } +} + +.card-header { + .card-header-tabs { + border: none !important; + + .nav-link { + border: none !important; + color: $text-secondary; + font-weight: 500 !important; + background: none !important; + &:hover { + color: $red-hover + } + } + + .nav-link.active { + color: $red-active !important; + text-decoration: underline; + } + } +} + +.card-body dd .status-icon { + line-height: 1.1; +} + +.card-buttons > a { + font-weight: 500; + font-size: .825rem; + vertical-align: baseline; +} diff --git a/src/assets/styles/bmc/_ibs/_dropdown.scss b/src/assets/styles/bmc/_ibs/_dropdown.scss new file mode 100644 index 00000000..02e4e855 --- /dev/null +++ b/src/assets/styles/bmc/_ibs/_dropdown.scss @@ -0,0 +1,49 @@ +// Make calendar visible over the table +.dropdown-menu { + z-index: $zindex-dropdown + 1; + padding: $spacer / 2; + border-radius: $border-radius; +} + +.dropdown-item { + padding: $spacer / 4 $spacer / 2; + margin: $spacer / 4; + width: auto; + border-radius: $border-radius; + &:hover { + background-color: $red-hover; + color: $white; + } + &:active { + background-color: $red-active; + } + &:focus { + outline: none; + background-color: $red-click; + box-shadow: inset 0 0 0 2px theme-color("primary"); + } +} + +.b-dropdown-form { + padding: $spacer/2; + .form-group { + margin-bottom: $spacer/2; + } +} + +// Table filter dropdown clear button style +.table-filter { + .dropdown-item { + &:hover { + background-color: gray("200"); + } + &:active { + background-color: gray("300"); + } + &:focus { + outline: none; + background-color: transparent; + box-shadow: inset 0 0 0 2px theme-color("primary"); + } + } +} diff --git a/src/assets/styles/bmc/_ibs/_forms.scss b/src/assets/styles/bmc/_ibs/_forms.scss new file mode 100644 index 00000000..914bf379 --- /dev/null +++ b/src/assets/styles/bmc/_ibs/_forms.scss @@ -0,0 +1,210 @@ +// Helper text +.form-text { + font-size: $form-label-font-size; + line-height: $form-line-height; + margin-top: -$spacer / 4; + margin-bottom: $spacer / 2; + color: gray("700")!important; +} + +// Legend label +.col-form-label { + color: gray("800"); + font-size: $form-label-font-size; + line-height: $form-line-height; +} + +.form-group { + margin-bottom: $spacer * 2; +} + +.custom-select, +.form-control, +.input-group-text { + border-radius: $border-radius; + background-color: $white; +} + +.custom-select, +.form-control { + &:disabled { + background-color: gray("400"); + color: gray("600"); + } + &::placeholder { + color: gray("600"); + } + &.is-invalid, + &:invalid { + border: 1px solid theme-color("danger") !important; + } +} + +.form-control::-webkit-outer-spin-button, +.form-control::-webkit-inner-spin-button { + -webkit-appearance: none; + margin: 0; +} +.form-control[type='number'] { + -moz-appearance: textfield; +} + +.form-control { + color: $text-secondary; + border-radius: $border-radius; + border: none; + background-color: $gray-5; + font-size: 0.875rem; + &:focus { + color: $text-secondary; + } + &:hover { + background-color: $gray-5-hover; + } +} + +// Inverted form colors +.form-background { + background-color: none; + padding: 0 !important; + .custom-select, + .form-control { + color: #0c1c29e6; + border-radius: $border-radius; + border: none; + background-color: $gray-5; + &:hover { + background-color: $gray-5-hover; + } + &:focus { + border: 1px solid gray("400"); + } + &:disabled { + background-color: gray("400"); + color: gray("600"); + } + &.is-valid { + border: 1px solid gray("400"); + } + } +} + +.invalid-feedback { + font-size: $form-label-font-size; + line-height: $form-line-height; +} + +.custom-checkbox ::before { + box-shadow: none !important; + border: 2px solid $on-surface-secondary; + background-color: #fff; + border-radius: 3px; +} + +.custom-checkbox .custom-control-input:checked ~ .custom-control-label::after, +.custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::before, +.custom-control-input:checked ~ .custom-control-label::before { + background-color: $red; + border-color: $red; + cursor: pointer; + &:focus { + box-shadow: none !important; + } +} + +.custom-control { + .custom-control-input[disabled=disabled] { + & + .custom-control-label { + // Disabled label for checkbox, radio, + // switch bootstrap form components + color: gray("600")!important; + } + } +} + +.custom-switch { + width: 28px; + height: 16px; +} + +.custom-switch +.custom-control-input:focus ~ .custom-control-label::before { + box-shadow: none; +} + +.custom-switch +.custom-control-input ~ .custom-control-label::after { + border: 1px solid $gray-20; + background: $white; +} + +.custom-control-input:focus:not(:checked) ~ .custom-control-label::before { + border-color: $gray-20; +} + +.custom-control-input:not(:disabled):active ~ .custom-control-label::before { + background-color: rgba(4, 10, 15, 0.3); + border-color: $gray-20; +} + +.custom-switch +.custom-control-input ~ .custom-control-label::before { + border: 1px solid $gray-20; + background: rgba(4, 10, 15, 0.3); +} + +.custom-control-label::after { + cursor: pointer; +} + +.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: theme-color("primary"); + fill: currentColor; + } +} + +// Form validation icon + .form-control.is-invalid, + .form-control.is-valid { + background-position: right 1rem bottom 50%; + } + +// Form validation icon with datepicker or password toggle icon +.form-control-with-button { + &.is-invalid, + &.is-valid { + background-position: right 3rem bottom 50%; + } +} +// For invisible label of fields +.invisible { + height: 0; + margin-bottom: 0; +} +// Global style progress bar +.progress { + height: 8px; + background-color: $gray-10; +} + +.progress-bar { + background-color: $red; + border-radius: 4px; +} + +.progress_bar_percent { + color: $red; +} + +.system-control__radio label { + padding-top: 4px; +} diff --git a/src/assets/styles/bmc/_ibs/_index.scss b/src/assets/styles/bmc/_ibs/_index.scss new file mode 100644 index 00000000..14c85d70 --- /dev/null +++ b/src/assets/styles/bmc/_ibs/_index.scss @@ -0,0 +1,24 @@ +// 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 "./card"; +@import "./dropdown"; +@import "./forms"; +@import "./kvm"; +@import "./modal"; +@import "./pagination"; +@import "./section-divider"; +@import "./sol"; +@import "./tables"; +@import "./toasts"; +@import "./pages/login"; +@import "./pages/virtual-media"; +@import "./pages/firmware"; +@import "./pages/inventory"; +@import "./pages/power-operations"; +@import "./pages/security"; diff --git a/src/assets/styles/bmc/_ibs/_kvm.scss b/src/assets/styles/bmc/_ibs/_kvm.scss new file mode 100644 index 00000000..8276b8ea --- /dev/null +++ b/src/assets/styles/bmc/_ibs/_kvm.scss @@ -0,0 +1,12 @@ +#terminal-kvm { + height: calc(100vh - 300px); + display: flex; + &.full-window { + height: calc(100vh - 80px); + } + div:nth-child(1) { + background: transparent !important; + display: block !important; + overflow: hidden !important; + } +} diff --git a/src/assets/styles/bmc/_ibs/_modal.scss b/src/assets/styles/bmc/_ibs/_modal.scss new file mode 100644 index 00000000..e2fa0cd8 --- /dev/null +++ b/src/assets/styles/bmc/_ibs/_modal.scss @@ -0,0 +1,12 @@ +.modal-header { + .close { + font-weight: normal; + color: theme-color("dark"); + opacity: 1; + } + .modal-title { + font-size: 1.25rem; + font-weight: normal; + line-height: 1.3; + } +} diff --git a/src/assets/styles/bmc/_ibs/_pagination.scss b/src/assets/styles/bmc/_ibs/_pagination.scss new file mode 100644 index 00000000..97fe0132 --- /dev/null +++ b/src/assets/styles/bmc/_ibs/_pagination.scss @@ -0,0 +1,24 @@ +.table-pagination-select { + display: flex; + flex-direction: row-reverse; + justify-content: flex-end; + select { + width: fit-content; + } + label { + margin-left: $spacer; + line-height: $spacer * 2; + } +} + +.b-pagination { + @include media-breakpoint-up(sm) { + justify-content: flex-end; + } + .page-item.active button { + color: theme-color("dark"); + background-color: color("white"); + border-color: $border-color; + box-shadow: inset 0px -3px theme-color("primary"); + } +} diff --git a/src/assets/styles/bmc/_ibs/_section-divider.scss b/src/assets/styles/bmc/_ibs/_section-divider.scss new file mode 100644 index 00000000..bca2d77e --- /dev/null +++ b/src/assets/styles/bmc/_ibs/_section-divider.scss @@ -0,0 +1,3 @@ +.section-divider { + border-bottom: 1px solid gray('400'); +} diff --git a/src/assets/styles/bmc/_ibs/_sol.scss b/src/assets/styles/bmc/_ibs/_sol.scss new file mode 100644 index 00000000..3641c040 --- /dev/null +++ b/src/assets/styles/bmc/_ibs/_sol.scss @@ -0,0 +1,3 @@ +#terminal .xterm .xterm-viewport { + overflow: auto; +} diff --git a/src/assets/styles/bmc/_ibs/_tables.scss b/src/assets/styles/bmc/_ibs/_tables.scss new file mode 100644 index 00000000..d73bfdde --- /dev/null +++ b/src/assets/styles/bmc/_ibs/_tables.scss @@ -0,0 +1,188 @@ +.table { + position: relative; + z-index: $zindex-dropdown; + + td { + border-top: 1px solid $gray-10; + border-right: 1px solid $gray-10; + border-bottom-width: 0px; + &:first-of-type { + border-right: 1px solid $gray-10; + } + &:last-of-type { + border-left: 1px solid $gray-10; + border-right-width: 0px; + } + vertical-align: middle; + font-size: 0.875rem; + // Table action buttons + .btn-link { + width: 40px; + height: 40px; + padding: 5px !important; + display: inline-flex; + justify-content: center; + align-items: center; + } + } + + // thead-light added for specificity + .thead-light th { + background-color: $surface-secondary; + vertical-align: middle; + border-top-width: 0px; + border-bottom: 1px solid $gray-10; + border-right: 1px solid $gray-10; + &:first-of-type { + border-right: 1px solid $gray-10; + } + &:last-of-type { + border-left: 1px solid $gray-10; + border-right-width: 0px; + } + text-transform: uppercase; + color: $text-primary; + &:focus { + outline: none; + } + & > div { + font-size: 0.875rem !important; + } + } + + .custom-switch { + width: 100%; + } + + .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 { + border-top: 1px solid rgba(26,62,91,.3); + background-color: inherit; + td { + padding-left: $table-cell-padding; + padding-right: $table-cell-padding; + } + dl { + margin: 0; + } + dt { + font-size: 0.75rem !important; + float: left; + clear: left; + margin-right: $spacer / 2; + } + dd { + font-size: 0.75rem !important; + line-height: 1.5 + } + } + + .table-row-expand { + width: 50px; + .btn { + padding: 0; + width: 40px; + } + svg { + fill: theme-color("dark"); + } + } + + .b-table-sort-icon-left { + background-position: left calc(1.5rem / 2) center !important; + padding-left: calc(1.2rem + 0.65em) !important; + &:focus { + outline: none; + box-shadow: inset 0 0 0 2px theme-color('primary') !important; + } + &:hover { + background-color: theme-color-dark('light'); + } + } +} + +.b-table-sticky-header td { + border-top: none; +} + +// Table stacked style for small screen only +@include media-breakpoint-down(xs) { + .b-table-stacked-sm { + border: 1px solid $gray-10; + + tr { + + &:not(:first-child) > td[aria-colindex='1'] { + border-top: 1px solid $gray-10; + padding-top: 0.625rem; + } + + &:not(.b-table-empty-row) { + position: relative; // Restrict background color to get zebra striping for the row + + &::before, + &::after { + position: absolute; + top: 0; + height: 100%; + z-index: -1; + } + + &:before { + content: ''; + background-color: gray("200"); + width: 40%; + border-right: 1px solid gray("300"); + } + + &:after { + content: ''; + right: 0; + width: 60%; + } + + &:nth-child(even)::after { + background-color: gray("100"); // Zebra striping for the row + } + } + + td { + border: 0; + padding: 0.75rem; + text-align: left !important; + + &:last-of-type { + border-right: 0; + } + } + } + } + + .table.b-table.b-table-stacked-sm > tbody > tr > [data-label] { + &::before { + text-align: left; + padding-left: $spacer / 2; + } + + > div { + padding-left: 1rem; + } + } +} + +.table-responsive, .table-responsive-md { + margin-top: 0.5rem; +} diff --git a/src/assets/styles/bmc/_ibs/_toasts.scss b/src/assets/styles/bmc/_ibs/_toasts.scss new file mode 100644 index 00000000..482765ce --- /dev/null +++ b/src/assets/styles/bmc/_ibs/_toasts.scss @@ -0,0 +1,61 @@ +.b-toaster { + top: 75px!important; // make sure toasts do not hide top header +} + +// Toast component and status icon style +.toast { + padding: $spacer/2 $spacer/2 $spacer/2 $spacer+2; + border-width: 0 0 0 3px; + box-shadow: $box-shadow; + .close { + font-weight: 300; + opacity: 1; + } +} + +.toast-header { + display: flex; + align-items: flex-start; + background-color: inherit!important; //override specificity + border: none; + color: theme-color("dark")!important; //override specificity + padding-bottom: 0; +} + +.toast-icon { + display: flex; + margin-right: 1rem; + + svg { + margin-left: -2.5rem; + } + + + .close { + line-height: .9; + } +} + +.toast-body { + color: theme-color("dark"); + padding-top: 0; +} + +.b-toast-success .toast { + border-left-color: theme-color("success")!important; + background-color: theme-color-light("success")!important; +} + +.b-toast-info .toast { + border-left-color: theme-color("info")!important; + background-color: theme-color-light("info")!important; +} + +.b-toast-danger .toast { + border-left-color: theme-color("danger")!important; + background-color: theme-color-light("danger")!important; +} + +.b-toast-warning .toast { + border-left-color: theme-color("warning")!important; + background-color: theme-color-light("warning")!important; +} diff --git a/src/assets/styles/bmc/_ibs/pages/_firmware.scss b/src/assets/styles/bmc/_ibs/pages/_firmware.scss new file mode 100644 index 00000000..de65dc10 --- /dev/null +++ b/src/assets/styles/bmc/_ibs/pages/_firmware.scss @@ -0,0 +1,13 @@ + +// +// Firmware Update: +// +.firmware-update .btn, +.firmware-update label { + width: 100%; +} +.firmware-update .form-background { + padding: $spacer * 2 !important; + border-radius: $border-radius; + background-color: $surface-secondary !important; +} diff --git a/src/assets/styles/bmc/_ibs/pages/_inventory.scss b/src/assets/styles/bmc/_ibs/pages/_inventory.scss new file mode 100644 index 00000000..6f065ad4 --- /dev/null +++ b/src/assets/styles/bmc/_ibs/pages/_inventory.scss @@ -0,0 +1,9 @@ + +// +// Service Indicators: +// +.service-indicators .form-background { + padding: $spacer * 2 !important; + border-radius: $border-radius; + background-color: $surface-secondary !important; +} diff --git a/src/assets/styles/bmc/_ibs/pages/_login.scss b/src/assets/styles/bmc/_ibs/pages/_login.scss new file mode 100644 index 00000000..cd7ef538 --- /dev/null +++ b/src/assets/styles/bmc/_ibs/pages/_login.scss @@ -0,0 +1,23 @@ + +// +// Login Page: +// +.login-form { + background-color: transparent !important; +} + +.login-form > .btn-primary { + width: 100%; + margin-top: 2rem !important; +} + +.login-main .h3 { + font-weight: 400 !important; + font-size: 1.6rem !important; +} + +@media (max-width: 768px) { + .login-brand { + margin-top: 1rem; + } +} diff --git a/src/assets/styles/bmc/_ibs/pages/_power-operations.scss b/src/assets/styles/bmc/_ibs/pages/_power-operations.scss new file mode 100644 index 00000000..0921323e --- /dev/null +++ b/src/assets/styles/bmc/_ibs/pages/_power-operations.scss @@ -0,0 +1,9 @@ + +// +// Power Operations: +// +.boot-settings .form-background { + padding: $spacer * 2 $spacer * 2 $spacer !important; + border-radius: $border-radius; + background-color: $surface-secondary !important; +} diff --git a/src/assets/styles/bmc/_ibs/pages/_security.scss b/src/assets/styles/bmc/_ibs/pages/_security.scss new file mode 100644 index 00000000..45473a53 --- /dev/null +++ b/src/assets/styles/bmc/_ibs/pages/_security.scss @@ -0,0 +1,9 @@ + +// +// Security and Access: +// +.ldap-settings .form-background { + padding: $spacer * 2 $spacer * 2 $spacer !important; + border-radius: $border-radius; + background-color: $surface-secondary !important; +} diff --git a/src/assets/styles/bmc/_ibs/pages/_virtual-media.scss b/src/assets/styles/bmc/_ibs/pages/_virtual-media.scss new file mode 100644 index 00000000..040e57b1 --- /dev/null +++ b/src/assets/styles/bmc/_ibs/pages/_virtual-media.scss @@ -0,0 +1,47 @@ + +// +// Media +// +.media-start { + margin-top: $spacer * 2; +} + +.media-buttons-group >.media-start label { + width: 100%; +} + +.media-buttons-group >.media-start .btn { + width: 50%; +} + +.media-buttons-group >.media-stop > .btn { + width: 50%; +} + + +// +// Media Legacy +// +.media-legacy label { + margin-top: $spacer * 2; +} + +.media-legacy-buttons-group { + margin: 0px; +} + +.media-legacy-buttons-group .btn { + width: 100%; +} + +.media-legacy-buttons-group > .media-legacy-configure { + display: block; + width: 50%; + margin-bottom: $spacer * 2; +} + +.media-legacy-buttons-group > .media-legacy-start { + display: inline-block; + width: 50%; + margin-bottom: - $spacer * 2; +} -- cgit v1.2.3