Update checkboxes to match style guide
- Changes focus, checked and hover state
- Changes indeterminate checkbox style
Signed-off-by: Dixsie Wolmers <dixsie@ibm.com>
Change-Id: Ic15a1a64d226bc160feea62ff140f38c11c4cca3
diff --git a/src/assets/styles/bmc/custom/_forms.scss b/src/assets/styles/bmc/custom/_forms.scss
index 60f4a84..3c1d5ad 100644
--- a/src/assets/styles/bmc/custom/_forms.scss
+++ b/src/assets/styles/bmc/custom/_forms.scss
@@ -76,6 +76,14 @@
line-height: $form-line-height;
}
+.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: 1px solid $white;
+ cursor: pointer;
+}
+
.custom-control {
.custom-control-input[disabled=disabled] {
& + .custom-control-label {
@@ -86,6 +94,14 @@
}
}
+.custom-control-input:focus ~ .custom-control-label::before{
+ box-shadow: 0 0 0 2px theme-color("primary");
+}
+
+.custom-control-label::after {
+ cursor: pointer;
+}
+
.b-form-tag-remove {
// X button to remove tag
font-weight: normal;