wrapper/tailwindcss
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

Fix shadows, don't align examples left by default

Browse source
This commit is contained in:
Adam Wathan 2017-10-17 15:38:48 -04:00
parent c6f74d005b
commit c7c658940b
6 changed files with 17 additions and 19 deletions
Download patch file Download diff file Expand all files Collapse all files

4
docs/source/_layouts/master.blade.php
View file

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

2
docs/source/_partials/code-sample.blade.php
View file

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

2
docs/source/examples/alerts.blade.md
View file

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

2
docs/source/examples/cards.blade.md
View file

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

20
docs/source/styles/buttons.blade.md
View file

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

6
docs/source/styles/shadows.blade.md
View file

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