Skip to content

Commit 7160e27

Browse files
author
mrmrs
committed
Update hovers and borders.
1 parent 3bc671d commit 7160e27

File tree

4 files changed

+84
-68
lines changed

4 files changed

+84
-68
lines changed

‎docs/themes/borders/index.html

Lines changed: 41 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -74,63 +74,63 @@ <h4 class="f4 mv0 fw6 dib mr4">tachyons-borders</h4>
7474
<div class="ph3 ph5-ns pt4 pb5">
7575
<h2 class="f3 bold">Examples</h2>
7676
<div>
77-
<h3 class="f5 book pt4 caps">Border Base</h3>
78-
<code class="ba pas f5 nowrap bg-near-white db mbs">
77+
<h3 class="f5 fw4 pt4 caps">Border Base</h3>
78+
<code class="ba pa2 f5 nowrap bg-near-white db mb2">
7979
1px solid border on all sides
8080
</code>
81-
<code class="bt pas f5 nowrap bg-near-white db mbs">
81+
<code class="bt pa2 f5 nowrap bg-near-white db mb2">
8282
1px solid border on top
8383
</code>
84-
<code class="br pas f5 nowrap bg-near-white db mbs">
84+
<code class="br pa2 f5 nowrap bg-near-white db mb2">
8585
1px solid border on the right
8686
</code>
87-
<code class="bb pas f5 nowrap bg-near-white db mbs">
87+
<code class="bb pa2 f5 nowrap bg-near-white db mb2">
8888
1px solid border on the bottom
8989
</code>
90-
<code class="bl pas f5 nowrap bg-near-white db mbs">
90+
<code class="bl pa2 f5 nowrap bg-near-white db mb2">
9191
1px solid border on the bottom
9292
</code>
9393
</div>
9494
<div>
95-
<h3 class="f5 book pt4 caps">Border Styles</h3>
96-
<code class="ba bs-dotted pas f5 nowrap bg-near-white db mbs">
95+
<h3 class="f5 fw4 pt4 caps">Border Styles</h3>
96+
<code class="ba b--dotted pa2 f5 nowrap bg-near-white db mb2">
9797
Dotted
9898
</code>
99-
<code class="ba pas f5 nowrap bg-near-white db mbs">
99+
<code class="ba pa2 f5 nowrap bg-near-white db mb2">
100100
Solid
101101
</code>
102102
</div>
103103
<div>
104-
<h3 class="f5 book pt4 caps">Border Widths - Solid</h3>
105-
<code class="ba bw1 pas f5 nowrap bg-near-white db mbs">
104+
<h3 class="f5 fw4 pt4 caps">Border Widths - Solid</h3>
105+
<code class="ba bw1 pa2 f5 nowrap bg-near-white db mb2">
106106
border-width: .125rem
107107
</code>
108-
<code class="ba bw2 pas f5 nowrap bg-near-white db mbs">
108+
<code class="ba bw2 pa2 f5 nowrap bg-near-white db mb2">
109109
border-width: .25rem
110110
</code>
111-
<code class="ba bw3 pas f5 nowrap bg-near-white db mbs">
111+
<code class="ba bw3 pa2 f5 nowrap bg-near-white db mb2">
112112
border-width: .5rem
113113
</code>
114-
<code class="ba bw4 pas f5 nowrap bg-near-white db mbs">
114+
<code class="ba bw4 pa2 f5 nowrap bg-near-white db mb2">
115115
border-width: 1rem
116116
</code>
117-
<code class="ba bw5 pas f5 nowrap bg-near-white db mbs">
117+
<code class="ba bw5 pa2 f5 nowrap bg-near-white db mb2">
118118
border-width: 2rem
119119
</code>
120-
<h3 class="f5 book pt4 caps">Border Widths - Dotted</h3>
121-
<code class="ba bs-dotted bw1 pas f5 nowrap bg-near-white db mbs">
120+
<h3 class="f5 fw4 pt4 caps">Border Widths - Dotted</h3>
121+
<code class="ba b--dotted bw1 pa2 f5 nowrap bg-near-white db mb2">
122122
border-width: .125rem
123123
</code>
124-
<code class="ba bs-dotted bw2 pas f5 nowrap bg-near-white db mbm">
124+
<code class="ba b0-dotted bw2 pa2 f5 nowrap bg-near-white db mb3">
125125
border-width: .25rem
126126
</code>
127-
<code class="ba bs-dotted bw3 phs pvm f5 nowrap bg-near-white db mbm">
127+
<code class="ba b--dotted bw3 ph2 pv3 f5 nowrap bg-near-white db mb3">
128128
border-width: .5rem
129129
</code>
130-
<code class="ba bs-dotted bw4 phs pv4 f5 nowrap bg-near-white db mbl">
130+
<code class="ba b--dotted bw4 ph2 pv4 f5 nowrap bg-near-white db mb4">
131131
border-width: 1rem
132132
</code>
133-
<code class="ba bs-dotted bw5 phs pv4 f5 nowrap bg-near-white db mbl">
133+
<code class="ba b--dotted bw5 ph2 pv4 f5 nowrap bg-near-white db mb4">
134134
border-width: 2rem
135135
</code>
136136
</div>
@@ -252,6 +252,9 @@ <h1 class="f4 ttu tracked fw6">Reference</h1>
252252
</header>
253253
<pre class="ph3 ph5-ns">
254254
<code class="small">
255+
@custom-media --breakpoint-not-small screen and (min-width: 48em);
256+
@custom-media --breakpoint-medium screen and (min-width: 48em) and (max-width: 64em);
257+
@custom-media --breakpoint-large screen and (min-width: 64em);
255258

