Finished button module, added alternate styles etc.

docs/v2/DEVLOG.md

@@ -192,4 +192,8 @@
 - Added `$hide-file-inputs` flag to decide the styling of `file` `<input>` elements.
 - Softcoded changes and optimized some things in the `button` module.
 - Updated demo page.
-- Added and optimized `make-button-alt-color` mixin, created primary color variant.
+- Added and optimized `make-button-alt-color` mixin, created `primary` color variant.
+- Added `secondary` and `tertiary` button variants using the mixin. Tested colors.
+- Added button overrides for links styled as buttons for `text-decoration: underline` and `&:hover { opacity: 0.75}`. Should now not give away the fact that it's a link.
+- Added `make-button-alt-style` mixin, created `small` and `large` style variants.
+- Added and tested an entirely custom button style that does something very different compared to the original variants. Variables and mixins included in the flavor file, but are commented out, as they are only used as a demonstration. *TODO* Add a blog post later down the line where I design a full flavor using the files etc., showcasing things like these.

docs/v2/index.html

@@ -260,6 +260,7 @@
             <input type="button" value="Input button">
             <input type="submit" value="Submit button">
             <input type="reset" value="Reset button">
+            <a href="#" class="button">Link button</a>
             <button disabled>Disabled button</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><br>
@@ -269,7 +270,7 @@
             <input type="button" value="Secondary input button" class="secondary">
             <input type="reset" value="Tertiary reset button" class="tertiary">
             <input type="submit" value="Large submit button" class="large">
-            <button disabled class="small primary">Small primary disabled button</button><br>
+            <label disabled class="button small primary">Small primary disabled label button</label><br>
           </div>
         </div>
       </div>

flavors/v2/mini-default.css

@@ -593,10 +593,12 @@ button, [type="button"], [type="submit"], [type="reset"], a.button, label.button
   border-radius: 2px;
   padding: 4px 6px;
   margin: 4px;
+  text-decoration: none;
   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, 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; }
+    background: #cfd8dc;
+    opacity: 1; }
   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; }
@@ -692,6 +694,37 @@ button.primary, [type="button"].primary, [type="submit"].primary,
   [type="reset"].primary:focus, .button.primary:hover, .button.primary:active, .button.primary:focus {
     background: rgba(21, 101, 192, 0.85); }
 
