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

Commit d508bac

Browse files
MichaelArestadkristyjy
MichaelArestad
authored and
kristyjy
committed
Build: Initial table styles
1 parent 437f2a2 commit d508bac

File tree

7 files changed

+193
-0
lines changed

7 files changed

+193
-0
lines changed

‎demos/tables.html

+56
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>CSS Chassis - Tables</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=Source+Sans+Pro:400,600,700,400italic,700italic" rel="stylesheet">
11+
</head>
12+
<body>
13+
14+
<h1>CSS Chassis</h1>
15+
16+
<hr>
17+
18+
<h2>Tables</h2>
19+
20+
<p>Here's a paragraph to show spacing around the table. Aenean lacinia bibendum nulla sed consectetur. Maecenas faucibus mollis interdum..</p>
21+
22+
<table>
23+
<thead>
24+
<tr>
25+
<th scope="col">ID</th>
26+
<th scope="col">Product</th>
27+
<th scope="col">Category</th>
28+
<th scope="col">Price</th>
29+
</tr>
30+
</thead>
31+
<tbody>
32+
<tr>
33+
<th scope="row">1</th>
34+
<td>T-Shirt</td>
35+
<td>Apparel</td>
36+
<td>$12.99</td>
37+
</tr>
38+
<tr>
39+
<th scope="row">2</th>
40+
<td>Sweat Shirt</td>
41+
<td>Apparel</td>
42+
<td>$24.99</td>
43+
</tr>
44+
<tr>
45+
<th scope="row">3</th>
46+
<td>Necklace</td>
47+
<td>Accessories</td>
48+
<td>$29.99</td>
49+
</tr>
50+
</tbody>
51+
</table>
52+
53+
<p>Here's a paragraph to show spacing around the table. Aenean lacinia bibendum nulla sed consectetur. Maecenas faucibus mollis interdum..</p>
54+
55+
</body>
56+
</html>

‎scss/atoms/_tables.scss

+68
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
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+
border-top: 1px solid #eee;
22+
padding: em( 12px, 16px );
23+
}
24+
25+
th {
26+
border-top: 1px solid #eee;
27+
padding: em( 12px, 12px );
28+
color: #666;
29+
font-weight: 400;
30+
font-size: em( 12px, 16px );
31+
white-space: nowrap;
32+
}
33+
34+
.table--responsive {
35+
position: relative;
36+
z-index: 1;
37+
margin-bottom: em( 20px );
38+
border: 0;
39+
background: #fff no-repeat;
40+
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 );
41+
background-position: 0 0, 100% 0;
42+
background-size: 10px 100%;
43+
overflow: auto;
44+
45+
table {
46+
position: relative;
47+
margin-bottom: 0;
48+
49+
&:before,
50+
&:after {
51+
content: "";
52+
position: absolute;
53+
top: 0;
54+
bottom: 0;
55+
left: 0;
56+
z-index: -1;
57+
margin: 0 -30px 0 0;
58+
width: 30px;
59+
background: linear-gradient( to right, #fff, #fff 30%, rgba( 255, 255, 255, 0 ) );
60+
}
61+
&:after {
62+
left: auto;
63+
right: 0;
64+
margin: 0 0 0 -30px;
65+
background: linear-gradient( to right, rgba( 255, 255, 255, 0 ), #fff 70%, #fff );
66+
}
67+
}
68+
}

‎scss/atoms/tables/_mixins.scss

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
/*
2+
* ==========================================================================
3+
* Table mixins
4+
* ==========================================================================
5+
*/

‎scss/atoms/tables/_tables.scss

+36
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
/*
2+
* ==========================================================================
3+
* Tables
4+
* ==========================================================================
5+
*/
6+
7+
@import
8+
"dist/chassis",
9+
"mixins";
10+
11+
table {
12+
margin: map-get($table-base, margin);
13+
font-size: map-get($table-base, font-size);
14+
text-align: left;
15+
}
16+
17+
thead {
18+
border-bottom: map-get($table-base, border);
19+
> tr > th {
20+
border-top: 0;
21+
}
22+
}
23+
24+
td {
25+
border-top: map-get($table-base, border);
26+
padding: map-get($table-base, padding);
27+
}
28+
29+
th {
30+
border-top: map-get($table-base, border);
31+
padding: map-get($table-base, padding);
32+
color: map-get($text, light);
33+
font-weight: 400;
34+
font-size: map-get($table-base, thead-font-size);
35+
white-space: nowrap;
36+
}

‎scss/lint.scss

+2
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,8 @@
1818
@import
1919
"atoms/icons/icons",
2020
"atoms/typography/typography",
21+
"atoms/tables",
22+
"atoms/overflow-indicator",
2123
"atoms/buttons/buttons";
2224

2325
@import

‎scss/style.scss

+1
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010
@import
1111
"atoms/icons/icons",
1212
"atoms/typography/typography",
13+
"atoms/tables/tables",
1314
"atoms/buttons/buttons";
1415

1516
@import

‎scss/variables/tables.js

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
( function( root, factory ) {
2+
if ( typeof define === "function" && define.amd ) {
3+
define( [ "./chassis" ], factory );
4+
} else if ( typeof exports === "object" ) {
5+
module.exports = factory( require( "./chassis" ) );
6+
} else {
7+
root.chassis = factory( root.chassis );
8+
}
9+
}( this, function( chassis ) {
10+
11+
chassis.table = {
12+
"table-base": {
13+
name: "Table Element",
14+
value: {
15+
"margin": "0 0 1em",
16+
"font-size": "16px",
17+
"thead-font-size": "12px",
18+
"border": "1px solid #eee",
19+
"padding": "12px"
20+
}
21+
}
22+
};
23+
24+
return chassis;
25+
} ) );

0 commit comments

Comments
 (0)