I'm unfamiliar with how you guys build your mixins, so I'll just suggest this one here. Sorry if this isn't the best way to do this...
This mixin allows you to use the :after pseudo-element to make the target hit area of an element bigger, for both hover states and touch tappable areas. See http://thirdroute.com/blog/css-expanded-hit-areas.
I'm not sure if this is the best way to go about creating the different scenarios, but I tried to mimic how you might use CSS shorthand for something like margin (top, right, bottom, left).
Note: this mixin automatically converts your px, % or em to negative values.
I'm unfamiliar with how you guys build your mixins, so I'll just suggest this one here. Sorry if this isn't the best way to do this...
This mixin allows you to use the :after pseudo-element to make the target hit area of an element bigger, for both hover states and touch tappable areas. See http://thirdroute.com/blog/css-expanded-hit-areas.
I'm not sure if this is the best way to go about creating the different scenarios, but I tried to mimic how you might use CSS shorthand for something like
margin
(top, right, bottom, left).Note: this mixin automatically converts your
px
,%
orem
to negative values.Uses:
Mixin: