Modals: Added initial styling

nashvail · Jun 9, 2016 · c631c79 · c631c79
1 parent 437f2a2
commit c631c79
Show file tree

Hide file tree

Showing 4 changed files with 196 additions and 0 deletions.
diff --git a/demos/modals.html b/demos/modals.html
@@ -0,0 +1,29 @@
+<!doctype html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<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="demos.css">
+	<link href="http://fonts.googleapis.com/css?family=Open+Sans:400,600,700,400italic,700italic" rel="stylesheet">
+</head>
+<body>
+	<h1>CSS Chassis - Modals</h1>
+	<div class="modal">
+		<div class="modal-header">
+			<span class="modal-title">Modal title</span>
+		</div>
+		<div class="modal-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.
+			Duis rhoncus velit nec est condimentum feugiat. Donec aliquam augue nec gravida lobortis. Nunc arcu mi, pretium quis dolor id, iaculis euismod ligula. Donec tincidunt gravida lacus eget lacinia.
+		</div>
+		<div class="modal-footer">
+			<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>
+</body>
+</html>
diff --git a/scss/atoms/modals/_mixins.scss b/scss/atoms/modals/_mixins.scss
@@ -0,0 +1,54 @@
+/*
+* ==========================================================================
+* File: _mixins.scss
+* For : Modals
+* ==========================================================================
+*/
+
+// Styles shared by modal's inner components
+
+// Declared separately because parts of Modal (header and footer) share the same border radius.
+// When/if it comes to changing the radius better to change it at a single place than 3 different.
+$border-radius: map-get($modal-borders, radius);
+
+// Declared separately because we want to use shorthands, as writing something like "0 0 15px 15px"
+// doesn't work in JSASS as of now.
+$padding: em(map-get($modal-padding, padding));
+
+@mixin modal() {
+	padding: $padding;
+	margin: em(map-get($modal-element, margin));
+	background: map-deep-get($modal-element, background, base);
+	border: map-get($modal-element, border);
+	border-color: map-deep-get($modal-element, border-color, dark);
+	border-radius: $border-radius;
+	box-shadow: map-get($modal-shadows, base);
+}
+
+@mixin modal-header() {
+	padding: $padding;
+	margin: em(map-get($modal-header, margin));
+	background: map-deep-get($modal-header, background, base);
+	border-radius: $border-radius $border-radius 0 0;
+}
+
+@mixin modal-body() {
+	padding: 0 $padding;
+	margin: em(map-get($modal-header, margin));
+	background: map-deep-get($modal-body, background, base);
+	overflow-y: map-get($modal-body, overflow-y);
+}
+
+@mixin modal-footer() {
+	padding: $padding;
+	margin: em(map-get($modal-header, margin));
+	background: map-deep-get($modal-footer, background, base);
+	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);
+}
diff --git a/scss/atoms/modals/_modals.scss b/scss/atoms/modals/_modals.scss
@@ -0,0 +1,38 @@
+/*
+* ==========================================================================
+* Modals
+* ==========================================================================
+*/
+
+@import
+	"dist/chassis",
+	"mixins";
+
+.modal {
+	@include modal();
+}
+
+.modal-header {
+	@include modal-header();
+}
+
+.modal-title {
+	@include modal-title();
+}
+
+.modal-body {
+	@include modal-body();
+}
+
+.modal-footer {
+	@include modal-footer();
+	@include clearfix();
+}
+
+.modal-btn-left {
+	float: left;
+}
+
+.modal-btn-right {
+	float: right;
+}
diff --git a/scss/variables/modal.js b/scss/variables/modal.js
@@ -0,0 +1,75 @@
+( function( root, factory ) {
+	if ( typeof define === "function" && define.amd ) {
+		define( [ "./chassis", "./colors", "./typograpy" ], factory );
+	} else if ( typeof exports === "object" ) {
+		require( "./chassis" );
+		require( "./colors" );
+		module.exports = factory( require( "./typography" ) );
+	} else {
+		root.chassis = factory( root.chassis );
+	}
+}( this, function( chassis ) {
+
+chassis.modal = {
+
+	"shadows": {
+		name: "Modal shadow styles",
+		value: {
+			"base": "0px 8px 11px 0px rgba(0,0,0,0.15)"
+		}
+	},
+	"borders": {
+		name: "Modal border styles",
+		value: {
+			"radius": "3px"
+		}
+	},
+	"padding": {
+		name: "Modal Padding value",
+		value: {
+			"padding": "12px"
+		}
+	},
+	"element": {
+		name: "Generic modal styles",
+		value: {
+			"margin": "12px",
+			"border": "1px solid",
+			"border-color": () => "colors.default",
+			"background": () => "colors.background"
+		}
+	},
+	"title": {
+		name: "Modal Title Styles",
+		value: {
+			"font-size": "24px",
+			"font-weight": "700",
+			"margin": "0px"
+		}
+	},
+	"header": {
+		name: "Modal Header styles",
+		value: {
+			"margin": "0px",
+			"background": () => "colors.background"
+		}
+	},
+	"body": {
+		name: "Modal Body styles",
+		value: {
+			"margin": "0px",
+			"background": () => "colors.background",
+			"overflow-y": "scroll"
+		}
+	},
+	"footer": {
+		name: "Modal Footer styles",
+		value: {
+			"margin": "0px",
+			"background": () => "colors.background"
+		}
+	}
+};
+
+return chassis;
+} ) );