Feature: Click actions

[dbox]

@Jenius - I noticed this:

// TODO:
// *+click-down(pixels)*
// *+click-shadow(radius)*
// *+button-interaction(color)*

So I did this:
http://codepen.io/dbox/pen/KpxJxR

What were you thinking for button-interaction(color)? Surely not just changing colors?

Related:
I created an importable version of Axis for CodePen for easier demos: Just import this link http://codepen.io/dbox/pen/rVZPKo to a new pen. I'll add a note about it in the contributing section of readme, so people can show demos a little easier. I've also been in contact with the folks at CodePen to have the repo added as an official Stylus add-on.

[abstracthat]

That looks useful! Just a minor thing but it is better to explicitly state what to transition rather than "all".

transition: transform .1s ease

[dbox]

yeah, I was wondering if i'd even add the transitions at all (since hover-pop) doesn't have them in the actual mixin (even though its clearly way better with it), but I'll fix that up.

[dbox]

Also might as well do hover-glow() while i'm in here.

[jescalan]

Haha perfect. No idea what I was thinking with button-interaction -- perhaps a few different interactions that can happen when you click a button. The inset one is pretty standard for sure, but we could be creative and check out some like codrops articles and maybe find more. If you are using the button mixin already, we could make some assumptions about the way the code is arranged and perhaps produce some more interesting effects.

Click shadow ends up being pretty lame huh? Maybe we don't need to include that one. Seemed interesting in theory but now that I see it, not as sold haha.

[dbox]

Yeah, not sure I'd use click-shadow(), but its very material design-ish, so maybe some people like it. Dunno. Regardless, I'm going to add hover-glow() which will be similar, and probably have more use.

Just added click-sink() and I'll likely add some more.

http://codepen.io/dbox/pen/KpxJxR

While I'm thinking about it:
IMHO the default hover and active color change on .btn should be a little more intense. It is hard to notice it at all.

[dbox]

If you are using the button mixin already, we could make some assumptions about the way the code is arranged and perhaps produce some more interesting effects.

What were you thinking, specifically? I definitely like being able to call the click-effects on any item, not just buttons.

[dbox]

None of the current hover interactions have transitions built into the mixin, but there is a transition on all of the examples on axis-www. Do you prefer to leave transition out of the mixin?

[jescalan]

Yeah I think so. Give people the choice, it's easy to implement if they want, I don't want to force it on them though!

[dbox]

http://codepen.io/dbox/pen/KpxJxR

Codepen updated. Let me know any other request or feedback. 🏁

[jescalan]

These are great, love em. Only change I'd make is change click-sink to click-scale as this seems a little more clear to me what it's doing. Really excited to see these get merged in!

[dbox]

click-scale makes me think it's going to scale up... but I'm not terribly passionate either way...

[jescalan]

maybe click-shrink?

[dbox]

deal