mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-16 02:24:19 +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 // scss-docs-start form-check-variables
$form-check-input-width: 1em !default; $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-min-height: $font-size-base * $line-height-base !default;
$form-check-padding-start: $form-check-input-width + .5em !default; $form-check-padding-start: $form-check-input-width + .5em !default;
$form-check-margin-bottom: .125rem !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-transition: background-position .15s ease-in-out !default;
$form-switch-focus-color: $input-focus-border-color !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-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; $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 // 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 { .form-check-input {
--#{$prefix}form-check-bg: #{$form-check-input-bg}; float: var(--#{$prefix}form-check-float, left);
width: var(--#{$prefix}form-check-input-width, $form-check-input-width);
width: $form-check-input-width; height: var(--#{$prefix}form-check-input-height, $form-check-input-height);
height: $form-check-input-width; 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
margin-top: ($line-height-base - $form-check-input-width) * .5; // line-height minus check height
vertical-align: top; vertical-align: top;
appearance: none; 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-image: var(--#{$prefix}form-check-bg-image);
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: var(--#{$prefix}form-check-bg-position, center);
background-size: contain; background-size: contain;
border: $form-check-input-border; border: $form-check-input-border;
print-color-adjust: exact; // Keep themed appearance for print print-color-adjust: exact; // Keep themed appearance for print
@include transition($form-check-transition); @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="checkbox"] {
@include border-radius($form-check-input-border-radius);
}
&[type="radio"] { &[type="radio"] {
// stylelint-disable-next-line property-disallowed-list @if $enable-gradients {
border-radius: $form-check-radio-border-radius; --#{$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 { &:active {
@@ -64,23 +40,13 @@
&:checked { &:checked {
background-color: $form-check-input-checked-bg-color; 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; 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 { &[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 { .form-check-label {
color: $form-check-label-color; color: $form-check-label-color;
cursor: $form-check-label-cursor; cursor: $form-check-label-cursor;
@@ -121,41 +106,28 @@
// //
.form-switch { .form-switch {
padding-left: $form-switch-padding-start; @if $enable-gradients {
--#{$prefix}form-check-checked-bg-image: #{escape-svg($form-switch-checked-bg-image)}, var(--#{$prefix}gradient);
.form-check-input { } @else {
--#{$prefix}form-switch-bg: #{escape-svg($form-switch-bg-image)}; --#{$prefix}form-check-checked-bg-image: #{escape-svg($form-switch-checked-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)};
}
}
} }
--#{$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 { &.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-right: $form-switch-padding-start;
padding-left: 0; padding-left: 0;
.form-check-input {
margin-right: $form-switch-padding-start * -1;
margin-left: 0;
}
} }
} }
@@ -181,8 +153,8 @@
@if $enable-dark-mode { @if $enable-dark-mode {
@include color-mode(dark) { @include color-mode(dark) {
.form-switch .form-check-input:not(:checked):not(:focus) { .form-switch .form-check-input:not(:checked) {
--#{$prefix}form-switch-bg: #{escape-svg($form-switch-bg-image-dark)}; --#{$prefix}form-check-bg-image: #{escape-svg($form-switch-bg-image-dark)};
} }
} }
} }