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

Merge pull request #126 from anasbouzid/master

Browse Source 
Make examples more accessible
This commit is contained in:
Adam Wathan 2017-11-07 08:11:37 -05:00 committed by GitHub
commit c94b62a505
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 14 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
docs/source/docs/examples/alerts.blade.md
View File

@ -22,11 +22,11 @@ title: "Alerts"
### Traditional
@component('_partials.code-sample', ['lang' => 'html'])
<div class="bg-red-lightest border border-red-light text-red-dark px-4 py-3 rounded relative">
<div class="bg-red-lightest border border-red-light text-red-dark px-4 py-3 rounded relative" role="alert">
<strong class="font-bold">Holy smokes!</strong>
<span class="block sm:inline">Something seriously bad happened.</span>
<span class="absolute pin-t pin-b pin-r px-4 py-3">
<svg class="h-6 w-6 text-red" 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>
<svg class="h-6 w-6 text-red" role="button" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><title>Close</title><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
@ -34,7 +34,7 @@ title: "Alerts"
### Left Accent Border
@component('_partials.code-sample', ['lang' => 'html'])
<div class="bg-orange-lightest border-l-4 border-orange text-orange-dark p-4">
<div class="bg-orange-lightest border-l-4 border-orange text-orange-dark p-4" role="alert">
<p class="font-bold">Be Warned</p>
<p>Something not ideal might be happening.</p>
</div>
@ -43,7 +43,7 @@ title: "Alerts"
### Titled
@component('_partials.code-sample', ['lang' => 'html'])
<div>
<div role="alert">
<div class="bg-red text-white font-bold rounded rounded-t px-4 py-2">
Danger
</div>
@ -56,7 +56,7 @@ title: "Alerts"
### Solid
@component('_partials.code-sample', ['lang' => 'html'])
<div class="flex items-center bg-blue text-white text-sm font-bold px-4 py-3">
<div class="flex items-center bg-blue text-white text-sm font-bold px-4 py-3" role="alert">
<svg class="w-4 h-4 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M12.432 0c1.34 0 2.01.912 2.01 1.957 0 1.305-1.164 2.512-2.679 2.512-1.269 0-2.009-.75-1.974-1.99C9.789 1.436 10.67 0 12.432 0zM8.309 20c-1.058 0-1.833-.652-1.093-3.524l1.214-5.092c.211-.814.246-1.141 0-1.141-.317 0-1.689.562-2.502 1.117l-.528-.88c2.572-2.186 5.531-3.467 6.801-3.467 1.057 0 1.233 1.273.705 3.23l-1.391 5.352c-.246.945-.141 1.271.106 1.271.317 0 1.357-.392 2.379-1.207l.6.814C12.098 19.02 9.365 20 8.309 20z"/></svg>
<p>
Something happened that you should know about.
@ -67,7 +67,7 @@ title: "Alerts"
### Top Accent Border
@component('_partials.code-sample', ['lang' => 'html'])
<div class="bg-teal-lightest border-t-4 border-teal rounded rounded-b text-teal-darkest px-4 py-3 shadow-md">
<div class="bg-teal-lightest border-t-4 border-teal rounded rounded-b text-teal-darkest px-4 py-3 shadow-md" role="alert">
<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>
@ -81,7 +81,7 @@ title: "Alerts"
### Banner
@component('_partials.code-sample', ['lang' => 'html'])
<div class="bg-blue-lightest border-t border-b border-blue text-blue-dark px-4 py-3">
<div class="bg-blue-lightest border-t border-b border-blue text-blue-dark px-4 py-3" role="alert">
<p class="font-bold">Informational message</p>
<p class="text-sm">Some additional text to explain said message.</p>
</div>

6
docs/source/docs/examples/cards.blade.md
View File

