feat: add hover mixin (#82)

jescalan · Nov 15, 2017 · e45253b · e45253b
1 parent a176283
commit e45253b
Show file tree

Hide file tree

Showing 6 changed files with 268 additions and 0 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/readme.md b/readme.md
@@ -192,6 +192,10 @@ When the viewport is taller than it is wide, the styles in the block will take e
 +mobile(orientation: portrait)
 ```
 
+##### `+hover()`
+The hover media feature is used to query the user’s ability to hover over elements on the page with the primary pointing device.
+
+
 ### PX to EM unit conversion
 
 It is a popular opinion that using `em` units for media queries is a good practice, and [for good reason](http://blog.cloudfour.com/the-ems-have-it-proportional-media-queries-ftw/).

diff --git a/rupture/index.styl b/rupture/index.styl
@@ -288,3 +288,11 @@ rupture-portrait(density = null, fallback-class = null)
           {block}
 
 portrait = rupture-portrait unless rupture-no-conflict
+
+
+rupture-hover(density = null, orientation = null, fallback-class = null)
+  condition = "only screen and (hover: hover)";
+  @media ({condition})
+    {block}
+
+hover = rupture-hover unless rupture-no-conflict
diff --git a/test/fixtures/expected/hover.css b/test/fixtures/expected/hover.css
@@ -0,0 +1,11 @@
+.hello {
+  color: #f00;
+}
+@media (only screen and (hover: hover)) {
+  .hello {
+    color: #00f;
+  }
+  .hello:hover {
+    color: #f00;
+  }
+}
diff --git a/test/fixtures/hover.styl b/test/fixtures/hover.styl
@@ -0,0 +1,7 @@
+.hello
+  color: red
+
+  +hover()
+    color: blue
+    &:hover
+      color: red
diff --git a/test/test.coffee b/test/test.coffee
@@ -81,3 +81,6 @@ describe 'basic', ->
 
   it 'supports fallback classes', (done) ->
     match_expected('fallback-classes.styl', done)
+
+  it 'hover', (done) ->
+    match_expected('hover.styl', done)