feat(form): support month, week and color input

This PR add visual support for the usage of native color, week or month inputs

Author: lubber-de

src/definitions/collections/form.less

@@ -79,17 +79,20 @@
 
 .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"],
 .ui.form input[type="tel"],
 .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,17 +104,20 @@
 }
 
 .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"],
 .ui.form input[type="tel"],
 .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 +135,9 @@
   box-shadow: @inputBoxShadow;
   transition: @inputTransition;
 }
+.ui.form input[type="color"] {
+  padding: initial;
+}
 
 /* Text Area */
 .ui.input textarea,
@@ -400,17 +409,20 @@
 ---------------------*/
 
 .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,
 .ui.form input[type="tel"]:focus,
 .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;
@@ -420,35 +432,41 @@
 & 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,
       input[type="tel"]:focus,
       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;
     }
   }
 
   .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"],
       input[type="tel"],
       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;
     }
@@ -522,9 +540,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"],
@@ -533,20 +553,24 @@
     .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"],
     .ui.form .field.@{state} input[type="tel"],
     .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];
@@ -557,17 +581,20 @@
     .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,
     .ui.form .field.@{state} input[type="tel"]:focus,
     .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];
@@ -823,17 +850,20 @@
   }
   /* 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"],
   .ui.inverted.form input[type="tel"],
   .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;

src/definitions/elements/input.less

@@ -44,7 +44,6 @@
   line-height: @lineHeight;
 
   font-family: @inputFont;
-  padding: @padding;
 
   background: @background;
   border: @border;
@@ -53,6 +52,9 @@
   transition: @transition;
 
   box-shadow: @boxShadow;
+  &:not([type="color"]) {
+    padding: @padding;
+  }
 }