Redoes ui definition table as a type, adds much better formatting. Removes classic styles from table and ports to theme

src/definitions/collections/table.less

@@ -77,6 +77,9 @@
 .ui.table thead th:last-child {
   border-radius: 0em @borderRadius 0em 0em;
 }
+.ui.table thead th:only-child {
+  border-radius: @borderRadius @borderRadius 0em 0em;
+}
 
 /* Footer */
 .ui.table tfoot {
@@ -100,6 +103,9 @@
 .ui.table tfoot th:last-child {
   border-radius: 0em 0em @borderRadius 0em;
 }
+.ui.table tfoot th:only-child {
+  border-radius: 0em 0em @borderRadius @borderRadius;
+}
 
 /* Table Row */
 .ui.table tr td {
@@ -185,6 +191,42 @@
 }
 
 
+/*******************************
+             Types
+*******************************/
+
+/*--------------
+   Definition
+---------------*/
+
+.ui.definition.table th:first-child {
+  pointer-events: none;
+  background: @definitionHeaderBackground;
+  font-weight: @definitionHeaderFontWeight;
+  color: @definitionHeaderColor;
+  box-shadow: -1px -1px 0px @borderWidth @definitionPageBackground;
+}
+
+/* Remove Border */
+.ui.celled.definition.table th:first-child {
+  box-shadow: 0px -1px 0px @borderWidth @definitionPageBackground;
+}
+
+/* Highlight Defining Column */
+.ui.definition.table tr td:first-child {
+  background: @definitionColumnBackground;
+  font-weight: @definitionColumnFontWeight;
+  color: @definitionColumnColor;
+}
+
+/* Fix 2nd Column */
+.ui.definition.table thead th:nth-child(2) {
+  border-left: @borderWidth solid @borderColor;
+}
+.ui.definition.table td:nth-child(2) {
+  border-left: @borderWidth solid @borderColor;
+}
+
 
 /*******************************
              States
@@ -297,6 +339,7 @@
 .ui.table tr td.disabled,
 .ui.table tr.disabled:hover td,
 .ui.table tr:hover td.disabled {
+  pointer-events: none;
   color: rgba(150, 150, 150, 0.3);
 }
 
@@ -534,19 +577,6 @@
   width: @sixteenWide;
 }
 
-/*--------------
-     Celled
----------------*/
-
-.ui.celled.table th,
-.ui.celled.table td {
-  border-left: @cellBorder;
-}
-.ui.celled.table th:first-child,
-.ui.celled.table td:first-child {
-  border-left: none;
-}
-
 /*--------------
     Sortable
 ---------------*/
@@ -555,6 +585,7 @@
   cursor: pointer;
   white-space: nowrap;
   border-left: @sortableBorder;
+  color: @sortableColor;
 }
 .ui.sortable.table thead th:first-child {
   border-left: none;
@@ -585,12 +616,6 @@
   content: @sortableIconDescending;
 }
 
-/* Sorted */
-.ui.sortable.table thead th.sorted {
-  background: @sortableActiveBackground;
-  color: @sortableActiveColor;
-}
-
 /* Hover */
 .ui.sortable.table th.disabled:hover {
   cursor: auto;
@@ -601,6 +626,18 @@
   color: @sortableHoverColor;
 }
 
+/* Sorted */
+.ui.sortable.table thead th.sorted {
+  background: @sortableActiveBackground;
+  color: @sortableActiveColor;
+}
+
+/* Sorted Hover */
+.ui.sortable.table thead th.sorted:hover {
+  background: @sortableActiveHoverBackground;
+  color: @sortableActiveHoverColor;
+}
+
 /* Inverted */
 .ui.inverted.sortable.table thead th.sorted {
   background: @sortableInvertedActiveBackground;
@@ -635,17 +672,6 @@
 }
 
 
