mirror of
https://github.com/tailwindlabs/tailwindcss.git
synced 2025-12-08 21:36:08 +00:00
Update remaining docs pages to use class table partial
This commit is contained in:
Adam Wathan
parent
705e048bec
commit
d037a60128
@ -11,31 +11,17 @@ 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">.bg-cover</td>
|
||||
<td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark">background-size: cover;</td>
|
||||
<td class="p-2 border-t border-smoke text-sm text-grey-darker">Scale the image until it fills the background layer.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.bg-contain</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">background-size: contain;</td>
|
||||
<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>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
@include('_partials.class-table', [
|
||||
'rows' => [
|
||||
[
|
||||
'.bg-cover',
|
||||
'background-size: cover;',
|
||||
"Scale the image until it fills the background layer.",
|
||||
],
|
||||
[
|
||||
'.bg-contain',
|
||||
'background-size: contain;',
|
||||
"Scale the image to the outer edges without cropping or stretching.",
|
||||
],
|
||||
]
|
||||
])
|
||||
|
||||
@ -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">.border-{{ $name }}</td>
|
||||
<td class="p-2 border-t {{ $loop->first ? 'border-smoke' : 'border-smoke-light' }} font-mono text-xs text-blue-dark">border-color: {{ $value }};</td>
|
||||
<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>
|
||||
</tr>
|
||||
@endforeach
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
@include('_partials.class-table', [
|
||||
'rows' => $page->config['colors']->map(function ($value, $name) {
|
||||
$class = ".border-{$name}";
|
||||
$code = "border-color: {$value};";
|
||||
$color = implode(' ', array_reverse(explode('-', $name)));
|
||||
$description = "Set the border color of an element to {$color}.";
|
||||
return [
|
||||
$class,
|
||||
$code,
|
||||
$description,
|
||||
];
|
||||
})->values()->all()
|
||||
])
|
||||
|
||||
## Hover
|
||||
|
||||
|
||||
@ -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">.border-solid</td>
|
||||
<td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark">border-style: solid;</td>
|
||||
<td class="p-2 border-t border-smoke text-sm text-grey-darker">Sets the border style on an element to solid.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke font-mono text-xs text-purple-dark">.border-dashed</td>
|
||||
<td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark">border-style: dashed;</td>
|
||||
<td class="p-2 border-t border-smoke text-sm text-grey-darker">Sets the border style on an element to dashed.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.border-dotted</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">border-style: dotted;</td>
|
||||
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Sets the border style on an element to dotted.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.border-none</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">border-style: none;</td>
|
||||
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Disables the border on an element.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
@include('_partials.class-table', [
|
||||
'rows' => [
|
||||
[
|
||||
'.border-solid',
|
||||
'border-style: solid;',
|
||||
"Sets the border style on an element to solid.",
|
||||
],
|
||||
[
|
||||
'.border-dashed',
|
||||
'border-style: dashed;',
|
||||
"Sets the border style on an element to dashed.",
|
||||
],
|
||||
[
|
||||
'.border-dotted',
|
||||
'border-style: dotted;',
|
||||
"Sets the border style on an element to dotted.",
|
||||
],
|
||||
[
|
||||
'.border-none',
|
||||
'border-style: none;',
|
||||
"Disables the border on an element.",
|
||||
],
|
||||
]
|
||||
])
|
||||
|
||||
@ -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/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">.cursor-auto</td>
|
||||
<td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark">cursor: auto;</td>
|
||||
<td class="p-2 border-t border-smoke text-sm text-grey-darker">Set the mouse cursor to the default browser behavior.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke font-mono text-xs text-purple-dark">.cursor-pointer</td>
|
||||
<td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark">cursor: pointer;</td>
|
||||
<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>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke font-mono text-xs text-purple-dark">.cursor-not-allowed</td>
|
||||
<td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark">cursor: not-allowed;</td>
|
||||
<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>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
@include('_partials.class-table', [
|
||||
'rows' => [
|
||||
[
|
||||
'.cursor-auto',
|
||||
'cursor: auto;',
|
||||
"Set the mouse cursor to the default browser behavior.",
|
||||
],
|
||||
[
|
||||
'.cursor-pointer',
|
||||
'cursor: pointer;',
|
||||
"Set the mouse cursor to a pointer and indicate a link.",
|
||||
],
|
||||
[
|
||||
'.cursor-not-allowed',
|
||||
'cursor: not-allowed;',
|
||||
"Set the mouse cursor to indicate that the action will not be executed.",
|
||||
],
|
||||
]
|
||||
])
|
||||
|
||||
@ -9,49 +9,35 @@ features:
|
||||
focus: false
|
||||
---
|
||||
|
||||
<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">.content-start</td>
|
||||
<td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark">align-content: flex-start;</td>
|
||||
<td class="p-2 border-t border-smoke text-sm text-grey-darker">Pack lines against the start of the cross axis.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.content-center</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">align-content: center;</td>
|
||||
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Pack lines in the center of the cross axis.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.content-end</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">align-content: flex-end;</td>
|
||||
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Pack lines against the end of the cross axis.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.content-between</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">align-content: space-between;</td>
|
||||
<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>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.content-around</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">align-content: space-around;</td>
|
||||
<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>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
@include('_partials.class-table', [
|
||||
'rows' => [
|
||||
[
|
||||
'.content-start',
|
||||
'align-content: flex-start;',
|
||||
"Pack lines against the start of the cross axis.",
|
||||
],
|
||||
[
|
||||
'.content-center',
|
||||
'align-content: center;',
|
||||
"Pack lines in the center of the cross axis.",
|
||||
],
|
||||
[
|
||||
'.content-end',
|
||||
'align-content: flex-end;',
|
||||
"Pack lines against the end of the cross axis.",
|
||||
],
|
||||
[
|
||||
'.content-between',
|
||||
'align-content: space-between;',
|
||||
"Distribute lines along the cross axis by adding an equal amount of space between each line.",
|
||||
],
|
||||
[
|
||||
'.content-around',
|
||||
'align-content: space-around;',
|
||||
"Distribute lines along the cross axis by adding an equal amount of space around each line.",
|
||||
],
|
||||
]
|
||||
])
|
||||
|
||||
### Start <span class="ml-2 font-semibold text-slate-light text-sm uppercase tracking-wide">Default</span>
|
||||
|
||||
|
||||
@ -9,49 +9,35 @@ features:
|
||||
focus: false
|
||||
---
|
||||
|
||||
<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">.items-stretch</td>
|
||||
<td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark">align-items: flex-stretch;</td>
|
||||
<td class="p-2 border-t border-smoke text-sm text-grey-darker">Stretch items to fill the cross axis.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.items-start</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">align-items: flex-start;</td>
|
||||
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Align items against the start of the cross axis.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.items-center</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">align-items: center;</td>
|
||||
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Align items along the center of the cross axis.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.items-end</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">align-items: flex-end;</td>
|
||||
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Align items against the end of the cross axis.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.items-baseline</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">align-items: baseline;</td>
|
||||
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Align the baselines of each item.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
@include('_partials.class-table', [
|
||||
'rows' => [
|
||||
[
|
||||
'.items-stretch',
|
||||
'align-items: flex-stretch;',
|
||||
"Stretch items to fill the cross axis.",
|
||||
],
|
||||
[
|
||||
'.items-start',
|
||||
'align-items: flex-start;',
|
||||
"Align items against the start of the cross axis.",
|
||||
],
|
||||
[
|
||||
'.items-center',
|
||||
'align-items: center;',
|
||||
"Align items along the center of the cross axis.",
|
||||
],
|
||||
[
|
||||
'.items-end',
|
||||
'align-items: flex-end;',
|
||||
"Align items against the end of the cross axis.",
|
||||
],
|
||||
[
|
||||
'.items-baseline',
|
||||
'align-items: baseline;',
|
||||
"Align the baselines of each item.",
|
||||
],
|
||||
]
|
||||
])
|
||||
|
||||
### Stretch <span class="ml-2 font-semibold text-slate-light text-sm uppercase tracking-wide">Default</span>
|
||||
|
||||
|
||||
@ -9,44 +9,35 @@ features:
|
||||
focus: false
|
||||
---
|
||||
|
||||
<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">.self-auto</td>
|
||||
<td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark">align-self: auto;</td>
|
||||
<td class="p-2 border-t border-smoke text-sm text-grey-darker">Align item based on the container's <code>align-items</code> property.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.self-start</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">align-self: flex-start;</td>
|
||||
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Align item against the start of the cross axis.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.self-center</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">align-self: center;</td>
|
||||
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Align item along the center of the cross axis.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.self-end</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">align-self: flex-end;</td>
|
||||
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Align item against the end of the cross axis.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.self-stretch</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">align-self: stretch;</td>
|
||||
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Stretch item to fill the cross axis.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
@include('_partials.class-table', [
|
||||
'rows' => [
|
||||
[
|
||||
'.self-auto',
|
||||
'align-self: auto;',
|
||||
"Align item based on the container's <code>align-items</code> property.",
|
||||
],
|
||||
[
|
||||
'.self-start',
|
||||
'align-self: flex-start;',
|
||||
"Align item against the start of the cross axis.",
|
||||
],
|
||||
[
|
||||
'.self-center',
|
||||
'align-self: center;',
|
||||
"Align item along the center of the cross axis.",
|
||||
],
|
||||
[
|
||||
'.self-end',
|
||||
'align-self: flex-end;',
|
||||
"Align item against the end of the cross axis.",
|
||||
],
|
||||
[
|
||||
'.self-stretch',
|
||||
'align-self: stretch;',
|
||||
"Stretch item to fill the cross axis.",
|
||||
],
|
||||
]
|
||||
])
|
||||
|
||||
### Auto <span class="ml-2 font-semibold text-slate-light text-sm uppercase tracking-wide">Default</span>
|
||||
|
||||
|
||||
@ -9,39 +9,30 @@ features:
|
||||
focus: false
|
||||
---
|
||||
|
||||
<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">.flex-row</td>
|
||||
<td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark">flex-direction: row;</td>
|
||||
<td class="p-2 border-t border-smoke text-sm text-grey-darker">Position flex items in the normal horizontal direction.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.flex-row-reverse</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">flex-direction: row-reverse;</td>
|
||||
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Position flex items in the reverse horizontal direction.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.flex-col</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">flex-direction: column;</td>
|
||||
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Position flex items vertically.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.flex-col-reverse</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">flex-direction: column-reverse;</td>
|
||||
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Position flex items vertically in the reverse direction.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
@include('_partials.class-table', [
|
||||
'rows' => [
|
||||
[
|
||||
'.flex-row',
|
||||
'flex-direction: row;',
|
||||
"Position flex items in the normal horizontal direction.",
|
||||
],
|
||||
[
|
||||
'.flex-row-reverse',
|
||||
'flex-direction: row-reverse;',
|
||||
"Position flex items in the reverse horizontal direction.",
|
||||
],
|
||||
[
|
||||
'.flex-col',
|
||||
'flex-direction: column;',
|
||||
"Position flex items vertically.",
|
||||
],
|
||||
[
|
||||
'.flex-col-reverse',
|
||||
'flex-direction: column-reverse;',
|
||||
"Position flex items vertically in the reverse direction.",
|
||||
],
|
||||
]
|
||||
])
|
||||
|
||||
### Row <span class="ml-2 font-semibold text-slate-light text-sm uppercase tracking-wide">Default</span>
|
||||
|
||||
|
||||
@ -9,29 +9,20 @@ features:
|
||||
focus: false
|
||||
---
|
||||
|
||||
<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">.flex</td>
|
||||
<td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark">display: flex;</td>
|
||||
<td class="p-2 border-t border-smoke text-sm text-grey-darker">Create a block-level flex container.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.inline-flex</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">display: inline-flex;</td>
|
||||
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Create an inline flex container.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
@include('_partials.class-table', [
|
||||
'rows' => [
|
||||
[
|
||||
'.flex',
|
||||
'display: flex;',
|
||||
"Create a block-level flex container.",
|
||||
],
|
||||
[
|
||||
'.inline-flex',
|
||||
'display: inline-flex;',
|
||||
"Create an inline flex container.",
|
||||
],
|
||||
]
|
||||
])
|
||||
|
||||
## Flex
|
||||
|
||||
|
||||
@ -9,59 +9,50 @@ features:
|
||||
focus: false
|
||||
---
|
||||
|
||||
<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">.flex-initial</td>
|
||||
<td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark">flex: initial;</td>
|
||||
<td class="p-2 border-t border-smoke text-sm text-grey-darker">Allow a flex item to shrink but not grow, taking into account its initial size.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.flex-1</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">flex: 1;</td>
|
||||
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Allow a flex item to grow and shrink as needed, ignoring its initial size.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.flex-auto</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">flex: auto;</td>
|
||||
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Allow a flex item to grow and shrink, taking into account its initial size.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.flex-none</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">flex: none;</td>
|
||||
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Prevent a flex item from growing or shrinking.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.flex-grow</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">flex-grow: 1;</td>
|
||||
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Allow a flex item to grow to fill any available space.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.flex-shrink</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">flex-shrink: 1;</td>
|
||||
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Allow a flex item to shrink if needed.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.flex-no-grow</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">flex-grow: 0;</td>
|
||||
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Prevent a flex item from growing.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.flex-no-shrink</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">flex-shrink: 0;</td>
|
||||
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Prevent a flex item from shrinking.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
@include('_partials.class-table', [
|
||||
'rows' => [
|
||||
[
|
||||
'.flex-initial',
|
||||
'flex: initial;',
|
||||
"Allow a flex item to shrink but not grow, taking into account its initial size.",
|
||||
],
|
||||
[
|
||||
'.flex-1',
|
||||
'flex: 1;',
|
||||
"Allow a flex item to grow and shrink as needed, ignoring its initial size.",
|
||||
],
|
||||
[
|
||||
'.flex-auto',
|
||||
'flex: auto;',
|
||||
"Allow a flex item to grow and shrink, taking into account its initial size.",
|
||||
],
|
||||
[
|
||||
'.flex-none',
|
||||
'flex: none;',
|
||||
"Prevent a flex item from growing or shrinking.",
|
||||
],
|
||||
[
|
||||
'.flex-grow',
|
||||
'flex-grow: 1;',
|
||||
"Allow a flex item to grow to fill any available space.",
|
||||
],
|
||||
[
|
||||
'.flex-shrink',
|
||||
'flex-shrink: 1;',
|
||||
"Allow a flex item to shrink if needed.",
|
||||
],
|
||||
[
|
||||
'.flex-no-grow',
|
||||
'flex-grow: 0;',
|
||||
"Prevent a flex item from growing.",
|
||||
],
|
||||
[
|
||||
'.flex-no-shrink',
|
||||
'flex-shrink: 0;',
|
||||
"Prevent a flex item from shrinking.",
|
||||
],
|
||||
]
|
||||
])
|
||||
|
||||
### Initial <span class="ml-2 font-semibold text-slate-light text-sm uppercase tracking-wide">Default</span>
|
||||
|
||||
|
||||
@ -9,49 +9,35 @@ features:
|
||||
focus: false
|
||||
---
|
||||
|
||||
<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">.justify-start</td>
|
||||
<td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark">justify-content: flex-start;</td>
|
||||
<td class="p-2 border-t border-smoke text-sm text-grey-darker">Justify items against the start of the container.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.justify-center</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">justify-content: center;</td>
|
||||
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Justify items in the center of the container.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.justify-end</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">justify-content: flex-end;</td>
|
||||
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Justify items against the end of the container.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.justify-between</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">justify-content: space-between;</td>
|
||||
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Justify items by adding an equal amount of space between each one.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.justify-around</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">justify-content: space-around;</td>
|
||||
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Justify items by adding an equal amount of space around each one.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
@include('_partials.class-table', [
|
||||
'rows' => [
|
||||
[
|
||||
'.justify-start',
|
||||
'justify-content: flex-start;',
|
||||
"Justify items against the start of the container.",
|
||||
],
|
||||
[
|
||||
'.justify-center',
|
||||
'justify-content: center;',
|
||||
"Justify items in the center of the container.",
|
||||
],
|
||||
[
|
||||
'.justify-end',
|
||||
'justify-content: flex-end;',
|
||||
"Justify items against the end of the container.",
|
||||
],
|
||||
[
|
||||
'.justify-between',
|
||||
'justify-content: space-between;',
|
||||
"Justify items by adding an equal amount of space between each one.",
|
||||
],
|
||||
[
|
||||
'.justify-around',
|
||||
'justify-content: space-around;',
|
||||
"Justify items by adding an equal amount of space around each one.",
|
||||
],
|
||||
]
|
||||
])
|
||||
|
||||
### Start <span class="ml-2 font-semibold text-slate-light text-sm uppercase tracking-wide">Default</span>
|
||||
|
||||
|
||||
@ -9,34 +9,25 @@ features:
|
||||
focus: false
|
||||
---
|
||||
|
||||
<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">.flex-no-wrap</td>
|
||||
<td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark">flex-wrap: nowrap;</td>
|
||||
<td class="p-2 border-t border-smoke text-sm text-grey-darker">Don't allow flex items to wrap.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.flex-wrap</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">flex-wrap: wrap;</td>
|
||||
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Allow flex items to wrap in the normal direction.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.flex-wrap-reverse</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">flex-wrap: wrap-reverse;</td>
|
||||
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Allow flex items to wrap in the reverse direction.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
@include('_partials.class-table', [
|
||||
'rows' => [
|
||||
[
|
||||
'.flex-no-wrap',
|
||||
'flex-wrap: nowrap;',
|
||||
"Don't allow flex items to wrap.",
|
||||
],
|
||||
[
|
||||
'.flex-wrap',
|
||||
'flex-wrap: wrap;',
|
||||
"Allow flex items to wrap in the normal direction.",
|
||||
],
|
||||
[
|
||||
'.flex-wrap-reverse',
|
||||
'flex-wrap: wrap-reverse;',
|
||||
"Allow flex items to wrap in the reverse direction.",
|
||||
],
|
||||
]
|
||||
])
|
||||
|
||||
### Don't wrap <span class="ml-2 font-semibold text-slate-light text-sm uppercase tracking-wide">Default</span>
|
||||
|
||||
|
||||
@ -11,29 +11,15 @@ 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">.appearance-none</td>
|
||||
<td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark">appearance: none;</td>
|
||||
<td class="p-2 border-t border-smoke text-sm text-grey-darker">Remove any special styling applied to an element by the browser.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
@include('_partials.class-table', [
|
||||
'rows' => [
|
||||
[
|
||||
'.appearance-none',
|
||||
'appearance: none;',
|
||||
"Remove any special styling applied to an element by the browser.",
|
||||
],
|
||||
]
|
||||
])
|
||||
|
||||
### Custom Select
|
||||
|
||||
|
||||
@ -11,30 +11,12 @@ 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">.list-reset</td>
|
||||
<td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark">
|
||||
list-style: none;<br>
|
||||
margin: 0;<br>
|
||||
padding: 0;
|
||||
</td>
|
||||
<td class="p-2 border-t border-smoke text-sm text-grey-darker">Disable default browser styling for list elements.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
@include('_partials.class-table', [
|
||||
'rows' => [
|
||||
[
|
||||
'.list-reset',
|
||||
"list-style: none;\nmargin: 0;\npadding: 0;",
|
||||
"Disable default browser styling for lists and list items.",
|
||||
],
|
||||
]
|
||||
])
|
||||
|
||||
@ -9,44 +9,35 @@ features:
|
||||
focus: false
|
||||
---
|
||||
|
||||
<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">.opacity-100</td>
|
||||
<td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark">opacity: 1;</td>
|
||||
<td class="p-2 border-t border-smoke text-sm text-grey-darker">Set the opacity of an element to 100%.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.opacity-75</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">opacity: .75;</td>
|
||||
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the opacity of an element to 75%.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.opacity-50</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">opacity: .5;</td>
|
||||
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the opacity of an element to 50%.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.opacity-25</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">opacity: .25;</td>
|
||||
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the opacity of an element to 25%.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.opacity-0</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">opacity: 0;</td>
|
||||
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the opacity of an element to 0%.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
@include('_partials.class-table', [
|
||||
'rows' => [
|
||||
[
|
||||
'.opacity-100',
|
||||
'opacity: 1;',
|
||||
"Set the opacity of an element to 100%.",
|
||||
],
|
||||
[
|
||||
'.opacity-75',
|
||||
'opacity: .75;',
|
||||
"Set the opacity of an element to 75%.",
|
||||
],
|
||||
[
|
||||
'.opacity-50',
|
||||
'opacity: .5;',
|
||||
"Set the opacity of an element to 50%.",
|
||||
],
|
||||
[
|
||||
'.opacity-25',
|
||||
'opacity: .25;',
|
||||
"Set the opacity of an element to 25%.",
|
||||
],
|
||||
[
|
||||
'.opacity-0',
|
||||
'opacity: 0;',
|
||||
"Set the opacity of an element to 0%.",
|
||||
],
|
||||
]
|
||||
])
|
||||
|
||||
## Example
|
||||
|
||||
|
||||
@ -9,59 +9,50 @@ features:
|
||||
focus: false
|
||||
---
|
||||
|
||||
<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">.overflow-visible</td>
|
||||
<td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark whitespace-no-wrap">overflow: visible;</td>
|
||||
<td class="p-2 border-t border-smoke text-sm text-grey-darker">Don't clip content that overflows the element.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.overflow-auto</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">overflow: auto;</td>
|
||||
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Add scrollbars to an element if needed.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.overflow-hidden</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">overflow: hidden;</td>
|
||||
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Clip any content that overflows the element.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.overflow-x-scroll</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">overflow-x: auto;</td>
|
||||
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Allow horizontal scrolling if needed.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.overflow-y-scroll</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">overflow-y: auto;</td>
|
||||
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Allow vertical scrolling if needed.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.overflow-scroll</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">overflow: scroll;</td>
|
||||
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Add scrollbars to an element.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.scrolling-touch</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">-webkit-overflow-scrolling: touch;</td>
|
||||
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Use momentum-based scrolling on touch devices.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.scrolling-auto</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">-webkit-overflow-scrolling: auto;</td>
|
||||
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Use "regular" scrolling on touch devices.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
@include('_partials.class-table', [
|
||||
'rows' => [
|
||||
[
|
||||
'.overflow-visible',
|
||||
'overflow: visible;',
|
||||
"Don't clip content that overflows the element.",
|
||||
],
|
||||
[
|
||||
'.overflow-auto',
|
||||
'overflow: auto;',
|
||||
"Add scrollbars to an element if needed.",
|
||||
],
|
||||
[
|
||||
'.overflow-hidden',
|
||||
'overflow: hidden;',
|
||||
"Clip any content that overflows the element.",
|
||||
],
|
||||
[
|
||||
'.overflow-x-scroll',
|
||||
'overflow-x: auto;',
|
||||
"Allow horizontal scrolling if needed.",
|
||||
],
|
||||
[
|
||||
'.overflow-y-scroll',
|
||||
'overflow-y: auto;',
|
||||
"Allow vertical scrolling if needed.",
|
||||
],
|
||||
[
|
||||
'.overflow-scroll',
|
||||
'overflow: scroll;',
|
||||
"Add scrollbars to an element.",
|
||||
],
|
||||
[
|
||||
'.scrolling-touch',
|
||||
'-webkit-overflow-scrolling: touch;',
|
||||
"Use momentum-based scrolling on touch devices.",
|
||||
],
|
||||
[
|
||||
'.scrolling-auto',
|
||||
'-webkit-overflow-scrolling: auto;',
|
||||
"Use \"regular\" scrolling on touch devices.",
|
||||
],
|
||||
]
|
||||
])
|
||||
|
||||
### Visible <span class="ml-2 font-semibold text-slate-light text-sm uppercase tracking-wide">Default</span>
|
||||
|
||||
|
||||
@ -11,31 +11,17 @@ 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">.pointer-events-none</td>
|
||||
<td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark">pointer-events: none;</td>
|
||||
<td class="p-2 border-t border-smoke text-sm text-grey-darker">Make element not react to pointer events, like <code>:hover</code> or <code>click</code>.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke font-mono text-xs text-purple-dark">.pointer-events-auto</td>
|
||||
<td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark">pointer-events: auto;</td>
|
||||
<td class="p-2 border-t border-smoke text-sm text-grey-darker">Make element react to pointer events, like <code>:hover</code> or <code>click</code>.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
@include('_partials.class-table', [
|
||||
'rows' => [
|
||||
[
|
||||
'.pointer-events-none',
|
||||
'pointer-events: none;',
|
||||
"Make element not react to pointer events, like <code>:hover</code> or <code>click</code>.",
|
||||
],
|
||||
[
|
||||
'.pointer-events-auto',
|
||||
'pointer-events: auto;',
|
||||
"Make element react to pointer events, like <code>:hover</code> or <code>click</code>.",
|
||||
],
|
||||
]
|
||||
])
|
||||
|
||||
@ -9,87 +9,65 @@ features:
|
||||
focus: false
|
||||
---
|
||||
|
||||
<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="w-3/5 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">.static</td>
|
||||
<td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark">position: static;</td>
|
||||
<td class="p-2 border-t border-smoke text-sm text-grey-darker">Position an element according to the normal flow of the document.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.fixed</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">position: fixed;</td>
|
||||
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Position an element relative to the browser window.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.absolute</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">position: absolute;</td>
|
||||
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Position an element outside of the normal flow of the document, causing neighboring elements to act as if the element doesn't exist.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.relative</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">position: relative;</td>
|
||||
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Position an element according to the normal flow of the document.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.pin-t</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">top: 0;</td>
|
||||
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Anchor absolutely positioned element to the top edge of the nearest positioned parent.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.pin-r</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">right: 0;</td>
|
||||
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Anchor absolutely positioned element to the right edge of the nearest positioned parent.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.pin-b</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">bottom: 0;</td>
|
||||
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Anchor absolutely positioned element to the bottom edge of the nearest positioned parent.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.pin-l</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">left: 0;</td>
|
||||
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Anchor absolutely positioned element to the left edge of the nearest positioned parent.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.pin-y</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">
|
||||
top: 0;<br>
|
||||
bottom: 0;
|
||||
</td>
|
||||
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Anchor absolutely positioned element to the top and bottom edges of the nearest positioned parent.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.pin-x</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">
|
||||
right: 0;<br>
|
||||
left: 0;
|
||||
</td>
|
||||
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Anchor absolutely positioned element to the left and right edges of the nearest positioned parent.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.pin</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">
|
||||
top: 0;<br>
|
||||
right: 0;<br>
|
||||
bottom: 0;<br>
|
||||
left: 0;<br>
|
||||
width: 100%;<br>
|
||||
height: 100%;
|
||||
</td>
|
||||
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Anchor absolutely positioned element to all the edges of the nearest positioned parent.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
@include('_partials.class-table', [
|
||||
'rows' => [
|
||||
[
|
||||
'.static',
|
||||
"position: static;",
|
||||
"Position an element according to the normal flow of the document.",
|
||||
],
|
||||
[
|
||||
'.fixed',
|
||||
"position: fixed;",
|
||||
"Position an element relative to the browser window.",
|
||||
],
|
||||
[
|
||||
'.absolute',
|
||||
"position: absolute;",
|
||||
"Position an element outside of the normal flow of the document, causing neighboring elements to act as if the element doesn't exist.",
|
||||
],
|
||||
[
|
||||
'.relative',
|
||||
"position: relative;",
|
||||
"Position an element according to the normal flow of the document.",
|
||||
],
|
||||
[
|
||||
'.pin-t',
|
||||
"top: 0;",
|
||||
"Anchor absolutely positioned element to the top edge of the nearest positioned parent.",
|
||||
],
|
||||
[
|
||||
'.pin-r',
|
||||
"right: 0;",
|
||||
"Anchor absolutely positioned element to the right edge of the nearest positioned parent.",
|
||||
],
|
||||
[
|
||||
'.pin-b',
|
||||
"bottom: 0;",
|
||||
"Anchor absolutely positioned element to the bottom edge of the nearest positioned parent.",
|
||||
],
|
||||
[
|
||||
'.pin-l',
|
||||
"left: 0;",
|
||||
"Anchor absolutely positioned element to the left edge of the nearest positioned parent.",
|
||||
],
|
||||
[
|
||||
'.pin-y',
|
||||
"top: 0;\nbottom: 0;",
|
||||
"Anchor absolutely positioned element to the top and bottom edges of the nearest positioned parent.",
|
||||
],
|
||||
[
|
||||
'.pin-x',
|
||||
"right: 0;\nleft: 0;",
|
||||
"Anchor absolutely positioned element to the left and right edges of the nearest positioned parent.",
|
||||
],
|
||||
[
|
||||
'.pin',
|
||||
"top: 0;\nright: 0;\nbottom: 0;\nleft: 0;\nwidth: 100%;\nheight: 100%;",
|
||||
"Anchor absolutely positioned element to all the edges of the nearest positioned parent.",
|
||||
],
|
||||
]
|
||||
])
|
||||
|
||||
### Static <span class="ml-2 font-semibold text-slate-light text-sm uppercase tracking-wide">Default</span>
|
||||
|
||||
|
||||
@ -11,36 +11,23 @@ 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">.resize-none</td>
|
||||
<td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark">resize: none;</td>
|
||||
<td class="p-2 border-t border-smoke text-sm text-grey-darker">Make a textarea not resizable.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke font-mono text-xs text-purple-dark">.resize-y</td>
|
||||
<td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark">resize: vertical;</td>
|
||||
<td class="p-2 border-t border-smoke text-sm text-grey-darker">Make a textarea resizable vertically.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke font-mono text-xs text-purple-dark">.resize-x</td>
|
||||
<td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark">resize: horizontal;</td>
|
||||
<td class="p-2 border-t border-smoke text-sm text-grey-darker">Make a textarea resizable horizontally.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
@include('_partials.class-table', [
|
||||
'rows' => [
|
||||
[
|
||||
'.resize-none',
|
||||
'resize: none;',
|
||||
"Make a textarea not resizable.",
|
||||
],
|
||||
[
|
||||
'.resize-y',
|
||||
'resize: vertical;',
|
||||
"Make a textarea resizable vertically.",
|
||||
],
|
||||
[
|
||||
'.resize-x',
|
||||
'resize: horizontal;',
|
||||
"Make a textarea resizable horizontally.",
|
||||
],
|
||||
]
|
||||
])
|
||||
|
||||
@ -9,49 +9,35 @@ features:
|
||||
focus: false
|
||||
---
|
||||
|
||||
<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/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">.shadow</td>
|
||||
<td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark">box-shadow: <span class="whitespace-no-wrap">0 2px 4px 0 rgba(0,0,0,0.10)</span>;</td>
|
||||
<td class="p-2 border-t border-smoke text-sm text-grey-darker">Apply a small box shadow to an element.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.shadow-md</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">box-shadow: <span class="whitespace-no-wrap">0 4px 8px 0 rgba(0,0,0,0.12),</span> <span class="whitespace-no-wrap">0 2px 4px 0 rgba(0,0,0,0.08);</span></td>
|
||||
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Apply a medium box shadow to an element.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.shadow-lg</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">box-shadow: <span class="whitespace-no-wrap">0 15px 30px 0 rgba(0,0,0,0.11),</span> <span class="whitespace-no-wrap">0 5px 15px 0 rgba(0,0,0,0.08);</span></td>
|
||||
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Apply a large box shadow to an element.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.shadow-inner</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">box-shadow: <span class="whitespace-no-wrap">inset 0 2px 4px 0 rgba(0,0,0,0.06);</span></td>
|
||||
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Apply a small inner box shadow to an element.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.shadow-none</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">box-shadow: none;</td>
|
||||
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Remove a box shadow from an element.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
@include('_partials.class-table', [
|
||||
'rows' => [
|
||||
[
|
||||
'.shadow',
|
||||
"box-shadow:\n 0 2px 4px 0 rgba(0,0,0,0.10);",
|
||||
"Apply a small box shadow to an element.",
|
||||
],
|
||||
[
|
||||
'.shadow-md',
|
||||
"box-shadow:\n 0 4px 8px 0 rgba(0,0,0,0.12),\n 0 2px 4px 0 rgba(0,0,0,0.08);",
|
||||
"Apply a medium box shadow to an element.",
|
||||
],
|
||||
[
|
||||
'.shadow-lg',
|
||||
"box-shadow:\n 0 15px 30px 0 rgba(0,0,0,0.11),\n 0 5px 15px 0 rgba(0,0,0,0.08);",
|
||||
"Apply a large box shadow to an element.",
|
||||
],
|
||||
[
|
||||
'.shadow-inner',
|
||||
"box-shadow:\n inset 0 2px 4px 0 rgba(0,0,0,0.06);",
|
||||
"Apply a small inner box shadow to an element.",
|
||||
],
|
||||
[
|
||||
'.shadow-none',
|
||||
"box-shadow: none;",
|
||||
"Remove a box shadow from an element.",
|
||||
],
|
||||
]
|
||||
])
|
||||
|
||||
## Outer shadow
|
||||
|
||||
|
||||
@ -11,31 +11,17 @@ 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">.select-none</td>
|
||||
<td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark">user-select: none;</td>
|
||||
<td class="p-2 border-t border-smoke text-sm text-grey-darker">Disable selecting text in an element.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke font-mono text-xs text-purple-dark">.select-text</td>
|
||||
<td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark">user-select: text;</td>
|
||||
<td class="p-2 border-t border-smoke text-sm text-grey-darker">Allow selecting text in an element.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
@include('_partials.class-table', [
|
||||
'rows' => [
|
||||
[
|
||||
'.select-none',
|
||||
'user-select: none;',
|
||||
"Disable selecting text in an element.",
|
||||
],
|
||||
[
|
||||
'.select-text',
|
||||
'user-select: text;',
|
||||
"Allow selecting text in an element.",
|
||||
],
|
||||
]
|
||||
])
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user