Simplify checkbox & radio input (twbs#30557)

- Define background properties in `.form-check-input` - Use `background-size: contain` to simplify background sizes (especially for those with linear gradients) - Remove double `color-adjust` - Adjust svgs to 20x20 box. This way the strokes aren't rescaled.
olsza · Oct 3, 2020 · 04e716a · 04e716a
1 parent cd834e3
commit 04e716a
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 23 deletions.
diff --git a/scss/_variables.scss b/scss/_variables.scss
@@ -649,25 +649,18 @@ $form-check-input-focus-box-shadow:       $input-btn-focus-box-shadow !default;
 $form-check-input-checked-color:          $component-active-color !default;
 $form-check-input-checked-bg-color:       $component-active-bg !default;
 $form-check-input-checked-border-color:   $form-check-input-checked-bg-color !default;
-$form-check-input-checked-bg-repeat:      no-repeat !default;
-$form-check-input-checked-bg-position:    center center !default;
-$form-check-input-checked-bg-size:        1em !default;
-$form-check-input-checked-bg-image:       url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#{$form-check-input-checked-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M4 8.5L6.5 11l6-6'/></svg>") !default;
+$form-check-input-checked-bg-image:       url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#{$form-check-input-checked-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/></svg>") !default;
 $form-check-radio-checked-bg-image:       url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='2' fill='#{$form-check-input-checked-color}'/></svg>") !default;
 
 $form-check-input-indeterminate-color:          $component-active-color !default;
 $form-check-input-indeterminate-bg-color:       $component-active-bg !default;
 $form-check-input-indeterminate-border-color:   $form-check-input-indeterminate-bg-color !default;
-$form-check-input-indeterminate-bg-repeat:      no-repeat !default;
-$form-check-input-indeterminate-bg-position:    center center !default;
-$form-check-input-indeterminate-bg-size:        1em !default;
-$form-check-input-indeterminate-bg-image:       url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#{$form-check-input-indeterminate-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M5 8h6'/></svg>") !default;
+$form-check-input-indeterminate-bg-image:       url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#{$form-check-input-indeterminate-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/></svg>") !default;
 
 $form-switch-color:               rgba(0, 0, 0, .25) !default;
 $form-switch-width:               2em !default;
 $form-switch-padding-left:        $form-switch-width + .5em !default;
 $form-switch-bg-image:            url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-color}'/></svg>") !default;
-$form-switch-bg-size:             contain !default;
 $form-switch-border-radius:       $form-switch-width !default;
 
 $form-switch-focus-color:         hsla(211, 100%, 75%, 1) !default;

diff --git a/scss/forms/_form-check.scss b/scss/forms/_form-check.scss
@@ -20,6 +20,9 @@
   margin-top: ($line-height-base - $form-check-input-width) / 2; // line-height minus check height
   vertical-align: top;
   background-color: $form-check-input-bg;
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: contain;
   border: $form-check-input-border;
   appearance: none;
   color-adjust: exact; // Keep themed appearance for print
@@ -45,15 +48,11 @@
 
   &:checked {
     background-color: $form-check-input-checked-bg-color;
-    background-repeat: $form-check-input-checked-bg-repeat;
-    background-position: $form-check-input-checked-bg-position;
-    background-size: $form-check-input-checked-bg-size;
     border-color: $form-check-input-checked-border-color;
 
     &[type="checkbox"] {
       @if $enable-gradients {
         background-image: escape-svg($form-check-input-checked-bg-image), linear-gradient(180deg, lighten($form-check-input-checked-bg-color, 10%), $form-check-input-checked-bg-color);
-        background-size: $form-check-input-checked-bg-size, auto;
       } @else {
         background-image: escape-svg($form-check-input-checked-bg-image);
       }
@@ -62,7 +61,6 @@
     &[type="radio"] {
       @if $enable-gradients {
         background-image: escape-svg($form-check-radio-checked-bg-image), linear-gradient(180deg, lighten($form-check-input-checked-bg-color, 10%), $form-check-input-checked-bg-color);
-        background-size: $form-check-input-checked-bg-size, auto;
       } @else {
         background-image: escape-svg($form-check-radio-checked-bg-image);
       }
@@ -71,16 +69,13 @@
 
   &[type="checkbox"]:indeterminate {
     background-color: $form-check-input-indeterminate-bg-color;
-    background-repeat: $form-check-input-indeterminate-bg-repeat;
-    background-position: $form-check-input-indeterminate-bg-position;
+    border-color: $form-check-input-indeterminate-border-color;
+
     @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-size: $form-check-input-checked-bg-size, auto;
     } @else {
       background-image: escape-svg($form-check-input-indeterminate-bg-image);
-      background-size: $form-check-input-indeterminate-bg-size;
     }
-    border-color: $form-check-input-indeterminate-border-color;
   }
 
   &:disabled {
@@ -115,11 +110,8 @@
     width: $form-switch-width;
     margin-left: $form-switch-padding-left * -1;
     background-image: escape-svg($form-switch-bg-image);
-    background-repeat: no-repeat;
     background-position: left center;
-    background-size: $form-switch-bg-size; // Get a 1px separation
     @include border-radius($form-switch-border-radius);
-    color-adjust: exact; // Keep themed appearance for print
 
     &:focus {
       background-image: escape-svg($form-switch-focus-bg-image);
@@ -130,7 +122,6 @@
 
       @if $enable-gradients {
         background-image: escape-svg($form-switch-checked-bg-image), linear-gradient(180deg, $form-check-input-checked-bg-color, lighten($form-check-input-checked-bg-color, 10%));
-        background-size: $form-switch-bg-size, auto;
       } @else {
         background-image: escape-svg($form-switch-checked-bg-image);
       }