Modals: Removed cascading + new classes

Added new classes for buttons

Author: nashvail

demos/modals/modals.html

@@ -13,15 +13,16 @@
 	<section class="main-content">
 		<div class="modal">
 			<div class="modal-header">
-				<h4>Modal title</h4>
+				<span class="modal-title">Modal title</span>
 			</div>
 			<div class="modal-body">
-				Body	
+				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sed sapien quam. Sed dapibus est id enim facilisis, at posuere turpis adipiscing. Quisque sit amet dui dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sed sapien quam. Sed dapibus est id enim facilisis, at posuere turpis adipiscing. Quisque sit amet dui dui.
+
 			</div>
 			<div class="modal-footer">
-				<button class="btn btn-default btn-md">Default</button>
-				<button class="btn btn-primary btn-md">Primary</button>
-				<button class="btn btn-success btn-md">Success</button>
+				<button class="btn btn-default btn-lg modal-btn-right">Default</button>
+				<button class="btn btn-primary btn-lg modal-btn-left">Primary</button>
+				<button class="btn btn-success btn-lg modal-btn-left">Success</button>
 			</div>
 		</div>
 	</section>

scss/atoms/modals/_mixins.scss

@@ -5,7 +5,9 @@
 * ==========================================================================
 */
 
+// Styles shared by modal's inner components
 $border-radius: map-get($modal-borders, radius);
+$padding: em(map-get($modal-padding, padding));
 
 @mixin modal() {
 	padding: em(map-get($modal-element, padding));
@@ -17,22 +19,29 @@ $border-radius: map-get($modal-borders, radius);
 }
 
 @mixin modal-header() {
-	padding: em(map-get($modal-header, padding));
+	padding: $padding;
 	margin: em(map-get($modal-header, margin));
 	background: map-get($modal-header, background);
 	border-radius: $border-radius $border-radius 0 0;
 }
 
 @mixin modal-body() {
-	padding: em(map-get($modal-header, padding));
+	padding: 0 $padding;
 	margin: em(map-get($modal-header, margin));
 	background: map-get($modal-body, background);
+	overflow-y: map-get($modal-body, overflow-y);
 }
 
 @mixin modal-footer() {
-	padding: em(map-get($modal-header, padding));
+	padding: $padding;
 	margin: em(map-get($modal-header, margin));
 	background: map-get($modal-footer, background);
 	border-radius: 0 0 $border-radius $border-radius;
 	@include clearfix();
 }
+
+@mixin modal-title() {
+	font-size: em(map-get($modal-title, font-size));
+	font-weight: map-get($modal-title, font-weight);
+	margin: map-get($modal-title, margin);
+}

scss/atoms/modals/_modals.scss

@@ -11,23 +11,30 @@
 
 .modal {
 	@include modal();
+}
+
+.modal-header {
+	@include modal-header();
+}
+
+.modal-title {
+	margin: 0;
+	@include modal-title();
+}
+
+.modal-body {
+	@include modal-body();
+}
+
+.modal-footer {
+	@include modal-footer();
+	@include clearfix();
+}
+
+.modal-btn-left {
+	float: left;
+}
 
-	.modal-header {
-		@include modal-header();
-		h4 {
-			margin: 0;
-		}
-	}
-
-	.modal-body {
-		@include modal-body();
-	}
-
-	.modal-footer {
-		@include modal-footer();
-		@include clearfix();
-		& .btn {
-			float: right;
-		}
-	}
+.modal-btn-right {
+	float: right;
 }

scss/variables/modal.js

@@ -25,6 +25,12 @@ chassis.modal = {
 			"radius": "3px"
 		}
 	},
+	"padding": {
+		name: "Modal Padding value",
+		value: {
+			"padding": "15px"
+		}
+	},
 	"element": {
 		name: "Generic modal styles",
 		value: {
@@ -33,26 +39,32 @@ chassis.modal = {
 			"background": chassis.colors.background.value.base
 		}
 	},
+	"title": {
+		name: "Modal Title Styles",
+		value: {
+			"font-size": "24px",
+			"font-weight": "700",
+			"margin": "0"
+		}
+	},
 	"header": {
 		name: "Modal Header styles",
 		value: {
-			"padding": "12px",
 			"margin": "0px",
 			"background": chassis.colors.background.value.base
 		}
 	},
 	"body": {
 		name: "Modal Body styles",
 		value: {
-			"padding": "12px",
 			"margin": "0px",
-			"background": chassis.colors.background.value.base
+			"background": chassis.colors.background.value.base,
+			"overflow-y": "scroll"
 		}
 	},
 	"footer": {
 		name: "Modal Footer styles",
 		value: {
-			"padding": "12px",
 			"margin": "0px",
 			"background": chassis.colors.background.value.base
 		}