Buttons: Playing around with shadows

Author: sfrisk

scss/atoms/buttons/_buttons.scss

@@ -11,6 +11,7 @@
 .btn {
 	border: 1px solid transparent;
 	cursor: pointer;
+	letter-spacing: map-get($ui-btn, letter-spacing);
 	font-family: $ui-btn-font;
 	font-weight: map-get($ui-btn, font-weight);
 	margin: map-get($ui-btn, margin);

scss/atoms/buttons/_mixins.scss

@@ -2,10 +2,17 @@
 	color: map-get($btn-colors, color);
 	background: map-deep-get($btn-colors, "background", "base");
 	border-color: map-get($btn-colors, border);
+	@if (map-get($btn-colors, shadow) == true) {
+		transition: map-get($ui-btn-shadows, transition);
+		box-shadow: map-get($ui-btn-shadows, box-shadow-base);
+	}
 
 	&:active,
 	&.active {
 		@include btn-active($btn-colors);
+		@if (map-get($btn-colors, shadow) == true) {
+			box-shadow: map-get($ui-btn-shadows, box-shadow-active);
+		}
 	}
 
 	&:focus,
@@ -21,6 +28,9 @@
 	&:disabled,
 	&.disabled {
 		@include	btn-disabled($btn-colors);
+		@if (map-get($btn-colors, shadow) == true) {
+			box-shadow: map-get($ui-btn-shadows, box-shadow-disabled);
+		}
 	}
 }
 

scss/variables/z_buttons.js

@@ -9,12 +9,23 @@
 }( this, function( chassis ) {
 
 chassis.uiButton = {
+	"ui-btn-shadows": {
+		name: "Button Shadow Styles",
+		value: {
+			"transition": "box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1)",
+			"box-shadow-base": "0 2px 5px 0 rgba(0,0,0,.26)",
+			"box-shadow-active": "0 8px 15px 0 rgba(0,0,0,.2)",
+			"box-shadow-disabled": "0 0 0 rgba(0,0,0,0)"
+		}
+	},
+
 	"ui-btn": {
 		name: "Generic Button Styles",
 		value: {
 		 "font-weight": 500,
 		 "margin": ".25em",
-		 "text-transform": "uppercase"
+		 "text-transform": "uppercase",
+		 "letter-spacing": "1px"
 		}
 	},
 	"ui-btn-font": {
@@ -26,23 +37,26 @@ chassis.uiButton = {
 		value: {
 			"color": "#212121",
 			"background": "$default",
-			"border": "transparent"
+			"border": "transparent",
+			"shadow": "false"
 		}
 	},
 	"ui-btn-primary": {
 		name: "Primary Button",
 		value: {
 			"color": "#ffffff",
 			"background": "$primary",
-			"border": "transparent"
+			"border": "transparent",
+			"shadow": "true"
 		}
 	},
 	"ui-btn-success": {
 		name: "Success Button",
 		value: {
 			"color": "#ffffff",
 			"background": "$success",
-			"border": "transparent"
+			"border": "transparent",
+			"shadow": "true"
 		}
 	},
 
@@ -51,23 +65,26 @@ chassis.uiButton = {
 		value: {
 			"color": "#ffffff",
 			"background": "$info",
-			"border": "transparent"
+			"border": "transparent",
+			"shadow": "true"
 		}
 	},
 	"ui-btn-warning": {
 		name: "Warning Button",
 		value: {
 			"color": "#ffffff",
 			"background": "$warning",
-			"border": "transparent"
+			"border": "transparent",
+			"shadow": "true"
 		}
 	},
 	"ui-btn-danger": {
 		name: "Danger Button",
 		value: {
 			"color": "#ffffff",
 			"background": "$error",
-			"border": "transparent"
+			"border": "transparent",
+			"shadow": "true"
 		}
 	},
 	"ui-btn-disabled": {