Begin theming, updates to ui table

RELEASE NOTES.md

@@ -8,6 +8,7 @@
 - **Modal** - Modal ``left`` and ``right`` sections are now replaced with ``image`` and ``description``
 
 **Enhancements**
+- **Table** - Tables are no longer striped by default, must specify variation 'striped'
 - **Form** - Form now has a success state which will automatically display success messages
 - **Form** - Forms in 'success' state will now show success messages inside
 - **List** - Child lists can now be formatted to sit inside text content

server/documents/collections/table.html.eco

@@ -31,10 +31,7 @@ type        : 'UI Collection'
         <p>Tables are designed to be responsive. Table cells will stack when a mobile viewport size is reached.</p>
       </div>
     </div>
-    <div class="ui ignored message">
-      <p>This example uses a <a href="/elements/segment.html">segment</a> to add padding and a background color.</p>
-    </div>
-    <table class="ui table segment">
+    <table class="ui table">
       <thead>
         <th>Name</th>
         <th>Status</th>
@@ -70,7 +67,7 @@ type        : 'UI Collection'
   <div class="example">
     <h4 class="ui header">Positive / Negative</h4>
     <p>A cell or row may let a user know whether a value is good or bad</p>
-    <table class="ui table segment">
+    <table class="ui table">
       <thead>
         <th>Name</th>
         <th>Status</th>
@@ -80,7 +77,7 @@ type        : 'UI Collection'
         <tr>
           <td>No Name Specified</td>
           <td>Unknown</td>
-          <td>None</td>
+          <td class="negative">None</td>
         </tr>
         <tr class="positive">
           <td>Jimmy</td>
@@ -90,9 +87,9 @@ type        : 'UI Collection'
         <tr>
           <td>Jamie</td>
           <td>Unknown</td>
-          <td class="negative"><i class="icon close"></i> Requires call</td>
+          <td class="positive"><i class="icon close"></i> Requires call</td>
         </tr>
-        <tr>
+        <tr class="negative">
           <td>Jill</td>
           <td>Unknown</td>
           <td>None</td>
@@ -105,7 +102,7 @@ type        : 'UI Collection'
   <div class="example">
     <h4 class="ui header">Error</h4>
     <p>A cell or row may attention the user to an error or a negative value</p>
-    <table class="ui table segment">
+    <table class="ui table">
       <thead>
         <th>Name</th>
         <th>Status</th>
@@ -139,7 +136,7 @@ type        : 'UI Collection'
   <div class="example">
     <h4 class="ui header">Warning</h4>
     <p>A cell or row may warn a user</p>
-    <table class="ui table segment">
+    <table class="ui table">
       <thead>
         <th>Name</th>
         <th>Status</th>
@@ -173,7 +170,7 @@ type        : 'UI Collection'
   <div class="example">
     <h4 class="ui header">Active</h4>
     <p>A cell or row can be active or selected by a user</p>
-    <table class="ui table segment">
+    <table class="ui table">
       <thead>
         <th>Name</th>
         <th>Status</th>
@@ -206,7 +203,7 @@ type        : 'UI Collection'
   <div class="example">
     <h4 class="ui header">Disabled</h4>
     <p>A cell can be disabled</p>
-    <table class="ui table segment">
+    <table class="ui table">
       <thead>
         <th>Name</th>
         <th>Status</th>
@@ -240,10 +237,44 @@ type        : 'UI Collection'
 
   <h2 class="ui dividing header">Variations</h2>
 
+  <div class="example">
+    <h4 class="ui header">Striped</h4>
+    <p>A table can stripe alternate rows of content with a darker color to increase contrast</p>
+    <table class="ui striped table">
+      <thead>
+        <th>Name</th>
+        <th>Status</th>
+        <th>Notes</th>
+      </thead>
+      <tbody>
+        <tr>
+          <td>John</td>
+          <td>Approved</td>
+          <td>None</td>
+        </tr>
+        <tr>
+          <td>Jamie</td>
+          <td>Approved</td>
+          <td>Requires call</td>
+        </tr>
+        <tr>
+          <td>Jill</td>
+          <td>Denied</td>
+          <td>None</td>
+        </tr>
+      </tbody>
+      <tfoot>
+        <th>3 People</th>
+        <th>2 Approved</th>
+        <th></th>
+      </tfoot>
+    </table>
+  </div>
+
   <div class="example">
     <h4 class="ui header">Celled</h4>
     <p>A table may be divided each row into separate cells</p>
-    <table class="ui celled table segment">
+    <table class="ui celled table">
       <thead>
         <th>Name</th>
         <th>Status</th>
