archive-gh-me/tailwindcss
1
0
Fork 0
mirror of https://github.com/tailwindlabs/tailwindcss.git synced 2025-12-08 21:36:08 +00:00
Code Issues Projects Releases Wiki Activity

Merge pull request #207 from tailwindcss/class-table-partial

Browse Source 
Add class-table partial to make class tables more maintainable
This commit is contained in:
Adam Wathan 2017-11-17 09:27:55 -05:00 committed by GitHub
commit 108d5d94de
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 88 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
docs/source/_partials/class-table.blade.php Normal file
View File

@ -0,0 +1,22 @@
<div class="border-t border-b border-grey-light">
<div class="max-h-sm overflow-y-scroll">
<table class="w-full text-left table-collapse">
<thead>
<tr>
<th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Class</th>
<th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Properties</th>
<th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Description</th>
</tr>
</thead>
<tbody class="align-baseline">
@foreach ($rows as $row)
<tr>
<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>
<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>
<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>
</tr>
@endforeach
</tbody>
</table>
</div>
</div>

33
docs/source/docs/background-color.blade.md
View File

@ -11,26 +11,19 @@ features:
@include('_partials.work-in-progress')
<div class="border-t border-grey-lighter">
<table class="w-full text-left table-collapse">
<thead>
<tr>
<th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Class</th>
<th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Properties</th>
<th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Description</th>
</tr>
</thead>
<tbody class="align-baseline">
@foreach ($page->config['colors'] as $name => $value)
<tr>
<td class="p-2 border-t {{ $loop->first ? 'border-smoke' : 'border-smoke-light' }} font-mono text-xs text-purple-dark">.bg-{{ $name }}</td>
<td class="p-2 border-t {{ $loop->first ? 'border-smoke' : 'border-smoke-light' }} font-mono text-xs text-blue-dark">background-color: {{ $value }};</td>
<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>
</tr>
@endforeach
</tbody>
</table>
</div>
@include('_partials.class-table', [
'rows' => $page->config['colors']->map(function ($value, $name) {
$class = ".bg-{$name}";
$code = "background-color: {$value};";
$color = implode(' ', array_reverse(explode('-', $name)));
$description = "Set the background color of an element to {$color}.";
return [
$class,
$code,
$description,
];
})->values()->all()
])
## Hover

107
docs/source/docs/background-position.blade.md
View File

@ -11,61 +11,52 @@ features:
@include('_partials.work-in-progress')
<div class="border-t border-grey-lighter">
<table class="w-full text-left table-collapse">
<thead>
<tr>
<th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Class</th>
<th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Properties</th>
<th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Description</th>
</tr>
</thead>
<tbody class="align-baseline">
<tr>
<td class="p-2 border-t border-smoke font-mono text-xs text-purple-dark whitespace-no-wrap">.bg-bottom</td>
<td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark whitespace-no-wrap">background-position: bottom;</td>
<td class="p-2 border-t border-smoke text-sm text-grey-darker">Place the background image on the bottom edge.</td>
</tr>
<tr>
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.bg-center</td>
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">background-position: center;</td>
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Place the background image in the center.</td>
</tr>
<tr>
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.bg-left</td>
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">background-position: left;</td>
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Place the background image on the left edge.</td>
</tr>
<tr>
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.bg-left-bottom</td>
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">background-position: left bottom;</td>
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Place the background image on the left bottom edge.</td>
</tr>
<tr>
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.bg-left-top</td>
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">background-position: left top;</td>
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Place the background image on the left top edge.</td>
</tr>
<tr>
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.bg-right</td>
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">background-position: right;</td>
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Place the background image on the right edge.</td>
</tr>
<tr>
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.bg-right-bottom</td>
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">background-position: right bottom;</td>
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Place the background image on the right bottom edge.</td>
</tr>
<tr>
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.bg-right-top</td>
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">background-position: right top;</td>
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Place the background image on the right top edge.</td>
</tr>
<tr>
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.bg-top</td>
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">background-position: top;</td>
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Place the background image on the top edge.</td>
</tr>
</tbody>
</table>
</div>
@include('_partials.class-table', [
'rows' => [
[
'.bg-bottom',
'background-position: bottom;',
'Place the background image on the bottom edge.',
],
[
'.bg-center',
'background-position: center;',
'Place the background image in the center.',
],
[
'.bg-left',
'background-position: left;',
'Place the background image on the left edge.',
],
[
'.bg-left-bottom',
'background-position: left bottom;',
'Place the background image on the left bottom edge.',
],
[
'.bg-left-top',
'background-position: left top;',
'Place the background image on the left top edge.',
],
[
'.bg-right',
'background-position: right;',
'Place the background image on the right edge.',
],
[
'.bg-right-bottom',
'background-position: right bottom;',
'Place the background image on the right bottom edge.',
],
[
'.bg-right-top',
'background-position: right top;',
'Place the background image on the right top edge.',
],
[
'.bg-top',
'background-position: top;',
'Place the background image on the top edge.',
],
]
])

4
docs/tailwind.js
View File

@ -70,6 +70,10 @@ config.height = Object.assign(config.height, {
'7': '1.75rem',
})
config.maxHeight = Object.assign(config.maxHeight, {
'sm': '30rem',
})
config.padding = Object.assign(config.padding, {
'10': '2.5rem',
'12': '3rem',