Form module complete

docs/v2/DEVLOG.md

@@ -223,3 +223,6 @@
 - Tested `form` styling thoroughly and optimized code.
 - Moved fixes from `core` to `form` module for most of the `form` elements (except `search`).
 - Deployed updated live page.
+- Decided to avoid styling `search` `input` `type`s, due to lack of support for magnifying lens icon for most search inputs. Generally speaking this can easily be added by the user.
+- Reorganized the loading order of modules in `core`.
+- Added `search` fixes to `form` module.

docs/v2/index.html

@@ -315,6 +315,7 @@
                   <option>Test</option>
                   <option>Demo</option>
                 </select>
+                <input type="search" placeholder="search..." value="">
               </fieldset>
             </form>
           </div>

flavors/v2/mini-default.css

@@ -539,6 +539,114 @@ th:first-child, td:first-child {
 
   td:last-child {
     border-bottom: 0; } }
+form {
+  background: #eceff1;
+  border: 1px solid #90a4ae;
+  border-radius: 2px;
+  margin: 8px;
+  padding: 8px; }
+
+fieldset {
+  border: 1px solid #b0bec5;
+  border-radius: 1px;
+  margin: 0;
+  padding: 4px 6px 8px; }
+
+legend {
+  box-sizing: border-box;
+  display: table;
+  max-width: 100%;
+  white-space: normal;
+  font-weight: 700;
+  font-size: 0.85em;
+  padding: 4px; }
+
+.input-group {
+  display: inline-block; }
+
+[type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button {
+  height: auto; }
+
+textarea {
+  overflow: auto; }
+
+input:not([type]), [type="text"], [type="email"], [type="number"], [type="search"],
+[type="password"], [type="url"], [type="tel"], textarea, select {
+  box-sizing: border-box;
+  background: #fafafa;
+  color: #212121;
+  border: 1px solid #b0bec5;
+  border-radius: 1px;
+  margin: 2px;
+  padding: 6px 8px; }
+  input:not([type]):focus, [type="text"]:focus, [type="email"]:focus, [type="number"]:focus, [type="search"]:focus,
+  [type="password"]:focus, [type="url"]:focus, [type="tel"]:focus, textarea:focus, select:focus {
+    border-color: #0288d1;
+    box-shadow: none; }
+  input:not([type])[disabled], [type="text"][disabled], [type="email"][disabled], [type="number"][disabled], [type="search"][disabled],
+  [type="password"][disabled], [type="url"][disabled], [type="tel"][disabled], textarea[disabled], select[disabled] {
+    cursor: not-allowed;
+    opacity: 0.75; }
+  input:not([type]):invalid, input:not([type]):focus:invalid, input:not([type]):focus:invalid:focus, [type="text"]:invalid, [type="text"]:focus:invalid, [type="text"]:focus:invalid:focus, [type="email"]:invalid, [type="email"]:focus:invalid, [type="email"]:focus:invalid:focus, [type="number"]:invalid, [type="number"]:focus:invalid, [type="number"]:focus:invalid:focus, [type="search"]:invalid, [type="search"]:focus:invalid, [type="search"]:focus:invalid:focus,
+  [type="password"]:invalid,
+  [type="password"]:focus:invalid,
+  [type="password"]:focus:invalid:focus, [type="url"]:invalid, [type="url"]:focus:invalid, [type="url"]:focus:invalid:focus, [type="tel"]:invalid, [type="tel"]:focus:invalid, [type="tel"]:focus:invalid:focus, textarea:invalid, textarea:focus:invalid, textarea:focus:invalid:focus, select:invalid, select:focus:invalid, select:focus:invalid:focus {
+    border-color: #d32f2f;
+    box-shadow: none; }
+  input:not([type])[readonly], [type="text"][readonly], [type="email"][readonly], [type="number"][readonly], [type="search"][readonly],
+  [type="password"][readonly], [type="url"][readonly], [type="tel"][readonly], textarea[readonly], select[readonly] {
+    background-color: #eceff1;
+    border-color: #90a4ae; }
+
+::-webkit-placeholder {
+  color: #37474f; }
+
+::-moz-placeholder {
+  color: #37474f; }
+
+::-ms-placeholder {
+  color: #37474f; }
+
+[type="search"] {
+  -webkit-appearance: textfield;
+  outline-offset: -2px; }
+
+[type="search"]::-webkit-search-cancel-button,
+[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none; }
+
+button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner {
+  border-style: none;
+  padding: 0; }
+
+button, html [type="button"], [type="reset"], [type="submit"] {
+  -webkit-appearance: button; }
+
+button {
+  overflow: visible;
+  text-transform: none; }
+
+button, [type="button"], [type="submit"], [type="reset"], a.button, label.button, .button {
+  display: inline-block;
+  background: rgba(207, 216, 220, 0.75);
+  color: #212121;
+  border: 0;
+  border-radius: 2px;
+  padding: 4px 6px;
+  margin: 4px;
+  text-decoration: none;
+  transition: all 0.3s ease 0s;
+  cursor: pointer; }
+  button:hover, button:active, button:focus, [type="button"]:hover, [type="button"]:active, [type="button"]:focus, [type="submit"]:hover, [type="submit"]:active, [type="submit"]:focus, [type="reset"]:hover, [type="reset"]:active, [type="reset"]:focus, a.button:hover, a.button:active, a.button:focus, label.button:hover, label.button:active, label.button:focus, .button:hover, .button:active, .button:focus {
+    background: #cfd8dc;
+    opacity: 1; }
+  button:disabled, button[disabled], [type="button"]:disabled, [type="button"][disabled], [type="submit"]:disabled, [type="submit"][disabled], [type="reset"]:disabled, [type="reset"][disabled], a.button:disabled, a.button[disabled], label.button:disabled, label.button[disabled], .button:disabled, .button[disabled] {
+    cursor: not-allowed;
+    opacity: 0.65; }
+
+input[type="file"] {
+  display: none; }
+
 mark {
   background: #0277bd;
   color: #fafafa;
@@ -574,123 +682,6 @@ progress {
   progress[value="100"]::-moz-progress-bar {
     border-radius: 1px; }
 
-button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner {
-  border-style: none;
-  padding: 0; }
-
-button, html [type="button"], [type="reset"], [type="submit"] {
-  -webkit-appearance: button; }
-
-button {
-  overflow: visible;
-  text-transform: none; }
-
-button, [type="button"], [type="submit"], [type="reset"], a.button, label.button, .button {
-  display: inline-block;
-  background: rgba(207, 216, 220, 0.75);
-  color: #212121;
-  border: 0;
-  border-radius: 2px;
-  padding: 4px 6px;
-  margin: 4px;
-  text-decoration: none;
-  transition: all 0.3s ease 0s;
-  cursor: pointer; }
-  button:hover, button:active, button:focus, [type="button"]:hover, [type="button"]:active, [type="button"]:focus, [type="submit"]:hover, [type="submit"]:active, [type="submit"]:focus, [type="reset"]:hover, [type="reset"]:active, [type="reset"]:focus, a.button:hover, a.button:active, a.button:focus, label.button:hover, label.button:active, label.button:focus, .button:hover, .button:active, .button:focus {
-    background: #cfd8dc;
-    opacity: 1; }
-  button:disabled, button[disabled], [type="button"]:disabled, [type="button"][disabled], [type="submit"]:disabled, [type="submit"][disabled], [type="reset"]:disabled, [type="reset"][disabled], a.button:disabled, a.button[disabled], label.button:disabled, label.button[disabled], .button:disabled, .button[disabled] {
-    cursor: not-allowed;
-    opacity: 0.65; }
-
-input[type="file"] {
-  display: none; }
-
-form {
-  background: #eceff1;
-  border: 1px solid #90a4ae;
-  border-radius: 2px;
-  margin: 8px;
-  padding: 8px; }
-
-fieldset {
-  border: 1px solid #b0bec5;
-  border-radius: 1px;
-  margin: 0;
-  padding: 4px 6px 8px; }
-
-legend {
-  box-sizing: border-box;
-  display: table;
-  max-width: 100%;
-  white-space: normal;
-  font-weight: 700;
-  font-size: 0.85em;
-  padding: 4px; }
-
-.input-group {
-  display: inline-block; }
-
-[type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button {
-  height: auto; }
-
-textarea {
-  overflow: auto; }
-
-input:not([type]), [type="text"], [type="email"], [type="number"],
-[type="password"], [type="url"], [type="tel"], textarea, select {
-  box-sizing: border-box;
-  background: #fafafa;
-  color: #212121;
-  border: 1px solid #b0bec5;
-  border-radius: 1px;
-  margin: 2px;
-  padding: 6px 8px; }
-  input:not([type]):focus, [type="text"]:focus, [type="email"]:focus, [type="number"]:focus,
-  [type="password"]:focus, [type="url"]:focus, [type="tel"]:focus, textarea:focus, select:focus {
-    border-color: #0288d1;
-    box-shadow: none; }
-  input:not([type])[disabled], [type="text"][disabled], [type="email"][disabled], [type="number"][disabled],
-  [type="password"][disabled], [type="url"][disabled], [type="tel"][disabled], textarea[disabled], select[disabled] {
-    cursor: not-allowed;
-    opacity: 0.75; }
-  input:not([type]):invalid, input:not([type]):focus:invalid, input:not([type]):focus:invalid:focus, [type="text"]:invalid, [type="text"]:focus:invalid, [type="text"]:focus:invalid:focus, [type="email"]:invalid, [type="email"]:focus:invalid, [type="email"]:focus:invalid:focus, [type="number"]:invalid, [type="number"]:focus:invalid, [type="number"]:focus:invalid:focus,
-  [type="password"]:invalid,
-  [type="password"]:focus:invalid,
-  [type="password"]:focus:invalid:focus, [type="url"]:invalid, [type="url"]:focus:invalid, [type="url"]:focus:invalid:focus, [type="tel"]:invalid, [type="tel"]:focus:invalid, [type="tel"]:focus:invalid:focus, textarea:invalid, textarea:focus:invalid, textarea:focus:invalid:focus, select:invalid, select:focus:invalid, select:focus:invalid:focus {
-    border-color: #d32f2f;
-    box-shadow: none; }
-  input:not([type])[readonly], [type="text"][readonly], [type="email"][readonly], [type="number"][readonly],
-  [type="password"][readonly], [type="url"][readonly], [type="tel"][readonly], textarea[readonly], select[readonly] {
-    background-color: #eceff1;
-    border-color: #90a4ae; }
-
-::-webkit-placeholder {
-  color: #37474f; }
-
-::-moz-placeholder {
-  color: #37474f; }
-
-::-ms-placeholder {
-  color: #37474f; }
-
-/**
- * 1. Correct the odd appearance in Chrome and Safari.
- * 2. Correct the outline style in Safari.
- */
-[type="search"] {
-  -webkit-appearance: textfield;
-  /* 1 */
-  outline-offset: -2px;
-  /* 2 */ }
-
-/**
- * Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
- */
-[type="search"]::-webkit-search-cancel-button,
-[type="search"]::-webkit-search-decoration {
-  -webkit-appearance: none; }
-
 /*
  * Add the correct display in IE 9-.
  * 1. Add the correct display in Edge, IE, and Firefox.

scss/v2/_core.scss

@@ -346,31 +346,10 @@ a{
 // You can comment out modules you do not want to use.
 @import 'mini-core/grid';
 @import 'mini-core/table';
+@import 'mini-core/form';
+@import 'mini-core/button';
 @import 'mini-core/contextual';
 @import 'mini-core/progress';
-@import 'mini-core/button';
-@import 'mini-core/form';
-
-// TODO: Move to forms.
-
-/**
- * 1. Correct the odd appearance in Chrome and Safari.
- * 2. Correct the outline style in Safari.
- */
-
-[type="search"] {
-  -webkit-appearance: textfield; /* 1 */
-  outline-offset: -2px; /* 2 */
-}
-
-/**
- * Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
- */
-
-[type="search"]::-webkit-search-cancel-button,
-[type="search"]::-webkit-search-decoration {
-  -webkit-appearance: none;
-}
 
 // TODO: Figure out where to move those.
 

scss/v2/mini-core/_form.scss

@@ -62,7 +62,7 @@ textarea {
   overflow: auto;	// Remove the default vertical scrollbar in IE.
 }
 
-input:not([type]), [type="text"], [type="email"], [type="number"], 
+input:not([type]), [type="text"], [type="email"], [type="number"], [type="search"],
 [type="password"], [type="url"], [type="tel"], textarea, select {
 	box-sizing: border-box;
 	// Background, color and border should not be unassigned, as the browser defaults will apply.
@@ -106,6 +106,14 @@ input:not([type]), [type="text"], [type="email"], [type="number"],
 	color: $input-placeholder-fore-color;
 }
 
-// TODO: Checkboxes and radios will be in a different module.
+// Correct style in Chrome and Safari.
-// TODO: Style `search` separately.
+[type="search"] {
-// TODO: Move search fixes from core.
+  -webkit-appearance: textfield; 
+  outline-offset: -2px; 
+}
+
+// Correct style in Chrome and Safari.
+[type="search"]::-webkit-search-cancel-button,
+[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}