Update form fields to match style guide
Updates inputs, select, form field background
color, validation text size, and field focus state.
New styles have a darker form field background color.
Form fields on dark backgrounds will remain white.
Signed-off-by: Dixsie Wolmers <dixsie@ibm.com>
Change-Id: Ifa14a57f764335b196b129e6614d7a1f1c27d7ad
diff --git a/src/assets/styles/bmc/custom/_forms.scss b/src/assets/styles/bmc/custom/_forms.scss
index 1195f6c..b7747bf 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 ea300ec..eff2924 100644
--- a/src/assets/styles/bmc/helpers/_variables.scss
+++ b/src/assets/styles/bmc/helpers/_variables.scss
@@ -8,4 +8,6 @@
// 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 8f54cbb..c56bcf5 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 @@
}
};
</script>
-
-<style lang="scss" scoped>
-.boot-settings {
- background-color: gray('200');
-}
-</style>