Input element high specificity selector tweaks

dist/mini-default.css

@@ -781,22 +781,17 @@ input:not([type]), [type="text"], [type="email"], [type="number"], [type="search
   border-radius: 1px;
   margin: 2px;
   padding: 8px 12px; }
-  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 {
+
+input:not([type="button"]):not([type="submit"]):not([type="reset"]):hover, input:not([type="button"]):not([type="submit"]):not([type="reset"]):focus, textarea:hover, textarea:focus, select:hover, 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] {
+input:not([type="button"]):not([type="submit"]):not([type="reset"]):disabled, input:not([type="button"]):not([type="submit"]):not([type="reset"])[disabled], textarea:disabled, textarea[disabled], select: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 {
+input:not([type="button"]):not([type="submit"]):not([type="reset"]):invalid, input:not([type="button"]):not([type="submit"]):not([type="reset"]):focus:invalid, textarea:invalid, textarea:focus:invalid, select:invalid, select:focus:invalid {
   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] {
+input:not([type="button"]):not([type="submit"]):not([type="reset"])[readonly], textarea[readonly], select[readonly] {
   background: #e0e0e0;
   border-color: #bdbdbd; }
 

docs/v2/DEVLOG.md

@@ -797,3 +797,12 @@
 - `center-block` turned off using a flag by default. File size is now `6.87KB`. All legacy utilites have been disabled by default.
 - Updated `utility.html` page to reflect the fact that these utilities are no longer present by default.
 - Updated `quick_reference.html` to reflect the fact that these utilities are no longer present by default.
+
+## 20170201
+
+- Changed **hugging cat**'s clothes. It's February now!
+- Added hidden flag `$input-high-specificity-selectors` to `input_control` to deal with high specificity selectors for `input` elements.
+- Tested the new `input` styling, does not seem to cause any trouble with `button`-type `input`s, thus it will probably be the default choice from now on. File size dropped to an astonishing `6.72KB`, which seems like a pretty great tradeoff. Some more tweaks might be required, but this should be mostly fine!
+- Tweaked the `input` styling to make sure all `button`-type `input`s are properly styled.
+- Added `:hover` and `:disabled` selectors to `input` elements, making sure as many states as possible are covered now.
+- Cleaned `:focus:invalid:focus` selector, as I could not find any test cases for it. Size is now `6.75KB`.

docs/v2/demo.html

@@ -189,6 +189,8 @@
 					</div>
 				</fieldset>
 			</form>
+			<input type="button" value="Test" readonly></input>
+			<button readonly>Test</button>
 		</div>
 	  </div>
 

src/mini/_input_control.scss

@@ -122,6 +122,10 @@ textarea {
 [type="search"]::-webkit-search-decoration {
 	-webkit-appearance: none;
 }
+// The belo option will use the legacy high specificity selectors for <input> element styling instead
+// of the less specific, yet less complicated and less bloated input selector. This only applies to
+// the pseudo-classes and states of the <input> controls and not the default styling of them.
+$input-high-specificity-selectors:	false !default;			// Hidden option: `false` by default!
 // Common textual input styling.
 input:not([type]), [type="text"], [type="email"], [type="number"], [type="search"],
 [type="password"], [type="url"], [type="tel"], textarea, select {
@@ -139,15 +143,16 @@ input:not([type]), [type="text"], [type="email"], [type="number"], [type="search
 	@if $input-padding != 0 {
 		padding: $input-padding;
 	}
-	&:focus {
+	@if $input-high-specificity-selectors {
+		&:hover, &:focus {
 			border-color: $input-focus-border-color;
 			box-shadow: none;
 		}
-	&[disabled] {
+		&:disabled, &[disabled] {
 			cursor: not-allowed;
 			opacity: $input-disabled-opacity;
 		}
-	&:invalid, &:focus:invalid, &:focus:invalid:focus{
+		&:invalid, &:focus:invalid{
 			border-color: $input-invalid-border-color;
 			box-shadow: none;
 		}
@@ -156,6 +161,30 @@ input:not([type]), [type="text"], [type="email"], [type="number"], [type="search
 			border-color: $input-readonly-border-color;
 		}
 	}
+}
+@if not $input-high-specificity-selectors {
+	input:not([type="button"]):not([type="submit"]):not([type="reset"]), textarea, select {
+		&:hover, &:focus {
+			border-color: $input-focus-border-color;
+			box-shadow: none;
+		}
+		&:disabled, &[disabled] {
+			cursor: not-allowed;
+			opacity: $input-disabled-opacity;
+		}
+		&:invalid, &:focus:invalid{
+			border-color: $input-invalid-border-color;
+			box-shadow: none;
+		}
+		//&:focus:invalid:focus {
+		//	border-color: brown;
+		//}
+		&[readonly]{
+			background: $input-readonly-back-color;
+			border-color: $input-readonly-border-color;
+		}
+	}
+}
 // Placeholder styling.
 ::-webkit-input-placeholder {
 	opacity: 1;