Updated button module

docs/v2/DEVLOG.md

@@ -184,3 +184,10 @@
 - Rebuilt grid system to work with 3 screen sizes instead of 4. Legacy system is now used only if a flag (`$use-four-step-grid`) is enabled.
 - Three-step grid breakpoints tweaked to `800px` and `1080px` accordingly.
 - Deployed live demo with new grid.
+
+## 20161025
+
+- Issue maintenance and minor changes to issue structure on Github.
+- Due to implicit labeling (e.g. `<label>Name:<input></label>`) not being correctly handled by some assistive technologies, explicit labels will be used for the `file` `<input>` elements. 
+- Added `$hide-file-inputs` flag to decide the styling of `file` `<input>` elements.
+- Softcoded changes and optimized some things in the `button` module.

docs/v2/index.html

@@ -10,7 +10,7 @@
     <link rel="icon" type="image/png" href="favicon.png">
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
     <!-- Live demo styled as of 20161024 -->
-    <link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/08062eff88dbab3d3b03f8bde56cce5f9d6882e2/flavors/v2/mini-default.min.css">
+    <!-- <link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/08062eff88dbab3d3b03f8bde56cce5f9d6882e2/flavors/v2/mini-default.min.css"> -->
     <link rel="stylesheet" href="../../flavors/v2/mini-default.css">   
     <style>
       #top-logo {
@@ -261,8 +261,8 @@
             <input type="submit" value="Submit button">
             <input type="reset" value="Reset button">
             <button disabled>Disabled button</button><br>
-            <input type="file" value="File button"><br>
+            <p>File inputs are a sore spot in most frameworks, as they cannot be easily stylized using CSS. <strong>mini.css</strong> deals with the problem, using a workaround involving labels that use the <code>button</code> class, which applies the exact same style to those labels. Just link it to the <code>&lt;input type=&quot;file&quot;&gt;</code> element of your choice and you're good to go. For example:</p>
-
+            <span style="margin:3px;"></span><input type="file" id="file-input-demo"><label for="file-input-demo" class="button">Upload file</label>
           </div>
         </div>
       </div>

flavors/v2/mini-default.css

@@ -585,30 +585,25 @@ button {
   overflow: visible;
   text-transform: none; }
 
-/**
+button, [type="button"], [type="submit"], [type="reset"], a.button, label.button, .button {
- * 1. Correct the inability to style clickable types in iOS and Safari.
- * 2. Change font properties to `inherit` in Safari.
- */
-::-webkit-file-upload-button {
-  -webkit-appearance: button;
-  font: inherit; }
-
-button, [type="button"], [type="submit"], [type="reset"] {
   display: inline-block;
   background: rgba(207, 216, 220, 0.75);
   color: #212121;
   border: 0;
+  border-radius: 2px;
   padding: 4px 6px;
   margin: 4px;
-  border-radius: 2px;
   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 {
+  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; }
-  button:disabled, button[disabled], [type="button"]:disabled, [type="button"][disabled], [type="submit"]:disabled, [type="submit"][disabled], [type="reset"]:disabled, [type="reset"][disabled] {
+  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; }
+
 /**
  * Remove the inheritance of text transform in Firefox.
  */

flavors/v2/mini-default.scss

@@ -141,6 +141,29 @@ $table-mobile-label-font-weight:$bold-font-weight;								// Font weight for mob
 //	Notes:
 // [1] - The attribute specified in $table-mobile-card-label must be added manually to each and every element in the table
 //	in order for their mobile headers to display properly. 
+//	Variables for button elements
+$button-back-color:				#cfd8dc;										// Back color for button elements
+$button-back-opacity:			0.75;											// Background opacity for button elements
+$button-hover-back-opacity:		1;												// Background opacity for button elements
+																				// while hovering over them
+$button-fore-color:				#212121;										// Text color for button elements
+$button-border-style:			0;												// Border style for button elements
+$button-border-radius:			2px;											// Border radius for button elements
+$button-padding:				4px 6px;										// Padding for button elements
+$button-margin:					4px;											// Margin for button elements
+$button-disabled-opacity:		0.65;											// Disabled button elements opacity
+$button-class-name:				'button';										// Class for custom button elements
+$hide-file-inputs:				true;											// Should a style be added that makes all
+																				// <input>s of type `file` hidden?
+																				// (`true`/`false`) [1]
+
+// 	Notes:
+// [1] - If the value of $hide-file-inputs is `true`, all <input type="file"> elements will be hidden and the only way
+// 	to access them is via the use of <label> elements that are linked to them. This option is enabled by default to
+//	allow for universal button styles, even for file input buttons, but can be disabled if the base style is desired.
+//	If the value is `false`, some fixes will be applied to the <input type="file"> element.
+
+
 //	Variables for contextual background elements
 $mark-back-color:				#0277bd;										// Background color for <mark>
 $mark-fore-color:				$back-color;									// Text color for <mark>

scss/v2/mini-core/_button.scss

@@ -14,34 +14,41 @@ button {
 	overflow: visible;	// Show the overflow in IE.
 	text-transform: none;	// Remove inheritance of text-transform in Edge, Firefox, and IE.
 }
-// TODO: Test and see if these are needed etc.
-/**
- * 1. Correct the inability to style clickable types in iOS and Safari.
- * 2. Change font properties to `inherit` in Safari.
- */
-::-webkit-file-upload-button {
-  -webkit-appearance: button; // 1
-  font: inherit; // 2
-}
 // Default styling
 // TODO: Add '.button' class for other elements and 'a.button' rule on its own to make some custom link styles.
-button, [type="button"], [type="submit"], [type="reset"]{
+button, [type="button"], [type="submit"], [type="reset"], a.#{$button-class-name}, label.#{$button-class-name}, .#{$button-class-name}{
 	display: inline-block;
-	background: rgba(#cfd8dc, 0.75);
+	background: rgba($button-back-color, $button-back-opacity);
-	color: #212121;
+	color: $button-fore-color;
-	border: 0;
+	border: $button-border-style;
-	padding: 4px 6px;
+@if $button-border-radius != 0 {
-	margin: 4px;
+	border-radius: $button-border-radius;
-	border-radius: 2px;
+}
+@if $button-padding != 0 {
+	padding: $button-padding;
+}
+@if $button-margin != 0 {
+	margin: $button-margin;
+}
 	transition: all 0.3s ease 0s;
 	cursor: pointer;
 	&:hover, &:active, &:focus{
-		background: rgba(#cfd8dc, 1);
+		background: rgba($button-back-color, $button-hover-back-opacity);
 	}
 	&:disabled, &[disabled] {
 		cursor: not-allowed;
-		opacity: 0.65;
+		opacity: $button-disabled-opacity;
 	}
 }
-// TODO: Build "file" input. (many browsers use `::-webkit-file-upload-button` making it easier to style possibly).
+$hide-file-inputs: true !default;
-//	Firefox and IE will default to `[type="file"]` so there needs to be a solution for that (labels?).
+@if $hide-file-inputs {
+input[type="file"] {
+	display: none;	// Hide, use labels instead.
+}
+}
+@else {
+::-webkit-file-upload-button {
+  -webkit-appearance: button; 	// Correct inability to style in iOS and Safari.
+  font: inherit; 				// Change font propery to `inherit` in Safari.
+}
+}