Merge pull request #204 from jenius/rule

add horizontal rule

Author: Jeff Escalante

axis/layout.styl

@@ -113,6 +113,19 @@ ratio-box(ratio = 1/1)
     height: 0
     padding-top: (1 / ratio) * 100%
 
+// Mixin: Horizontal Rule
+//
+// Clean reset for divider lines.
+//
+// ex: rule()
+// ex rule(blue)
+
+rule($color = rgba(#000, .15), $spacing = 1.5em)
+  border: 0
+  border-bottom: 1px solid $color
+  height: 0
+  padding: 0
+  margin: $spacing 0
 
 // Mixin: Table Layout
 //

test/fixtures/layout/rule.css

@@ -0,0 +1,7 @@
+hr {
+  border: 0;
+  border-bottom: 1px solid rgba(0,0,0,0.15);
+  height: 0;
+  padding: 0;
+  margin: 1.5em 0;
+}

test/fixtures/layout/rule.styl

@@ -0,0 +1,2 @@
+hr
+  rule()

test/test.coffee

@@ -164,11 +164,14 @@ describe 'layout', ->
   it 'ratio-box', (done) ->
     compile_and_match(path.join(@path, 'ratio-box.styl'), done)
 
+  it 'rule', (done) ->
+    compile_and_match(path.join(@path, 'rule.styl'), done)
+
   it 'vertical-align', (done) ->
     compile_and_match(path.join(@path, 'vertical-align.styl'), done)
 
   it 'table-layout', (done) ->
-    compile_and_match(path.join(@path, 'table-layout.styl'), done)    
+    compile_and_match(path.join(@path, 'table-layout.styl'), done)
 
 describe 'print', ->
 

test/visual.html

@@ -48,8 +48,9 @@
     <link rel='stylesheet' href='fixtures/layout/inline-block.css' >
     <link rel='stylesheet' href='fixtures/layout/media.css' >
     <link rel='stylesheet' href='fixtures/layout/ratio-box.css' >
+    <link rel='stylesheet' href='fixtures/layout/rule.css' >
     <link rel='stylesheet' href='fixtures/layout/vertical-align.css' >
-    <link rel='stylesheet' href='fixtures/layout/table-layout.css' >    
+    <link rel='stylesheet' href='fixtures/layout/table-layout.css' >
 
     <!-- tables -->
     <link rel='stylesheet' href='fixtures/tables/table.css' >
@@ -250,6 +251,7 @@ <h1>layout</h1>
         <iframe width="1280" height="720" src="https://www.youtube.com/embed/o0xr1JRZOb4" frameborder="0" allowfullscreen></iframe>
       </div>
 
+      <hr>
       <div class="vertical-align">
         <div class='inner-div'>vertically aligned</div>
       </div>