fomantic-ui 2.9.0-beta.3 → 2.9.0-beta.301

package/dist/components/form.css

@@ -1,5 +1,5 @@
 /*!
- * # Fomantic-UI 2.9.0-beta.3 - Form
+ * # Fomantic-UI 2.9.0-beta.301+42e68bc - Form
  * http://github.com/fomantic/Fomantic-UI/
  *
  *
@@ -56,11 +56,13 @@
 .ui.form .field > label {
   display: block;
   margin: 0 0 0.28571429rem 0;
-  color: rgba(0, 0, 0, 0.87);
   font-size: 0.92857143em;
   font-weight: bold;
   text-transform: none;
 }
+.ui.form .field > label:not(.button) {
+  color: rgba(0, 0, 0, 0.87);
+}
 
 /*--------------------
     Standard Inputs
@@ -68,9 +70,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"],
@@ -78,7 +82,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: 100%;
   vertical-align: top;
 }
@@ -89,9 +94,11 @@
   height: 1.21428571em;
 }
 .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"],
@@ -99,8 +106,9 @@
 .ui.form input[type="time"],
 .ui.form input[type="text"],
 .ui.form input[type="file"],
-.ui.form input[type="url"] {
-  font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif;
+.ui.form input[type="url"],
+.ui.form input[type="week"] {
+  font-family: 'Lato', system-ui, -apple-system, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
   margin: 0;
   outline: none;
   -webkit-appearance: none;
@@ -117,6 +125,16 @@
   -webkit-transition: color 0.1s ease, border-color 0.1s ease;
   transition: color 0.1s ease, border-color 0.1s ease;
 }
+.ui.form input[type="color"] {
+  padding: initial;
+}
+.ui.form input::-webkit-calendar-picker-indicator {
+  padding: 0;
+  opacity: 0.5;
+  -webkit-transition: opacity 0.3s ease;
+  transition: opacity 0.3s ease;
+  cursor: pointer;
+}
 
 /* Text Area */
 .ui.input textarea,
@@ -135,7 +153,7 @@
   -webkit-transition: color 0.1s ease, border-color 0.1s ease;
   transition: color 0.1s ease, border-color 0.1s ease;
   font-size: 1em;
-  font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif;
+  font-family: 'Lato', system-ui, -apple-system, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
   line-height: 1.2857;
   resize: vertical;
 }
@@ -225,7 +243,7 @@
 
 
 /* Block */
-.ui.form .field > .selection.dropdown {
+.ui.form .field > .selection.dropdown:not(.compact) {
   min-width: auto;
   width: 100%;
 }
@@ -321,13 +339,16 @@
   border: 1px solid #E0B4B4 !important;
   color: #9F3A38 !important;
 }
+.ui.form .field .prompt.label li::before {
+  color: #9F3A38;
+}
 .ui.form .inline.fields .field .prompt,
 .ui.form .inline.field .prompt {
   vertical-align: top;
   margin: -0.25em 0 -0.5em 0.5em;
 }
-.ui.form .inline.fields .field .prompt:before,
-.ui.form .inline.field .prompt:before {
+.ui.form .inline.fields .field .prompt::before,
+.ui.form .inline.field .prompt::before {
   border-width: 0 0 1px 1px;
   bottom: auto;
   right: auto;
@@ -389,9 +410,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,
@@ -399,7 +422,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: rgba(0, 0, 0, 0.95);
   border-color: #85B7D9;
   border-radius: 0.28571429rem;
@@ -408,9 +432,11 @@
           box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.35) inset;
 }
 .ui.form .ui.action.input:not([class*="left action"]) input:not([type]):focus,
+.ui.form .ui.action.input:not([class*="left action"]) input[type="color"]:focus,
 .ui.form .ui.action.input:not([class*="left action"]) input[type="date"]:focus,
 .ui.form .ui.action.input:not([class*="left action"]) input[type="datetime-local"]:focus,
 .ui.form .ui.action.input:not([class*="left action"]) input[type="email"]:focus,
