fomantic-ui 2.9.0-beta.290 → 2.9.0-beta.293

package/dist/semantic.min.js

@@ -1,5 +1,5 @@
 /*
- * # Fomantic UI - 2.9.0-beta.290+9631798
+ * # Fomantic UI - 2.9.0-beta.293+2a71b5e
  * 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.290+9631798",
+  "version": "2.9.0-beta.293+2a71b5e",
   "description": "Fomantic empowers designers and developers by creating a shared vocabulary for UI.",
   "keywords": [
     "fomantic-ui",

package/src/definitions/collections/form.less

@@ -395,7 +395,7 @@
 .ui.form ::-webkit-input-placeholder {
   color: @inputPlaceholderColor;
 }
-.ui.form :-ms-input-placeholder {
+.ui.form :-ms-input-placeholder when (@supportIE) {
   color: @inputPlaceholderColor !important;
 }
 .ui.form ::-moz-placeholder {
@@ -406,7 +406,7 @@
 .ui.form :focus::-webkit-input-placeholder {
   color: @inputPlaceholderFocusColor;
 }
-.ui.form :focus:-ms-input-placeholder {
+.ui.form :focus:-ms-input-placeholder when (@supportIE) {
   color: @inputPlaceholderFocusColor !important;
 }
 .ui.form :focus::-moz-placeholder {
@@ -600,7 +600,7 @@
         border-radius: @formStates[@@state][borderRadius];
         box-shadow: @formStates[@@state][boxShadow];
       }
-      .ui.form .field input:not(:-ms-input-placeholder):invalid {
+      .ui.form .field input:not(:-ms-input-placeholder):invalid when (@supportIE) {
         color: @c;
         background: @bg;
         border-color: @formStates[@@state][borderColor];
@@ -662,7 +662,7 @@
     .ui.form .@{state} ::-webkit-input-placeholder {
       color: @formStates[@@state][inputPlaceholderColor];
     }
-    .ui.form .@{state} :-ms-input-placeholder {
+    .ui.form .@{state} :-ms-input-placeholder when (@supportIE) {
       color: @formStates[@@state][inputPlaceholderColor] !important;
     }
     .ui.form .@{state} ::-moz-placeholder {
@@ -672,7 +672,7 @@
     .ui.form .@{state} :focus::-webkit-input-placeholder {
       color: @formStates[@@state][inputPlaceholderFocusColor];
     }
-    .ui.form .@{state} :focus:-ms-input-placeholder {
+    .ui.form .@{state} :focus:-ms-input-placeholder when (@supportIE) {
       color: @formStates[@@state][inputPlaceholderFocusColor] !important;
     }
     .ui.form .@{state} :focus::-moz-placeholder {

package/src/definitions/collections/menu.less

@@ -293,8 +293,10 @@
   }
   .ui.vertical.menu .dropdown.item .menu {
     left: 100%;
-    /* IE needs 0, all others support max-content to show dropdown icon inline, so keep both settings! */
-    min-width: 0;
+    & when (@supportIE) {
+      /* IE needs 0, all others support max-content to show dropdown icon inline, so keep both settings! */
+      min-width: 0;
+    }
     min-width: max-content;
     margin: 0 0 0 @dropdownMenuDistance;
     box-shadow: @dropdownVerticalMenuBoxShadow;
@@ -1599,8 +1601,10 @@ Floated Menu / Item
   }
   & when (@variationMenuVertical) {
     .ui.compact.vertical.menu {
-    /* IE hack to make dropdown icons appear inline */
-      display: -ms-inline-flexbox !important;
+      & when (@supportIE) {
+        /* IE hack to make dropdown icons appear inline */
+        display: -ms-inline-flexbox !important;
+      }
       display: inline-block;
     }
   }

package/src/definitions/collections/table.less

@@ -243,7 +243,7 @@
       @color: @value;
       @c: @colors[@@color][color];
       @l: @colors[@@color][light];
