Skip to content

Commit d037a60

Browse files
adamwathanadamwathan
committed
Update remaining docs pages to use class table partial
1 parent 705e048 commit d037a60

21 files changed

+514
-772
lines changed

‎docs/source/docs/background-size.blade.md‎

Lines changed: 14 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -11,31 +11,17 @@ 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">.bg-cover</td>
31-
<td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark">background-size: cover;</td>
32-
<td class="p-2 border-t border-smoke text-sm text-grey-darker">Scale the image until it fills the background layer.</td>
33-
</tr>
34-
<tr>
35-
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.bg-contain</td>
36-
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">background-size: contain;</td>
37-
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Scale the image to the outer edges without cropping or stretching.</td>
38-
</tr>
39-
</tbody>
40-
</table>
41-
</div>
14+
@include('_partials.class-table', [
15+
'rows' => [
16+
[
17+
'.bg-cover',
18+
'background-size: cover;',
19+
"Scale the image until it fills the background layer.",
20+
],
21+
[
22+
'.bg-contain',
23+
'background-size: contain;',
24+
"Scale the image to the outer edges without cropping or stretching.",
25+
],
26+
]
27+
])

‎docs/source/docs/border-color.blade.md‎

Lines changed: 13 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -11,26 +11,19 @@ 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-
<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-
@foreach ($page->config['colors'] as $name => $value)
25-
<tr>
26-
<td class="p-2 border-t {{ $loop->first ? 'border-smoke' : 'border-smoke-light' }} font-mono text-xs text-purple-dark">.border-{{ $name }}</td>
27-
<td class="p-2 border-t {{ $loop->first ? 'border-smoke' : 'border-smoke-light' }} font-mono text-xs text-blue-dark">border-color: {{ $value }};</td>
28-
<td class="p-2 border-t {{ $loop->first ? 'border-smoke' : 'border-smoke-light' }} text-sm text-grey-darker">Set the border color of an element to {{ implode(' ', array_reverse(explode('-', $name))) }}.</td>
29-
</tr>
30-
@endforeach
31-
</tbody>
32-
</table>
33-
</div>
14+
@include('_partials.class-table', [
15+
'rows' => $page->config['colors']->map(function ($value, $name) {
16+
$class = ".border-{$name}";
17+
$code = "border-color: {$value};";
18+
$color = implode(' ', array_reverse(explode('-', $name)));
19+
$description = "Set the border color of an element to {$color}.";
20+
return [
21+
$class,
22+
$code,
23+
$description,
24+
];
25+
})->values()->all()
26+
])
3427

3528
## Hover
3629

‎docs/source/docs/border-style.blade.md‎

Lines changed: 24 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -11,36 +11,27 @@ 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-
<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">.border-solid</td>
26-
<td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark">border-style: solid;</td>
27-
<td class="p-2 border-t border-smoke text-sm text-grey-darker">Sets the border style on an element to solid.</td>
28-
</tr>
29-
<tr>
30-
<td class="p-2 border-t border-smoke font-mono text-xs text-purple-dark">.border-dashed</td>
31-
<td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark">border-style: dashed;</td>
32-
<td class="p-2 border-t border-smoke text-sm text-grey-darker">Sets the border style on an element to dashed.</td>
33-
</tr>
34-
<tr>
35-
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.border-dotted</td>
36-
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">border-style: dotted;</td>
37-
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Sets the border style on an element to dotted.</td>
38-
</tr>
39-
<tr>
40-
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.border-none</td>
41-
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">border-style: none;</td>
42-
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Disables the border on an element.</td>
43-
</tr>
44-
</tbody>
45-
</table>
46-
</div>
14+
@include('_partials.class-table', [
15+
'rows' => [
16+
[
17+
'.border-solid',
18+
'border-style: solid;',
19+
"Sets the border style on an element to solid.",
20+
],
21+
[
22+
'.border-dashed',
23+
'border-style: dashed;',
24+
"Sets the border style on an element to dashed.",
25+
],
26+
[
27+
'.border-dotted',
28+
'border-style: dotted;',
29+
"Sets the border style on an element to dotted.",
30+
],
31+
[
32+
'.border-none',
33+
'border-style: none;',
34+
"Disables the border on an element.",
35+
],
36+
]
37+
])

‎docs/source/docs/cursor.blade.md‎

Lines changed: 19 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -11,36 +11,22 @@ 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/4">
18-
<col class="w-1/4">
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">.cursor-auto</td>
31-
<td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark">cursor: auto;</td>
32-
<td class="p-2 border-t border-smoke text-sm text-grey-darker">Set the mouse cursor to the default browser behavior.</td>
33-
</tr>
34-
<tr>
35-
<td class="p-2 border-t border-smoke font-mono text-xs text-purple-dark">.cursor-pointer</td>
36-
<td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark">cursor: pointer;</td>
37-
<td class="p-2 border-t border-smoke text-sm text-grey-darker">Set the mouse cursor to a pointer and indicate a link.</td>
38-
</tr>
39-
<tr>
40-
<td class="p-2 border-t border-smoke font-mono text-xs text-purple-dark">.cursor-not-allowed</td>
41-
<td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark">cursor: not-allowed;</td>
42-
<td class="p-2 border-t border-smoke text-sm text-grey-darker">Set the mouse cursor to indicate that the action will not be executed.</td>
43-
</tr>
44-
</tbody>
45-
</table>
46-
</div>
14+
@include('_partials.class-table', [
15+
'rows' => [
16+
[
17+
'.cursor-auto',
18+
'cursor: auto;',
19+
"Set the mouse cursor to the default browser behavior.",
20+
],
21+
[
22+
'.cursor-pointer',
23+
'cursor: pointer;',
24+
"Set the mouse cursor to a pointer and indicate a link.",
25+
],
26+
[
27+
'.cursor-not-allowed',
28+
'cursor: not-allowed;',
29+
"Set the mouse cursor to indicate that the action will not be executed.",
30+
],
31+
]
32+
])

