fomantic-ui 2.9.0-beta.9 → 2.9.0-beta.90

package/src/definitions/collections/table.less

@@ -238,9 +238,9 @@
   .ui.definition.table:not(.unstackable) > thead > tr > th:first-child {
     box-shadow: none !important;
   }
-  & when (@variationTableMarked) {
-    each(@colors, {
-      @color: replace(@key, '@', '');
+  & when (@variationTableMarked) and not (@variationTableColors = false) {
+    each(@variationTableColors, {
+      @color: @value;
       @c: @colors[@@color][color];
       @l: @colors[@@color][light];
       .ui.ui.ui.ui.table:not(.unstackable) tr.marked.@{color} {
@@ -526,9 +526,9 @@
       }
     }
   }
-  & when (@variationTableMarked) {
-    each(@colors, {
-      @color: replace(@key, '@', '');
+  & when (@variationTableMarked) and not (@variationTableColors = false) {
+    each(@variationTableColors, {
+      @color: @value;
       @c: @colors[@@color][color];
       @l: @colors[@@color][light];
       .ui.ui.ui.ui[class*="tablet stackable"].table tr.marked.@{color} {
@@ -642,6 +642,8 @@
   .ui.table tbody tr td.selectable > a:not(.ui) {
     display: block;
     color: inherit;
+  }
+  .ui.table:not(.compact) tbody tr td.selectable > a:not(.ui) {
     padding: @cellVerticalPadding @cellHorizontalPadding;
   }
   .ui.table > tr > td.selectable,
@@ -778,208 +780,213 @@
 /*-------------------
        Colors
 --------------------*/
-
-each(@colors, {
-  @color: replace(@key, '@', '');
-  @c: @colors[@@color][color];
-  @t: @colors[@@color][text];
-  @ht: @colors[@@color][hoverText];
-  @l: @colors[@@color][light];
-  @lh: @colors[@@color][lightHover];
-  @r: @colors[@@color][ribbon];
-  @b: @colors[@@color][bright];
-  @bh: @colors[@@color][brightHover];
-  @isDark: @colors[@@color][isDark];
-  @isVeryDark: @colors[@@color][isVeryDark];
-
-  .ui.@{color}.table {
-    border-top: @coloredBorderSize solid @c;
-  }
-  & when (@variationTableInverted) {
-    .ui.inverted.@{color}.table {
-      background-color: @c;
-      color: @white;
-    }
-  }
-  .ui.ui.ui.ui.table tr.@{color}:not(.marked),
-  .ui.ui.table td.@{color}:not(.marked) {
-    & when (@stateMarkerWidth > 0) {
-      box-shadow: @stateMarkerWidth 0 0 @r inset;
-    }
-    & when (@isDark) {
-      background: @l;
+& when not (@variationTableColors = false) {
+  each(@variationTableColors, {
+    @color: @value;
+    @c: @colors[@@color][color];
+    @t: @colors[@@color][text];
+    @ht: @colors[@@color][hoverText];
+    @l: @colors[@@color][light];
+    @lh: @colors[@@color][lightHover];
+    @r: @colors[@@color][ribbon];
+    @b: @colors[@@color][bright];
+    @bh: @colors[@@color][brightHover];
+    @isDark: @colors[@@color][isDark];
+    @isVeryDark: @colors[@@color][isVeryDark];
+
+    .ui.@{color}.table {
+      border-top: @coloredBorderSize solid @c;
     }
-    & when not (@isDark) {
-      background: @b;
-    }
-    & when (@isVeryDark) {
-      color: @white;
-    }
-    & when not (@isVeryDark) {
-      color: @t;
+    & when (@variationTableInverted) {
+      .ui.inverted.@{color}.table {
+        background-color: @c;
+        color: @white;
+      }
     }
-  }
-  & when (@variationTableSelectable) {
-    .ui.ui.selectable.table tr.@{color}:not(.marked):hover,
-    .ui.table tr td.selectable.@{color}:not(.marked):hover,
-    .ui.selectable.table tr:hover td.@{color}:not(.marked) {
+    .ui.ui.ui.ui.table tr.@{color}:not(.marked),
+    .ui.ui.table td.@{color}:not(.marked) {
+      & when (@stateMarkerWidth > 0) {
+        box-shadow: @stateMarkerWidth 0 0 @r inset;
+      }
       & when (@isDark) {
-        background: @lh;
+        background: @l;
       }
       & when not (@isDark) {
-        background: @bh;
+        background: @b;
       }
       & when (@isVeryDark) {
         color: @white;
       }
       & when not (@isVeryDark) {
-        color: @ht;
+        color: @t;
       }
     }
-  }
-  & when (@variationTableMarked) {
-    .ui.table td.marked.@{color},
-    .ui.table tr.marked.@{color} {
-      &.left {
-        box-shadow: @coloredBorderSize 0 0 0 @c inset;
-      }
-      &.right {
-        box-shadow: -@coloredBorderSize 0 0 0 @c inset;
+    & when (@variationTableSelectable) {
+      .ui.ui.selectable.table tr.@{color}:not(.marked):hover,
+      .ui.table tr td.selectable.@{color}:not(.marked):hover,
+      .ui.selectable.table tr:hover td.@{color}:not(.marked) {
+        & when (@isDark) {
+          background: @lh;
+        }
+        & when not (@isDark) {
+          background: @bh;
+        }
+        & when (@isVeryDark) {
+          color: @white;
+        }
+        & when not (@isVeryDark) {
+          color: @ht;
+        }
       }
     }
-    & when (@variationTableInverted) {
-      .ui.inverted.table td.marked.@{color},
-      .ui.inverted.table tr.marked.@{color} {
+    & when (@variationTableMarked) {
+      .ui.table td.marked.@{color},
+      .ui.table tr.marked.@{color} {
         &.left {
-          box-shadow: @coloredBorderSize 0 0 0 @l inset;
+          box-shadow: @coloredBorderSize 0 0 0 @c inset;
         }
         &.right {
-          box-shadow: -@coloredBorderSize 0 0 0 @l inset;
+          box-shadow: -@coloredBorderSize 0 0 0 @c inset;
+        }
+      }
+      & when (@variationTableInverted) {
+        .ui.inverted.table td.marked.@{color},
+        .ui.inverted.table tr.marked.@{color} {
+          &.left {
+            box-shadow: @coloredBorderSize 0 0 0 @l inset;
+          }
+          &.right {
+            box-shadow: -@coloredBorderSize 0 0 0 @l inset;
+          }
         }
       }
     }
-  }
 
-})
+  })
+}
 
-/*--------------
-  Column Count
----------------*/
+& when (@variationTableEqualWidth) {
+  /*--------------
+    Column Count
+  ---------------*/
 
-/* Grid Based */
-.ui.one.column.table td {
-  width: @oneColumn;
-}
-.ui.two.column.table td {
-  width: @twoColumn;
-}
-.ui.three.column.table td {
-  width: @threeColumn;
-}
-.ui.four.column.table td {
-  width: @fourColumn;
-}
-.ui.five.column.table td {
-  width: @fiveColumn;
-}
-.ui.six.column.table td {
-  width: @sixColumn;
-}
-.ui.seven.column.table td {
-  width: @sevenColumn;
-}
-.ui.eight.column.table td {
-  width: @eightColumn;
-}
-.ui.nine.column.table td {
-  width: @nineColumn;
-}
-.ui.ten.column.table td {
-  width: @tenColumn;
-}
-.ui.eleven.column.table td {
-  width: @elevenColumn;
-}
-.ui.twelve.column.table td {
-  width: @twelveColumn;
-}
-.ui.thirteen.column.table td {
-  width: @thirteenColumn;
-}
-.ui.fourteen.column.table td {
-  width: @fourteenColumn;
-}
-.ui.fifteen.column.table td {
-  width: @fifteenColumn;
-}
-.ui.sixteen.column.table td {
-  width: @sixteenColumn;
+  /* Grid Based */
+  .ui.one.column.table td {
+    width: @oneColumn;
+  }
+  .ui.two.column.table td {
+    width: @twoColumn;
+  }
+  .ui.three.column.table td {
+    width: @threeColumn;
+  }
+  .ui.four.column.table td {
+    width: @fourColumn;
+  }
+  .ui.five.column.table td {
+    width: @fiveColumn;
+  }
+  .ui.six.column.table td {
+    width: @sixColumn;
+  }
+  .ui.seven.column.table td {
+    width: @sevenColumn;
+  }
+  .ui.eight.column.table td {
+    width: @eightColumn;
+  }
+  .ui.nine.column.table td {
+    width: @nineColumn;
+  }
+  .ui.ten.column.table td {
+    width: @tenColumn;
+  }
+  .ui.eleven.column.table td {
+    width: @elevenColumn;
+  }
+  .ui.twelve.column.table td {
+    width: @twelveColumn;
+  }
+  .ui.thirteen.column.table td {
+    width: @thirteenColumn;
+  }
+  .ui.fourteen.column.table td {
+    width: @fourteenColumn;
+  }
+  .ui.fifteen.column.table td {
+    width: @fifteenColumn;
+  }
+  .ui.sixteen.column.table td {
+    width: @sixteenColumn;
+  }
 }
 
-/* Column Width */
-.ui.table th.one.wide,
-.ui.table td.one.wide {
-  width: @oneWide;
-}
-.ui.table th.two.wide,
-.ui.table td.two.wide {
-  width: @twoWide;
-}
-.ui.table th.three.wide,
-.ui.table td.three.wide {
-  width: @threeWide;
-}
-.ui.table th.four.wide,
-.ui.table td.four.wide {
-  width: @fourWide;
-}
-.ui.table th.five.wide,
-.ui.table td.five.wide {
-  width: @fiveWide;
-}
-.ui.table th.six.wide,
-.ui.table td.six.wide {
-  width: @sixWide;
-}
-.ui.table th.seven.wide,
-.ui.table td.seven.wide {
-  width: @sevenWide;
-}
-.ui.table th.eight.wide,
-.ui.table td.eight.wide {
-  width: @eightWide;
-}
-.ui.table th.nine.wide,
-.ui.table td.nine.wide {
-  width: @nineWide;
-}
-.ui.table th.ten.wide,
-.ui.table td.ten.wide {
-  width: @tenWide;
-}
-.ui.table th.eleven.wide,
-.ui.table td.eleven.wide {
-  width: @elevenWide;
-}
-.ui.table th.twelve.wide,
-.ui.table td.twelve.wide {
-  width: @twelveWide;
-}
-.ui.table th.thirteen.wide,
-.ui.table td.thirteen.wide {
-  width: @thirteenWide;
-}
-.ui.table th.fourteen.wide,
-.ui.table td.fourteen.wide {
-  width: @fourteenWide;
-}
-.ui.table th.fifteen.wide,
-.ui.table td.fifteen.wide {
-  width: @fifteenWide;
-}
-.ui.table th.sixteen.wide,
-.ui.table td.sixteen.wide {
-  width: @sixteenWide;
+& when (@variationTableWide) {
+  /* Column Width */
+  .ui.table th.one.wide,
+  .ui.table td.one.wide {
+    width: @oneWide;
+  }
+  .ui.table th.two.wide,
+  .ui.table td.two.wide {
+    width: @twoWide;
+  }
+  .ui.table th.three.wide,
+  .ui.table td.three.wide {
+    width: @threeWide;
+  }
+  .ui.table th.four.wide,
+  .ui.table td.four.wide {
+    width: @fourWide;
+  }
+  .ui.table th.five.wide,
+  .ui.table td.five.wide {
+    width: @fiveWide;
+  }
+  .ui.table th.six.wide,
+  .ui.table td.six.wide {
+    width: @sixWide;
+  }
+  .ui.table th.seven.wide,
+  .ui.table td.seven.wide {
+    width: @sevenWide;
+  }
+  .ui.table th.eight.wide,
+  .ui.table td.eight.wide {
+    width: @eightWide;
+  }
+  .ui.table th.nine.wide,
+  .ui.table td.nine.wide {
+    width: @nineWide;
+  }
+  .ui.table th.ten.wide,
+  .ui.table td.ten.wide {
+    width: @tenWide;
+  }
+  .ui.table th.eleven.wide,
+  .ui.table td.eleven.wide {
+    width: @elevenWide;
+  }
+  .ui.table th.twelve.wide,
+  .ui.table td.twelve.wide {
+    width: @twelveWide;
+  }
+  .ui.table th.thirteen.wide,
+  .ui.table td.thirteen.wide {
+    width: @thirteenWide;
+  }
+  .ui.table th.fourteen.wide,
+  .ui.table td.fourteen.wide {
+    width: @fourteenWide;
+  }
+  .ui.table th.fifteen.wide,
+  .ui.table td.fifteen.wide {
+    width: @fifteenWide;
+  }
+  .ui.table th.sixteen.wide,
+  .ui.table td.sixteen.wide {
+    width: @sixteenWide;
+  }
 }
 
 & when (@variationTableSortable) {
@@ -1135,7 +1142,7 @@ each(@colors, {
   }
 }
 
-& when (@variationTableBasic) {
+& when (@variationTableBasic) or (@variationTableVeryBasic){
   /*--------------
         Basic
   ---------------*/
@@ -1169,38 +1176,40 @@ each(@colors, {
       background-color: @basicTableStripedBackground;
     }
   }
-  /* Very Basic */
-  .ui[class*="very basic"].table {
-    border: none;
-  }
-  .ui[class*="very basic"].table:not(.sortable):not(.striped) > tr > th,
-  .ui[class*="very basic"].table:not(.sortable):not(.striped) > thead > tr > th,
-  .ui[class*="very basic"].table:not(.sortable):not(.striped) > tbody > tr > th,
-  .ui[class*="very basic"].table:not(.sortable):not(.striped) > tfoot > tr > th,
-  .ui[class*="very basic"].table:not(.sortable):not(.striped) > tr > td,
-  .ui[class*="very basic"].table:not(.sortable):not(.striped) > tbody > tr > td {
-    padding: @basicTableCellPadding;
-  }
-  .ui[class*="very basic"].table:not(.sortable):not(.striped) > tr > th:first-child,
-  .ui[class*="very basic"].table:not(.sortable):not(.striped) > thead > tr > th:first-child,
-  .ui[class*="very basic"].table:not(.sortable):not(.striped) > tbody > tr > th:first-child,
-  .ui[class*="very basic"].table:not(.sortable):not(.striped) > tfoot > tr > th:first-child,
-  .ui[class*="very basic"].table:not(.sortable):not(.striped) > tr > td:first-child,
-  .ui[class*="very basic"].table:not(.sortable):not(.striped) > tbody > tr > td:first-child ,
-  .ui[class*="very basic"].table:not(.sortable):not(.striped) > tfoot > tr > td:first-child {
-    padding-left: 0;
-  }
-  .ui[class*="very basic"].table:not(.sortable):not(.striped) > tr > th:last-child,
-  .ui[class*="very basic"].table:not(.sortable):not(.striped) > thead > tr > th:last-child,
-  .ui[class*="very basic"].table:not(.sortable):not(.striped) > tbody > tr > th:last-child,
-  .ui[class*="very basic"].table:not(.sortable):not(.striped) > tfoot > tr > th:last-child,
-  .ui[class*="very basic"].table:not(.sortable):not(.striped) > tr > td:last-child,
-  .ui[class*="very basic"].table:not(.sortable):not(.striped) > tbody > tr > td:last-child,
-  .ui[class*="very basic"].table:not(.sortable):not(.striped) > tfoot >tr > td:last-child {
-    padding-right: 0;
-  }
-  .ui[class*="very basic"].table:not(.sortable):not(.striped) > thead > tr:first-child > th {
-    padding-top: 0;
+  & when (@variationTableVeryBasic) {
+    /* Very Basic */
+    .ui[class*="very basic"].table {
+      border: none;
+    }
+    .ui[class*="very basic"].table:not(.sortable):not(.striped) > tr > th,
+    .ui[class*="very basic"].table:not(.sortable):not(.striped) > thead > tr > th,
+    .ui[class*="very basic"].table:not(.sortable):not(.striped) > tbody > tr > th,
+    .ui[class*="very basic"].table:not(.sortable):not(.striped) > tfoot > tr > th,
+    .ui[class*="very basic"].table:not(.sortable):not(.striped) > tr > td,
+    .ui[class*="very basic"].table:not(.sortable):not(.striped) > tbody > tr > td {
+      padding: @basicTableCellPadding;
+    }
+    .ui[class*="very basic"].table:not(.sortable):not(.striped) > tr > th:first-child,
+    .ui[class*="very basic"].table:not(.sortable):not(.striped) > thead > tr > th:first-child,
+    .ui[class*="very basic"].table:not(.sortable):not(.striped) > tbody > tr > th:first-child,
+    .ui[class*="very basic"].table:not(.sortable):not(.striped) > tfoot > tr > th:first-child,
+    .ui[class*="very basic"].table:not(.sortable):not(.striped) > tr > td:first-child,
+    .ui[class*="very basic"].table:not(.sortable):not(.striped) > tbody > tr > td:first-child,
+    .ui[class*="very basic"].table:not(.sortable):not(.striped) > tfoot > tr > td:first-child {
+      padding-left: 0;
+    }
+    .ui[class*="very basic"].table:not(.sortable):not(.striped) > tr > th:last-child,
+    .ui[class*="very basic"].table:not(.sortable):not(.striped) > thead > tr > th:last-child,
+    .ui[class*="very basic"].table:not(.sortable):not(.striped) > tbody > tr > th:last-child,
+    .ui[class*="very basic"].table:not(.sortable):not(.striped) > tfoot > tr > th:last-child,
+    .ui[class*="very basic"].table:not(.sortable):not(.striped) > tr > td:last-child,
+    .ui[class*="very basic"].table:not(.sortable):not(.striped) > tbody > tr > td:last-child,
+    .ui[class*="very basic"].table:not(.sortable):not(.striped) > tfoot > tr > td:last-child {
+      padding-right: 0;
+    }
+    .ui[class*="very basic"].table:not(.sortable):not(.striped) > thead > tr:first-child > th {
+      padding-top: 0;
+    }
   }
 }
 
@@ -1235,7 +1244,7 @@ each(@colors, {
   }
 }
 
-& when (@variationTablePadded) {
+& when (@variationTablePadded) or (@variationTableVeryPadded) {
   /*--------------
        Padded
   ---------------*/
@@ -1257,22 +1266,24 @@ each(@colors, {
     padding: @paddedVerticalPadding @paddedHorizontalPadding;
   }
 
-  /* Very */
-  .ui[class*="very padded"].table > tr > th,
-  .ui[class*="very padded"].table > thead > tr > th,
-  .ui[class*="very padded"].table > tbody > tr > th,
-  .ui[class*="very padded"].table > tfoot > tr > th {
-    padding-left: @veryPaddedHorizontalPadding;
-    padding-right: @veryPaddedHorizontalPadding;
-  }
-  .ui[class*="very padded"].table > tr > td,
-  .ui[class*="very padded"].table > tbody > tr > td ,
-  .ui[class*="very padded"].table > tfoot > tr > td {
-    padding: @veryPaddedVerticalPadding @veryPaddedHorizontalPadding;
+  & when (@variationTableVeryPadded) {
+    /* Very */
+    .ui[class*="very padded"].table > tr > th,
+    .ui[class*="very padded"].table > thead > tr > th,
+    .ui[class*="very padded"].table > tbody > tr > th,
+    .ui[class*="very padded"].table > tfoot > tr > th {
+      padding-left: @veryPaddedHorizontalPadding;
+      padding-right: @veryPaddedHorizontalPadding;
+    }
+    .ui[class*="very padded"].table > tr > td,
+    .ui[class*="very padded"].table > tbody > tr > td,
+    .ui[class*="very padded"].table > tfoot > tr > td {
+      padding: @veryPaddedVerticalPadding @veryPaddedHorizontalPadding;
+    }
   }
 }
 
-& when (@variationTableCompact) {
+& when (@variationTableCompact) or (@variationTableVeryCompact) {
   /*--------------
        Compact
   ---------------*/
@@ -1290,18 +1301,20 @@ each(@colors, {
     padding: @compactVerticalPadding @compactHorizontalPadding;
   }
 
-  /* Very */
-  .ui[class*="very compact"].table > tr > th,
-  .ui[class*="very compact"].table > thead > tr > th,
-  .ui[class*="very compact"].table > tbody > tr > th,
-  .ui[class*="very compact"].table > tfoot > tr > th {
-    padding-left: @veryCompactHorizontalPadding;
-    padding-right: @veryCompactHorizontalPadding;
-  }
-  .ui[class*="very compact"].table > tr > td,
-  .ui[class*="very compact"].table > tbody > tr > td ,
-  .ui[class*="very compact"].table > tfoot > tr > td {
-    padding: @veryCompactVerticalPadding @veryCompactHorizontalPadding;
+  & when (@variationTableVeryCompact) {
+    /* Very */
+    .ui[class*="very compact"].table > tr > th,
+    .ui[class*="very compact"].table > thead > tr > th,
+    .ui[class*="very compact"].table > tbody > tr > th,
+    .ui[class*="very compact"].table > tfoot > tr > th {
+      padding-left: @veryCompactHorizontalPadding;
+      padding-right: @veryCompactHorizontalPadding;
+    }
+    .ui[class*="very compact"].table > tr > td,
+    .ui[class*="very compact"].table > tbody > tr > td,
+    .ui[class*="very compact"].table > tfoot > tr > td {
+      padding: @veryCompactVerticalPadding @veryCompactHorizontalPadding;
+    }
   }
 }