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)}; } } }