Skip to content

Commit

Permalink
Merge branch 'master' into develop
Browse files Browse the repository at this point in the history
  • Loading branch information
@adamwathan
adamwathan committed Nov 17, 2017
2 parents fc0e99e + 108d5d9 commit e197420
Show file tree
Hide file tree
Showing 4 changed files with 88 additions and 78 deletions.
22 changes: 22 additions & 0 deletions docs/source/_partials/class-table.blade.php
View file
Original file line number Diff line number Diff line change
@@ -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 changes: 13 additions & 20 deletions docs/source/docs/background-color.blade.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
107 changes: 49 additions & 58 deletions docs/source/docs/background-position.blade.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 changes: 4 additions & 0 deletions docs/tailwind.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,6 +71,10 @@ config.height = Object.assign(config.height, {
'128': '32rem',
})

config.maxHeight = Object.assign(config.maxHeight, {
'sm': '30rem',
})

config.padding = Object.assign(config.padding, {
'10': '2.5rem',
'12': '3rem',
Expand Down

0 comments on commit e197420

Please sign in to comment.