mirror of
https://github.com/mdbootstrap/mdb-ui-kit.git
synced 2024-11-25 11:04:09 +03:00
Checkboxes should not animate on page load
This commit is contained in:
parent
948a10eefc
commit
80c869196b
24
dist/css/bootstrap-material-design.css
vendored
24
dist/css/bootstrap-material-design.css
vendored
|
@ -918,9 +918,9 @@ fieldset[disabled] .form-group.is-focused .checkbox label {
|
|||
animation: checkbox-on 0.3s forwards;
|
||||
}
|
||||
.checkbox input[type=checkbox]:checked + .checkbox-material:before {
|
||||
-webkit-animation: rippleOn 500ms;
|
||||
-o-animation: rippleOn 500ms;
|
||||
animation: rippleOn 500ms;
|
||||
-webkit-animation: rippleOn;
|
||||
-o-animation: rippleOn;
|
||||
animation: rippleOn;
|
||||
}
|
||||
.checkbox input[type=checkbox]:checked + .checkbox-material .check:after {
|
||||
-webkit-animation: rippleOn 500ms forwards;
|
||||
|
@ -928,9 +928,9 @@ fieldset[disabled] .form-group.is-focused .checkbox label {
|
|||
animation: rippleOn 500ms forwards;
|
||||
}
|
||||
.checkbox input[type=checkbox]:not(:checked) + .checkbox-material:before {
|
||||
-webkit-animation: rippleOff 500ms;
|
||||
-o-animation: rippleOff 500ms;
|
||||
animation: rippleOff 500ms;
|
||||
-webkit-animation: rippleOff;
|
||||
-o-animation: rippleOff;
|
||||
animation: rippleOff;
|
||||
}
|
||||
.checkbox input[type=checkbox]:not(:checked) + .checkbox-material .check:after {
|
||||
-webkit-animation: rippleOff 500ms forwards;
|
||||
|
@ -951,6 +951,16 @@ fieldset[disabled] .checkbox input[type=checkbox],
|
|||
-o-transform: rotate(-45deg);
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
.is-focused .checkbox input[type=checkbox]:checked + .checkbox-material:before {
|
||||
-webkit-animation: rippleOn 500ms;
|
||||
-o-animation: rippleOn 500ms;
|
||||
animation: rippleOn 500ms;
|
||||
}
|
||||
.is-focused .checkbox input[type=checkbox]:not(:checked) + .checkbox-material:before {
|
||||
-webkit-animation: rippleOff 500ms;
|
||||
-o-animation: rippleOff 500ms;
|
||||
animation: rippleOff 500ms;
|
||||
}
|
||||
@-webkit-keyframes checkbox-on {
|
||||
0% {
|
||||
-webkit-box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 15px 2px 0 11px;
|
||||
|
@ -2617,7 +2627,7 @@ fieldset[disabled] .navbar .btn-link:focus {
|
|||
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
|
||||
}
|
||||
.dropdown-menu .divider {
|
||||
background-color: rgba(229, 229, 229, 0.12);
|
||||
background-color: rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
.dropdown-menu li {
|
||||
overflow: hidden;
|
||||
|
|
2
dist/css/bootstrap-material-design.css.map
vendored
2
dist/css/bootstrap-material-design.css.map
vendored
File diff suppressed because one or more lines are too long
2
dist/css/bootstrap-material-design.min.css
vendored
2
dist/css/bootstrap-material-design.min.css
vendored
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
@ -98,7 +98,7 @@
|
|||
}
|
||||
|
||||
& + .checkbox-material:before {
|
||||
animation: rippleOn @mdb-checkbox-animation-ripple;
|
||||
animation: rippleOn;
|
||||
}
|
||||
|
||||
& + .checkbox-material .check:after {
|
||||
|
@ -109,12 +109,11 @@
|
|||
|
||||
&:not(:checked) {
|
||||
& + .checkbox-material:before {
|
||||
animation: rippleOff @mdb-checkbox-animation-ripple;
|
||||
animation: rippleOff;
|
||||
}
|
||||
|
||||
& + .checkbox-material .check:after {
|
||||
animation: rippleOff @mdb-checkbox-animation-ripple forwards; // Ripple effect on uncheck
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -133,6 +132,24 @@
|
|||
}
|
||||
}
|
||||
|
||||
// Prevent ripple effect on page load
|
||||
.is-focused {
|
||||
.checkbox {
|
||||
input[type=checkbox] {
|
||||
&:checked {
|
||||
& + .checkbox-material:before {
|
||||
animation: rippleOn @mdb-checkbox-animation-ripple;
|
||||
}
|
||||
}
|
||||
&:not(:checked) {
|
||||
& + .checkbox-material:before {
|
||||
animation: rippleOff @mdb-checkbox-animation-ripple;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes checkbox-on {
|
||||
0% {
|
||||
box-shadow:
|
||||
|
@ -162,6 +179,7 @@
|
|||
20px -12px 0 11px;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes checkbox-off {
|
||||
0% {
|
||||
box-shadow:
|
||||
|
@ -173,7 +191,6 @@
|
|||
20px -12px 0 11px,
|
||||
0 0 0 0 inset;
|
||||
}
|
||||
|
||||
25% {
|
||||
box-shadow:
|
||||
0 0 0 10px,
|
||||
|
@ -230,6 +247,7 @@
|
|||
0px 0 0 0 inset;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes rippleOn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
|
@ -241,6 +259,7 @@
|
|||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes rippleOff {
|
||||
0% {
|
||||
opacity: 0;
|
||||
|
|
|
@ -100,7 +100,7 @@
|
|||
}
|
||||
|
||||
& + .checkbox-material:before {
|
||||
animation: rippleOn $mdb-checkbox-animation-ripple;
|
||||
animation: rippleOn;
|
||||
}
|
||||
|
||||
& + .checkbox-material .check:after {
|
||||
|
@ -111,7 +111,7 @@
|
|||
|
||||
&:not(:checked) {
|
||||
& + .checkbox-material:before {
|
||||
animation: rippleOff $mdb-checkbox-animation-ripple;
|
||||
animation: rippleOff;
|
||||
}
|
||||
|
||||
& + .checkbox-material .check:after {
|
||||
|
@ -135,6 +135,24 @@
|
|||
}
|
||||
}
|
||||
|
||||
// Prevent ripple effect on page load
|
||||
.is-focused {
|
||||
.checkbox {
|
||||
input[type=checkbox] {
|
||||
&:checked {
|
||||
& + .checkbox-material:before {
|
||||
animation: rippleOn $mdb-checkbox-animation-ripple;
|
||||
}
|
||||
}
|
||||
&:not(:checked) {
|
||||
& + .checkbox-material:before {
|
||||
animation: rippleOff $mdb-checkbox-animation-ripple;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes checkbox-on {
|
||||
0% {
|
||||
box-shadow:
|
||||
|
|
Loading…
Reference in New Issue
Block a user