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

Working on alert examples

Browse source
This commit is contained in:
Adam Wathan 2017-10-16 09:01:38 -04:00
parent 7401f8583a
commit c951ad09ae
2 changed files with 52 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

2
docs/source/_assets/less/markdown.less
View file

@ -91,7 +91,7 @@
@apply .text-dark-soft;
}
> :not(pre) > code[class*="language-"], > pre[class*="language-"] {
> :not(pre) > code[class*="language-"], > pre[class*="language-"], pre[class*="language-"]& {
@apply .bg-light-soft;
@apply .text-sm;
@apply .leading-loose;

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

@ -5,15 +5,57 @@ title: "Alerts"
# Alerts
We don't ship alert components because every app has it's own visual style, but they are easy af to make.
We don't ship alert components because every app has it's own visual style, and they are so easy to build out of utilities.
@foreach($page->colors as $color)
<div class="bg-{{$color}}-lightest border border-{{$color}}-light rounded p-4 mb-4">
<div class="text-bold text-{{$color}}-dark">
Alert message
</div>
<div class="text-{{$color}}-dark">
Some additional text to explain what happened.
Here's a bunch of examples:
### 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">
<strong>Holy smokes!</strong> Something seriously bad happened.
</div>'
}}</code></pre>
</div>
</div>
### 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
<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">
Something happened that you should know about but is probably good or at least not bad.
</div>'
}}</code></pre>
</div>
</div>
@endforeach