+button.secondary, [type="button"].secondary, [type="submit"].secondary,
+[type="reset"].secondary, .button.secondary {
+  background: rgba(198, 40, 40, 0.85);
+  color: #fafafa; }
+  button.secondary:hover, button.secondary:active, button.secondary:focus, [type="button"].secondary:hover, [type="button"].secondary:active, [type="button"].secondary:focus, [type="submit"].secondary:hover, [type="submit"].secondary:active, [type="submit"].secondary:focus,
+  [type="reset"].secondary:hover,
+  [type="reset"].secondary:active,
+  [type="reset"].secondary:focus, .button.secondary:hover, .button.secondary:active, .button.secondary:focus {
+    background: #c62828; }
+
+button.tertiary, [type="button"].tertiary, [type="submit"].tertiary,
+[type="reset"].tertiary, .button.tertiary {
+  background: rgba(139, 195, 74, 0.8); }
+  button.tertiary:hover, button.tertiary:active, button.tertiary:focus, [type="button"].tertiary:hover, [type="button"].tertiary:active, [type="button"].tertiary:focus, [type="submit"].tertiary:hover, [type="submit"].tertiary:active, [type="submit"].tertiary:focus,
+  [type="reset"].tertiary:hover,
+  [type="reset"].tertiary:active,
+  [type="reset"].tertiary:focus, .button.tertiary:hover, .button.tertiary:active, .button.tertiary:focus {
+    background: #8bc34a; }
+
+button.small, [type="button"].small, [type="submit"].small,
+[type="reset"].small, .button.small {
+  border-radius: 1px;
+  padding: 1px 2px;
+  margin: 2px; }
+
+button.large, [type="button"].large, [type="submit"].large,
+[type="reset"].large, .button.large {
+  border-radius: 4px;
+  padding: 10px 15px;
+  margin: 7px; }
+
 mark.secondary {
   background: #f44336; }
 

flavors/v2/mini-default.scss

@@ -162,6 +162,37 @@ $button-variant1-back-opacity:	1;												// Background opacity for button va
 $button-variant1-hover-back-opacity:											// Background opacity for button variant 1
 								0.85;											// on hover or focus
 $button-variant1-fore-color:	$back-color;									// Text color for button variant 1
+$button-variant2-name:			'secondary';									// Class name for button variant 2
+$button-variant2-back-color:	#c62828;										// Background color for button variant 2
+$button-variant2-back-opacity:	0.85;											// Background opacity for button variant 2
+$button-variant2-hover-back-opacity:											// Background opacity for button variant 2
+								1;												// on hover or focus
+$button-variant2-fore-color:	$back-color;									// Text color for button variant 2
+$button-variant3-name:			'tertiary';										// Class name for button variant 2
+$button-variant3-back-color:	#8bc34a;										// Background color for button variant 2
+$button-variant3-back-opacity:	0.8;											// Background opacity for button variant 2
+$button-variant3-hover-back-opacity:											// Background opacity for button variant 2
+								1;												// on hover or focus
+$button-style1-name:			'small';										// Class name for button style 1
+$button-style1-border-style:	0;												// Border style for button style 1
+$button-style1-border-radius:	1px;											// Border radius for button style 1
+$button-style1-padding:			1px 2px;										// Padding for button style 1
+$button-style1-margin:			2px;											// Margin for button style 1
+$button-style2-name:			'large';										// Class name for button style 2
+$button-style2-border-style:	0;												// Border style for button style 2
+$button-style2-border-radius:	4px;											// Border radius for button style 2
+$button-style2-padding:			10px 15px;										// Padding for button style 2
+$button-style2-margin:			7px;											// Margin for button style 2
+// Custom button style demonstration (not enabled)
+//$button-custom-name:			'custom';										// Custom button class name
+//$button-custom-back-color:	#ffb300;										// Custom button back color
+//$button-custom-back-opacity:	0;												// Custom button back opacity
+//$button-custom-hover-back-opacity:											// Custom button back opacity
+//								1;												// on hover or focus
+//$button-custom-border-style:	3px solid #ffb300;								// Custom button border style
+//$button-custom-border-radius:	0;												// Custom button border radius
+//$button-custom-padding:		6px 8px;										// Custom button padding
+//$button-custom-margin:		4px;											// Custom button margin
 // 	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
@@ -209,6 +240,19 @@ $progress-style1-border-radius:	0;												// Border radius for <progress> st
 //	Use mixins for button elements
 @include make-button-alt-color ($button-variant1-name, $button-variant1-back-color, 
 	$button-variant1-back-opacity, $button-variant1-hover-back-opacity, $button-variant1-fore-color);
+@include make-button-alt-color ($button-variant2-name, $button-variant2-back-color, 
+	$button-variant2-back-opacity, $button-variant2-hover-back-opacity, $button-variant2-fore-color);
+@include make-button-alt-color ($button-variant3-name, $button-variant3-back-color, 
+	$button-variant3-back-opacity, $button-variant3-hover-back-opacity);
+@include make-button-alt-style ($button-style1-name, $button-style1-border-style,
+	$button-style1-border-radius, $button-style1-padding, $button-style1-margin);
+@include make-button-alt-style ($button-style2-name, $button-style2-border-style,
+	$button-style2-border-radius, $button-style2-padding, $button-style2-margin);
+// Custom button style demonstration (not enabled)
+//@include make-button-alt-color ($button-custom-name, $button-custom-back-color, 
+//	$button-custom-back-opacity, $button-custom-hover-back-opacity);
+//@include make-button-alt-style ($button-custom-name, $button-custom-border-style,
+//	$button-custom-border-radius, $button-custom-padding, $button-custom-margin);
 //	Use mixins for contextual background elements
 @include make-mark-alt-color($mark-variant1-name, $mark-variant1-back-color);
 @include make-mark-alt-color($mark-variant2-name, $mark-variant2-back-color);

scss/v2/mini-core/_button.scss

@@ -28,16 +28,22 @@ button, [type="button"], [type="submit"], [type="reset"], a.#{$button-class-name
 }
 @if $button-margin != 0 {
 	margin: $button-margin;
+}
+@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{
-		background: rgba($button-back-color, $button-hover-back-opacity);
-	}
-	&:disabled, &[disabled] {
-		cursor: not-allowed;
-		opacity: $button-disabled-opacity;
-	}
+&: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.
+	opacity: 1;
+}
+}
+&:disabled, &[disabled] {
+	cursor: not-allowed;
+	opacity: $button-disabled-opacity;
+}
 }
 $hide-file-inputs: true !default;
 @if $hide-file-inputs {
@@ -70,8 +76,37 @@ button.#{$button-alt-name}, [type="button"].#{$button-alt-name}, [type="submit"]
 @if $button-alt-fore-color != $button-fore-color {
 	color: $button-alt-fore-color;
 }
-	&:hover, &:active, &:focus{
-		background: rgba($button-alt-back-color, $button-alt-hover-back-opacity);
-	}
+&:hover, &:active, &:focus{
+	background: rgba($button-alt-back-color, $button-alt-hover-back-opacity);
+}
+}
+}
+// Mixin for alternate button styles (button color variants).
+// Variables:
+// - $button-alt-name : The name of the class used for the alternate button style.
+// - $button-alt-border-style : The border style of the alternate button style.
+// - $button-alt-border-radius : Border radius of the alternate button style.
+// - $button-alt-padding : Padding of the alternate button style.
+// - $button-alt-margin : Margin of the alternate button style.
+// Notes:
+// Due to something like `.button.small` being a higher specificity than `a.small` or `a`, no extra rules are
+// required for such elements. However rules for the normal button elements are applied in order to not require the
+// 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}, 
+[type="reset"].#{$button-alt-name}, .#{$button-class-name}.#{$button-alt-name} {
+@if $button-alt-border-style != $button-border-style {
+	border: $button-alt-border-style;
+}
+@if $button-alt-border-radius != $button-border-radius {
+	border-radius: $button-alt-border-radius;
+}
+@if $button-alt-padding != $button-padding {
+	padding: $button-alt-padding;
+}
+@if $button-alt-margin != $button-margin {
+	margin: $button-alt-margin;
+}
 }
 }