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

Commit aa4d784

Browse files
kristyjykristyjy
committed
Merge branch '53tablestyling' into 53-tablestyles
2 parents 2958621 + 15195fb commit aa4d784

File tree

4 files changed

+332
-1
lines changed

4 files changed

+332
-1
lines changed

‎demos/tables.html

+191
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,191 @@
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>#</th>
26+
<th>Table heading</th>
27+
<th>Table heading</th>
28+
<th>Table heading</th>
29+
</tr>
30+
</thead>
31+
<tbody>
32+
<tr>
33+
<th>1</th>
34+
<td>Table cell</td>
35+
<td>Table cell</td>
36+
<td>Table cell</td>
37+
</tr>
38+
<tr>
39+
<th>2</th>
40+
<td>Table cell</td>
41+
<td>Table cell</td>
42+
<td>Table cell</td>
43+
</tr>
44+
<tr>
45+
<th>3</th>
46+
<td>Table cell</td>
47+
<td>Table cell</td>
48+
<td>Table cell</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+
<div class="overflow-indicator__wrapper">
56+
<table class="overflow-indicator__content">
57+
<thead>
58+
<tr>
59+
<th>#</th>
60+
<th>Table heading</th>
61+
<th>Table heading</th>
62+
<th>Table heading</th>
63+
<th>Table heading</th>
64+
<th>Table heading</th>
65+
<th>Table heading</th>
66+
<th>Table heading</th>
67+
<th>Table heading</th>
68+
<th>Table heading</th>
69+
</tr>
70+
</thead>
71+
<tbody>
72+
<tr>
73+
<th>1</th>
74+
<td>Table cell</td>
75+
<td>Table cell</td>
76+
<td>Table cell</td>
77+
<td>Table cell</td>
78+
<td>Table cell</td>
79+
<td>Table cell</td>
80+
<td>Table cell</td>
81+
<td>Table cell</td>
82+
<td>Table cell</td>
83+
</tr>
84+
<tr>
85+
<th>2</th>
86+
<td>Table cell</td>
87+
<td>Table cell</td>
88+
<td>Table cell</td>
89+
<td>Table cell</td>
90+
<td>Table cell</td>
91+
<td>Table cell</td>
92+
<td>Table cell</td>
93+
<td>Table cell</td>
94+
<td>Table cell</td>
95+
</tr>
96+
<tr>
97+
<th>3</th>
98+
<td>Table cell</td>
99+
<td>Table cell</td>
100+
<td>Table cell</td>
101+
<td>Table cell</td>
102+
<td>Table cell</td>
103+
<td>Table cell</td>
104+
<td>Table cell</td>
105+
<td>Table cell</td>
106+
<td>Table cell</td>
107+
</tr>
108+
</tbody>
109+
</table>
110+
</div>
111+
112+
<p>Here"s a paragraph to show spacing around the table. Aenean lacinia bibendum nulla sed consectetur. Maecenas faucibus mollis interdum.</p>
113+
114+
<table class="striped-table">
115+
<thead>
116+
<tr>
117+
<th>#</th>
118+
<th>Table heading</th>
119+
<th>Table heading</th>
120+
<th>Table heading</th>
121+
</tr>
122+
</thead>
123+
<tbody>
124+
<tr>
125+
<th>1</th>
126+
<td>Table cell</td>
127+
<td>Table cell</td>
128+
<td>Table cell</td>
129+
</tr>
130+
<tr>
131+
<th>2</th>
132+
<td>Table cell</td>
133+
<td>Table cell</td>
134+
<td>Table cell</td>
135+
</tr>
136+
<tr>
137+
<th>3</th>
138+
<td>Table cell</td>
139+
<td>Table cell</td>
140+
<td>Table cell</td>
141+
</tr>
142+
</tbody>
143+
</table>
144+
145+
<p>Here"s a paragraph to show spacing around the table. Aenean lacinia bibendum nulla sed consectetur. Maecenas faucibus mollis interdum.</p>
146+
147+
<table class="">
148+
<thead>
149+
<tr>
150+
<th>#</th>
151+
<th>Table heading</th>
152+
<th>Table heading</th>
153+
<th>Table heading</th>
154+
</tr>
155+
</thead>
156+
<tbody>
157+
<tr class="success">
158+
<th>1</th>
159+
<td>Table cell</td>
160+
<td>Table cell</td>
161+
<td>Table cell</td>
162+
</tr>
163+
<tr class="active">
164+
<th>2</th>
165+
<td>Table cell</td>
166+
<td>Table cell</td>
167+
<td>Table cell</td>
168+
</tr>
169+
<tr class="danger">
170+
<th>3</th>
171+
<td>Table cell</td>
172+
<td>Table cell</td>
173+
<td>Table cell</td>
174+
</tr>
175+
<tr class="warning">
176+
<th>4</th>
177+
<td>Table cell</td>
178+
<td>Table cell</td>
179+
<td>Table cell</td>
180+
</tr>
181+
<tr class="info">
182+
<th>5</th>
183+
<td>Table cell</td>
184+
<td>Table cell</td>
185+
<td>Table cell</td>
186+
</tr>
187+
</tbody>
188+
</table>
189+
190+
</body>
191+
</html>

