rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2024-12-01 13:24:25 +01:00
Code Issues Actions Packages Releases Activity

Simplify checkbox & radio input (#30557)

Browse Source 
- Define background properties in `.form-check-input`
- Use `background-size: contain` to simplify background sizes (especially for those with linear gradients)
- Remove double `color-adjust`
- Adjust svgs to 20x20 box. This way the strokes aren't rescaled.
This commit is contained in:
Martijn Cuppens 2020-04-14 15:05:34 +02:00 committed by GitHub
parent 9eaeb38ac0
commit ed8fd689e6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 7 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
scss/_variables.scss
View File

@ -649,25 +649,18 @@ $form-check-input-focus-box-shadow: $input-btn-focus-box-shadow !default;
$form-check-input-checked-color: $component-active-color !default;
$form-check-input-checked-bg-color: $component-active-bg !default;
$form-check-input-checked-border-color: $form-check-input-checked-bg-color !default;
$form-check-input-checked-bg-repeat: no-repeat !default;
$form-check-input-checked-bg-position: center center !default;
$form-check-input-checked-bg-size: 1em !default;
$form-check-input-checked-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#{$form-check-input-checked-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M4 8.5L6.5 11l6-6'/></svg>") !default;
$form-check-input-checked-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#{$form-check-input-checked-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/></svg>") !default;
$form-check-radio-checked-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='2' fill='#{$form-check-input-checked-color}'/></svg>") !default;
$form-check-input-indeterminate-color: $component-active-color !default;
$form-check-input-indeterminate-bg-color: $component-active-bg !default;
$form-check-input-indeterminate-border-color: $form-check-input-indeterminate-bg-color !default;
$form-check-input-indeterminate-bg-repeat: no-repeat !default;
$form-check-input-indeterminate-bg-position: center center !default;
$form-check-input-indeterminate-bg-size: 1em !default;
$form-check-input-indeterminate-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#{$form-check-input-indeterminate-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M5 8h6'/></svg>") !default;
$form-check-input-indeterminate-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#{$form-check-input-indeterminate-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/></svg>") !default;
$form-switch-color: rgba(0, 0, 0, .25) !default;
$form-switch-width: 2em !default;
$form-switch-padding-left: $form-switch-width + .5em !default;
$form-switch-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-color}'/></svg>") !default;
$form-switch-bg-size: contain !default;
$form-switch-border-radius: $form-switch-width !default;
$form-switch-focus-color: hsla(211, 100%, 75%, 1) !default;

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

@ -20,6 +20,9 @@
margin-top: ($line-height-base - $form-check-input-width) / 2; // line-height minus check height
vertical-align: top;
background-color: $form-check-input-bg;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
border: $form-check-input-border;
appearance: none;
color-adjust: exact; // Keep themed appearance for print
@ -45,15 +48,11 @@
&:checked {
background-color: $form-check-input-checked-bg-color;
background-repeat: $form-check-input-checked-bg-repeat;
background-position: $form-check-input-checked-bg-position;
background-size: $form-check-input-checked-bg-size;
border-color: $form-check-input-checked-border-color;
&[type="checkbox"] {
@if $enable-gradients {
background-image: escape-svg($form-check-input-checked-bg-image), linear-gradient(180deg, lighten($form-check-input-checked-bg-color, 10%), $form-check-input-checked-bg-color);
background-size: $form-check-input-checked-bg-size, auto;
} @else {
background-image: escape-svg($form-check-input-checked-bg-image);
}
@ -62,7 +61,6 @@
&[type="radio"] {
@if $enable-gradients {
background-image: escape-svg($form-check-radio-checked-bg-image), linear-gradient(180deg, lighten($form-check-input-checked-bg-color, 10%), $form-check-input-checked-bg-color);
background-size: $form-check-input-checked-bg-size, auto;
} @else {
background-image: escape-svg($form-check-radio-checked-bg-image);
}
@ -71,16 +69,13 @@
&[type="checkbox"]:indeterminate {
background-color: $form-check-input-indeterminate-bg-color;
background-repeat: $form-check-input-indeterminate-bg-repeat;
background-position: $form-check-input-indeterminate-bg-position;
border-color: $form-check-input-indeterminate-border-color;
@if $enable-gradients {
background-image: escape-svg($form-check-input-indeterminate-bg-image), linear-gradient(180deg, lighten($form-check-input-checked-bg-color, 10%), $form-check-input-checked-bg-color);
background-size: $form-check-input-checked-bg-size, auto;
} @else {
background-image: escape-svg($form-check-input-indeterminate-bg-image);
background-size: $form-check-input-indeterminate-bg-size;
}
border-color: $form-check-input-indeterminate-border-color;
}
&:disabled {
@ -115,11 +110,8 @@
width: $form-switch-width;
margin-left: $form-switch-padding-left * -1;
background-image: escape-svg($form-switch-bg-image);
background-repeat: no-repeat;
background-position: left center;
background-size: $form-switch-bg-size; // Get a 1px separation
@include border-radius($form-switch-border-radius);
color-adjust: exact; // Keep themed appearance for print
&:focus {
background-image: escape-svg($form-switch-focus-bg-image);
@ -130,7 +122,6 @@
@if $enable-gradients {
background-image: escape-svg($form-switch-checked-bg-image), linear-gradient(180deg, $form-check-input-checked-bg-color, lighten($form-check-input-checked-bg-color, 10%));
background-size: $form-switch-bg-size, auto;
} @else {
background-image: escape-svg($form-switch-checked-bg-image);
}