mirror of
https://github.com/tailwindlabs/tailwindcss.git
synced 2025-12-08 21:36:08 +00:00
Add badges + style table to shadows page
This commit is contained in:
Adam Wathan
parent
c34ad5d5dd
commit
a8fbdd29a3
65
docs/source/_partials/feature-badges.blade.php
Normal file
65
docs/source/_partials/feature-badges.blade.php
Normal file
@ -0,0 +1,65 @@
|
||||
<div class="flex mb-6">
|
||||
@if ($responsive)
|
||||
<span class="inline-flex items-center rounded-pill border border-grey-light bg-grey-lightest text-xs font-semibold pl-1 pt-1 pb-1 pr-2 leading-none mr-2">
|
||||
<span class="inline-flex rounded-pill bg-green-light text-white mr-1">
|
||||
<svg class="h-4 w-4" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M5.8 9.4c-.33-.442-.958-.53-1.4-.2-.442.33-.53.958-.2 1.4l3 4c.38.508 1.134.537 1.553.06l7-8c.363-.417.32-1.05-.094-1.413-.417-.363-1.05-.32-1.413.094L8.06 12.414 5.8 9.4z"/></svg>
|
||||
</span>
|
||||
<span>Responsive</span>
|
||||
</span>
|
||||
@else
|
||||
<span class="inline-flex items-center rounded-pill border border-grey-light bg-grey-lightest text-xs font-semibold pl-1 pt-1 pb-1 pr-2 leading-none opacity-50 mr-2">
|
||||
<span class="inline-flex rounded-pill bg-grey text-white mr-1">
|
||||
<svg class="h-4 w-4" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 8.586L6.707 5.293c-.39-.39-1.024-.39-1.414 0-.39.39-.39 1.024 0 1.414L8.586 10l-3.293 3.293c-.39.39-.39 1.024 0 1.414.39.39 1.024.39 1.414 0L10 11.414l3.293 3.293c.39.39 1.024.39 1.414 0 .39-.39.39-1.024 0-1.414L11.414 10l3.293-3.293c.39-.39.39-1.024 0-1.414-.39-.39-1.024-.39-1.414 0L10 8.586z"/></svg>
|
||||
</span>
|
||||
<span>Responsive</span>
|
||||
</span>
|
||||
@endif
|
||||
|
||||
@if ($customizable)
|
||||
<span class="inline-flex items-center rounded-pill border border-grey-light bg-grey-lightest text-xs font-semibold pl-1 pt-1 pb-1 pr-2 leading-none mr-2">
|
||||
<span class="inline-flex rounded-pill bg-green-light text-white mr-1">
|
||||
<svg class="h-4 w-4" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M5.8 9.4c-.33-.442-.958-.53-1.4-.2-.442.33-.53.958-.2 1.4l3 4c.38.508 1.134.537 1.553.06l7-8c.363-.417.32-1.05-.094-1.413-.417-.363-1.05-.32-1.413.094L8.06 12.414 5.8 9.4z"/></svg>
|
||||
</span>
|
||||
<span>Customizable</span>
|
||||
</span>
|
||||
@else
|
||||
<span class="inline-flex items-center rounded-pill border border-grey-light bg-grey-lightest text-xs font-semibold pl-1 pt-1 pb-1 pr-2 leading-none opacity-50 mr-2">
|
||||
<span class="inline-flex rounded-pill bg-grey text-white mr-1">
|
||||
<svg class="h-4 w-4" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 8.586L6.707 5.293c-.39-.39-1.024-.39-1.414 0-.39.39-.39 1.024 0 1.414L8.586 10l-3.293 3.293c-.39.39-.39 1.024 0 1.414.39.39 1.024.39 1.414 0L10 11.414l3.293 3.293c.39.39 1.024.39 1.414 0 .39-.39.39-1.024 0-1.414L11.414 10l3.293-3.293c.39-.39.39-1.024 0-1.414-.39-.39-1.024-.39-1.414 0L10 8.586z"/></svg>
|
||||
</span>
|
||||
<span>Customizable</span>
|
||||
</span>
|
||||
@endif
|
||||
|
||||
@if ($hover)
|
||||
<span class="inline-flex items-center rounded-pill border border-grey-light bg-grey-lightest text-xs font-semibold pl-1 pt-1 pb-1 pr-2 leading-none mr-2">
|
||||
<span class="inline-flex rounded-pill bg-green-light text-white mr-1">
|
||||
<svg class="h-4 w-4" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M5.8 9.4c-.33-.442-.958-.53-1.4-.2-.442.33-.53.958-.2 1.4l3 4c.38.508 1.134.537 1.553.06l7-8c.363-.417.32-1.05-.094-1.413-.417-.363-1.05-.32-1.413.094L8.06 12.414 5.8 9.4z"/></svg>
|
||||
</span>
|
||||
<span>Hover</span>
|
||||
</span>
|
||||
@else
|
||||
<span class="inline-flex items-center rounded-pill border border-grey-light bg-grey-lightest text-xs font-semibold pl-1 pt-1 pb-1 pr-2 leading-none opacity-50 mr-2">
|
||||
<span class="inline-flex rounded-pill bg-grey text-white mr-1">
|
||||
<svg class="h-4 w-4" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 8.586L6.707 5.293c-.39-.39-1.024-.39-1.414 0-.39.39-.39 1.024 0 1.414L8.586 10l-3.293 3.293c-.39.39-.39 1.024 0 1.414.39.39 1.024.39 1.414 0L10 11.414l3.293 3.293c.39.39 1.024.39 1.414 0 .39-.39.39-1.024 0-1.414L11.414 10l3.293-3.293c.39-.39.39-1.024 0-1.414-.39-.39-1.024-.39-1.414 0L10 8.586z"/></svg>
|
||||
</span>
|
||||
<span>Hover</span>
|
||||
</span>
|
||||
@endif
|
||||
|
||||
@if ($focus)
|
||||
<span class="inline-flex items-center rounded-pill border border-grey-light bg-grey-lightest text-xs font-semibold pl-1 pt-1 pb-1 pr-2 leading-none mr-2">
|
||||
<span class="inline-flex rounded-pill bg-green-light text-white mr-1">
|
||||
<svg class="h-4 w-4" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M5.8 9.4c-.33-.442-.958-.53-1.4-.2-.442.33-.53.958-.2 1.4l3 4c.38.508 1.134.537 1.553.06l7-8c.363-.417.32-1.05-.094-1.413-.417-.363-1.05-.32-1.413.094L8.06 12.414 5.8 9.4z"/></svg>
|
||||
</span>
|
||||
<span>Focus</span>
|
||||
</span>
|
||||
@else
|
||||
<span class="inline-flex items-center rounded-pill border border-grey-light bg-grey-lightest text-xs font-semibold pl-1 pt-1 pb-1 pr-2 leading-none opacity-50 mr-2">
|
||||
<span class="inline-flex rounded-pill bg-grey text-white mr-1">
|
||||
<svg class="h-4 w-4" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 8.586L6.707 5.293c-.39-.39-1.024-.39-1.414 0-.39.39-.39 1.024 0 1.414L8.586 10l-3.293 3.293c-.39.39-.39 1.024 0 1.414.39.39 1.024.39 1.414 0L10 11.414l3.293 3.293c.39.39 1.024.39 1.414 0 .39-.39.39-1.024 0-1.414L11.414 10l3.293-3.293c.39-.39.39-1.024 0-1.414-.39-.39-1.024-.39-1.414 0L10 8.586z"/></svg>
|
||||
</span>
|
||||
<span>Focus</span>
|
||||
</span>
|
||||
@endif
|
||||
</div>
|
||||
@ -9,35 +9,12 @@ title: "Opacity"
|
||||
Utilities for controlling the opacity of an element.
|
||||
</div>
|
||||
|
||||
<div class="flex mb-6">
|
||||
<span class="inline-flex items-center rounded-pill border border-grey-light bg-grey-lightest text-xs font-semibold pl-1 pt-1 pb-1 pr-2 leading-none mr-2">
|
||||
<span class="inline-flex rounded-pill bg-green-light text-white mr-1">
|
||||
<svg class="h-4 w-4" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M5.8 9.4c-.33-.442-.958-.53-1.4-.2-.442.33-.53.958-.2 1.4l3 4c.38.508 1.134.537 1.553.06l7-8c.363-.417.32-1.05-.094-1.413-.417-.363-1.05-.32-1.413.094L8.06 12.414 5.8 9.4z"/></svg>
|
||||
</span>
|
||||
<span>Responsive</span>
|
||||
</span>
|
||||
|
||||
<span class="inline-flex items-center rounded-pill border border-grey-light bg-grey-lightest text-xs font-semibold pl-1 pt-1 pb-1 pr-2 leading-none mr-2">
|
||||
<span class="inline-flex rounded-pill bg-green-light text-white mr-1">
|
||||
<svg class="h-4 w-4" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M5.8 9.4c-.33-.442-.958-.53-1.4-.2-.442.33-.53.958-.2 1.4l3 4c.38.508 1.134.537 1.553.06l7-8c.363-.417.32-1.05-.094-1.413-.417-.363-1.05-.32-1.413.094L8.06 12.414 5.8 9.4z"/></svg>
|
||||
</span>
|
||||
<span>Customizable</span>
|
||||
</span>
|
||||
|
||||
<span class="inline-flex items-center rounded-pill border border-grey-light bg-grey-lightest text-xs font-semibold pl-1 pt-1 pb-1 pr-2 leading-none opacity-50 mr-2">
|
||||
<span class="inline-flex rounded-pill bg-grey text-white mr-1">
|
||||
<svg class="h-4 w-4" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 8.586L6.707 5.293c-.39-.39-1.024-.39-1.414 0-.39.39-.39 1.024 0 1.414L8.586 10l-3.293 3.293c-.39.39-.39 1.024 0 1.414.39.39 1.024.39 1.414 0L10 11.414l3.293 3.293c.39.39 1.024.39 1.414 0 .39-.39.39-1.024 0-1.414L11.414 10l3.293-3.293c.39-.39.39-1.024 0-1.414-.39-.39-1.024-.39-1.414 0L10 8.586z"/></svg>
|
||||
</span>
|
||||
<span>Hover</span>
|
||||
</span>
|
||||
|
||||
<span class="inline-flex items-center rounded-pill border border-grey-light bg-grey-lightest text-xs font-semibold pl-1 pt-1 pb-1 pr-2 leading-none opacity-50">
|
||||
<span class="inline-flex rounded-pill bg-grey text-white mr-1">
|
||||
<svg class="h-4 w-4" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 8.586L6.707 5.293c-.39-.39-1.024-.39-1.414 0-.39.39-.39 1.024 0 1.414L8.586 10l-3.293 3.293c-.39.39-.39 1.024 0 1.414.39.39 1.024.39 1.414 0L10 11.414l3.293 3.293c.39.39 1.024.39 1.414 0 .39-.39.39-1.024 0-1.414L11.414 10l3.293-3.293c.39-.39.39-1.024 0-1.414-.39-.39-1.024-.39-1.414 0L10 8.586z"/></svg>
|
||||
</span>
|
||||
<span>Focus</span>
|
||||
</span>
|
||||
</div>
|
||||
@include('_partials.feature-badges', [
|
||||
'responsive' => true,
|
||||
'customizable' => true,
|
||||
'hover' => false,
|
||||
'focus' => false
|
||||
])
|
||||
|
||||
<div class="border-t border-grey-lighter">
|
||||
<table class="w-full text-left" style="border-collapse: collapse;">
|
||||
|
||||
@ -5,13 +5,59 @@ title: "Shadows"
|
||||
|
||||
# Shadows
|
||||
|
||||
<div class="text-xl text-slate-light">
|
||||
<div class="text-xl text-slate-light mb-4">
|
||||
Utilities for controlling the box shadow of an element.
|
||||
</div>
|
||||
|
||||
<div class="subnav">
|
||||
<a class="subnav-link" href="#responsive">Responsive</a>
|
||||
<a class="subnav-link" href="#customizing">Customizing</a>
|
||||
@include('_partials.feature-badges', [
|
||||
'responsive' => true,
|
||||
'customizable' => true,
|
||||
'hover' => false,
|
||||
'focus' => false
|
||||
])
|
||||
|
||||
<div class="border-t border-grey-lighter">
|
||||
<table class="w-full text-left" style="border-collapse: 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">.shadow</td>
|
||||
<td class="w-2/5 p-2 border-t border-smoke font-mono text-xs text-blue-dark">box-shadow: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.15);</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: 0 3px 6px rgba(0,0,0,.12), 0 3px 6px rgba(0,0,0,.13);</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: 0 10px 20px rgba(0,0,0,.13), 0 6px 6px rgba(0,0,0,.13);</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: inset 0 1px 2px rgba(0, 0, 0, 0.05)</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>
|
||||
|
||||
Box shadows can be applied using the `.shadow-{size}` utilities. By default these are a size scale, where the smaller sizes represent more shallow shadows, and larger sizes represent deeper shadows. If you use the `.shadow` utility without a suffix, you'll get the default shadow.
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user