First up: On the Material Design skins, the animated checkboxes get an odd "flashing" appearance when they're being unchecked. At first I thought this was because an animation was playing twice by mistake, but it seems to have been caused by the checkbox's top + right borders being animated back into view while it's rotating.
I changed the transition property to be everything except for opacity, and gave the unchecked item an opacity of 0 and checked an opacity of 1.
This makes the opacity immediately change to 0 when it's unchecked, removing the animation. I then added a background-color transition to the checkbox itself, which only plays during the unchecking process, so it gets a nice fade-out. I think it's much better now.
And then, I made a very small tweak to the radio buttons. They are slightly off center, which was mildly irritating enough to fix it.
All I had to do was change their height and width to @checkboxSizeOuter/2 instead of @checkboxSize - 2*@checkboxBorderSize; and give them top: -0.5px. Now it's perfectly centered:
Code: Select all
/* skin_checkbox_add.less */
/* Checkbox background-color transition animation */
.animCheck input[type="checkbox"]:checked {
transition: none;
}
.animCheck input[type="checkbox"] {
border-radius: @checkBoxBorderRadius;
transition: background-color @animationTime ease-in-out;
}
/* Checkbox border transition animation */
input[type="checkbox"]:before {
transition-property: transform, height, width, top, left, border-color;
transition-duration: @animationTime;
transition-timing-function: ease-in-out;
transition-delay: 0s;
border-radius: @checkBoxBorderRadius;
opacity: 0;
}
input[type="checkbox"]:checked:before {
transform: rotate(-45deg); // scale(0.9);
height: @checkboxSize/3;
width: @checkboxSize*0.85;
top: @checkboxSize*0.15;
left: 0;
border-color: @baseColor;
border-top-style: none;
border-right-style: none;
opacity: 1;
}
/* Radio buttons */
input[type="radio"]:checked:before {
height: @checkboxSizeOuter/2;
width: @checkboxSizeOuter/2;
top: -0.5px;
left: 0;
border-color: @baseColor;
}
