Skip to content
This repository was archived by the owner on Dec 11, 2021. It is now read-only.

Commit ed1221e

Browse files
nashvailnashvail
committed
Modals: Added initial styling
1 parent 437f2a2 commit ed1221e

File tree

4 files changed

+196
-0
lines changed

4 files changed

+196
-0
lines changed

‎demos/modals.html

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>CSS Chassis - Modal</title>
6+
<meta name="description" content="Typography skeleton for styling">
7+
<meta name="viewport" content="width=device-width, initial-scale=1">
8+
<link rel="stylesheet" href="../dist/css/chassis.css">
9+
<link rel="stylesheet" href="demos.css">
10+
<link href="http://fonts.googleapis.com/css?family=Open+Sans:400,600,700,400italic,700italic" rel="stylesheet">
11+
</head>
12+
<body>
13+
<h1>CSS Chassis - Modals</h1>
14+
<div class="modal">
15+
<div class="modal-header">
16+
<span class="modal-title">Modal title</span>
17+
</div>
18+
<div class="modal-body">
19+
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.
20+
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.
21+
</div>
22+
<div class="modal-footer">
23+
<button class="btn btn-default btn-lg modal-btn-right">Default</button>
24+
<button class="btn btn-primary btn-lg modal-btn-left">Primary</button>
25+
<button class="btn btn-success btn-lg modal-btn-left">Success</button>
26+
</div>
27+
</div>
28+
</body>
29+
</html>

‎scss/atoms/modals/_mixins.scss

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
/*
2+
* ==========================================================================
3+
* File: _mixins.scss
4+
* For : Modals
5+
* ==========================================================================
6+
*/
7+
8+
// Styles shared by modal's inner components
9+
10+
// Declared separately because parts of Modal (header and footer) share the same border radius.
11+
// When/if it comes to changing the radius better to change it at a single place than 3 different.
12+
$border-radius: map-get($modal-borders, radius);
13+
14+
// Declared separately because we want to use shorthands, as writing something like "0 0 15px 15px"
15+
// doesn't work in JSASS as of now.
16+
$padding: em(map-get($modal-padding, padding));
17+
18+
@mixin modal() {
19+
padding: $padding;
20+
margin: em(map-get($modal-element, margin));
21+
background: map-deep-get($modal-element, background, base);
22+
border: map-get($modal-element, border);
23+
border-color: map-deep-get($modal-element, border-color, dark);
24+
border-radius: $border-radius;
25+
box-shadow: map-get($modal-shadows, base);
26+
}
27+
28+
@mixin modal-header() {
29+
padding: $padding;
30+
margin: em(map-get($modal-header, margin));
31+
background: map-deep-get($modal-header, background, base);
32+
border-radius: $border-radius $border-radius 0 0;
33+
}
34+
35+
@mixin modal-body() {
36+
padding: 0 $padding;
37+
margin: em(map-get($modal-header, margin));
38+
background: map-deep-get($modal-body, background, base);
39+
overflow-y: map-get($modal-body, overflow-y);
40+
}
41+
42+
@mixin modal-footer() {
43+
padding: $padding;
44+
margin: em(map-get($modal-header, margin));
45+
background: map-deep-get($modal-footer, background, base);
46+
border-radius: 0 0 $border-radius $border-radius;
47+
@include clearfix();
48+
}
49+
50+
@mixin modal-title() {
51+
font-size: em(map-get($modal-title, font-size));
52+
font-weight: map-get($modal-title, font-weight);
53+
margin: map-get($modal-title, margin);
54+
}

‎scss/atoms/modals/_modals.scss

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
/*
2+
* ==========================================================================
3+
* Modals
4+
* ==========================================================================
5+
*/
6+
7+
@import
8+
"dist/chassis",
9+
"mixins";
10+
11+
.modal {
12+
@include modal();
13+
}
14+
15+
.modal-header {
16+
@include modal-header();
17+
}
18+
19+
.modal-title {
20+
@include modal-title();
21+
}
22+
23+
.modal-body {
24+
@include modal-body();
25+
}
26+
27+
.modal-footer {
28+
@include modal-footer();
29+
@include clearfix();
30+
}
31+
32+
.modal-btn-left {
33+
float: left;
34+
}
35+
36+
.modal-btn-right {
37+
float: right;
38+
}

‎scss/variables/modal.js

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
( function( root, factory ) {
2+
if ( typeof define === "function" && define.amd ) {
3+
define( [ "./chassis", "./colors", "./typograpy" ], factory );
4+
} else if ( typeof exports === "object" ) {
5+
require( "./chassis" );
6+
require( "./colors" );
7+
module.exports = factory( require( "./typography" ) );
8+
} else {
9+
root.chassis = factory( root.chassis );
10+
}
11+
}( this, function( chassis ) {
12+
13+
chassis.modal = {
14+
15+
"shadows": {
16+
name: "Modal shadow styles",
17+
value: {
18+
"base": "0px 8px 11px 0px rgba(0,0,0,0.15)"
19+
}
20+
},
21+
"borders": {
22+
name: "Modal border styles",
23+
value: {
24+
"radius": "3px"
25+
}
26+
},
27+
"padding": {
28+
name: "Modal Padding value",
29+
value: {
30+
"padding": "12px"
31+
}
32+
},
33+
"element": {
34+
name: "Generic modal styles",
35+
value: {
36+
"margin": "12px",
37+
"border": "1px solid",
38+
"border-color": () => "colors.default"
39+
"background": () => "colors.background"
40+
}
41+
},
42+
"title": {
43+
name: "Modal Title Styles",
44+
value: {
45+
"font-size": "24px",
46+
"font-weight": "700",
47+
"margin": "0px"
48+
}
49+
},
50+
"header": {
51+
name: "Modal Header styles",
52+
value: {
53+
"margin": "0px",
54+
"background": () => "colors.background"
55+
}
56+
},
57+
"body": {
58+
name: "Modal Body styles",
59+
value: {
60+
"margin": "0px",
61+
"background": () => "colors.background",
62+
"overflow-y": "scroll"
63+
}
64+
},
65+
"footer": {
66+
name: "Modal Footer styles",
67+
value: {
68+
"margin": "0px",
69+
"background": () => "colors.background"
70+
}
71+
}
72+
};
73+
74+
return chassis;
75+
} ) );

0 commit comments

Comments
 (0)