mirror/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-02-23 09:41:11 +00:00
Code Issues Projects Releases Wiki Activity

Add checkbox transition (#30528)

Browse Source
This commit is contained in:
Martijn Cuppens 2020-04-09 08:07:11 +02:00 committed by GitHub
parent 9f6ccf9d12
commit 5e65b12f1c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 2 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
scss/_variables.scss
View File

@ -621,6 +621,7 @@ $form-check-padding-left: $form-check-input-width + .5em !defaul
$form-check-margin-bottom: .125rem !default; $form-check-margin-bottom: .125rem !default;
$form-check-label-color: null !default; $form-check-label-color: null !default;
$form-check-label-cursor: null !default; $form-check-label-cursor: null !default;
$form-check-transition: background-color .15s ease-in-out, background-position .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
$form-check-input-active-filter: brightness(90%) !default; $form-check-input-active-filter: brightness(90%) !default;
@ -654,8 +655,6 @@ $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-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-bg-size: contain !default;
$form-switch-border-radius: $form-switch-width !default; $form-switch-border-radius: $form-switch-width !default;
$form-switch-transition: .2s ease-in-out !default;
$form-switch-transition-property: background-position, background-color !default;
$form-switch-focus-color: hsla(211, 100%, 75%, 1) !default; $form-switch-focus-color: hsla(211, 100%, 75%, 1) !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; $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;

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

@ -23,6 +23,7 @@
border: $form-check-input-border; border: $form-check-input-border;
appearance: none; appearance: none;
color-adjust: exact; // Keep themed appearance for print color-adjust: exact; // Keep themed appearance for print
@include transition($form-check-transition);
&[type="checkbox"] { &[type="checkbox"] {
@include border-radius($form-check-input-border-radius); @include border-radius($form-check-input-border-radius);
@ -119,9 +120,6 @@
background-size: $form-switch-bg-size; // Get a 1px separation background-size: $form-switch-bg-size; // Get a 1px separation
@include border-radius($form-switch-border-radius); @include border-radius($form-switch-border-radius);
color-adjust: exact; // Keep themed appearance for print color-adjust: exact; // Keep themed appearance for print
// Todo: Figure out how to tackle these, with or without mixin?
// transition: $form-switch-transition;
// transition-property: $form-switch-transition-property;
&:focus { &:focus {
background-image: escape-svg($form-switch-focus-bg-image); background-image: escape-svg($form-switch-focus-bg-image);