#2153, fix stacked tables from removing sortable/warning/error styles. Add selectable table variation #1803

src/definitions/collections/table.less

@@ -172,6 +172,12 @@
   .ui.table:not(.unstackable) tfoot {
     display: @responsiveFooterDisplay;
   }
+  .ui.table:not(.unstackable) tr {
+    padding-top: @responsiveRowVerticalPadding;
+    padding-bottom: @responsiveRowVerticalPadding;
+    box-shadow: @responsiveRowBoxShadow;
+  }
+
   .ui.table:not(.unstackable) tr > th,
   .ui.table:not(.unstackable) tr > td {
     background: none;
@@ -182,34 +188,12 @@
   .ui.table:not(.unstackable) th:first-child,
   .ui.table:not(.unstackable) td:first-child {
     font-weight: bold;
-    padding-top: @responsiveRowVerticalPadding;
-  }
-  .ui.table:not(.unstackable) th:last-child,
-  .ui.table:not(.unstackable) td:last-child {
-    box-shadow: @responsiveRowBoxShadow;
-    padding-bottom: @responsiveRowVerticalPadding;
-  }
-
-  /* Clear BG Colors */
-  .ui.table:not(.unstackable) tr > td.warning,
-  .ui.table:not(.unstackable) tr > td.error,
-  .ui.table:not(.unstackable) tr > td.active,
-  .ui.table:not(.unstackable) tr > td.positive,
-  .ui.table:not(.unstackable) tr > td.negative {
-    background-color: @responsiveStatusColor !important;
   }
 
   /* Definition Table */
   .ui.definition.table:not(.unstackable) thead th:first-child {
     box-shadow: none !important;
   }
-  .ui.definition.table:not(.unstackable) tr td:first-child {
-    padding-bottom: @responsiveRowVerticalPadding;
-  }
-  .ui.definition.table:not(.unstackable) tr td:nth-child(n+2) {
-    padding-top: @responsiveRowVerticalPadding;
-  }
-
 }
 
 
@@ -314,16 +298,11 @@
 .ui.table td.positive {
   box-shadow: @positiveBoxShadow;
 }
-.ui.table tr.positive td,
+.ui.table tr.positive,
 .ui.table td.positive {
   background: @positiveBackgroundColor !important;
   color: @positiveColor !important;
 }
-.ui.celled.table tr.positive:hover td,
-.ui.celled.table tr:hover td.positive {
-  background: @positiveBackgroundHover !important;
-  color: @positiveColorHover !important;
-}
 
 /*--------------
      Negative
@@ -333,16 +312,11 @@
 .ui.table td.negative {
   box-shadow: @negativeBoxShadow;
 }
-.ui.table tr.negative td,
+.ui.table tr.negative,
 .ui.table td.negative {
   background: @negativeBackgroundColor !important;
   color: @negativeColor !important;
 }
-.ui.celled.table tr.negative:hover td,
-.ui.celled.table tr:hover td.negative {
-  background: @negativeBackgroundHover !important;
-  color: @negativeColorHover !important;
-}
 
 /*--------------
       Error
@@ -352,17 +326,11 @@
 .ui.table td.error {
   box-shadow: @errorBoxShadow;
 }
-.ui.table tr.error td,
+.ui.table tr.error,
 .ui.table td.error {
   background: @errorBackgroundColor !important;
   color: @errorColor !important;
 }
-.ui.celled.table tr.error:hover td,
-.ui.celled.table tr:hover td.error {
-  background: @errorBackgroundHover !important;
-  color: @errorColorHover !important;
-}
-
 /*--------------
      Warning
 ---------------*/
@@ -371,16 +339,11 @@
 .ui.table td.warning {
   box-shadow: @warningBoxShadow;
 }
-.ui.table tr.warning td,
+.ui.table tr.warning,
 .ui.table td.warning {
   background: @warningBackgroundColor !important;
   color: @warningColor !important;
 }
