fix(form-checks): needed some tweaks after pulling Bootstrap's master

Orange-OpenSource · May 18, 2020 · 1e78211 · 1e78211
1 parent 0e8cb19
commit 1e78211
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 2 deletions.
diff --git a/scss/_variables.scss b/scss/_variables.scss
@@ -716,14 +716,15 @@ $form-switch-width: $spacer * 3 !default;
 $form-switch-padding-left: $form-switch-width + .5rem !default;
 // Boosted mod
 $form-switch-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path fill='#{$white}' stroke='#{$white}' stroke-width='5' d='M15 17.121l-8.132 8.132-2.121-2.12L12.879 15 4.747 6.868l2.12-2.121L15 12.879l8.132-8.132 2.12 2.121L17.122 15l8.132 8.132-2.121 2.12L15 17.123z'/></svg>") !default;
+$form-switch-bg-position: right .5rem top 50% !default;
 $form-switch-bg-size: .75rem !default;
 $form-switch-bg-square-size: add(1rem, $spacer / 2) !default;
 // End mod
 $form-switch-border-radius: null !default;
 
 $form-switch-checked-bg-image: $form-check-input-checked-bg-image !default;
 $form-switch-checked-bg-size: add(map-get($spacers, 2), map-get($spacers, 1)) !default;
-$form-switch-checked-bg-position: .5rem 50% !default;
+$form-switch-checked-bg-position: $border-width * 3 50% !default;
 
 $form-check-inline-margin-right: 1rem !default;
 

diff --git a/scss/forms/_form-check.scss b/scss/forms/_form-check.scss
@@ -79,8 +79,12 @@
 
  @if $enable-gradients {
  background-image: escape-svg($form-check-input-indeterminate-bg-image), linear-gradient(180deg, lighten($form-check-input-checked-bg-color, 10%), $form-check-input-checked-bg-color);
+ background-position: 50% add(50%, $border-width / 4), center; // Boosted mod
+ background-size: map-get($spacers, 2) $border-width * 1.5, auto; // Boosted mod
  } @else {
  background-image: escape-svg($form-check-input-indeterminate-bg-image);
+ background-position: 50% add(50%, $border-width / 4); // Boosted mod
+ background-size: map-get($spacers, 2) $border-width * 1.5; // Boosted mod
  }
  }
 
@@ -134,7 +138,7 @@
  margin-left: $form-switch-padding-left * -1;
  background-color: $black; // Boosted mod
  background-image: escape-svg($form-switch-bg-image), linear-gradient(to right, $white $form-switch-bg-square-size, transparent);
- background-position: right .5rem top 50%, 0 0; // Boosted mod
+ background-position: $form-switch-bg-position, 0 0; // Boosted mod
  background-size: $form-switch-bg-size, $form-switch-bg-square-size; // Get a 1px separation
  border-color: $black; // Boosted mod
  @include border-radius($form-switch-border-radius);