From c2441770695a7762bfc90ace2e52854b08374ac6 Mon Sep 17 00:00:00 2001 From: Anna Tsyganova Date: Wed, 6 Jul 2022 12:26:40 +0300 Subject: Add global styles Issue: SILABMC-191 --- src/assets/styles/bmc/_sila/_alert.scss | 110 ++++++++--------- src/assets/styles/bmc/_sila/_badge.scss | 2 +- src/assets/styles/bmc/_sila/_base.scss | 94 +++++++++++---- src/assets/styles/bmc/_sila/_bootstrap-grid.scss | 22 +++- src/assets/styles/bmc/_sila/_buttons.scss | 132 +++++++++++++++++---- src/assets/styles/bmc/_sila/_calendar.scss | 2 +- src/assets/styles/bmc/_sila/_card.scss | 34 +++++- src/assets/styles/bmc/_sila/_dropdown.scss | 26 +++- src/assets/styles/bmc/_sila/_forms.scss | 120 +++++++++++++++---- src/assets/styles/bmc/_sila/_index.scss | 8 +- src/assets/styles/bmc/_sila/_kvm.scss | 2 +- src/assets/styles/bmc/_sila/_pagination.scss | 2 +- src/assets/styles/bmc/_sila/_section-divider.scss | 4 +- src/assets/styles/bmc/_sila/_sol.scss | 2 +- src/assets/styles/bmc/_sila/_tables.scss | 59 +++++---- src/assets/styles/bmc/_sila/_toasts.scss | 2 +- src/assets/styles/bmc/_sila/pages/_firmware.scss | 13 ++ src/assets/styles/bmc/_sila/pages/_inventory.scss | 9 ++ src/assets/styles/bmc/_sila/pages/_login.scss | 23 ++++ .../styles/bmc/_sila/pages/_power-operations.scss | 9 ++ src/assets/styles/bmc/_sila/pages/_security.scss | 9 ++ .../styles/bmc/_sila/pages/_virtual-media.scss | 47 ++++++++ 22 files changed, 578 insertions(+), 153 deletions(-) create mode 100644 src/assets/styles/bmc/_sila/pages/_firmware.scss create mode 100644 src/assets/styles/bmc/_sila/pages/_inventory.scss create mode 100644 src/assets/styles/bmc/_sila/pages/_login.scss create mode 100644 src/assets/styles/bmc/_sila/pages/_power-operations.scss create mode 100644 src/assets/styles/bmc/_sila/pages/_security.scss create mode 100644 src/assets/styles/bmc/_sila/pages/_virtual-media.scss (limited to 'src/assets/styles/bmc/_sila') diff --git a/src/assets/styles/bmc/_sila/_alert.scss b/src/assets/styles/bmc/_sila/_alert.scss index 0e78ba64..d85e9127 100644 --- a/src/assets/styles/bmc/_sila/_alert.scss +++ b/src/assets/styles/bmc/_sila/_alert.scss @@ -1,70 +1,70 @@ .alert { - display: flex; - padding: $spacer; - border-width: 0 0 0 3px; - color: gray("800"); - margin-bottom: $spacer; + display: flex; + padding: $spacer; + border-width: 0 0 0 3px; + color: gray("800"); + margin-bottom: $spacer; - &.small { - padding: $spacer / 2; - font-size: 1rem; - } + &.small { + padding: $spacer / 2; + font-size: 1rem; + } - .close { - font-weight: 300; - opacity: 1; - } + .close { + font-weight: 300; + opacity: 1; + } - .alert-icon { - display: inline-flex; - align-items: flex-start; - margin-right: $spacer; - margin-bottom: $spacer; + .alert-icon { + display: inline-flex; + align-items: flex-start; + margin-right: $spacer; + margin-bottom: $spacer; - @include media-breakpoint-up(sm) { - margin-bottom: 0; - } + @include media-breakpoint-up(sm) { + margin-bottom: 0; } + } - .alert-content { - flex: 1 1 auto; - } + .alert-content { + flex: 1 1 auto; + } - .alert-title { - margin-bottom: $spacer / 2; - } + .alert-title { + margin-bottom: $spacer / 2; + } - .alert-msg { - p + p { - margin-bottom: $spacer; - } - - p:last-of-type { - margin-bottom: 0; - } + .alert-msg { + p + p { + margin-bottom: $spacer; } - &.alert-info { - border-left-color: theme-color("info"); - background-color: theme-color-light("info"); - fill: theme-color("info"); + p:last-of-type { + margin-bottom: 0; } + } - &.alert-success { - border-left-color: theme-color("success"); - background-color: theme-color-light("success"); - fill: theme-color("success"); - } + &.alert-info { + border-left-color: theme-color("info"); + background-color: theme-color-light("info"); + fill: theme-color("info"); + } - &.alert-danger { - border-left-color: theme-color("danger"); - background-color: theme-color-light("danger"); - fill: theme-color("danger"); - } + &.alert-success { + border-left-color: theme-color("success"); + background-color: theme-color-light("success"); + fill: theme-color("success"); + } - &.alert-warning { - border-left-color: theme-color("warning"); - background-color: theme-color-light("warning"); - fill: theme-color("warning"); - } - } \ No newline at end of file + &.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/_sila/_badge.scss b/src/assets/styles/bmc/_sila/_badge.scss index 0b88b499..7d59e9a6 100644 --- a/src/assets/styles/bmc/_sila/_badge.scss +++ b/src/assets/styles/bmc/_sila/_badge.scss @@ -18,4 +18,4 @@ .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/_base.scss b/src/assets/styles/bmc/_sila/_base.scss index c11e046c..40806995 100644 --- a/src/assets/styles/bmc/_sila/_base.scss +++ b/src/assets/styles/bmc/_sila/_base.scss @@ -1,50 +1,102 @@ -dt, -legend, -label { - color: gray("800"); - font-size: 14px; - font-weight: 400; - line-height: 1.4285; + +// +// 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.625rem; - font-weight: 300; - line-height: 1.238; + font-size: 2.25rem !important; + font-weight: 500; + line-height: 1.2; } h2, .h2 { - font-size: 2.25rem; - font-weight: 300; - line-height: 1.3333; + font-size: 1.5rem !important; + font-weight: 500; + line-height: 1.2; } h3, .h3 { - font-size: 1.75rem; + font-size: 1.5rem !important; font-weight: 400; - line-height: 1.2857; + line-height: 1.2; } h4, .h4 { - font-size: 1.25rem; + font-size: 1.25rem !important; font-weight: 400; - line-height: 1.3; + line-height: 1.2; } h5, .h5 { - font-size: 1rem; + font-size: 1rem !important; font-weight: 500; - line-height: 1.375; + line-height: 1.2; } h6, .h6 { - font-size: 0.875rem; + font-size: 0.825rem !important; font-weight: 500; - line-height: 1.2857; + 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/_sila/_bootstrap-grid.scss b/src/assets/styles/bmc/_sila/_bootstrap-grid.scss index 7ad7c81b..87332f4b 100644 --- a/src/assets/styles/bmc/_sila/_bootstrap-grid.scss +++ b/src/assets/styles/bmc/_sila/_bootstrap-grid.scss @@ -5,4 +5,24 @@ // 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 +} + +@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/_sila/_buttons.scss b/src/assets/styles/bmc/_sila/_buttons.scss index 2a7b8169..b3a69757 100644 --- a/src/assets/styles/bmc/_sila/_buttons.scss +++ b/src/assets/styles/bmc/_sila/_buttons.scss @@ -10,7 +10,7 @@ margin-right: $spacer / 4; } &:disabled { - color: gray("600"); + color: $red; fill: currentColor; box-shadow: none !important; &:not(.btn-link) { @@ -21,27 +21,114 @@ } .btn-primary { - fill: currentColor; - &:focus, - &:not(:disabled):not(.disabled):active:focus { - border-color: $white; - box-shadow: inset 0 0 0 3px theme-color('primary'), inset 0 0 0 5px $white; + 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 { - fill: currentColor; - &:focus, - &:not(:disabled):not(.disabled):active:focus { - border-color: $white; - box-shadow: inset 0 0 0 3px theme-color('secondary'), inset 0 0 0 5px $white; + 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 { - font-weight: $headings-font-weight; - fill: theme-color("primary"); + color: $text-primary; text-decoration: none !important; &:hover { background-color: gray("200"); @@ -50,14 +137,19 @@ &:active { background-color: gray("300"); } - &:focus { - box-shadow: inset 0 0 0 2px theme-color("primary"); - color: theme-color("primary"); - outline: none; - } &: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 @@ -77,6 +169,6 @@ // Contain input buttons within input .btn-datepicker .dropdown-toggle, .input-action-btn { - padding: 7px; + padding: 6px; margin: 1px; -} \ No newline at end of file +} diff --git a/src/assets/styles/bmc/_sila/_calendar.scss b/src/assets/styles/bmc/_sila/_calendar.scss index 0307a6ce..9a53169d 100644 --- a/src/assets/styles/bmc/_sila/_calendar.scss +++ b/src/assets/styles/bmc/_sila/_calendar.scss @@ -14,4 +14,4 @@ // 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/_card.scss b/src/assets/styles/bmc/_sila/_card.scss index 5f2a5962..d7ac04d2 100644 --- a/src/assets/styles/bmc/_sila/_card.scss +++ b/src/assets/styles/bmc/_sila/_card.scss @@ -1,5 +1,37 @@ .card { + border-radius: $border-radius; .bg-success { background-color: theme-color-light('success')!important; } -} \ No newline at end of file +} + +.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/_sila/_dropdown.scss b/src/assets/styles/bmc/_sila/_dropdown.scss index 969c4c68..02e4e855 100644 --- a/src/assets/styles/bmc/_sila/_dropdown.scss +++ b/src/assets/styles/bmc/_sila/_dropdown.scss @@ -1,18 +1,36 @@ // Make calendar visible over the table .dropdown-menu { z-index: $zindex-dropdown + 1; - padding: 0; + padding: $spacer / 2; + border-radius: $border-radius; } + .dropdown-item { - padding-left: $spacer/4; - margin-top: -1 * $spacer/4; + 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 { @@ -28,4 +46,4 @@ box-shadow: inset 0 0 0 2px theme-color("primary"); } } -} \ No newline at end of file +} diff --git a/src/assets/styles/bmc/_sila/_forms.scss b/src/assets/styles/bmc/_sila/_forms.scss index 428a40c2..914bf379 100644 --- a/src/assets/styles/bmc/_sila/_forms.scss +++ b/src/assets/styles/bmc/_sila/_forms.scss @@ -21,20 +21,12 @@ .custom-select, .form-control, .input-group-text { - border-color: gray("500") !important; - background-color: gray("100"); + border-radius: $border-radius; + background-color: $white; } .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"); @@ -48,26 +40,52 @@ } } -.custom-select, -.custom-control-label, +.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: theme-color("dark") !important; - font-size: 1rem; + 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: gray("100"); + background-color: none; + padding: 0 !important; .custom-select, .form-control { - background-color: $white; + color: #0c1c29e6; + border-radius: $border-radius; + border: none; + background-color: $gray-5; + &:hover { + background-color: $gray-5-hover; + } &:focus { - background-color: $white; + border: 1px solid gray("400"); } &:disabled { background-color: gray("400"); color: gray("600"); } + &.is-valid { + border: 1px solid gray("400"); + } } } @@ -76,12 +94,22 @@ 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: $black; - border-color: $black; + background-color: $red; + border-color: $red; cursor: pointer; + &:focus { + box-shadow: none !important; + } } .custom-control { @@ -94,8 +122,35 @@ } } -.custom-control-input:focus ~ .custom-control-label::before{ - box-shadow: 0 0 0 2px theme-color("primary"); +.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 { @@ -130,3 +185,26 @@ 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/_sila/_index.scss b/src/assets/styles/bmc/_sila/_index.scss index 74594e35..14c85d70 100644 --- a/src/assets/styles/bmc/_sila/_index.scss +++ b/src/assets/styles/bmc/_sila/_index.scss @@ -15,4 +15,10 @@ @import "./section-divider"; @import "./sol"; @import "./tables"; -@import "./toasts"; \ No newline at end of file +@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/_sila/_kvm.scss b/src/assets/styles/bmc/_sila/_kvm.scss index a7223844..8276b8ea 100644 --- a/src/assets/styles/bmc/_sila/_kvm.scss +++ b/src/assets/styles/bmc/_sila/_kvm.scss @@ -9,4 +9,4 @@ display: block !important; overflow: hidden !important; } -} \ No newline at end of file +} diff --git a/src/assets/styles/bmc/_sila/_pagination.scss b/src/assets/styles/bmc/_sila/_pagination.scss index d38ce5d2..97fe0132 100644 --- a/src/assets/styles/bmc/_sila/_pagination.scss +++ b/src/assets/styles/bmc/_sila/_pagination.scss @@ -21,4 +21,4 @@ border-color: $border-color; box-shadow: inset 0px -3px theme-color("primary"); } -} \ No newline at end of file +} diff --git a/src/assets/styles/bmc/_sila/_section-divider.scss b/src/assets/styles/bmc/_sila/_section-divider.scss index 620c9e56..bca2d77e 100644 --- a/src/assets/styles/bmc/_sila/_section-divider.scss +++ b/src/assets/styles/bmc/_sila/_section-divider.scss @@ -1,3 +1,3 @@ .section-divider { - border-bottom: 1px solid gray('400'); - } \ No newline at end of file + border-bottom: 1px solid gray('400'); +} diff --git a/src/assets/styles/bmc/_sila/_sol.scss b/src/assets/styles/bmc/_sila/_sol.scss index 6987cf79..3641c040 100644 --- a/src/assets/styles/bmc/_sila/_sol.scss +++ b/src/assets/styles/bmc/_sila/_sol.scss @@ -1,3 +1,3 @@ #terminal .xterm .xterm-viewport { overflow: auto; -} \ No newline at end of file +} diff --git a/src/assets/styles/bmc/_sila/_tables.scss b/src/assets/styles/bmc/_sila/_tables.scss index e8b5a832..d73bfdde 100644 --- a/src/assets/styles/bmc/_sila/_tables.scss +++ b/src/assets/styles/bmc/_sila/_tables.scss @@ -3,16 +3,18 @@ z-index: $zindex-dropdown; td { - border-top: 1px solid gray("300"); - border-bottom: 1px solid gray("300"); + border-top: 1px solid $gray-10; + border-right: 1px solid $gray-10; + border-bottom-width: 0px; &:first-of-type { - border-left: 1px solid gray("300"); + border-right: 1px solid $gray-10; } &:last-of-type { - border-right: 1px solid gray("300"); + border-left: 1px solid $gray-10; + border-right-width: 0px; } vertical-align: middle; - + font-size: 0.875rem; // Table action buttons .btn-link { width: 40px; @@ -26,19 +28,30 @@ // thead-light added for specificity .thead-light th { + background-color: $surface-secondary; vertical-align: middle; - border-top: 1px solid gray("300"); - border-bottom: 1px solid gray("300"); + border-top-width: 0px; + border-bottom: 1px solid $gray-10; + border-right: 1px solid $gray-10; &:first-of-type { - border-left: 1px solid gray("300"); + border-right: 1px solid $gray-10; } &:last-of-type { - border-right: 1px solid gray("300"); + border-left: 1px solid $gray-10; + border-right-width: 0px; } - color: theme-color("dark"); + text-transform: uppercase; + color: $text-primary; &:focus { outline: none; } + & > div { + font-size: 0.875rem !important; + } + } + + .custom-switch { + width: 100%; } .status-icon svg { @@ -56,21 +69,24 @@ } .b-table-details { - background-color: theme-color("light"); + border-top: 1px solid rgba(26,62,91,.3); + background-color: inherit; td { - padding-left: calc(50px + (#{$table-cell-padding} * 2)); - padding-right: calc(50px + (#{$table-cell-padding} * 2)); + 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 { - line-height: 1.2 + font-size: 0.75rem !important; + line-height: 1.5 } } @@ -78,12 +94,13 @@ width: 50px; .btn { padding: 0; - width: 50px; + 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; @@ -104,12 +121,12 @@ // Table stacked style for small screen only @include media-breakpoint-down(xs) { .b-table-stacked-sm { - border: 1px solid gray("300"); + border: 1px solid $gray-10; tr { &:not(:first-child) > td[aria-colindex='1'] { - border-top: 1px solid gray("300"); + border-top: 1px solid $gray-10; padding-top: 0.625rem; } @@ -157,15 +174,15 @@ .table.b-table.b-table-stacked-sm > tbody > tr > [data-label] { &::before { text-align: left; - padding-left: $spacer /2; + padding-left: $spacer / 2; } > div { padding-left: 1rem; } } +} - .table.b-table.b-table-stacked-sm > tbody > tr > :first-child { - border-top-width: 1px; - } +.table-responsive, .table-responsive-md { + margin-top: 0.5rem; } diff --git a/src/assets/styles/bmc/_sila/_toasts.scss b/src/assets/styles/bmc/_sila/_toasts.scss index 4e2ad7fa..482765ce 100644 --- a/src/assets/styles/bmc/_sila/_toasts.scss +++ b/src/assets/styles/bmc/_sila/_toasts.scss @@ -58,4 +58,4 @@ .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/pages/_firmware.scss b/src/assets/styles/bmc/_sila/pages/_firmware.scss new file mode 100644 index 00000000..de65dc10 --- /dev/null +++ b/src/assets/styles/bmc/_sila/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/_sila/pages/_inventory.scss b/src/assets/styles/bmc/_sila/pages/_inventory.scss new file mode 100644 index 00000000..6f065ad4 --- /dev/null +++ b/src/assets/styles/bmc/_sila/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/_sila/pages/_login.scss b/src/assets/styles/bmc/_sila/pages/_login.scss new file mode 100644 index 00000000..cd7ef538 --- /dev/null +++ b/src/assets/styles/bmc/_sila/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/_sila/pages/_power-operations.scss b/src/assets/styles/bmc/_sila/pages/_power-operations.scss new file mode 100644 index 00000000..0921323e --- /dev/null +++ b/src/assets/styles/bmc/_sila/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/_sila/pages/_security.scss b/src/assets/styles/bmc/_sila/pages/_security.scss new file mode 100644 index 00000000..45473a53 --- /dev/null +++ b/src/assets/styles/bmc/_sila/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/_sila/pages/_virtual-media.scss b/src/assets/styles/bmc/_sila/pages/_virtual-media.scss new file mode 100644 index 00000000..040e57b1 --- /dev/null +++ b/src/assets/styles/bmc/_sila/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