256259
/*
257260

@@ -263,6 +266,7 @@ <h1 class="f4 ttu tracked fw6">Reference</h1>
263266
Modifiers:
264267
none = none
265268
dotted = dotted
269+
dashed = dashed
266270
solid = solid
267271

268272
Media Query Extensions:
@@ -272,26 +276,30 @@ <h1 class="f4 ttu tracked fw6">Reference</h1>
272276

273277
*/
274278

275-
.bs-none { border-style: none; }
276-
.bs-dotted { border-style: dotted; }
277-
.bs-solid { border-style: solid; }
279+
.b--none { border-style: none; }
280+
.b--dotted { border-style: dotted; }
281+
.b--dashed { border-style: dashed; }
282+
.b--solid { border-style: solid; }
278283

279284
@media (--breakpoint-not-small) {
280-
.bs-none-ns { border-style: none; }
281-
.bs-dotted-ns { border-style: dotted; }
282-
.bs-solid-ns { border-style: solid; }
285+
.b--none-ns { border-style: none; }
286+
.b--dotted-ns { border-style: dotted; }
287+
.b--dashed-ns { border-style: dashed; }
288+
.b--solid-ns { border-style: solid; }
283289
}
284290

285291
@media (--breakpoint-medium) {
286-
.bs-none-m { border-style: none; }
287-
.bs-dotted-m { border-style: dotted; }
288-
.bs-solid-m { border-style: solid; }
292+
.b--none-m { border-style: none; }
293+
.b--dotted-m { border-style: dotted; }
294+
.b--dashed-m { border-style: dashed; }
295+
.b--solid-m { border-style: solid; }
289296
}
290297

291298
@media (--breakpoint-large) {
292-
.bs-none-l { border-style: none; }
293-
.bs-dotted-l { border-style: dotted; }
294-
.bs-solid-l { border-style: solid; }
299+
.b--none-l { border-style: none; }
300+
.b--dotted-l { border-style: dotted; }
301+
.b--dashed-l { border-style: dashed; }
302+
.b--solid-l { border-style: solid; }
295303
}
296304
</code>
297305
</pre>

‎docs/themes/hovers/index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -90,7 +90,7 @@ <h3 class="f5 book pt4 caps">Dim Card</h3>
9090
</p>
9191
<h3 class="f5 book pt4 caps">Reveal Children on Hover</h3>
9292
<a href="#" class="link black mw5 dt hide-child ba b--gray br2" style="background-size: cover; background: transparent url(http://placekitten.com/g/700/300) no-repeat;">
93-
<span class="white b dtc v-mid child bg-black-40 ph4 pvxl">Reveal children elements on hover</span>
93+
<span class="white b dtc v-mid child bg-black-40 ph4 pv5">Reveal children elements on hover</span>
9494
</a>
9595
<div class="mt5 cf">
9696
<div class="dib mr4">

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