@@ -307,7 +338,7 @@ type        : 'UI Collection'
   <div class="example">
     <h4 class="ui header">Even Width</h4>
     <p>A table can specify its column count to divide its content evenly</p>
-    <table class="ui five column table segment">
+    <table class="ui five column table">
       <thead>
         <th>Name</th>
         <th>Status</th>
@@ -352,7 +383,7 @@ type        : 'UI Collection'
     <h4 class="ui header">Column Width</h4>
     <p>A table can specify the width of individual columns independently.</p>
     <div class="ui ignored info message">Tables use a 16 column grid. This should be the total width of all elements in a column</div>
-    <table class="ui five column table segment">
+    <table class="ui five column table">
       <thead>
         <th class="ten wide">Name</th>
         <th class="six wide">Status</th>
@@ -382,7 +413,7 @@ type        : 'UI Collection'
   <div class="example">
     <h4 class="ui header">Collapsing</h4>
     <p>By default tables take the size of their container. A collapsing takes up only as much space as its rows.</p>
-    <table class="ui collapsing table segment">
+    <table class="ui collapsing table">
       <thead>
         <th>Name</th>
         <th>Status</th>
@@ -417,7 +448,7 @@ type        : 'UI Collection'
   <div class="example">
     <h4 class="ui header">Inverted</h4>
     <p>A tables colors can be inverted</p>
-    <table class="ui inverted table segment">
+    <table class="ui inverted table">
       <thead>
         <th>Name</th>
         <th>Status</th>
@@ -448,7 +479,7 @@ type        : 'UI Collection'
     </table>
   </div>
   <div class="another example">
-    <table class="ui inverted red table segment">
+    <table class="ui inverted red table">
       <thead>
         <th>Name</th>
         <th>Status</th>
@@ -482,7 +513,7 @@ type        : 'UI Collection'
   <div class="example">
     <h4 class="ui header">Definition</h4>
     <p>A table may be formatted specifically to provide definitions</p>
-    <table class="ui definition table segment">
+    <table class="ui definition table">
       <thead>
         <th>Behavior</th>
         <th>Arguments</th>
@@ -509,7 +540,7 @@ type        : 'UI Collection'
     <div class="ui warning message">Adding a classname of <code>ascending</code> or <code>descending</code> to the <code>th</code> will show the user the direction of sort. This example uses a modified version of the kylefox's <a href="https://github.com/kylefox/jquery-tablesort">tablesort plugin</a> to provide the proper class names.
     </div>
 
-    <table class="ui sortable table segment">
+    <table class="ui sortable table">
       <thead>
         <th>Name</th>
         <th>Status</th>
@@ -542,7 +573,7 @@ type        : 'UI Collection'
   <div class="example">
     <h4 class="ui header">Padded</h4>
     <p>A table may sometimes need to be more padded for legibility</p>
-    <table class="ui padded table segment">
+    <table class="ui padded table">
       <thead>
         <th>Name</th>
         <th>Status</th>
@@ -565,7 +596,7 @@ type        : 'UI Collection'
   <div class="example">
     <h4 class="ui header">Compact</h4>
     <p>A table may sometimes need to be more compact to make more rows visible at a time</p>
-    <table class="ui compact table segment">
+    <table class="ui compact table">
       <thead>
         <th>Name</th>
         <th>Status</th>
@@ -619,7 +650,7 @@ type        : 'UI Collection'
   <div class="example">
     <h4 class="ui header">Size</h4>
     <p>A table can also be small or large</p>
-    <table class="ui small table segment">
+    <table class="ui small table">
       <thead>
         <th>Name</th>
         <th>Status</th>
@@ -650,7 +681,7 @@ type        : 'UI Collection'
     </table>
   </div>
   <div class="another example">
-    <table class="ui large table segment">
+    <table class="ui large table">
       <thead>
         <th>Name</th>
         <th>Status</th>

src/definitions/collections/table.less

@@ -9,6 +9,16 @@
  *
  */
 
+/*******************************
+            Theme
+*******************************/
+
+@type    : 'collection';
+@element : 'table';
+
+@import '../../semantic.config';
+
+
 /*******************************
              Table
 *******************************/
@@ -16,80 +26,80 @@
 /* Prototype */
 .ui.table {
   width: 100%;
-  border-collapse: collapse;
+  background: @background;
+  border: @border;
+  box-shadow: @boxShadow;
+  border-radius: @borderRadius;
+}
+
+.ui.table {
+  border-collapse: @borderCollapse;
+  border-spacing: @borderSpacing;
 }
 
 /* Table Content */
 .ui.table th,
