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

Commit eb90b06

Browse files
nashvailnashvail
committed
Modals: Initial styling
1 parent 997ceab commit eb90b06

File tree

7 files changed

+129
-3
lines changed

7 files changed

+129
-3
lines changed

‎demos/modals/modals.css

Whitespace-only changes.

‎demos/modals/modals.html

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>CSS Chassis - Typography</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="modals.css">
10+
<link rel="stylesheet" href="../../external/Cayman_theme/cayman.css">
11+
<link href="http://fonts.googleapis.com/css?family=Open+Sans:400,600,700,400italic,700italic" rel="stylesheet">
12+
</head>
13+
<body>
14+
<section class="main-content">
15+
16+
</section>
17+
</body>
18+
</html>

‎scss/atoms/modals/_mixins.scss

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
/*
2+
* ==========================================================================
3+
* File: _mixins.scss
4+
* For : Modals
5+
* ==========================================================================
6+
*/
7+
8+
@mixin modal() {
9+
padding: em(map-get($modal-element, padding));
10+
margin: em(map-get($modal-element, margin));
11+
background: map-get($modal-element, background);
12+
border: map-get($modal-borders, default);
13+
box-shadow: map-get($modal-shadows, base);
14+
}
15+
16+
@mixin modal-header() {
17+
padding: em(map-get($modal-header, padding));
18+
margin: em(map-get($modal-header, margin));
19+
background: map-get($modal-header, background);
20+
}
21+
22+
@mixin modal-body() {
23+
padding: em(map-get($modal-header, padding));
24+
margin: em(map-get($modal-header, margin));
25+
background: map-get($modal-body, background);
26+
}
27+
28+
@mixin modal-footer() {
29+
padding: em(map-get($modal-header, padding));
30+
margin: em(map-get($modal-header, margin));
31+
background: map-get($modal-footer, background);
32+
}

‎scss/atoms/modals/_modals.scss

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
/*
2+
* ==========================================================================
3+
* Modals
4+
* ==========================================================================
5+
*/
6+
7+
@import
8+
"dist/chassis",
9+
"functions",
10+
"mixins";
11+
12+
.modal {
13+
@include modal();
14+
15+
.modal-header {
16+
@include modal-header();
17+
}
18+
19+
.modal-body {
20+
@include modal-body();
21+
}
22+
23+
.modal-footer {
24+
@include modal-footer();
25+
}
26+
}

‎scss/style.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,8 @@
1010
@import
1111
"atoms/icons/icons",
1212
"atoms/typography/typography",
13-
"atoms/buttons/buttons"
14-
"atoms/modals/modals;
13+
"atoms/buttons/buttons",
14+
"atoms/modals/modals";
1515

1616
@import
1717
"views/main";

‎scss/variables/colors.js

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -75,6 +75,12 @@ chassis.colors = {
7575
value: {
7676
"base": "#fff"
7777
}
78+
},
79+
"grey": {
80+
name: "Shades of grey",
81+
value: {
82+
"base": "#CCCCCC"
83+
}
7884
}
7985
};
8086
return chassis;

‎scss/variables/modal.js

Lines changed: 45 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,51 @@
1111
}( this, function( chassis ) {
1212

1313
chassis.modal = {
14-
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+
"default": "1px solid " + chassis.colors.grey.value.base
25+
}
26+
},
27+
"element": {
28+
name: "Generic modal styles",
29+
value: {
30+
"padding": "0px",
31+
"margin": "10px",
32+
"background": chassis.colors.background.value.base
33+
}
34+
},
35+
"header": {
36+
name: "Modal Header styles",
37+
value: {
38+
"padding": "12px",
39+
"margin": "0px",
40+
"background": chassis.colors.background.value.base
41+
}
42+
},
43+
"body": {
44+
name: "Modal Body styles",
45+
value: {
46+
"padding": "12px",
47+
"margin": "0px",
48+
"background": chassis.colors.background.value.base
49+
}
50+
},
51+
"footer": {
52+
name: "Modal Footer styles",
53+
value: {
54+
"padding": "12px",
55+
"margin": "0px",
56+
"background": chassis.colors.background.value.base
57+
}
58+
}
1559
};
1660

1761
return chassis;

0 commit comments

Comments
 (0)