Skip to content

Commit 9c94149

Browse files
author
mrmrs
committed
Add updated hovers
1 parent f3f9334 commit 9c94149

File tree

4 files changed

+148
-78
lines changed

4 files changed

+148
-78
lines changed

‎docs/elements/links/index.html

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -83,31 +83,31 @@ <h4 class="f4 mv0 fw6 dib mr4">tachyons-links</h4>
8383
<div class="ph3 ph5-ns pt4 pb5">
8484
<h2 class="f5 f4-ns fw6 bold">Examples</h2>
8585
<h4 class="f5">Underline links and animate to color</h4>
86-
<p>
86+
<p class="lh-copy measure">
8787
To keep the default underline, but animate the color transition, combine classes from skins and skins-pseudo.
8888
</p>
8989
<div class="bl-ns bw2-ns b--black-05 pl3-ns">
9090
<a href="#" class="link underline blue hover-orange">link text</a>
9191
<code class="f6 db mt3">&lt;a href="#" class="link underline blue hover-orange"&gt;link text&lt;/a&gt; </code>
9292
</div>
9393
<h4 class="f5 mt4 mt5-ns">Underline on hover</h4>
94-
<p>
94+
<p class="lh-copy measure">
9595
To add an underline on hover and focus, use the class 'underline-hover'.
9696
</p>
9797
<div class="bl-ns bw2-ns b--black-05 pl3-ns">
9898
<a href="#" class="link underline-hover red">link text</a>
9999
<code class="f6 db mt3">&lt;a href="#" class="link underline-hover red"&gt;link text&lt;/a&gt; </code>
100100
</div>
101101
<h4 class="f5 mt4 mt5-ns">Dim on hover</h4>
102-
<p>
102+
<p class="lh-copy measure">
103103
To dim a link on hover, add the dim class.
104104
</p>
105105
<div class="bl-ns bw2-ns b--black-05 pl3-ns">
106106
<a href="#" class="dim">link text</a>
107107
<code class="f6 db mt3">&lt;a href="#" class="dim"&gt;link text&lt;/a&gt; </code>
108108
</div>
109109
<h4 class="f5 mt4 mt5-ns">Add background color on hover</h4>
110-
<p>
110+
<p class="lh-copy measure">
111111
You can add any background color from the skins-pseudo module.
112112
</p>
113113
<div class="bl-ns bw2-ns b--black-05 pl3-ns">
@@ -116,7 +116,7 @@ <h4 class="f5 mt4 mt5-ns">Add background color on hover</h4>
116116

117117
</div>
118118
<h4 class="f5 mt4 mt5-ns">Animate background color on hover</h4>
119-
<p>
119+
<p class="lh-copy measure">
120120
You can add any background color from the skins-pseudo module.
121121
</p>
122122
<div class="bl-ns bw2-ns b--black-05 pl3-ns">
@@ -125,7 +125,7 @@ <h4 class="f5 mt4 mt5-ns">Animate background color on hover</h4>
125125
</div>
126126

127127
<h4 class="f5 mt4 mt5-ns">Colors</h4>
128-
<p>Below are examples of combining each color in the skins module with the dim class.</p>
128+
<p class="lh-copy measure">Below are examples of combining each color in the skins module with the dim class.</p>
129129
<ul class="list pl0">
130130
<li class="f5 pv2 bb b--black-10">
131131
<a href="#" class="link dim black">black link</a>

‎docs/themes/hovers/index.html

