Add unique features

docs/_includes/comparison.html

@@ -29,7 +29,7 @@
   </td>
 </tr>
 <tr>
-  <td>
+  <td class="is-unique">
     <a href="{{ site.url }}/documentation/grid/tiles/">
       tile
     </a>
@@ -44,7 +44,7 @@
   </th>
 </tr>
 <tr>
-  <td>
+  <td class="is-unique">
     <a href="{{ site.url }}/documentation/form/general/">
       field
     </a>
@@ -126,7 +126,7 @@
   </td>
 </tr>
 <tr>
-  <td>
+  <td class="is-unique">
     <a href="{{ site.url }}/documentation/form/select/">
       select
     </a>
@@ -160,7 +160,7 @@
   </td>
 </tr>
 <tr>
-  <td>
+  <td class="is-unique">
     <a href="{{ site.url }}/documentation/form/file/">
       file
     </a>
@@ -187,7 +187,7 @@
   </th>
 </tr>
 <tr>
-  <td>
+  <td class="is-unique">
     <a href="{{ site.url }}/documentation/elements/box/">
       box
     </a>
@@ -209,7 +209,7 @@
   </td>
 </tr>
 <tr>
-  <td>
+  <td class="is-unique">
     <a href="{{ site.url }}/documentation/elements/content/">
       content
     </a>
@@ -354,7 +354,7 @@
   <td class="is-empty">
     –
   </td>
-  <td>
+  <td class="is-unique">
     <a href="http://getbootstrap.com/css/#type-lists" target="_blank">
       lists
     </a>
@@ -364,7 +364,7 @@
   <td class="is-empty">
     –
   </td>
-  <td>
+  <td class="is-unique">
     <a href="http://getbootstrap.com/css/#caret" target="_blank">
       caret
     </a>
@@ -388,7 +388,7 @@
   </td>
 </tr>
 <tr>
-  <td>
+  <td class="is-unique">
     <a href="{{ site.url }}/documentation/components/card/">
       card
     </a>
@@ -410,7 +410,7 @@
   </td>
 </tr>
 <tr>
-  <td>
+  <td class="is-unique">
     <a href="{{ site.url }}/documentation/components/level/">
       level
     </a>
@@ -423,7 +423,7 @@
   <td class="is-empty">
     –
   </td>
-  <td>
+  <td class="is-unique">
     <a href="http://getbootstrap.com/components/#list-group" target="_blank">
       list group
     </a>
@@ -442,7 +442,7 @@
   </td>
 </tr>
 <tr>
-  <td>
+  <td class="is-unique">
     <a href="{{ site.url }}/documentation/components/menu/">
       menu
     </a>
@@ -491,7 +491,7 @@
   <td class="is-empty">
     –
   </td>
-  <td>
+  <td class="is-unique">
     <a href="http://getbootstrap.com/components/#page-header" target="_blank">
       page header
     </a>
@@ -510,7 +510,7 @@
   </td>
 </tr>
 <tr>
-  <td>
+  <td class="is-unique">
     <a href="{{ site.url }}/documentation/components/panel/">
       panel
     </a>
@@ -535,7 +535,7 @@
   <td class="is-empty">
     –
   </td>
-  <td>
+  <td class="is-unique">
     <a href="http://getbootstrap.com/components/#wells" target="_blank">
       wells
     </a>
@@ -571,7 +571,7 @@
   </td>
 </tr>
 <tr>
-  <td>
+  <td class="is-unique">
     <a href="{{ site.url }}/documentation/layout/section/">
       section
     </a>
@@ -581,7 +581,7 @@
   </td>
 </tr>
 <tr>
-  <td>
+  <td class="is-unique">
     <a href="{{ site.url }}/documentation/layout/footer/">
       footer
     </a>

docs/_sass/bootstrap.sass

@@ -62,24 +62,36 @@ $bootstrap-invert: #fff
   margin: 0 auto
   max-width: 42rem
   .table
-    svg
-      float: left
-      height: 1rem
-      margin-right: 0.5rem
-      margin-top: 0.25rem
-      width: auto
+    color: $red
+    thead,
+    tfoot
+      th
+        font-size: 1.5rem
+        text-align: center
+      svg
+        height: 1.5rem
+        margin-right: 1rem
+        position: relative
+        top: 0.25rem
+        width: auto
     tbody
-      th[colspan]
-        font-size: 1.25em
-      a
-        color: $red
+      th
+        font-size: 1.25rem
+        text-align: center
+      td
         font-family: $family-monospace
+        width: 50%
+      a
+        color: currentColor
         &:hover
-          color: $text-strong
           text-decoration: underline
     .is-empty
       background-color: $background
       color: $text-light
+    .is-unique
+      background-color: rgba($green, 0.25)
+      color: $text-strong
+      font-weight: $weight-bold
 
 .comparison-header
   margin-bottom: 3rem

sass/elements/table.sass

@@ -30,6 +30,14 @@ $table-striped-row-even-hover-background-color: $white-ter !default
     border-width: $table-cell-border-width
     padding: $table-cell-padding
     vertical-align: top
+    // Colors
+    @each $name, $pair in $colors
+      $color: nth($pair, 1)
+      $color-invert: nth($pair, 2)
+      &.is-#{$name}
+        background-color: $color
+        border-color: $color
+        color: $color-invert
     // Modifiers
     &.is-narrow
       white-space: nowrap