diff --git a/scss/_variables.scss b/scss/_variables.scss
index 34ec933222..cf04680a0b 100644
--- 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,") !default;
+// fusv-disable
+$form-switch-focus-bg-image: url("data:image/svg+xml,") !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,") !default;
diff --git a/scss/forms/_form-check.scss b/scss/forms/_form-check.scss
index f8d9b08f8c..eec99c58cc 100644
--- 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;
+ @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"] {
- @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)};
- }
- }
}
&[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)};
- }
-
- &:checked {
- background-position: $form-switch-checked-bg-position;
-
- @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)};
- }
- }
+ @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)};
}
+ --#{$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};
+
+ 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)};
}
}
}