add click-down(), click-inset(), click-shadow(), & click-shrink() per #199

Author: dbox

axis/interaction.styl

@@ -115,18 +115,19 @@ hover-color(color, forceUseColor = false)
 
 // Mixin: Hover Glow
 //
-// Creates a glow when hovering an element. Takes a color and a radius (size). Recommended to be used with transition.
+// Creates a glow when hovering an element. Takes a color and a radius (size).
+// Recommended to be used with transition.
 //
 // ex: hover-glow()
 
 hover-glow($color = rgba(blue, .8),  $radius = 20px )
   &:hover
     box-shadow: 0px 0px $radius 2px $color
 
-
 // Mixin: Hover Float
 //
-// Gives an element the effect of rising up vertically with a small shadow underneath. Recommended to be use with transition.
+// Gives an element the effect of rising up vertically with a small shadow
+//  underneath. Recommended to be use with transition.
 //
 // Ex: hover-float()
 
@@ -150,3 +151,47 @@ hover-float()
     &:before
       opacity: 1
       transform: scale(1)
+
+// Mixin: Click down
+//
+// Move an element down while clicked/tapped. Takes distance.
+//
+// ex: click-down()
+
+click-down($distance = 1px)
+  &:active
+    transform: translateY($distance)
+
+// Mixin: Click shadow
+//
+// Creates a shadow under element while clicked/tapped. Takes distance and
+// radius (size). Recommended to be use with transition.
+//
+// ex: click-shadow()
+
+click-shadow($distance = 2px, $radius = 10px )
+  &:active
+    box-shadow: 0px $distance $radius 2px rgba(0, 0, 0, 0.25)
+
+// Mixin: Click inset
+//
+// Creates an inset shadow on an elment while clicked/tapped. Takes radius
+// (inset shadow size). Recommended to be use with transition.
+//
+// ex: click-inset()
+
+click-inset($radius = 20px)
+  $distance = $radius / 2
+  &:active
+    box-shadow: inset 0px $distance $radius rgba(0, 0, 0, 0.35);
+
+// Mixin: Click-shrink
+//
+// Scale down an element when clicked/tapped. Gives the effect of "sinking"
+// or lowering on the z-axis.
+//
+// ex: click-shrink()
+   
+click-shrink($distance = .92)
+  &:active
+    transform: scale($distance)

test/fixtures/interaction/click-down.css

@@ -0,0 +1,7 @@
+.click-down:active {
+  -webkit-transform: translateY(1px);
+  -moz-transform: translateY(1px);
+  -o-transform: translateY(1px);
+  -ms-transform: translateY(1px);
+  transform: translateY(1px);
+}

test/fixtures/interaction/click-down.styl

@@ -0,0 +1,2 @@
+.click-down
+  click-down()

test/fixtures/interaction/click-inset.css

@@ -0,0 +1,3 @@
+.click-inset:active {
+  box-shadow: inset 0px 10px 20px rgba(0,0,0,0.35);
+}

test/fixtures/interaction/click-inset.styl

@@ -0,0 +1,2 @@
+.click-inset
+  click-inset()

test/fixtures/interaction/click-shadow.css

@@ -0,0 +1,3 @@
+.click-shadow:active {
+  box-shadow: 0px 2px 10px 2px rgba(0,0,0,0.25);
+}

test/fixtures/interaction/click-shadow.styl

@@ -0,0 +1,2 @@
+.click-shadow
+  click-shadow()

test/fixtures/interaction/click-shrink.css

@@ -0,0 +1,7 @@
+.click-shrink:active {
+  -webkit-transform: scale(0.92);
+  -moz-transform: scale(0.92);
+  -o-transform: scale(0.92);
+  -ms-transform: scale(0.92);
+  transform: scale(0.92);
+}

test/fixtures/interaction/click-shrink.styl

@@ -0,0 +1,2 @@
+.click-shrink
+  click-shrink()

test/test.coffee

@@ -151,6 +151,18 @@ describe 'interaction', ->
   it 'hover-float', (done) ->
     compile_and_match(path.join(@path, 'hover-float.styl'), done)
 
+  it 'click-down', (done) ->
+    compile_and_match(path.join(@path, 'click-down.styl'), done)
+
+  it 'click-shadow', (done) ->
+    compile_and_match(path.join(@path, 'click-shadow.styl'), done)
+
+  it 'click-inset', (done) ->
+    compile_and_match(path.join(@path, 'click-inset.styl'), done)
+
+  it 'click-shrink', (done) ->
+    compile_and_match(path.join(@path, 'click-shrink.styl'), done)      
+
 describe 'layout', ->
 
   before -> @path = path.join(test_path, 'layout')