summaryrefslogtreecommitdiff
path: root/src/assets/styles/bmc/custom/_forms.scss
diff options
context:
space:
mode:
authorYoshie Muranaka <yoshiemuranaka@gmail.com>2020-07-09 01:46:43 +0300
committerDerick Montague <derick.montague@ibm.com>2020-07-21 01:28:16 +0300
commit01da81870818c364a67d9ba97ca84aec9afbcc4d (patch)
tree5962f489c9f86a46b3dab40734b882723a347f42 /src/assets/styles/bmc/custom/_forms.scss
parent330585760167d233a67a9301be991ba26b8e57df (diff)
downloadwebui-vue-01da81870818c364a67d9ba97ca84aec9afbcc4d.tar.xz
Update use of Sass variables for better theming
Use Bootstrap color functions for theme-colors and grays instead of directly referencing Sass variable to allow more flexible theming. Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com> Change-Id: Id08b77ff6df3bdf99400dcdfe964853706f1070f
Diffstat (limited to 'src/assets/styles/bmc/custom/_forms.scss')
-rw-r--r--src/assets/styles/bmc/custom/_forms.scss16
1 files changed, 8 insertions, 8 deletions
diff --git a/src/assets/styles/bmc/custom/_forms.scss b/src/assets/styles/bmc/custom/_forms.scss
index 8d3ed9e4..1195f6cb 100644
--- a/src/assets/styles/bmc/custom/_forms.scss
+++ b/src/assets/styles/bmc/custom/_forms.scss
@@ -1,11 +1,11 @@
.form-text {
margin-top: -$spacer / 4;
margin-bottom: $spacer / 2;
- color: $gray-800;
+ color: gray("800");
}
.col-form-label {
- color: $gray-800;
+ color: gray("800");
font-size: 14px;
}
@@ -17,12 +17,12 @@
.custom-control-label,
.form-control {
//important needed to override validation colors on radio labels
- color: $dark !important;
+ color: theme-color("dark") !important;
font-size: 16px;
- border-color: $gray-400 !important;
+ border-color: gray("400") !important;
&.is-invalid,
&:invalid {
- border-bottom: 2px solid $danger !important;
+ border-bottom: 2px solid theme-color("danger") !important;
}
}
@@ -31,7 +31,7 @@
& + .custom-control-label {
// Disabled label for checkbox, radio,
// switch bootstrap form components
- color: $gray-700!important;
+ color: gray("700")!important;
}
}
}
@@ -46,11 +46,11 @@
white-space: nowrap;
margin-right: -$spacer;
&.btn-link-primary {
- color: $primary;
+ color: theme-color("primary");
fill: currentColor;
}
}
.form-background {
- background-color: $container-bgd;
+ background-color: gray("200");
} \ No newline at end of file