Skip to content

Commit e197420

Browse files
adamwathanadamwathan
committed
Merge branch 'master' into develop
2 parents fc0e99e + 108d5d9 commit e197420

File tree

4 files changed

+88
-78
lines changed

4 files changed

+88
-78
lines changed

‎docs/source/_partials/class-table.blade.php‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<div class="border-t border-b border-grey-light">
2+
<div class="max-h-sm overflow-y-scroll">
3+
<table class="w-full text-left table-collapse">
4+
<thead>
5+
<tr>
6+
<th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Class</th>
7+
<th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Properties</th>
8+
<th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Description</th>
9+
</tr>
10+
</thead>
11+
<tbody class="align-baseline">
12+
@foreach ($rows as $row)
13+
<tr>
14+
<td class="p-2 border-t {{ $loop->first ? 'border-smoke' : 'border-smoke-light' }} font-mono text-xs text-purple-dark whitespace-no-wrap">{{ $row[0] }}</td>
15+
<td class="p-2 border-t {{ $loop->first ? 'border-smoke' : 'border-smoke-light' }} font-mono text-xs text-blue-dark whitespace-pre">{{ $row[1] }}</td>
16+
<td class="p-2 border-t {{ $loop->first ? 'border-smoke' : 'border-smoke-light' }} text-sm text-grey-darker whitespace-no-wrap lg:whitespace-normal">{{ $row[2] }}</td>
17+
</tr>
18+
@endforeach
19+
</tbody>
20+
</table>
21+
</div>
22+
</div>

‎docs/source/docs/background-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">.bg-{{ $name }}</td>
27-
<td class="p-2 border-t {{ $loop->first ? 'border-smoke' : 'border-smoke-light' }} font-mono text-xs text-blue-dark">background-color: {{ $value }};</td>
28-
<td class="p-2 border-t {{ $loop->first ? 'border-smoke' : 'border-smoke-light' }} text-sm text-grey-darker">Set the background 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 = ".bg-{$name}";
17+
$code = "background-color: {$value};";
18+
$color = implode(' ', array_reverse(explode('-', $name)));
19+
$description = "Set the background 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/background-position.blade.md‎

Lines changed: 49 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -11,61 +11,52 @@ 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 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+
])

‎docs/tailwind.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -71,6 +71,10 @@ config.height = Object.assign(config.height, {
7171
'128': '32rem',
7272
})
7373

74+
config.maxHeight = Object.assign(config.maxHeight, {
75+
'sm': '30rem',
76+
})
77+
7478
config.padding = Object.assign(config.padding, {
7579
'10': '2.5rem',
7680
'12': '3rem',

0 commit comments

Comments
 (0)