fomantic-ui 2.9.0-beta.25 → 2.9.0-beta.252

package/src/definitions/collections/form.less

@@ -66,10 +66,12 @@
 .ui.form .field > label {
   display: block;
   margin: @labelMargin;
-  color: @labelColor;
   font-size: @labelFontSize;
   font-weight: @labelFontWeight;
   text-transform: @labelTextTransform;
+  &:not(.button) {
+    color: @labelColor;
+  }
 }
 
 /*--------------------
@@ -79,9 +81,11 @@
 
 .ui.form textarea,
 .ui.form input:not([type]),
+.ui.form input[type="color"],
 .ui.form input[type="date"],
 .ui.form input[type="datetime-local"],
 .ui.form input[type="email"],
+.ui.form input[type="month"],
 .ui.form input[type="number"],
 .ui.form input[type="password"],
 .ui.form input[type="search"],
@@ -89,7 +93,8 @@
 .ui.form input[type="time"],
 .ui.form input[type="text"],
 .ui.form input[type="file"],
-.ui.form input[type="url"] {
+.ui.form input[type="url"],
+.ui.form input[type="week"] {
   width: @inputWidth;
   vertical-align: top;
 }
@@ -101,9 +106,11 @@
 }
 
 .ui.form input:not([type]),
+.ui.form input[type="color"],
 .ui.form input[type="date"],
 .ui.form input[type="datetime-local"],
 .ui.form input[type="email"],
+.ui.form input[type="month"],
 .ui.form input[type="number"],
 .ui.form input[type="password"],
 .ui.form input[type="search"],
@@ -111,7 +118,8 @@
 .ui.form input[type="time"],
 .ui.form input[type="text"],
 .ui.form input[type="file"],
-.ui.form input[type="url"] {
+.ui.form input[type="url"],
+.ui.form input[type="week"] {
   font-family: @inputFont;
   margin: 0;
   outline: none;
@@ -129,6 +137,16 @@
   box-shadow: @inputBoxShadow;
   transition: @inputTransition;
 }
+.ui.form input[type="color"] {
+  padding: initial;
+}
+
+.ui.form input::-webkit-calendar-picker-indicator {
+  padding: 0;
+  opacity: @iconOpacity;
+  transition: @iconTransition;
+  cursor: pointer;
+}
 
 /* Text Area */
 .ui.input textarea,
@@ -236,7 +254,7 @@
 ---------------------*/
 
 /* Block */
-.ui.form .field > .selection.dropdown {
+.ui.form .field > .selection.dropdown:not(.compact) {
   min-width: auto;
   width: 100%;
 }
@@ -282,28 +300,30 @@
   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;
+  }
 }
 
 
 /*--------------------
    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;
@@ -325,6 +345,9 @@
   background: @promptBackground !important;
   border: @promptBorder !important;
   color: @promptTextColor !important;
+  & li:before {
+    color: @promptTextColor;
+  }
 }
 & when (@variationFormInline) {
   .ui.form .inline.fields .field .prompt,
@@ -397,9 +420,11 @@
 ---------------------*/
 
 .ui.form input:not([type]):focus,
+.ui.form input[type="color"]:focus,
 .ui.form input[type="date"]:focus,
 .ui.form input[type="datetime-local"]:focus,
 .ui.form input[type="email"]:focus,
+.ui.form input[type="month"]:focus,
 .ui.form input[type="number"]:focus,
 .ui.form input[type="password"]:focus,
 .ui.form input[type="search"]:focus,
@@ -407,7 +432,8 @@
 .ui.form input[type="time"]:focus,
 .ui.form input[type="text"]:focus,
 .ui.form input[type="file"]:focus,