Lines changed: 68 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -82,52 +82,87 @@ <h4 class="f4 mv0 fw6 dib mr4">tachyons-hovers</h4>
8282
</article>
8383
<div class="ph3 ph5-ns pt4 pb5">
8484
<h2 class="f3 bold">Examples</h2>
85-
<h3 class="f5 book pt4 ttu fw6">Dim Text</h3>
86-
<p>
87-
<a href="#" class="f3 b db dim link pv1 black">This link will dim on hover</a>
88-
<a href="#" class="f3 b db dim link pv1 black-80">This link will dim on hover</a>
89-
<a href="#" class="f3 b db dim link pv1 black-60">This link will dim on hover</a>
85+
<h4 class="f5">Dim Text</h4>
86+
<p class="lh-copy measure">
87+
You can dim any element, including text links on hover and focus with the dim
88+
class. It will fade the element to an opacity of 50% in 150ms.
9089
</p>
91-
<h3 class="f5 book pt4 ttu fw6">Dim Card</h3>
92-
<p>
93-
<a href="#" class="link black mw5 db dim pa2 ba b--black-20 br2">
94-
<img src="http://placekitten.com/g/600/300" alt="KITTTTTTTY" class="db mb2 mw-100" />
95-
<span class="db">Dim any element and its children</span>
96-
</a>
97-
</p>
98-
<h3 class="f5 book pt4 ttu fw6">Reveal Children on Hover</h3>
99-
<a href="#" class="link black mw5 dt hide-child ba b--black-20 br2" style="background: transparent url(http://placekitten.com/g/700/300) no-repeat center center;background-size: cover; ">
100-
<span class="white b dtc v-mid w-100 h-100 child bg-black-40 ph4 pv5">Reveal children elements on hover</span>
90+
<div class="bl-ns bw2-ns b--black-05 pl3-ns">
91+
<a href="#" class="link dim black b">link text</a>
92+
<code class="f6 db mt3">&lt;a href="#" class="link dim black b"&gt;link text&lt;/a&gt;</code>
93+
</div>
94+
<h4 class="f5 mt4 mt5-ns">Dim Card</h4>
95+
<p class="lh-copy measure">You can dim any element on hover and focus with the dim element. Not just text. Here is a card component that will dim on hover.</p>
96+
<div class="bl-ns bw2-ns b--black-05 pl3-ns">
97+
<a href="#" class="link black mw5 db dim pa2 ba b--black-10 br2 shadow-1">
98+
<img src="http://mrmrs.io/photos/037.jpg" alt="SF at night" class="db mb2 mw-100" />
99+
<span class="db f6 pv2">Card title</span>
100+
</a>
101+
<code class="f6 db mt3 pre">
102+
&lt;a href="#" class="link black dim db mw5 pa2 br2 ba b--black-10 shadow-1"&gt;
103+
&lt;img src="http://mrmrs.io/photos/037.jpg" alt="SF at night" class="db mb2 mw-100" /&gt;
104+
&lt;span class="db f6 pv2"&gt;Card title&lt;/span&gt;
105+
&lt;/a&gt;
106+
</code>
107+
</div>
108+
<h4 class="f5 mt4 mt5-ns">Reveal Children on Hover</h4>
109+
<div class="bl-ns bw2-ns b--black-05 pl3-ns">
110+
<a href="#" class="link mw5 dt hide-child br2 cover bg-center" style="background-image: url(http://mrmrs.io/photos/012.jpg); ">
111+
<span class="white b dtc v-mid w-100 h-100 child bg-black-40 pa5 br2">This is some card content</span>
101112
</a>
102-
<h3 class="f5 book pt4 ttu fw6">Add pointer on hover</h3>
113+
114+
<code class="f6 db pre">
115+
&lt;a href="#" style="background-image: url(http://mrmrs.io/images/0010.jpg);
116+
class="link mw5 dt hide-child br2 cover bg-center" "&gt;
117+
&lt;span class="white dtc v-mid w-100 h-100 child bg-black-40 pa5"&gt;
118+
Card title
119+
&lt;/span&gt;
120+
&lt;/a&gt;
121+
</code>
122+
</div>
123+
<h4 class="f5 mt4 mt5-ns">Add pointer on hover</h4>
124+
<div class="bl-ns bw2-ns b--black-05 pl3-ns">
103125
<div href="#" class="link dim black mw5 dt hide-child ba b--black-20 pa4 br2 pointer">
104126
Add pointer on hover to element.
105127
</div>
106-
<h3 class="f5 book pt4 ttu fw6">Grow on Hover</h3>
107-
<a class="w5 mw5 dt grow link" href="#" style="background: black url(/img/1.jpg); background-size: cover;">
108-
<span class="white-90 f5 f3-ns b ttu dtc v-mid w-100 h-100 pa3 pa5-ns br2">
128+
129+
<code class="f6 db mt3 pre">
130+
&lt;div href="#" class="link dim black mw5 dt hide-child ba b--black-20 pa4 br2 pointer"&gt;
131+
Add pointer on hover to element.
132+
&lt;/div&gt;
133+
</code>
134+
</div>
135+
<h4 class="f5 mt4 mt5-ns">Grow on Hover</h4>
136+
<p class="lh-copy measure">Using the grow class on an element will cause it to scale to 1.05% of it's normal size on hover.</p>
137+
<div class="bl-ns bw2-ns b--black-05 pl3-ns">
138+
<a class="grow dib f3-ns no-underline bg-pink black-90 pa5" href="#">
109139
Portfolio Project #11
110-
</span>
111140
</a>
112-
<div class="mt5 cf">
113-
<div class="dib mr4">
114-
<h4 class="f6 fw6">Previous</h4>
141+
<code class="f6 db mt3 pre">
142+
&lt;a class="grow dib f3-ns no-underline bg-pink black-90 pa5" href="#"&gt;
143+
Portfolio Project #11
144+
&lt;/a&gt;
145+
</code>
146+
</div>
147+
<div class="mt5 pv4 bt bb b--black-10">
148+
<div class="dib mb4 mb0-l mr5 v-top">
149+
<h4 class="f6 fw6 mt0 mb2">Previous</h4>
115150
<a href="/docs/themes/skins/" class="link fw6 blue dim">Skins</a>
116151
</div>
117-
<div class="dib">
118-
<h4 class="f6 fw6">Next</h4>
152+
<div class="dib mb4 mb0-l mr5-m mr6-l v-top">
153+
<h4 class="f6 fw6 mt0 mb2">Next</h4>
119154
<a href="/docs/themes/background-size/" class="link fw6 blue dim">Background Size</a>
120155
</div>
121-
</div>
122-
<div class="mt5 lh-copy">
123-
<h4 class="f6 fw6">Reference</h4>
124-
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/%3Ahover" class="link db fw6 blue dim">MDN - Hover</a>
125-
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/%3Afocus" class="link db fw6 blue dim">MDN - Focus</a>
156+
<div class="dib v-top">
157+
<h4 class="f6 fw6 mt0 mb2">Reference</h4>
158+
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/%3Ahover" class="link dib fw6 blue dim mr4-ns">MDN - Hover</a>
159+
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/%3Afocus" class="link dib fw6 blue dim">MDN - Focus</a>
160+
</div>
126161
</div>
127162
</div>
128-
<section class="bg-white black-70 pt4 pb5 overflow-container">
129-
<header class="ph3 ph5-ns pt4">
130-
<kbd>src/_hovers.css</kbd>
163+
<section class="bg-white black-70 pb5">
164+
<header class="ph3 ph5-ns">
165+
<h4 class="mt0">Source code <kbd class="pl4 fw1">src/_hovers.css</kbd></h4>
131166
</header>
132167
<pre class="ph3 ph5-ns">
133168
<code class="code" style="font-size: .75rem;">

