diff --git a/axis/index.styl b/axis/index.styl
index 4704d80..0261fa4 100644
--- a/axis/index.styl
+++ b/axis/index.styl
@@ -16,7 +16,7 @@
@import 'buttons'
@import 'forms'
@import 'tables'
-@import 'print'
+
// ------------------------------------------
// Framework Mixin (loads all default styles)
diff --git a/axis/interaction.styl b/axis/interaction.styl
index 773d16d..352388d 100644
--- a/axis/interaction.styl
+++ b/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,26 +43,26 @@ 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
@@ -70,7 +70,7 @@ hover-underline(borderSize = 1px, type = 'solid', color = null)
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)
diff --git a/axis/print.styl b/axis/print.styl
deleted file mode 100644
index 4c0216d..0000000
--- a/axis/print.styl
+++ /dev/null
@@ -1,126 +0,0 @@
-// Mixin: Print Styles
-// Nice clean print styles so you don't have to worry about it.
-
-print-styles()
- @media print
- body
- width: 100% !important
- margin: 0 !important
- padding: 0 !important
- font-size: 14pt
- line-height: 1.45
- font-family: Garamond, "Times New Roman", serif
- color: #000
- background: none
-
- h1,
- h2,
- h3,
- h4,
- h5,
- h6
- page-break-after: avoid
- font-family: "Helvetica", Arial, sans-serif
-
- h1
- font-size: 36pt
- line-height: 1.25em
-
- h2
- font-size: 24pt
- line-height: 1.25em
-
- h3
- font-size: 18pt
- line-height: 1.25em
-
- h4,
- h5,
- h6
- font-size: 14pt
- line-height: 1.25em
-
- p,
- h2,
- h3
- orphans: 3
- widows: 3
-
- code
- font: 12pt Courier, monospace
-
- blockquote
- margin: 1.2em
- padding: 1em
- font-size: 24pt
- line-height: 1.45833333em
- font-style: italic
-
- hr
- background-color: #ccc
-
- img
- float: left
- margin: 1em 1.5em 1.5em 0
- max-width: 100% !important
-
- a img
- border: none
-
- a:link,
- a:visited
- background: transparent
- font-weight: 700
- text-decoration: underline
- color: #333
-
- a:link[href^="http://"]:after,
- a[href^="http://"]:visited:after
- content: " (" attr(href) ") "
- font-size: 90%
-
- abbr[title]:after
- content: " (" attr(title) ")"
-
- a[href^="http://"]
- color: #000
-
- a[href$=".jpg"]:after,
- a[href$=".jpeg"]:after,
- a[href$=".gif"]:after,
- a[href$=".png"]:after
- content: " (" attr(href) ") "
- display: none
-
- a[href^="#"]:after, a[href^="javascript:"]:after
- content: ""
-
- table
- margin: 1px
- text-align: left
-
- th
- border-bottom: 1px solid #333
- font-weight: bold
-
- td
- border-bottom: 1px solid #333
-
- th,
- td
- padding: 4px 10px 4px 0
-
- tfoot
- font-style: italic
-
- caption
- background: #fff
- margin-bottom: 2em
- text-align: left
-
- thead
- display: table-header-group
-
- img,
- tr
- page-break-inside: avoid
diff --git a/axis/reset.styl b/axis/reset.styl
index 7e95e9e..120c9aa 100644
--- a/axis/reset.styl
+++ b/axis/reset.styl
@@ -179,3 +179,130 @@ border-box-html()
*:before,
*:after
box-sizing: inherit
+
+// Mixin: Print Styles
+// Nice clean print styles so you don't have to worry about it.
+
+print-styles()
+ @media print
+ body
+ width: 100% !important
+ margin: 0 !important
+ padding: 0 !important
+ font-size: 14pt
+ line-height: 1.45
+ font-family: Garamond, "Times New Roman", serif
+ color: #000
+ background: none
+
+ h1,
+ h2,
+ h3,
+ h4,
+ h5,
+ h6
+ page-break-after: avoid
+ font-family: "Helvetica", Arial, sans-serif
+
+ h1
+ font-size: 36pt
+ line-height: 1.25em
+
+ h2
+ font-size: 24pt
+ line-height: 1.25em
+
+ h3
+ font-size: 18pt
+ line-height: 1.25em
+
+ h4,
+ h5,
+ h6
+ font-size: 14pt
+ line-height: 1.25em
+
+ p,
+ h2,
+ h3
+ orphans: 3
+ widows: 3
+
+ code
+ font: 12pt Courier, monospace
+
+ blockquote
+ margin: 1.2em
+ padding: 1em
+ font-size: 24pt
+ line-height: 1.45833333em
+ font-style: italic
+
+ hr
+ background-color: #ccc
+
+ img
+ float: left
+ margin: 1em 1.5em 1.5em 0
+ max-width: 100% !important
+
+ a img
+ border: none
+
+ a:link,
+ a:visited
+ background: transparent
+ font-weight: 700
+ text-decoration: underline
+ color: #333
+
+ a:link[href^="http://"]:after,
+ a[href^="http://"]:visited:after
+ content: " (" attr(href) ") "
+ font-size: 90%
+
+ abbr[title]:after
+ content: " (" attr(title) ")"
+
+ a[href^="http://"]
+ color: #000
+
+ a[href$=".jpg"]:after,
+ a[href$=".jpeg"]:after,
+ a[href$=".gif"]:after,
+ a[href$=".png"]:after
+ content: " (" attr(href) ") "
+ display: none
+
+ a[href^="#"]:after, a[href^="javascript:"]:after
+ content: ""
+
+ table
+ margin: 1px
+ text-align: left
+
+ th
+ border-bottom: 1px solid #333
+ font-weight: bold
+
+ td
+ border-bottom: 1px solid #333
+
+ th,
+ td
+ padding: 4px 10px 4px 0
+
+ tfoot
+ font-style: italic
+
+ caption
+ background: #fff
+ margin-bottom: 2em
+ text-align: left
+
+ thead
+ display: table-header-group
+
+ img,
+ tr
+ page-break-inside: avoid
diff --git a/test/fixtures/interaction/click-down.css b/test/fixtures/interaction/click-down.css
new file mode 100644
index 0000000..1948dad
--- /dev/null
+++ b/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);
+}
diff --git a/test/fixtures/interaction/click-down.styl b/test/fixtures/interaction/click-down.styl
new file mode 100644
index 0000000..b44a6df
--- /dev/null
+++ b/test/fixtures/interaction/click-down.styl
@@ -0,0 +1,2 @@
+.click-down
+ click-down()
diff --git a/test/fixtures/interaction/click-inset.css b/test/fixtures/interaction/click-inset.css
new file mode 100644
index 0000000..a889d9a
--- /dev/null
+++ b/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);
+}
diff --git a/test/fixtures/interaction/click-inset.styl b/test/fixtures/interaction/click-inset.styl
new file mode 100644
index 0000000..ff578b3
--- /dev/null
+++ b/test/fixtures/interaction/click-inset.styl
@@ -0,0 +1,2 @@
+.click-inset
+ click-inset()
diff --git a/test/fixtures/interaction/click-shadow.css b/test/fixtures/interaction/click-shadow.css
new file mode 100644
index 0000000..eddb043
--- /dev/null
+++ b/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);
+}
diff --git a/test/fixtures/interaction/click-shadow.styl b/test/fixtures/interaction/click-shadow.styl
new file mode 100644
index 0000000..83dd87c
--- /dev/null
+++ b/test/fixtures/interaction/click-shadow.styl
@@ -0,0 +1,2 @@
+.click-shadow
+ click-shadow()
diff --git a/test/fixtures/interaction/click-shrink.css b/test/fixtures/interaction/click-shrink.css
new file mode 100644
index 0000000..9b89c3e
--- /dev/null
+++ b/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);
+}
diff --git a/test/fixtures/interaction/click-shrink.styl b/test/fixtures/interaction/click-shrink.styl
new file mode 100644
index 0000000..be9d333
--- /dev/null
+++ b/test/fixtures/interaction/click-shrink.styl
@@ -0,0 +1,2 @@
+.click-shrink
+ click-shrink()
diff --git a/test/fixtures/interaction/hover-float.css b/test/fixtures/interaction/hover-float.css
new file mode 100644
index 0000000..00ea8cd
--- /dev/null
+++ b/test/fixtures/interaction/hover-float.css
@@ -0,0 +1,34 @@
+.hover-float {
+ position: relative;
+}
+.hover-float:before {
+ pointer-events: none;
+ position: absolute;
+ z-index: -1;
+ content: '';
+ top: 108%;
+ left: 5%;
+ height: 10px;
+ width: 90%;
+ opacity: 0;
+ background: -webkit-radial-gradient(ellipse at center, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0) 80%);
+ background: -moz-radial-gradient(ellipse at center, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0) 80%);
+ background: -o-radial-gradient(ellipse at center, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0) 80%);
+ background: -ms-radial-gradient(ellipse at center, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0) 80%);
+ background: radial-gradient(ellipse at center, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0) 80%);
+}
+.hover-float:hover {
+ -webkit-transform: translateY(-7px);
+ -moz-transform: translateY(-7px);
+ -o-transform: translateY(-7px);
+ -ms-transform: translateY(-7px);
+ transform: translateY(-7px);
+}
+.hover-float:hover:before {
+ opacity: 1;
+ -webkit-transform: scale(1);
+ -moz-transform: scale(1);
+ -o-transform: scale(1);
+ -ms-transform: scale(1);
+ transform: scale(1);
+}
diff --git a/test/fixtures/interaction/hover-float.styl b/test/fixtures/interaction/hover-float.styl
new file mode 100644
index 0000000..6727499
--- /dev/null
+++ b/test/fixtures/interaction/hover-float.styl
@@ -0,0 +1,2 @@
+.hover-float
+ hover-float()
diff --git a/test/fixtures/interaction/hover-glow.css b/test/fixtures/interaction/hover-glow.css
new file mode 100644
index 0000000..7d95ea0
--- /dev/null
+++ b/test/fixtures/interaction/hover-glow.css
@@ -0,0 +1,3 @@
+.hover-glow:hover {
+ box-shadow: 0px 0px 20px 2px rgba(0,116,217,0.8);
+}
diff --git a/test/fixtures/interaction/hover-glow.styl b/test/fixtures/interaction/hover-glow.styl
new file mode 100644
index 0000000..730fb33
--- /dev/null
+++ b/test/fixtures/interaction/hover-glow.styl
@@ -0,0 +1,2 @@
+.hover-glow
+ hover-glow()
diff --git a/test/fixtures/print/print-styles.css b/test/fixtures/reset/print-styles.css
similarity index 100%
rename from test/fixtures/print/print-styles.css
rename to test/fixtures/reset/print-styles.css
diff --git a/test/fixtures/print/print-styles.styl b/test/fixtures/reset/print-styles.styl
similarity index 100%
rename from test/fixtures/print/print-styles.styl
rename to test/fixtures/reset/print-styles.styl
diff --git a/test/test.coffee b/test/test.coffee
index 45b5272..81a2ef2 100644
--- a/test/test.coffee
+++ b/test/test.coffee
@@ -145,6 +145,24 @@ describe 'interaction', ->
it 'hover-color', (done) ->
compile_and_match(path.join(@path, 'hover-color.styl'), done)
+ it 'hover-glow', (done) ->
+ compile_and_match(path.join(@path, 'hover-glow.styl'), done)
+
+ 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')
@@ -173,12 +191,6 @@ describe 'layout', ->
it 'table-layout', (done) ->
compile_and_match(path.join(@path, 'table-layout.styl'), done)
-describe 'print', ->
-
- before -> @path = path.join(test_path, 'print')
-
- it 'print-styles', (done) ->
- compile_and_match(path.join(@path, 'print-styles.styl'), done)
describe 'reset', ->
@@ -190,6 +202,9 @@ describe 'reset', ->
it 'border-box-html', (done) ->
compile_and_match(path.join(@path, 'border-box-html.styl'), done)
+ it 'print-styles', (done) ->
+ compile_and_match(path.join(@path, 'print-styles.styl'), done)
+
describe 'tables', ->
before -> @path = path.join(test_path, 'tables')
diff --git a/test/visual.html b/test/visual.html
index e6d4bcd..89c141c 100644
--- a/test/visual.html
+++ b/test/visual.html
@@ -41,6 +41,12 @@
+
+
+
+
+
+
@@ -121,6 +127,10 @@
border: 1px solid;
float: left;
margin: .5em .5em 0 0;
+ transition: all .2s ease;
+ }
+ .click-down {
+ transition: none;
}
.bub {
margin: 1em 0;
@@ -221,6 +231,12 @@ interaction
+
+
+ click me
+ click me
+ click me
+ click me