diff options
| -rw-r--r-- | src/assets/styles/bmc/custom/_forms.scss | 72 | ||||
| -rw-r--r-- | src/assets/styles/bmc/helpers/_variables.scss | 4 | ||||
| -rw-r--r-- | src/views/Control/ServerPowerOperations/BootSettings.vue | 8 |
3 files changed, 63 insertions, 21 deletions
diff --git a/src/assets/styles/bmc/custom/_forms.scss b/src/assets/styles/bmc/custom/_forms.scss index 1195f6cb..b7747bf3 100644 --- a/src/assets/styles/bmc/custom/_forms.scss +++ b/src/assets/styles/bmc/custom/_forms.scss @@ -1,12 +1,17 @@ +// 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("800"); + color: gray("700")!important; } +// Legend label .col-form-label { color: gray("800"); - font-size: 14px; + font-size: $form-label-font-size; + line-height: $form-line-height; } .form-group { @@ -14,24 +19,69 @@ } .custom-select, -.custom-control-label, +.form-control, +.input-group-text { + border-color: gray("500") !important; + background-color: gray("100"); +} + +.custom-select, .form-control { - //important needed to override validation colors on radio labels - color: theme-color("dark") !important; - font-size: 16px; - border-color: gray("400") !important; + &: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 theme-color("primary") !important; + } + &:disabled { + background-color: gray("400"); + color: gray("600"); + } + &::placeholder { + color: gray("600"); + } &.is-invalid, &:invalid { - border-bottom: 2px solid theme-color("danger") !important; + border: 1px solid theme-color("danger") !important; + } +} + +.custom-select, +.custom-control-label, +.form-control { + color: theme-color("dark"); + font-size: 1rem; +} + +// Inverted form colors +.form-background { + background-color: gray("100"); + .custom-select, + .form-control { + background-color: $white; + &:focus { + background-color: $white; + } + &:disabled { + background-color: gray("400"); + color: gray("600"); + } } } +.invalid-feedback { + font-size: $form-label-font-size; + line-height: $form-line-height; +} + .custom-control { .custom-control-input[disabled=disabled] { & + .custom-control-label { // Disabled label for checkbox, radio, // switch bootstrap form components - color: gray("700")!important; + color: gray("600")!important; } } } @@ -50,7 +100,3 @@ fill: currentColor; } } - -.form-background { - background-color: gray("200"); -}
\ No newline at end of file diff --git a/src/assets/styles/bmc/helpers/_variables.scss b/src/assets/styles/bmc/helpers/_variables.scss index ea300ec7..eff2924c 100644 --- a/src/assets/styles/bmc/helpers/_variables.scss +++ b/src/assets/styles/bmc/helpers/_variables.scss @@ -8,4 +8,6 @@ $transition-collapse: height $duration--slow-01 $standard-easing--expres // OpenBMC Custom Variables $responsive-layout-bp: lg; $header-height: 56px; -$navigation-width: 300px;
\ No newline at end of file +$navigation-width: 300px; +$form-label-font-size: .875rem; +$form-line-height: 1.25rem;
\ No newline at end of file diff --git a/src/views/Control/ServerPowerOperations/BootSettings.vue b/src/views/Control/ServerPowerOperations/BootSettings.vue index 8f54cbb8..c56bcf50 100644 --- a/src/views/Control/ServerPowerOperations/BootSettings.vue +++ b/src/views/Control/ServerPowerOperations/BootSettings.vue @@ -1,5 +1,5 @@ <template> - <div class="boot-settings p-3"> + <div class="form-background p-3"> <b-form novalidate @submit.prevent="handleSubmit"> <b-form-group :label=" @@ -145,9 +145,3 @@ export default { } }; </script> - -<style lang="scss" scoped> -.boot-settings { - background-color: gray('200'); -} -</style> |