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

Update shadows documentation

Browse Source
This commit is contained in:
Adam Wathan 2017-10-17 14:58:53 -04:00
parent 3be4648d41
commit ea433a69ee
3 changed files with 26 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

70
dist/tailwind.css vendored
View File

@ -3004,26 +3004,18 @@ button,
margin: -1px;
}
.shadow-1 {
.shadow {
box-shadow: 0 1px 3px rgba(0, 0, 0, .08), 0 1px 2px rgba(0, 0, 0, .15);
}
.shadow-2 {
.shadow-md {
box-shadow: 0 3px 6px rgba(0, 0, 0, .12), 0 3px 6px rgba(0, 0, 0, .13);
}
.shadow-3 {
.shadow-lg {
box-shadow: 0 10px 20px rgba(0, 0, 0, .13), 0 6px 6px rgba(0, 0, 0, .13);
}
.shadow-4 {
box-shadow: 0 14px 28px rgba(0, 0, 0, .16), 0 10px 10px rgba(0, 0, 0, .11);
}
.shadow-5 {
box-shadow: 0 19px 38px rgba(0, 0, 0, .18), 0 15px 12px rgba(0, 0, 0, .11);
}
.shadow-inner {
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
}
@ -5726,26 +5718,18 @@ button,
margin: -1px;
}
.sm\:shadow-1 {
.sm\:shadow {
box-shadow: 0 1px 3px rgba(0, 0, 0, .08), 0 1px 2px rgba(0, 0, 0, .15);
}
.sm\:shadow-2 {
.sm\:shadow-md {
box-shadow: 0 3px 6px rgba(0, 0, 0, .12), 0 3px 6px rgba(0, 0, 0, .13);
}
.sm\:shadow-3 {
.sm\:shadow-lg {
box-shadow: 0 10px 20px rgba(0, 0, 0, .13), 0 6px 6px rgba(0, 0, 0, .13);
}
.sm\:shadow-4 {
box-shadow: 0 14px 28px rgba(0, 0, 0, .16), 0 10px 10px rgba(0, 0, 0, .11);
}
.sm\:shadow-5 {
box-shadow: 0 19px 38px rgba(0, 0, 0, .18), 0 15px 12px rgba(0, 0, 0, .11);
}
.sm\:shadow-inner {
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
}
@ -8449,26 +8433,18 @@ button,
margin: -1px;
}
.md\:shadow-1 {
.md\:shadow {
box-shadow: 0 1px 3px rgba(0, 0, 0, .08), 0 1px 2px rgba(0, 0, 0, .15);
}
.md\:shadow-2 {
.md\:shadow-md {
box-shadow: 0 3px 6px rgba(0, 0, 0, .12), 0 3px 6px rgba(0, 0, 0, .13);
}
.md\:shadow-3 {
.md\:shadow-lg {
box-shadow: 0 10px 20px rgba(0, 0, 0, .13), 0 6px 6px rgba(0, 0, 0, .13);
}
.md\:shadow-4 {
box-shadow: 0 14px 28px rgba(0, 0, 0, .16), 0 10px 10px rgba(0, 0, 0, .11);
}
.md\:shadow-5 {
box-shadow: 0 19px 38px rgba(0, 0, 0, .18), 0 15px 12px rgba(0, 0, 0, .11);
}
.md\:shadow-inner {
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
}
@ -11172,26 +11148,18 @@ button,
margin: -1px;
}
.lg\:shadow-1 {
.lg\:shadow {
box-shadow: 0 1px 3px rgba(0, 0, 0, .08), 0 1px 2px rgba(0, 0, 0, .15);
}
.lg\:shadow-2 {
.lg\:shadow-md {
box-shadow: 0 3px 6px rgba(0, 0, 0, .12), 0 3px 6px rgba(0, 0, 0, .13);
}
.lg\:shadow-3 {
.lg\:shadow-lg {
box-shadow: 0 10px 20px rgba(0, 0, 0, .13), 0 6px 6px rgba(0, 0, 0, .13);
}
.lg\:shadow-4 {
box-shadow: 0 14px 28px rgba(0, 0, 0, .16), 0 10px 10px rgba(0, 0, 0, .11);
}
.lg\:shadow-5 {
box-shadow: 0 19px 38px rgba(0, 0, 0, .18), 0 15px 12px rgba(0, 0, 0, .11);
}
.lg\:shadow-inner {
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
}
@ -13895,26 +13863,18 @@ button,
margin: -1px;
}
.xl\:shadow-1 {
.xl\:shadow {
box-shadow: 0 1px 3px rgba(0, 0, 0, .08), 0 1px 2px rgba(0, 0, 0, .15);
}
.xl\:shadow-2 {
.xl\:shadow-md {
box-shadow: 0 3px 6px rgba(0, 0, 0, .12), 0 3px 6px rgba(0, 0, 0, .13);
}
.xl\:shadow-3 {
.xl\:shadow-lg {
box-shadow: 0 10px 20px rgba(0, 0, 0, .13), 0 6px 6px rgba(0, 0, 0, .13);
}
.xl\:shadow-4 {
box-shadow: 0 14px 28px rgba(0, 0, 0, .16), 0 10px 10px rgba(0, 0, 0, .11);
}
.xl\:shadow-5 {
box-shadow: 0 19px 38px rgba(0, 0, 0, .18), 0 15px 12px rgba(0, 0, 0, .11);
}
.xl\:shadow-inner {
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
}

2
dist/tailwind.css.map vendored
View File

File diff suppressed because one or more lines are too long

23
docs/source/styles/shadows.md → docs/source/styles/shadows.blade.md
View File

@ -15,26 +15,23 @@ title: "Shadows"
Box shadows can be applied using the shadow utilities. By default these are a linear scale, where the lower values represent smaller (shallow) shadows, and higher values represent bigger (deeper) shadows.
<div class="flex text-sm my-6">
<div class="mr-3 p-4 shadow-inner">.shadow-inner</div>
<div class="mr-3 p-4 shadow-1">.shadow-1</div>
<div class="mr-3 p-4 shadow-2">.shadow-2</div>
<div class="mr-3 p-4 shadow-3">.shadow-3</div>
<div class="mr-3 p-4 shadow-4">.shadow-4</div>
<div class="mr-3 p-4 shadow-5">.shadow-5</div>
@component('_partials.code-sample', ['lang' => 'html'])
<div class="flex justify-around text-sm my-6">
<div class="mr-3 p-4 bg-smoke-lighter shadow-inner">.shadow-inner</div>
<div class="mr-3 p-4 shadow">.shadow</div>
<div class="mr-3 p-4 shadow-md">.shadow-md</div>
<div class="mr-3 p-4 shadow-lg">.shadow-lg</div>
</div>
<div>
</div>
```html
@slot('code')
<div class="shadow-inner"></div>
<div class="shadow-1"></div>
<div class="shadow"></div>
<div class="shadow-2"></div>
<div class="shadow-3"></div>
<div class="shadow-4"></div>
<div class="shadow-5"></div>
```
@endslot
@endcomponent
## Responsive