mirror of
https://github.com/tailwindlabs/tailwindcss.git
synced 2025-12-08 21:36:08 +00:00
Swap hand-coded tables for class table partial in typography docs pages
This commit is contained in:
Adam Wathan
parent
65319df7ca
commit
dafbd7d128
@ -1,5 +1,5 @@
|
||||
<div class="border-t border-b border-grey-light">
|
||||
<div class="max-h-sm overflow-y-scroll">
|
||||
<div class="{{ count($rows) > 10 ? 'max-h-sm' : '' }} overflow-y-scroll">
|
||||
<table class="w-full text-left table-collapse">
|
||||
<thead>
|
||||
<tr>
|
||||
@ -11,9 +11,9 @@
|
||||
<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>
|
||||
<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>
|
||||
|
||||
@ -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">.font-hairline</td>
|
||||
<td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark">font-weight: 100;</td>
|
||||
<td class="p-2 border-t border-smoke text-sm text-grey-darker">Set the font weight of an element to hairline.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.font-thin</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">font-weight: 200;</td>
|
||||
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the font weight of an element to thin.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.font-light</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">font-weight: 300;</td>
|
||||
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the font weight of an element to light.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.font-normal</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">font-weight: 400;</td>
|
||||
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the font weight of an element to normal.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.font-medium</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">font-weight: 500;</td>
|
||||
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the font weight of an element to medium.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.font-semibold</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">font-weight: 600;</td>
|
||||
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the font weight of an element to semibold.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.font-bold</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">font-weight: 700;</td>
|
||||
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the font weight of an element to bold.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.font-extrabold</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">font-weight: 800;</td>
|
||||
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the font weight of an element to extrabold.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.font-black</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">font-weight: 900;</td>
|
||||
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the font weight of an element to black.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
@include('_partials.class-table', [
|
||||
'rows' => [
|
||||
[
|
||||
'.font-hairline',
|
||||
'font-weight: 100;',
|
||||
'Set the font weight of an element to hairline.',
|
||||
],
|
||||
[
|
||||
'.font-thin',
|
||||
'font-weight: 200;',
|
||||
'Set the font weight of an element to thin.',
|
||||
],
|
||||
[
|
||||
'.font-light',
|
||||
'font-weight: 300;',
|
||||
'Set the font weight of an element to light.',
|
||||
],
|
||||
[
|
||||
'.font-normal',
|
||||
'font-weight: 400;',
|
||||
'Set the font weight of an element to normal.',
|
||||
],
|
||||
[
|
||||
'.font-medium',
|
||||
'font-weight: 500;',
|
||||
'Set the font weight of an element to medium.',
|
||||
],
|
||||
[
|
||||
'.font-semibold',
|
||||
'font-weight: 600;',
|
||||
'Set the font weight of an element to semibold.',
|
||||
],
|
||||
[
|
||||
'.font-bold',
|
||||
'font-weight: 700;',
|
||||
'Set the font weight of an element to bold.',
|
||||
],
|
||||
[
|
||||
'.font-extrabold',
|
||||
'font-weight: 800;',
|
||||
'Set the font weight of an element to extrabold.',
|
||||
],
|
||||
[
|
||||
'.font-black',
|
||||
'font-weight: 900;',
|
||||
'Set the font weight of an element to black.',
|
||||
],
|
||||
]
|
||||
])
|
||||
|
||||
@ -11,36 +11,22 @@ features:
|
||||
|
||||
@include('_partials.work-in-progress')
|
||||
|
||||
<div class="border-t border-grey-lighter">
|
||||
<table class="w-full text-left table-collapse">
|
||||
<colgroup>
|
||||
<col class="w-1/5">
|
||||
<col class="w-2/5">
|
||||
<col class="w-2/5">
|
||||
</colgroup>
|
||||
<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">.font-sans</td>
|
||||
<td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark">font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;</td>
|
||||
<td class="p-2 border-t border-smoke text-sm text-grey-darker">Set the font family to the sans font stack.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.font-serif</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">font-family: Constantia, Lucida Bright, Lucidabright, Lucida Serif, Lucida, DejaVu Serif, Bitstream Vera Serif, Liberation Serif, Georgia, serif;</td>
|
||||
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the font family to the serif font stack.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.font-mono</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">font-family: Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;</td>
|
||||
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the font family to the mono font stack.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
@include('_partials.class-table', [
|
||||
'rows' => [
|
||||
[
|
||||
'.font-sans',
|
||||
"font-family:\n -apple-system,\n BlinkMacSystemFont,\n Segoe UI,\n Roboto,\n Oxygen,\n Ubuntu,\n Cantarell,\n Fira Sans,\n Droid Sans,\n Helvetica Neue,\n sans-serif;",
|
||||
'Set the font family to the sans font stack.',
|
||||
],
|
||||
[
|
||||
'.font-serif',
|
||||
"font-family:\n Constantia,\n Lucida Bright,\n Lucidabright,\n Lucida Serif,\n Lucida,\n DejaVu Serif,\n Bitstream Vera Serif,\n Liberation Serif,\n Georgia,\n serif;",
|
||||
'Set the font family to the serif font stack.',
|
||||
],
|
||||
[
|
||||
'.font-mono',
|
||||
"font-family:\n Menlo,\n Monaco,\n Consolas,\n Liberation Mono,\n Courier New,\n monospace;",
|
||||
'Set the font family to the mono font stack.',
|
||||
],
|
||||
]
|
||||
])
|
||||
|
||||
@ -11,31 +11,22 @@ 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">.tracking-tight</td>
|
||||
<td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark">letter-spacing: -0.05em;</td>
|
||||
<td class="p-2 border-t border-smoke text-sm text-grey-darker">Set the letter spacing of an element to <code>-0.05em</code>.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.tracking-normal</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">letter-spacing: 0;</td>
|
||||
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the letter spacing of an element to <code>0</code>.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.tracking-wide</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">letter-spacing: 0.05em;</td>
|
||||
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the letter spacing of an element to <code>0.05em</code>.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
@include('_partials.class-table', [
|
||||
'rows' => [
|
||||
[
|
||||
'.tracking-tight',
|
||||
'letter-spacing: -0.05em;',
|
||||
'Set the letter spacing of an element to <code>-0.05em</code>.',
|
||||
],
|
||||
[
|
||||
'.tracking-normal',
|
||||
'letter-spacing: 0;',
|
||||
'Set the letter spacing of an element to <code>0</code>.',
|
||||
],
|
||||
[
|
||||
'.tracking-wide',
|
||||
'letter-spacing: 0.05em;',
|
||||
'Set the letter spacing of an element to <code>0.05em</code>.',
|
||||
],
|
||||
]
|
||||
])
|
||||
|
||||
@ -11,36 +11,27 @@ 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">.leading-none</td>
|
||||
<td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark">line-height: 1;</td>
|
||||
<td class="p-2 border-t border-smoke text-sm text-grey-darker">Set the line height of an element to <code>1</code>.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.leading-tight</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">line-height: 1.25;</td>
|
||||
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the line height of an element to <code>1.25</code>.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.leading-normal</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">line-height: 1.5;</td>
|
||||
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the line height of an element to <code>1.5</code>.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.leading-loose</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">line-height: 2;</td>
|
||||
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the line height of an element to <code>2</code>.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
@include('_partials.class-table', [
|
||||
'rows' => [
|
||||
[
|
||||
'.leading-none',
|
||||
'line-height: 1;',
|
||||
'Set the line height of an element to <code>1</code>.',
|
||||
],
|
||||
[
|
||||
'.leading-tight',
|
||||
'line-height: 1.25;',
|
||||
'Set the line height of an element to <code>1.25</code>.',
|
||||
],
|
||||
[
|
||||
'.leading-normal',
|
||||
'line-height: 1.5;',
|
||||
'Set the line height of an element to <code>1.5</code>.',
|
||||
],
|
||||
[
|
||||
'.leading-loose',
|
||||
'line-height: 2;',
|
||||
'Set the line height of an element to <code>2</code>.',
|
||||
],
|
||||
]
|
||||
])
|
||||
|
||||
@ -11,41 +11,27 @@ features:
|
||||
|
||||
@include('_partials.work-in-progress')
|
||||
|
||||
<div class="border-t border-grey-lighter">
|
||||
<table class="w-full text-left table-collapse">
|
||||
<colgroup>
|
||||
<col class="w-1/5">
|
||||
<col class="w-1/3">
|
||||
<col>
|
||||
</colgroup>
|
||||
<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">.text-left</td>
|
||||
<td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark">text-align: left;</td>
|
||||
<td class="p-2 border-t border-smoke text-sm text-grey-darker">Align text to the left.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke font-mono text-xs text-purple-dark whitespace-no-wrap">.text-center</td>
|
||||
<td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark">text-align: center;</td>
|
||||
<td class="p-2 border-t border-smoke text-sm text-grey-darker">Align text to the center.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke font-mono text-xs text-purple-dark whitespace-no-wrap">.text-right</td>
|
||||
<td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark">text-align: right;</td>
|
||||
<td class="p-2 border-t border-smoke text-sm text-grey-darker">Align text to the right.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke font-mono text-xs text-purple-dark whitespace-no-wrap">.text-justify</td>
|
||||
<td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark">text-align: justify;</td>
|
||||
<td class="p-2 border-t border-smoke text-sm text-grey-darker">Justify text.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
@include('_partials.class-table', [
|
||||
'rows' => [
|
||||
[
|
||||
'.text-left',
|
||||
'text-align: left;',
|
||||
'Align text to the left.',
|
||||
],
|
||||
[
|
||||
'.text-center',
|
||||
'text-align: center;',
|
||||
'Align text to the center.',
|
||||
],
|
||||
[
|
||||
'.text-right',
|
||||
'text-align: right;',
|
||||
'Align text to the right.',
|
||||
],
|
||||
[
|
||||
'.text-justify',
|
||||
'text-align: justify;',
|
||||
'Justify text.',
|
||||
],
|
||||
]
|
||||
])
|
||||
|
||||
@ -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 whitespace-no-wrap">.text-{{ $name }}</td>
|
||||
<td class="p-2 border-t {{ $loop->first ? 'border-smoke' : 'border-smoke-light' }} font-mono text-xs text-blue-dark whitespace-no-wrap">color: {{ $value }};</td>
|
||||
<td class="p-2 border-t {{ $loop->first ? 'border-smoke' : 'border-smoke-light' }} text-sm text-grey-darker">Set the text 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 = ".text-{$name}";
|
||||
$code = "color: {$value};";
|
||||
$color = implode(' ', array_reverse(explode('-', $name)));
|
||||
$description = "Set the text color of an element to {$color}.";
|
||||
return [
|
||||
$class,
|
||||
$code,
|
||||
$description,
|
||||
];
|
||||
})->values()->all()
|
||||
])
|
||||
|
||||
## Hover
|
||||
|
||||
|
||||
@ -11,66 +11,52 @@ features:
|
||||
|
||||
@include('_partials.work-in-progress')
|
||||
|
||||
<div class="border-t border-grey-lighter">
|
||||
<table class="w-full text-left table-collapse">
|
||||
<colgroup>
|
||||
<col class="w-1/5">
|
||||
<col class="w-1/3">
|
||||
<col>
|
||||
</colgroup>
|
||||
<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">.text-xs</td>
|
||||
<td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark">font-size: .75rem;</td>
|
||||
<td class="p-2 border-t border-smoke text-sm text-grey-darker">Set the text size to <code>.75rem</code> (<code>12px</code>).</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.text-sm</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">font-size: .875rem;</td>
|
||||
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the text size to <code>.875rem</code> (<code>14px</code>).</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.text-base</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">font-size: 1rem;</td>
|
||||
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the text size to <code>1rem</code> (<code>16px</code>).</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.text-lg</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">font-size: 1.125rem;</td>
|
||||
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the text size to <code>1.125rem</code> (<code>18px</code>).</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.text-xl</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">font-size: 1.25rem;</td>
|
||||
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the text size to <code>1.25rem</code> (<code>20px</code>).</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.text-2xl</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">font-size: 1.5rem;</td>
|
||||
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the text size to <code>1.5rem</code> (<code>24px</code>).</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.text-3xl</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">font-size: 1.875rem;</td>
|
||||
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the text size to <code>1.875rem</code> (<code>30px</code>).</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.text-4xl</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">font-size: 2.25rem;</td>
|
||||
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the text size to <code>2.25rem</code> (<code>36px</code>).</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.text-5xl</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">font-size: 3rem;</td>
|
||||
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the text size to <code>3rem</code> (<code>48px</code>).</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
@include('_partials.class-table', [
|
||||
'rows' => [
|
||||
[
|
||||
'.text-xs',
|
||||
'font-size: .75rem;',
|
||||
'Set the text size to <code>.75rem</code> (<code>12px</code>).',
|
||||
],
|
||||
[
|
||||
'.text-sm',
|
||||
'font-size: .875rem;',
|
||||
'Set the text size to <code>.875rem</code> (<code>14px</code>).',
|
||||
],
|
||||
[
|
||||
'.text-base',
|
||||
'font-size: 1rem;',
|
||||
'Set the text size to <code>1rem</code> (<code>16px</code>).',
|
||||
],
|
||||
[
|
||||
'.text-lg',
|
||||
'font-size: 1.125rem;',
|
||||
'Set the text size to <code>1.125rem</code> (<code>18px</code>).',
|
||||
],
|
||||
[
|
||||
'.text-xl',
|
||||
'font-size: 1.25rem;',
|
||||
'Set the text size to <code>1.25rem</code> (<code>20px</code>).',
|
||||
],
|
||||
[
|
||||
'.text-2xl',
|
||||
'font-size: 1.5rem;',
|
||||
'Set the text size to <code>1.5rem</code> (<code>24px</code>).',
|
||||
],
|
||||
[
|
||||
'.text-3xl',
|
||||
'font-size: 1.875rem;',
|
||||
'Set the text size to <code>1.875rem</code> (<code>30px</code>).',
|
||||
],
|
||||
[
|
||||
'.text-4xl',
|
||||
'font-size: 2.25rem;',
|
||||
'Set the text size to <code>2.25rem</code> (<code>36px</code>).',
|
||||
],
|
||||
[
|
||||
'.text-5xl',
|
||||
'font-size: 3rem;',
|
||||
'Set the text size to <code>3rem</code> (<code>48px</code>).',
|
||||
],
|
||||
]
|
||||
])
|
||||
|
||||
@ -11,85 +11,65 @@ features:
|
||||
|
||||
@include('_partials.work-in-progress')
|
||||
|
||||
<div class="border-t border-grey-lighter">
|
||||
<table class="w-full text-left table-collapse">
|
||||
<colgroup>
|
||||
<col class="w-1/5">
|
||||
<col class="w-2/5">
|
||||
<col>
|
||||
</colgroup>
|
||||
<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">.italic</td>
|
||||
<td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark">font-style: italic;</td>
|
||||
<td class="p-2 border-t border-smoke text-sm text-grey-darker">Italicizes the text within an element.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.roman</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">font-style: normal;</td>
|
||||
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Sets the text to roman (disables italics) within an element.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.uppercase</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">text-transform: uppercase;</td>
|
||||
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Makes all text uppercase within an element.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.lowercase</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">text-transform: lowercase;</td>
|
||||
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Makes all text lowercase within an element.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.capitalize</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">text-transform: capitalize;</td>
|
||||
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Capitalizes the text within an element.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.normal-case</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">text-transform: none;</td>
|
||||
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Disables any text transformations previously applied to an element.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.underline</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">text-decoration: underline;</td>
|
||||
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Underlines the text within an element.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.line-through</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">text-decoration: line-through;</td>
|
||||
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Adds a line through the text within an element.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.no-underline</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">text-decoration: none;</td>
|
||||
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Disables any text decorations previously applied to an element.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.antialiased</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">
|
||||
-webkit-font-smoothing: antialiased;<br>
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
</td>
|
||||
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the font smoothing of an element to antialiased.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.subpixel-antialiased</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">
|
||||
-webkit-font-smoothing: auto;<br>
|
||||
-moz-osx-font-smoothing: auto;
|
||||
</td>
|
||||
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the font smoothing of an element to subpixel antialiasing (the default).</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
@include('_partials.class-table', [
|
||||
'rows' => [
|
||||
[
|
||||
'.italic',
|
||||
'font-style: italic;',
|
||||
'Italicizes the text within an element.',
|
||||
],
|
||||
[
|
||||
'.roman',
|
||||
'font-style: normal;',
|
||||
'Sets the text to roman (disables italics) within an element.',
|
||||
],
|
||||
[
|
||||
'.uppercase',
|
||||
'text-transform: uppercase;',
|
||||
'Makes all text uppercase within an element.',
|
||||
],
|
||||
[
|
||||
'.lowercase',
|
||||
'text-transform: lowercase;',
|
||||
'Makes all text lowercase within an element.',
|
||||
],
|
||||
[
|
||||
'.capitalize',
|
||||
'text-transform: capitalize;',
|
||||
'Capitalizes the text within an element.',
|
||||
],
|
||||
[
|
||||
'.normal-case',
|
||||
'text-transform: none;',
|
||||
'Disables any text transformations previously applied to an element.',
|
||||
],
|
||||
[
|
||||
'.underline',
|
||||
'text-decoration: underline;',
|
||||
'Underlines the text within an element.',
|
||||
],
|
||||
[
|
||||
'.line-through',
|
||||
'text-decoration: line-through;',
|
||||
'Adds a line through the text within an element.',
|
||||
],
|
||||
[
|
||||
'.no-underline',
|
||||
'text-decoration: none;',
|
||||
'Disables any text decorations previously applied to an element.',
|
||||
],
|
||||
[
|
||||
'.antialiased',
|
||||
"-webkit-font-smoothing: antialiased;\n-moz-osx-font-smoothing: grayscale;",
|
||||
'Set the font smoothing of an element to antialiased.',
|
||||
],
|
||||
[
|
||||
'.subpixel-antialiased',
|
||||
"-webkit-font-smoothing: auto;\n-moz-osx-font-smoothing: auto;",
|
||||
'Set the font smoothing of an element to subpixel antialiasing (the default).',
|
||||
],
|
||||
]
|
||||
])
|
||||
|
||||
## Hover
|
||||
|
||||
|
||||
@ -11,65 +11,47 @@ features:
|
||||
|
||||
@include('_partials.work-in-progress')
|
||||
|
||||
<div class="border-t border-grey-lighter">
|
||||
<table class="w-full text-left table-collapse">
|
||||
<colgroup>
|
||||
<col class="w-1/4">
|
||||
<col class="w-1/4">
|
||||
<col>
|
||||
</colgroup>
|
||||
<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-normal</td>
|
||||
<td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark">white-space: normal;</td>
|
||||
<td class="p-2 border-t border-smoke text-sm text-grey-darker">Cause text to wrap normally within an element.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.whitespace-no-wrap</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">white-space: nowrap;</td>
|
||||
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Prevent text from wrapping within an element.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.whitespace-pre</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">white-space: pre;</td>
|
||||
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Preserve line returns and spaces within an element.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.whitespace-pre-line</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">white-space: pre-line;</td>
|
||||
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Preserve line returns but not spaces within an element.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.whitespace-pre-wrap</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">white-space: pre-wrap;</td>
|
||||
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Preserve spaces but not line returns within an element.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.break-words</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">word-wrap: break-word;</td>
|
||||
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Add line breaks mid-word if needed.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.break-normal</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">word-wrap: normal;</td>
|
||||
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Only add line breaks at normal word break points.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.truncate</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">
|
||||
overflow: hidden;<br>
|
||||
text-overflow: ellipsis;<br>
|
||||
white-space: nowrap;
|
||||
</td>
|
||||
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Truncate overflowing text with an ellipsis (<code>…</code>) if needed.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
@include('_partials.class-table', [
|
||||
'rows' => [
|
||||
[
|
||||
'.whitespace-normal',
|
||||
'white-space: normal;',
|
||||
'Cause text to wrap normally within an element.',
|
||||
],
|
||||
[
|
||||
'.whitespace-no-wrap',
|
||||
'white-space: nowrap;',
|
||||
'Prevent text from wrapping within an element.',
|
||||
],
|
||||
[
|
||||
'.whitespace-pre',
|
||||
'white-space: pre;',
|
||||
'Preserve line returns and spaces within an element.',
|
||||
],
|
||||
[
|
||||
'.whitespace-pre-line',
|
||||
'white-space: pre-line;',
|
||||
'Preserve line returns but not spaces within an element.',
|
||||
],
|
||||
[
|
||||
'.whitespace-pre-wrap',
|
||||
'white-space: pre-wrap;',
|
||||
'Preserve spaces but not line returns within an element.',
|
||||
],
|
||||
[
|
||||
'.break-words',
|
||||
'word-wrap: break-word;',
|
||||
'Add line breaks mid-word if needed.',
|
||||
],
|
||||
[
|
||||
'.break-normal',
|
||||
'word-wrap: normal;',
|
||||
'Only add line breaks at normal word break points.',
|
||||
],
|
||||
[
|
||||
'.truncate',
|
||||
"overflow: hidden;\ntext-overflow: ellipsis;\nwhite-space",
|
||||
'Truncate overflowing text with an ellipsis (<code>…</code>) if needed.',
|
||||
],
|
||||
]
|
||||
])
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user