Merge pull request #206 from jenius/interaction

Interaction

Author: Jeff Escalante

axis/index.styl

@@ -16,7 +16,7 @@
 @import 'buttons'
 @import 'forms'
 @import 'tables'
-@import 'print'
+
 
 // ------------------------------------------
 // Framework Mixin (loads all default styles)

axis/interaction.styl

@@ -6,10 +6,10 @@
 // hover or a click.
 
 // Mixin: Hover Darken
-// 
+//
 // Darkens the color and/or background color on your element when it's hovered.
 // Takes an optional percentage to darken it.
-// 
+//
 // ex. hover-darken()
 // ex. hover-darken: 30%
 
@@ -25,9 +25,9 @@ hover-darken(percent = 15%, forceUseColor = false)
       warn('you need to set a color or background color on your element for this to work')
 
 // Mixin: Hover Lighten
-// 
+//
 // Works the same way as hover-darken but lightens the color.
-// 
+//
 // ex. hover-lighten()
 // ex. hover-lighten: 30%
 
@@ -43,34 +43,34 @@ hover-lighten(percent = 15%, forceUseColor = false)
       warn('you need to set a color or background color on your element for this to work')
 
 // Mixin: Hover Underline
-// 
+//
 // This one is interesting, and may need tweaking to get it to work right on the
 // intended element. Works very nicely for text like in a span, and can animate.
-// 
+//
 // ex. hover-underline()
 // ex. hover-underline: 2px 'dotted'
 
 hover-underline(borderSize = 1px, type = 'solid', color = null)
   border-bottom: borderSize unquote(type) transparent
-  
+
   &:hover
     border-bottom: borderSize unquote(type) color
 
 // Mixin: Hover Pop
-// 
+//
 // On hover, your element pops out from the page. For scale, it takes an integer
 // or float, 1 represents 100%, 2 is 200%, etc. Optionally can also rotate,
 // pass it a number followed by "deg", like 180deg. If you pass true for
 // shadow, it will animate in a drop shadow to add to the effect.
-// 
+//
 // ex. hover-pop: 1.5
 // ex. hover-pop: 2.6 90deg
 // ex. hover-pop: 1.2 45deg true
 
 hover-pop(scale = 1.2, rotate = null, shadow = null)
   if shadow
     box-shadow: 0 0 1px transparent
-    
+
   &:hover
     position: relative
     z-index: 10
@@ -81,7 +81,7 @@ hover-pop(scale = 1.2, rotate = null, shadow = null)
       transform: scale(scale) rotate(rotate)
 
 // Mixin: Hover Fade
-// 
+//
 // On hover, fades the element's opacity down. Takes an amount as an integer
 // between 0 and 1, like opacity normally does. Recommended to be used with
 // transition.
@@ -93,11 +93,11 @@ hover-fade(amount = .5)
     opacity: amount
 
 // Mixin: Hover Color
-// 
+//
 // Will swap an elements color or background color on hover. Takes a color in
 // any format as the first argument. Will first look for a background color to
 // change, then a color.
-// 
+//
 // ex. hover-color: #D45D86
 
 hover-color(color, forceUseColor = false)
@@ -113,7 +113,85 @@ hover-color(color, forceUseColor = false)
     else
       warn('you need to set a color or background color on your element for this to work')
 
-// TODO:
-// *+click-down(pixels)*
-// *+click-shadow(radius)*
-// *+button-interaction(color)*
+// Mixin: Hover Glow
+//
+// 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.
+//
+// Ex: hover-float()
+
+hover-float()
+  position: relative
+
+  &:before
+    pointer-events: none
+    position: absolute
+    z-index: -1
+    content: ''
+    top: 108%
+    left: 5%
+    height: 10px
+    width: 90%
+    opacity: 0
+    background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0) 80%)
+
+  &:hover
+    transform: translateY(-7px)
+    &: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)