Skip to content

Commit d77f088

Browse files
panicdragonpanicdragon
committed
refactor: 💡 table style
1 parent 6676946 commit d77f088

7 files changed

Lines changed: 577 additions & 123 deletions

File tree

‎src/components/box/table--border.hbs‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
<table class="table bordered">
2+
<caption>Table caption</caption>
3+
<thead>
4+
<tr>
5+
<th>Table Heading</th>
6+
<th>Table Heading</th>
7+
<th>Table Heading</th>
8+
</tr>
9+
</thead>
10+
<tfoot>
11+
<tr>
12+
<td>Table Footer</td>
13+
<td>Table Footer</td>
14+
<td>Table Footer</td>
15+
</tr>
16+
</tfoot>
17+
<tbody>
18+
<tr>
19+
<td>Table Data</td>
20+
<td>Table Data</td>
21+
<td>Table Data</td>
22+
</tr>
23+
<tr>
24+
<td>Table Data</td>
25+
<td>Table Data</td>
26+
<td>Table Data</td>
27+
</tr>
28+
<tr>
29+
<td>Table Data</td>
30+
<td>Table Data</td>
31+
<td>Table Data</td>
32+
</tr>
33+
</tbody>
34+
</table>

‎src/components/box/table--color-variation.hbs‎

