Input control cleanup

dist/mini-default.css

@@ -700,7 +700,16 @@ button, [type="button"], [type="submit"], [type="reset"], a.button, label.button
     opacity: 0.65; }
 
 input[type="file"] {
-  display: none; }
+  border: 0;
+  height: 1px;
+  width: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  clip: rect(0 0 0 0);
+  -webkit-clip-path: inset(100%);
+  clip-path: inset(100%); }
 
 [type="checkbox"], [type="radio"] {
   height: 1px;

docs/v2/DEVLOG.md

@@ -383,4 +383,6 @@
 	- Started converting media queries from `only screen and ()` to plain `()`. Changes have been applied to `grid` module.
 	- Code cleanup in `grid`, indentation etc.
 	- Code cleanup in `table`. Media query conversions applied. Optimization.
-	
+	- Code cleanup in `form`. 
+	- Code cleanup in `button`. Updated `file` `input`s to be accessible.
+	- Code cleanup in `checkbox`. Optimizations.

src/mini/_button.scss

@@ -15,47 +15,57 @@ button {
 	text-transform: none;	// Remove inheritance of text-transform in Edge, Firefox, and IE.
 }
 // Default styling
-button, [type="button"], [type="submit"], [type="reset"], a.#{$button-class-name}, label.#{$button-class-name}, .#{$button-class-name}{
+button, [type="button"], [type="submit"], [type="reset"], a.#{$button-class-name}, label.#{$button-class-name}, .#{$button-class-name} {
 	display: inline-block;
 	background: rgba($button-back-color, $button-back-opacity);
 	color: $button-fore-color;
 	border: $button-border-style;
-@if $button-border-radius != 0 {
+	@if $button-border-radius != 0 {
 		border-radius: $button-border-radius;
-}
+	}
-@if $button-padding != 0 {
+	@if $button-padding != 0 {
 		padding: $button-padding;
-}
+	}
-@if $button-margin != 0 {
+	@if $button-margin != 0 {
 		margin: $button-margin;
-}
+	}
-@if $apply-link-underline {		// Override for links if underline is enabled.
+	@if $apply-link-underline {		// Override for links if underline is enabled.
 		text-decoration: none;
-}
+	}
 	transition: all 0.3s ease 0s;
 	cursor: pointer;
-&:hover, &:active, &:focus {
+	&:hover, &:active, &:focus {
 		background: rgba($button-back-color, $button-hover-back-opacity);
-@if $apply-link-hover-fade {	// Override for links if hover-fade is enabled.
+		@if $apply-link-hover-fade {	// Override for links if hover-fade is enabled.
 			opacity: 1;
-}
+		}
-}
+	}
-&:disabled, &[disabled] {
+	&:disabled, &[disabled] {
 		cursor: not-allowed;
 		opacity: $button-disabled-opacity;
+	}
 }
-}
+// Styling for file inputs
 $hide-file-inputs: true !default;
 @if $hide-file-inputs {
-input[type="file"] {
+	input[type="file"] { // Hide, use labels instead. Hidden inputs like this are still accessible.
-	display: none;	// Hide, use labels instead.
+		border: 0;
-}
+		height: 1px;
+		width: 1px;
+		margin: -1px;
+		overflow: hidden;
+		padding: 0;
+		position: absolute;	
+		clip: rect(0 0 0 0);
+		-webkit-clip-path: inset(100%);
+				clip-path: inset(100%);	
+	}
 }
 @else {
-::-webkit-file-upload-button {
+	::-webkit-file-upload-button {
 		-webkit-appearance: button; 	// Correct inability to style in iOS and Safari.
 		font: inherit; 					// Change font propery to `inherit` in Safari.
-}
+	}
 }
 // Mixin for alternate buttons (button color variants).
 // Variables:
