feat(table): add colored left & right row border

* feat(table): colored table rows having an optional left border instead of colored background * feat(table): using box-shadow now to support mobile for colored table rows having an optional left border instead of colored background
fomantic · Oct 2, 2019 · ca7d653 · ca7d653
1 parent d19e16e
commit ca7d653
Show file tree

Hide file tree

Showing 2 changed files with 73 additions and 12 deletions.
diff --git a/src/definitions/collections/table.less b/src/definitions/collections/table.less
@@ -191,10 +191,10 @@
   .ui.table:not(.unstackable) > tfoot {
     display: @responsiveFooterDisplay;
   }
-  .ui.table:not(.unstackable) > tr,
-  .ui.table:not(.unstackable) > thead > tr,
-  .ui.table:not(.unstackable) > tbody > tr,
-  .ui.table:not(.unstackable) > tfoot > tr {
+  .ui.ui.ui.ui.table:not(.unstackable) > tr,
+  .ui.ui.ui.ui.table:not(.unstackable) > thead > tr,
+  .ui.ui.ui.ui.table:not(.unstackable) > tbody > tr,
+  .ui.ui.ui.ui.table:not(.unstackable) > tfoot > tr {
     padding-top: @responsiveRowVerticalPadding;
     padding-bottom: @responsiveRowVerticalPadding;
     box-shadow: @responsiveRowBoxShadow;
@@ -224,6 +224,27 @@
   .ui.definition.table:not(.unstackable) > thead > tr > th:first-child {
     box-shadow: none !important;
   }
+  each(@colors, {
+    @color: replace(@key, '@', '');
+    @c: @colors[@@color][color];
+    @l: @colors[@@color][light];
+    .ui.ui.ui.ui.table:not(.unstackable) tr.marked.@{color} {
+      &.left {
+        box-shadow: @responsiveRowBoxShadow, @coloredBorderSize 0 0 0 @c inset;
+      }
+      &.right {
+        box-shadow: @responsiveRowBoxShadow, -@coloredBorderSize 0 0 0 @c inset;
+      }
+    }
+    .ui.ui.ui.ui.inverted.table:not(.unstackable) tr.marked.@{color} {
+      &.left {
+        box-shadow: @responsiveRowBoxShadow, @coloredBorderSize 0 0 0 @l inset;
+      }
+      &.right {
+        box-shadow: @responsiveRowBoxShadow, -@coloredBorderSize 0 0 0 @l inset;
+      }
+    }
+  })
 }
 
 
@@ -434,10 +455,10 @@
   .ui[class*="tablet stackable"].table > tfoot {
     display: @responsiveFooterDisplay;
   }
-  .ui[class*="tablet stackable"].table > thead > tr,
-  .ui[class*="tablet stackable"].table > tbody > tr,
-  .ui[class*="tablet stackable"].table > tfoot > tr,
-  .ui[class*="tablet stackable"].table > tr {
+  .ui.ui.ui.ui[class*="tablet stackable"].table > thead > tr,
+  .ui.ui.ui.ui[class*="tablet stackable"].table > tbody > tr,
+  .ui.ui.ui.ui[class*="tablet stackable"].table > tfoot > tr,
+  .ui.ui.ui.ui[class*="tablet stackable"].table > tr {
     padding-top: @responsiveRowVerticalPadding;
     padding-bottom: @responsiveRowVerticalPadding;
     box-shadow: @responsiveRowBoxShadow;
@@ -458,6 +479,27 @@
   .ui.definition[class*="tablet stackable"].table > thead > tr > th:first-child {
     box-shadow: none !important;
   }
+  each(@colors, {
+    @color: replace(@key, '@', '');
+    @c: @colors[@@color][color];
+    @l: @colors[@@color][light];
+    .ui.ui.ui.ui[class*="tablet stackable"].table tr.marked.@{color} {
+      &.left {
+        box-shadow: @responsiveRowBoxShadow, @coloredBorderSize 0 0 0 @c inset;
+      }
+      &.right {
+        box-shadow: @responsiveRowBoxShadow, -@coloredBorderSize 0 0 0 @c inset;
+      }
+    }
+    .ui.ui.ui.ui[class*="tablet stackable"].inverted.table tr.marked.@{color} {
+      &.left {
+        box-shadow: @responsiveRowBoxShadow, @coloredBorderSize 0 0 0 @l inset;
+      }
+      &.right {
+        box-shadow: @responsiveRowBoxShadow, -@coloredBorderSize 0 0 0 @l inset;
+      }
+    }
+  })
 }
 
 /*--------------
@@ -683,9 +725,11 @@ each(@colors, {
     background-color: @c;
     color: @white;
   }
-  .ui.ui.ui.ui.table tr.@{color},
+  .ui.ui.ui.ui.table tr.@{color}:not(.marked),
   .ui.ui.table td.@{color} {
-    box-shadow: @stateMarkerWidth 0 0 @r inset;
+    & when (@stateMarkerWidth > 0) {
+      box-shadow: @stateMarkerWidth 0 0 @r inset;
+    }
     & when (@isDark) {
       background: @l;
     }
@@ -699,7 +743,7 @@ each(@colors, {
       color: @t;
     }
   }
-  .ui.ui.selectable.table tr.@{color}:hover,
+  .ui.ui.selectable.table tr.@{color}:not(.marked):hover,
   .ui.table tr td.selectable.@{color}:hover,
   .ui.selectable.table tr:hover td.@{color} {
     & when (@isDark) {
@@ -715,6 +759,23 @@ each(@colors, {
       color: @ht;
     }
   }
+  .ui.table tr.marked.@{color} {
+    &.left {
+      box-shadow: @coloredBorderSize 0 0 0 @c inset;
+    }
+    &.right {
+      box-shadow: -@coloredBorderSize 0 0 0 @c inset;
+    }
+  }
+  .ui.inverted.table tr.marked.@{color} {
+    &.left {
+      box-shadow: @coloredBorderSize 0 0 0 @l inset;
+    }
+    &.right {
+      box-shadow: -@coloredBorderSize 0 0 0 @l inset;
+    }
+  }
+
 })
 
 /*--------------

diff --git a/src/themes/default/collections/table.variables b/src/themes/default/collections/table.variables
@@ -70,7 +70,7 @@
 @responsiveHeaderDisplay: block;
 @responsiveFooterDisplay: block;
 @responsiveRowVerticalPadding: 1em;
-@responsiveRowBoxShadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset !important;
+@responsiveRowBoxShadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset;
 @responsiveCellVerticalPadding: 0.25em;
 @responsiveCellHorizontalPadding: 0.75em;
 @responsiveCellBoxShadow: none !important;