diff options
Diffstat (limited to 'src/assets/styles')
25 files changed, 1858 insertions, 0 deletions
diff --git a/src/assets/styles/_obmc-sila.scss b/src/assets/styles/_obmc-sila.scss index ea2507f0..1f8bc62b 100644 --- a/src/assets/styles/_obmc-sila.scss +++ b/src/assets/styles/_obmc-sila.scss @@ -4,3 +4,5 @@ // IBS BMC styles @import "./bmc/_sila"; +@import "./bmc/_sila/helpers"; +@import "./bmc/_sila/custom"; diff --git a/src/assets/styles/bmc/_sila/custom/_alert.scss b/src/assets/styles/bmc/_sila/custom/_alert.scss new file mode 100644 index 00000000..0e78ba64 --- /dev/null +++ b/src/assets/styles/bmc/_sila/custom/_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"); + } + }
\ No newline at end of file diff --git a/src/assets/styles/bmc/_sila/custom/_badge.scss b/src/assets/styles/bmc/_sila/custom/_badge.scss new file mode 100644 index 00000000..0b88b499 --- /dev/null +++ b/src/assets/styles/bmc/_sila/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: theme-color-light("info"); + color: theme-color("info"); +}
\ No newline at end of file diff --git a/src/assets/styles/bmc/_sila/custom/_base.scss b/src/assets/styles/bmc/_sila/custom/_base.scss new file mode 100644 index 00000000..1e3abf71 --- /dev/null +++ b/src/assets/styles/bmc/_sila/custom/_base.scss @@ -0,0 +1,295 @@ +body { + overflow-y: hidden; +} + +.scroll-container { + overflow-y: overlay; + height: calc(100vh - #{$header-height}); + &::-webkit-scrollbar { + margin-top: $header-height; + position: absolute; + width: 10px; + } + &::-webkit-scrollbar-thumb { + margin-top: $header-height; + border: 4px solid transparent; + background: $faint-secondary-primary-20; + border-radius: 16px; + background-clip: content-box; + } +} + +@-moz-document url-prefix() { + #logs-table-wrapper div, + #table-event-logs div, + .scroll-container, + .nav-container { + overflow-y: auto; + scrollbar-width: thin; + scrollbar-color: $faint-secondary-primary-20 transparent; +} +} + +.pointer { + cursor: pointer; +} + +.icon-edit, +.icon-options { + display: block; + margin: 2px 12px 0 auto; + cursor: pointer; +} + +h3, +.h3 { + font-size: 1.75rem; + font-weight: 400; + line-height: 1.2857; +} + +h4, +.h4 { + font-size: 1.25rem; + font-weight: 400; + line-height: 1.3; +} + +h5, +.h5 { + font-size: 1rem; + font-weight: 500; + line-height: 1.375; +} + +h6, +.h6 { + font-size: 0.875rem; + font-weight: 500; + line-height: 1.2857; +} + +.regular-12px { + font-family: 'Inter', sans-serif; + font-size: 12px; + font-style: normal; + font-weight: 400; + line-height: 16px; + letter-spacing: 0em; + text-align: left; + color: $text-primary; + &.red { + color: $red-brand-primary + } + &.underline { + text-decoration: underline; + cursor: pointer; + } + &.tretiatry { + color: $text-tretiatry; + } + &.quaternary { + color: $text-quaternary; + } +} + +.light-12px { + font-family: 'Inter', sans-serif; + font-size: 12px; + font-style: normal; + font-weight: 300; + line-height: 16px; + letter-spacing: 0em; + text-align: left; + color: $text-secondary; +} + +.caption-12px { + font-family: 'Inter', sans-serif; + font-size: 12px; + font-style: normal; + font-weight: 500; + line-height: 16px; + letter-spacing: 0em; + text-align: left; + color: $text-tretiatry; +} + + +.semi-bold-12px { + font-family: 'Inter', sans-serif; + font-size: 12px; + font-style: normal; + font-weight: 600; + line-height: 16px; + letter-spacing: 0em; + text-align: left; +} + +.semi-bold-12px__caps { + font-family: 'Inter', sans-serif; + font-size: 12px; + font-style: normal; + font-weight: 600; + line-height: 16px; + letter-spacing: 0em; + text-align: left; + text-transform: uppercase; + color: $text-primary; + &:hover { + color: $text-primary; + } + &.tretiatry { + color: $text-tretiatry !important; + } +} + +.bold-12px__caps { + font-family: 'Inter', sans-serif; + font-size: 12px; + font-style: normal; + font-weight: 700; + line-height: 16px; + letter-spacing: 0em; + text-align: left; + color: $text-secondary; + text-transform: uppercase; +} + +.medium-12px { + font-family: 'Inter', sans-serif; + font-size: 12px; + font-style: normal; + font-weight: 500; + line-height: 16px; + letter-spacing: 0em; + text-align: left; + color: $text-primary; +} + +.modal-body, +#page-network dd, +.page-inventory dd, +.custom-radio, +.regular-14px { + font-family: 'Inter', sans-serif; + font-size: 14px; + font-style: normal; + font-weight: 500; + line-height: 20px; + letter-spacing: 0em; + text-align: left; + color: $text-secondary; +} + +#page-network dt, +.page-inventory dt, +.semi-bold-14px { + font-family: 'Inter', sans-serif; + font-size: 14px; + font-style: normal; + font-weight: 600; + line-height: 20px; + color: $text-primary; +} + +#date-time dd, +.regular-16px { + font-family: 'Inter', sans-serif; + font-size: 16px; + font-style: normal; + font-weight: 400; + line-height: 20px; + letter-spacing: 0em; + text-align: left; +} + +#date-time dt, +.semi-bold-16px { + font-family: 'Inter', sans-serif; + font-size: 16px; + font-style: normal; + font-weight: 600; + line-height: 20px; + color: $text-primary; +} + +.medium-16px { + font-family: 'Inter', sans-serif; + font-size: 16px; + font-style: normal; + font-weight: 500; + line-height: 20px; + letter-spacing: 0em; + text-align: left; + color: $text-primary; +} + +.bold-16px { + font-family: 'Inter', sans-serif; + font-size: 16px; + font-style: normal; + font-weight: 700; + line-height: 20px; + letter-spacing: 0em; + text-align: left; +} + +.bold-16px__caps { + font-family: 'Inter', sans-serif; + font-size: 16px; + font-style: normal; + font-weight: 700; + line-height: 20px; + letter-spacing: 0em; + text-align: left; + text-transform: uppercase; + color: $text-secondary; +} + +h2, .h2, +.modal-title, +.semi-bold-20px { + font-family: 'Inter', sans-serif; + font-size: 20px !important; + font-style: normal; + font-weight: 600; + line-height: 24px; + letter-spacing: 0em; +} + +.bold-24px { + font-family: 'Inter', sans-serif; + font-style: normal; + font-weight: bold; + font-weight: 700; + font-size: 24px; + line-height: 28px; + color: $text-primary; + margin: 0; +} + +.auth-description { + font-family: 'Inter', sans-serif; + font-style: normal; + font-weight: normal; + font-size: 12px; + line-height: 16px; + color: $login-page-description-color; +} + +.icon-expand { + height: 1.2rem; + width: 1.2rem; + float: right; + transition: 0.3s linear; + margin: $spacer/4 35px 0 auto; +} + +.icon-expand-right { + height: 1.2rem; + width: 1.2rem; + float: right; + transition: 0.3s linear; + margin: $spacer/4 5px 0 0; +}
\ No newline at end of file diff --git a/src/assets/styles/bmc/_sila/custom/_bootstrap-grid.scss b/src/assets/styles/bmc/_sila/custom/_bootstrap-grid.scss new file mode 100644 index 00000000..7ad7c81b --- /dev/null +++ b/src/assets/styles/bmc/_sila/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/_sila/custom/_buttons.scss b/src/assets/styles/bmc/_sila/custom/_buttons.scss new file mode 100644 index 00000000..04a97c21 --- /dev/null +++ b/src/assets/styles/bmc/_sila/custom/_buttons.scss @@ -0,0 +1,222 @@ +.btn { + display: inline-flex; + align-items: center; + justify-content: space-around; + height: 36px; + &:disabled { + color: gray("600"); + fill: currentColor; + box-shadow: none !important; + &:not(.btn-link) { + border-color: gray("400"); + background-color: gray("400"); + } + } + &svg { + padding-right: 8px; + } +} + +.btn-md { + width: 220px; + height: 36px; +} + +.btn-lg { + width: 290px; + height: 36px; +} + +.btn-danger, +.btn-primary { + background-color: $red-brand-primary; + border-radius: 8px; + border: none; + box-shadow: 1px 2px 2px -1px rgb(79 37 37 / 40%) inset; + font-family: 'Inter', sans-serif; + font-style: normal; + font-weight: 600; + font-size: 16px; + line-height: 20px; + &:hover { + background-color: $red-brand-primary-hover; + } + &:not(:disabled):not(.disabled):active:focus, + &:focus-visible { + border: none; + box-shadow: none; + background-color: $red-brand-primary-click; + } + &:focus { + border: none; + box-shadow: 0px 0px 0px 4px rgba(225, 23, 23, 0.5); + background-color: $red-brand-primary; + } + &:active { + border: none; + box-shadow: none; + background-color: $red-brand-primary; + } +} + +.btn-secondary, +.modal-header button { + background-color: $faint-secondary-primary-5; + color: $red-brand-primary; + border-radius: 8px; + border: none; + box-shadow: 1px 2px 4px -1px rgb(79 37 37 / 10%) inset; + font-family: 'Inter', sans-serif; + font-style: normal; + font-weight: 600; + font-size: 16px; + line-height: 20px; + &:hover { + background-color: $faint-secondary-primary-5-hover; + color: $red-brand-primary; + } + &:focus { + border: none; + box-shadow: 0px 0px 0px 4px rgba(225, 23, 23, 0.5); + color: $red-brand-primary; + background-color: $faint-secondary-primary-5; + } + &:not(:disabled):not(.disabled):active:focus, + &:focus-visible { + border: none; + box-shadow: none; + color: $red-brand-primary; + background-color: $faint-secondary-primary-20; + } + // style for standard close button in modal and popups + &.close { + width: 32px; + height: 22px; + padding: 0px; + margin: 0px; + background-color: $faint-secondary-primary-1; + border: 1px solid $faint-secondary-primary-10; + border-radius: 7px; + &:hover { + background-color: $faint-secondary-primary-2; + } + } +} + +.btn-unstyled { + border: none; + &:focus { + box-shadow: none; + } + &:active { + box-shadow: none; + } +} + +.btn-popover { + border: none; + color: $red-brand-primary; + height: 28px; + border-radius: 8px; + 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; + } +} + +.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: 7px; + margin: 1px; +} + +.collapse-button { + height: 56px; + width: 100%; + display: flex; + flex-flow: row nowrap; + justify-content: flex-start; + gap: 8px; + &:active, + &:focus { + box-shadow: none; + } + &:hover { + color: $text-primary; + } +} + +.table-toolbar-button { + width: 220px; + height: 36px; +}
\ No newline at end of file diff --git a/src/assets/styles/bmc/_sila/custom/_calendar.scss b/src/assets/styles/bmc/_sila/custom/_calendar.scss new file mode 100644 index 00000000..0307a6ce --- /dev/null +++ b/src/assets/styles/bmc/_sila/custom/_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; +}
\ No newline at end of file diff --git a/src/assets/styles/bmc/_sila/custom/_card.scss b/src/assets/styles/bmc/_sila/custom/_card.scss new file mode 100644 index 00000000..db8d076b --- /dev/null +++ b/src/assets/styles/bmc/_sila/custom/_card.scss @@ -0,0 +1,19 @@ +.card { + .bg-success { + background-color: theme-color-light('success')!important; + } + border: 1px solid rgba(0, 0, 0, 0.125); + border-radius: 16px; +} + +.card-header { + border-radius: 15px 15px 0 0; + background-color: $faint-secondary-primary-10 !important; + color: $text-primary !important; + .nav-tabs .nav-link { + border-radius: 10px 10px 0 0 ; + &:hover { + background-color: $faint-secondary-primary-2; + } + } +}
\ No newline at end of file diff --git a/src/assets/styles/bmc/_sila/custom/_dropdown.scss b/src/assets/styles/bmc/_sila/custom/_dropdown.scss new file mode 100644 index 00000000..1ea80d9f --- /dev/null +++ b/src/assets/styles/bmc/_sila/custom/_dropdown.scss @@ -0,0 +1,36 @@ +// Make calendar visible over the table +.dropdown-menu { + border-radius: 5px; + z-index: $zindex-dropdown + 1; + padding: 0; + a { + border-radius: 5px; + } +} +.dropdown-item { + padding-left: $spacer/4; + margin-top: -1 * $spacer/4; + background-color: $white; +} +// .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"); + } + } +}
\ No newline at end of file diff --git a/src/assets/styles/bmc/_sila/custom/_forms.scss b/src/assets/styles/bmc/_sila/custom/_forms.scss new file mode 100644 index 00000000..bf69795a --- /dev/null +++ b/src/assets/styles/bmc/_sila/custom/_forms.scss @@ -0,0 +1,273 @@ +// 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; +} + +.custom-select, +.form-control, +.input-group-text { + // border-color: gray("500") !important; + background-color: gray("100"); +} + +.custom-select, +.form-control { + // &:active { + // border: 1px solid $primary!important; + // } + // &:focus { + // color: theme-color("dark"); + // background-color: gray("100"); + // box-shadow: inset 0 0 0 3px gray("100"), inset 0 0 0 5px $primary !important; + // } + &:disabled { + background-color: gray("400"); + 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; +} + +// .custom-select, +// .custom-control-label, +.form-control { + border-radius: 8px; + border: none; + background-color: $faint-secondary-primary-5; + &:hover { + background-color: $faint-secondary-primary-5-hover; + } +} + +.select-per-page { + padding: 0 0 0 5px; + width: 146px !important; + height: 24px; + background-color: transparent; + border: 1px solid $on-surface-tretiatry; + border-radius: 4px; + background-image: url('~@/assets/images/_sila/icon-chevron.svg'); +} + +// Inverted form colors +.form-background { + background-color: none; + .custom-select, + .form-control { + border-radius: 8px; + border: none; + background-color: $faint-secondary-primary-5; + &:hover { + // opacity: 0.1; + background-color: $faint-secondary-primary-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 { + line-height: 23px; +} + +.custom-radio { + line-height: 23px !important; +} + +.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 { + border-radius: 3px; + background-color: $red-brand-primary; + border-color: $red-brand-primary; + 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 $faint-secondary-primary-20; + background: $white; +} + +.custom-control-input:focus:not(:checked) ~ .custom-control-label::before { + border-color: $faint-secondary-primary-20; +} + +.custom-control-input:not(:disabled):active ~ .custom-control-label::before { + background-color: rgba(4, 10, 15, 0.3); + border-color: $faint-secondary-primary-20; +} + +.custom-switch +.custom-control-input ~ .custom-control-label::before { + border: 1px solid $faint-secondary-primary-20; + background: rgba(4, 10, 15, 0.3); +} + +.custom-switch +.custom-control-input:checked ~ .custom-control-label::before { + background: $red-brand-primary; + border: 1px solid $faint-secondary-primary-20; + border-radius: 8px; +} + +.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%; + } +} + +// Global style progress bar +.progress { + width: 120px; + height: 8px; + border-radius: 4px; + background-color: $faint-secondary-primary-10; +} + +.progress-bar { + background-color: $red-brand-primary; + border-radius: 4px; +} + +.progress_bar_percent { + color: $red-brand-primary; +} + +.cb label{ + padding-top: 4px; +} +.system-control__radio label { + padding-top: 4px; +} + +//radio buttons style + .custom-radio ::before { + border: 1px solid $red-brand-primary; + background-color: #fff; + border-radius: 100%; +} + +.custom-radio +.custom-control-input:checked +~ .custom-control-label::before { + border: 2px solid $red-brand-primary; + background-color: $red-brand-primary; + box-shadow: 0px 0px 0px 2.4px $white inset; + border-radius: 100%; +} + + .custom-radio + .custom-control-input:hover + ~ .custom-control-label::before { + background-color: $red-brand-primary-hover !important; + box-shadow: 0px 0px 0px 2.4px $white inset; + border-color: $red-brand-primary-hover; +} + +.custom-radio +.custom-control-input:checked +~ .custom-control-label::after { + background-image: none !important; + border-radius: 100%; +} + +.custom-radio +.custom-control-input:active +~ .custom-control-label::before { + background-color: $red-brand-primary-active !important; + box-shadow: 0px 0px 0px 2.4px $white inset; + border-color: $red-brand-primary-active; +} diff --git a/src/assets/styles/bmc/_sila/custom/_index.scss b/src/assets/styles/bmc/_sila/custom/_index.scss new file mode 100644 index 00000000..40995ce9 --- /dev/null +++ b/src/assets/styles/bmc/_sila/custom/_index.scss @@ -0,0 +1,20 @@ +// 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 "./popover"; +@import "./logs";
\ No newline at end of file diff --git a/src/assets/styles/bmc/_sila/custom/_kvm.scss b/src/assets/styles/bmc/_sila/custom/_kvm.scss new file mode 100644 index 00000000..74b61c7e --- /dev/null +++ b/src/assets/styles/bmc/_sila/custom/_kvm.scss @@ -0,0 +1,16 @@ +#terminal-kvm { + height: 100vw; + display: flex; + &.full-window { + height: calc(100vh - 80px); + } + div:nth-child(1) { + background: transparent !important; + display: block !important; + overflow: hidden !important; + canvas { + max-height: 579px; + max-width: 740px; + } + } +} diff --git a/src/assets/styles/bmc/_sila/custom/_logs.scss b/src/assets/styles/bmc/_sila/custom/_logs.scss new file mode 100644 index 00000000..237205c6 --- /dev/null +++ b/src/assets/styles/bmc/_sila/custom/_logs.scss @@ -0,0 +1,78 @@ +.logs-section .table.b-table > thead > tr > [aria-sort='ascending'] { + background-image: url('~@/assets/images/_sila/event-logs/sort-icon-rotate.svg'); +} + +.logs-section .table.b-table > thead > tr > [aria-sort='descending'], +.table.b-table > thead > tr > [aria-sort='none'] { + background-image: url('~@/assets/images/_sila/event-logs/sort-icon.svg'); +} + +.logs-section .b-table-sort-icon-left { + background-size: 15px !important; +} + +.logs-head-container { + position: absolute; + width: 50%; + top: calc(#{$header-height}); + right: 0px; + display: flex; + flex-flow: row nowrap; + justify-content: flex-end; + align-items: baseline; + gap: 6px; + z-index: 1001; +} + +#logs-table-wrapper div { + max-height: calc(100vh - 194px - #{$header-height}); +} + +#logs-table, +#table-event-logs { + margin: 0 !important; +} + +// scrollbar styles +#logs-table-wrapper div, +#table-event-logs div { + overflow-y: overlay; + &::-webkit-scrollbar { + position: absolute; + width: 10px; + } + &::-webkit-scrollbar-thumb { + border: 4px solid transparent; + border-top: 52px solid transparent; + background: $faint-secondary-primary-20; + border-radius: 16px; + background-clip: content-box; + } +} + +.logs-table__th { + background-color: #f8f8f8 !important; + border-bottom: 1px solid $faint-secondary-primary-20 !important; + border-top: 1px solid $faint-secondary-primary-20 !important; + color: $text-primary !important; +} + +.logs-table__td { + border-bottom: 1px solid $faint-secondary-primary-10 !important; + height: 64px; +} + +.logs-pagination-container { + width: calc(100% - #{$navigation-width}); + height: $toolbar-height; + position: fixed; + bottom: 0; + right: 0; + box-shadow: 0px -4px 12px rgba(0, 0, 0, 0.06); + z-index: $zindex-dropdown; + background-color: $white; +} + +.table-pagination-select { + line-height: 1.8rem; +} diff --git a/src/assets/styles/bmc/_sila/custom/_modal.scss b/src/assets/styles/bmc/_sila/custom/_modal.scss new file mode 100644 index 00000000..803d95d8 --- /dev/null +++ b/src/assets/styles/bmc/_sila/custom/_modal.scss @@ -0,0 +1,69 @@ +.modal-dialog { + margin: 25vh auto 0; +} + +.modal-content { + border-radius: 16px; +} + +.modal-header { + align-items: center; + border-bottom: 1px solid $faint-secondary-primary-10; + .close { + font-weight: normal; + color: theme-color("dark"); + opacity: 1; + } +} + +.modal-body { + display: flex; + justify-content: flex-start; +} + +.modal-footer { + border-top: 1px solid $faint-secondary-primary-10; +} + +#modal-reset .modal-body { + flex-direction: column; +} + +#generate-csr .custom-select, +#upload-certificate .custom-select, +#modal-user .custom-select { + background-color: transparent; + border: 1px solid $on-surface-tretiatry; + border-radius: 4px; + background-image: url('~@/assets/images/_sila/icon-chevron.svg'); +} + +// file-input-modal +.modal-file-body { + display: flex; + padding: 0; + justify-content: center; +} + +.file-input_container > .custom-file { + width: 432px; + height: 357px; +} + +.custom-file-input ~ .custom-file-label { + background-color: transparent; + border: 1px dashed rgba(12, 28, 41, 0.6); + box-sizing: border-box; + border-radius: 8px; + width: 432px; + height: 357px; + display: flex; + align-items: center; + text-align: center; + white-space: normal; + justify-content: center; +} + +.custom-file-input ~ .custom-file-label::after { + display: none; +} diff --git a/src/assets/styles/bmc/_sila/custom/_pagination.scss b/src/assets/styles/bmc/_sila/custom/_pagination.scss new file mode 100644 index 00000000..bce593ef --- /dev/null +++ b/src/assets/styles/bmc/_sila/custom/_pagination.scss @@ -0,0 +1,34 @@ +.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-link { + border: transparent; + &:hover { + background-color: transparent; + } + &:focus { + box-shadow: none; + } + } + .page-item.active button { + color: theme-color("dark"); + background-color: color("white"); + border-color: transparent; + box-shadow: inset 0px -3px theme-color("primary"); + } +}
\ No newline at end of file diff --git a/src/assets/styles/bmc/_sila/custom/_popover.scss b/src/assets/styles/bmc/_sila/custom/_popover.scss new file mode 100644 index 00000000..8611fb0e --- /dev/null +++ b/src/assets/styles/bmc/_sila/custom/_popover.scss @@ -0,0 +1,72 @@ +.b-popover { + display: flex; + flex-direction: column; + align-items: flex-start; + background: $white; + box-shadow: 0px -4px 12px rgba(0, 0, 0, 0.05); + border-radius: 4px; + position: relative; + max-width: 400px; + width: 400px; + height: auto; + will-change: unset !important; +} + +.popover-header { + background-color: transparent; + border: none; + padding: 24px 0px 0px 24px; + width: 400px; +} + +.arrow { + visibility: hidden; +} + +.popover-heigth-100 { + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 6px; + background: $white; + border: 1px solid $faint-secondary-primary-10; + box-shadow: 0px -4px 12px rgba(0, 0, 0, 0.05); + padding: 5px; + border-radius: 8px; + max-width: 100px; +} + +.popover-heigth-100 .popover-body { + padding: 0px; + +} + +.apply-reload-popover { + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 6px; + background: $white; + border: 1px solid $faint-secondary-primary-10; + box-shadow: 0px -4px 12px rgba(0, 0, 0, 0.05); + padding: 5px; + border-radius: 8px; + max-width: 250px; +} + +.apply-reload-popover .popover-body { + padding: 0px; +} + +.boot-popover { + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 6px; + background: $white; + border: 1px solid $faint-secondary-primary-10; + box-shadow: 0px -4px 12px rgba(0, 0, 0, 0.05); + padding: 5px; + border-radius: 8px; + max-width: 200px; +} diff --git a/src/assets/styles/bmc/_sila/custom/_section-divider.scss b/src/assets/styles/bmc/_sila/custom/_section-divider.scss new file mode 100644 index 00000000..79b14476 --- /dev/null +++ b/src/assets/styles/bmc/_sila/custom/_section-divider.scss @@ -0,0 +1,7 @@ +.section-divider { + border-bottom: 1px solid gray('400'); + } + +.page-collapse-decorator { + border-bottom: 1px solid $faint-secondary-primary-10; +}
\ No newline at end of file diff --git a/src/assets/styles/bmc/_sila/custom/_sol.scss b/src/assets/styles/bmc/_sila/custom/_sol.scss new file mode 100644 index 00000000..6987cf79 --- /dev/null +++ b/src/assets/styles/bmc/_sila/custom/_sol.scss @@ -0,0 +1,3 @@ +#terminal .xterm .xterm-viewport { + overflow: auto; +}
\ No newline at end of file diff --git a/src/assets/styles/bmc/_sila/custom/_tables.scss b/src/assets/styles/bmc/_sila/custom/_tables.scss new file mode 100644 index 00000000..23baf757 --- /dev/null +++ b/src/assets/styles/bmc/_sila/custom/_tables.scss @@ -0,0 +1,409 @@ +.table { + position: relative; + z-index: $zindex-dropdown; + border-radius: 10px; + + td { + vertical-align: middle; + + // Table action buttons + .btn-link { + height: 20px; + border-radius: 2px; + padding: 4px !important; + display: inline-flex; + justify-content: center; + align-items: center; + } + } + + // thead-light added for specificity + .thead-light th { + text-align: left !important; + vertical-align: middle; + border-bottom: 1px solid gray("300"); + &:focus { + outline: none; + } + } + + .status-icon svg { + width: 1.2rem; + height: auto; + } + + .b-table-has-details { + td { + border-bottom: none; + } + .table-row-expand svg { + transform: rotate(180deg); + } + } + + .b-table-details { + background-color: theme-color("light"); + td { + padding: 0px 16px 16px 16px; + } + dl { + margin: 0; + } + dt { + float: left; + clear: left; + margin-right: $spacer / 2; + } + dd { + line-height: 1.2 + } + } + + .table-row-expand { + width: 50px; + .btn { + padding: 0; + width: 27px; + } + } + .b-table-sort-icon-left { + 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("300"); + + tr { + + &:not(:first-child) > td[aria-colindex='1'] { + 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; + } + } +} + +.b-table-details > td { + padding: 0px !important; +} + +.indicators-Critical { + color: $indicators-errors !important; +} + +.indicators-Warning { + color: $indicators-warning !important; +} + +.indicators-OK { + color: $indicators-succes !important; +} + +.bootstrap-table__section { + position: relative; + margin: 16px 2rem 24px 2rem; + width: 90%; +} +// 1 // +.bootstrap-table { + border-top: none !important; + border: 1px solid rgba(26, 62, 91, 0.1); + background-color: $faint-secondary-primary-5; +} + +// style for rounded tables +// add style for page ID +#page-inventory table, +#page-system-network table, +#page-network table, +#page-bmc-settings table, +#page-memory-specification table, +#page-processors table, +// add style for class +#main-content .table-rounded { + -moz-border-radius: 10px; + -webkit-border-radius: 10px; + border-radius: 10px; + border: 1px solid rgba(26, 62, 91, 0.3); + background-color: none; + + tr { + border-radius: 10px 10px 0 0; + -webkit-border-radius: 10px 10px 0 0; + -moz-border-radius: 10px 10px 0 0; + // font styles + font-family: 'Inter', sans-serif; + font-size: 12px; + font-style: normal; + font-weight: 600; + line-height: 16px; + letter-spacing: 0em; + text-align: left; + color: $text-primary; + &:hover { + background-color: $faint-secondary-primary-2-hover; + } + &.b-table-details:hover { + background-color: transparent; + } + } + + th { + border-top: none; + border-bottom: none; + text-transform: uppercase; + border-left: 1px solid rgba(26, 62, 91, 0.3); + background-color: $faint-secondary-primary-10 !important; + color: $text-primary !important; + &:first-child { + border-left: none; + border-radius: 10px 0 0 0; + } + &:last-child { + border-right: none; + border-radius: 0 10px 0 0; + } + } + + td { + // font styles + font-family: 'Inter', sans-serif; + font-size: 12px; + font-style: normal; + font-weight: 500; + line-height: 20px; + letter-spacing: 0em; + text-align: left; + color: $text-secondary; + } +} +.table-network__icon { + max-width: 20%; + margin: 0 5px 0 auto !important; +} + +// stripes table // +#main-content .table-stripes { + border-top: none !important; + border: 1px solid rgba(26, 62, 91, 0.1); + background-color: $faint-secondary-primary-5; + tr:nth-of-type(even) { + background-color: rgb(255 255 255); + } + th { + border-top: none; + display: none; + &:first-child { + border-top: none; + } + &:last-child { + border-top: none; + } + } + + td { + border-top: 1px solid rgba(26, 62, 91, 0.1); + // font styles + font-family: 'Inter', sans-serif; + font-size: 12px; + font-style: normal; + font-weight: 500; + line-height: 16px; + letter-spacing: 0em; + text-align: left; + color: $text-secondary; + &:first-child { + width: 70%; + } + &:first-child { + border-right: 1px solid rgba(26, 62, 91, 0.1); + } + .col > .custom-switch { + padding-top: 5px; + margin: -10px 0 0 auto; + } + } +} + +// table accessory // +#main-content .table-accessory, +#main-content .table-firmware { + + th { + // padding: 10px 5px !important; + background-color: transparent !important; + color: $text-primary !important; + border-top: none !important; + border-bottom: 1px solid $faint-secondary-primary-10; + // font styles + font-family: 'Inter', sans-serif; + font-size: 12px; + font-style: normal; + font-weight: 600; + line-height: 16px; + letter-spacing: 0em; + text-align: left; + } + + td { + padding: 5px !important; + border-top: none !important; + // font styles + font-family: 'Inter', sans-serif; + font-size: 12px; + font-style: normal; + font-weight: 300; + line-height: 16px; + letter-spacing: 0em; + text-align: left; + color: $text-secondary; + } +} +#main-content .table-accessory{ + th { + padding: 10px 5px !important; + } +} +.bootstrap-table__section + .table.b-table + > thead + > tr + > [aria-sort='ascending'] { + background-image: url('~@/assets/images/_sila/event-logs/sort-icon-rotate.svg'); +} + +.bootstrap-table__section + .table.b-table + > thead + > tr + > [aria-sort='descending'], +.table.b-table > thead > tr > [aria-sort='none'] { + background-image: url('~@/assets/images/_sila/event-logs/sort-icon.svg'); +} + +// table analytical // +#main-content .table-analytical { + border: 1px solid rgba(26, 62, 91, 0.3); + -moz-border-radius: 4px; + -webkit-border-radius: 4px; + border-radius: 4px; + tr { + border-top: none !important; + border-radius: 0 0 0 0; + -webkit-border-radius: 0 0 0 0; + -moz-border-radius: 0 0 0 0; + &:hover { + background-color: $faint-secondary-primary-2-hover; + } + &.b-table-details:hover { + background-color: transparent; + } + } + + th { + border-top: none !important; + border-bottom: 1px solid rgba(26, 62, 91, 0.3) !important; + background-color: $white !important; + color: $text-primary !important; + // font styles + font-family: 'Inter', sans-serif; + font-size: 12px; + font-style: normal; + font-weight: 600; + line-height: 16px; + letter-spacing: 0em; + text-align: left; + text-transform: uppercase; + color: $text-primary; + &:first-child { + border-radius: 4px 0 0 0; + -webkit-border-radius: 4px 0 0 0; + -moz-border-radius: 4px 0 0 0; + } + &:last-child { + border-radius: 0 4px 0 0; + -webkit-border-radius: 0 4px 0 0; + -moz-border-radius: 0 4px 0 0; + } + } + + td { + border-top: none !important; + padding: 10px !important; + border-radius: 0; + -webkit-border-radius: 0; + -moz-border-radius: 0; + // font styles + font-family: 'Inter', sans-serif; + font-size: 12px; + font-style: normal; + font-weight: 500; + line-height: 16px; + letter-spacing: 0em; + text-align: left; + color: $text-secondary; + } +} diff --git a/src/assets/styles/bmc/_sila/custom/_toasts.scss b/src/assets/styles/bmc/_sila/custom/_toasts.scss new file mode 100644 index 00000000..a3480fda --- /dev/null +++ b/src/assets/styles/bmc/_sila/custom/_toasts.scss @@ -0,0 +1,61 @@ +.b-toaster { + top: 95px!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; +}
\ No newline at end of file diff --git a/src/assets/styles/bmc/_sila/helpers/_colors.scss b/src/assets/styles/bmc/_sila/helpers/_colors.scss new file mode 100644 index 00000000..028d962b --- /dev/null +++ b/src/assets/styles/bmc/_sila/helpers/_colors.scss @@ -0,0 +1,75 @@ +// Sass Color Variables +$black: #000; +$white: #FFFFFF; + +$blue-500: #2d60e5; +$green-500: #4EBF19; +$red-500: #FF4141; +$yellow-500: #F0AC0C; +$dark-blue: #1A3E5B; + +$gray-100: #f4f4f4; +$gray-200: #e6e6e6; +$gray-300: #d8d8d8; +$gray-400: #cccccc; +$gray-500: #b3b3b3; +$gray-600: #999999; +$gray-700: #666666; +$gray-800: #3f3f3f; +$gray-900: #161616; + + +// Sass Base Color Variables +$blue: $blue-500; +$green: $green-500; +$red: $red-500; +$yellow: $yellow-500; + +// Sass Theme Color Variables +// Can be used as variants +$danger: $red; +$dark: $dark-blue; +$info: $blue; +$light: $white; +$primary: $dark-blue; +$secondary: #1A3E5B; +$success: $green; +$warning: $yellow; + +$loading-color: $primary; +$navbar-color: $primary; + +$login-page-description-color: rgba(12, 28, 41, 0.6); + +$text-primary: #0C1C29; +$text-secondary: #0C1C29E5; +$text-tretiatry: rgba(12, 28, 41, 0.6); +$text-quaternary: rgba(12, 28, 41, 0.3); + +$indicators-errors: #FF4141; +$indicators-succes: #4EBF19; +$indicators-warning: #F0AC0C; +$indicators-complementary:rgba(26, 62, 91, 0.6);; + +$on-surface-primary: #040A0F; + +$surface-secondary: #F3F4F5; +$on-surface-secondary: rgba(4, 10, 15, 0.6); +$on-surface-tretiatry: #040A0F4D; + +$faint-secondary-primary-1: rgba(26, 62, 91, 0.01); +$faint-secondary-primary-2: rgba(26, 62, 91, 0.02); +$faint-secondary-primary-2-hover: rgba(26, 62, 91, 0.03); + +$faint-secondary-primary-5: rgba(26, 62, 91, 0.05); +$faint-secondary-primary-5-hover: rgba(20, 39, 53, 0.1); +$faint-secondary-primary-10: rgba(26, 62, 91, 0.1); +$faint-secondary-primary-20: rgba(26, 62, 91, 0.2); +$faint-brand-primary-40:rgba(225, 23, 23, 0.4); + +$red-brand-primary: #E11717; +$red-brand-primary-hover: #FC2A2A; +$red-brand-primary-active: #df2323; +$red-brand-primary-disabled: #E17171; +$red-brand-primary-click: #C71414; +$red-brand-primary-5: rgba(225, 23, 23, 0.05); diff --git a/src/assets/styles/bmc/_sila/helpers/_functions.scss b/src/assets/styles/bmc/_sila/helpers/_functions.scss new file mode 100644 index 00000000..57956c99 --- /dev/null +++ b/src/assets/styles/bmc/_sila/helpers/_functions.scss @@ -0,0 +1,9 @@ +// This function is usually used to get a lighter +// theme variant color to use as a background color +@function theme-color-light($variant) { + @return theme-color-level($variant, -11.3); +} + +@function theme-color-dark($variant) { + @return theme-color-level($variant, 2); +}
\ No newline at end of file diff --git a/src/assets/styles/bmc/_sila/helpers/_index.scss b/src/assets/styles/bmc/_sila/helpers/_index.scss new file mode 100644 index 00000000..ce0631a7 --- /dev/null +++ b/src/assets/styles/bmc/_sila/helpers/_index.scss @@ -0,0 +1,4 @@ +@import "./colors"; +@import "./motion"; +@import "./variables"; +@import "./functions";
\ No newline at end of file diff --git a/src/assets/styles/bmc/_sila/helpers/_motion.scss b/src/assets/styles/bmc/_sila/helpers/_motion.scss new file mode 100644 index 00000000..55a3eed9 --- /dev/null +++ b/src/assets/styles/bmc/_sila/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/_sila/helpers/_variables.scss b/src/assets/styles/bmc/_sila/helpers/_variables.scss new file mode 100644 index 00000000..9e3a3aed --- /dev/null +++ b/src/assets/styles/bmc/_sila/helpers/_variables.scss @@ -0,0 +1,24 @@ +// Override Bootstrap Variables - node_modules/Bootstrap/scss/_variables.scss +$enable-rounded: false; +$enable-validation-icons: false; +$transition-base: all $duration--moderate-02 $standard-easing--productive; +$transition-fade: opacity $duration--moderate-01 $standard-easing--productive; +$transition-collapse: height $duration--slow-01 $standard-easing--expressive; + +// OpenBMC Custom Variables +$responsive-layout-bp: lg; +$first-header-height: 48px; +$second-header-height: 39px; +$header-height: 87px; +$headerHeight: 40px; +$navigation-width: 320px; +$toolbar-height: 60px; +$form-label-font-size: .875rem; +$form-line-height: 1.25rem; +$box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.3); +$focus-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, +border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; + +// :export { +// headerHeight: $header-height; +// }
\ No newline at end of file |