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

Checkboxes should not animate on page load

Browse Source
This commit is contained in:
shannabarnard 2016-01-25 23:36:15 +00:00
parent 948a10eefc
commit 80c869196b
6 changed files with 63 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -918,9 +918,9 @@ fieldset[disabled] .form-group.is-focused .checkbox label {
animation: checkbox-on 0.3s forwards; animation: checkbox-on 0.3s forwards;
} }
.checkbox input[type=checkbox]:checked + .checkbox-material:before { .checkbox input[type=checkbox]:checked + .checkbox-material:before {
-webkit-animation: rippleOn 500ms; -webkit-animation: rippleOn;
-o-animation: rippleOn 500ms; -o-animation: rippleOn;
animation: rippleOn 500ms; animation: rippleOn;
} }
.checkbox input[type=checkbox]:checked + .checkbox-material .check:after { .checkbox input[type=checkbox]:checked + .checkbox-material .check:after {
-webkit-animation: rippleOn 500ms forwards; -webkit-animation: rippleOn 500ms forwards;
@ -928,9 +928,9 @@ fieldset[disabled] .form-group.is-focused .checkbox label {
animation: rippleOn 500ms forwards; animation: rippleOn 500ms forwards;
} }
.checkbox input[type=checkbox]:not(:checked) + .checkbox-material:before { .checkbox input[type=checkbox]:not(:checked) + .checkbox-material:before {
-webkit-animation: rippleOff 500ms; -webkit-animation: rippleOff;
-o-animation: rippleOff 500ms; -o-animation: rippleOff;
animation: rippleOff 500ms; animation: rippleOff;
} }
.checkbox input[type=checkbox]:not(:checked) + .checkbox-material .check:after { .checkbox input[type=checkbox]:not(:checked) + .checkbox-material .check:after {
-webkit-animation: rippleOff 500ms forwards; -webkit-animation: rippleOff 500ms forwards;
@ -951,6 +951,16 @@ fieldset[disabled] .checkbox input[type=checkbox],
-o-transform: rotate(-45deg); -o-transform: rotate(-45deg);
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 { @-webkit-keyframes checkbox-on {
0% { 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; -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); box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
} }
.dropdown-menu .divider { .dropdown-menu .divider {
background-color: rgba(229, 229, 229, 0.12); background-color: rgba(0, 0, 0, 0.12);
} }
.dropdown-menu li { .dropdown-menu li {
overflow: hidden; overflow: hidden;

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

27
less/_checkboxes.less
View File

@ -98,7 +98,7 @@
} }
& + .checkbox-material:before { & + .checkbox-material:before {
animation: rippleOn @mdb-checkbox-animation-ripple; animation: rippleOn;
} }
& + .checkbox-material .check:after { & + .checkbox-material .check:after {
@ -109,12 +109,11 @@
&:not(:checked) { &:not(:checked) {
& + .checkbox-material:before { & + .checkbox-material:before {
animation: rippleOff @mdb-checkbox-animation-ripple; animation: rippleOff;
} }
& + .checkbox-material .check:after { & + .checkbox-material .check:after {
animation: rippleOff @mdb-checkbox-animation-ripple forwards; // Ripple effect on uncheck 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 { @keyframes checkbox-on {
0% { 0% {
box-shadow: box-shadow:
@ -162,6 +179,7 @@
20px -12px 0 11px; 20px -12px 0 11px;
} }
} }
@keyframes checkbox-off { @keyframes checkbox-off {
0% { 0% {
box-shadow: box-shadow:
@ -173,7 +191,6 @@
20px -12px 0 11px, 20px -12px 0 11px,
0 0 0 0 inset; 0 0 0 0 inset;
} }
25% { 25% {
box-shadow: box-shadow:
0 0 0 10px, 0 0 0 10px,
@ -230,6 +247,7 @@
0px 0 0 0 inset; 0px 0 0 0 inset;
} }
} }
@keyframes rippleOn { @keyframes rippleOn {
0% { 0% {
opacity: 0; opacity: 0;
@ -241,6 +259,7 @@
opacity: 0; opacity: 0;
} }
} }
@keyframes rippleOff { @keyframes rippleOff {
0% { 0% {
opacity: 0; opacity: 0;

22
sass/_checkboxes.scss
View File

@ -100,7 +100,7 @@
} }
& + .checkbox-material:before { & + .checkbox-material:before {
animation: rippleOn $mdb-checkbox-animation-ripple; animation: rippleOn;
} }
& + .checkbox-material .check:after { & + .checkbox-material .check:after {
@ -111,7 +111,7 @@
&:not(:checked) { &:not(:checked) {
& + .checkbox-material:before { & + .checkbox-material:before {
animation: rippleOff $mdb-checkbox-animation-ripple; animation: rippleOff;
} }
& + .checkbox-material .check:after { & + .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 { @keyframes checkbox-on {
0% { 0% {
box-shadow: box-shadow: