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

Commit 509891d

Browse files
MichaelArestadMichaelArestad
committed
Build: Initial table styles
1 parent 308ea27 commit 509891d

File tree

3 files changed

+193
-1
lines changed

3 files changed

+193
-1
lines changed

‎demos/tables.html

Lines changed: 122 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,122 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<meta charset='utf-8'>
5+
<meta http-equiv='x-ua-compatible' content='ie=edge'>
6+
<title>CSS Chasis - Tables</title>
7+
<meta name='description' content='Typography skeleton for styling'>
8+
<meta name='viewport' content='width=device-width, initial-scale=1'>
9+
<link rel='stylesheet' href='../dist/css/chassis.css'>
10+
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,700,400italic,700italic' rel='stylesheet' type='text/css'>
11+
<style>
12+
body {
13+
max-width: 700px;
14+
margin: 3em auto;
15+
padding: 0 1em;
16+
}
17+
</style>
18+
</head>
19+
<body>
20+
21+
<h1>CSS Chassis</h1>
22+
23+
<hr>
24+
25+
<h2>Tables</h2>
26+
27+
<p>Here's a paragraph to show spacing around the table. Aenean lacinia bibendum nulla sed consectetur. Maecenas faucibus mollis interdum..</p>
28+
29+
<table>
30+
<thead>
31+
<tr>
32+
<th>#</th>
33+
<th>Table heading</th>
34+
<th>Table heading</th>
35+
<th>Table heading</th>
36+
</tr>
37+
</thead>
38+
<tbody>
39+
<tr>
40+
<th>1</th>
41+
<td>Table cell</td>
42+
<td>Table cell</td>
43+
<td>Table cell</td>
44+
</tr>
45+
<tr>
46+
<th>2</th>
47+
<td>Table cell</td>
48+
<td>Table cell</td>
49+
<td>Table cell</td>
50+
</tr>
51+
<tr>
52+
<th>3</th>
53+
<td>Table cell</td>
54+
<td>Table cell</td>
55+
<td>Table cell</td>
56+
</tr>
57+
</tbody>
58+
</table>
59+
60+
<p>Here's a paragraph to show spacing around the table. Aenean lacinia bibendum nulla sed consectetur. Maecenas faucibus mollis interdum..</p>
61+
62+
<div class='table--responsive'>
63+
<table>
64+
<thead>
65+
<tr>
66+
<th>#</th>
67+
<th>Table heading</th>
68+
<th>Table heading</th>
69+
<th>Table heading</th>
70+
<th>Table heading</th>
71+
<th>Table heading</th>
72+
<th>Table heading</th>
73+
<th>Table heading</th>
74+
<th>Table heading</th>
75+
<th>Table heading</th>
76+
</tr>
77+
</thead>
78+
<tbody>
79+
<tr>
80+
<th>1</th>
81+
<td>Table cell</td>
82+
<td>Table cell</td>
83+
<td>Table cell</td>
84+
<td>Table cell</td>
85+
<td>Table cell</td>
86+
<td>Table cell</td>
87+
<td>Table cell</td>
88+
<td>Table cell</td>
89+
<td>Table cell</td>
90+
</tr>
91+
<tr>
92+
<th>2</th>
93+
<td>Table cell</td>
94+
<td>Table cell</td>
95+
<td>Table cell</td>
96+
<td>Table cell</td>
97+
<td>Table cell</td>
98+
<td>Table cell</td>
99+
<td>Table cell</td>
100+
<td>Table cell</td>
101+
<td>Table cell</td>
102+
</tr>
103+
<tr>
104+
<th>3</th>
105+
<td>Table cell</td>
106+
<td>Table cell</td>
107+
<td>Table cell</td>
108+
<td>Table cell</td>
109+
<td>Table cell</td>
110+
<td>Table cell</td>
111+
<td>Table cell</td>
112+
<td>Table cell</td>
113+
<td>Table cell</td>
114+
</tr>
115+
</tbody>
116+
</table>
117+
</div>
118+
119+
<p>Here's a paragraph to show spacing around the table. Aenean lacinia bibendum nulla sed consectetur. Maecenas faucibus mollis interdum.</p>
120+
121+
</body>
122+
</html>

‎scss/atoms/_tables.scss

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
// ==========================================================================
2+
// Typography
3+
// ==========================================================================
4+
5+
table {
6+
width: 100%;
7+
margin-bottom: em( 20px, 16px );
8+
font-size: em( 16px );
9+
text-align: left;
10+
}
11+
12+
thead {
13+
border-bottom: 1px solid #eee;
14+
15+
> tr > th {
16+
border-top: 0;
17+
}
18+
}
19+
20+
td,
21+
th {
22+
border-top: 1px solid #eee;
23+
padding: em( 12px, 16px );
24+
white-space: nowrap;
25+
}
26+
27+
th {
28+
padding: em( 12px, 12px );
29+
color: #666;
30+
font-weight: 400;
31+
font-size: em( 12px, 16px );
32+
text-transform: uppercase;
33+
}
34+
35+
.table--responsive {
36+
position: relative;
37+
z-index: 1;
38+
margin-bottom: em( 20px );
39+
border: 0;
40+
background: #fff no-repeat;
41+
background-image: radial-gradient( farthest-side at 0 50%,rgba( 0, 0, 0, .2 ), transparent ), radial-gradient( farthest-side at 100% 50%, rgba( 0, 0, 0, .2 ), transparent );
42+
background-position: 0 0, 100% 0;
43+
background-size: 10px 100%;
44+
overflow: auto;
45+
46+
table {
47+
position: relative;
48+
margin-bottom: 0;
49+
50+
&:before,
51+
&:after {
52+
content: "";
53+
position: absolute;
54+
top: 0;
55+
bottom: 0;
56+
left: 0;
57+
z-index: -1;
58+
margin: 0 -30px 0 0;
59+
width: 30px;
60+
background: linear-gradient( to right, #fff, #fff 30%, rgba( 255, 255, 255, 0 ) );
61+
}
62+
&:after {
63+
left: auto;
64+
right: 0;
65+
margin: 0 0 0 -30px;
66+
background: linear-gradient( to right, rgba( 255, 255, 255, 0 ), #fff 70%, #fff );
67+
}
68+
}
69+
}

‎scss/lint.scss

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,8 @@
1212

1313
@import
1414
"atoms/icons/icons",
15-
"atoms/typography/typography";
15+
"atoms/typography/typography",
16+
"atoms/tables";
1617

1718
@import
1819
"views/main";

0 commit comments

Comments
 (0)