From d0293723ea08eab061cb88a4e4be9cda5f7f7191 Mon Sep 17 00:00:00 2001
From: Adam Wathan <adam.wathan@gmail.com>
Date: Fri, 24 Nov 2017 19:46:55 -0500
Subject: [PATCH] Add scroll icon to bottom of scrollable class tables

---
 docs/source/_partials/class-table.blade.php | 14 ++++++++++++--
 docs/tailwind.js                            |  4 ++++
 2 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/docs/source/_partials/class-table.blade.php b/docs/source/_partials/class-table.blade.php
index 744b90bc5..424177486 100644
--- a/docs/source/_partials/class-table.blade.php
+++ b/docs/source/_partials/class-table.blade.php
@@ -1,5 +1,10 @@
-<div class="border-t border-b border-grey-light">
-  <div class="{{ (count($rows) <= 10 || (isset($scroll) && $scroll === false)) ? '' : 'max-h-sm' }} overflow-y-scroll">
+@php
+  $scroll = isset($scroll) ? $scroll : true;
+  $scroll = (count($rows) > 10 && ($scroll !== false));
+@endphp
+
+<div class="border-t border-b border-grey-light overflow-hidden relative">
+  <div class="{{ $scroll ? 'max-h-sm pb-10' : '' }} overflow-y-scroll">
     <table class="w-full text-left table-collapse">
       <thead>
         <tr>
@@ -19,4 +24,9 @@
       </tbody>
     </table>
   </div>
+  @if ($scroll)
+  <div class="bg-white opacity-50 text-center absolute pin-b pin-x py-2 flex justify-center shadow-md-light">
+      <svg class="h-6 w-6 text-grey-dark" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"/></svg>
+  </div>
+  @endif
 </div>
diff --git a/docs/tailwind.js b/docs/tailwind.js
index e92b00ff5..2d635826d 100644
--- a/docs/tailwind.js
+++ b/docs/tailwind.js
@@ -93,4 +93,8 @@ config.margin = Object.assign(config.margin, {
 
 config.negativeMargin = config.margin
 
+config.shadows = Object.assign({
+  'md-light': '0 0 12px 8px rgb(255,255,255)'
+}, config.shadows)
+
 module.exports = config