Lines changed: 41 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -47,63 +47,63 @@ <h4 class="f4 mv0 fw6 dib mr4"><%= name %></h4>
4747
<div class="ph3 ph5-ns pt4 pb5">
4848
<h2 class="f3 bold">Examples</h2>
4949
<div>
50-
<h3 class="f5 book pt4 caps">Border Base</h3>
51-
<code class="ba pas f5 nowrap bg-near-white db mbs">
50+
<h3 class="f5 fw4 pt4 caps">Border Base</h3>
51+
<code class="ba pa2 f5 nowrap bg-near-white db mb2">
5252
1px solid border on all sides
5353
</code>
54-
<code class="bt pas f5 nowrap bg-near-white db mbs">
54+
<code class="bt pa2 f5 nowrap bg-near-white db mb2">
5555
1px solid border on top
5656
</code>
57-
<code class="br pas f5 nowrap bg-near-white db mbs">
57+
<code class="br pa2 f5 nowrap bg-near-white db mb2">
5858
1px solid border on the right
5959
</code>
60-
<code class="bb pas f5 nowrap bg-near-white db mbs">
60+
<code class="bb pa2 f5 nowrap bg-near-white db mb2">
6161
1px solid border on the bottom
6262
</code>
63-
<code class="bl pas f5 nowrap bg-near-white db mbs">
63+
<code class="bl pa2 f5 nowrap bg-near-white db mb2">
6464
1px solid border on the bottom
6565
</code>
6666
</div>
6767
<div>
68-
<h3 class="f5 book pt4 caps">Border Styles</h3>
69-
<code class="ba bs-dotted pas f5 nowrap bg-near-white db mbs">
68+
<h3 class="f5 fw4 pt4 caps">Border Styles</h3>
69+
<code class="ba b--dotted pa2 f5 nowrap bg-near-white db mb2">
7070
Dotted
7171
</code>
72-
<code class="ba pas f5 nowrap bg-near-white db mbs">
72+
<code class="ba pa2 f5 nowrap bg-near-white db mb2">
7373
Solid
7474
</code>
7575
</div>
7676
<div>
77-
<h3 class="f5 book pt4 caps">Border Widths - Solid</h3>
78-
<code class="ba bw1 pas f5 nowrap bg-near-white db mbs">
77+
<h3 class="f5 fw4 pt4 caps">Border Widths - Solid</h3>
78+
<code class="ba bw1 pa2 f5 nowrap bg-near-white db mb2">
7979
border-width: .125rem
8080
</code>
81-
<code class="ba bw2 pas f5 nowrap bg-near-white db mbs">
81+
<code class="ba bw2 pa2 f5 nowrap bg-near-white db mb2">
8282
border-width: .25rem
8383
</code>
84-
<code class="ba bw3 pas f5 nowrap bg-near-white db mbs">
84+
<code class="ba bw3 pa2 f5 nowrap bg-near-white db mb2">
8585
border-width: .5rem
8686
</code>
87-
<code class="ba bw4 pas f5 nowrap bg-near-white db mbs">
87+
<code class="ba bw4 pa2 f5 nowrap bg-near-white db mb2">
8888
border-width: 1rem
8989
</code>
90-
<code class="ba bw5 pas f5 nowrap bg-near-white db mbs">
90+
<code class="ba bw5 pa2 f5 nowrap bg-near-white db mb2">
9191
border-width: 2rem
9292
</code>
93-
<h3 class="f5 book pt4 caps">Border Widths - Dotted</h3>
94-
<code class="ba bs-dotted bw1 pas f5 nowrap bg-near-white db mbs">
93+
<h3 class="f5 fw4 pt4 caps">Border Widths - Dotted</h3>
94+
<code class="ba b--dotted bw1 pa2 f5 nowrap bg-near-white db mb2">
9595
border-width: .125rem
9696
</code>
97-
<code class="ba bs-dotted bw2 pas f5 nowrap bg-near-white db mbm">
97+
<code class="ba b0-dotted bw2 pa2 f5 nowrap bg-near-white db mb3">
9898
border-width: .25rem
9999
</code>
100-
<code class="ba bs-dotted bw3 phs pvm f5 nowrap bg-near-white db mbm">
100+
<code class="ba b--dotted bw3 ph2 pv3 f5 nowrap bg-near-white db mb3">
101101
border-width: .5rem
102102
</code>
103-
<code class="ba bs-dotted bw4 phs pv4 f5 nowrap bg-near-white db mbl">
103+
<code class="ba b--dotted bw4 ph2 pv4 f5 nowrap bg-near-white db mb4">
104104
border-width: 1rem
105105
</code>
106-
<code class="ba bs-dotted bw5 phs pv4 f5 nowrap bg-near-white db mbl">
106+
<code class="ba b--dotted bw5 ph2 pv4 f5 nowrap bg-near-white db mb4">
107107
border-width: 2rem
108108
</code>
109109
</div>
@@ -225,6 +225,9 @@ <h1 class="f4 ttu tracked fw6">Reference</h1>
225225
</header>
226226
<pre class="ph3 ph5-ns">
227227
<code class="small">
228+
@custom-media --breakpoint-not-small screen and (min-width: 48em);
229+
@custom-media --breakpoint-medium screen and (min-width: 48em) and (max-width: 64em);
230+
@custom-media --breakpoint-large screen and (min-width: 64em);
228231

