make checkbox animate quickly when not hover.

it's not a perfect method. need improve.
by the way. add 'Thumbs.db' and '.DS_Store' to .gitignore.
This commit is contained in:
colder 2014-10-01 13:57:11 +08:00
parent 08a4e84585
commit b2eefc97ec
3 changed files with 14 additions and 3 deletions

5
.gitignore vendored
View File

@ -1,3 +1,6 @@
# https://git-scm.com/docs/gitignore
# https://help.github.com/articles/ignoring-files
# Example .gitignore files: https://github.com/github/gitignore
# Example .gitignore files: https://github.com/github/gitignore
Thumbs.db
.DS_Store

View File

@ -66,10 +66,17 @@
// Ripple effect on click
input[type=checkbox]:not(:checked) ~ .check:after {
.animation(rippleOff 500ms);
.animation(rippleOff 500ms linear forwards);
}
input[type=checkbox]:checked ~ .check:after {
.animation(rippleOn 500ms);
.animation(rippleOn 500ms linear forwards);
}
// Make animate quickly when not hover
&:not(:hover) input[type=checkbox] ~ .check {
&:before, &:after {
.animation-duration(1ms);
}
}
// Style for disabled inputs

View File

@ -98,6 +98,7 @@
-moz-animation-duration: @duration;
-ms-animation-duration: @duration;
-o-animation-duration: @duration;
animation-duration: @duration;
}
.animation-fill-mode(@mode) {
-webkit-animation-fill-mode: @mode;