Lines changed: 234 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,234 @@
1+
<table class="table">
2+
<caption>Table caption</caption>
3+
<thead>
4+
<tr class="primary">
5+
<th>Table Heading</th>
6+
<th>Table Heading</th>
7+
<th>Table Heading</th>
8+
</tr>
9+
</thead>
10+
<tbody>
11+
<tr>
12+
<th>Table Heading</th>
13+
<th>Table Heading</th>
14+
<th>Table Heading</th>
15+
</tr>
16+
<tr class="green">
17+
<td>Table Data</td>
18+
<td>Table Data</td>
19+
<td>Table Data</td>
20+
</tr>
21+
<tr class="blue center">
22+
<td>Table Data (center)</td>
23+
<td>Table Data (center)</td>
24+
<td>Table Data (center)</td>
25+
</tr>
26+
<tr class="orange">
27+
<td>Table Data</td>
28+
<td class="center">Table Data (center)</td>
29+
<td class="right">Table Data (right)</td>
30+
</tr>
31+
<tr class="red">
32+
<td>Table Data</td>
33+
<td class="center">Table Data (center)</td>
34+
<td class="right">Table Data (right)</td>
35+
</tr>
36+
<tr>
37+
<td class="green">Table Data</td>
38+
<td class="blue center">Table Data (center)</td>
39+
<td class="red right">Table Data (right)</td>
40+
</tr>
41+
</tbody>
42+
<tfoot>
43+
<tr>
44+
<td class="orange">Table Footer</td>
45+
<td class="red">Table Footer</td>
46+
<td class="orange">Table Footer</td>
47+
</tr>
48+
</tfoot>
49+
</table>
50+
51+
<br><br><br><br><br><br>
52+
53+
<table class="table primary">
54+
<caption>Table caption</caption>
55+
<thead>
56+
<tr>
57+
<th>Table Heading</th>
58+
<th>Table Heading</th>
59+
<th>Table Heading</th>
60+
</tr>
61+
</thead>
62+
<tbody>
63+
<tr>
64+
<td>Table Data</td>
65+
<td>Table Data</td>
66+
<td>Table Data</td>
67+
</tr>
68+
<tr class="center">
69+
<td>Table Data (center)</td>
70+
<td>Table Data (center)</td>
71+
<td>Table Data (center)</td>
72+
</tr>
73+
<tr>
74+
<td>Table Data</td>
75+
<td class="center">Table Data (center)</td>
76+
<td class="right">Table Data (right)</td>
77+
</tr>
78+
</tbody>
79+
<tfoot>
80+
<tr>
81+
<td>Table Footer</td>
82+
<td>Table Footer</td>
83+
<td>Table Footer</td>
84+
</tr>
85+
</tfoot>
86+
</table>
87+
88+
<br><br><br><br><br><br>
89+
90+
<table class="table blue">
91+
<caption>Table caption</caption>
92+
<thead>
93+
<tr>
94+
<th>Table Heading</th>
95+
<th>Table Heading</th>
96+
<th>Table Heading</th>
97+
</tr>
98+
</thead>
99+
<tbody>
100+
<tr>
101+
<td>Table Data</td>
102+
<td>Table Data</td>
103+
<td>Table Data</td>
104+
</tr>
105+
<tr class="center">
106+
<td>Table Data (center)</td>
107+
<td>Table Data (center)</td>
108+
<td>Table Data (center)</td>
109+
</tr>
110+
<tr>
111+
<td>Table Data</td>
112+
<td class="center">Table Data (center)</td>
113+
<td class="right">Table Data (right)</td>
114+
</tr>
115+
</tbody>
116+
<tfoot>
117+
<tr>
118+
<td>Table Footer</td>
119+
<td>Table Footer</td>
120+
<td>Table Footer</td>
121+
</tr>
122+
</tfoot>
123+
</table>
124+
125+
<br><br><br><br><br><br>
126+
127+
<table class="table green">
128+
<caption>Table caption</caption>
129+
<thead>
130+
<tr>
131+
<th>Table Heading</th>
132+
<th>Table Heading</th>
133+
<th>Table Heading</th>
134+
</tr>
135+
</thead>
136+
<tbody>
137+
<tr>
138+
<td>Table Data</td>
139+
<td>Table Data</td>
140+
<td>Table Data</td>
141+
</tr>
142+
<tr class="center">
143+
<td>Table Data (center)</td>
144+
<td>Table Data (center)</td>
145+
<td>Table Data (center)</td>
146+
</tr>
147+
<tr>
148+
<td>Table Data</td>
149+
<td class="center">Table Data (center)</td>
150+
<td class="right">Table Data (right)</td>
151+
</tr>
152+
</tbody>
153+
<tfoot>
154+
<tr>
155+
<td>Table Footer</td>
156+
<td>Table Footer</td>
157+
<td>Table Footer</td>
158+
</tr>
159+
</tfoot>
160+
</table>
161+
162+
<br><br><br><br><br><br>
163+
164+
<table class="table orange">
165+
<caption>Table caption</caption>
166+
<thead>
167+
<tr>
168+
<th>Table Heading</th>
169+
<th>Table Heading</th>
170+
<th>Table Heading</th>
171+
</tr>
172+
</thead>
173+
<tbody>
174+
<tr>
175+
<td>Table Data</td>
176+
<td>Table Data</td>
177+
<td>Table Data</td>
178+
</tr>
179+
<tr class="center">
180+
<td>Table Data (center)</td>
181+
<td>Table Data (center)</td>
182+
<td>Table Data (center)</td>
183+
</tr>
184+
<tr>
185+
<td>Table Data</td>
186+
<td class="center">Table Data (center)</td>
187+
<td class="right">Table Data (right)</td>
188+
</tr>
189+
</tbody>
190+
<tfoot>
191+
<tr>
192+
<td>Table Footer</td>
193+
<td>Table Footer</td>
194+
<td>Table Footer</td>
195+
</tr>
196+
</tfoot>
197+
</table>
198+
199+
<br><br><br><br><br><br>
200+
201+
<table class="table red">
202+
<caption>Table caption</caption>
203+
<thead>
204+
<tr>
205+
<th>Table Heading</th>
206+
<th>Table Heading</th>
207+
<th>Table Heading</th>
208+
</tr>
209+
</thead>
210+
<tbody>
211+
<tr>
212+
<td>Table Data</td>
213+
<td>Table Data</td>
214+
<td>Table Data</td>
215+
</tr>
216+
<tr class="center">
217+
<td>Table Data (center)</td>
218+
<td>Table Data (center)</td>
219+
<td>Table Data (center)</td>
220+
</tr>
221+
<tr>
222+
<td>Table Data</td>
223+
<td class="center">Table Data (center)</td>
224+
<td class="right">Table Data (right)</td>
225+
</tr>
226+
</tbody>
227+
<tfoot>
228+
<tr>
229+
<td>Table Footer</td>
230+
<td>Table Footer</td>
231+
<td>Table Footer</td>
232+
</tr>
233+
</tfoot>
234+
</table>

