diff options
| author | Martijn Cuppens <martijn.cuppens@gmail.com> | 2020-04-09 09:07:11 +0300 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2020-04-09 09:07:11 +0300 |
| commit | 5e65b12f1cea463464419224f82163fa6a3c7432 (patch) | |
| tree | cb4f62eefec1a070b2704d173fcaad8aac64b4c3 | |
| parent | 9f6ccf9d123a35b3bc2ff48fc3312afb515b4441 (diff) | |
Add checkbox transition (#30528)
| -rw-r--r-- | scss/_variables.scss | 3 | ||||
| -rw-r--r-- | scss/forms/_form-check.scss | 4 |
2 files changed, 2 insertions, 5 deletions
diff --git a/scss/_variables.scss b/scss/_variables.scss index 6f9abfa387..ec1ba224de 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -621,6 +621,7 @@ $form-check-padding-left: $form-check-input-width + .5em !defaul $form-check-margin-bottom: .125rem !default; $form-check-label-color: 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; @@ -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-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; $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; diff --git a/scss/forms/_form-check.scss b/scss/forms/_form-check.scss index 3666b6ab47..572bd547e4 100644 --- a/scss/forms/_form-check.scss +++ b/scss/forms/_form-check.scss @@ -23,6 +23,7 @@ border: $form-check-input-border; appearance: none; color-adjust: exact; // Keep themed appearance for print + @include transition($form-check-transition); &[type="checkbox"] { @include border-radius($form-check-input-border-radius); @@ -119,9 +120,6 @@ 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 - // Todo: Figure out how to tackle these, with or without mixin? - // transition: $form-switch-transition; - // transition-property: $form-switch-transition-property; &:focus { background-image: escape-svg($form-switch-focus-bg-image); |