From c7c658940bee1e7c54011f12eee9176f62d57475 Mon Sep 17 00:00:00 2001
From: Adam Wathan <adam.wathan@gmail.com>
Date: Tue, 17 Oct 2017 15:38:48 -0400
Subject: [PATCH] Fix shadows, don't align examples left by default

---
 docs/source/_layouts/master.blade.php       |  4 ++--
 docs/source/_partials/code-sample.blade.php |  2 +-
 docs/source/examples/alerts.blade.md        |  2 +-
 docs/source/examples/cards.blade.md         |  2 +-
 docs/source/styles/buttons.blade.md         | 20 ++++++++++----------
 docs/source/styles/shadows.blade.md         |  6 ++----
 6 files changed, 17 insertions(+), 19 deletions(-)

diff --git a/docs/source/_layouts/master.blade.php b/docs/source/_layouts/master.blade.php
index 389414fee..691679f52 100644
--- a/docs/source/_layouts/master.blade.php
+++ b/docs/source/_layouts/master.blade.php
@@ -13,7 +13,7 @@
         <header class="container">
             <div class="py-6 flex items-center justify-between">
                 <div class="flex items-center">
-                    <div class="rounded-pill h-12 w-12 bg-white p-2 inline-flex items-center justify-center shadow-2 mr-4">
+                    <div class="rounded-pill h-12 w-12 bg-white p-2 inline-flex items-center justify-center shadow-md mr-4">
                         <svg class="fit w-full" viewBox="0 0 60 36" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient x1="0%" y1="0%" y2="100%" id="a"><stop stop-color="#2383AE" offset="0%"></stop><stop stop-color="#6DD7B9" offset="100%"></stop></linearGradient></defs><path d="M15 12c2-8 7-12 15-12 12 0 13.5 9 19.5 10.5 4 1 7.5-.5 10.5-4.5-2 8-7 12-15 12-12 0-13.5-9-19.5-10.5-4-1-7.5.5-10.5 4.5zM0 30c2-8 7-12 15-12 12 0 13.5 9 19.5 10.5 4 1 7.5-.5 10.5-4.5-2 8-7 12-15 12-12 0-13.5-9-19.5-10.5-4-1-7.5.5-10.5 4.5z" fill="url(#a)" fill-rule="evenodd"></path></svg>
                     </div>
                     <svg class="h-4" viewBox="0 0 136 19" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Tailwind CSS">
@@ -157,7 +157,7 @@
                     </nav>
                 </div>
                 <div class="w-full lg:w-3/4">
-                    <div class="p-12 rounded-lg bg-white shadow-2">
+                    <div class="p-12 rounded-lg bg-white shadow-md">
                         @yield('body')
                     </div>
                 </div>
diff --git a/docs/source/_partials/code-sample.blade.php b/docs/source/_partials/code-sample.blade.php
index f732b2eb3..710241377 100644
--- a/docs/source/_partials/code-sample.blade.php
+++ b/docs/source/_partials/code-sample.blade.php
@@ -1,5 +1,5 @@
 <div class="border border-smoke rounded mask mb-4">
-  <div class="p-6 border-b border-smoke text-center">
+  <div class="p-6 border-b border-smoke {{ $class ?? '' }}">
     {{ $slot }}
   </div>
   <div>
diff --git a/docs/source/examples/alerts.blade.md b/docs/source/examples/alerts.blade.md
index f2591e7e0..a613556fa 100644
--- a/docs/source/examples/alerts.blade.md
+++ b/docs/source/examples/alerts.blade.md
@@ -64,7 +64,7 @@ Here's a bunch of examples:
 ### Top Accent Border
 
 @component('_partials.code-sample', ['lang' => 'html'])
-<div class="bg-teal-lighter border-t-4 border-teal rounded-b text-slate-darker px-4 py-3 shadow-2">
+<div class="bg-teal-lighter border-t-4 border-teal rounded-b text-slate-darker px-4 py-3 shadow-md">
   <div class="flex">
     <svg class="h-6 w-6 text-teal mr-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M2.93 17.07A10 10 0 1 1 17.07 2.93 10 10 0 0 1 2.93 17.07zm12.73-1.41A8 8 0 1 0 4.34 4.34a8 8 0 0 0 11.32 11.32zM9 11V9h2v6H9v-4zm0-6h2v2H9V5z"/></svg>
     <div>
diff --git a/docs/source/examples/cards.blade.md b/docs/source/examples/cards.blade.md
index 3d33a0beb..a43dd0794 100644
--- a/docs/source/examples/cards.blade.md
+++ b/docs/source/examples/cards.blade.md
@@ -8,7 +8,7 @@ title: "Cards"
 We don't ship alert components because every app has it's own visual style, but they are easy af to make.
 
 <div class="max-w-sm mb-8">
