Reminder for form-check but there might be more to do in here.

diff --git a/scss/_variables.scss b/scss/_variables.scss
index 34ec933222a54edfcd762cb1fa3fb67f9a5880e3..cf04680a0b5ebb1580484bff1cf6f6b91b27b91c 100644 (file)
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -936,6 +936,7 @@ $form-color-width:                      3rem !default;
 
 // scss-docs-start form-check-variables
 $form-check-input-width:                  1em !default;
+$form-check-input-height:                 $form-check-input-width !default;
 $form-check-min-height:                   $font-size-base * $line-height-base !default;
 $form-check-padding-start:                $form-check-input-width + .5em !default;
 $form-check-margin-bottom:                .125rem !default;
@@ -979,7 +980,9 @@ $form-switch-border-radius:       $form-switch-width !default;
 $form-switch-transition:          background-position .15s ease-in-out !default;
 
 $form-switch-focus-color:         $input-focus-border-color !default;
-$form-switch-focus-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-focus-color}'/></svg>") !default;
+// fusv-disable
+$form-switch-focus-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-focus-color}'/></svg>") !default; // Deprecated in 5.3.2
+// fusv-enable
 
 $form-switch-checked-color:       $component-active-color !default;
 $form-switch-checked-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-checked-color}'/></svg>") !default;

diff --git a/scss/forms/_form-check.scss b/scss/forms/_form-check.scss
index f8d9b08f8ce705e52de6754bca420c54d5433fdd..eec99c58cc56e83020c5f24041dd9209cf08fbab 100644 (file)
--- a/scss/forms/_form-check.scss
+++ b/scss/forms/_form-check.scss
@@ -2,54 +2,30 @@
 // Check/radio
 //
 
