mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-15 10:05:40 +02:00
Code Issues Releases Wiki Activity

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

Browse Source
This commit is contained in:
louismaxime.piton
2023-08-21 17:29:06 +02:00
parent 2b4699333c
commit e74644867c
2 changed files with 62 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
scss/_variables.scss
View File

@@ -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;

144
scss/forms/_form-check.scss
View File

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