Button styling update for consistency

dist/mini-default.css

@@ -655,6 +655,7 @@ input:not([type]), [type="text"], [type="email"], [type="number"], [type="search
     border-color: #bdbdbd; }
 
 ::-webkit-input-placeholder {
+  opacity: 1;
   color: #616161; }
 
 ::-moz-placeholder {
@@ -662,6 +663,7 @@ input:not([type]), [type="text"], [type="email"], [type="number"], [type="search
   color: #616161; }
 
 ::-ms-placeholder {
+  opacity: 1;
   color: #616161; }
 
 button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner {
@@ -677,19 +679,19 @@ button {
 
 button, [type="button"], [type="submit"], [type="reset"], a.button, label.button, .button {
   display: inline-block;
-  background: rgba(207, 216, 220, 0.75);
+  background: rgba(207, 207, 207, 0.75);
   color: #212121;
   border: 0;
   border-radius: 2px;
-  padding: 4px 6px;
+  padding: 8px 12px;
-  margin: 4px;
+  margin: 8px;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.15);
   text-decoration: none;
   -webkit-transition: all 0.3s ease 0s;
   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: #cfcfcf;
     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;
@@ -711,8 +713,10 @@ input[type="file"] {
   display: -webkit-box;
   display: -webkit-flex;
   display: flex;
-  border: 1px solid #bdbdbd;
+  border: 1px solid #9e9e9e;
-  border-radius: 2px; }
+  border-radius: 2px;
+  margin: 8px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 2px 3px rgba(0, 0, 0, 0.15); }
   .button-group button, .button-group [type="button"], .button-group [type="submit"], .button-group [type="reset"], .button-group a.button, .button-group label.button, .button-group .button {
     margin: 0;
     -webkit-box-flex: 1;
@@ -723,9 +727,10 @@ input[type="file"] {
     flex-basis: 0;
     text-align: center;
     border: 0;
-    border-radius: 0; }
+    border-radius: 0;
+    box-shadow: none; }
     .button-group button + button, .button-group button + [type="button"], .button-group button + [type="submit"], .button-group button + [type="reset"], .button-group button + a.button, .button-group button + label.button, .button-group button + .button, .button-group [type="button"] + button, .button-group [type="button"] + [type="button"], .button-group [type="button"] + [type="submit"], .button-group [type="button"] + [type="reset"], .button-group [type="button"] + a.button, .button-group [type="button"] + label.button, .button-group [type="button"] + .button, .button-group [type="submit"] + button, .button-group [type="submit"] + [type="button"], .button-group [type="submit"] + [type="submit"], .button-group [type="submit"] + [type="reset"], .button-group [type="submit"] + a.button, .button-group [type="submit"] + label.button, .button-group [type="submit"] + .button, .button-group [type="reset"] + button, .button-group [type="reset"] + [type="button"], .button-group [type="reset"] + [type="submit"], .button-group [type="reset"] + [type="reset"], .button-group [type="reset"] + a.button, .button-group [type="reset"] + label.button, .button-group [type="reset"] + .button, .button-group a.button + button, .button-group a.button + [type="button"], .button-group a.button + [type="submit"], .button-group a.button + [type="reset"], .button-group a.button + a.button, .button-group a.button + label.button, .button-group a.button + .button, .button-group label.button + button, .button-group label.button + [type="button"], .button-group label.button + [type="submit"], .button-group label.button + [type="reset"], .button-group label.button + a.button, .button-group label.button + label.button, .button-group label.button + .button, .button-group .button + button, .button-group .button + [type="button"], .button-group .button + [type="submit"], .button-group .button + [type="reset"], .button-group .button + a.button, .button-group .button + label.button, .button-group .button + .button {
-      border-left: 1px solid #bdbdbd; }
+      border-left: 1px solid #9e9e9e; }
 
 @media (max-width: 767px) {
   .button-group {
@@ -734,7 +739,7 @@ input[type="file"] {
     flex-direction: column; }
     .button-group button + button, .button-group button + [type="button"], .button-group button + [type="submit"], .button-group button + [type="reset"], .button-group button + a.button, .button-group button + label.button, .button-group button + .button, .button-group [type="button"] + button, .button-group [type="button"] + [type="button"], .button-group [type="button"] + [type="submit"], .button-group [type="button"] + [type="reset"], .button-group [type="button"] + a.button, .button-group [type="button"] + label.button, .button-group [type="button"] + .button, .button-group [type="submit"] + button, .button-group [type="submit"] + [type="button"], .button-group [type="submit"] + [type="submit"], .button-group [type="submit"] + [type="reset"], .button-group [type="submit"] + a.button, .button-group [type="submit"] + label.button, .button-group [type="submit"] + .button, .button-group [type="reset"] + button, .button-group [type="reset"] + [type="button"], .button-group [type="reset"] + [type="submit"], .button-group [type="reset"] + [type="reset"], .button-group [type="reset"] + a.button, .button-group [type="reset"] + label.button, .button-group [type="reset"] + .button, .button-group a.button + button, .button-group a.button + [type="button"], .button-group a.button + [type="submit"], .button-group a.button + [type="reset"], .button-group a.button + a.button, .button-group a.button + label.button, .button-group a.button + .button, .button-group label.button + button, .button-group label.button + [type="button"], .button-group label.button + [type="submit"], .button-group label.button + [type="reset"], .button-group label.button + a.button, .button-group label.button + label.button, .button-group label.button + .button, .button-group .button + button, .button-group .button + [type="button"], .button-group .button + [type="submit"], .button-group .button + [type="reset"], .button-group .button + a.button, .button-group .button + label.button, .button-group .button + .button {
       border: 0;
-      border-top: 1px solid #bdbdbd; } }
+      border-top: 1px solid #9e9e9e; } }
 [type="checkbox"], [type="radio"] {
   height: 1px;
   width: 1px;
@@ -1309,13 +1314,13 @@ ul.breadcrumbs {
 
 button.primary, [type="button"].primary, [type="submit"].primary,
 [type="reset"].primary, .button.primary {
-  background: #1565c0;
+  background: rgba(2, 119, 189, 0.9);
   color: #f5f5f5; }
   button.primary:hover, button.primary:active, button.primary:focus, [type="button"].primary:hover, [type="button"].primary:active, [type="button"].primary:focus, [type="submit"].primary:hover, [type="submit"].primary:active, [type="submit"].primary:focus,
   [type="reset"].primary:hover,
   [type="reset"].primary:active,
   [type="reset"].primary:focus, .button.primary:hover, .button.primary:active, .button.primary:focus {
-    background: rgba(21, 101, 192, 0.85); }
+    background: #0277bd; }
 
 button.secondary, [type="button"].secondary, [type="submit"].secondary,
 [type="reset"].secondary, .button.secondary {
@@ -1329,24 +1334,35 @@ button.secondary, [type="button"].secondary, [type="submit"].secondary,
 
 button.tertiary, [type="button"].tertiary, [type="submit"].tertiary,
 [type="reset"].tertiary, .button.tertiary {
-  background: rgba(139, 195, 74, 0.8); }
+  background: rgba(85, 139, 47, 0.85);
+  color: #f5f5f5; }
   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; }
+    background: #558b2f; }
+
+button.inverse, [type="button"].inverse, [type="submit"].inverse,
+[type="reset"].inverse, .button.inverse {
+  background: #212121;
+  color: #fafafa; }
+  button.inverse:hover, button.inverse:active, button.inverse:focus, [type="button"].inverse:hover, [type="button"].inverse:active, [type="button"].inverse:focus, [type="submit"].inverse:hover, [type="submit"].inverse:active, [type="submit"].inverse:focus,
+  [type="reset"].inverse:hover,
+  [type="reset"].inverse:active,
+  [type="reset"].inverse:focus, .button.inverse:hover, .button.inverse:active, .button.inverse:focus {
+    background: rgba(33, 33, 33, 0.9); }
 
 button.small, [type="button"].small, [type="submit"].small,
 [type="reset"].small, .button.small {
   border-radius: 1px;
-  padding: 1px 2px;
+  padding: 4px 6px;
-  margin: 2px; }
+  margin: 6px 8px; }
 
 button.large, [type="button"].large, [type="submit"].large,
 [type="reset"].large, .button.large {
   border-radius: 4px;
-  padding: 10px 15px;
+  padding: 12px 18px;
-  margin: 7px; }
+  margin: 10px 8px; }
 
 @media (min-width: 480px) {
   .card.large {

docs/v2/DEVLOG.md

@@ -594,3 +594,9 @@
 - Updated color definitions for almost all the `input_control` `form` elements.
 - Changed the `placeholder` rules a little bit to work properly for all elements now.
 - Tested a few things in `playground` about `input_control`.
+- Changed a little it of the colors used for `button` components. The `background` color used is custom, not from the material colors of Google Material, as I had to find a middle ground. The only discrepancy so far.
+- Added customizable `$button-group-margin` and `$button-group-box-shadow` for `button-group` to make it more well-defined.
+- Tweaked size variants for `button`s.
+- Added `inverse` `button` style to the list of `button` styles.
+- Removed the `custom` `button` demo that was still lingering in the current flavor.
+- Updated colors and stuff for `button` color variants. They should be consistent now.

docs/v2/playground.html

@@ -75,6 +75,10 @@
     </div>
     <!-- Insert your page content here-->
     <main><div class="container" style="padding-top: 20px;">
+        <button class="small">small</button>
+        <button>normal</button>
+        <button class="large">large</button>
+        <button class="inverse">button</button>
         <p>Use rows and columns for normal alignment, use input-groups in rows without columns for unaligned but just vertical forms or predesigned forms etc.</p>
           <form>
             <fieldset>

src/flavors/mini-default.scss

@@ -209,30 +209,33 @@ $input-disabled-opacity:		0.75;											// Opacity for disabled input
 $input-readonly-back-color:		#e0e0e0;										// Background color for readonly input
 $input-readonly-border-color:	#bdbdbd;										// Border color for readonly input
 $input-placeholder-fore-color:	#616161;										// Text color for input placeholder
-$button-back-color:				#cfd8dc;										// Back color for button elements
+$button-back-color:				#cfcfcf;										// 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
 																				// on hover or focus
-$button-fore-color:				#212121;										// Text color for button elements
+$button-fore-color:				$fore-color;									// 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-padding:				8px 12px;										// Padding for button elements
-$button-margin:					4px;											// Margin for button elements
+$button-margin:					8px;											// Margin for button elements
 $button-box-shadow:																// Box shadow for buttons
 	0 1px 3px rgba(0,0,0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.15);
 $button-disabled-opacity:		0.65;											// Disabled button elements opacity
 $button-class-name:				'button';										// Class for custom button elements
 $button-group-name:				'button-group';									// Class for button groups
-$button-group-border-style:		1px solid #bdbdbd;								// Border style for button groups
+$button-group-border-style:		1px solid #9e9e9e;								// Border style for button groups
+$button-group-margin:			$button-margin;									// Margin for button groups
+$button-group-box-shadow:														// Box shadow for button groups
+	0 2px 4px rgba(0,0,0, 0.1), 0 2px 3px rgba(0, 0, 0, 0.15);			
 $button-group-mobile-breakpoint:767px;											// Breakpoint for button group mobile view
 $hide-file-inputs:				true;											// Should a style be added that makes all
 																				// <input>s of type `file` hidden?
 																				// (`true`/`false`) [1]
 $button-variant1-name:			'primary';										// Class name for button variant 1
-$button-variant1-back-color:	#1565c0;										// Background color for button variant 1
+$button-variant1-back-color:	#0277bd;										// Background color for button variant 1
-$button-variant1-back-opacity:	1;												// Background opacity for button variant 1
+$button-variant1-back-opacity:	0.9;											// Background opacity for button variant 1
 $button-variant1-hover-back-opacity:											// Background opacity for button variant 1
-								0.85;											// on hover or focus
+								1;												// 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
@@ -240,31 +243,28 @@ $button-variant2-back-opacity:	0.85;											// Background opacity for button
 $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-name:			'tertiary';										// Class name for button variant 3
-$button-variant3-back-color:	#8bc34a;										// Background color for button variant 2
+$button-variant3-back-color:	#558b2f;										// Background color for button variant 3
-$button-variant3-back-opacity:	0.8;											// Background opacity for button variant 2
+$button-variant3-back-opacity:	0.85;											// Background opacity for button variant 3
-$button-variant3-hover-back-opacity:											// Background opacity for button variant 2
+$button-variant3-hover-back-opacity:											// Background opacity for button variant 3
 								1;												// on hover or focus
+$button-variant3-fore-color:	$back-color;									// Text color for button variant 3
+$button-variant4-name:			'inverse';										// Class name for button variant 4
+$button-variant4-back-color:	$fore-color;									// Background color for button variant 4
+$button-variant4-back-opacity:	1;												// Background opacity for button variant 4
+$button-variant4-hover-back-opacity:											// Background opacity for button variant 4
+								0.9;											// on hover or focus
+$button-variant4-fore-color:	#fafafa;										// Text color for button variant 4
 $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-padding:			4px 6px;										// Padding for button style 1
-$button-style1-margin:			2px;											// Margin for button style 1
+$button-style1-margin:			6px 8px;										// 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-padding:			12px 18px;										// Padding for button style 2
-$button-style2-margin:			7px;											// Margin for button style 2
+$button-style2-margin:			10px 8px;										// 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
 $checkbox-size:					17px;											// Size for checkbox/radio [2]
 $checkbox-back-color:			$input-back-color;								// Background clor for checkbox/radio
 $checkbox-fore-color:			$input-fore-color;								// Text/mark color for checkbox/radio
@@ -490,16 +490,13 @@ $center-block-name:				'center-block';									// Class name for center block
 @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);
+	$button-variant3-back-opacity, $button-variant3-hover-back-opacity, $button-variant3-fore-color);
+@include make-button-alt-color ($button-variant4-name, $button-variant4-back-color, 
+	$button-variant4-back-opacity, $button-variant4-hover-back-opacity, $button-variant4-fore-color);
 @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 cards
 @include make-card-alt-size ($card-size1-name, $card-size1-width);
 @include make-card-alt-size ($card-size2-name, $card-size2-width);

src/mini/_input_control.scss

@@ -205,6 +205,12 @@ $hide-file-inputs: true !default;
 	@if $button-border-radius != 0 {
 		border-radius: $button-border-radius;
 	}
+	@if $button-group-margin != 0 {
+		margin: $button-group-margin;
+	}
+	@if $button-group-box-shadow != none {
+			box-shadow: $button-group-box-shadow;
+		}
 	button, [type="button"], [type="submit"], [type="reset"], a.#{$button-class-name}, label.#{$button-class-name}, .#{$button-class-name} {
 		margin: 0;
 		// Old syntax
@@ -220,11 +226,14 @@ $hide-file-inputs: true !default;
 		@if $button-border-radius != 0 {
 			border-radius: 0;
 		}
-		@if $button-group-border-style !=0 {
+		@if $button-group-border-style != 0 {
 			+ button, + [type="button"], + [type="submit"], + [type="reset"], + a.#{$button-class-name}, + label.#{$button-class-name}, + .#{$button-class-name} {
 				border-left: $button-group-border-style;
 			}
 		}
+		@if $button-box-shadow != none {
+			box-shadow: none;
+		}
 	}
 }
 // Responsiveness for button groups