@@ -11,61 +11,52 @@ features:
11
11
12
12
@include ('_ partials.work-in-progress')
13
13
14
- <div class =" border-t border-grey-lighter " >
15
- <table class =" w-full text-left table-collapse " >
16
- <thead>
17
- <tr>
18
- <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Class</th>
19
- <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Properties</th>
20
- <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Description</th>
21
- </tr>
22
- </thead>
23
- <tbody class="align-baseline">
24
- <tr>
25
- <td class="p-2 border-t border-smoke font-mono text-xs text-purple-dark whitespace-no-wrap">.bg-bottom</td>
26
- <td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark whitespace-no-wrap">background-position: bottom;</td>
27
- <td class="p-2 border-t border-smoke text-sm text-grey-darker">Place the background image on the bottom edge.</td>
28
- </tr>
29
- <tr>
30
- <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.bg-center</td>
31
- <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">background-position: center;</td>
32
- <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Place the background image in the center.</td>
33
- </tr>
34
- <tr>
35
- <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.bg-left</td>
36
- <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">background-position: left;</td>
37
- <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Place the background image on the left edge.</td>
38
- </tr>
39
- <tr>
40
- <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.bg-left-bottom</td>
41
- <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">background-position: left bottom;</td>
42
- <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Place the background image on the left bottom edge.</td>
43
- </tr>
44
- <tr>
45
- <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.bg-left-top</td>
46
- <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">background-position: left top;</td>
47
- <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Place the background image on the left top edge.</td>
48
- </tr>
49
- <tr>
50
- <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.bg-right</td>
51
- <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">background-position: right;</td>
52
- <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Place the background image on the right edge.</td>
53
- </tr>
54
- <tr>
55
- <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.bg-right-bottom</td>
56
- <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">background-position: right bottom;</td>
57
- <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Place the background image on the right bottom edge.</td>
58
- </tr>
59
- <tr>
60
- <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.bg-right-top</td>
61
- <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">background-position: right top;</td>
62
- <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Place the background image on the right top edge.</td>
63
- </tr>
64
- <tr>
65
- <td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.bg-top</td>
66
- <td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">background-position: top;</td>
67
- <td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Place the background image on the top edge.</td>
68
- </tr>
69
- </tbody>
70
- </table >
71
- </div >
14
+ @include ('_ partials.class-table', [
15
+ 'rows' => [
16
+ [
17
+ '.bg-bottom',
18
+ 'background-position: bottom;',
19
+ 'Place the background image on the bottom edge.',
20
+ ] ,
21
+ [
22
+ '.bg-center',
23
+ 'background-position: center;',
24
+ 'Place the background image in the center.',
25
+ ] ,
26
+ [
27
+ '.bg-left',
28
+ 'background-position: left;',
29
+ 'Place the background image on the left edge.',
30
+ ] ,
31
+ [
32
+ '.bg-left-bottom',
33
+ 'background-position: left bottom;',
34
+ 'Place the background image on the left bottom edge.',
35
+ ] ,
36
+ [
37
+ '.bg-left-top',
38
+ 'background-position: left top;',
39
+ 'Place the background image on the left top edge.',
40
+ ] ,
41
+ [
42
+ '.bg-right',
43
+ 'background-position: right;',
44
+ 'Place the background image on the right edge.',
45
+ ] ,
46
+ [
47
+ '.bg-right-bottom',
48
+ 'background-position: right bottom;',
49
+ 'Place the background image on the right bottom edge.',
50
+ ] ,
51
+ [
52
+ '.bg-right-top',
53
+ 'background-position: right top;',
54
+ 'Place the background image on the right top edge.',
55
+ ] ,
56
+ [
57
+ '.bg-top',
58
+ 'background-position: top;',
59
+ 'Place the background image on the top edge.',
60
+ ] ,
61
+ ]
62
+ ] )
0 commit comments