229232
/*
230233

@@ -236,6 +239,7 @@ <h1 class="f4 ttu tracked fw6">Reference</h1>
236239
Modifiers:
237240
none = none
238241
dotted = dotted
242+
dashed = dashed
239243
solid = solid
240244

241245
Media Query Extensions:
@@ -245,26 +249,30 @@ <h1 class="f4 ttu tracked fw6">Reference</h1>
245249

246250
*/
247251

248-
.bs-none { border-style: none; }
249-
.bs-dotted { border-style: dotted; }
250-
.bs-solid { border-style: solid; }
252+
.b--none { border-style: none; }
253+
.b--dotted { border-style: dotted; }
254+
.b--dashed { border-style: dashed; }
255+
.b--solid { border-style: solid; }
251256

252257
@media (--breakpoint-not-small) {
253-
.bs-none-ns { border-style: none; }
254-
.bs-dotted-ns { border-style: dotted; }
255-
.bs-solid-ns { border-style: solid; }
258+
.b--none-ns { border-style: none; }
259+
.b--dotted-ns { border-style: dotted; }
260+
.b--dashed-ns { border-style: dashed; }
261+
.b--solid-ns { border-style: solid; }
256262
}
257263

258264
@media (--breakpoint-medium) {
259-
.bs-none-m { border-style: none; }
260-
.bs-dotted-m { border-style: dotted; }
261-
.bs-solid-m { border-style: solid; }
265+
.b--none-m { border-style: none; }
266+
.b--dotted-m { border-style: dotted; }
267+
.b--dashed-m { border-style: dashed; }
268+
.b--solid-m { border-style: solid; }
262269
}
263270

264271
@media (--breakpoint-large) {
265-
.bs-none-l { border-style: none; }
266-
.bs-dotted-l { border-style: dotted; }
267-
.bs-solid-l { border-style: solid; }
272+
.b--none-l { border-style: none; }
273+
.b--dotted-l { border-style: dotted; }
274+
.b--dashed-l { border-style: dashed; }
275+
.b--solid-l { border-style: solid; }
268276
}
269277
</code>
270278
</pre>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,7 @@ <h3 class="f5 book pt4 caps">Dim Card</h3>
6363
</p>
6464
<h3 class="f5 book pt4 caps">Reveal Children on Hover</h3>
6565
<a href="#" class="link black mw5 dt hide-child ba b--gray br2" style="background-size: cover; background: transparent url(http://placekitten.com/g/700/300) no-repeat;">
66-
<span class="white b dtc v-mid child bg-black-40 ph4 pvxl">Reveal children elements on hover</span>
66+
<span class="white b dtc v-mid child bg-black-40 ph4 pv5">Reveal children elements on hover</span>
6767
</a>
6868
<div class="mt5 cf">
6969
<div class="dib mr4">

0 commit comments

Comments
 (0)