Button module initial commit

docs/v2/DEVLOG.md

@@ -164,3 +164,14 @@
 - Added demo table to page, tested.
 - Minor consistency reorganization in table module.
 - Updated demo page, deployed live.
+
+## 20161023
+
+- Removed `table-layout: fixed;` from tables.
+- Added `mini-core/button` and started testing button styling.
+- Removed the reset for `:-moz-focusring` (`outline: 1px dotted ButtonText`) for buttons as it was unnecessary and didn't look great.
+- Moved fix for `::-moz-focus-inner` to the `button` module.
+- Moved generic fix for Android, iOS and Safari to `button` module.
+- 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.

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 20161021 -->
-    <link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/c9d597fac2ede99d97850a5c1f150714e1cacf0e/flavors/v2/mini-default.min.css">
+    <!-- <link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/c9d597fac2ede99d97850a5c1f150714e1cacf0e/flavors/v2/mini-default.min.css"> -->
     <link rel="stylesheet" href="../../flavors/v2/mini-default.css">   
     <style>
       #top-logo {
@@ -253,6 +253,13 @@
               </tbody>
             </table>
             <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>
+            <input type="file" value="File button"><br>
           </div>
         </div>
       </div>

flavors/v2/mini-default.css

@@ -27,6 +27,9 @@ audio, video {
 svg:not(:root) {
   overflow: hidden; }
 
+input {
+  overflow: visible; }
+
 h1, h2, h3, h4, h5, h6 {
   line-height: 1.2em;
   margin: 0.7em 8px;
@@ -591,8 +594,7 @@ table {
   border-spacing: 0;
   border: 1px solid #bdbdbd;
   border-radius: 2px;
-  margin: 0 auto;
+  margin: 0 auto; }
-  table-layout: fixed; }
 
 caption {
   font-size: 1.5em;
@@ -685,72 +687,30 @@ progress {
   progress[value="100"]::-moz-progress-bar {
     border-radius: 1px; }
 
-/**
+button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner {
- * 1. Change the font styles in all browsers (opinionated).
- * 2. Remove the margin in Firefox and Safari.
- */
-button,
-input,
-optgroup,
-select,
-textarea {
-  font-family: sans-serif;
-  /* 1 */
-  font-size: 100%;
-  /* 1 */
-  line-height: 1.15;
-  /* 1 */
-  margin: 0;
-  /* 2 */ }
-
-/**
- * Show the overflow in IE.
- * 1. Show the overflow in Edge.
- */
-button,
-input {
-  /* 1 */
-  overflow: visible; }
-
-/**
- * Remove the inheritance of text transform in Edge, Firefox, and IE.
- * 1. Remove the inheritance of text transform in Firefox.
- */
-button,
-select {
-  /* 1 */
-  text-transform: none; }
-
-/**
- * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
- *    controls in Android 4.
- * 2. Correct the inability to style clickable types in iOS and Safari.
- */
-button,
-html [type="button"],
-[type="reset"],
-[type="submit"] {
-  -webkit-appearance: button;
-  /* 2 */ }
-
-/**
- * Remove the inner border and padding in Firefox.
- */
-button::-moz-focus-inner,
-[type="button"]::-moz-focus-inner,
-[type="reset"]::-moz-focus-inner,
-[type="submit"]::-moz-focus-inner {
   border-style: none;
   padding: 0; }
 
+button, html [type="button"], [type="reset"], [type="submit"] {
+  -webkit-appearance: button; }
+
+button {
+  overflow: visible;
+  text-transform: none; }
+
 /**
- * Restore the focus styles unset by the previous rule.
+ * 1. Correct the inability to style clickable types in iOS and Safari.
+ * 2. Change font properties to `inherit` in Safari.
  */
-button:-moz-focusring,
+::-webkit-file-upload-button {
-[type="button"]:-moz-focusring,
+  -webkit-appearance: button;
-[type="reset"]:-moz-focusring,
+  font: inherit; }
-[type="submit"]:-moz-focusring {
+
-  outline: 1px dotted ButtonText; }
+/**
+ * Remove the inheritance of text transform in Firefox.
+ */
+select {
+  text-transform: none; }
 
 /**
  * Change the border, margin, and padding in all browsers (opinionated).
@@ -810,16 +770,6 @@ textarea {
 [type="search"]::-webkit-search-decoration {
   -webkit-appearance: 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;
-  /* 1 */
-  font: inherit;
-  /* 2 */ }
-
 /*
  * Add the correct display in IE 9-.
  * 1. Add the correct display in Edge, IE, and Firefox.

scss/v2/_core.scss

@@ -44,11 +44,16 @@ audio, video {
   display: inline-block;
 }
 
-// Hide overflow in IE
+// Hide overflow in IE.
 svg:not(:root) {
   overflow: hidden;
 }
 
+// Show overflow in IE.
+input { 
+  overflow: visible;
+}
+
 // Fix display in older versions of Android.
 $include-dfn-fix: true !default;
 @if $include-dfn-fix {
@@ -343,81 +348,18 @@ a{
 @import 'mini-core/table';
 @import 'mini-core/contextual';
 @import 'mini-core/progress';
+@import 'mini-core/button';
 
-// TODO: Move to forms and buttons respectively
+// TODO: Move to forms.
 
 /**
- * 1. Change the font styles in all browsers (opinionated).
+ * Remove the inheritance of text transform in Firefox.
- * 2. Remove the margin in Firefox and Safari.
  */
 
-button,
+select { 
-input,
-optgroup,
-select,
-textarea {
-  font-family: sans-serif; /* 1 */
-  font-size: 100%; /* 1 */
-  line-height: 1.15; /* 1 */
-  margin: 0; /* 2 */
-}
-
-/**
- * Show the overflow in IE.
- * 1. Show the overflow in Edge.
- */
-
-button,
-input { /* 1 */
-  overflow: visible;
-}
-
-/**
- * Remove the inheritance of text transform in Edge, Firefox, and IE.
- * 1. Remove the inheritance of text transform in Firefox.
- */
-
-button,
-select { /* 1 */
   text-transform: none;
 }
 
-/**
- * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
- *    controls in Android 4.
- * 2. Correct the inability to style clickable types in iOS and Safari.
- */
-
-button,
-html [type="button"], /* 1 */
-[type="reset"],
-[type="submit"] {
-  -webkit-appearance: button; /* 2 */
-}
-
-/**
- * Remove the inner border and padding in Firefox.
- */
-
-button::-moz-focus-inner,
-[type="button"]::-moz-focus-inner,
-[type="reset"]::-moz-focus-inner,
-[type="submit"]::-moz-focus-inner {
-  border-style: none;
-  padding: 0;
-}
-
-/**
- * Restore the focus styles unset by the previous rule.
- */
-
-button:-moz-focusring,
-[type="button"]:-moz-focusring,
-[type="reset"]:-moz-focusring,
-[type="submit"]:-moz-focusring {
-  outline: 1px dotted ButtonText;
-}
-
 /**
  * Change the border, margin, and padding in all browsers (opinionated).
  */
@@ -448,8 +390,6 @@ legend {
  * Remove the default vertical scrollbar in IE.
  */
 
-// TODO: Move to forms
-
 textarea {
   overflow: auto;
 }
@@ -482,16 +422,6 @@ textarea {
   -webkit-appearance: 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; /* 1 */
-  font: inherit; /* 2 */
-}
-
 /*
  * Add the correct display in IE 9-.
  * 1. Add the correct display in Edge, IE, and Firefox.

scss/v2/mini-core/_button.scss

@@ -0,0 +1,25 @@
+// Definitions for the button and button-like elements.
+// Different elements are styled based on the same set of rules.
+// Reset for Firefox focusing on button elements.
+button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+// Fixes for Android 4, iOS and Safari.
+button, html [type="button"], [type="reset"], [type="submit"] {
+  -webkit-appearance: button;
+}
+// Other fixes
+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
+}

scss/v2/mini-core/_table.scss

@@ -7,7 +7,6 @@ table {
 	border: $table-border-style;
 	border-radius: $table-border-radius;
 	margin: $table-margin;
-	table-layout: fixed;
 }
 caption {
 	font-size: $table-caption-font-size;