FlipClock
FlipClock copied to clipboard
Proposed improvements to flipclock.scss
These changes make the numbers and meridian dividers display as inline-blocks so the entire clock can be centered horizontally. Pixel units converted to percentages and ems so the entire clock can scale proportionally just by changing the font size of the wrapper. Removed reference to deprecated Bourbon box-sizing mixin. Fixed issue where flip shadows didn't have border radii and therefore projected a little bit of black into the corners of the numbers. Please review!
This is awesome, so easy to resize and center clock now!
Great work and thanks.
Just small note, I noticed vertical alignment for numbers is a little bit off now, space on top is a little higher. The center line should go directly though middle of 3 and a little after 8 number "center".
Your version:
Original:
Found a quick fix, by changing .flip-clock-wrapper ul li a div div.inn
from 1.8em
to 1.7em
How do you resize the clock? I cant seem to get all of it through CSS.
@Adoyle2014 In this proposed change, all the font sizes are relative to the main clock container, so you can use CSS to change the font size there, and everything else will follow suit.
Ohh. Would you be able to paste a css version of your changes? I am not in a npm or rails environment and i cant figure out how to install bourbon from outside of them.
I got it. Thanks for the help. The fix works great.