‎src/templates/docs/hovers/index.html

Lines changed: 68 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -39,52 +39,87 @@ <h4 class="f4 mv0 fw6 dib mr4"><%= name %></h4>
3939
</article>
4040
<div class="ph3 ph5-ns pt4 pb5">
4141
<h2 class="f3 bold">Examples</h2>
42-
<h3 class="f5 book pt4 ttu fw6">Dim Text</h3>
43-
<p>
44-
<a href="#" class="f3 b db dim link pv1 black">This link will dim on hover</a>
45-
<a href="#" class="f3 b db dim link pv1 black-80">This link will dim on hover</a>
46-
<a href="#" class="f3 b db dim link pv1 black-60">This link will dim on hover</a>
42+
<h4 class="f5">Dim Text</h4>
43+
<p class="lh-copy measure">
44+
You can dim any element, including text links on hover and focus with the dim
45+
class. It will fade the element to an opacity of 50% in 150ms.
4746
</p>
48-
<h3 class="f5 book pt4 ttu fw6">Dim Card</h3>
49-
<p>
50-
<a href="#" class="link black mw5 db dim pa2 ba b--black-20 br2">
51-
<img src="http://placekitten.com/g/600/300" alt="KITTTTTTTY" class="db mb2 mw-100" />
52-
<span class="db">Dim any element and its children</span>
53-
</a>
54-
</p>
55-
<h3 class="f5 book pt4 ttu fw6">Reveal Children on Hover</h3>
56-
<a href="#" class="link black mw5 dt hide-child ba b--black-20 br2" style="background: transparent url(http://placekitten.com/g/700/300) no-repeat center center;background-size: cover; ">
57-
<span class="white b dtc v-mid w-100 h-100 child bg-black-40 ph4 pv5">Reveal children elements on hover</span>
47+
<div class="bl-ns bw2-ns b--black-05 pl3-ns">
48+
<a href="#" class="link dim black b">link text</a>
49+
<code class="f6 db mt3">&lt;a href="#" class="link dim black b"&gt;link text&lt;/a&gt;</code>
50+
</div>
51+
<h4 class="f5 mt4 mt5-ns">Dim Card</h4>
52+
<p class="lh-copy measure">You can dim any element on hover and focus with the dim element. Not just text. Here is a card component that will dim on hover.</p>
53+
<div class="bl-ns bw2-ns b--black-05 pl3-ns">
54+
<a href="#" class="link black mw5 db dim pa2 ba b--black-10 br2 shadow-1">
55+
<img src="http://mrmrs.io/photos/037.jpg" alt="SF at night" class="db mb2 mw-100" />
56+
<span class="db f6 pv2">Card title</span>
57+
</a>
58+
<code class="f6 db mt3 pre">
59+
&lt;a href="#" class="link black dim db mw5 pa2 br2 ba b--black-10 shadow-1"&gt;
60+
&lt;img src="http://mrmrs.io/photos/037.jpg" alt="SF at night" class="db mb2 mw-100" /&gt;
61+
&lt;span class="db f6 pv2"&gt;Card title&lt;/span&gt;
62+
&lt;/a&gt;
63+
</code>
64+
</div>
65+
<h4 class="f5 mt4 mt5-ns">Reveal Children on Hover</h4>
66+
<div class="bl-ns bw2-ns b--black-05 pl3-ns">
67+
<a href="#" class="link mw5 dt hide-child br2 cover bg-center" style="background-image: url(http://mrmrs.io/photos/012.jpg); ">
68+
<span class="white b dtc v-mid w-100 h-100 child bg-black-40 pa5 br2">This is some card content</span>
5869
</a>
59-
<h3 class="f5 book pt4 ttu fw6">Add pointer on hover</h3>
70+
71+
<code class="f6 db pre">
72+
&lt;a href="#" style="background-image: url(http://mrmrs.io/images/0010.jpg);
73+
class="link mw5 dt hide-child br2 cover bg-center" "&gt;
74+
&lt;span class="white dtc v-mid w-100 h-100 child bg-black-40 pa5"&gt;
75+
Card title
76+
&lt;/span&gt;
77+
&lt;/a&gt;
78+
</code>
79+
</div>
80+
<h4 class="f5 mt4 mt5-ns">Add pointer on hover</h4>
81+
<div class="bl-ns bw2-ns b--black-05 pl3-ns">
6082
<div href="#" class="link dim black mw5 dt hide-child ba b--black-20 pa4 br2 pointer">
6183
Add pointer on hover to element.
6284
</div>
63-
<h3 class="f5 book pt4 ttu fw6">Grow on Hover</h3>
64-
<a class="w5 mw5 dt grow no-underline" href="#" style="background: black url(/img/1.jpg); background-size: cover;">
65-
<span class="white-90 f5 f3-ns b ttu dtc v-mid w-100 h-100 pa3 pa5-ns br2">
85+
86+
<code class="f6 db mt3 pre">
87+
&lt;div href="#" class="link dim black mw5 dt hide-child ba b--black-20 pa4 br2 pointer"&gt;
88+
Add pointer on hover to element.
89+
&lt;/div&gt;
90+
</code>
91+
</div>
92+
<h4 class="f5 mt4 mt5-ns">Grow on Hover</h4>
93+
<p class="lh-copy measure">Using the grow class on an element will cause it to scale to 1.05% of it's normal size on hover.</p>
94+
<div class="bl-ns bw2-ns b--black-05 pl3-ns">
95+
<a class="grow dib f3-ns no-underline bg-pink black-90 pa5" href="#">
6696
Portfolio Project #11
67-
</span>
6897
</a>
69-
<div class="mt5 cf">
70-
<div class="dib mr4">
71-
<h4 class="f6 fw6">Previous</h4>
98+
<code class="f6 db mt3 pre">
99+
&lt;a class="grow dib f3-ns no-underline bg-pink black-90 pa5" href="#"&gt;
100+
Portfolio Project #11
101+
&lt;/a&gt;
102+
</code>
103+
</div>
104+
<div class="mt5 pv4 bt bb b--black-10">
105+
<div class="dib mb4 mb0-l mr5 v-top">
106+
<h4 class="f6 fw6 mt0 mb2">Previous</h4>
72107
<a href="/docs/themes/skins/" class="link fw6 blue dim">Skins</a>
73108
</div>
74-
<div class="dib">
75-
<h4 class="f6 fw6">Next</h4>
109+
<div class="dib mb4 mb0-l mr5-m mr6-l v-top">
110+
<h4 class="f6 fw6 mt0 mb2">Next</h4>
76111
<a href="/docs/themes/background-size/" class="link fw6 blue dim">Background Size</a>
77112
</div>
78-
</div>
79-
<div class="mt5 lh-copy">
80-
<h4 class="f6 fw6">Reference</h4>
81-
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/%3Ahover" class="link db fw6 blue dim">MDN - Hover</a>
82-
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/%3Afocus" class="link db fw6 blue dim">MDN - Focus</a>
113+
<div class="dib v-top">
114+
<h4 class="f6 fw6 mt0 mb2">Reference</h4>
115+
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/%3Ahover" class="link dib fw6 blue dim mr4-ns">MDN - Hover</a>
116+
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/%3Afocus" class="link dib fw6 blue dim">MDN - Focus</a>
117+
</div>
83118
</div>
84119
</div>
85-
<section class="bg-white black-70 pt4 pb5 overflow-container">
86-
<header class="ph3 ph5-ns pt4">
87-
<kbd>src/_hovers.css</kbd>
120+
<section class="bg-white black-70 pb5">
121+
<header class="ph3 ph5-ns">
122+
<h4 class="mt0">Source code <kbd class="pl4 fw1">src/_hovers.css</kbd></h4>
88123
</header>
89124
<pre class="ph3 ph5-ns">
90125
<code class="code" style="font-size: .75rem;">

