table.scss in titon-toolkit-2.1.0

- old
+ new
@@ -4,110 +4,111 @@
  * @link        http://titon.io
  */
 
 @import "../common";
 
-#{$table-class} {
-    width: 100%;
-    margin-top: $margin;
-    background: $gray-lightest;
-    border-collapse: collapse;
+@include export("table") {
+    #{$table-class} {
+        width: 100%;
+        margin-top: $margin;
+        background: $gray-lightest;
+        border-collapse: collapse;
 
-    th, td {
-        padding: $padding;
-        line-height: 110%;
-        vertical-align: top;
-        border: 1px solid $gray-dark;
-    }
+        th, td {
+            padding: $padding;
+            line-height: 110%;
+            vertical-align: top;
+            border: 1px solid $gray-dark;
+        }
 
-    // Move headings to bottom
-    thead th {
-        vertical-align: bottom;
-        text-align: left;
+        // Move headings to bottom
+        thead th {
+            vertical-align: bottom;
 
-        .sorter {
-            margin: -.5rem .25rem;
+            .sorter {
+                margin: -.5rem .25rem;
+            }
         }
-    }
 
-    // Allow for multiple tbody's
-    tbody + tbody { border-top-width: 2px; }
+        // Allow for multiple tbody's
+        tbody + tbody { border-top-width: 2px; }
 
-    // Row colors
-    thead tr,
-    tfoot tr {
-        background: $gray-dark;
+        // Row colors
+        thead tr,
+        tfoot tr {
+            background: $gray-dark;
 
-        th { border-color: $gray-darkest; }
+            th { border-color: $gray-darkest; }
+        }
+
+        // Divider
+        tbody tr#{$table-class-divider} { background: $gray-dark !important; }
     }
 
-    // Divider
-    tbody tr#{$table-class-divider} { background: $gray-dark !important; }
-}
+    #{$table-class-responsive} {
+        width: 100%;
+        max-width: 100%;
+        overflow-x: auto;
+    }
 
-#{$table-class-responsive} {
-    width: 100%;
-    max-width: 100%;
-    overflow-x: auto;
-}
+    //-------------------- Modifiers --------------------//
 
-//-------------------- Modifiers --------------------//
+    #{$table-class}.has-hover {
+        tbody tr:not(#{$table-class-divider}):hover { background: #fff; }
+    }
 
-#{$table-class}.has-hover {
-    tbody tr:not(#{$table-class-divider}):hover { background: #fff; }
-}
+    #{$table-class}.is-striped tbody tr {
+        background: $gray;
 
-#{$table-class}.is-striped tbody tr {
-    background: $gray;
+        &:nth-child(odd) { background: $gray-lightest; }
+    }
 
-    &:nth-child(odd) { background: $gray-lightest; }
-}
+    #{$table-class}.is-sortable {
+        thead th {
+            padding: 0;
 
-#{$table-class}.is-sortable {
-    thead th {
-        padding: 0;
+            > a,
+            > span {
+                padding: $padding;
+                display: block;
+            }
 
-        > a,
-        > span {
-            padding: $padding;
-            display: block;
-        }
+            > a {
+                background: $gray-dark;
 
-        > a {
-            background: $gray-dark;
-
-            &:hover { background: $gray-darkest; }
+                &:hover { background: $gray-darkest; }
+            }
         }
     }
-}
 
-//-------------------- Sizes --------------------//
+    //-------------------- Sizes --------------------//
 
-#{$table-class} {
-    @include is-small {
-        thead th,
-        tbody td { padding: $small-padding; }
+    #{$table-class} {
+        @include is-small {
+            thead th,
+            tbody td { padding: $small-padding; }
 
-        &.is-sortable {
-            thead th {
-                padding: 0;
+            &.is-sortable {
+                thead th {
+                    padding: 0;
 
-                > a,
-                > span { padding: $small-padding; }
+                    > a,
+                    > span { padding: $small-padding; }
+                }
             }
         }
-    }
 
-    @include is-large {
-        thead th,
-        tbody td { padding: $large-padding; }
+        @include is-large {
+            thead th,
+            tbody td { padding: $large-padding; }
 
-        &.is-sortable {
-            thead th {
-                padding: 0;
+            &.is-sortable {
+                thead th {
+                    padding: 0;
 
-                > a,
-                > span { padding: $large-padding; }
+                    > a,
+                    > span { padding: $large-padding; }
+                }
             }
         }
     }
-}
\ No newline at end of file
+}