fomantic-ui 2.9.0-beta.77 → 2.9.0-beta.80

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fomantic-ui",
-  "version": "2.9.0-beta.77",
+  "version": "2.9.0-beta.80",
   "description": "Fomantic empowers designers and developers by creating a shared vocabulary for UI.",
   "keywords": [
     "fomantic-ui",
@@ -61,7 +61,7 @@
     "gulp-replace": "^1.0.0",
     "gulp-rtlcss": "^1.3.0",
     "gulp-uglify": "^3.0.1",
-    "inquirer": "^6.2.1",
+    "inquirer": "^7.0.5",
     "map-stream": "^0.1.0",
     "mkdirp": "^0.5.1",
     "normalize-path": "^3.0.0",

package/src/definitions/collections/form.less

@@ -291,19 +291,21 @@
   width: auto;
 }
 
-/* Full Width Input */
-.ui.form .ten.fields .ui.input input,
-.ui.form .nine.fields .ui.input input,
-.ui.form .eight.fields .ui.input input,
-.ui.form .seven.fields .ui.input input,
-.ui.form .six.fields .ui.input input,
-.ui.form .five.fields .ui.input input,
-.ui.form .four.fields .ui.input input,
-.ui.form .three.fields .ui.input input,
-.ui.form .two.fields .ui.input input,
-.ui.form .wide.field .ui.input input {
-  flex: 1 0 auto;
-  width: 0;
+& when (@variationFormEqualWidth) or (@variationFormWide) {
+  /* Full Width Input */
+  .ui.form .ten.fields .ui.input input,
+  .ui.form .nine.fields .ui.input input,
+  .ui.form .eight.fields .ui.input input,
+  .ui.form .seven.fields .ui.input input,
+  .ui.form .six.fields .ui.input input,
+  .ui.form .five.fields .ui.input input,
+  .ui.form .four.fields .ui.input input,
+  .ui.form .three.fields .ui.input input,
+  .ui.form .two.fields .ui.input input,
+  .ui.form .wide.field .ui.input input {
+    flex: 1 0 auto;
+    width: 0;
+  }
 }
 
 
@@ -626,13 +628,15 @@
     /*------------------
         Input State
     --------------------*/
-    /* Transparent */
-    .ui.form .field.@{state} .transparent.input input,
-    .ui.form .field.@{state} .transparent.input textarea,
-    .ui.form .field.@{state} input.transparent,
-    .ui.form .field.@{state} textarea.transparent {
-      background-color: @formStates[@@state][transparentBackground] !important;
-      color: @formStates[@@state][transparentColor] !important;
+    & when (@variationFormTransparent) {
+      /* Transparent */
+      .ui.form .field.@{state} .transparent.input input,
+      .ui.form .field.@{state} .transparent.input textarea,
+      .ui.form .field.@{state} input.transparent,
+      .ui.form .field.@{state} textarea.transparent {
+        background-color: @formStates[@@state][transparentBackground] !important;
+        color: @formStates[@@state][transparentColor] !important;
+      }
     }
 
     /* Autofilled */
@@ -942,42 +946,44 @@
   box-shadow: none;
 }
 
-/* Other Combinations */
-.ui.form .two.fields > .fields,
-.ui.form .two.fields > .field {
-  width: @twoColumn;
-}
-.ui.form .three.fields > .fields,
-.ui.form .three.fields > .field {
-  width: @threeColumn;
-}
-.ui.form .four.fields > .fields,
-.ui.form .four.fields > .field {
-  width: @fourColumn;
-}
-.ui.form .five.fields > .fields,
-.ui.form .five.fields > .field {
-  width: @fiveColumn;
-}
-.ui.form .six.fields > .fields,
-.ui.form .six.fields > .field {
-  width: @sixColumn;
-}
-.ui.form .seven.fields > .fields,
-.ui.form .seven.fields > .field {
-  width: @sevenColumn;
-}
-.ui.form .eight.fields > .fields,
-.ui.form .eight.fields > .field {
-  width: @eightColumn;
-}
-.ui.form .nine.fields > .fields,
-.ui.form .nine.fields > .field {
-  width: @nineColumn;
-}
-.ui.form .ten.fields > .fields,
-.ui.form .ten.fields > .field {
-  width: @tenColumn;
+& when (@variationFormEqualWidth) {
+  /* Other Combinations */
+  .ui.form .two.fields > .fields,
+  .ui.form .two.fields > .field {
+    width: @twoColumn;
+  }
+  .ui.form .three.fields > .fields,
+  .ui.form .three.fields > .field {
+    width: @threeColumn;
+  }
+  .ui.form .four.fields > .fields,
+  .ui.form .four.fields > .field {
+    width: @fourColumn;
+  }
+  .ui.form .five.fields > .fields,
+  .ui.form .five.fields > .field {
+    width: @fiveColumn;
+  }
+  .ui.form .six.fields > .fields,
+  .ui.form .six.fields > .field {
+    width: @sixColumn;
+  }
+  .ui.form .seven.fields > .fields,
+  .ui.form .seven.fields > .field {
+    width: @sevenColumn;
+  }
+  .ui.form .eight.fields > .fields,
+  .ui.form .eight.fields > .field {
+    width: @eightColumn;
+  }
+  .ui.form .nine.fields > .fields,
+  .ui.form .nine.fields > .field {
+    width: @nineColumn;
+  }
+  .ui.form .ten.fields > .fields,
+  .ui.form .ten.fields > .field {
+    width: @tenColumn;
+  }
 }
 
 /* Swap to full width on mobile */
@@ -994,61 +1000,63 @@
   }
 }
 
