From e4b326ec361b39729adbadded85e599f780716a8 Mon Sep 17 00:00:00 2001
From: Angelos Chalaris <chalarangelo@gmail.com>
Date: Tue, 25 Oct 2016 17:23:24 +0300
Subject: [PATCH] Updated button module

---
 docs/v2/DEVLOG.md               |  9 ++++++-
 docs/v2/index.html              |  6 ++---
 flavors/v2/mini-default.css     | 19 +++++--------
 flavors/v2/mini-default.min.css |  2 +-
 flavors/v2/mini-default.scss    | 23 ++++++++++++++++
 scss/v2/mini-core/_button.scss  | 47 +++++++++++++++++++--------------
 6 files changed, 69 insertions(+), 37 deletions(-)

diff --git a/docs/v2/DEVLOG.md b/docs/v2/DEVLOG.md
index 6572647..ed69d58 100644
--- a/docs/v2/DEVLOG.md
+++ b/docs/v2/DEVLOG.md
@@ -183,4 +183,11 @@
 
 - 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.
\ No newline at end of file
+- 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.
\ No newline at end of file
diff --git a/docs/v2/index.html b/docs/v2/index.html
index 22387af..c9e771e 100644
--- a/docs/v2/index.html
+++ b/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>
diff --git a/flavors/v2/mini-default.css b/flavors/v2/mini-default.css
index ac5bf76..27d25b7 100644
--- a/flavors/v2/mini-default.css
+++ b/flavors/v2/mini-default.css
@@ -585,30 +585,25 @@ button {
   overflow: visible;
   text-transform: none; }
 
-/**
- * 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"] {
+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;
-  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.
  */
