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

Add more alert styles, extract reusable code sample partial

Browse source
This commit is contained in:
Adam Wathan 2017-10-16 12:25:22 -04:00
parent ac6ef8249b
commit e99a3c66de
2 changed files with 71 additions and 40 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -0,0 +1,8 @@
<div class="border border-dark-softer rounded mask mb-4">
<div class="p-6 border-b border-dark-softer">
{{ $slot }}
</div>
<div>
<pre class="markdown language-{{ $lang }}" style="margin: 0;"><code>{{ e($code ?? $slot) }}</code></pre>
</div>
</div>

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

@ -9,53 +9,76 @@ We don't ship alert components because every app has it's own visual style, and
Here's a bunch of examples:
### Bootstrap Style
### Bootstrap-style
<div class="border border-dark-softer rounded mask">
<div class="p-6 border-b border-dark-softer">
<div class="bg-red-lightest border border-red-light text-red-dark px-4 py-3 rounded">
<strong>Holy smokes!</strong> Something seriously bad happened.
</div>
</div>
<div>
<pre class="markdown language-html" style="margin: 0;"><code>{{
'<div class="bg-red-lightest border border-red-light text-red-dark px-4 py-3 rounded">
@component('_partials.code-sample', ['lang' => 'html'])
<div class="bg-red-lightest border border-red-light text-red-dark px-4 py-3 rounded relative">
<strong>Holy smokes!</strong> Something seriously bad happened.
</div>'
}}</code></pre>
<span class="absolute pin-t pin-b pin-r px-4 py-3">
<svg class="h-6 w-6 text-red-dark" role="button" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M14.348 14.849a1.2 1.2 0 0 1-1.697 0L10 11.819l-2.651 3.029a1.2 1.2 0 1 1-1.697-1.697l2.758-3.15-2.759-3.152a1.2 1.2 0 1 1 1.697-1.697L10 8.183l2.651-3.031a1.2 1.2 0 1 1 1.697 1.697l-2.758 3.152 2.758 3.15a1.2 1.2 0 0 1 0 1.698z"/></svg>
</span>
</div>
@endcomponent
---
### HelpScout-style
@component('_partials.code-sample', ['lang' => 'html'])
<div class="bg-orange-lightest border-l-4 border-orange text-orange-dark p-4">
<p class="text-bold">Be Warned</p>
<p>Something not ideal might be happening.</p>
</div>
@endcomponent
---
### HelpScout-style
@component('_partials.code-sample', ['lang' => 'html'])
<div>
<div class="bg-red text-light text-bold rounded-t px-4 py-2">
Danger
</div>
<div class="border border-red-light rounded-b bg-red-lightest px-4 py-3 text-red-dark">
<p>Something not ideal might be happening.</p>
</div>
</div>
@endcomponent
### HelpScout Style
---
<div class="border border-dark-softer rounded mask">
<div class="p-6 border-b border-dark-softer">
<div class="bg-orange-lightest border-l-4 border-orange text-orange-dark p-4">
Something not ideal might be happening.
</div>
</div>
<div>
<pre class="markdown language-html" style="margin: 0;"><code>{{
'<div class="bg-orange-lightest border-l-4 border-orange text-orange-dark p-4">
Something not ideal might be happening.
</div>'
}}</code></pre>
</div>
</div>
### Heroku-style
### Heroku Style
<div class="border border-dark-softer rounded mask">
<div class="p-6 border-b border-dark-softer">
<div class="bg-blue text-light text-sm text-bold px-4 py-3">
Something happened that you should know about but is probably good or at least not bad.
</div>
</div>
<div>
<pre class="markdown language-html" style="margin: 0;"><code>{{
'<div class="bg-blue text-light text-sm text-bold px-4 py-3">
@component('_partials.code-sample', ['lang' => 'html'])
<div class="bg-blue text-light text-sm text-bold px-4 py-3">
Something happened that you should know about but is probably good or at least not bad.
</div>'
}}</code></pre>
</div>
@endcomponent
---
### Shopify-style
@component('_partials.code-sample', ['lang' => 'html'])
<div class="bg-teal-lightest border-t-4 border-teal rounded-b text-dark px-4 py-3 shadow-2">
<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>
<p class="text-medium">USPS has updated their rates</p>
<p class="text-sm">Make sure you know how these changes affect your store.</p>
</div>
</div>
</div>
@endcomponent
---
### Banner-style
@component('_partials.code-sample', ['lang' => 'html'])
<div class="bg-blue-lightest border-t border-b border-blue text-blue-dark px-4 py-3">
<p class="text-bold">Informational message</p>
<p class="text-sm">Some additional text to explain said message.</p>
</div>
@endcomponent