-.ui.table tr,
 .ui.table td {
-  border-collapse: collapse;
-
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  -ms-box-sizing: border-box;
-  box-sizing: border-box;
-
-  -webkit-transition: all 0.1s ease-out;
-  -moz-transition: all 0.1s ease-out;
-  -o-transition: all 0.1s ease-out;
-  -ms-transition: all 0.1s ease-out;
-  transition: all 0.1s ease-out;
+  transition: @transition;
 }
 
 /* Headers */
-.ui.table thead {
-  border-bottom: 1px solid rgba(0, 0, 0, 0.03);
-}
-.ui.table tfoot th {
-  background-color: rgba(0, 0, 0, 0.03);
-}
-.ui.table th {
+.ui.table thead th {
+  border-bottom: @headerBorder;
   cursor: auto;
-
-  background-color: rgba(0, 0, 0, 0.05);
-
-  text-align: left;
-  color: rgba(0, 0, 0, 0.8);
-  padding: 0.5em 0.7em;
-  vertical-align: middle;
+  background-color: @headerBackground;
+  text-align: @headerAlign;
+  color: @headerColor;
+  padding: @headerVerticalPadding @headerHorizontalPadding;
+  vertical-align: @headerVerticalAlign;
+  font-style: @headerFontStyle;
+  font-weight: @headerFontWeight;
+  text-transform: @headerTextTransform;
 }
 .ui.table thead th:first-child {
-  border-radius: 5px 0px 0px 0px;
+  border-radius: @borderRadius 0em 0em 0em;
 }
 .ui.table thead th:last-child {
-  border-radius: 0px 5px 0px 0px;
+  border-radius: 0em @borderRadius 0em 0em;
+}
+
+/* Footer */
+.ui.table tfoot th {
+  cursor: auto;
+  border-top: @footerBorder;
+  background-color: @footerBackground;
+  text-align: @footerAlign;
+  color: @footerColor;
+  padding: @footerVerticalPadding @footerHorizontalPadding;
+  vertical-align: @footerVerticalAlign;
+  font-style: @footerFontStyle;
+  font-weight: @footerFontWeight;
+  text-transform: @footerTextTransform;
 }
 .ui.table tfoot th:first-child {
-  border-radius: 0px 0px 0px 5px;
+  border-radius: 0em 0em 0em @borderRadius;
 }
 .ui.table tfoot th:last-child {
-  border-radius: 0px 0px 5px 0px;
-}
-
-/* Table Cells */
-.ui.table td {
-  padding: 0.5em 0.7em;
-  vertical-align: middle;
+  border-radius: 0em 0em @borderRadius 0em;
 }
 
-/* Footer */
-.ui.table tfoot {
-  border-top: 1px solid rgba(0, 0, 0, 0.03);
+/* Table Row */
+.ui.table tr td {
+  border-top: @rowBorder;
 }
-.ui.table tfoot th {
-  font-weight: normal;
-  font-style: italic;
+.ui.table tr:first-child td {
+  border-top: none;
 }
 
-/* Table Striping */
-.ui.table tbody tr:nth-child(2n) {
-  background-color: rgba(0, 0, 50, 0.02);
+/* Table Cells */
+.ui.table td {
+  padding: @cellVerticalPadding @cellHorizontalPadding;
+  vertical-align: @cellVerticalAlign;
 }
 
 /* Icons */
 .ui.table > .icon {
-  vertical-align: baseline;
+  vertical-align: @iconVerticalAlign;
 }
 .ui.table > .icon:only-child {
   margin: 0em;
@@ -105,15 +115,16 @@
 
 
 /* Responsive */
-
 @media only screen and (max-width : 768px) {
   .ui.table {
     display: block;
     padding: 0em;
   }
-  .ui.table thead,
+  .ui.table thead {
+    display: @responsiveHeaderDisplay;
+  }
   .ui.table tfoot {
-    display: none;
+    display: @responsiveFooterDisplay;
   }
   .ui.table tbody {
     display: block;
@@ -126,16 +137,16 @@
     width: 100% !important;
     display: block;
     border: none !important;
-    padding: 0.25em 0.75em;
-    box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.05) !important;
+    padding: @responsiveCellVerticalPadding @responsiveCellHorizontalPadding;
+    box-shadow: @responsiveCellBoxShadow
   }
   .ui.table td:first-child {
     font-weight: bold;
-    padding-top: 1em;
+    padding-top: @responsiveRowVerticalPadding;
   }
   .ui.table td:last-child {
-    box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.1) inset !important;
-    padding-bottom: 1em;
+    box-shadow: @responsiveRowBoxShadow;
+    padding-bottom: @responsiveRowVerticalPadding;
   }
 
   /* Clear BG Colors */
@@ -144,7 +155,7 @@
   .ui.table tr > td.active,
   .ui.table tr > td.positive,
   .ui.table tr > td.negative {
-    background-color: transparent !important;
+    background-color: @responsiveStatusColor !important;
   }
 }
 
@@ -154,52 +165,26 @@
              States
 *******************************/
 
-/*--------------
-      Hover
----------------*/
-
-/* Sortable */
-.ui.sortable.table th.disabled:hover {
-  cursor: auto;
-  text-align: left;
-  font-weight: bold;
-  color: #333333;
-  color: rgba(0, 0, 0, 0.8);
-}
-.ui.sortable.table thead th:hover {
-  background-color: rgba(0, 0, 0, 0.13);
-  color: rgba(0, 0, 0, 0.8);
-}
-
-/* Inverted Sortable */
-.ui.inverted.sortable.table thead th:hover {
-  background-color: rgba(255, 255, 255, 0.13);
-  color: rgba(255, 255, 255, 1);
-}
-
-
 /*--------------
     Positive
 ---------------*/
 
 .ui.table tr.positive,
 .ui.table td.positive {
-  -webkit-box-shadow: 2px 0px 0px #119000 inset;
-  -moz-box-shadow: 2px 0px 0px #119000 inset;
-  box-shadow: 2px 0px 0px #119000 inset;
+  box-shadow: @positiveBoxShadow;
 }
 .ui.table tr.positive td,
 .ui.table td.positive {
-  background-color: #F2F8F0 !important;
-  color: #119000 !important;
+  background: @positiveBackgroundColor !important;
+  color: @positiveColor !important;
 }
 .ui.celled.table tr.positive:hover td,
 .ui.celled.table tr:hover td.positive,
 .ui.table tr.positive:hover td,
 .ui.table td:hover.positive,
 .ui.table th:hover.positive {
-  background-color: #ECF5E9 !important;
-  color: #119000 !important;
+  background: @positiveBackgroundHover !important;
+  color: @positiveColorHover !important;
 }
 
 /*--------------
@@ -208,8 +193,6 @@
 
 .ui.table tr.negative,
 .ui.table td.negative {
-  -webkit-box-shadow: 2px 0px 0px #CD2929 inset;
-  -moz-box-shadow: 2px 0px 0px #CD2929 inset;
   box-shadow: 2px 0px 0px #CD2929 inset;
 }
 .ui.table tr.negative td,
@@ -232,8 +215,6 @@
 
 .ui.table tr.error,
 .ui.table td.error {
-  -webkit-box-shadow: 2px 0px 0px #CD2929 inset;
-  -moz-box-shadow: 2px 0px 0px #CD2929 inset;
   box-shadow: 2px 0px 0px #CD2929 inset;
 }
 .ui.table tr.error td,
@@ -257,8 +238,6 @@
 
 .ui.table tr.warning,
 .ui.table td.warning {
-  -webkit-box-shadow: 2px 0px 0px #7D6C00 inset;
-  -moz-box-shadow: 2px 0px 0px #7D6C00 inset;
   box-shadow: 2px 0px 0px #7D6C00 inset;
 }
 .ui.table tr.warning td,
@@ -283,8 +262,6 @@
 
 .ui.table tr.active,
 .ui.table td.active {
-  -webkit-box-shadow: 2px 0px 0px rgba(50, 50, 50, 0.9) inset;
-  -moz-box-shadow: 2px 0px 0px rgba(50, 50, 50, 0.9) inset;
   box-shadow: 2px 0px 0px rgba(50, 50, 50, 0.9) inset;
 }
 
@@ -310,6 +287,16 @@
           Variations
 *******************************/
 
+/*--------------
+     Striped
+---------------*/
+
+/* Table Striping */
+.ui.striped.table > tr:nth-child(2n),
+.ui.striped.table tbody tr:nth-child(2n) {
+  background-color: @stripedBackground;
+}
+
 /*--------------
   Column Count
 ---------------*/
@@ -440,7 +427,11 @@
 }
 .ui.celled.table th,
 .ui.celled.table td {
-  border: 1px solid rgba(0, 0, 0, 0.1);
+  border-left: 1px solid rgba(0, 0, 0, 0.1);
+}
+.ui.celled.table th:first-child,
+.ui.celled.table td:first-child {
+  border-left: none;
 }
 
 /* Coupling with segment */
@@ -469,9 +460,6 @@
 }
 .ui.sortable.table thead th.sorted,
 .ui.sortable.table thead th.sorted:hover {
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
   user-select: none;
 }
 
@@ -495,6 +483,26 @@
   content: '\25be';
 }
 