‎docs/source/docs/flexbox-align-content.blade.md‎

Lines changed: 29 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -9,49 +9,35 @@ features:
99
focus: false
1010
---
1111

12-
<div class="border-t border-grey-lighter">
13-
<table class="w-full text-left table-collapse">
14-
<colgroup>
15-
<col class="w-1/5">
16-
<col class="w-1/3">
17-
<col>
18-
</colgroup>
19-
<thead>
20-
<tr>
21-
<th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Class</th>
22-
<th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Properties</th>
23-
<th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Description</th>
24-
</tr>
25-
</thead>
26-
<tbody class="align-baseline">
27-
<tr>
28-
<td class="p-2 border-t border-smoke font-mono text-xs text-purple-dark">.content-start</td>
29-
<td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark">align-content: flex-start;</td>
30-
<td class="p-2 border-t border-smoke text-sm text-grey-darker">Pack lines against the start of the cross axis.</td>
31-
</tr>
32-
<tr>
33-
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.content-center</td>
34-
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">align-content: center;</td>
35-
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Pack lines in the center of the cross axis.</td>
36-
</tr>
37-
<tr>
38-
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.content-end</td>
39-
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">align-content: flex-end;</td>
40-
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Pack lines against the end of the cross axis.</td>
41-
</tr>
42-
<tr>
43-
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.content-between</td>
44-
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">align-content: space-between;</td>
45-
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Distribute lines along the cross axis by adding an equal amount of space between each line.</td>
46-
</tr>
47-
<tr>
48-
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.content-around</td>
49-
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">align-content: space-around;</td>
50-
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Distribute lines along the cross axis by adding an equal amount of space around each line.</td>
51-
</tr>
52-
</tbody>
53-
</table>
54-
</div>
12+
@include('_partials.class-table', [
13+
'rows' => [
14+
[
15+
'.content-start',
16+
'align-content: flex-start;',
17+
"Pack lines against the start of the cross axis.",
18+
],
19+
[
20+
'.content-center',
21+
'align-content: center;',
22+
"Pack lines in the center of the cross axis.",
23+
],
24+
[
25+
'.content-end',
26+
'align-content: flex-end;',
27+
"Pack lines against the end of the cross axis.",
28+
],
29+
[
30+
'.content-between',
31+
'align-content: space-between;',
32+
"Distribute lines along the cross axis by adding an equal amount of space between each line.",
33+
],
34+
[
35+
'.content-around',
36+
'align-content: space-around;',
37+
"Distribute lines along the cross axis by adding an equal amount of space around each line.",
38+
],
39+
]
40+
])
5541

5642
### Start <span class="ml-2 font-semibold text-slate-light text-sm uppercase tracking-wide">Default</span>
5743

‎docs/source/docs/flexbox-align-items.blade.md‎

Lines changed: 29 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -9,49 +9,35 @@ features:
99
focus: false
1010
---
1111

12-
<div class="border-t border-grey-lighter">
13-
<table class="w-full text-left table-collapse">
14-
<colgroup>
15-
<col class="w-1/5">
16-
<col class="w-1/3">
17-
<col>
18-
</colgroup>
19-
<thead>
20-
<tr>
21-
<th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Class</th>
22-
<th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Properties</th>
23-
<th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Description</th>
24-
</tr>
25-
</thead>
26-
<tbody class="align-baseline">
27-
<tr>
28-
<td class="p-2 border-t border-smoke font-mono text-xs text-purple-dark">.items-stretch</td>
29-
<td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark">align-items: flex-stretch;</td>
30-
<td class="p-2 border-t border-smoke text-sm text-grey-darker">Stretch items to fill the cross axis.</td>
31-
</tr>
32-
<tr>
33-
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.items-start</td>
34-
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">align-items: flex-start;</td>
35-
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Align items against the start of the cross axis.</td>
36-
</tr>
37-
<tr>
38-
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.items-center</td>
39-
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">align-items: center;</td>
40-
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Align items along the center of the cross axis.</td>
41-
</tr>
42-
<tr>
43-
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.items-end</td>
44-
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">align-items: flex-end;</td>
45-
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Align items against the end of the cross axis.</td>
46-
</tr>
47-
<tr>
48-
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.items-baseline</td>
49-
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">align-items: baseline;</td>
50-
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Align the baselines of each item.</td>
51-
</tr>
52-
</tbody>
53-
</table>
54-
</div>
12+
@include('_partials.class-table', [
13+
'rows' => [
14+
[
15+
'.items-stretch',
16+
'align-items: flex-stretch;',
17+
"Stretch items to fill the cross axis.",
18+
],
19+
[
20+
'.items-start',
21+
'align-items: flex-start;',
22+
"Align items against the start of the cross axis.",
23+
],
24+
[
25+
'.items-center',
26+
'align-items: center;',
27+
"Align items along the center of the cross axis.",
28+
],
29+
[
30+
'.items-end',
31+
'align-items: flex-end;',
32+
"Align items against the end of the cross axis.",
33+
],
34+
[
35+
'.items-baseline',
36+
'align-items: baseline;',
37+
"Align the baselines of each item.",
38+
],
39+
]
40+
])
5541

5642
### Stretch <span class="ml-2 font-semibold text-slate-light text-sm uppercase tracking-wide">Default</span>
5743

0 commit comments

Comments
 (0)