@@ -70,16 +80,16 @@ input[type="file"] {
 // base class for the button styles.
 @mixin make-button-alt-color ($button-alt-name, $button-alt-back-color, $button-alt-back-opacity,
 	$button-alt-hover-back-opacity, $button-alt-fore-color: $button-fore-color) {
-button.#{$button-alt-name}, [type="button"].#{$button-alt-name}, [type="submit"].#{$button-alt-name}, 
+	button.#{$button-alt-name}, [type="button"].#{$button-alt-name}, [type="submit"].#{$button-alt-name}, 
-[type="reset"].#{$button-alt-name}, .#{$button-class-name}.#{$button-alt-name} {
+	[type="reset"].#{$button-alt-name}, .#{$button-class-name}.#{$button-alt-name} {
 		background: rgba($button-alt-back-color, $button-alt-back-opacity);
-@if $button-alt-fore-color != $button-fore-color {
+		@if $button-alt-fore-color != $button-fore-color {
 			color: $button-alt-fore-color;
-}
+		}
-&:hover, &:active, &:focus{
+		&:hover, &:active, &:focus {
 			background: rgba($button-alt-back-color, $button-alt-hover-back-opacity);
-}
+		}
-}
+	}
 }
 // Mixin for alternate button styles (button color variants).
 // Variables:
@@ -94,19 +104,19 @@ button.#{$button-alt-name}, [type="button"].#{$button-alt-name}, [type="submit"]
 // base class for the button styles.
 @mixin make-button-alt-style ($button-alt-name, $button-alt-border-style, $button-alt-border-radius,
 	$button-alt-padding, $button-alt-margin) {
-button.#{$button-alt-name}, [type="button"].#{$button-alt-name}, [type="submit"].#{$button-alt-name}, 
+	button.#{$button-alt-name}, [type="button"].#{$button-alt-name}, [type="submit"].#{$button-alt-name}, 
-[type="reset"].#{$button-alt-name}, .#{$button-class-name}.#{$button-alt-name} {
+	[type="reset"].#{$button-alt-name}, .#{$button-class-name}.#{$button-alt-name} {
-@if $button-alt-border-style != $button-border-style {
+		@if $button-alt-border-style != $button-border-style {
 			border: $button-alt-border-style;
-}
+		}
-@if $button-alt-border-radius != $button-border-radius {
+		@if $button-alt-border-radius != $button-border-radius {
 			border-radius: $button-alt-border-radius;
-}
+		}
-@if $button-alt-padding != $button-padding {
+		@if $button-alt-padding != $button-padding {
 			padding: $button-alt-padding;
-}
+		}
-@if $button-alt-margin != $button-margin {
+		@if $button-alt-margin != $button-margin {
 			margin: $button-alt-margin;
-}
+		}
-}
+	}
 }

src/mini/_checkbox.scss

@@ -13,12 +13,12 @@
 }
 // Use input-group to setup the style for labels.
 .#{$input-group-name} {
-// Label styling based on the specifics of the checkbox/radio variables.
+	// Label styling based on the specifics of the checkbox/radio variables.
-[type="checkbox"] + label, [type="radio"] + label {
+	[type="checkbox"] + label, [type="radio"] + label {
 		position: relative;
 		margin-left: $checkbox-size + ($checkbox-size * 0.25);
-// Styling for checkbox/radio box part.
+		// Styling for checkbox/radio box part.
-&:before {
+		&:before {
 			box-sizing: border-box;	
 			display: inline-block;
 			position: absolute;
@@ -27,39 +27,43 @@
 			width: $checkbox-size;
 			height: $checkbox-size;
 			content: '';
+			@if $checkbox-border-style != 0 {
 				border: $checkbox-border-style;
+			}
+			@if $checkbox-border-radius != 0 {
 				border-radius:  $checkbox-border-radius;
+			}
 			background: $checkbox-back-color;
 			color: $checkbox-fore-color;
 			margin-left: -($checkbox-size + ($checkbox-size * 0.25));
 			vertical-align: text-bottom;
-}
+		}
-// Hover, focus, active styling.
+		// Hover, focus, active styling.
-&:hover, &:active, &:focus {
+		&:hover, &:active, &:focus {
-&:before {
+			&:before {
 				border-color: $checkbox-focus-border-color;
-}
+			}
-}
+		}	
-}
+	}
-[type="checkbox"]:focus + label:before, [type="radio"]:focus + label:before {
+	[type="checkbox"]:focus + label:before, [type="radio"]:focus + label:before {
 		border-color: $checkbox-focus-border-color;
-}
+	}
-// Make radio button box and fill circular.
+	// Make radio button box and fill circular.
-[type="radio"] + label {
+	[type="radio"] + label {
-&:before, &:after {
+		&:before, &:after {
 			border-radius: 50%;
-}
+		}
-}
+	}
-// Disabled and readonly styles.
+	// Disabled and readonly styles.
-[type="checkbox"][disabled] + label, [type="radio"][disabled] + label {
+	[type="checkbox"][disabled] + label, [type="radio"][disabled] + label {
 		cursor: not-allowed;
-&:before, &:after {
+		&:before, &:after {
 			opacity: $checkbox-disabled-opacity;
-}
+		}
-}
+	}
-// Fill for checked checkbox/radio elements.
+	// Fill for checked checkbox/radio elements.
-[type="checkbox"]:checked + label, [type="radio"]:checked + label{
+	[type="checkbox"]:checked + label, [type="radio"]:checked + label{
-&:after {
+		&:after {
 			margin-left: - floor($checkbox-size + floor($checkbox-size * 0.25));
 			position: absolute;
 			top: ($checkbox-size - floor($checkbox-size * 0.55))/2;
@@ -68,6 +72,6 @@
 			height: floor($checkbox-size * 0.55);
 			background: $checkbox-fore-color;
 			content: '';
-}
+		}
-}
+	}
 }