+/* Sortable Hover */
+.ui.sortable.table th.disabled:hover {
+  cursor: auto;
+  text-align: left;
+  font-weight: bold;
+  color: #333333;
+  color: rgba(0, 0, 0, 0.8);
+}
+.ui.sortable.table thead th:hover {
+  background-color: rgba(0, 0, 0, 0.13);
+  color: rgba(0, 0, 0, 0.8);
+}
+
+/* Inverted Sortable */
+.ui.inverted.sortable.table thead th:hover {
+  background-color: rgba(255, 255, 255, 0.13);
+  color: rgba(255, 255, 255, 1);
+}
+
+
 /*--------------
     Inverted
 ---------------*/
@@ -583,4 +591,6 @@
 /* Large */
 .ui.large.table {
   font-size: 1.1em;
-}
+}
+
+.loadUIOverrides();

src/themes/_site/collections/table.overrides

@@ -0,0 +1,3 @@
+/*******************************
+           Overrides
+*******************************/

src/themes/_site/collections/table.variables

@@ -0,0 +1,3 @@
+/*******************************
+    User Variable Overrides
+*******************************/

src/themes/packages/default/collections/table.overrides

@@ -0,0 +1,3 @@
+/*******************************
+           Overrides
+*******************************/

src/themes/packages/default/collections/table.variables

