Fix pixelated toggle element
On some screens, the toggle element is pixelated due to the border
color. When looking at Bootstrap default styles, they use the same
color for both the toggle element's background color and border color.
This change resolves the pixelation issue and follows the same pattern
as the Bootstrap component library.
Signed-off-by: Derick Montague <derick.montague@ibm.com>
Change-Id: I0fb356153f216c6a79ba57e5f38294871c63dc6a
diff --git a/src/assets/styles/bmc/custom/_forms.scss b/src/assets/styles/bmc/custom/_forms.scss
index 0451474..cea5ef5 100644
--- a/src/assets/styles/bmc/custom/_forms.scss
+++ b/src/assets/styles/bmc/custom/_forms.scss
@@ -80,7 +80,7 @@
.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;
+ border-color: $black;
cursor: pointer;
}
@@ -127,6 +127,6 @@
.form-control-with-button {
&.is-invalid,
&.is-valid {
- background-position: right 2.5rem bottom 50%;
+ background-position: right 3rem bottom 50%;
}
}