‎src/templates/docs/links/index.html

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -40,31 +40,31 @@ <h4 class="f4 mv0 fw6 dib mr4"><%= name %></h4>
4040
<div class="ph3 ph5-ns pt4 pb5">
4141
<h2 class="f5 f4-ns fw6 bold">Examples</h2>
4242
<h4 class="f5">Underline links and animate to color</h4>
43-
<p>
43+
<p class="lh-copy measure">
4444
To keep the default underline, but animate the color transition, combine classes from skins and skins-pseudo.
4545
</p>
4646
<div class="bl-ns bw2-ns b--black-05 pl3-ns">
4747
<a href="#" class="link underline blue hover-orange">link text</a>
4848
<code class="f6 db mt3">&lt;a href="#" class="link underline blue hover-orange"&gt;link text&lt;/a&gt; </code>
4949
</div>
5050
<h4 class="f5 mt4 mt5-ns">Underline on hover</h4>
51-
<p>
51+
<p class="lh-copy measure">
5252
To add an underline on hover and focus, use the class 'underline-hover'.
5353
</p>
5454
<div class="bl-ns bw2-ns b--black-05 pl3-ns">
5555
<a href="#" class="link underline-hover red">link text</a>
5656
<code class="f6 db mt3">&lt;a href="#" class="link underline-hover red"&gt;link text&lt;/a&gt; </code>
5757
</div>
5858
<h4 class="f5 mt4 mt5-ns">Dim on hover</h4>
59-
<p>
59+
<p class="lh-copy measure">
6060
To dim a link on hover, add the dim class.
6161
</p>
6262
<div class="bl-ns bw2-ns b--black-05 pl3-ns">
6363
<a href="#" class="dim">link text</a>
6464
<code class="f6 db mt3">&lt;a href="#" class="dim"&gt;link text&lt;/a&gt; </code>
6565
</div>
6666
<h4 class="f5 mt4 mt5-ns">Add background color on hover</h4>
67-
<p>
67+
<p class="lh-copy measure">
6868
You can add any background color from the skins-pseudo module.
6969
</p>
7070
<div class="bl-ns bw2-ns b--black-05 pl3-ns">
@@ -73,7 +73,7 @@ <h4 class="f5 mt4 mt5-ns">Add background color on hover</h4>
7373

7474
</div>
7575
<h4 class="f5 mt4 mt5-ns">Animate background color on hover</h4>
76-
<p>
76+
<p class="lh-copy measure">
7777
You can add any background color from the skins-pseudo module.
7878
</p>
7979
<div class="bl-ns bw2-ns b--black-05 pl3-ns">
@@ -82,7 +82,7 @@ <h4 class="f5 mt4 mt5-ns">Animate background color on hover</h4>
8282
</div>
8383

8484
<h4 class="f5 mt4 mt5-ns">Colors</h4>
85-
<p>Below are examples of combining each color in the skins module with the dim class.</p>
85+
<p class="lh-copy measure">Below are examples of combining each color in the skins module with the dim class.</p>
8686
<ul class="list pl0">
8787
<li class="f5 pv2 bb b--black-10">
8888
<a href="#" class="link dim black">black link</a>

0 commit comments

Comments
 (0)