‎scss/atoms/_overflow-indicator.scss

+46
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
// ==========================================================================
2+
// Overflow Indicator
3+
//
4+
// Shows indicator when there is more horizontal content.
5+
//
6+
// EXAMPLE
7+
// <div class="overflow-indicator__wrapper">
8+
// <div class="overflow-indicator__content">...</div>
9+
// </div>
10+
// ==========================================================================
11+
12+
.overflow-indicator__wrapper {
13+
position: relative;
14+
z-index: 1;
15+
margin-bottom: em( 20px );
16+
border: 0;
17+
background: #fff no-repeat;
18+
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 );
19+
background-position: 0 0, 100% 0;
20+
background-size: 10px 100%;
21+
overflow: auto;
22+
}
23+
24+
.overflow-indicator__wrapper > .overflow-indicator__content {
25+
position: relative;
26+
margin-bottom: 0;
27+
28+
&:before,
29+
&:after {
30+
content: "";
31+
position: absolute;
32+
top: 0;
33+
bottom: 0;
34+
left: 0;
35+
z-index: -1;
36+
margin: 0 -30px 0 0;
37+
width: 30px;
38+
background: linear-gradient( to right, #fff, #fff 30%, rgba( 255, 255, 255, 0 ) );
39+
}
40+
&:after {
41+
left: auto;
42+
right: 0;
43+
margin: 0 0 0 -30px;
44+
background: linear-gradient( to right, rgba( 255, 255, 255, 0 ), #fff 70%, #fff );
45+
}
46+
}

‎scss/atoms/_tables.scss

+92
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
/*
2+
* ==========================================================================
3+
* Typography
4+
* ==========================================================================
5+
*/
6+
7+
table {
8+
width: 100%;
9+
margin-bottom: em( 20px, 16px );
10+
font-size: em( 16px );
11+
text-align: left;
12+
}
13+
14+
thead {
15+
border-bottom: 1px solid #eee;
16+
17+
> tr > th {
18+
border-top: 0;
19+
}
20+
}
21+
22+
td {
23+
border-top: 1px solid #eee;
24+
padding: em( 12px, 16px );
25+
}
26+
27+
th {
28+
border-top: 1px solid #eee;
29+
padding: em( 12px, 12px );
30+
color: #666;
31+
font-weight: 400;
32+
font-size: em( 12px, 16px );
33+
white-space: nowrap;
34+
}
35+
36+
table {
37+
.active {
38+
background-color: #f5f5f5;
39+
}
40+
.success {
41+
background-color: #dff0d8;
42+
}
43+
.warning {
44+
background-color: #fcf8e3;
45+
}
46+
.danger {
47+
background-color: #f2dede;
48+
}
49+
.info {
50+
background-color: #d9edf7;
51+
}
52+
}
53+
54+
.striped-table>tbody>tr:nth-of-type(odd), {
55+
background-color: #f2f2f2;
56+
}
57+
58+
.table--responsive {
59+
position: relative;
60+
z-index: 1;
61+
margin-bottom: em( 20px );
62+
border: 0;
63+
background: #fff no-repeat;
64+
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 );
65+
background-position: 0 0, 100% 0;
66+
background-size: 10px 100%;
67+
overflow: auto;
68+
69+
table {
70+
position: relative;
71+
margin-bottom: 0;
72+
73+
&:before,
74+
&:after {
75+
content: "";
76+
position: absolute;
77+
top: 0;
78+
bottom: 0;
79+
left: 0;
80+
z-index: -1;
81+
margin: 0 -30px 0 0;
82+
width: 30px;
83+
background: linear-gradient( to right, #fff, #fff 30%, rgba( 255, 255, 255, 0 ) );
84+
}
85+
&:after {
86+
left: auto;
87+
right: 0;
88+
margin: 0 0 0 -30px;
89+
background: linear-gradient( to right, rgba( 255, 255, 255, 0 ), #fff 70%, #fff );
90+
}
91+
}
92+
}

‎scss/lint.scss

+3-1
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,9 @@
1616

1717
@import
1818
"atoms/icons/icons",
19-
"atoms/typography/typography";
19+
"atoms/tables",
20+
"atoms/typography/typography",
21+
"atoms/overflow-indicator";
2022

2123
@import
2224
"views/main";

0 commit comments

Comments
 (0)