+.ui.form .ui.action.input:not([class*="left action"]) input[type="month"]:focus,
 .ui.form .ui.action.input:not([class*="left action"]) input[type="number"]:focus,
 .ui.form .ui.action.input:not([class*="left action"]) input[type="password"]:focus,
 .ui.form .ui.action.input:not([class*="left action"]) input[type="search"]:focus,
@@ -418,14 +444,17 @@
 .ui.form .ui.action.input:not([class*="left action"]) input[type="time"]:focus,
 .ui.form .ui.action.input:not([class*="left action"]) input[type="text"]:focus,
 .ui.form .ui.action.input:not([class*="left action"]) input[type="file"]:focus,
-.ui.form .ui.action.input:not([class*="left action"]) input[type="url"]:focus {
+.ui.form .ui.action.input:not([class*="left action"]) input[type="url"]:focus,
+.ui.form .ui.action.input:not([class*="left action"]) input[type="week"]:focus {
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
 }
 .ui.form .ui[class*="left action"].input input:not([type]),
+.ui.form .ui[class*="left action"].input input[type="color"],
 .ui.form .ui[class*="left action"].input input[type="date"],
 .ui.form .ui[class*="left action"].input input[type="datetime-local"],
 .ui.form .ui[class*="left action"].input input[type="email"],
+.ui.form .ui[class*="left action"].input input[type="month"],
 .ui.form .ui[class*="left action"].input input[type="number"],
 .ui.form .ui[class*="left action"].input input[type="password"],
 .ui.form .ui[class*="left action"].input input[type="search"],
@@ -433,7 +462,8 @@
 .ui.form .ui[class*="left action"].input input[type="time"],
 .ui.form .ui[class*="left action"].input input[type="text"],
 .ui.form .ui[class*="left action"].input input[type="file"],
-.ui.form .ui[class*="left action"].input input[type="url"] {
+.ui.form .ui[class*="left action"].input input[type="url"],
+.ui.form .ui[class*="left action"].input input[type="week"] {
   border-bottom-left-radius: 0;
   border-top-left-radius: 0;
 }
@@ -447,6 +477,11 @@
   -webkit-appearance: none;
 }
 
+/* Focus */
+.ui.form input:focus::-webkit-calendar-picker-indicator {
+  opacity: 1;
+}
+
 /*--------------------
           States
   ---------------------*/
@@ -500,9 +535,11 @@
 .ui.form .fields.error .field textarea,
 .ui.form .fields.error .field select,
 .ui.form .fields.error .field input:not([type]),
+.ui.form .fields.error .field input[type="color"],
 .ui.form .fields.error .field input[type="date"],
 .ui.form .fields.error .field input[type="datetime-local"],
 .ui.form .fields.error .field input[type="email"],
+.ui.form .fields.error .field input[type="month"],
 .ui.form .fields.error .field input[type="number"],
 .ui.form .fields.error .field input[type="password"],
 .ui.form .fields.error .field input[type="search"],
@@ -511,12 +548,15 @@
 .ui.form .fields.error .field input[type="text"],
 .ui.form .fields.error .field input[type="file"],
 .ui.form .fields.error .field input[type="url"],
+.ui.form .fields.error .field input[type="week"],
 .ui.form .field.error textarea,
 .ui.form .field.error select,
 .ui.form .field.error input:not([type]),
+.ui.form .field.error input[type="color"],
 .ui.form .field.error input[type="date"],
 .ui.form .field.error input[type="datetime-local"],
 .ui.form .field.error input[type="email"],
+.ui.form .field.error input[type="month"],
 .ui.form .field.error input[type="number"],
 .ui.form .field.error input[type="password"],
 .ui.form .field.error input[type="search"],
@@ -524,7 +564,30 @@
 .ui.form .field.error input[type="time"],
 .ui.form .field.error input[type="text"],
 .ui.form .field.error input[type="file"],
-.ui.form .field.error input[type="url"] {
+.ui.form .field.error input[type="url"],
+.ui.form .field.error input[type="week"] {
+  color: #9F3A38;
+  background: #FFF6F6;
+  border-color: #E0B4B4;
+  border-radius: '';
+  -webkit-box-shadow: none;
+          box-shadow: none;
+}
+.ui.form .field input:not(:-moz-placeholder-shown):invalid {
+  color: #9F3A38;
+  background: #FFF6F6;
+  border-color: #E0B4B4;
+  border-radius: '';
+  box-shadow: none;
+}
+.ui.form .field input:not(:-ms-input-placeholder):invalid {
+  color: #9F3A38;
+  background: #FFF6F6;
+  border-color: #E0B4B4;
+  border-radius: '';
+  box-shadow: none;
+}
+.ui.form .field input:not(:placeholder-shown):invalid {
   color: #9F3A38;
   background: #FFF6F6;
   border-color: #E0B4B4;
@@ -532,12 +595,21 @@
   -webkit-box-shadow: none;
           box-shadow: none;
 }
+.ui.form .field input:not(:-ms-input-placeholder):invalid {
+  color: #9F3A38;
+  background: #FFF6F6;
+  border-color: #E0B4B4;
+  border-radius: '';
+  box-shadow: none;
+}
 .ui.form .field.error textarea:focus,
 .ui.form .field.error select:focus,
 .ui.form .field.error input:not([type]):focus,
+.ui.form .field.error input[type="color"]:focus,
 .ui.form .field.error input[type="date"]:focus,
 .ui.form .field.error input[type="datetime-local"]:focus,
 .ui.form .field.error input[type="email"]:focus,
+.ui.form .field.error input[type="month"]:focus,
 .ui.form .field.error input[type="number"]:focus,
 .ui.form .field.error input[type="password"]:focus,
 .ui.form .field.error input[type="search"]:focus,
@@ -545,7 +617,8 @@
 .ui.form .field.error input[type="time"]:focus,
 .ui.form .field.error input[type="text"]:focus,
 .ui.form .field.error input[type="file"]:focus,
-.ui.form .field.error input[type="url"]:focus {
+.ui.form .field.error input[type="url"]:focus,
+.ui.form .field.error input[type="week"]:focus {
   background: #FFF6F6;
   border-color: #E0B4B4;
   color: #9F3A38;
@@ -652,22 +725,16 @@
     ---------------------*/
 
 .ui.form .fields.error .field .checkbox:not(.toggle):not(.slider) label,
-.ui.form .field.error .checkbox:not(.toggle):not(.slider) label,
-.ui.form .fields.error .field .checkbox:not(.toggle):not(.slider) .box,
-.ui.form .field.error .checkbox:not(.toggle):not(.slider) .box {
+.ui.form .field.error .checkbox:not(.toggle):not(.slider) label {
   color: #9F3A38;
 }
-.ui.form .fields.error .field .checkbox:not(.toggle):not(.slider) label:before,
-.ui.form .field.error .checkbox:not(.toggle):not(.slider) label:before,
-.ui.form .fields.error .field .checkbox:not(.toggle):not(.slider) .box:before,
-.ui.form .field.error .checkbox:not(.toggle):not(.slider) .box:before {
+.ui.form .fields.error .field .checkbox:not(.toggle):not(.slider) label::before,
+.ui.form .field.error .checkbox:not(.toggle):not(.slider) label::before {
   background: #FFF6F6;
   border-color: #E0B4B4;
 }
-.ui.form .fields.error .field .checkbox label:after,
-.ui.form .field.error .checkbox label:after,
-.ui.form .fields.error .field .checkbox .box:after,
-.ui.form .field.error .checkbox .box:after {
+.ui.form .fields.error .field .checkbox label::after,
+.ui.form .field.error .checkbox label::after {
   color: #9F3A38;
 }
 .ui.inverted.form .fields.error .field label,
@@ -723,9 +790,11 @@
 .ui.form .fields.info .field textarea,
 .ui.form .fields.info .field select,
 .ui.form .fields.info .field input:not([type]),
+.ui.form .fields.info .field input[type="color"],
 .ui.form .fields.info .field input[type="date"],
 .ui.form .fields.info .field input[type="datetime-local"],
 .ui.form .fields.info .field input[type="email"],
+.ui.form .fields.info .field input[type="month"],
 .ui.form .fields.info .field input[type="number"],
 .ui.form .fields.info .field input[type="password"],
 .ui.form .fields.info .field input[type="search"],
@@ -734,12 +803,15 @@
 .ui.form .fields.info .field input[type="text"],
 .ui.form .fields.info .field input[type="file"],
 .ui.form .fields.info .field input[type="url"],
+.ui.form .fields.info .field input[type="week"],
 .ui.form .field.info textarea,
 .ui.form .field.info select,
 .ui.form .field.info input:not([type]),
+.ui.form .field.info input[type="color"],
 .ui.form .field.info input[type="date"],
 .ui.form .field.info input[type="datetime-local"],
 .ui.form .field.info input[type="email"],
+.ui.form .field.info input[type="month"],
 .ui.form .field.info input[type="number"],
 .ui.form .field.info input[type="password"],
 .ui.form .field.info input[type="search"],
@@ -747,7 +819,8 @@
 .ui.form .field.info input[type="time"],
 .ui.form .field.info input[type="text"],
 .ui.form .field.info input[type="file"],
-.ui.form .field.info input[type="url"] {
+.ui.form .field.info input[type="url"],
+.ui.form .field.info input[type="week"] {
   color: #276F86;
   background: #F8FFFF;
   border-color: #A9D5DE;
@@ -758,9 +831,11 @@
 .ui.form .field.info textarea:focus,
 .ui.form .field.info select:focus,
 .ui.form .field.info input:not([type]):focus,
+.ui.form .field.info input[type="color"]:focus,
 .ui.form .field.info input[type="date"]:focus,
 .ui.form .field.info input[type="datetime-local"]:focus,
 .ui.form .field.info input[type="email"]:focus,
+.ui.form .field.info input[type="month"]:focus,
 .ui.form .field.info input[type="number"]:focus,
 .ui.form .field.info input[type="password"]:focus,
 .ui.form .field.info input[type="search"]:focus,
@@ -768,7 +843,8 @@
 .ui.form .field.info input[type="time"]:focus,
 .ui.form .field.info input[type="text"]:focus,
 .ui.form .field.info input[type="file"]:focus,
-.ui.form .field.info input[type="url"]:focus {
+.ui.form .field.info input[type="url"]:focus,
+.ui.form .field.info input[type="week"]:focus {
   background: #F8FFFF;
   border-color: #A9D5DE;
   color: #276F86;
@@ -875,22 +951,16 @@
     ---------------------*/
 
 .ui.form .fields.info .field .checkbox:not(.toggle):not(.slider) label,
-.ui.form .field.info .checkbox:not(.toggle):not(.slider) label,
-.ui.form .fields.info .field .checkbox:not(.toggle):not(.slider) .box,
-.ui.form .field.info .checkbox:not(.toggle):not(.slider) .box {
+.ui.form .field.info .checkbox:not(.toggle):not(.slider) label {
   color: #276F86;
 }
-.ui.form .fields.info .field .checkbox:not(.toggle):not(.slider) label:before,
-.ui.form .field.info .checkbox:not(.toggle):not(.slider) label:before,
-.ui.form .fields.info .field .checkbox:not(.toggle):not(.slider) .box:before,
-.ui.form .field.info .checkbox:not(.toggle):not(.slider) .box:before {
+.ui.form .fields.info .field .checkbox:not(.toggle):not(.slider) label::before,
+.ui.form .field.info .checkbox:not(.toggle):not(.slider) label::before {
   background: #F8FFFF;
   border-color: #A9D5DE;
 }
-.ui.form .fields.info .field .checkbox label:after,
-.ui.form .field.info .checkbox label:after,
-.ui.form .fields.info .field .checkbox .box:after,
-.ui.form .field.info .checkbox .box:after {
+.ui.form .fields.info .field .checkbox label::after,
+.ui.form .field.info .checkbox label::after {
   color: #276F86;
 }
 .ui.inverted.form .fields.info .field label,
@@ -946,9 +1016,11 @@
 .ui.form .fields.success .field textarea,
 .ui.form .fields.success .field select,
 .ui.form .fields.success .field input:not([type]),
+.ui.form .fields.success .field input[type="color"],
 .ui.form .fields.success .field input[type="date"],
 .ui.form .fields.success .field input[type="datetime-local"],
 .ui.form .fields.success .field input[type="email"],
+.ui.form .fields.success .field input[type="month"],
 .ui.form .fields.success .field input[type="number"],
 .ui.form .fields.success .field input[type="password"],
 .ui.form .fields.success .field input[type="search"],
@@ -957,12 +1029,15 @@
 .ui.form .fields.success .field input[type="text"],
 .ui.form .fields.success .field input[type="file"],
 .ui.form .fields.success .field input[type="url"],
+.ui.form .fields.success .field input[type="week"],
 .ui.form .field.success textarea,
 .ui.form .field.success select,
 .ui.form .field.success input:not([type]),
+.ui.form .field.success input[type="color"],
 .ui.form .field.success input[type="date"],
 .ui.form .field.success input[type="datetime-local"],
 .ui.form .field.success input[type="email"],
+.ui.form .field.success input[type="month"],
 .ui.form .field.success input[type="number"],
 .ui.form .field.success input[type="password"],
 .ui.form .field.success input[type="search"],
@@ -970,7 +1045,8 @@
 .ui.form .field.success input[type="time"],
 .ui.form .field.success input[type="text"],
 .ui.form .field.success input[type="file"],
-.ui.form .field.success input[type="url"] {
+.ui.form .field.success input[type="url"],
+.ui.form .field.success input[type="week"] {
   color: #2C662D;
   background: #FCFFF5;
   border-color: #A3C293;
@@ -981,9 +1057,11 @@
 .ui.form .field.success textarea:focus,
 .ui.form .field.success select:focus,
 .ui.form .field.success input:not([type]):focus,
+.ui.form .field.success input[type="color"]:focus,
 .ui.form .field.success input[type="date"]:focus,
 .ui.form .field.success input[type="datetime-local"]:focus,
 .ui.form .field.success input[type="email"]:focus,
+.ui.form .field.success input[type="month"]:focus,
 .ui.form .field.success input[type="number"]:focus,
 .ui.form .field.success input[type="password"]:focus,
 .ui.form .field.success input[type="search"]:focus,
@@ -991,7 +1069,8 @@
 .ui.form .field.success input[type="time"]:focus,
 .ui.form .field.success input[type="text"]:focus,
 .ui.form .field.success input[type="file"]:focus,
-.ui.form .field.success input[type="url"]:focus {
+.ui.form .field.success input[type="url"]:focus,
+.ui.form .field.success input[type="week"]:focus {
   background: #FCFFF5;
   border-color: #A3C293;
   color: #2C662D;
@@ -1098,22 +1177,16 @@
     ---------------------*/
 
 .ui.form .fields.success .field .checkbox:not(.toggle):not(.slider) label,
-.ui.form .field.success .checkbox:not(.toggle):not(.slider) label,
-.ui.form .fields.success .field .checkbox:not(.toggle):not(.slider) .box,
-.ui.form .field.success .checkbox:not(.toggle):not(.slider) .box {
+.ui.form .field.success .checkbox:not(.toggle):not(.slider) label {
   color: #2C662D;
 }
-.ui.form .fields.success .field .checkbox:not(.toggle):not(.slider) label:before,
-.ui.form .field.success .checkbox:not(.toggle):not(.slider) label:before,
-.ui.form .fields.success .field .checkbox:not(.toggle):not(.slider) .box:before,
-.ui.form .field.success .checkbox:not(.toggle):not(.slider) .box:before {
+.ui.form .fields.success .field .checkbox:not(.toggle):not(.slider) label::before,
+.ui.form .field.success .checkbox:not(.toggle):not(.slider) label::before {
   background: #FCFFF5;
   border-color: #A3C293;
 }
-.ui.form .fields.success .field .checkbox label:after,
-.ui.form .field.success .checkbox label:after,
-.ui.form .fields.success .field .checkbox .box:after,
-.ui.form .field.success .checkbox .box:after {
+.ui.form .fields.success .field .checkbox label::after,
+.ui.form .field.success .checkbox label::after {
   color: #2C662D;
 }
 .ui.inverted.form .fields.success .field label,
@@ -1169,9 +1242,11 @@
 .ui.form .fields.warning .field textarea,
 .ui.form .fields.warning .field select,
 .ui.form .fields.warning .field input:not([type]),
+.ui.form .fields.warning .field input[type="color"],
 .ui.form .fields.warning .field input[type="date"],
 .ui.form .fields.warning .field input[type="datetime-local"],
 .ui.form .fields.warning .field input[type="email"],
+.ui.form .fields.warning .field input[type="month"],
 .ui.form .fields.warning .field input[type="number"],
 .ui.form .fields.warning .field input[type="password"],
 .ui.form .fields.warning .field input[type="search"],
@@ -1180,12 +1255,15 @@
 .ui.form .fields.warning .field input[type="text"],
 .ui.form .fields.warning .field input[type="file"],
 .ui.form .fields.warning .field input[type="url"],
+.ui.form .fields.warning .field input[type="week"],
 .ui.form .field.warning textarea,
 .ui.form .field.warning select,
 .ui.form .field.warning input:not([type]),
+.ui.form .field.warning input[type="color"],
 .ui.form .field.warning input[type="date"],
 .ui.form .field.warning input[type="datetime-local"],
 .ui.form .field.warning input[type="email"],
+.ui.form .field.warning input[type="month"],
 .ui.form .field.warning input[type="number"],
 .ui.form .field.warning input[type="password"],
 .ui.form .field.warning input[type="search"],
@@ -1193,7 +1271,8 @@
 .ui.form .field.warning input[type="time"],
 .ui.form .field.warning input[type="text"],
 .ui.form .field.warning input[type="file"],
-.ui.form .field.warning input[type="url"] {
+.ui.form .field.warning input[type="url"],
+.ui.form .field.warning input[type="week"] {
   color: #573A08;
   background: #FFFAF3;
   border-color: #C9BA9B;
@@ -1204,9 +1283,11 @@
 .ui.form .field.warning textarea:focus,
 .ui.form .field.warning select:focus,
 .ui.form .field.warning input:not([type]):focus,
+.ui.form .field.warning input[type="color"]:focus,
 .ui.form .field.warning input[type="date"]:focus,
 .ui.form .field.warning input[type="datetime-local"]:focus,
 .ui.form .field.warning input[type="email"]:focus,
+.ui.form .field.warning input[type="month"]:focus,
 .ui.form .field.warning input[type="number"]:focus,
 .ui.form .field.warning input[type="password"]:focus,
 .ui.form .field.warning input[type="search"]:focus,
@@ -1214,7 +1295,8 @@
 .ui.form .field.warning input[type="time"]:focus,
 .ui.form .field.warning input[type="text"]:focus,
 .ui.form .field.warning input[type="file"]:focus,
-.ui.form .field.warning input[type="url"]:focus {
+.ui.form .field.warning input[type="url"]:focus,
+.ui.form .field.warning input[type="week"]:focus {
   background: #FFFAF3;
   border-color: #C9BA9B;
   color: #573A08;
@@ -1321,22 +1403,16 @@
     ---------------------*/
 
 .ui.form .fields.warning .field .checkbox:not(.toggle):not(.slider) label,
-.ui.form .field.warning .checkbox:not(.toggle):not(.slider) label,
-.ui.form .fields.warning .field .checkbox:not(.toggle):not(.slider) .box,
-.ui.form .field.warning .checkbox:not(.toggle):not(.slider) .box {
+.ui.form .field.warning .checkbox:not(.toggle):not(.slider) label {
   color: #573A08;
 }
-.ui.form .fields.warning .field .checkbox:not(.toggle):not(.slider) label:before,
-.ui.form .field.warning .checkbox:not(.toggle):not(.slider) label:before,
-.ui.form .fields.warning .field .checkbox:not(.toggle):not(.slider) .box:before,
-.ui.form .field.warning .checkbox:not(.toggle):not(.slider) .box:before {
+.ui.form .fields.warning .field .checkbox:not(.toggle):not(.slider) label::before,
+.ui.form .field.warning .checkbox:not(.toggle):not(.slider) label::before {
   background: #FFFAF3;
   border-color: #C9BA9B;
 }
-.ui.form .fields.warning .field .checkbox label:after,
-.ui.form .field.warning .checkbox label:after,
-.ui.form .fields.warning .field .checkbox .box:after,
-.ui.form .field.warning .checkbox .box:after {
+.ui.form .fields.warning .field .checkbox label::after,
+.ui.form .field.warning .checkbox label::after {
   color: #573A08;
 }
 .ui.inverted.form .fields.warning .field label,
@@ -1371,7 +1447,7 @@
   cursor: default;
   pointer-events: none;
 }
-.ui.loading.form:before {
+.ui.loading.form::before {
   position: absolute;
   content: '';
   top: 0;
@@ -1381,10 +1457,10 @@
   height: 100%;
   z-index: 100;
 }
-.ui.loading.form.segments:before {
+.ui.loading.form.segments::before {
   border-radius: 0.28571429rem;
 }
-.ui.loading.form:after {
+.ui.loading.form::after {
   position: absolute;
   content: '';
   top: 50%;
@@ -1412,25 +1488,25 @@
        Required Field
   ---------------------*/
 
-.ui.form .required.fields:not(.grouped) > .field > label:after,
-.ui.form .required.fields.grouped > label:after,
-.ui.form .required.field > label:after,
-.ui.form .required.fields:not(.grouped) > .field > .checkbox:after,
-.ui.form .required.field > .checkbox:after,
-.ui.form label.required:after {
+.ui.form .required.fields:not(.grouped) > .field > label::after,
+.ui.form .required.fields.grouped > label::after,
+.ui.form .required.field > label::after,
+.ui.form .required.fields:not(.grouped) > .field > .checkbox::after,
+.ui.form .required.field > .checkbox::after,
+.ui.form label.required::after {
   margin: -0.2em 0 0 0.2em;
   content: '*';
   color: #DB2828;
 }
-.ui.form .required.fields:not(.grouped) > .field > label:after,
-.ui.form .required.fields.grouped > label:after,
-.ui.form .required.field > label:after,
-.ui.form label.required:after {
+.ui.form .required.fields:not(.grouped) > .field > label::after,
+.ui.form .required.fields.grouped > label::after,
+.ui.form .required.field > label::after,
+.ui.form label.required::after {
   display: inline-block;
   vertical-align: top;
 }
-.ui.form .required.fields:not(.grouped) > .field > .checkbox:after,
-.ui.form .required.field > .checkbox:after {
+.ui.form .required.fields:not(.grouped) > .field > .checkbox::after,
+.ui.form .required.field > .checkbox::after {
   position: absolute;
   top: 0;
   left: 100%;
@@ -1449,9 +1525,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,
@@ -1462,15 +1536,17 @@
 .ui.inverted.loading.form {
   color: #FFFFFF;
 }
-.ui.inverted.loading.form:before {
+.ui.inverted.loading.form::before {
   background: rgba(0, 0, 0, 0.85);
 }
 
 /* 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"],
@@ -1478,7 +1554,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: #FFFFFF;
   border-color: rgba(255, 255, 255, 0.1);
   color: rgba(0, 0, 0, 0.87);