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

1 files changed, 16 insertions, 0 deletions

diff --git a/src/assets/styles/bmc/custom/_forms.scss b/src/assets/styles/bmc/custom/_forms.scss
index 60f4a84d..3c1d5ad0 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;