mdbootstrap/mdb-ui-kit
1
1
Fork 0
mirror of https://github.com/mdbootstrap/mdb-ui-kit.git synced 2024-09-22 20:09:14 +03:00
Code Issues Packages Projects Releases Wiki Activity

Checkboxes and Radio buttons should not animate on page load

Browse Source
This commit is contained in:
shannabarnard 2016-01-26 18:31:52 +00:00
parent 80c869196b
commit 10bf3836f2
9 changed files with 57 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
dist/css/bootstrap-material-design.css vendored
View File

@ -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
View File

File diff suppressed because one or more lines are too long

2
dist/css/bootstrap-material-design.min.css vendored
View File

File diff suppressed because one or more lines are too long

2
dist/css/bootstrap-material-design.min.css.map vendored
View File

File diff suppressed because one or more lines are too long

9
less/_checkboxes.less
View File

@ -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 {

12
less/_radios.less
View File

@ -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;

14
sass/_checkboxes.scss
View File

@ -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;

2
sass/_core.scss
View File

@ -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;

12
sass/_radios.scss
View File

@ -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;