adding ripple support for radio without form group

This commit is contained in:
TJ 2016-05-07 17:08:04 +05:30
parent dcd19982c9
commit d42d6f20fe

View File

@ -57,11 +57,12 @@
margin: 0; margin: 0;
transform: scale3d(1.5, 1.5, 1); transform: scale3d(1.5, 1.5, 1);
} }
input[type=radio]:not(:checked) ~ .check:after {
input[type=radio]:focus:not(:checked) ~ .check:after {
animation: rippleOff 500ms; animation: rippleOff 500ms;
} }
input[type=radio]:checked ~ .check:after { input[type=radio]:focus:checked ~ .check:after {
animation: rippleOn; animation: rippleOn 500ms;
} }
input[type=radio] { input[type=radio] {
@ -90,14 +91,14 @@
} }
} }
// Prevent ripple effect on page load // Prevent ripple effect on page load - removed for supporting animation without .form-group
.is-focused { /*.is-focused {
.radio, label.radio-inline { .radio, label.radio-inline {
input[type=radio]:checked ~ .check:after { input[type=radio]:checked ~ .check:after {
animation: rippleOn 500ms; animation: rippleOn 500ms;
} }
} }
} }*/
@keyframes rippleOn { @keyframes rippleOn {
0% { 0% {
@ -110,7 +111,6 @@
opacity: 0; opacity: 0;
} }
} }
@keyframes rippleOff { @keyframes rippleOff {
0% { 0% {
opacity: 0; opacity: 0;