rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-03-21 13:29:00 +01:00
Code Issues Actions 10 Packages Releases Activity

Update .form-check to properly support gradients when enabled (#29338)

Browse Source
This commit is contained in:
Mark Otto 2019-10-28 00:12:07 -07:00 committed by Martijn Cuppens
parent 9c7bc1a111
commit b81a23a60d
4 changed files with 38 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
scss/_variables.scss
View File

@ -660,9 +660,9 @@ $form-check-input-indeterminate-bg-image: url("data:image/svg+xml,<svg xml
$form-switch-color: rgba(0, 0, 0, .25) !default;
$form-switch-width: 2em !default;
$form-switch-height: $form-check-input-width !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-transition: .2s ease-in-out !default;
$form-switch-transition-property: background-position, background-color !default;

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

@ -48,20 +48,35 @@
border-color: $form-check-input-checked-border-color;
&[type="checkbox"] {
background-image: escape-svg($form-check-input-checked-bg-image);
@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);
}
}
&[type="radio"] {
background-image: escape-svg($form-check-radio-checked-bg-image);
@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);
}
}
}
&[type="checkbox"]:indeterminate {
background-color: $form-check-input-indeterminate-bg-color;
background-image: escape-svg($form-check-input-indeterminate-bg-image);
background-repeat: $form-check-input-indeterminate-bg-repeat;
background-position: $form-check-input-indeterminate-bg-position;
background-size: $form-check-input-indeterminate-bg-size;
@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;
}
@ -95,7 +110,7 @@
background-image: escape-svg($form-switch-bg-image);
background-repeat: no-repeat;
background-position: left center;
background-size: calc(#{$form-switch-height} - 2px); // Get a 1px separation
background-size: $form-switch-bg-size; // Get a 1px separation
@include border-radius($form-switch-border-radius);
// Todo: Figure out how to tackle these, with or without mixin?
// transition: $form-switch-transition;
@ -106,8 +121,14 @@
}
&:checked {
background-image: escape-svg($form-switch-checked-bg-image);
background-position: $form-switch-checked-bg-position;
@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);
}
}
}
}

2
scss/mixins/_forms.scss
View File

@ -122,7 +122,7 @@
border-color: $color;
&:checked {
@include gradient-bg(lighten($color, 10%));
@include gradient-bg(lighten($color, 10%), escape-svg($form-check-input-checked-bg-image));
}
&:focus {

11
scss/mixins/_gradients.scss
View File

@ -1,8 +1,15 @@
// Gradients
@mixin gradient-bg($color) {
@mixin gradient-bg($color, $foreground: null) {
@if $enable-gradients {
background: $color linear-gradient(180deg, mix($body-bg, $color, 15%), $color) repeat-x;
@if $foreground {
background-color: $color;
background-image: $foreground, linear-gradient(180deg, mix($body-bg, $color, 15%), $color);
background-repeat: no-repeat;
background-size: 1em, auto;
} @else {
background: $color linear-gradient(180deg, mix($body-bg, $color, 15%), $color) repeat-x;
}
} @else {
background-color: $color;
}