-.form-check {
-  display: block;
-  min-height: $form-check-min-height;
-  padding-left: $form-check-padding-start;
-  margin-bottom: $form-check-margin-bottom;
-
-  .form-check-input {
-    float: left;
-    margin-left: $form-check-padding-start * -1;
-  }
-}
-
-.form-check-reverse {
-  padding-right: $form-check-padding-start;
-  padding-left: 0;
-  text-align: right;
-
-  .form-check-input {
-    float: right;
-    margin-right: $form-check-padding-start * -1;
-    margin-left: 0;
-  }
-}
-
 .form-check-input {
-  --#{$prefix}form-check-bg: #{$form-check-input-bg};
-
-  width: $form-check-input-width;
-  height: $form-check-input-width;
-  margin-top: ($line-height-base - $form-check-input-width) * .5; // line-height minus check height
+  float: var(--#{$prefix}form-check-float, left);
+  width: var(--#{$prefix}form-check-input-width, $form-check-input-width);
+  height: var(--#{$prefix}form-check-input-height, $form-check-input-height);
+  margin: ($line-height-base - $form-check-input-width) * .5 var(--#{$prefix}form-check-input-margin-right, 0) 0 var(--#{$prefix}form-check-input-margin-left, 0); // line-height minus check height
   vertical-align: top;
   appearance: none;
-  background-color: var(--#{$prefix}form-check-bg);
+  background-color: var(--#{$prefix}form-check-bg, $form-check-input-bg);
   background-image: var(--#{$prefix}form-check-bg-image);
   background-repeat: no-repeat;
-  background-position: center;
+  background-position: var(--#{$prefix}form-check-bg-position, center);
   background-size: contain;
   border: $form-check-input-border;
   print-color-adjust: exact; // Keep themed appearance for print
-  @include transition($form-check-transition);
-
-  &[type="checkbox"] {
-    @include border-radius($form-check-input-border-radius);
-  }
+  @include transition(var(--#{$prefix}form-check-transition, $form-check-transition));
+  border-radius: var(--#{$prefix}form-check-border-radius, $form-check-input-border-radius); // stylelint-disable-line property-disallowed-list
 
   &[type="radio"] {
-    // stylelint-disable-next-line property-disallowed-list
-    border-radius: $form-check-radio-border-radius;
+    @if $enable-gradients {
+      --#{$prefix}form-check-checked-bg-image: #{escape-svg($form-check-radio-checked-bg-image)}, var(--#{$prefix}gradient);
+    } @else {
+      --#{$prefix}form-check-checked-bg-image: #{escape-svg($form-check-radio-checked-bg-image)};
+    }
+    --#{$prefix}form-check-border-radius: #{$form-check-radio-border-radius};
   }
 
   &:active {
@@ -64,23 +40,13 @@
 
   &:checked {
     background-color: $form-check-input-checked-bg-color;
-    border-color: $form-check-input-checked-border-color;
-
-    &[type="checkbox"] {
-      @if $enable-gradients {
-        --#{$prefix}form-check-bg-image: #{escape-svg($form-check-input-checked-bg-image)}, var(--#{$prefix}gradient);
-      } @else {
-        --#{$prefix}form-check-bg-image: #{escape-svg($form-check-input-checked-bg-image)};
-      }
-    }
-
-    &[type="radio"] {
-      @if $enable-gradients {
-        --#{$prefix}form-check-bg-image: #{escape-svg($form-check-radio-checked-bg-image)}, var(--#{$prefix}gradient);
-      } @else {
-        --#{$prefix}form-check-bg-image: #{escape-svg($form-check-radio-checked-bg-image)};
-      }
+    @if $enable-gradients {
+      background-image: var(--#{$prefix}form-check-checked-bg-image, escape-svg($form-check-input-checked-bg-image), var(--#{$prefix}gradient));
+    } @else {
+      background-image: var(--#{$prefix}form-check-checked-bg-image, escape-svg($form-check-input-checked-bg-image));
     }
+    background-position: var(--#{$prefix}form-check-checked-bg-position, center);
+    border-color: $form-check-input-checked-border-color;
   }
 
   &[type="checkbox"]:indeterminate {
@@ -111,6 +77,25 @@
   }
 }
 
+.form-check {
+  --#{$prefix}form-check-input-margin-left: #{-$form-check-padding-start};
+
+  display: block;
+  min-height: $form-check-min-height;
+  padding-left: $form-check-padding-start;
+  margin-bottom: $form-check-margin-bottom;
+}
+
+.form-check-reverse {
+  --#{$prefix}form-check-float: #{right};
+  --#{$prefix}form-check-input-margin-left: #{0};
+  --#{$prefix}form-check-input-margin-right: #{-$form-check-padding-start};
+
+  padding-right: $form-check-padding-start;
+  padding-left: 0;
+  text-align: right;
+}
+
 .form-check-label {
   color: $form-check-label-color;
   cursor: $form-check-label-cursor;
@@ -121,41 +106,28 @@
 //
 
 .form-switch {
-  padding-left: $form-switch-padding-start;
-
-  .form-check-input {
-    --#{$prefix}form-switch-bg: #{escape-svg($form-switch-bg-image)};
-
-    width: $form-switch-width;
-    margin-left: $form-switch-padding-start * -1;
-    background-image: var(--#{$prefix}form-switch-bg);
-    background-position: left center;
-    @include border-radius($form-switch-border-radius);
-    @include transition($form-switch-transition);
-
-    &:focus {
-      --#{$prefix}form-switch-bg: #{escape-svg($form-switch-focus-bg-image)};
-    }
+  @if $enable-gradients {
+    --#{$prefix}form-check-checked-bg-image: #{escape-svg($form-switch-checked-bg-image)}, var(--#{$prefix}gradient);
+  } @else {
+    --#{$prefix}form-check-checked-bg-image: #{escape-svg($form-switch-checked-bg-image)};
+  }
 
-    &:checked {
-      background-position: $form-switch-checked-bg-position;
+  --#{$prefix}form-check-input-width: #{$form-switch-width};
+  --#{$prefix}form-check-input-margin-left: #{-$form-switch-padding-start};
+  --#{$prefix}form-check-bg-image: #{escape-svg($form-switch-bg-image)};
+  --#{$prefix}form-check-bg-position: #{left center};
+  --#{$prefix}form-check-checked-bg-position: #{$form-switch-checked-bg-position};
+  --#{$prefix}form-check-transition: #{$form-switch-transition};
+  --#{$prefix}form-check-border-radius: #{$form-switch-border-radius};
 
-      @if $enable-gradients {
-        --#{$prefix}form-switch-bg: #{escape-svg($form-switch-checked-bg-image)}, var(--#{$prefix}gradient);
-      } @else {
-        --#{$prefix}form-switch-bg: #{escape-svg($form-switch-checked-bg-image)};
-      }
-    }
-  }
+  padding-left: $form-switch-padding-start;
 
   &.form-check-reverse {
+    --#{$prefix}form-check-input-margin-left: #{0};
+    --#{$prefix}form-check-input-margin-right: #{-$form-switch-padding-start};
+
     padding-right: $form-switch-padding-start;
     padding-left: 0;
-
-    .form-check-input {
-      margin-right: $form-switch-padding-start * -1;
-      margin-left: 0;
-    }
   }
 }
 
@@ -181,8 +153,8 @@
 
 @if $enable-dark-mode {
   @include color-mode(dark) {
-    .form-switch .form-check-input:not(:checked):not(:focus) {
-      --#{$prefix}form-switch-bg: #{escape-svg($form-switch-bg-image-dark)};
+    .form-switch .form-check-input:not(:checked) {
+      --#{$prefix}form-check-bg-image: #{escape-svg($form-switch-bg-image-dark)};
     }
   }
 }