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

Commit 74ae42d

Browse files
kristyjykristyjy
committed
Tables: Fix test errors and clear out non-base table styles
1 parent 6f0fa30 commit 74ae42d

File tree

4 files changed

+23
-142
lines changed

4 files changed

+23
-142
lines changed

‎demos/tables.html

+17-76
Original file line numberDiff line numberDiff line change
@@ -22,94 +22,35 @@ <h2>Tables</h2>
2222
<table>
2323
<thead>
2424
<tr>
25-
<th>#</th>
26-
<th>Table heading</th>
27-
<th>Table heading</th>
28-
<th>Table heading</th>
25+
<th scope="col">ID</th>
26+
<th scope="col">Product</th>
27+
<th scope="col">Category</th>
28+
<th scope="col">Price</th>
2929
</tr>
3030
</thead>
3131
<tbody>
3232
<tr>
33-
<th>1</th>
34-
<td>Table cell</td>
35-
<td>Table cell</td>
36-
<td>Table cell</td>
33+
<th scope="row">1</th>
34+
<td>T-Shirt</td>
35+
<td>Apparel</td>
36+
<td>$12.99</td>
3737
</tr>
3838
<tr>
39-
<th>2</th>
40-
<td>Table cell</td>
41-
<td>Table cell</td>
42-
<td>Table cell</td>
39+
<th scope="row">2</th>
40+
<td>Sweat Shirt</td>
41+
<td>Apparel</td>
42+
<td>$24.99</td>
4343
</tr>
4444
<tr>
45-
<th>3</th>
46-
<td>Table cell</td>
47-
<td>Table cell</td>
48-
<td>Table cell</td>
45+
<th scope="row">3</th>
46+
<td>Necklace</td>
47+
<td>Accessories</td>
48+
<td>$29.99</td>
4949
</tr>
5050
</tbody>
5151
</table>
5252

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>
53+
<p>Here's a paragraph to show spacing around the table. Aenean lacinia bibendum nulla sed consectetur. Maecenas faucibus mollis interdum..</p>
11354

11455
</body>
11556
</html>

‎scss/atoms/tables/_mixins.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,4 +2,4 @@
22
* ==========================================================================
33
* Table mixins
44
* ==========================================================================
5-
*/
5+
*/

‎scss/atoms/tables/_tables.scss

+1-60
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,6 @@
99
"mixins";
1010

1111
table {
12-
width: 100%;
1312
margin: map-get($table-base, margin);
1413
font-size: map-get($table-base, font-size);
1514
text-align: left;
@@ -30,66 +29,8 @@ td {
3029
th {
3130
border-top: map-get($table-base, border);
3231
padding: map-get($table-base, padding);
33-
color: map-get($table-base, color);
32+
color: map-get($text, light);
3433
font-weight: 400;
3534
font-size: map-get($table-base, thead-font-size);
3635
white-space: nowrap;
3736
}
38-
39-
table {
40-
.active {
41-
background-color: #f5f5f5;
42-
}
43-
.success {
44-
background-color: #dff0d8;
45-
}
46-
.warning {
47-
background-color: #fcf8e3;
48-
}
49-
.danger {
50-
background-color: #f2dede;
51-
}
52-
.info {
53-
background-color: #d9edf7;
54-
}
55-
}
56-
57-
.striped-table > tbody > tr:nth-of-type(odd), {
58-
background-color: #f2f2f2;
59-
}
60-
61-
.table--responsive {
62-
position: relative;
63-
z-index: 1;
64-
margin-bottom: em( 20px );
65-
border: 0;
66-
background: #fff no-repeat;
67-
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 );
68-
background-position: 0 0, 100% 0;
69-
background-size: 10px 100%;
70-
overflow: auto;
71-
72-
table {
73-
position: relative;
74-
margin-bottom: 0;
75-
76-
&:before,
77-
&:after {
78-
content: "";
79-
position: absolute;
80-
top: 0;
81-
bottom: 0;
82-
left: 0;
83-
z-index: -1;
84-
margin: 0 -30px 0 0;
85-
width: 30px;
86-
background: linear-gradient( to right, #fff, #fff 30%, rgba( 255, 255, 255, 0 ) );
87-
}
88-
&:after {
89-
left: auto;
90-
right: 0;
91-
margin: 0 0 0 -30px;
92-
background: linear-gradient( to right, rgba( 255, 255, 255, 0 ), #fff 70%, #fff );
93-
}
94-
}
95-
}

‎scss/variables/tables.js

+4-5
Original file line numberDiff line numberDiff line change
@@ -14,13 +14,12 @@ chassis.table = {
1414
value: {
1515
"margin": "0 0 1em",
1616
"font-size": "16px",
17-
"thead-font-size" : "12px",
17+
"thead-font-size": "12px",
1818
"border": "1px solid #eee",
19-
"padding" : "12px",
20-
"color" : "#666"
19+
"padding": "12px"
2120
}
22-
},
21+
}
2322
};
2423

2524
return chassis;
26-
} ) );
25+
} ) );

0 commit comments

Comments
 (0)