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

Add scroll icon to bottom of scrollable class tables

Browse Source
This commit is contained in:
Adam Wathan 2017-11-24 19:46:55 -05:00
parent 66cf9053ab
commit d0293723ea
2 changed files with 16 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
docs/source/_partials/class-table.blade.php
View File

@ -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>

4
docs/tailwind.js
View File

@ -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