diff options
author | Yoshie Muranaka <yoshiemuranaka@gmail.com> | 2020-07-09 01:46:43 +0300 |
---|---|---|
committer | Derick Montague <derick.montague@ibm.com> | 2020-07-21 01:28:16 +0300 |
commit | 01da81870818c364a67d9ba97ca84aec9afbcc4d (patch) | |
tree | 5962f489c9f86a46b3dab40734b882723a347f42 /src/assets/styles/bmc/custom/_forms.scss | |
parent | 330585760167d233a67a9301be991ba26b8e57df (diff) | |
download | webui-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.scss | 16 |
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 |