+& when (@variationFormWide) {
 
-/* Sizing Combinations */
-.ui.form .fields .wide.field {
-  width: @oneWide;
-  padding-left: (@gutterWidth / 2);
-  padding-right: (@gutterWidth / 2);
-}
+  /* Sizing Combinations */
+  .ui.form .fields .wide.field {
+    width: @oneWide;
+    padding-left: (@gutterWidth / 2);
+    padding-right: (@gutterWidth / 2);
+  }
 
-.ui.form .one.wide.field {
-  width: @oneWide;
-}
-.ui.form .two.wide.field {
-  width: @twoWide;
-}
-.ui.form .three.wide.field {
-  width: @threeWide;
-}
-.ui.form .four.wide.field {
-  width: @fourWide;
-}
-.ui.form .five.wide.field {
-  width: @fiveWide;
-}
-.ui.form .six.wide.field {
-  width: @sixWide;
-}
-.ui.form .seven.wide.field {
-  width: @sevenWide;
-}
-.ui.form .eight.wide.field {
-  width: @eightWide;
-}
-.ui.form .nine.wide.field {
-  width: @nineWide;
-}
-.ui.form .ten.wide.field {
-  width: @tenWide;
-}
-.ui.form .eleven.wide.field {
-  width: @elevenWide;
-}
-.ui.form .twelve.wide.field {
-  width: @twelveWide;
-}
-.ui.form .thirteen.wide.field {
-  width: @thirteenWide;
-}
-.ui.form .fourteen.wide.field {
-  width: @fourteenWide;
-}
-.ui.form .fifteen.wide.field {
-  width: @fifteenWide;
-}
-.ui.form .sixteen.wide.field {
-  width: @sixteenWide;
+  .ui.form .one.wide.field {
+    width: @oneWide;
+  }
+  .ui.form .two.wide.field {
+    width: @twoWide;
+  }
+  .ui.form .three.wide.field {
+    width: @threeWide;
+  }
+  .ui.form .four.wide.field {
+    width: @fourWide;
+  }
+  .ui.form .five.wide.field {
+    width: @fiveWide;
+  }
+  .ui.form .six.wide.field {
+    width: @sixWide;
+  }
+  .ui.form .seven.wide.field {
+    width: @sevenWide;
+  }
+  .ui.form .eight.wide.field {
+    width: @eightWide;
+  }
+  .ui.form .nine.wide.field {
+    width: @nineWide;
+  }
+  .ui.form .ten.wide.field {
+    width: @tenWide;
+  }
+  .ui.form .eleven.wide.field {
+    width: @elevenWide;
+  }
+  .ui.form .twelve.wide.field {
+    width: @twelveWide;
+  }
+  .ui.form .thirteen.wide.field {
+    width: @thirteenWide;
+  }
+  .ui.form .fourteen.wide.field {
+    width: @fourteenWide;
+  }
+  .ui.form .fifteen.wide.field {
+    width: @fifteenWide;
+  }
+  .ui.form .sixteen.wide.field {
+    width: @sixteenWide;
+  }
 }
 
 
@@ -1056,10 +1064,12 @@
      Equal Width
 ---------------------*/
 
-.ui[class*="equal width"].form .fields > .field,
-.ui.form [class*="equal width"].fields > .field {
-  width: 100%;
-  flex: 1 1 auto;
+& when (@variationFormEqualWidth) {
+  .ui[class*="equal width"].form .fields > .field,
+  .ui.form [class*="equal width"].fields > .field {
+    width: 100%;
+    flex: 1 1 auto;
+  }
 }
 
 & when (@variationFormInline) {