@ -23,7 +23,7 @@ title: "Cards"
@component('_partials.code-sample', ['class' => 'p-10 flex justify-center'])
<div class="max-w-sm rounded overflow-hidden shadow-lg">
<img class="w-full" src="{{ $page->baseUrl }}/img/card-top.jpg">
<img class="w-full" src="{{ $page->baseUrl }}/img/card-top.jpg" alt="Sunset in the mountains">
<div class="px-6 py-4">
<div class="font-bold text-xl mb-2">The Coldest Sunset</div>
<p class="text-grey-darker text-base">
@ -43,7 +43,7 @@ title: "Cards"
@component('_partials.code-sample', ['class' => 'p-10 flex justify-center'])
<div class="max-w-md flex">
<div class="rounded rounded-l w-128 text-center overflow-hidden">
<img class="block h-64" src="{{ $page->baseUrl }}/img/card-left.jpg">
<img class="block h-64" src="{{ $page->baseUrl }}/img/card-left.jpg" alt="Woman holding a mug">
</div>
<div class="border-t border-r border-b border-grey-light rounded rounded-r p-4 flex flex-col justify-between">
<div>
@ -55,7 +55,7 @@ title: "Cards"
<p class="text-grey-darker text-base">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus quia, nulla! Maiores et perferendis eaque, exercitationem praesentium nihil.</p>
</div>
<div class="flex items-center">
<img class="w-10 h-10 rounded-full mr-4" src="https://pbs.twimg.com/profile_images/885868801232961537/b1F6H4KC_400x400.jpg">
<img class="w-10 h-10 rounded-full mr-4" src="https://pbs.twimg.com/profile_images/885868801232961537/b1F6H4KC_400x400.jpg" alt="Avatar of Jonathan Reinink">
<div class="text-sm">
<p class="text-black leading-none">Jonathan Reinink</p>
<p class="text-grey-dark">Aug 18</p>

6
docs/source/docs/examples/forms.blade.md
View File

@ -132,11 +132,11 @@ title: "Forms"
<input class="appearance-none block w-full bg-grey-lighter text-grey-darker border border-grey-lighter rounded py-3 px-4" id="grid-city" type="text" placeholder="Albuquerque">
</div>
<div class="md:w-1/2 px-3">
<label class="block uppercase tracking-wide text-grey-darker text-xs font-bold mb-2" for="grid-select">
<label class="block uppercase tracking-wide text-grey-darker text-xs font-bold mb-2" for="grid-state">
State
</label>
<div class="relative">
<select class="block appearance-none w-full bg-grey-lighter border border-grey-lighter text-grey-darker py-3 px-4 pr-8 rounded">
<select class="block appearance-none w-full bg-grey-lighter border border-grey-lighter text-grey-darker py-3 px-4 pr-8 rounded" id="grid-state">
<option>New Mexico</option>
<option>Missouri</option>
<option>Texas</option>
@ -162,7 +162,7 @@ title: "Forms"
@component('_partials.code-sample', ['class' => 'flex justify-center p-8'])
<form class="w-full max-w-sm">
<div class="flex items-center border-b border-b-2 border-teal py-2">
<input class="appearance-none bg-transparent border-none w-full text-grey-darker mr-3 py-1 px-2" id="underline-full-name" type="text" placeholder="Jane Doe">
<input class="appearance-none bg-transparent border-none w-full text-grey-darker mr-3 py-1 px-2" type="text" placeholder="Jane Doe" aria-label="Full name">
<button class="flex-no-shrink bg-teal hover:bg-teal-dark border-teal hover:border-teal-dark text-sm border-4 text-white py-1 px-2 rounded" type="button">
Sign Up
</button>

2
docs/source/docs/examples/navigation.blade.md
View File

@ -48,7 +48,7 @@ title: "Navigation"
</div>
<div class="block lg:hidden">
<button class="flex items-center px-3 py-2 border rounded text-teal-lighter border-teal-light hover:text-white hover:border-white">
<svg class="h-3 w-3" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"/></svg>
<svg class="h-3 w-3" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><title>Menu</title><path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"/></svg>
</button>
</div>
<div class="w-full block flex-grow lg:flex lg:items-center lg:w-auto">