diff --git a/flavors/v2/mini-default.min.css b/flavors/v2/mini-default.min.css
index ff5db44..6c21789 100644
--- a/flavors/v2/mini-default.min.css
+++ b/flavors/v2/mini-default.min.css
@@ -1 +1 @@
-*,html{font-family:"Helvetica Neue",Helvetica,sans-serif;font-size:1em;line-height:1.5;-webkit-text-size-adjust:100%}body{margin:0;color:#212121;background:#fafafa}article,aside,figcaption,figure,footer,header,main,nav,section{display:block}abbr[title]{border-bottom:none;text-decoration:underline}audio,video{display:inline-block}svg:not(:root){overflow:hidden}input{overflow:visible}h1,h2,h3,h4,h5,h6{line-height:1.2em;margin:.7em 8px;font-weight:500}h1 small,h2 small,h3 small,h4 small,h5 small,h6 small{color:#424242;display:block;margin-top:-.35em;font-size:45%}h1{font-size:2em}h2{font-size:1.5em}h3{font-size:1.15em}h4{font-size:1em}h5{font-size:.85em}h6{font-size:.75em}p{margin:1px 10px}b,strong{font-weight:700}hr{box-sizing:content-box;border:0;overflow:visible;line-height:1.2em;margin:.5em 4px;height:1px;background:-webkit-linear-gradient(to right,#bdbdbd,#616161,#bdbdbd);background:linear-gradient(to right,#bdbdbd,#616161,#bdbdbd)}code,kbd,pre,samp{font-family:monospace,monospace}code{border-radius:2px;background:#e0e0e0;padding:2px 4px}pre{overflow:auto;border-radius:0 2px 2px 0;background:#e0e0e0;padding:12px;margin:1px 10px;border-left:3px solid #1565c0}kbd{border-radius:2px;background:#212121;color:#fafafa;padding:2px 4px}small,sub,sup{font-size:75%}sup{top:-.5em}sub{bottom:-.25em}sub,sup{line-height:0;position:relative;vertical-align:baseline}a{color:#0277bd;text-decoration:underline;opacity:1;transition:all .3s ease 0s}a:visited{color:#01579b}a:active,a:focus,a:hover{opacity:.75}.container{margin:0 auto;padding:0 10px}.row{box-sizing:border-box;-webkit-box-flex:0;-webkit-box-orient:horizontal;-webkit-box-direction:normal;display:-webkit-flex;display:flex;-webkit-flex:0 1 auto;flex:0 1 auto;-webkit-flex-flow:row wrap;flex-flow:row wrap}.col-sm,[class^=col-sm-],[class^=col-sm-offset-]{box-sizing:border-box;-webkit-box-flex:0;-webkit-flex:0 0 auto;flex:0 0 auto;padding:0 4px}.col-sm{-webkit-box-flex:1;max-width:100%;-webkit-flex-grow:1;flex-grow:1;-webkit-flex-basis:0;flex-basis:0}.col-sm-1{max-width:8.33333%;-webkit-flex-basis:8.33333%;flex-basis:8.33333%}.col-sm-2{max-width:16.66667%;-webkit-flex-basis:16.66667%;flex-basis:16.66667%}.col-sm-3{max-width:25%;-webkit-flex-basis:25%;flex-basis:25%}.col-sm-4{max-width:33.33333%;-webkit-flex-basis:33.33333%;flex-basis:33.33333%}.col-sm-5{max-width:41.66667%;-webkit-flex-basis:41.66667%;flex-basis:41.66667%}.col-sm-6{max-width:50%;-webkit-flex-basis:50%;flex-basis:50%}.col-sm-7{max-width:58.33333%;-webkit-flex-basis:58.33333%;flex-basis:58.33333%}.col-sm-8{max-width:66.66667%;-webkit-flex-basis:66.66667%;flex-basis:66.66667%}.col-sm-9{max-width:75%;-webkit-flex-basis:75%;flex-basis:75%}.col-sm-10{max-width:83.33333%;-webkit-flex-basis:83.33333%;flex-basis:83.33333%}.col-sm-11{max-width:91.66667%;-webkit-flex-basis:91.66667%;flex-basis:91.66667%}.col-sm-12{max-width:100%;-webkit-flex-basis:100%;flex-basis:100%}.col-sm-offset-0{margin-left:0}.col-sm-offset-1{margin-left:8.33333%}.col-sm-offset-2{margin-left:16.66667%}.col-sm-offset-3{margin-left:25%}.col-sm-offset-4{margin-left:33.33333%}.col-sm-offset-5{margin-left:41.66667%}.col-sm-offset-6{margin-left:50%}.col-sm-offset-7{margin-left:58.33333%}.col-sm-offset-8{margin-left:66.66667%}.col-sm-offset-9{margin-left:75%}.col-sm-offset-10{margin-left:83.33333%}.col-sm-offset-11{margin-left:91.66667%}@media only screen and (min-width:800px){.col-md,[class^=col-md-],[class^=col-md-offset-]{box-sizing:border-box;-webkit-box-flex:0;-webkit-flex:0 0 auto;flex:0 0 auto;padding:0 4px}.col-md{-webkit-box-flex:1;max-width:100%;-webkit-flex-grow:1;flex-grow:1;-webkit-flex-basis:0;flex-basis:0}.col-md-1{max-width:8.33333%;-webkit-flex-basis:8.33333%;flex-basis:8.33333%}.col-md-2{max-width:16.66667%;-webkit-flex-basis:16.66667%;flex-basis:16.66667%}.col-md-3{max-width:25%;-webkit-flex-basis:25%;flex-basis:25%}.col-md-4{max-width:33.33333%;-webkit-flex-basis:33.33333%;flex-basis:33.33333%}.col-md-5{max-width:41.66667%;-webkit-flex-basis:41.66667%;flex-basis:41.66667%}.col-md-6{max-width:50%;-webkit-flex-basis:50%;flex-basis:50%}.col-md-7{max-width:58.33333%;-webkit-flex-basis:58.33333%;flex-basis:58.33333%}.col-md-8{max-width:66.66667%;-webkit-flex-basis:66.66667%;flex-basis:66.66667%}.col-md-9{max-width:75%;-webkit-flex-basis:75%;flex-basis:75%}.col-md-10{max-width:83.33333%;-webkit-flex-basis:83.33333%;flex-basis:83.33333%}.col-md-11{max-width:91.66667%;-webkit-flex-basis:91.66667%;flex-basis:91.66667%}.col-md-12{max-width:100%;-webkit-flex-basis:100%;flex-basis:100%}.col-md-offset-0{margin-left:0}.col-md-offset-1{margin-left:8.33333%}.col-md-offset-2{margin-left:16.66667%}.col-md-offset-3{margin-left:25%}.col-md-offset-4{margin-left:33.33333%}.col-md-offset-5{margin-left:41.66667%}.col-md-offset-6{margin-left:50%}.col-md-offset-7{margin-left:58.33333%}.col-md-offset-8{margin-left:66.66667%}.col-md-offset-9{margin-left:75%}.col-md-offset-10{margin-left:83.33333%}.col-md-offset-11{margin-left:91.66667%}}@media only screen and (min-width:1080px){.col-lg,[class^=col-lg-],[class^=col-lg-offset-]{box-sizing:border-box;-webkit-box-flex:0;-webkit-flex:0 0 auto;flex:0 0 auto;padding:0 4px}.col-lg{-webkit-box-flex:1;max-width:100%;-webkit-flex-grow:1;flex-grow:1;-webkit-flex-basis:0;flex-basis:0}.col-lg-1{max-width:8.33333%;-webkit-flex-basis:8.33333%;flex-basis:8.33333%}.col-lg-2{max-width:16.66667%;-webkit-flex-basis:16.66667%;flex-basis:16.66667%}.col-lg-3{max-width:25%;-webkit-flex-basis:25%;flex-basis:25%}.col-lg-4{max-width:33.33333%;-webkit-flex-basis:33.33333%;flex-basis:33.33333%}.col-lg-5{max-width:41.66667%;-webkit-flex-basis:41.66667%;flex-basis:41.66667%}.col-lg-6{max-width:50%;-webkit-flex-basis:50%;flex-basis:50%}.col-lg-7{max-width:58.33333%;-webkit-flex-basis:58.33333%;flex-basis:58.33333%}.col-lg-8{max-width:66.66667%;-webkit-flex-basis:66.66667%;flex-basis:66.66667%}.col-lg-9{max-width:75%;-webkit-flex-basis:75%;flex-basis:75%}.col-lg-10{max-width:83.33333%;-webkit-flex-basis:83.33333%;flex-basis:83.33333%}.col-lg-11{max-width:91.66667%;-webkit-flex-basis:91.66667%;flex-basis:91.66667%}.col-lg-12{max-width:100%;-webkit-flex-basis:100%;flex-basis:100%}.col-lg-offset-0{margin-left:0}.col-lg-offset-1{margin-left:8.33333%}.col-lg-offset-2{margin-left:16.66667%}.col-lg-offset-3{margin-left:25%}.col-lg-offset-4{margin-left:33.33333%}.col-lg-offset-5{margin-left:41.66667%}.col-lg-offset-6{margin-left:50%}.col-lg-offset-7{margin-left:58.33333%}.col-lg-offset-8{margin-left:66.66667%}.col-lg-offset-9{margin-left:75%}.col-lg-offset-10{margin-left:83.33333%}.col-lg-offset-11{margin-left:91.66667%}}table{border-collapse:separate;border-spacing:0;border:1px solid #bdbdbd;border-radius:2px;margin:0 auto}caption{font-size:1.5em;margin:6px 0 12px}tr{padding:6px}td,th{padding:10px;border-left:1px solid #bdbdbd;border-top:1px solid #bdbdbd}th{border-top:0;background:#eceff1}td:first-child,th:first-child{border-left:0}@media only screen and (max-width:768px){table{border-collapse:collapse;border:0;width:100%}thead{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%)}tr{display:block;border:1px solid #bdbdbd;border-radius:2px;margin-bottom:10px}td{display:block;border:0;border-bottom:1px solid #bdbdbd;text-align:right}td:before{content:attr(data-label);float:left;font-weight:700}td:last-child{border-bottom:0}}mark{background:#0277bd;color:#fafafa;font-size:95%;line-height:1;padding:1px}progress{display:block;vertical-align:baseline;-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:10px;border:0;border-radius:1px;margin:1px auto;background:#f5f5f5;color:#01579b}progress::-webkit-progress-value{background:#01579b;border-top-left-radius:1px;border-bottom-left-radius:1px}progress::-webkit-progress-bar{background:#f5f5f5}progress::-moz-progress-bar{background:#01579b;border-top-left-radius:1px;border-bottom-left-radius:1px}progress[value="100"]::-webkit-progress-value{border-radius:1px}progress[value="100"]::-moz-progress-bar{border-radius:1px}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}button{overflow:visible;text-transform:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}[type=button],[type=reset],[type=submit],button{display:inline-block;background:rgba(207,216,220,.75);color:#212121;border:0;padding:4px 6px;margin:4px;border-radius:2px;transition:all .3s ease 0s;cursor:pointer}[type=button]:active,[type=button]:focus,[type=button]:hover,[type=reset]:active,[type=reset]:focus,[type=reset]:hover,[type=submit]:active,[type=submit]:focus,[type=submit]:hover,button:active,button:focus,button:hover{background:#cfd8dc}[type=button]:disabled,[type=button][disabled],[type=reset]:disabled,[type=reset][disabled],[type=submit]:disabled,[type=submit][disabled],button:disabled,button[disabled]{cursor:not-allowed;opacity:.65}select{text-transform:none}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}textarea{overflow:auto}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}details,menu{display:block}summary{display:list-item}mark.secondary{background:#f44336}mark.tertiary{background:#558b2f}mark.tag{display:inline-block;border-radius:2px;padding:2px}mark.bubble{display:inline-block;border-radius:200px;padding:3px 5px}progress.inline{display:inline-block;vertical-align:middle;width:20em}progress.secondary{color:#e53935}progress.secondary::-webkit-progress-value{background:#e53935}progress.secondary::-moz-progress-bar{background:#e53935}progress.tertiary{color:#689f38}progress.tertiary::-webkit-progress-value{background:#689f38}progress.tertiary::-moz-progress-bar{background:#689f38}progress.nano{height:2px;margin:0 auto 1px;border-radius:0}progress.nano::-webkit-progress-value{border-top-left-radius:0;border-bottom-left-radius:0}progress.nano::-moz-progress-bar{border-top-left-radius:0;border-bottom-left-radius:0}progress.nano[value="100"]::-webkit-progress-value{border-radius:0}progress.nano[value="100"]::-moz-progress-bar{border-radius:0}
\ No newline at end of file
+*,html{font-family:"Helvetica Neue",Helvetica,sans-serif;font-size:1em;line-height:1.5;-webkit-text-size-adjust:100%}body{margin:0;color:#212121;background:#fafafa}article,aside,figcaption,figure,footer,header,main,nav,section{display:block}abbr[title]{border-bottom:none;text-decoration:underline}audio,video{display:inline-block}svg:not(:root){overflow:hidden}input{overflow:visible}h1,h2,h3,h4,h5,h6{line-height:1.2em;margin:.7em 8px;font-weight:500}h1 small,h2 small,h3 small,h4 small,h5 small,h6 small{color:#424242;display:block;margin-top:-.35em;font-size:45%}h1{font-size:2em}h2{font-size:1.5em}h3{font-size:1.15em}h4{font-size:1em}h5{font-size:.85em}h6{font-size:.75em}p{margin:1px 10px}b,strong{font-weight:700}hr{box-sizing:content-box;border:0;overflow:visible;line-height:1.2em;margin:.5em 4px;height:1px;background:-webkit-linear-gradient(to right,#bdbdbd,#616161,#bdbdbd);background:linear-gradient(to right,#bdbdbd,#616161,#bdbdbd)}code,kbd,pre,samp{font-family:monospace,monospace}code{border-radius:2px;background:#e0e0e0;padding:2px 4px}pre{overflow:auto;border-radius:0 2px 2px 0;background:#e0e0e0;padding:12px;margin:1px 10px;border-left:3px solid #1565c0}kbd{border-radius:2px;background:#212121;color:#fafafa;padding:2px 4px}small,sub,sup{font-size:75%}sup{top:-.5em}sub{bottom:-.25em}sub,sup{line-height:0;position:relative;vertical-align:baseline}a{color:#0277bd;text-decoration:underline;opacity:1;transition:all .3s ease 0s}a:visited{color:#01579b}a:active,a:focus,a:hover{opacity:.75}.container{margin:0 auto;padding:0 10px}.row{box-sizing:border-box;-webkit-box-flex:0;-webkit-box-orient:horizontal;-webkit-box-direction:normal;display:-webkit-flex;display:flex;-webkit-flex:0 1 auto;flex:0 1 auto;-webkit-flex-flow:row wrap;flex-flow:row wrap}.col-sm,[class^=col-sm-],[class^=col-sm-offset-]{box-sizing:border-box;-webkit-box-flex:0;-webkit-flex:0 0 auto;flex:0 0 auto;padding:0 4px}.col-sm{-webkit-box-flex:1;max-width:100%;-webkit-flex-grow:1;flex-grow:1;-webkit-flex-basis:0;flex-basis:0}.col-sm-1{max-width:8.33333%;-webkit-flex-basis:8.33333%;flex-basis:8.33333%}.col-sm-2{max-width:16.66667%;-webkit-flex-basis:16.66667%;flex-basis:16.66667%}.col-sm-3{max-width:25%;-webkit-flex-basis:25%;flex-basis:25%}.col-sm-4{max-width:33.33333%;-webkit-flex-basis:33.33333%;flex-basis:33.33333%}.col-sm-5{max-width:41.66667%;-webkit-flex-basis:41.66667%;flex-basis:41.66667%}.col-sm-6{max-width:50%;-webkit-flex-basis:50%;flex-basis:50%}.col-sm-7{max-width:58.33333%;-webkit-flex-basis:58.33333%;flex-basis:58.33333%}.col-sm-8{max-width:66.66667%;-webkit-flex-basis:66.66667%;flex-basis:66.66667%}.col-sm-9{max-width:75%;-webkit-flex-basis:75%;flex-basis:75%}.col-sm-10{max-width:83.33333%;-webkit-flex-basis:83.33333%;flex-basis:83.33333%}.col-sm-11{max-width:91.66667%;-webkit-flex-basis:91.66667%;flex-basis:91.66667%}.col-sm-12{max-width:100%;-webkit-flex-basis:100%;flex-basis:100%}.col-sm-offset-0{margin-left:0}.col-sm-offset-1{margin-left:8.33333%}.col-sm-offset-2{margin-left:16.66667%}.col-sm-offset-3{margin-left:25%}.col-sm-offset-4{margin-left:33.33333%}.col-sm-offset-5{margin-left:41.66667%}.col-sm-offset-6{margin-left:50%}.col-sm-offset-7{margin-left:58.33333%}.col-sm-offset-8{margin-left:66.66667%}.col-sm-offset-9{margin-left:75%}.col-sm-offset-10{margin-left:83.33333%}.col-sm-offset-11{margin-left:91.66667%}@media only screen and (min-width:800px){.col-md,[class^=col-md-],[class^=col-md-offset-]{box-sizing:border-box;-webkit-box-flex:0;-webkit-flex:0 0 auto;flex:0 0 auto;padding:0 4px}.col-md{-webkit-box-flex:1;max-width:100%;-webkit-flex-grow:1;flex-grow:1;-webkit-flex-basis:0;flex-basis:0}.col-md-1{max-width:8.33333%;-webkit-flex-basis:8.33333%;flex-basis:8.33333%}.col-md-2{max-width:16.66667%;-webkit-flex-basis:16.66667%;flex-basis:16.66667%}.col-md-3{max-width:25%;-webkit-flex-basis:25%;flex-basis:25%}.col-md-4{max-width:33.33333%;-webkit-flex-basis:33.33333%;flex-basis:33.33333%}.col-md-5{max-width:41.66667%;-webkit-flex-basis:41.66667%;flex-basis:41.66667%}.col-md-6{max-width:50%;-webkit-flex-basis:50%;flex-basis:50%}.col-md-7{max-width:58.33333%;-webkit-flex-basis:58.33333%;flex-basis:58.33333%}.col-md-8{max-width:66.66667%;-webkit-flex-basis:66.66667%;flex-basis:66.66667%}.col-md-9{max-width:75%;-webkit-flex-basis:75%;flex-basis:75%}.col-md-10{max-width:83.33333%;-webkit-flex-basis:83.33333%;flex-basis:83.33333%}.col-md-11{max-width:91.66667%;-webkit-flex-basis:91.66667%;flex-basis:91.66667%}.col-md-12{max-width:100%;-webkit-flex-basis:100%;flex-basis:100%}.col-md-offset-0{margin-left:0}.col-md-offset-1{margin-left:8.33333%}.col-md-offset-2{margin-left:16.66667%}.col-md-offset-3{margin-left:25%}.col-md-offset-4{margin-left:33.33333%}.col-md-offset-5{margin-left:41.66667%}.col-md-offset-6{margin-left:50%}.col-md-offset-7{margin-left:58.33333%}.col-md-offset-8{margin-left:66.66667%}.col-md-offset-9{margin-left:75%}.col-md-offset-10{margin-left:83.33333%}.col-md-offset-11{margin-left:91.66667%}}@media only screen and (min-width:1080px){.col-lg,[class^=col-lg-],[class^=col-lg-offset-]{box-sizing:border-box;-webkit-box-flex:0;-webkit-flex:0 0 auto;flex:0 0 auto;padding:0 4px}.col-lg{-webkit-box-flex:1;max-width:100%;-webkit-flex-grow:1;flex-grow:1;-webkit-flex-basis:0;flex-basis:0}.col-lg-1{max-width:8.33333%;-webkit-flex-basis:8.33333%;flex-basis:8.33333%}.col-lg-2{max-width:16.66667%;-webkit-flex-basis:16.66667%;flex-basis:16.66667%}.col-lg-3{max-width:25%;-webkit-flex-basis:25%;flex-basis:25%}.col-lg-4{max-width:33.33333%;-webkit-flex-basis:33.33333%;flex-basis:33.33333%}.col-lg-5{max-width:41.66667%;-webkit-flex-basis:41.66667%;flex-basis:41.66667%}.col-lg-6{max-width:50%;-webkit-flex-basis:50%;flex-basis:50%}.col-lg-7{max-width:58.33333%;-webkit-flex-basis:58.33333%;flex-basis:58.33333%}.col-lg-8{max-width:66.66667%;-webkit-flex-basis:66.66667%;flex-basis:66.66667%}.col-lg-9{max-width:75%;-webkit-flex-basis:75%;flex-basis:75%}.col-lg-10{max-width:83.33333%;-webkit-flex-basis:83.33333%;flex-basis:83.33333%}.col-lg-11{max-width:91.66667%;-webkit-flex-basis:91.66667%;flex-basis:91.66667%}.col-lg-12{max-width:100%;-webkit-flex-basis:100%;flex-basis:100%}.col-lg-offset-0{margin-left:0}.col-lg-offset-1{margin-left:8.33333%}.col-lg-offset-2{margin-left:16.66667%}.col-lg-offset-3{margin-left:25%}.col-lg-offset-4{margin-left:33.33333%}.col-lg-offset-5{margin-left:41.66667%}.col-lg-offset-6{margin-left:50%}.col-lg-offset-7{margin-left:58.33333%}.col-lg-offset-8{margin-left:66.66667%}.col-lg-offset-9{margin-left:75%}.col-lg-offset-10{margin-left:83.33333%}.col-lg-offset-11{margin-left:91.66667%}}table{border-collapse:separate;border-spacing:0;border:1px solid #bdbdbd;border-radius:2px;margin:0 auto}caption{font-size:1.5em;margin:6px 0 12px}tr{padding:6px}td,th{padding:10px;border-left:1px solid #bdbdbd;border-top:1px solid #bdbdbd}th{border-top:0;background:#eceff1}td:first-child,th:first-child{border-left:0}@media only screen and (max-width:768px){table{border-collapse:collapse;border:0;width:100%}thead{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%)}tr{display:block;border:1px solid #bdbdbd;border-radius:2px;margin-bottom:10px}td{display:block;border:0;border-bottom:1px solid #bdbdbd;text-align:right}td:before{content:attr(data-label);float:left;font-weight:700}td:last-child{border-bottom:0}}mark{background:#0277bd;color:#fafafa;font-size:95%;line-height:1;padding:1px}progress{display:block;vertical-align:baseline;-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:10px;border:0;border-radius:1px;margin:1px auto;background:#f5f5f5;color:#01579b}progress::-webkit-progress-value{background:#01579b;border-top-left-radius:1px;border-bottom-left-radius:1px}progress::-webkit-progress-bar{background:#f5f5f5}progress::-moz-progress-bar{background:#01579b;border-top-left-radius:1px;border-bottom-left-radius:1px}progress[value="100"]::-webkit-progress-value{border-radius:1px}progress[value="100"]::-moz-progress-bar{border-radius:1px}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}button{overflow:visible;text-transform:none}.button,[type=button],[type=reset],[type=submit],a.button,button,label.button{display:inline-block;background:rgba(207,216,220,.75);color:#212121;border:0;border-radius:2px;padding:4px 6px;margin:4px;transition:all .3s ease 0s;cursor:pointer}.button:active,.button:focus,.button:hover,[type=button]:active,[type=button]:focus,[type=button]:hover,[type=reset]:active,[type=reset]:focus,[type=reset]:hover,[type=submit]:active,[type=submit]:focus,[type=submit]:hover,a.button:active,a.button:focus,a.button:hover,button:active,button:focus,button:hover,label.button:active,label.button:focus,label.button:hover{background:#cfd8dc}.button:disabled,.button[disabled],[type=button]:disabled,[type=button][disabled],[type=reset]:disabled,[type=reset][disabled],[type=submit]:disabled,[type=submit][disabled],a.button:disabled,a.button[disabled],button:disabled,button[disabled],label.button:disabled,label.button[disabled]{cursor:not-allowed;opacity:.65}input[type=file]{display:none}select{text-transform:none}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}textarea{overflow:auto}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}details,menu{display:block}summary{display:list-item}mark.secondary{background:#f44336}mark.tertiary{background:#558b2f}mark.tag{display:inline-block;border-radius:2px;padding:2px}mark.bubble{display:inline-block;border-radius:200px;padding:3px 5px}progress.inline{display:inline-block;vertical-align:middle;width:20em}progress.secondary{color:#e53935}progress.secondary::-webkit-progress-value{background:#e53935}progress.secondary::-moz-progress-bar{background:#e53935}progress.tertiary{color:#689f38}progress.tertiary::-webkit-progress-value{background:#689f38}progress.tertiary::-moz-progress-bar{background:#689f38}progress.nano{height:2px;margin:0 auto 1px;border-radius:0}progress.nano::-webkit-progress-value{border-top-left-radius:0;border-bottom-left-radius:0}progress.nano::-moz-progress-bar{border-top-left-radius:0;border-bottom-left-radius:0}progress.nano[value="100"]::-webkit-progress-value{border-radius:0}progress.nano[value="100"]::-moz-progress-bar{border-radius:0}
\ No newline at end of file
diff --git a/flavors/v2/mini-default.scss b/flavors/v2/mini-default.scss
index 9a8dd49..f6c558d 100644
--- a/flavors/v2/mini-default.scss
+++ b/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>
diff --git a/scss/v2/mini-core/_button.scss b/scss/v2/mini-core/_button.scss
index c3cf0c4..e71910b 100644
--- a/scss/v2/mini-core/_button.scss
+++ b/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);
-	color: #212121;
-	border: 0;
-	padding: 4px 6px;
-	margin: 4px;
-	border-radius: 2px;
+	background: rgba($button-back-color, $button-back-opacity);
+	color: $button-fore-color;
+	border: $button-border-style;
+@if $button-border-radius != 0 {
+	border-radius: $button-border-radius;
+}
+@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).
-//	Firefox and IE will default to `[type="file"]` so there needs to be a solution for that (labels?).
\ No newline at end of file
+$hide-file-inputs: true !default;
+@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.
+}
+}
\ No newline at end of file