Fix custom toggle issues #8 and #9

DesignRevision · Dec 4, 2017 · f7b16b4 · f7b16b4
1 parent a47e554
commit f7b16b4
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 2 deletions.
diff --git a/src/scss/_custom-forms.scss b/src/scss/_custom-forms.scss
@@ -327,6 +327,7 @@
     display: block;
     border-radius: $custom-toggle-border-radius;
     border: $custom-toggle-border;
+    opacity: 0.99;
 
     &:hover {
       cursor: pointer;
@@ -367,7 +368,7 @@
   }
 
   .custom-control-input:checked + .custom-control-indicator:after {
-    left: calc(100% - 3px);
+    left: $custom-toggle-width - $custom-toggle-border-width - 3px;
     transform: translateX(-100%);
   }
 

diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss
@@ -505,7 +505,8 @@ $custom-file-text: (
 // Custom toggle
 $custom-toggle-width: 50px;
 $custom-toggle-height: 28px;
-$custom-toggle-border: 1px solid $input-border-color;
+$custom-toggle-border-width: 1px;
+$custom-toggle-border: $custom-toggle-border-width solid $input-border-color;
 $custom-toggle-background-color: $white;
 $custom-toggle-border-radius: 100px;