feat(forms): get background-image back for custom checkboxes

Orange-OpenSource · Jan 10, 2020 · edfdded · edfdded
1 parent e22baf8
commit edfdded
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 28 deletions.
diff --git a/scss/_custom-forms.scss b/scss/_custom-forms.scss
@@ -141,30 +141,14 @@
   // Boosted mod
   .custom-control-input:not(:disabled):checked ~ .custom-control-label {
     &::before {
-      border: 2px solid $primary;
+      border: $border-width solid $primary;
     }
   }
   // end mod
+
   .custom-control-input:checked ~ .custom-control-label {
     &::after {
-      // Boosted mod: using borders instead of background for WHCM
-
-      /* rtl:begin:ignore */
-      top: .4rem;
-
-      /* rtl:end:ignore */
-      left: .2585rem;
-
-      /* rtl:begin:ignore */
-      width: .8272rem;
-      height: .3619rem;
-      border: 3px solid $white;
-      border-top: none;
-      border-right: none;
-      transform: rotate(-45deg);
-
-      /* rtl:end:ignore */
-      // end mod
+      background-image: escape-svg($custom-checkbox-indicator-icon-checked);
     }
   }
 
@@ -185,11 +169,9 @@
       @include box-shadow($custom-checkbox-indicator-indeterminate-box-shadow);
     }
     &::after {
-      // Boosted mod using borders instead of background for WHCM
-      border: 0;
-      border-bottom: 3px solid $white;
-      transform: scaleX(.5) translateY(-.5rem);
-      // end mod
+      background-image: escape-svg($custom-checkbox-indicator-icon-indeterminate);
+      background-size: map-get($spacers, 2) $border-width * 1.5;
+      transform: translateY($border-width / 4);
     }
   }
 

diff --git a/scss/_variables.scss b/scss/_variables.scss
@@ -619,7 +619,7 @@ $custom-control-cursor:                 null !default;
 $custom-control-indicator-size:         $spacer !default;
 $custom-control-indicator-bg:           $white !default;
 
-$custom-control-indicator-bg-size:      1rem !default;
+$custom-control-indicator-bg-size:      .9375rem !default; // Boosted mod
 $custom-control-indicator-box-shadow:   null !default;
 $custom-control-indicator-border-color: $gray-500 !default;
 $custom-control-indicator-border-width: $input-border-width !default;
@@ -645,11 +645,11 @@ $custom-control-indicator-active-box-shadow:    null !default;
 $custom-control-indicator-active-border-color:  $custom-control-indicator-active-bg !default;
 
 $custom-checkbox-indicator-border-radius:       $border-radius !default;
-// $custom-checkbox-indicator-icon-checked:        url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'><path fill='#{$custom-control-indicator-checked-color}' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26l2.974 2.99L8 2.193z'/></svg>") !default;
+$custom-checkbox-indicator-icon-checked:        url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 12'><path fill='#{$custom-control-indicator-checked-color}' d='M13 0L5 8 2 5 0 7l5 5L15 2z'/></svg>") !default; // Boosted mod
 
 $custom-checkbox-indicator-indeterminate-bg:           $component-active-bg !default;
-$custom-checkbox-indicator-indeterminate-color:        null !default;
-// $custom-checkbox-indicator-icon-indeterminate:         url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'><path stroke='#{$custom-checkbox-indicator-indeterminate-color}' d='M0 2h4'/></svg>") !default;
+$custom-checkbox-indicator-indeterminate-color:        $white !default; // Boosted mod
+$custom-checkbox-indicator-icon-indeterminate:         url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 3'><path fill='#{$custom-checkbox-indicator-indeterminate-color}' d='M0 0h10v3H0z'/></svg>") !default; // Boosted mod
 $custom-checkbox-indicator-indeterminate-box-shadow:   null !default;
 $custom-checkbox-indicator-indeterminate-border-color: $custom-checkbox-indicator-indeterminate-bg !default;