mirror of
https://github.com/mdbootstrap/mdb-ui-kit.git
synced 2024-11-29 04:54:12 +03:00
Checkboxes and Radio buttons should not animate on page load
This commit is contained in:
shannabarnard
parent
80c869196b
commit
10bf3836f2
22
dist/css/bootstrap-material-design.css
vendored
22
dist/css/bootstrap-material-design.css
vendored
|
|
@ -898,9 +898,9 @@ fieldset[disabled] .form-group.is-focused .checkbox label {
|
|||
0 0 0 0,
|
||||
0 0 0 0,
|
||||
0 0 0 0 inset;
|
||||
-webkit-animation: checkbox-off 0.3s forwards;
|
||||
-o-animation: checkbox-off 0.3s forwards;
|
||||
animation: checkbox-off 0.3s forwards;
|
||||
-webkit-animation: checkbox-off;
|
||||
-o-animation: checkbox-off;
|
||||
animation: checkbox-off;
|
||||
}
|
||||
.checkbox input[type=checkbox]:focus + .checkbox-material .check:after {
|
||||
opacity: 0.2;
|
||||
|
|
@ -951,6 +951,11 @@ fieldset[disabled] .checkbox input[type=checkbox],
|
|||
-o-transform: rotate(-45deg);
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
.is-focused .checkbox .checkbox-material .check:before {
|
||||
-webkit-animation: checkbox-off 0.3s forwards;
|
||||
-o-animation: checkbox-off 0.3s forwards;
|
||||
animation: checkbox-off 0.3s forwards;
|
||||
}
|
||||
.is-focused .checkbox input[type=checkbox]:checked + .checkbox-material:before {
|
||||
-webkit-animation: rippleOn 500ms;
|
||||
-o-animation: rippleOn 500ms;
|
||||
|
|
@ -1391,9 +1396,9 @@ fieldset[disabled] .form-group.is-focused .radio label {
|
|||
animation: rippleOff 500ms;
|
||||
}
|
||||
.radio label input[type=radio]:checked ~ .check:after {
|
||||
-webkit-animation: rippleOn 500ms;
|
||||
-o-animation: rippleOn 500ms;
|
||||
animation: rippleOn 500ms;
|
||||
-webkit-animation: rippleOn;
|
||||
-o-animation: rippleOn;
|
||||
animation: rippleOn;
|
||||
}
|
||||
.radio input[type=radio] {
|
||||
opacity: 0;
|
||||
|
|
@ -1435,6 +1440,11 @@ fieldset[disabled] .form-group.is-focused .radio label {
|
|||
.theme-dark .radio input[type=radio][disabled] ~ .circle {
|
||||
border-color: #ffffff;
|
||||
}
|
||||
.is-focused .radio input[type=radio]:checked ~ .check:after {
|
||||
-webkit-animation: rippleOn 500ms;
|
||||
-o-animation: rippleOn 500ms;
|
||||
animation: rippleOn 500ms;
|
||||
}
|
||||
@keyframes rippleOn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
|
|
|
|||
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
|
|
@ -68,7 +68,7 @@
|
|||
0 0 0 0,
|
||||
0 0 0 0,
|
||||
0 0 0 0 inset;
|
||||
animation: checkbox-off @mdb-checkbox-animation-check forwards;
|
||||
animation: checkbox-off;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -132,9 +132,14 @@
|
|||
}
|
||||
}
|
||||
|
||||
// Prevent ripple effect on page load
|
||||
// Prevent checkbox animation and ripple effect on page load
|
||||
.is-focused {
|
||||
.checkbox {
|
||||
.checkbox-material {
|
||||
.check:before {
|
||||
animation: checkbox-off @mdb-checkbox-animation-check forwards;
|
||||
}
|
||||
}
|
||||
input[type=checkbox] {
|
||||
&:checked {
|
||||
& + .checkbox-material:before {
|
||||
|
|
|
|||
|
|
@ -60,9 +60,8 @@
|
|||
animation: rippleOff 500ms;
|
||||
}
|
||||
input[type=radio]:checked ~ .check:after {
|
||||
animation: rippleOn 500ms;
|
||||
animation: rippleOn;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
input[type=radio] {
|
||||
|
|
@ -91,6 +90,15 @@
|
|||
}
|
||||
}
|
||||
|
||||
// Prevent ripple effect on page load
|
||||
.is-focused {
|
||||
.radio {
|
||||
input[type=radio]:checked ~ .check:after {
|
||||
animation: rippleOn 500ms;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes rippleOn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
|
|
|
|||
|
|
@ -70,7 +70,7 @@
|
|||
0 0 0 0,
|
||||
0 0 0 0,
|
||||
0 0 0 0 inset;
|
||||
animation: checkbox-off $mdb-checkbox-animation-check forwards;
|
||||
animation: checkbox-off;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -116,7 +116,6 @@
|
|||
|
||||
& + .checkbox-material .check:after {
|
||||
animation: rippleOff $mdb-checkbox-animation-ripple forwards; // Ripple effect on uncheck
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -135,9 +134,14 @@
|
|||
}
|
||||
}
|
||||
|
||||
// Prevent ripple effect on page load
|
||||
// Prevent checkbox animation and ripple effect on page load
|
||||
.is-focused {
|
||||
.checkbox {
|
||||
.checkbox-material {
|
||||
.check:before {
|
||||
animation: checkbox-off $mdb-checkbox-animation-check forwards;
|
||||
}
|
||||
}
|
||||
input[type=checkbox] {
|
||||
&:checked {
|
||||
& + .checkbox-material:before {
|
||||
|
|
@ -182,6 +186,7 @@
|
|||
20px -12px 0 11px;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes checkbox-off {
|
||||
0% {
|
||||
box-shadow:
|
||||
|
|
@ -193,7 +198,6 @@
|
|||
20px -12px 0 11px,
|
||||
0 0 0 0 inset;
|
||||
}
|
||||
|
||||
25% {
|
||||
box-shadow:
|
||||
0 0 0 10px,
|
||||
|
|
@ -250,6 +254,7 @@
|
|||
0px 0 0 0 inset;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes rippleOn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
|
|
@ -261,6 +266,7 @@
|
|||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes rippleOff {
|
||||
0% {
|
||||
opacity: 0;
|
||||
|
|
|
|||
|
|
@ -57,7 +57,7 @@ legend {
|
|||
border: 0;
|
||||
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
|
||||
.divider {
|
||||
background-color: rgba(229, 229, 229, 0.12);
|
||||
background-color: rgba(0, 0, 0, .12);
|
||||
}
|
||||
li {
|
||||
overflow: hidden;
|
||||
|
|
|
|||
|
|
@ -62,9 +62,8 @@
|
|||
animation: rippleOff 500ms;
|
||||
}
|
||||
input[type=radio]:checked ~ .check:after {
|
||||
animation: rippleOn 500ms;
|
||||
animation: rippleOn;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
input[type=radio] {
|
||||
|
|
@ -93,6 +92,15 @@
|
|||
}
|
||||
}
|
||||
|
||||
// Prevent ripple effect on page load
|
||||
.is-focused {
|
||||
.radio {
|
||||
input[type=radio]:checked ~ .check:after {
|
||||
animation: rippleOn 500ms;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes rippleOn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user