-.ui.celled.table tr.warning:hover td,
-.ui.celled.table tr:hover td.warning {
-  background: @warningBackgroundHover !important;
-  color: @warningColorHover !important;
-}
 
 /*--------------
      Active
@@ -390,16 +353,12 @@
 .ui.table td.active {
   box-shadow: @activeBoxShadow;
 }
-.ui.table tr.active td,
+.ui.table tr.active,
 .ui.table td.active {
   background: @activeBackgroundColor !important;
   color: @activeColor !important;
 }
-.ui.celled.table tr.active:hover td,
-.ui.celled.table tr:hover td.active {
-  background: @activeBackgroundColor !important;
-  color: @activeColor !important;
-}
+
 
 
 /*--------------
@@ -408,7 +367,7 @@
 
 .ui.table tr.disabled td,
 .ui.table tr td.disabled,
-.ui.table tr.disabled:hover td,
+.ui.table tr.disabled:hover,
 .ui.table tr:hover td.disabled {
   pointer-events: none;
   color: @disabledTextColor;
@@ -443,6 +402,11 @@
   .ui[class*="tablet stackable"].table tfoot {
     display: @responsiveFooterDisplay;
   }
+  .ui[class*="tablet stackable"].table tr {
+    padding-top: @responsiveRowVerticalPadding;
+    padding-bottom: @responsiveRowVerticalPadding;
+    box-shadow: @responsiveRowBoxShadow;
+  }
   .ui[class*="tablet stackable"].table tr > th,
   .ui[class*="tablet stackable"].table tr > td {
     background: none;
@@ -450,37 +414,11 @@
     padding: @responsiveCellVerticalPadding @responsiveCellHorizontalPadding;
     box-shadow: @responsiveCellBoxShadow;
   }
-  .ui[class*="tablet stackable"].table th:first-child,
-  .ui[class*="tablet stackable"].table td:first-child {
-    font-weight: bold;
-    padding-top: @responsiveRowVerticalPadding;
-  }
-  .ui[class*="tablet stackable"].table th:last-child,
-  .ui[class*="tablet stackable"].table td:last-child {
-    box-shadow: @responsiveRowBoxShadow;
-    padding-bottom: @responsiveRowVerticalPadding;
-  }
-
-  /* Clear BG Colors */
-  .ui[class*="tablet stackable"].table tr > td.warning,
-  .ui[class*="tablet stackable"].table tr > td.error,
-  .ui[class*="tablet stackable"].table tr > td.active,
-  .ui[class*="tablet stackable"].table tr > td.positive,
-  .ui[class*="tablet stackable"].table tr > td.negative {
-    background-color: @responsiveStatusColor !important;
-  }
 
   /* Definition Table */
   .ui.definition[class*="tablet stackable"].table thead th:first-child {
     box-shadow: none !important;
   }
-  .ui.definition[class*="tablet stackable"].table tr td:first-child {
-    padding-bottom: @responsiveRowVerticalPadding;
-  }
-  .ui.definition[class*="tablet stackable"].table tr td:nth-child(n+2) {
-    padding-top: @responsiveRowVerticalPadding;
-  }
-
 }
 
 /*--------------
@@ -527,6 +465,43 @@
   white-space: nowrap;
 }
 
+/*--------------
+   Hoverable
+---------------*/
+
+.ui.selectable.table tr:hover {
+  background: @selectableBackground !important;
+  color: @selectableTextColor !important;
+}
+
+/* Other States */
+.ui.selectable.table tr.error:hover,
+.ui.selectable.table tr:hover td.error {
+  background: @errorBackgroundHover !important;
+  color: @errorColorHover !important;
+}
+.ui.selectable.table tr.warning:hover,
+.ui.selectable.table tr:hover td.warning {
+  background: @warningBackgroundHover !important;
+  color: @warningColorHover !important;
+}
+.ui.selectable.table tr.active:hover,
+.ui.selectable.table tr:hover td.active {
+  background: @activeBackgroundColor !important;
+  color: @activeColor !important;
+}
+.ui.selectable.table tr.positive:hover,
+.ui.selectable.table tr:hover td.positive {
+  background: @positiveBackgroundHover !important;
+  color: @positiveColorHover !important;
+}
+.ui.selectable.table tr.negative:hover,
+.ui.selectable.table tr:hover td.negative {
+  background: @negativeBackgroundHover !important;
+  color: @negativeColorHover !important;
+}
+
+
 
 /*--------------
      Attached

src/themes/default/collections/table.variables

@@ -27,19 +27,19 @@
 ---------------*/
 
 /* Table Row */
-@rowBorder: 1px solid @borderColor;
+@rowBorder: 1px solid @internalBorderColor;
 
 /* Table Cell */
 @cellVerticalPadding: @relativeMini;
 @cellHorizontalPadding: @relativeMini;
 @cellVerticalAlign: inherit;
 @cellTextAlign: inherit;
-@cellBorder: 1px solid @borderColor;
+@cellBorder: 1px solid @internalBorderColor;
 
 /* Table Header */
 @headerBorder: 1px solid @borderColor;
 @headerDivider: none;
-@headerBackground: @darkWhite;
+@headerBackground: @offWhite;
 @headerAlign: inherit;
 @headerVerticalAlign: inherit;
 @headerColor: @textColor;
@@ -72,7 +72,6 @@
 @responsiveCellVerticalPadding: 0.25em;
 @responsiveCellHorizontalPadding: 0.75em;
 @responsiveCellBoxShadow: none !important;
-@responsiveStatusColor: transparent;
 
 /*-------------------
        Types
@@ -151,6 +150,9 @@
 @stripedBackground: rgba(0, 0, 50, 0.03);
 @invertedStripedBackground: rgba(255, 255, 255, 0.06);
 
+@selectableBackground: @subtleTransparentBlack;
+@selectableTextColor: @selectedTextColor;
+
 /* Sortable */
 @sortableBackground: '';
 @sortableColor: @textColor;