fomantic-ui 2.9.4-beta.6 → 2.9.4-beta.8

package/dist/semantic.min.js

@@ -1,5 +1,5 @@
 /*
- * # Fomantic UI - 2.9.4-beta.6+b198514
+ * # Fomantic UI - 2.9.4-beta.8+e346213
  * https://github.com/fomantic/Fomantic-UI
  * https://fomantic-ui.com/
  *

package/package.json

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

package/src/definitions/collections/form.less

@@ -162,6 +162,11 @@
     font-family: @inputFont;
     line-height: @textAreaLineHeight;
     resize: @textAreaResize;
+    min-height: @actionTextareaMinHeight;
+}
+.ui.input > textarea {
+    flex: 1 1 auto;
+    max-width: 100%;
 }
 .ui.form textarea:not([rows]) {
     height: @textAreaHeight;
@@ -291,8 +296,10 @@
 
 /* Auto Input */
 .ui.form .fields .field .ui.input input,
-.ui.form .field .ui.input input {
-    width: auto;
+.ui.form .fields .field .ui.input textarea,
+.ui.form .field .ui.input input,
+.ui.form .field .ui.input textarea {
+    width: 100%;
 }
 
 & when (@variationFormEqualWidth) or (@variationFormWide) {
@@ -441,7 +448,8 @@
         input[type="text"]:focus,
         input[type="file"]:focus,
         input[type="url"]:focus,
-        input[type="week"]:focus {
+        input[type="week"]:focus,
+        textarea:focus {
             border-top-right-radius: 0;
             border-bottom-right-radius: 0;
         }
@@ -462,7 +470,8 @@
         input[type="text"],
         input[type="file"],
         input[type="url"],
-        input[type="week"] {
+        input[type="week"],
+        textarea {
             border-bottom-left-radius: 0;
             border-top-left-radius: 0;
         }

package/src/definitions/elements/input.less

@@ -35,7 +35,7 @@
 .ui.input > input {
     margin: 0;
     max-width: 100%;
-    flex: 1 0 auto;
+    flex: 1 1 auto;
     outline: none;
     -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
     text-align: @textAlign;
@@ -524,7 +524,11 @@
         .ui.form .field.@{state} > .ui.action.input:not([class*="left action"]) > input + .ui.button,
         .ui.form .field.@{state} > .ui.right.labeled.input:not([class*="corner labeled"]) > input + .ui.label,
         .ui.action.input.@{state}:not([class*="left action"]) > input + .ui.button,
-        .ui.right.labeled.input.@{state}:not([class*="corner labeled"]) > input + .ui.label {
+        .ui.right.labeled.input.@{state}:not([class*="corner labeled"]) > input + .ui.label,
+        .ui.form .field.@{state} > .ui.action.input:not([class*="left action"]) > textarea + .ui.button,
+        .ui.form .field.@{state} > .ui.right.labeled.input:not([class*="corner labeled"]) > textarea + .ui.label,
+        .ui.action.input.@{state}:not([class*="left action"]) > textarea + .ui.button,
+        .ui.right.labeled.input.@{state}:not([class*="corner labeled"]) > textarea + .ui.label {
             border-right: @borderWidth solid @borderColor;
         }
         .ui.form .field.@{state} > .ui.right.labeled.input:not([class*="corner labeled"]) > .ui.label:first-child,
@@ -553,14 +557,16 @@
     }
 
     /* Input when ui Left */
-    .ui[class*="left action"].input > input {
+    .ui[class*="left action"].input > input,
+    .ui[class*="left action"].input > textarea {
         border-top-left-radius: 0;
         border-bottom-left-radius: 0;
         border-left-color: transparent;
     }
 
     /* Input when ui Right */
-    .ui.action.input:not([class*="left action"]) > input {
+    .ui.action.input:not([class*="left action"]) > input,
+    .ui.action.input:not([class*="left action"]) > textarea {
         border-top-right-radius: 0;
         border-bottom-right-radius: 0;
         border-right-color: transparent;
@@ -584,11 +590,13 @@
     }
 
     /* Input Focus */
-    .ui.action.input:not([class*="left action"]) > input:focus {
+    .ui.action.input:not([class*="left action"]) > input:focus,
+    .ui.action.input:not([class*="left action"]) > textarea:focus {
         border-right-color: @focusBorderColor;
     }
 
-    .ui.ui[class*="left action"].input > input:focus {
+    .ui.ui[class*="left action"].input > input:focus,
+    .ui.ui[class*="left action"].input > textarea:focus {
         border-left-color: @focusBorderColor;
     }
 }

package/src/themes/default/collections/form.variables

@@ -60,6 +60,7 @@
 @textAreaBorder: @inputBorder;
 @textAreaFontSize: @inputFontSize;
 @textAreaTransition: @inputTransition;
+@actionTextareaMinHeight: (@inputVerticalPadding * 2) + @lineHeight;
 
 /* Checkbox */
 @checkboxVerticalAlign: top;