@@ -0,0 +1,97 @@
+/*-------------------
+    Globals Used
+--------------------*/
+
+// @textColor
+// @borderColor
+// @invertedUnselectedTextColor
+
+/*-------------------
+      Collection
+--------------------*/
+
+@borderCollapse: separate;
+@borderSpacing: 0px;
+@transition: all 0.2s @defaultEasing;
+@borderRadius: 0.25rem;
+@background: #FFFFFF;
+@border: 1px solid @solidBorderColor;
+@boxShadow: none;
+
+/*--------------
+    Elements
+---------------*/
+
+/* Table Row */
+@rowBorder: 1px solid @solidBorderColor;
+
+/* Table Cell */
+@cellVerticalPadding: 0.7em;
+@cellHorizontalPadding: 0.8em;
+@cellVerticalAlign: middle;
+@cellBorder: 1px solid @solidBorderColor;
+
+/* Table Header */
+@headerBorder: 1px solid rgba(0, 0, 0, 0.1);
+@headerBackground: transparent;
+@headerAlign: left;
+@headerVerticalAlign: middle;
+@headerColor: @textColor;
+@headerVerticalPadding: @cellVerticalPadding;
+@headerHorizontalPadding: @cellHorizontalPadding;
+@headerFontStyle: none;
+@headerFontWeight: bold;
+@headerTextTransform: none;
+
+/* Table Footer */
+@footerBorder: 1px solid rgba(0, 0, 0, 0.1);
+@footerBackground: rgba(0, 0, 0, 0.05);
+@footerAlign: left;
+@footerVerticalAlign: middle;
+@footerColor: @textColor;
+@footerVerticalPadding: 1em;
+@footerHorizontalPadding: @cellHorizontalPadding;
+@footerFontStyle: italic;
+@footerFontWeight: normal;
+@footerTextTransform: none;
+
+/* Responsive Size */
+@responsiveHeaderDisplay: none;
+@responsiveFooterDisplay: none;
+
+@responsiveRowVerticalPadding: 1em;
+@responsiveRowBoxShadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.1) inset !important;
+
+@responsiveCellVerticalPadding: 0.25em;
+@responsiveCellHorizontalPadding: 0.75em;
+@responsiveCellBoxShadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.05) !important;
+
+@responsiveStatusColor: transparent;
+
+/*--------------
+    Couplings
+---------------*/
+
+@iconVerticalAlign: baseline;
+
+
+/*--------------
+     States
+---------------*/
+
+@stateMarkerWidth: 2px;
+
+/* Positive */
+@positiveColor: #119000;
+@positiveBackgroundColor: #F2F8F0;
+@positiveBoxShadow: @stateMarkerWidth 0px 0px @positiveColor inset;
+
+@positiveBackgroundHover: #ECF5E9;
+@positiveColorHover: #119000;
+
+
+/*--------------
+     Types
+---------------*/
+
+@stripedBackground: rgba(0, 0, 50, 0.03);