Skip to content

Commit 9e222bd

Browse files
author
David Hemphill
committed
Make hover state a little darker
1 parent 1bae42f commit 9e222bd

File tree

1 file changed

+106
-106
lines changed

1 file changed

+106
-106
lines changed

‎docs/source/docs/examples/navigation.blade.md‎

Lines changed: 106 additions & 106 deletions
Original file line numberDiff line numberDiff line change
@@ -1,106 +1,106 @@
1-
---
2-
extends: _layouts.documentation
3-
title: "Navigation"
4-
---
5-
6-
# Navigation
7-
8-
<div class="mt-8">
9-
<div class="bg-blue-lightest border-l-4 border-blue-light rounded-b text-blue-darkest px-4 py-3">
10-
<div class="flex">
11-
<div class="py-1">
12-
<svg class="h-6 w-6 text-blue-light mr-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 20C4.477 20 0 15.523 0 10S4.477 0 10 0s10 4.477 10 10-4.477 10-10 10zm0-2c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8zm-.5-5h1c.276 0 .5.224.5.5v1c0 .276-.224.5-.5.5h-1c-.276 0-.5-.224-.5-.5v-1c0-.276.224-.5.5-.5zm0-8h1c.276 0 .5.224.5.5V8l-.5 3-1 .5L9 8V5.5c0-.276.224-.5.5-.5z"/></svg>
13-
</div>
14-
<div>
15-
<p class="font-semibold">Work in progress!</p>
16-
<p class="text-sm">More detailed examples are coming soon.</p>
17-
</div>
18-
</div>
19-
</div>
20-
</div>
21-
22-
## Simple Navigation Example
23-
24-
@component('_partials.code-sample')
25-
<ul class="flex">
26-
<li class="mr-6">
27-
<a class="text-blue hover:text-blue-darker" href="#">Active</a>
28-
</li>
29-
<li class="mr-6">
30-
<a class="text-blue hover:text-blue-darker" href="#">Link</a>
31-
</li>
32-
<li class="mr-6">
33-
<a class="text-blue hover:text-blue-darker" href="#">Link</a>
34-
</li>
35-
<li class="mr-6">
36-
<a class="text-grey-light" href="#">Disabled</a>
37-
</li>
38-
</ul>
39-
@endcomponent
40-
41-
## Tabs
42-
43-
@component('_partials.code-sample')
44-
<ul class="flex border-b">
45-
<li class="-mb-px mr-1">
46-
<a class="bg-white inline-block border-l border-t border-r rounded rounded-t py-2 px-4 text-blue-dark font-semibold" href="#">Active</a>
47-
</li>
48-
<li class="mr-1">
49-
<a class="bg-white inline-block py-2 px-4 text-blue hover:text-blue-dark font-semibold" href="#">Tab</a>
50-
</li>
51-
<li class="mr-1">
52-
<a class="bg-white inline-block py-2 px-4 text-blue hover:text-blue-dark font-semibold" href="#">Tab</a>
53-
</li>
54-
<li class="mr-1">
55-
<a class="bg-white inline-block py-2 px-4 text-grey-light font-semibold" href="#">Tab</a>
56-
</li>
57-
</ul>
58-
@endcomponent
59-
60-
## Pills
61-
62-
@component('_partials.code-sample')
63-
<ul class="flex">
64-
<li class="mr-3">
65-
<a class="inline-block border border-blue rounded py-1 px-3 bg-blue text-white" href="#">Active Pill</a>
66-
</li>
67-
<li class="mr-3">
68-
<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>
69-
</li>
70-
<li class="mr-3">
71-
<a class="inline-block py-1 px-3 text-grey-light" href="#">Disabled Pill</a>
72-
</li>
73-
</ul>
74-
@endcomponent
75-
76-
## Flex-Filled Navigation
77-
78-
@component('_partials.code-sample')
79-
<ul class="flex">
80-
<li class="flex-1 mr-2">
81-
<a class="text-center block border border-blue rounded py-2 px-4 bg-blue hover:bg-blue-dark text-white" href="#">Active Item</a>
82-
</li>
83-
<li class="flex-1 mr-2">
84-
<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>
85-
</li>
86-
<li class="text-center flex-1">
87-
<a class="block py-2 px-4 text-grey-light" href="#">Disabled Item</a>
88-
</li>
89-
</ul>
90-
@endcomponent
91-
92-
## Justified Navigation
93-
94-
@component('_partials.code-sample')
95-
<ul class="flex justify-between">
96-
<li class="mr-3">
97-
<a class="inline-block border border-blue rounded py-2 px-4 bg-blue hover:bg-blue-dark text-white" href="#">Active Pill</a>
98-
</li>
99-
<li class="mr-3">
100-
<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>
101-
</li>
102-
<li class="mr-3">
103-
<a class="inline-block py-2 px-4 text-grey-light" href="#">Disabled Pill</a>
104-
</li>
105-
</ul>
106-
@endcomponent
1+
---
2+
extends: _layouts.documentation
3+
title: "Navigation"
4+
---
5+
6+
# Navigation
7+
8+
<div class="mt-8">
9+
<div class="bg-blue-lightest border-l-4 border-blue-light rounded-b text-blue-darkest px-4 py-3">
10+
<div class="flex">
11+
<div class="py-1">
12+
<svg class="h-6 w-6 text-blue-light mr-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 20C4.477 20 0 15.523 0 10S4.477 0 10 0s10 4.477 10 10-4.477 10-10 10zm0-2c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8zm-.5-5h1c.276 0 .5.224.5.5v1c0 .276-.224.5-.5.5h-1c-.276 0-.5-.224-.5-.5v-1c0-.276.224-.5.5-.5zm0-8h1c.276 0 .5.224.5.5V8l-.5 3-1 .5L9 8V5.5c0-.276.224-.5.5-.5z"/></svg>
13+
</div>
14+
<div>
15+
<p class="font-semibold">Work in progress!</p>
16+
<p class="text-sm">More detailed examples are coming soon.</p>
17+
</div>
18+
</div>
19+
</div>
20+
</div>
21+
22+
## Simple Navigation Example
23+
24+
@component('_partials.code-sample')
25+
<ul class="flex">
26+
<li class="mr-6">
27+
<a class="text-blue hover:text-blue-darker" href="#">Active</a>
28+
</li>
29+
<li class="mr-6">
30+
<a class="text-blue hover:text-blue-darker" href="#">Link</a>
31+
</li>
32+
<li class="mr-6">
33+
<a class="text-blue hover:text-blue-darker" href="#">Link</a>
34+
</li>
35+
<li class="mr-6">
36+
<a class="text-grey-light" href="#">Disabled</a>
37+
</li>
38+
</ul>
39+
@endcomponent
40+
41+
## Tabs
42+
43+
@component('_partials.code-sample')
44+
<ul class="flex border-b">
45+
<li class="-mb-px mr-1">
46+
<a class="bg-white inline-block border-l border-t border-r rounded rounded-t py-2 px-4 text-blue-dark font-semibold" href="#">Active</a>
47+
</li>
48+
<li class="mr-1">
49+
<a class="bg-white inline-block py-2 px-4 text-blue hover:text-blue-darker font-semibold" href="#">Tab</a>
50+
</li>
51+
<li class="mr-1">
52+
<a class="bg-white inline-block py-2 px-4 text-blue hover:text-blue-darker font-semibold" href="#">Tab</a>
53+
</li>
54+
<li class="mr-1">
55+
<a class="bg-white inline-block py-2 px-4 text-grey-light font-semibold" href="#">Tab</a>
56+
</li>
57+
</ul>
58+
@endcomponent
59+
60+
## Pills
61+
62+
@component('_partials.code-sample')
63+
<ul class="flex">
64+
<li class="mr-3">
65+
<a class="inline-block border border-blue rounded py-1 px-3 bg-blue text-white" href="#">Active Pill</a>
66+
</li>
67+
<li class="mr-3">
68+
<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>
69+
</li>
70+
<li class="mr-3">
71+
<a class="inline-block py-1 px-3 text-grey-light" href="#">Disabled Pill</a>
72+
</li>
73+
</ul>
74+
@endcomponent
75+
76+
## Flex-Filled Navigation
77+
78+
@component('_partials.code-sample')
79+
<ul class="flex">
80+
<li class="flex-1 mr-2">
81+
<a class="text-center block border border-blue rounded py-2 px-4 bg-blue hover:bg-blue-dark text-white" href="#">Active Item</a>
82+
</li>
83+
<li class="flex-1 mr-2">
84+
<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>
85+
</li>
86+
<li class="text-center flex-1">
87+
<a class="block py-2 px-4 text-grey-light" href="#">Disabled Item</a>
88+
</li>
89+
</ul>
90+
@endcomponent
91+
92+
## Justified Navigation
93+
94+
@component('_partials.code-sample')
95+
<ul class="flex justify-between">
96+
<li class="mr-3">
97+
<a class="inline-block border border-blue rounded py-2 px-4 bg-blue hover:bg-blue-dark text-white" href="#">Active Pill</a>
98+
</li>
99+
<li class="mr-3">
100+
<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>
101+
</li>
102+
<li class="mr-3">
103+
<a class="inline-block py-2 px-4 text-grey-light" href="#">Disabled Pill</a>
104+
</li>
105+
</ul>
106+
@endcomponent

0 commit comments

Comments
 (0)