Modals: Beta styling

nashvail · nashvail · commit 18ce6c780e7f · 2016-05-28T00:38:13.000+05:30
diff --git a/demos/modals/modals.css b/demos/modals/modals.css
@@ -0,0 +1,5 @@
+body {
+	max-width: 900px;
+	margin: 3em auto;
+	padding: 0 1em;
+}
diff --git a/demos/modals/modals.html b/demos/modals/modals.html
@@ -2,17 +2,28 @@
 <html>
 <head>
 	<meta charset="utf-8">
-	<title>CSS Chassis - Typography</title>
+	<title>CSS Chassis - Modal</title>
 	<meta name="description" content="Typography skeleton for styling">
 	<meta name="viewport" content="width=device-width, initial-scale=1">
-	<link rel="stylesheet" href="../dist/css/chassis.css">
+	<link rel="stylesheet" href="../../dist/css/chassis.css">
 	<link rel="stylesheet" href="modals.css">
-	<link rel="stylesheet" href="../../external/Cayman_theme/cayman.css">
 	<link href="http://fonts.googleapis.com/css?family=Open+Sans:400,600,700,400italic,700italic" rel="stylesheet">
 </head>
 <body>
 	<section class="main-content">
-		
+		<div class="modal">
+			<div class="modal-header">
+				<h4>Modal title</h4>
+			</div>
+			<div class="modal-body">
+				Body	
+			</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>
+			</div>
+		</div>
 	</section>
 </body>
 </html>
diff --git a/scss/atoms/modals/_mixins.scss b/scss/atoms/modals/_mixins.scss
@@ -5,18 +5,22 @@
 * ==========================================================================
 */
 
+$border-radius: map-get($modal-borders, radius);
+
 @mixin modal() {
 	padding: em(map-get($modal-element, padding));
 	margin: em(map-get($modal-element, margin));
 	background: map-get($modal-element, background);
 	border: map-get($modal-borders, default);
+	border-radius: $border-radius;
 	box-shadow: map-get($modal-shadows, base);
 }
 
 @mixin modal-header() {
 	padding: em(map-get($modal-header, 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() {
@@ -29,4 +33,6 @@
 	padding: em(map-get($modal-header, padding));
 	margin: em(map-get($modal-header, margin));
 	background: map-get($modal-footer, background);
+	border-radius: 0 0 $border-radius $border-radius;
+	@include clearfix();
 }
diff --git a/scss/atoms/modals/_modals.scss b/scss/atoms/modals/_modals.scss
@@ -14,6 +14,9 @@
 
 	.modal-header {
 		@include modal-header();
+		h4 {
+			margin: 0;
+		}
 	}
 
 	.modal-body {
@@ -22,5 +25,9 @@
 
 	.modal-footer {
 		@include modal-footer();
+		@include clearfix();
+		& .btn {
+			float: right;
+		}
 	}
 }
diff --git a/scss/variables/modal.js b/scss/variables/modal.js
@@ -21,7 +21,8 @@ chassis.modal = {
 	"borders": {
 		name: "Modal border styles",
 		value: {
-			"default": "1px solid " + chassis.colors.grey.value.base
+			"default": "1px solid " + chassis.colors.grey.value.base,
+			"radius": "3px"
 		}
 	},
 	"element": {

Original file line number	Diff line number	Diff line change
`@@ -14,6 +14,9 @@`
`14`	`14`
`15`	`15`	`.modal-header {`
`16`	`16`	`@include modal-header();`
	`17`	`+ h4 {`
	`18`	`+ margin: 0;`
	`19`	`+ }`
`17`	`20`	`}`
`18`	`21`
`19`	`22`	`.modal-body {`
`@@ -22,5 +25,9 @@`
`22`	`25`
`23`	`26`	`.modal-footer {`
`24`	`27`	`@include modal-footer();`
	`28`	`+ @include clearfix();`
	`29`	`+ & .btn {`
	`30`	`+ float: right;`
	`31`	`+ }`
`25`	`32`	`}`
`26`	`33`	`}`