Skip to content

Commit cf34d0d

Browse files
committed
Use class table partial for vertical alignment docs
1 parent 6518e82 commit cf34d0d

File tree

1 file changed

+34
-48
lines changed

1 file changed

+34
-48
lines changed

docs/source/docs/vertical-alignment.blade.md

Lines changed: 34 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -11,51 +11,37 @@ features:
1111

1212
@include('_partials.work-in-progress')
1313

14-
<div class="border-t border-grey-lighter">
15-
<table class="w-full text-left table-collapse">
16-
<colgroup>
17-
<col class="w-1/5">
18-
<col class="w-1/3">
19-
<col>
20-
</colgroup>
21-
<thead>
22-
<tr>
23-
<th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Class</th>
24-
<th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Properties</th>
25-
<th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Description</th>
26-
</tr>
27-
</thead>
28-
<tbody class="align-baseline">
29-
<tr>
30-
<td class="p-2 border-t border-smoke font-mono text-xs text-purple-dark">.align-baseline</td>
31-
<td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark">vertical-align: baseline;</td>
32-
<td class="p-2 border-t border-smoke text-sm text-grey-darker">Align the baseline of an element with the baseline of its parent.</td>
33-
</tr>
34-
<tr>
35-
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.align-top</td>
36-
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">vertical-align: top;</td>
37-
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Align the top of an element and its descendants with the top of the entire line.</td>
38-
</tr>
39-
<tr>
40-
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.align-middle</td>
41-
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">vertical-align: middle;</td>
42-
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Align the middle of an element with the baseline plus half the x-height of the parent.</td>
43-
</tr>
44-
<tr>
45-
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.align-bottom</td>
46-
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">vertical-align: bottom;</td>
47-
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Align the bottom of an element and its descendants with the bottom of the entire line.</td>
48-
</tr>
49-
<tr>
50-
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.align-text-top</td>
51-
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">vertical-align: text-top;</td>
52-
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Align the top of an element with the top of the parent element's font.</td>
53-
</tr>
54-
<tr>
55-
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.align-text-bottom</td>
56-
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">vertical-align: text-bottom;</td>
57-
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Align the bottom of an element with the bottom of the parent element's font.</td>
58-
</tr>
59-
</tbody>
60-
</table>
61-
</div>
14+
@include('_partials.class-table', [
15+
'rows' => [
16+
[
17+
'.align-baseline',
18+
'vertical-align: baseline;',
19+
"Align the baseline of an element with the baseline of its parent.",
20+
],
21+
[
22+
'.align-top',
23+
'vertical-align: top;',
24+
"Align the top of an element and its descendants with the top of the entire line.",
25+
],
26+
[
27+
'.align-middle',
28+
'vertical-align: middle;',
29+
"Align the middle of an element with the baseline plus half the x-height of the parent.",
30+
],
31+
[
32+
'.align-bottom',
33+
'vertical-align: bottom;',
34+
"Align the bottom of an element and its descendants with the bottom of the entire line.",
35+
],
36+
[
37+
'.align-text-top',
38+
'vertical-align: text-top;',
39+
"Align the top of an element with the top of the parent element's font.",
40+
],
41+
[
42+
'.align-text-bottom',
43+
'vertical-align: text-bottom;',
44+
"Align the bottom of an element with the bottom of the parent element's font.",
45+
],
46+
]
47+
])

0 commit comments

Comments
 (0)