From f1b78837c97cd1ca6c7afb5f6daf3df9522af9bf Mon Sep 17 00:00:00 2001 From: Derick Montague Date: Tue, 24 Nov 2020 10:30:40 -0600 Subject: 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 Change-Id: I0fb356153f216c6a79ba57e5f38294871c63dc6a --- src/assets/styles/bmc/custom/_forms.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'src/assets/styles/bmc') diff --git a/src/assets/styles/bmc/custom/_forms.scss b/src/assets/styles/bmc/custom/_forms.scss index 0451474b..cea5ef50 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%; } } -- cgit v1.2.3