-.ui.form input[type="url"]:focus {
+.ui.form input[type="url"]:focus,
+.ui.form input[type="week"]:focus {
   color: @inputFocusColor;
   border-color: @inputFocusBorderColor;
   border-radius: @inputFocusBorderRadius;
@@ -417,9 +443,11 @@
 & when (@variationInputAction) {
   .ui.form .ui.action.input:not([class*="left action"]) {
     & input:not([type]):focus,
+      input[type="color"]:focus,
       input[type="date"]:focus,
       input[type="datetime-local"]:focus,
       input[type="email"]:focus,
+      input[type="month"]:focus,
       input[type="number"]:focus,
       input[type="password"]:focus,
       input[type="search"]:focus,
@@ -427,7 +455,8 @@
       input[type="time"]:focus,
       input[type="text"]:focus,
       input[type="file"]:focus,
-      input[type="url"]:focus {
+      input[type="url"]:focus,
+      input[type="week"]:focus {
       border-top-right-radius: 0;
       border-bottom-right-radius: 0;
     }
@@ -435,9 +464,11 @@
 
   .ui.form .ui[class*="left action"].input {
     & input:not([type]),
+      input[type="color"],
       input[type="date"],
       input[type="datetime-local"],
       input[type="email"],
+      input[type="month"],
       input[type="number"],
       input[type="password"],
       input[type="search"],
@@ -445,7 +476,8 @@
       input[type="time"],
       input[type="text"],
       input[type="file"],
-      input[type="url"] {
+      input[type="url"],
+      input[type="week"] {
       border-bottom-left-radius: 0;
       border-top-left-radius: 0;
     }
@@ -459,13 +491,17 @@
   box-shadow: @textAreaFocusBoxShadow;
   -webkit-appearance: none;
 }
+/* Focus */
+.ui.form input:focus::-webkit-calendar-picker-indicator {
+  opacity: @iconFocusOpacity;
+}
 
-& 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];
@@ -519,9 +555,11 @@
     .ui.form .fields.@{state} .field textarea,
     .ui.form .fields.@{state} .field select,
     .ui.form .fields.@{state} .field input:not([type]),
+    .ui.form .fields.@{state} .field input[type="color"],
     .ui.form .fields.@{state} .field input[type="date"],
     .ui.form .fields.@{state} .field input[type="datetime-local"],
     .ui.form .fields.@{state} .field input[type="email"],
+    .ui.form .fields.@{state} .field input[type="month"],
     .ui.form .fields.@{state} .field input[type="number"],
     .ui.form .fields.@{state} .field input[type="password"],
     .ui.form .fields.@{state} .field input[type="search"],
@@ -530,12 +568,15 @@
     .ui.form .fields.@{state} .field input[type="text"],
     .ui.form .fields.@{state} .field input[type="file"],
     .ui.form .fields.@{state} .field input[type="url"],
+    .ui.form .fields.@{state} .field input[type="week"],
     .ui.form .field.@{state} textarea,
     .ui.form .field.@{state} select,
     .ui.form .field.@{state} input:not([type]),
+    .ui.form .field.@{state} input[type="color"],
     .ui.form .field.@{state} input[type="date"],
     .ui.form .field.@{state} input[type="datetime-local"],
     .ui.form .field.@{state} input[type="email"],
+    .ui.form .field.@{state} input[type="month"],
     .ui.form .field.@{state} input[type="number"],
     .ui.form .field.@{state} input[type="password"],
     .ui.form .field.@{state} input[type="search"],
@@ -543,20 +584,39 @@
     .ui.form .field.@{state} input[type="time"],
     .ui.form .field.@{state} input[type="text"],
     .ui.form .field.@{state} input[type="file"],
-    .ui.form .field.@{state} input[type="url"] {
+    .ui.form .field.@{state} input[type="url"],
+    .ui.form .field.@{state} input[type="week"] {
       color: @c;
       background: @bg;
       border-color: @formStates[@@state][borderColor];
       border-radius: @formStates[@@state][borderRadius];
       box-shadow: @formStates[@@state][boxShadow];
     }
+    & when (@state=error) {
+      .ui.form .field input:not(:placeholder-shown):invalid {
+        color: @c;
+        background: @bg;
+        border-color: @formStates[@@state][borderColor];
+        border-radius: @formStates[@@state][borderRadius];
+        box-shadow: @formStates[@@state][boxShadow];
+      }
+      .ui.form .field input:not(:-ms-input-placeholder):invalid {
+        color: @c;
+        background: @bg;
+        border-color: @formStates[@@state][borderColor];
+        border-radius: @formStates[@@state][borderRadius];
+        box-shadow: @formStates[@@state][boxShadow];
+      }
+    }
 
     .ui.form .field.@{state} textarea:focus,
     .ui.form .field.@{state} select:focus,
     .ui.form .field.@{state} input:not([type]):focus,
+    .ui.form .field.@{state} input[type="color"]:focus,
     .ui.form .field.@{state} input[type="date"]:focus,
     .ui.form .field.@{state} input[type="datetime-local"]:focus,
     .ui.form .field.@{state} input[type="email"]:focus,
+    .ui.form .field.@{state} input[type="month"]:focus,
     .ui.form .field.@{state} input[type="number"]:focus,
     .ui.form .field.@{state} input[type="password"]:focus,
     .ui.form .field.@{state} input[type="search"]:focus,
@@ -564,7 +624,8 @@
     .ui.form .field.@{state} input[type="time"]:focus,
     .ui.form .field.@{state} input[type="text"]:focus,
     .ui.form .field.@{state} input[type="file"]:focus,
-    .ui.form .field.@{state} input[type="url"]:focus {
+    .ui.form .field.@{state} input[type="url"]:focus,
+    .ui.form .field.@{state} input[type="week"]:focus {
       background: @formStates[@@state][inputFocusBackground];
       border-color: @formStates[@@state][inputFocusBorderColor];
       color: @formStates[@@state][inputFocusColor];
@@ -580,13 +641,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 */
@@ -668,22 +731,16 @@
         Checkbox State
     ---------------------*/
     .ui.form .fields.@{state} .field .checkbox:not(.toggle):not(.slider) label,
-    .ui.form .field.@{state} .checkbox:not(.toggle):not(.slider) label,
-    .ui.form .fields.@{state} .field .checkbox:not(.toggle):not(.slider) .box,
-    .ui.form .field.@{state} .checkbox:not(.toggle):not(.slider) .box {
+    .ui.form .field.@{state} .checkbox:not(.toggle):not(.slider) label {
       color: @c;
     }
     .ui.form .fields.@{state} .field .checkbox:not(.toggle):not(.slider) label:before,
-    .ui.form .field.@{state} .checkbox:not(.toggle):not(.slider) label:before,
-    .ui.form .fields.@{state} .field .checkbox:not(.toggle):not(.slider) .box:before,
-    .ui.form .field.@{state} .checkbox:not(.toggle):not(.slider) .box:before {
+    .ui.form .field.@{state} .checkbox:not(.toggle):not(.slider) label:before {
       background: @bg;
       border-color: @bdc;
     }
     .ui.form .fields.@{state} .field .checkbox label:after,
-    .ui.form .field.@{state} .checkbox label:after,
-    .ui.form .fields.@{state} .field .checkbox .box:after,
-    .ui.form .field.@{state} .checkbox .box:after {
+    .ui.form .field.@{state} .checkbox label:after {
       color: @c;
     }
 
@@ -810,9 +867,7 @@
   .ui.inverted.form label,
   .ui.form .inverted.segment label,
   .ui.form .inverted.segment .ui.checkbox label,
-  .ui.form .inverted.segment .ui.checkbox .box,
   .ui.inverted.form .ui.checkbox label,
-  .ui.inverted.form .ui.checkbox .box,
   .ui.inverted.form .inline.fields > label,
   .ui.inverted.form .inline.fields .field > label,
   .ui.inverted.form .inline.fields .field > p,
@@ -828,9 +883,11 @@
   }
   /* Inverted Field */
   .ui.inverted.form input:not([type]),
+  .ui.inverted.form input[type="color"],
   .ui.inverted.form input[type="date"],
   .ui.inverted.form input[type="datetime-local"],
   .ui.inverted.form input[type="email"],
+  .ui.inverted.form input[type="month"],
   .ui.inverted.form input[type="number"],
   .ui.inverted.form input[type="password"],
   .ui.inverted.form input[type="search"],
@@ -838,7 +895,8 @@
   .ui.inverted.form input[type="time"],
   .ui.inverted.form input[type="text"],
   .ui.inverted.form input[type="file"],
-  .ui.inverted.form input[type="url"] {
+  .ui.inverted.form input[type="url"],
+  .ui.inverted.form input[type="week"] {
     background: @invertedInputBackground;
     border-color: @invertedInputBorderColor;
     color: @invertedInputColor;
@@ -901,42 +959,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 */
@@ -953,61 +1013,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;
+  }
 }
 
 
@@ -1015,10 +1077,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) {