‎src/components/box/table--hover.hbs‎

Lines changed: 108 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,108 @@
1+
<table class="table hover">
2+
<caption>Table caption</caption>
3+
<thead>
4+
<tr>
5+
<th>Table Heading</th>
6+
<th>Table Heading</th>
7+
<th>Table Heading</th>
8+
</tr>
9+
</thead>
10+
<tbody>
11+
<tr>
12+
<td>Table Data</td>
13+
<td>Table Data</td>
14+
<td>Table Data</td>
15+
</tr>
16+
<tr class="center">
17+
<td>Table Data (center)</td>
18+
<td>Table Data (center)</td>
19+
<td>Table Data (center)</td>
20+
</tr>
21+
<tr>
22+
<td>Table Data</td>
23+
<td class="center">Table Data (center)</td>
24+
<td class="right">Table Data (right)</td>
25+
</tr>
26+
</tbody>
27+
<tfoot>
28+
<tr>
29+
<td>Table Footer</td>
30+
<td>Table Footer</td>
31+
<td>Table Footer</td>
32+
</tr>
33+
</tfoot>
34+
</table>
35+
36+
<br><br><br><br><br><br>
37+
38+
<table class="table">
39+
<caption>TH, TD hover</caption>
40+
<thead>
41+
<tr>
42+
<th class="hover">Table Heading</th>
43+
<th class="hover">Table Heading</th>
44+
<th class="hover">Table Heading</th>
45+
</tr>
46+
</thead>
47+
<tbody>
48+
<tr>
49+
<td class="hover">Table Data</td>
50+
<td class="hover">Table Data</td>
51+
<td class="hover">Table Data</td>
52+
</tr>
53+
<tr class="center">
54+
<td class="hover">Table Data (center)</td>
55+
<td class="hover">Table Data (center)</td>
56+
<td class="hover">Table Data (center)</td>
57+
</tr>
58+
<tr>
59+
<td class="hover">Table Data</td>
60+
<td class="center hover">Table Data (center)</td>
61+
<td class="right hover">Table Data (right)</td>
62+
</tr>
63+
</tbody>
64+
<tfoot>
65+
<tr>
66+
<td class="hover">Table Footer</td>
67+
<td class="hover">Table Footer</td>
68+
<td class="hover">Table Footer</td>
69+
</tr>
70+
</tfoot>
71+
</table>
72+
73+
<br><br><br><br><br><br>
74+
75+
<table class="table singleHover">
76+
<caption>singleHover class</caption>
77+
<thead>
78+
<tr>
79+
<th>Table Heading</th>
80+
<th>Table Heading</th>
81+
<th>Table Heading</th>
82+
</tr>
83+
</thead>
84+
<tbody>
85+
<tr>
86+
<td>Table Data</td>
87+
<td>Table Data</td>
88+
<td>Table Data</td>
89+
</tr>
90+
<tr class="center">
91+
<td>Table Data (center)</td>
92+
<td>Table Data (center)</td>
93+
<td>Table Data (center)</td>
94+
</tr>
95+
<tr>
96+
<td>Table Data</td>
97+
<td class="center">Table Data (center)</td>
98+
<td class="right">Table Data (right)</td>
99+
</tr>
100+
</tbody>
101+
<tfoot>
102+
<tr>
103+
<td>Table Footer</td>
104+
<td>Table Footer</td>
105+
<td>Table Footer</td>
106+
</tr>
107+
</tfoot>
108+
</table>

0 commit comments

Comments
 (0)