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

Tweak nav example titles and disabled states

Browse Source
This commit is contained in:
Adam Wathan 2017-11-04 09:18:39 -04:00
parent 30b5e588cf
commit 4b345d66f9
1 changed files with 7 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -19,7 +19,7 @@ title: "Navigation"
</div>
</div>
## Simple Navigation Example
## Simple
@component('_partials.code-sample')
<ul class="flex">
@ -33,7 +33,7 @@ title: "Navigation"
<a class="text-blue hover:text-blue-darker" href="#">Link</a>
</li>
<li class="mr-6">
<a class="text-grey-light" href="#">Disabled</a>
<a class="text-grey-light cursor-not-allowed" href="#">Disabled</a>
</li>
</ul>
@endcomponent
@ -68,12 +68,12 @@ title: "Navigation"
<a class="inline-block border border-white rounded hover:border-grey-lighter text-blue hover:bg-grey-lighter py-1 px-3" href="#">Pill</a>
</li>
<li class="mr-3">
<a class="inline-block py-1 px-3 text-grey-light" href="#">Disabled Pill</a>
<a class="inline-block py-1 px-3 text-grey-light cursor-not-allowed" href="#">Disabled Pill</a>
</li>
</ul>
@endcomponent
## Flex-Filled Navigation
## Stretched
@component('_partials.code-sample')
<ul class="flex">
@ -84,12 +84,12 @@ title: "Navigation"
<a class="text-center block border border-white rounded hover:border-grey-lighter text-blue hover:bg-grey-lighter py-2 px-4" href="#">Nav Item</a>
</li>
<li class="text-center flex-1">
<a class="block py-2 px-4 text-grey-light" href="#">Disabled Item</a>
<a class="block py-2 px-4 text-grey-light cursor-not-allowed" href="#">Disabled Item</a>
</li>
</ul>
@endcomponent
## Justified Navigation
## Justified
@component('_partials.code-sample')
<ul class="flex justify-between">
@ -100,7 +100,7 @@ title: "Navigation"
<a class="inline-block border border-white rounded hover:border-grey-lighter text-blue hover:bg-grey-lighter py-2 px-4" href="#">Pill</a>
</li>
<li class="mr-3">
<a class="inline-block py-2 px-4 text-grey-light" href="#">Disabled Pill</a>
<a class="inline-block py-2 px-4 text-grey-light cursor-not-allowed" href="#">Disabled Pill</a>
</li>
</ul>
@endcomponent