From 19945af883c85e9a83185c4f0834ec112bdaf184 Mon Sep 17 00:00:00 2001
From: Adam Wathan <adam.wathan@gmail.com>
Date: Mon, 30 Oct 2017 14:05:27 -0400
Subject: [PATCH] Expand box shadow docs

---
 docs/source/docs/shadows.blade.md | 34 +++++++++++++++++++++++++++----
 1 file changed, 30 insertions(+), 4 deletions(-)

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"
     </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.
+## 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'])
-<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 class="p-4 shadow-lg">.shadow-lg</div>
 @slot('code')
-<div class="shadow-inner"></div>
 <div class="shadow"></div>
 <div class="shadow-md"></div>
 <div class="shadow-lg"></div>
 @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'])
+<div class="p-4 bg-smoke-lighter shadow-inner">.shadow-inner</div>
+@slot('code')
+<div class="shadow-inner"></div>
+@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'])
+<div class="p-4 shadow-none bg-grey-light">.shadow-none</div>
+@slot('code')
+<div class="shadow-none"></div>
+@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.