-      .ui.ui.ui.ui.table:not(.unstackable) tr.marked.@{color} {
+      .ui.ui.ui.ui.table:not(.unstackable) tr[class*="@{color} marked"] {
         &.left {
           box-shadow: @responsiveRowBoxShadow, @coloredBorderSize 0 0 0 @c inset;
         }
@@ -252,7 +252,7 @@
         }
       }
       & when (@variationTableInverted) {
-        .ui.ui.ui.ui.inverted.table:not(.unstackable) tr.marked.@{color} {
+        .ui.ui.ui.ui.inverted.table:not(.unstackable) tr[class*="@{color} marked"] {
           &.left {
             box-shadow: @responsiveRowBoxShadow, @coloredBorderSize 0 0 0 @l inset;
           }
@@ -438,25 +438,29 @@
   .ui.scrolling.table > thead,
   .ui.scrolling.table > tfoot {
     scrollbar-color: currentColor currentColor;
-    scrollbar-face-color: currentColor;
-    scrollbar-shadow-color: currentColor;
-    scrollbar-track-color: currentColor;
-    scrollbar-arrow-color: currentColor;
+    & when (@supportIE) {
+      scrollbar-face-color: currentColor;
+      scrollbar-shadow-color: currentColor;
+      scrollbar-track-color: currentColor;
+      scrollbar-arrow-color: currentColor;
+    }
   }
+  & when (@supportIE) {
   /* IE scrollbar color needs hex values */
-  @media all and (-ms-high-contrast:none) {
-    .ui.scrolling.table > thead {
-      color: @headerBackgroundHex;
-    }
-    .ui.scrolling.table > tfoot {
-      color: @footerBackgroundHex;
-    }
-    & when (@variationTableInverted) {
-      .ui.inverted.scrolling.table > thead {
-        color: @invertedHeaderBackgroundHex;
+    @media all and (-ms-high-contrast: none) {
+      .ui.scrolling.table > thead {
+        color: @headerBackgroundHex;
+      }
+      .ui.scrolling.table > tfoot {
+        color: @footerBackgroundHex;
       }
-      .ui.inverted.scrolling.table > tfoot {
-        color: @invertedFooterBackgroundHex;
+      & when (@variationTableInverted) {
+        .ui.inverted.scrolling.table > thead {
+          color: @invertedHeaderBackgroundHex;
+        }
+        .ui.inverted.scrolling.table > tfoot {
+          color: @invertedFooterBackgroundHex;
+        }
       }
     }
   }
@@ -474,12 +478,13 @@
       background: @thumbInvertedHoverBackground;
     }
     .ui.inverted.scrolling.table > tbody {
-      /* IE11 */
-      scrollbar-face-color: @thumbInvertedBackgroundHex;
-      scrollbar-shadow-color: @thumbInvertedBackgroundHex;
-      scrollbar-track-color: @trackInvertedBackgroundHex;
-      scrollbar-arrow-color: @trackInvertedBackgroundHex;
-
+      & when (@supportIE) {
+        /* IE11 */
+        scrollbar-face-color: @thumbInvertedBackgroundHex;
+        scrollbar-shadow-color: @thumbInvertedBackgroundHex;
+        scrollbar-track-color: @trackInvertedBackgroundHex;
+        scrollbar-arrow-color: @trackInvertedBackgroundHex;
+      }
       /* firefox : first color thumb, second track */
       scrollbar-color: @thumbInvertedBackground @trackInvertedBackground;
     }
@@ -872,7 +877,7 @@
       @color: @value;
       @c: @colors[@@color][color];
       @l: @colors[@@color][light];
-      .ui.ui.ui.ui[class*="tablet stackable"].table tr.marked.@{color} {
+      .ui.ui.ui.ui[class*="tablet stackable"].table tr[class*="@{color} marked"] {
         &.left {
           box-shadow: @responsiveRowBoxShadow, @coloredBorderSize 0 0 0 @c inset;
         }
@@ -881,7 +886,7 @@
         }
       }
       & when (@variationTableInverted) {
-        .ui.ui.ui.ui[class*="tablet stackable"].inverted.table tr.marked.@{color} {
+        .ui.ui.ui.ui[class*="tablet stackable"].inverted.table tr[class*="@{color} marked"] {
           &.left {
             box-shadow: @responsiveRowBoxShadow, @coloredBorderSize 0 0 0 @l inset;
           }
@@ -1180,6 +1185,9 @@
         }
       }
     }
+    .ui.ui.ui.ui.table tr[class*="@{color} colored"],
+    .ui.ui.table th[class*="@{color} colored"],
+    .ui.ui.table td[class*="@{color} colored"],
     .ui.ui.ui.ui.table tr.@{color}:not(.marked),
     .ui.ui.table th.@{color}:not(.marked),
     .ui.ui.table td.@{color}:not(.marked) {
@@ -1199,6 +1207,9 @@
         color: @t;
       }
     }
+    .ui.table > thead > tr[class*="@{color} colored"] > th,
+    .ui.table > tfoot > tr[class*="@{color} colored"] > th,
+    .ui.table > tfoot > tr[class*="@{color} colored"] > td,
     .ui.table > thead > tr.@{color}:not(.marked) > th,
     .ui.table > tfoot > tr.@{color}:not(.marked) > th,
     .ui.table > tfoot > tr.@{color}:not(.marked) > td {
@@ -1212,12 +1223,18 @@
     }
 
     & when (@variationTableInverted) {
+      .ui.ui.ui.ui.inverted.table tr[class*="@{color} colored"],
+      .ui.ui.inverted.table th[class*="@{color} colored"],
+      .ui.ui.inverted.table td[class*="@{color} colored"],
       .ui.ui.ui.ui.inverted.table tr.@{color}:not(.marked),
       .ui.ui.inverted.table th.@{color}:not(.marked),
       .ui.ui.inverted.table td.@{color}:not(.marked) {
         background: @c;
         color: @white;
       }
+      .ui.inverted.table > thead > tr[class*="@{color} colored"] > th,
+      .ui.inverted.table > tfoot > tr[class*="@{color} colored"] > th,
+      .ui.inverted.table > tfoot > tr[class*="@{color} colored"] > td,
       .ui.inverted.table > thead > tr.@{color}:not(.marked) > th,
       .ui.inverted.table > tfoot > tr.@{color}:not(.marked) > th,
       .ui.inverted.table > tfoot > tr.@{color}:not(.marked) > td {
@@ -1226,6 +1243,9 @@
       }
     }
     & when (@variationTableSelectable) {
+      .ui.ui.selectable.table tr[class*="@{color} colored"]:hover,
+      .ui.table tr td.selectable[class*="@{color} colored"]:hover,
+      .ui.selectable.table tr:hover td[class*="@{color} colored"],
       .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) {
@@ -1243,6 +1263,9 @@
         }
       }
       & when (@variationTableInverted) {
+        .ui.ui.inverted.selectable.table tr[class*="@{color} colored"]:hover,
+        .ui.inverted.table tr td.selectable[class*="@{color} colored"]:hover,
+        .ui.inverted.selectable.table tr:hover td[class*="@{color} colored"],
         .ui.ui.inverted.selectable.table tr.@{color}:not(.marked):hover,
         .ui.inverted.table tr td.selectable.@{color}:not(.marked):hover,
         .ui.inverted.selectable.table tr:hover td.@{color}:not(.marked) {
@@ -1262,8 +1285,8 @@
       }
     }
     & when (@variationTableMarked) {
-      .ui.table td.marked.@{color},
-      .ui.table tr.marked.@{color} {
+      .ui.table td[class*="@{color} marked"],
+      .ui.table tr[class*="@{color} marked"] {
         &.left {
           box-shadow: @coloredBorderSize 0 0 0 @c inset;
         }
@@ -1272,8 +1295,8 @@
         }
       }
       & when (@variationTableInverted) {
-        .ui.inverted.table td.marked.@{color},
-        .ui.inverted.table tr.marked.@{color} {
+        .ui.inverted.table td[class*="@{color} marked"],
+        .ui.inverted.table tr[class*="@{color} marked"] {
           &.left {
             box-shadow: @coloredBorderSize 0 0 0 @l inset;
           }

package/src/definitions/elements/input.less

@@ -77,7 +77,7 @@
   color: @placeholderColor;
   opacity: 1;
 }
-.ui.input > input:-ms-input-placeholder {
+.ui.input > input:-ms-input-placeholder when (@supportIE){
   color: @placeholderColor;
 }
 
@@ -170,9 +170,11 @@
 .ui.input > input:focus::-moz-placeholder {
   color: @placeholderFocusColor;
 }
-.ui.input.focus > input:-ms-input-placeholder,
-.ui.input > input:focus:-ms-input-placeholder {
-  color: @placeholderFocusColor;
+& when (@supportIE) {
+  .ui.input.focus > input:-ms-input-placeholder,
+  .ui.input > input:focus:-ms-input-placeholder {
+    color: @placeholderFocusColor;
+  }
 }
 
 
@@ -196,7 +198,7 @@
         color: @formStates[@@state][color];
         box-shadow: @formStates[@@state][boxShadow];
       }
-      .ui.input > input:not(:-ms-input-placeholder):invalid {
+      .ui.input > input:not(:-ms-input-placeholder):invalid when (@supportIE){
         background-color: @formStates[@@state][background];
         border-color: @formStates[@@state][borderColor];
         color: @formStates[@@state][color];
@@ -211,7 +213,7 @@
     .ui.input.@{state} > input::-moz-placeholder {
       color: @formStates[@@state][inputPlaceholderColor];
     }
-    .ui.input.@{state} > input:-ms-input-placeholder {
+    .ui.input.@{state} > input:-ms-input-placeholder when (@supportIE) {
       color: @formStates[@@state][inputPlaceholderColor] !important;
     }
 
@@ -222,7 +224,7 @@
     .ui.input.@{state} > input:focus::-moz-placeholder {
       color: @formStates[@@state][inputPlaceholderFocusColor];
     }
-    .ui.input.@{state} > input:focus:-ms-input-placeholder {
+    .ui.input.@{state} > input:focus:-ms-input-placeholder when (@supportIE){
       color: @formStates[@@state][inputPlaceholderFocusColor] !important;
     }
   })
@@ -277,7 +279,7 @@
     .ui.transparent.inverted.input > input::-moz-placeholder {
       color: @transparentInvertedPlaceholderColor;
     }
-    .ui.transparent.inverted.input > input:-ms-input-placeholder {
+    .ui.transparent.inverted.input > input:-ms-input-placeholder when (@supportIE) {
       color: @transparentInvertedPlaceholderColor;
     }
   }
@@ -672,28 +674,30 @@
       color: @fileButtonTextColor;
     }
   }
-  .ui.action.file.input input[type="file"]::-ms-browse {
-    display: none;
-  }
-  .ui.form .field input[type="file"]::-ms-browse,
-  .ui.file.input input[type="file"]::-ms-browse {
-    border: none;
-    cursor: pointer;
-    padding: @padding;
-    margin: 0;
-    background: @fileButtonBackground;
-    font-weight: @fileButtonFontWeight;
-    color: @fileButtonTextColor;
-    &:hover {
-      background: @fileButtonBackgroundHover;
+  & when (@supportIE) {
+    .ui.action.file.input input[type="file"]::-ms-browse {
+      display: none;
+    }
+    .ui.form .field input[type="file"]::-ms-browse,
+    .ui.file.input input[type="file"]::-ms-browse {
+      border: none;
+      cursor: pointer;
+      padding: @padding;
+      margin: 0;
+      background: @fileButtonBackground;
+      font-weight: @fileButtonFontWeight;
       color: @fileButtonTextColor;
+      &:hover {
+        background: @fileButtonBackgroundHover;
+        color: @fileButtonTextColor;
+      }
     }
-  }
-  /* IE needs additional styling for input field :S */
-  @media all and (-ms-high-contrast:none) {
-    .ui.file.input > input[type="file"],
-    input[type="file"].ui.file.input {
-      padding: 0 !important;
+    /* IE needs additional styling for input field :S */
+    @media all and (-ms-high-contrast: none) {
+      .ui.file.input > input[type="file"],
+      input[type="file"].ui.file.input {
+        padding: 0 !important;
+      }
     }
   }
 
@@ -769,12 +773,14 @@
           background: @h;
         }
       }
-      input[type="file"].ui.@{color}.file.input::-ms-browse,
-      .ui.@{color}.file.input input[type="file"]::-ms-browse {
-        background: @c;
-        color: @white;
-        &:hover {
-          background: @h;
+      & when (@supportIE) {
+        input[type="file"].ui.@{color}.file.input::-ms-browse,
+        .ui.@{color}.file.input input[type="file"]::-ms-browse {
+          background: @c;
+          color: @white;
+          &:hover {
+            background: @h;
+          }
         }
       }
       input[type="file"].ui.@{color}.file.input::file-selector-button,

package/src/definitions/elements/segment.less

@@ -460,7 +460,9 @@
     /* Horizontal Segment */
     .ui.horizontal.segments:not(.compact) > .segment:not(.compact) {
       flex: 1 1 auto;
-      -ms-flex: 1 1 0; /* Solves #2550 MS Flex */
+      & when (@supportIE) {
+        -ms-flex: 1 1 0; /* Solves #2550 MS Flex */
+      }
     }
     .ui.horizontal.segments > .segment {
       margin: 0;

package/src/definitions/globals/site.less

@@ -153,12 +153,13 @@ a:hover {
     background: @thumbHoverBackground;
   }
   body .ui {
-    /* IE11 */
-    scrollbar-face-color: @thumbBackgroundHex;
-    scrollbar-shadow-color: @thumbBackgroundHex;
-    scrollbar-track-color: @trackBackgroundHex;
-    scrollbar-arrow-color: @trackBackgroundHex;
-
+    & when (@supportIE) {
+      /* IE11 */
+      scrollbar-face-color: @thumbBackgroundHex;
+      scrollbar-shadow-color: @thumbBackgroundHex;
+      scrollbar-track-color: @trackBackgroundHex;
+      scrollbar-arrow-color: @trackBackgroundHex;
+    }
     /* firefox : first color thumb, second track*/
     scrollbar-color:  @thumbBackground @trackBackground;
     scrollbar-width: thin;
@@ -179,12 +180,13 @@ a:hover {
   }
 
   body .ui.inverted:not(.dimmer) {
-    /* IE11 */
-    scrollbar-face-color: @thumbInvertedBackgroundHex;
-    scrollbar-shadow-color: @thumbInvertedBackgroundHex;
-    scrollbar-track-color: @trackInvertedBackgroundHex;
-    scrollbar-arrow-color: @trackInvertedBackgroundHex;
-
+    & when (@supportIE) {
+      /* IE11 */
+      scrollbar-face-color: @thumbInvertedBackgroundHex;
+      scrollbar-shadow-color: @thumbInvertedBackgroundHex;
+      scrollbar-track-color: @trackInvertedBackgroundHex;
+      scrollbar-arrow-color: @trackInvertedBackgroundHex;
+    }
     /* firefox : first color thumb, second track */
     scrollbar-color:  @thumbInvertedBackground @trackInvertedBackground;
   }

package/src/definitions/modules/dimmer.less

@@ -82,12 +82,13 @@
     background: @thumbInvertedHoverBackground;
   }
   .ui.dimmer:not(.inverted) {
-    /* IE11 */
-    scrollbar-face-color: @thumbInvertedBackgroundHex;
-    scrollbar-shadow-color: @thumbInvertedBackgroundHex;
-    scrollbar-track-color: @trackInvertedBackgroundHex;
-    scrollbar-arrow-color: @trackInvertedBackgroundHex;
-
+    & when (@supportIE) {
+      /* IE11 */
+      scrollbar-face-color: @thumbInvertedBackgroundHex;
+      scrollbar-shadow-color: @thumbInvertedBackgroundHex;
+      scrollbar-track-color: @trackInvertedBackgroundHex;
+      scrollbar-arrow-color: @trackInvertedBackgroundHex;
+    }
     /* firefox : first color thumb, second track */
     scrollbar-color:  @thumbInvertedBackground @trackInvertedBackground;
   }

package/src/definitions/modules/dropdown.less

@@ -1343,12 +1343,13 @@ select.ui.dropdown {
   .ui.dropdown > .visible.menu .scrolling.menu {
     display: block;
   }
-
-  /* Scrollbar in IE */
-  @media all and (-ms-high-contrast:none) {
-    .ui.scrolling.dropdown .menu,
-    .ui.dropdown .scrolling.menu {
-      min-width: e(%("calc(100%% - %d)", @scrollbarWidth));
+  & when (@supportIE) {
+    /* Scrollbar in IE */
+    @media all and (-ms-high-contrast: none) {
+      .ui.scrolling.dropdown .menu,
+      .ui.dropdown .scrolling.menu {
+        min-width: e(%("calc(100%% - %d)", @scrollbarWidth));
+      }
     }
   }
   @media only screen and (max-width : @largestMobileScreen) {
@@ -1435,8 +1436,10 @@ select.ui.dropdown {
   }
   .ui.simple.dropdown .menu {
     position: absolute;
-    /* IE hack to make dropdown icons appear inline */
-    display: -ms-inline-flexbox !important;
+    & when (@supportIE) {
+      /* IE hack to make dropdown icons appear inline */
+      display: -ms-inline-flexbox !important;
+    }
     display: block;
     overflow: hidden;
     top: -9999px;
@@ -1952,12 +1955,13 @@ select.ui.dropdown {
     }
     .ui.dropdown .inverted.menu,
     .ui.inverted.dropdown .menu {
-      /* IE11 */
-      scrollbar-face-color: @thumbInvertedBackgroundHex;
-      scrollbar-shadow-color: @thumbInvertedBackgroundHex;
-      scrollbar-track-color: @trackInvertedBackgroundHex;
-      scrollbar-arrow-color: @trackInvertedBackgroundHex;
-
+      & when (@supportIE) {
+        /* IE11 */
+        scrollbar-face-color: @thumbInvertedBackgroundHex;
+        scrollbar-shadow-color: @thumbInvertedBackgroundHex;
+        scrollbar-track-color: @trackInvertedBackgroundHex;
+        scrollbar-arrow-color: @trackInvertedBackgroundHex;
+      }
       /* firefox : first color thumb, second track */
       scrollbar-color:  @thumbInvertedBackground @trackInvertedBackground;
     }

package/src/definitions/modules/sticky.less

@@ -66,7 +66,9 @@
 .ui.native.sticky {
   position: -webkit-sticky;
   position: -moz-sticky;
-  position: -ms-sticky;
+  & when (@supportIE) {
+    position: -ms-sticky;
+  }
   position: -o-sticky;
   position: sticky;
 }

package/src/definitions/views/card.less

@@ -559,7 +559,9 @@
     align-items: center;
     display: -webkit-box;
     display: -moz-box;
-    display: -ms-flexbox;
+    & when (@supportIE) {
+      display: -ms-flexbox;
+    }
     display: -webkit-flex;
     display: flex;
     width: 100%;