fomantic-ui 2.9.0-beta.84 → 2.9.0-beta.88

package/dist/semantic.min.js

@@ -1,5 +1,5 @@
 /*
- * # Fomantic UI - 2.9.0-beta.84
+ * # Fomantic UI - 2.9.0-beta.88
  * https://github.com/fomantic/Fomantic-UI
  * http://fomantic-ui.com/
  *

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fomantic-ui",
-  "version": "2.9.0-beta.84",
+  "version": "2.9.0-beta.88",
   "description": "Fomantic empowers designers and developers by creating a shared vocabulary for UI.",
   "keywords": [
     "fomantic-ui",

package/src/definitions/collections/form.less

@@ -312,9 +312,9 @@
 /*--------------------
    Types of Messages
 ---------------------*/
-& when (@variationFormStates) {
-  each(@formStates, {
-    @state: replace(@key, '@', '');
+& when not (@variationFormStates = false) {
+  each(@variationFormStates, {
+    @state: @value;
     .ui.form .@{state}.message,
     .ui.form .@{state}.message:empty {
       display: none;
@@ -483,12 +483,12 @@
   -webkit-appearance: none;
 }
 
-& when (@variationFormStates) {
+& when not (@variationFormStates = false) {
   /*--------------------
           States
   ---------------------*/
-  each(@formStates, {
-    @state: replace(@key, '@', '');
+  each(@variationFormStates, {
+    @state: @value;
     @c: @formStates[@@state][color];
     @bg: @formStates[@@state][background];
     @bdc: @formStates[@@state][borderColor];

package/src/definitions/collections/grid.less

@@ -1330,18 +1330,19 @@
 /*----------------------
          Colored
 -----------------------*/
+& when not (@variationGridColors = false) {
+  each(@variationGridColors, {
+    @color: @value;
+    @c: @colors[@@color][color];
 
-each(@colors, {
-  @color: replace(@key, '@', '');
-  @c: @colors[@@color][color];
-
-  .ui.grid > .@{color}.row,
-  .ui.grid > .@{color}.column,
-  .ui.grid > .row > .@{color}.column {
-    background-color: @c;
-    color: @white;
-  }
-})
+    .ui.grid > .@{color}.row,
+    .ui.grid > .@{color}.column,
+    .ui.grid > .row > .@{color}.column {
+      background-color: @c;
+      color: @white;
+    }
+  })
+}
 
 
 & when (@variationGridEqualWidth) {

package/src/definitions/collections/menu.less

@@ -1363,22 +1363,23 @@ Floated Menu / Item
 /*--------------
      Colors
 ---------------*/
+& when not (@variationMenuColors = false) {
+  each(@variationMenuColors, {
+    @color: @value;
+    @c: @colors[@@color][color];
 
-each(@colors, {
-  @color: replace(@key, '@', '');
-  @c: @colors[@@color][color];
-
-  & when not (@color=secondary) {
-    .ui.ui.ui.menu .@{color}.active.item,
-    .ui.ui.@{color}.menu .active.item:hover,
-    .ui.ui.@{color}.menu .active.item {
-      & when not (@secondaryPointingActiveBorderColor = currentColor) {
-        border-color: @c;
+    & when not (@color=secondary) {
+      .ui.ui.ui.menu .@{color}.active.item,
+      .ui.ui.@{color}.menu .active.item:hover,
+      .ui.ui.@{color}.menu .active.item {
+        & when not (@secondaryPointingActiveBorderColor = currentColor) {
+          border-color: @c;
+        }
+        color: @c;
       }
-      color: @c;
     }
-  }
-})
+  })
+}
 
 & when (@variationMenuInverted) {
   /*--------------
@@ -1513,30 +1514,31 @@ each(@colors, {
   /*--------------
       Inverted
   ---------------*/
-
-  each(@colors, {
-    @color: replace(@key, '@', '');
-    @c: @colors[@@color][color];
-    @h: @colors[@@color][hover];
-
-    & when not (@color=secondary) {
-      .ui.ui.ui.inverted.menu .@{color}.active.item,
-      .ui.ui.inverted.@{color}.menu {
-        background-color: @c;
-      }
-      .ui.inverted.@{color}.menu .item:before {
-        background-color: @invertedColoredDividerBackground;
-      }
-      .ui.ui.inverted.@{color}.menu .active.item {
-        background-color: @invertedColoredActiveBackground;
-      }
-      & when (@variationMenuPointing) {
-        .ui.inverted.pointing.@{color}.menu .active.item {
-          background-color: @h;
+  & when not (@variationMenuColors = false) {
+    each(@variationMenuColors, {
+      @color: @value;
+      @c: @colors[@@color][color];
+      @h: @colors[@@color][hover];
+
+      & when not (@color=secondary) {
+        .ui.ui.ui.inverted.menu .@{color}.active.item,
+        .ui.ui.inverted.@{color}.menu {
+          background-color: @c;
+        }
+        .ui.inverted.@{color}.menu .item:before {
+          background-color: @invertedColoredDividerBackground;
+        }
+        .ui.ui.inverted.@{color}.menu .active.item {
+          background-color: @invertedColoredActiveBackground;
+        }
+        & when (@variationMenuPointing) {
+          .ui.inverted.pointing.@{color}.menu .active.item {
+            background-color: @h;
+          }
         }
       }
-    }
-  })
+    })
+  }
 
   & when (@variationMenuPointing) {
     .ui.ui.ui.inverted.pointing.menu .active.item:after {
@@ -1834,14 +1836,16 @@ each(@colors, {
   }
 }
 
-each(@colors, {
-  @color: replace(@key, '@', '');
-  @c: @colors[@@color][color];
+& when not (@variationMenuColors = false) {
+  each(@variationMenuColors, {
+    @color: @value;
+    @c: @colors[@@color][color];
 
-  .ui.inverted.pointing.menu .@{color}.active.item:after {
-    background-color: @c;
-  }
-})
+    .ui.inverted.pointing.menu .@{color}.active.item:after {
+      background-color: @c;
+    }
+  })
+}
 
 & when (@variationMenuAttached) {
   /*--------------

package/src/definitions/collections/message.less

@@ -288,7 +288,7 @@
 /*--------------
      Types
 ---------------*/
-& when (@variationMessageConsequences) {
+& when not (@variationMessageConsequences = false) {
 
   @consequences: {
     @positive: {
@@ -343,8 +343,8 @@
 
   /* Colors */
 
-  each(@consequences, {
-    @color: replace(@key, '@', '');
+  each(@variationMessageConsequences, {
+    @color: @value;
     @bg: @consequences[@@color][background];
     @hd: @consequences[@@color][header];
     @bs: @consequences[@@color][boxShadow];
@@ -377,50 +377,51 @@
     }
   })
 }
+& when not (@variationMessageColors = false) {
+  each(@variationMessageColors, {
+    @color: @value;
+    @bg: @colors[@@color][background];
+    @hd: @colors[@@color][header];
+    @bs: @colors[@@color][boxShadow];
+    @bfs: @colors[@@color][boxFloatShadow];
+    @t: @colors[@@color][text];
+    @isVeryDark: @colors[@@color][isVeryDark];
 
-each(@colors, {
-  @color: replace(@key, '@', '');
-  @bg: @colors[@@color][background];
-  @hd: @colors[@@color][header];
-  @bs: @colors[@@color][boxShadow];
-  @bfs: @colors[@@color][boxFloatShadow];
-  @t: @colors[@@color][text];
-  @isVeryDark: @colors[@@color][isVeryDark];
-
-  .ui.@{color}.message {
-    & when not (@isVeryDark) {
-      background-color: @bg;
-      color: @t;
-    }
-    & when (@isVeryDark) {
-      background-color: @black;
-      color: @invertedTextColor;
+    .ui.@{color}.message {
+      & when not (@isVeryDark) {
+        background-color: @bg;
+        color: @t;
+      }
+      & when (@isVeryDark) {
+        background-color: @black;
+        color: @invertedTextColor;
+      }
     }
-  }
 
-  .ui.@{color}.message,
-  .ui.attached.@{color}.message {
-    & when not (@isVeryDark) {
-      box-shadow: @bs;
-    }
-  }
-  & when (@variationMessageFloating) {
-    .ui.floating.@{color}.message {
+    .ui.@{color}.message,
+    .ui.attached.@{color}.message {
       & when not (@isVeryDark) {
-        box-shadow: @bfs;
+        box-shadow: @bs;
       }
     }
-  }
-
-  .ui.@{color}.message .header {
-    & when not (@isVeryDark) {
-      color: @hd;
+    & when (@variationMessageFloating) {
+      .ui.floating.@{color}.message {
+        & when not (@isVeryDark) {
+          box-shadow: @bfs;
+        }
+      }
     }
-    & when (@isVeryDark) {
-      color: @invertedTextColor;
+
+    .ui.@{color}.message .header {
+      & when not (@isVeryDark) {
+        color: @hd;
+      }
+      & when (@isVeryDark) {
+        color: @invertedTextColor;
+      }
     }
-  }
-})
+  })
+}
 
 & when (@variationMessageInverted) {
   .ui.inverted.message {

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} {
@@ -780,89 +780,90 @@
 /*-------------------
        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 (@isDark) {
-      background: @b;
-    }
-    & when (@isVeryDark) {
-      color: @white;
+& 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 (@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;
+          }
         }
       }
     }
-  }
 
-})
+  })
+}
 
 & when (@variationTableEqualWidth) {
   /*--------------