Adds light styling to table headers

server/documents/collections/table.html.eco

@@ -5,7 +5,14 @@ css         : 'table'
 title       : 'Table'
 description : 'Tables display collections of data grouped into rows'
 type        : 'UI Collection'
+
+element     : 'table'
+elementType : 'collection'
+
+themes      : ['Default']
 ---
+
+<link rel="stylesheet/less" type="text/css" href="/build/less/definitions/collections/table.less" />
 <script src="/javascript/table.js"></script>
 
 <%- @partial('header') %>

src/definitions/collections/table.less

@@ -46,10 +46,12 @@
 }
 
 /* Headers */
+.ui.table thead {
+  box-shadow: @headerBoxShadow;
+}
 .ui.table thead th {
-  border-bottom: @headerBorder;
   cursor: auto;
-  background-color: @headerBackground;
+  background: @headerBackground;
   text-align: @headerAlign;
   color: @headerColor;
   padding: @headerVerticalPadding @headerHorizontalPadding;
@@ -57,19 +59,25 @@
   font-style: @headerFontStyle;
   font-weight: @headerFontWeight;
   text-transform: @headerTextTransform;
+  border-bottom: @headerBorder;
+  border-left: @headerDivider;
 }
 .ui.table thead th:first-child {
   border-radius: @borderRadius 0em 0em 0em;
+  border-left: none;
 }
 .ui.table thead th:last-child {
   border-radius: 0em @borderRadius 0em 0em;
 }
 
 /* Footer */
+.ui.table tfoot {
+  box-shadow: @footerBoxShadow;
+}
 .ui.table tfoot th {
   cursor: auto;
   border-top: @footerBorder;
-  background-color: @footerBackground;
+  background: @footerBackground;
   text-align: @footerAlign;
   color: @footerColor;
   padding: @footerVerticalPadding @footerHorizontalPadding;
@@ -602,6 +610,7 @@
 }
 .ui.inverted.table th {
   background-color: @invertedHeaderBackground;
+  border-color: @invertedCellBorderColor;
   color: @invertedHeaderColor;
 }
 .ui.inverted.table tr td {

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

@@ -30,8 +30,9 @@
 @cellBorder: 1px solid @solidBorderColor;
 
 /* Table Header */
-@headerBorder: 1px solid rgba(0, 0, 0, 0.1);
-@headerBackground: transparent;
+@headerBorder: 1px solid @solidBorderColor;
+@headerDivider: 1px solid @solidBorderColor;
+@headerBackground: linear-gradient(transparent, rgba(0, 0, 0, 0.03));
 @headerAlign: left;
 @headerVerticalAlign: middle;
 @headerColor: @textColor;
@@ -40,14 +41,17 @@
 @headerFontStyle: none;
 @headerFontWeight: bold;
 @headerTextTransform: none;
+@headerBoxShadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.05);
 
 /* Table Footer */
-@footerBorder: 1px solid rgba(0, 0, 0, 0.1);
+@footerBoxShadow: 0px -1px 1px 0px rgba(0, 0, 0, 0.05);
+@footerBorder: 1px solid @solidBorderColor;
+@footerDivider: none;
 @footerBackground: rgba(0, 0, 0, 0.05);
 @footerAlign: left;
 @footerVerticalAlign: middle;
 @footerColor: @textColor;
-@footerVerticalPadding: 1em;
+@footerVerticalPadding: @cellVerticalPadding;
 @footerHorizontalPadding: @cellHorizontalPadding;
 @footerFontStyle: italic;
 @footerFontWeight: normal;
@@ -132,12 +136,9 @@
 @sortableIconFont: 'Icons';
 @sortableIconAscending: '\f0d7';
 @sortableIconDescending: '\f0d8';
-
 @sortableDisabledColor: @disabledTextColor;
-
 @sortableHoverBackground: @strongTransparentBlack;
 @sortableHoverColor: @selectedTextColor;
-
 @sortableInvertedHoverBackground: @strongTransparentWhite;
 @sortableInvertedHoverColor: @invertedSelectedTextColor;
 
@@ -148,10 +149,8 @@
 /* Inverted */
 @invertedBackground: #333333;
 @invertedBorder: none;
-
 @invertedCellBorderColor: rgba(0, 0, 0, 0.2);
 @invertedCellColor: @invertedTextColor;
-
 @invertedHeaderBackground: rgba(0, 0, 0, 0.15);
 @invertedHeaderColor: rgba(255, 255, 255, 0.9);
 
@@ -171,9 +170,8 @@
 @basicTableCellHorizontalPadding: 0em;
 @basicTableStripedBackground: transparent;
 
-
 /* Padded */
-@paddedVerticalPadding: 0.8em;
+@paddedVerticalPadding: 1em;
 @paddedHorizontalPadding: 1em;
 
 @compactVerticalPadding: 0.5em;