Create h-line mixin for creating different dividers

diff --git a/scss/components/_typography.scss b/scss/components/_typography.scss
index 8ef5ea70a1a73f851de4cdc65ccdab8efc2aac23..4c2b5c71df8f7f5cc0cccd5b71d8fe898c127412 100755 (executable)
--- a/scss/components/_typography.scss
+++ b/scss/components/_typography.scss
@@ -126,6 +126,10 @@ $hr-border: 1px solid $black !default;
 /// @type Number | List
 $hr-margin: 20px !default;
 
+/// Default alignment for a divider.
+/// @type String
+$hr-align: center !default;
+
 /// Text decoration for anchors.
 /// @type Keyword
 $anchor-text-decoration: none !default;
@@ -154,6 +158,52 @@ $stat-font-size: 40px !default;
 /// @type Boolean
 $remove-ios-blue: true !default;
 
+/// Create a divider/horizontal rule.
+/// @param {String} $align  - Left, center, or right
+/// @param {String} $width  - Width of divider
+/// @param {String} $border - Shorthand border style for divider
+/// @param {String} $margin - Margin above and below divider
+@mixin h-line($align: $hr-align, $width: $hr-width, $border: $hr-border, $margin: nth($hr-margin, 1)) {
+  @at-root {
+    td.columns & table,
+    td.column  & table,
+    th.columns & table,
+    th.column  & table {
+      width: auto;
+    }
+  }
+
+  th {
+    padding-bottom: $margin;
+    @if $align == 'left' {
+      text-align: left;
+    } @elseif $align == 'right' {
+      text-align: right;
+    } @else {
+      text-align: center;
+    }
+  }
+
+    table {
+      display: inline-block;
+      margin: 0;
+      Margin: 0;
+    }
+
+      td {
+        width: $width;
+        height: 0;
+        padding-top: $margin;
+        clear: both;
+        border-top: 0;
+        border-right: 0;
+        border-bottom: $border;
+        border-left: 0;
+        font-size: 0;
+        line-height: 0;
+      }
+}
+
 body,
 table.body,
 h1,
@@ -310,31 +360,7 @@ pre {
 // Horizontal rule
 table.hr,
 table.h-line {
-  width: 100%;
-
-  th {
-    padding-bottom: $hr-margin;
-    text-align: center;
-  }
-
-    table {
-      width: 100%;
-      max-width: $hr-width;
-      margin: 0 auto;
-    }
-
-    td {
-      height: 0;
-      width: $hr-width;
-      padding-top: $hr-margin;
-      font-size: 0;
-      line-height: 0;
-      border-top: 0;
-      border-right: 0;
-      border-bottom: $hr-border;
-      border-left: 0;
-      clear: both;
-    }
+  @include h-line($hr-align, $hr-width, $hr-border, $hr-margin);
 }
 
 // Use to style a large number to display a statistic