src/mini/_form.scss

@@ -2,33 +2,33 @@
 // Different elements are styled based on the same set of rules.
 // Base form styling.
 form {
-@if $form-back-color != $back-color {
+	@if $form-back-color != $back-color {
 		background: $form-back-color;
-}
+	}
-@if $form-fore-color != $fore-color {
+	@if $form-fore-color != $fore-color {
 		color: $form-fore-color;
-}
+	}
-@if $form-border-style != 0 {
+	@if $form-border-style != 0 {
 		border: $form-border-style;
-}
+	}
-@if $form-border-radius != 0 {
+	@if $form-border-radius != 0 {
 		border-radius: $form-border-radius;
-}
+	}
-@if $form-margin != 0 {
+	@if $form-margin != 0 {
 		margin: $form-margin;
-}
+	}
-@if $form-padding != 0 {
+	@if $form-padding != 0 {
 		padding: $form-padding;
-}
+	}
 }
 // Fieldset styling.
 fieldset {
-@if $fieldset-back-color != $form-back-color {
+	@if $fieldset-back-color != $form-back-color {
 		background: $fieldset-back-color;
-}
+	}
+	// Apply always to overwrite defaults for all of the below.
 	border: $fieldset-border-style;			
 	border-radius: $fieldset-border-radius;
-	// Margin and padding should never be unassigned, because browser defaults will be applied.
 	margin: $fieldset-margin;
   	padding: $fieldset-padding;
 }
@@ -42,12 +42,12 @@ legend {
 	// Actual styling.
 	font-weight: $legend-font-weight;
 	font-size: $legend-font-size;
-@if $legend-fore-color != $fore-color {
+	@if $legend-fore-color != $fore-color {
 		color: $legend-fore-color;
-}
+	}
-@if $legend-padding != 0 {
+	@if $legend-padding != 0 {
 		padding: $legend-padding;
-}
+	}
 }
 // Input group base naming.
 .#{$input-group-name} {
@@ -79,31 +79,31 @@ input:not([type]), [type="text"], [type="email"], [type="number"], [type="search
 	background: $input-back-color;
 	color: $input-fore-color;
 	border: $input-border-style;
-@if $input-border-radius != 0 {
+	@if $input-border-radius != 0 {
 		border-radius: $input-border-radius;
-}		
+	}		
-@if $input-margin != 0 {
+	@if $input-margin != 0 {
 		margin: $input-margin;
-}
+	}
-@if $input-padding != 0 {
+	@if $input-padding != 0 {
 		padding: $input-padding;
-}
+	}
-&:focus {
+	&:focus {
 		border-color: $input-focus-border-color;
 		box-shadow: none;
-}
+	}
-&[disabled] {
+	&[disabled] {
 		cursor: not-allowed;
 		opacity: $input-disabled-opacity;
-}
+	}
-&:invalid, &:focus:invalid, &:focus:invalid:focus{
+	&:invalid, &:focus:invalid, &:focus:invalid:focus{
 		border-color: $input-invalid-border-color;
 		box-shadow: none;
-}
+	}
-&[readonly]{
+	&[readonly]{
 		background: $input-readonly-back-color;
 		border-color: $input-readonly-border-color;
-}
+	}
 }
 // Placeholder styling.
 ::-webkit-placeholder {