-    <div class="rounded overflow-hidden shadow-3">
+    <div class="rounded overflow-hidden shadow-lg">
         <img class="fit w-full" src="/img/card-top.jpg" alt="">
         <div class="px-6 py-4">
             <h2 class="text-xl mb-2">The Coldest Sunset</h2>
diff --git a/docs/source/styles/buttons.blade.md b/docs/source/styles/buttons.blade.md
index b757323e4..a6a62481e 100644
--- a/docs/source/styles/buttons.blade.md
+++ b/docs/source/styles/buttons.blade.md
@@ -13,7 +13,7 @@ Here's a bunch of examples:
 
 ### Simple
 
-@component('_partials.code-sample', ['lang' => 'html'])
+@component('_partials.code-sample', ['lang' => 'html', 'class' => 'text-center'])
 <button class="bg-blue hover:bg-blue-dark text-white text-bold py-2 px-4 rounded">
     Button
 </button>
@@ -47,7 +47,7 @@ Here's a bunch of examples:
 
 ### Pill
 
-@component('_partials.code-sample', ['lang' => 'html'])
+@component('_partials.code-sample', ['lang' => 'html', 'class' => 'text-center'])
 <button class="bg-blue hover:bg-blue-dark text-white text-bold py-2 px-4 rounded-pill">
     Button
 </button>
@@ -57,7 +57,7 @@ Here's a bunch of examples:
 
 ### Outline
 
-@component('_partials.code-sample', ['lang' => 'html'])
+@component('_partials.code-sample', ['lang' => 'html', 'class' => 'text-center'])
 <button class="bg-transparent hover:bg-blue text-blue-dark text-medium hover:text-white py-2 px-4 border border-blue hover:border-transparent rounded">
     Button
 </button>
@@ -67,7 +67,7 @@ Here's a bunch of examples:
 
 ### Bordered
 
-@component('_partials.code-sample', ['lang' => 'html'])
+@component('_partials.code-sample', ['lang' => 'html', 'class' => 'text-center'])
 <button class="bg-blue hover:bg-blue-dark text-white text-bold py-2 px-4 border border-blue-darker rounded">
     Button
 </button>
@@ -77,7 +77,7 @@ Here's a bunch of examples:
 
 ### Disabled
 
-@component('_partials.code-sample', ['lang' => 'html'])
+@component('_partials.code-sample', ['lang' => 'html', 'class' => 'text-center'])
 <button class="bg-blue text-white text-bold py-2 px-4 rounded opacity-50 cursor-not-allowed">
     Button
 </button>
@@ -87,7 +87,7 @@ Here's a bunch of examples:
 
 ### 3D
 
-@component('_partials.code-sample', ['lang' => 'html'])
+@component('_partials.code-sample', ['lang' => 'html', 'class' => 'text-center'])
 <button class="bg-blue hover:bg-blue-dark text-white text-bold py-2 px-4 border-b-4 border-blue-dark hover:border-blue-darker rounded">
     Button
 </button>
@@ -97,8 +97,8 @@ Here's a bunch of examples:
 
 ### Elevated
 
-@component('_partials.code-sample', ['lang' => 'html'])
-<button class="bg-white hover:bg-smoke-lighter text-slate-dark text-medium py-2 px-4 border border-slate-lighter rounded shadow-1">
+@component('_partials.code-sample', ['lang' => 'html', 'class' => 'text-center'])
+<button class="bg-white hover:bg-smoke-lighter text-slate-dark text-medium py-2 px-4 border border-slate-lighter rounded shadow">
     Button
 </button>
 @endcomponent
@@ -107,7 +107,7 @@ Here's a bunch of examples:
 
 ### Button Groups
 
-@component('_partials.code-sample', ['lang' => 'html'])
+@component('_partials.code-sample', ['lang' => 'html', 'class' => 'text-center'])
 <div class="inline-flex">
     <button class="bg-smoke hover:bg-smoke-dark text-slate-dark text-bold py-2 px-4 rounded-l">
         Prev
@@ -122,7 +122,7 @@ Here's a bunch of examples:
 
 ### w/Icon
 
-@component('_partials.code-sample', ['lang' => 'html'])
+@component('_partials.code-sample', ['lang' => 'html', 'class' => 'text-center'])
 <button class="bg-smoke hover:bg-smoke-dark text-slate-dark text-bold py-2 px-4 rounded inline-flex items-center">
     <svg class="h-4 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M13 8V2H7v6H2l8 8 8-8h-5zM0 18h20v2H0v-2z"/></svg>
     <span>Download</span>
diff --git a/docs/source/styles/shadows.blade.md b/docs/source/styles/shadows.blade.md
index 956a04f77..63f1810e8 100644
--- a/docs/source/styles/shadows.blade.md
+++ b/docs/source/styles/shadows.blade.md
@@ -26,10 +26,8 @@ Box shadows can be applied using the shadow utilities. By default these are a li
 @slot('code')
 <div class="shadow-inner"></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>
+<div class="shadow-md"></div>
+<div class="shadow-lg"></div>
 @endslot
 @endcomponent