Hardcoded button testing

docs/v2/DEVLOG.md

@@ -175,3 +175,5 @@
 - Removed generic styling reset for `button`, `input`, `optgroup`, `select` and `textarea` based on the fact that the styles are already applied in the first rule `html, *`.
 - Split some fixes into generic and button-specific.
 - Moved `::-webkit-file-upload-button` fixes to the `button` module.
+- Proof-of-concept for `button` module defaults and core, file input is not styled yet (will be done via label hack).
+- *TODO* Softcode the `button` module's defaults, add extra styles, classes etc.

docs/v2/index.html

@@ -255,11 +255,14 @@
             <br>
             <h3>Buttons</h3>
             <p>Buttons are already pre-styled in <strong>mini.css</strong> to allow for consistent presentation. However, there is a lot you can do to customize them, as the pre-applied styles are mostly overrides for the default presentation styles. Pre-styled buttons and other button-like inputs can be seen below:</p>
-            <button>Normal button</button><br>
-            <input type="button" value="Input button"><br>
-            <input type="submit" value="Submit button"><br>
-            <input type="reset" value="Reset button"><br>
+            <span style="margin:3px;"></span>
+            <button>Normal button</button>
+            <input type="button" value="Input button">
+            <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>
+
           </div>
         </div>
       </div>

flavors/v2/mini-default.css

@@ -706,6 +706,27 @@ 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;
+  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 {
+    background: #cfd8dc; }
+  button:disabled, button[disabled], [type="button"]:disabled, [type="button"][disabled], [type="submit"]:disabled, [type="submit"][disabled], [type="reset"]:disabled, [type="reset"][disabled] {
+    cursor: not-allowed;
+    opacity: 0.65; }
+
+[type="file"] {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none; }
+
 /**
  * Remove the inheritance of text transform in Firefox.
  */

scss/v2/mini-core/_button.scss

@@ -9,7 +9,7 @@ button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-mo
 button, html [type="button"], [type="reset"], [type="submit"] {
   -webkit-appearance: button;
 }
-// Other fixes
+// Other fixes.
 button {
 	overflow: visible;	// Show the overflow in IE.
 	text-transform: none;	// Remove inheritance of text-transform in Edge, Firefox, and IE.
@@ -23,3 +23,30 @@ 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"]{
+	display: inline-block;
+	background: rgba(#cfd8dc, 0.75);
+	color: #212121;
+	border: 0;
+	padding: 4px 6px;
+	margin: 4px;
+	border-radius: 2px;
+	transition: all 0.3s ease 0s;
+	cursor: pointer;
+	&:hover, &:active, &:focus{
+		background: rgba(#cfd8dc, 1);
+	}
+	&:disabled, &[disabled] {
+		cursor: not-allowed;
+		opacity: 0.65;
+	}
+}
+// 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?).
+[type="file"] {
+	-webkit-appearance: none;
+	   -moz-appearance: none;
+	        appearance: none;
+}