-/*--------------
-   Definition
----------------*/
-
-.ui.definition.table td:first-child {
-  background: @definitionBackground;
-  font-weight: @definitionFontWeight;
-  color: @definitionColor;
-}
-
-
 /*--------------
    Collapsing
 ---------------*/
@@ -696,6 +722,19 @@
   padding-bottom: 0em;
 }
 
+/*--------------
+     Celled
+---------------*/
+
+.ui.celled.table th,
+.ui.celled.table td {
+  border-left: @cellBorder;
+}
+.ui.celled.table th:first-child,
+.ui.celled.table td:first-child {
+  border-left: none;
+}
+
 /*--------------
      Padded
 ---------------*/

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

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

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

@@ -0,0 +1,14 @@
+/*******************************
+            Table
+*******************************/
+
+/*-------------------
+       Element
+--------------------*/
+
+@boxShadow: @subtleGradient;
+
+@headerBackground: @subtleGradient;
+@headerBoxShadow: @subtleShadow;
+@footerBoxShadow: 0px -1px 1px 0px rgba(0, 0, 0, 0.05);
+@footerBackground: rgba(0, 0, 0, 0.05);

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

@@ -13,7 +13,9 @@
 @borderRadius: 0.25rem;
 @background: #FFFFFF;
 @color: @textColor;
-@border: 1px solid #D0D0D0;
+@borderWidth: 1px;
+@borderColor: #D0D0D0;
+@border: @borderWidth solid @borderColor;
 @boxShadow: none;
 
 /*--------------
@@ -32,7 +34,7 @@
 /* Table Header */
 @headerBorder: 1px solid @solidBorderColor;
 @headerDivider: none;
-@headerBackground: @subtleGradient;
+@headerBackground: @darkWhite;
 @headerAlign: left;
 @headerVerticalAlign: middle;
 @headerColor: @textColor;
@@ -41,13 +43,13 @@
 @headerFontStyle: none;
 @headerFontWeight: bold;
 @headerTextTransform: none;
-@headerBoxShadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.05);
+@headerBoxShadow: none;
 
 /* Table Footer */
-@footerBoxShadow: 0px -1px 1px 0px rgba(0, 0, 0, 0.05);
+@footerBoxShadow: none;
 @footerBorder: 1px solid @solidBorderColor;
 @footerDivider: none;
-@footerBackground: rgba(0, 0, 0, 0.05);
+@footerBackground: @white;
 @footerAlign: left;
 @footerVerticalAlign: middle;
 @footerColor: @textColor;
@@ -136,11 +138,15 @@
 @sortableIconDescending: '\f0d8';
 @sortableDisabledColor: @disabledTextColor;
 
-@sortableHoverBackground: @subtleTransparentBlack @subtleGradient;
+@sortableHoverBackground: @transparentBlack;
 @sortableHoverColor: @hoveredTextColor;
-@sortableActiveBackground: @transparentBlack @subtleGradient;
+
+@sortableActiveBackground: @transparentBlack;
 @sortableActiveColor: @selectedTextColor;
 
+@sortableActiveHoverBackground: @transparentBlack;
+@sortableActiveHoverColor: @selectedTextColor;
+
 @sortableInvertedBorderColor: transparent;
 @sortableInvertedHoverBackground: @transparentWhite @subtleGradient;
 @sortableInvertedHoverColor: @invertedHoveredTextColor;
@@ -160,9 +166,16 @@
 @invertedHeaderColor: rgba(255, 255, 255, 0.9);
 
 /* Definition */
-@definitionBackground: '';
-@definitionColor: @selectedTextColor;
-@definitionFontWeight: bold;
+@definitionPageBackground: @white;
+
+@definitionHeaderBackground: transparent;
+@definitionHeaderColor: @unselectedTextColor;
+@definitionHeaderFontWeight: normal;
+
+
+@definitionColumnBackground: @subtleTransparentBlack;
+@definitionColumnColor: @selectedTextColor;
+@definitionColumnFontWeight: bold;
 
 /* Basic */
 @basicTableBackground: transparent;