FlipClock icon indicating copy to clipboard operation
FlipClock copied to clipboard

Proposed improvements to flipclock.scss

Open BoffinBrain opened this issue 9 years ago • 6 comments

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!

BoffinBrain avatar Nov 13 '15 13:11 BoffinBrain

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: image Original: image

darklow avatar Jan 09 '16 22:01 darklow

Found a quick fix, by changing .flip-clock-wrapper ul li a div div.inn from 1.8em to 1.7em

darklow avatar Jan 09 '16 23:01 darklow

How do you resize the clock? I cant seem to get all of it through CSS.

Adoyle2014 avatar Jan 10 '16 01:01 Adoyle2014

@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.

BoffinBrain avatar Jan 11 '16 12:01 BoffinBrain

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.

Adoyle2014 avatar Jan 11 '16 14:01 Adoyle2014

I got it. Thanks for the help. The fix works great.

Adoyle2014 avatar Jan 12 '16 02:01 Adoyle2014