tables docs

pages/_docs/tables.md

@@ -0,0 +1,22 @@
+---
+title: Tables
+menu: docs.tables
+---
+
+## Basic Table
+
+A basic Bootstrap table has a light padding and only horizontal dividers.
+
+The `.table` class adds basic styling to a table:
+
+{% example html %}
+{% include ui/table.html %}
+{% endexample %}
+
+## No wrap
+
+Prevents table cell content from wrapping to another line.
+
+{% example html %}
+{% include ui/table.html nowrap=true responsive=true %}
+{% endexample %}

pages/_includes/ui/table.html

@@ -0,0 +1,36 @@
+{% if include.responsive %}<div class="table-responsive">{% endif %}
+   <table class="table{% if include.nowrap %} table-nowrap{% endif %}"{% if include.sorting %} {% endif %}>
+      <thead>
+         <tr>
+            <th>Firstname</th>
+            <th>Lastname</th>
+            <th>Email</th>{% if include.nowrap %}
+            <th></th>
+            {% endif %}
+         </tr>
+      </thead>
+      <tbody>
+         <tr>
+            <td>John</td>
+            <td>Doe</td>
+            <td>john@example.com</td>{% if include.nowrap %}
+            <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci alias aliquam beatae commodi, dignissimos dolores, doloribus eaque hic inventore laudantium magni nisi obcaecati porro quibusdam ratione rem repellat sint voluptas?</td>
+            {% endif %}
+         </tr>
+         <tr>
+            <td>Mary</td>
+            <td>Moe</td>
+            <td>mary@example.com</td>{% if include.nowrap %}
+            <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci alias aliquam beatae commodi, dignissimos dolores, doloribus eaque hic inventore laudantium magni nisi obcaecati porro quibusdam ratione rem repellat sint voluptas?</td>
+            {% endif %}
+         </tr>
+         <tr>
+            <td>July</td>
+            <td>Dooley</td>
+            <td>july@example.com</td>{% if include.nowrap %}
+            <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci alias aliquam beatae commodi, dignissimos dolores, doloribus eaque hic inventore laudantium magni nisi obcaecati porro quibusdam ratione rem repellat sint voluptas?</td>
+            {% endif %}
+         </tr>
+      </tbody>
+   </table>
+{% if include.responsive %}</div>{% endif %}

pages/_layouts/docs.html

@@ -2,7 +2,6 @@
 layout: default
 menu: docs
 title: Documentation
-page-title: Documentation
 ---
 
 

scss/_variables.scss

@@ -41,7 +41,7 @@ $teal: #2bcbba !default;
 $cyan: #17a2b8 !default;
 
 $light: #f0f2f5 !default;
-$dark: #354051 !default;
+$dark: #2d3748 !default;
 $black: #121212 !default;
 $white: #fff !default;
 

scss/ui/_inputs.custom.scss

@@ -185,7 +185,6 @@ Selectgroup
 
   .selectgroup-item {
     flex-grow: 0;
-    margin-right: .5rem;
   }
 
   .selectgroup-button {

scss/ui/_tables.scss

@@ -18,6 +18,13 @@
   }
 }
 
+.table-nowrap {
+  th, td {
+    white-space: nowrap;
+  }
+}
+
+
 .table-md {
   th,
   td {