diff --git a/docs/source/docs/shadows.blade.md b/docs/source/docs/shadows.blade.md index ec6269226..75dce030d 100644 --- a/docs/source/docs/shadows.blade.md +++ b/docs/source/docs/shadows.blade.md @@ -60,21 +60,47 @@ title: "Shadows" -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. +## Outer shadow + +Use the `.shadow`, `.shadow-md`, or `.shadow-lg` utilities to apply different sized outer box shadows to an element. @component('_partials.code-sample', ['class' => 'flex justify-around text-sm py-8']) -
.shadow-inner
.shadow
.shadow-md
-
.shadow-lg
+
.shadow-lg
@slot('code') -
@endslot @endcomponent +## Inner shadow + +Use the `.shadow-inner` utility to apply a subtle inset box shadow to an element. + +This can be useful for things like form controls or wells. + +@component('_partials.code-sample', ['class' => 'flex justify-around text-sm py-8']) +
.shadow-inner
+@slot('code') +
+@endslot +@endcomponent + +## No shadow + +Use `.shadow-none` to remove an existing box shadow from an element. + +This is most commonly used to remove a shadow that was applied at a smaller breakpoint. + +@component('_partials.code-sample', ['class' => 'flex justify-around text-sm py-8']) +
.shadow-none
+@slot('code') +
+@endslot +@endcomponent + ## Responsive To control the shadow of an element at a specific breakpoint, add a `{breakpoint}:` prefix to any existing shadow utility. For example, use `md:shadow-lg` to apply the `shadow-lg` utility at only medium screen sizes and above.