Skip to content

Commit c720492

Browse files
author
mrmrs
committed
Update css partials to 4.2.0
1 parent 2033354 commit c720492

10 files changed

+196
-30
lines changed

‎css/tachyons.css

+101-13
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
/* TACHYONS v4.0.8 | github.com/tachyons-css/tachyons */
1+
/* TACHYONS v4.1.3 | github.com/tachyons-css/tachyons */
22
/*
33
* ████████╗ █████╗ ██████╗██╗ ██╗██╗ ██╗ ██████╗ ███╗ ██╗███████╗
44
* ╚══██╔══╝██╔══██╗██╔════╝██║ ██║╚██╗ ██╔╝██╔═══██╗████╗ ██║██╔════╝
@@ -228,6 +228,13 @@ html, body, div, article, section, main, footer, header, form, fieldset, pre,
228228
code, p, ul, ol, li, dl, dt, dd, textarea, input[type="email"],
229229
input[type="number"], input[type="password"], input[type="tel"],
230230
input[type="text"], input[type="url"], .border-box { box-sizing: border-box; }
231+
/*
232+
233+
IMAGES
234+
235+
*/
236+
/* Responsive images! */
237+
img { max-width: 100%; }
231238
/*
232239
233240
BACKGROUND SIZE
@@ -244,6 +251,14 @@ input[type="text"], input[type="url"], .border-box { box-sizing: border-box; }
244251
*/
245252
.cover { background-size: cover; }
246253
.contain { background-size: contain; }
254+
/*
255+
256+
OUTLINES
257+
258+
*/
259+
.outline { outline: 1px solid; }
260+
.outline-transparent { outline: 1px solid transparent; }
261+
.outline-0 { outline: 0; }
247262
/*
248263
249264
BORDER BASE
@@ -354,6 +369,7 @@ input[type="text"], input[type="url"], .border-box { box-sizing: border-box; }
354369
.br3 { border-radius: .5rem; }
355370
.br4 { border-radius: 1rem; }
356371
.br-100 { border-radius: 100%; }
372+
.br-pill { border-radius: 9999px; }
357373
.br--bottom { border-top-left-radius: 0; border-top-right-radius: 0; }
358374
.br--top { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
359375
.br--right { border-top-left-radius: 0; border-bottom-left-radius: 0; }
@@ -655,11 +671,16 @@ code, .code { font-family: Consolas, monaco, monospace; }
655671
.h3 { height: 4rem; }
656672
.h4 { height: 8rem; }
657673
.h5 { height: 16rem; }
658-
/* Height Percentages */
674+
/* Height Percentages - Based off of height of parent */
659675
.h-25 { height: 25%; }
660676
.h-50 { height: 50%; }
661677
.h-75 { height: 75%; }
662678
.h-100 { height: 100%; }
679+
/* Screen Height Percentage */
680+
.vh-25 { height: 25vh; }
681+
.vh-50 { height: 50vh; }
682+
.vh-75 { height: 75vh; }
683+
.vh-100 { height: 100vh; }
663684
/* String Properties */
664685
.h-auto { height: auto; }
665686
.h-inherit { height: inherit; }
@@ -677,8 +698,8 @@ code, .code { font-family: Consolas, monaco, monospace; }
677698
678699
*/
679700
.lh-solid { line-height: 1; }
680-
.lh-title { line-height: 1.3; }
681-
.lh-copy { line-height: 1.6; }
701+
.lh-title { line-height: 1.25; }
702+
.lh-copy { line-height: 1.5; }
682703
/*
683704
684705
LINKS
@@ -1266,14 +1287,44 @@ code, .code { font-family: Consolas, monaco, monospace; }
12661287
.underline-hover:hover, .underline-hover:focus { text-decoration: underline; }
12671288
/* Can combine this with overflow-hidden to make background images grow on hover
12681289
* even if you are using background-size: cover */
1269-
.grow { -webkit-transition: -webkit-transform .2s; transition: -webkit-transform .2s; transition: transform .2s; transition: transform .2s, -webkit-transform .2s; }
1290+
.grow { -moz-osx-font-smoothing: grayscale; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform: translateZ( 0 ); transform: translateZ( 0 ); -webkit-transition: 0.25s -webkit-transform ease-out; transition: 0.25s -webkit-transform ease-out; transition: 0.25s transform ease-out; transition: 0.25s transform ease-out, 0.25s -webkit-transform ease-out; }
12701291
.grow:hover, .grow:focus { -webkit-transform: scale( 1.05 ); transform: scale( 1.05 ); }
1271-
.grow-large { -webkit-transition: -webkit-transform .2s; transition: -webkit-transform .2s; transition: transform .2s; transition: transform .2s, -webkit-transform .2s; }
1292+
.grow:active { -webkit-transform: scale( .90 ); transform: scale( .90 ); }
1293+
.grow-large { -moz-osx-font-smoothing: grayscale; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform: translateZ( 0 ); transform: translateZ( 0 ); -webkit-transition: 0.25s -webkit-transform ease-in-out; transition: 0.25s -webkit-transform ease-in-out; transition: 0.25s transform ease-in-out; transition: 0.25s transform ease-in-out, 0.25s -webkit-transform ease-in-out; }
12721294
.grow-large:hover, .grow-large:focus { -webkit-transform: scale( 1.2 ); transform: scale( 1.2 ); }
1295+
.grow-large:active { -webkit-transform: scale( .95 ); transform: scale( .95 ); }
12731296
/* Add pointer on hover */
12741297
.pointer:hover { cursor: pointer; }
12751298
/* Add shadow on hover */
12761299
.shadow-hover:hover, .shadow-hover:focus { box-shadow: 0px 0px 8px 2px rgba( 0, 0, 0, 0.2 ); }
1300+
/*
1301+
1302+
Tachyons
1303+
z-index
1304+
1305+
DOCUMENTATION
1306+
1307+
MDN: https://developer.mozilla.org/en/docs/Web/CSS/z-index
1308+
Spec: http://www.w3.org/TR/CSS2/zindex.html
1309+
1310+
Tips on extending:
1311+
There might be a time worth using negative z-index values.
1312+
Or if you are using tachyons with another project, you might need to
1313+
adjust these values to suit your needs.
1314+
1315+
*/
1316+
.z-0 { z-index: 0; }
1317+
.z-1 { z-index: 1; }
1318+
.z-2 { z-index: 2; }
1319+
.z-3 { z-index: 3; }
1320+
.z-4 { z-index: 4; }
1321+
.z-5 { z-index: 5; }
1322+
.z-999 { z-index: 999; }
1323+
.z-9999 { z-index: 9999; }
1324+
.z-max { z-index: 2147483647; }
1325+
.z-inherit { z-index: inherit; }
1326+
.z-initial { z-index: initial; }
1327+
.z-unset { z-index: unset; }
12771328
/*
12781329
12791330
STYLES
@@ -1334,11 +1385,27 @@ code, .code { font-family: Consolas, monaco, monospace; }
13341385
13351386
*/
13361387
.debug * { outline: 1px solid gold; }
1337-
/* Uncomment out the line below and rebuild the css if you want to use pesticide.io to debug layout .*/
1388+
/*
1389+
1390+
DEBUG GRID
1391+
1392+
Can be useful for debugging layout issues
1393+
or helping to make sure things line up perfectly.
1394+
Just tack one of these classes onto a parent element.
1395+
1396+
*/
1397+
.debug-grid { background: transparent url( http://tachyons.io/img/8-grid-blue-alpha.png ) repeat top left; }
1398+
.debug-grid-16 { background: transparent url( http://tachyons.io/img/16-grid-blue-alpha.png ) repeat top left; }
1399+
.debug-grid-8-solid { background: white url( http://tachyons.io/img/8-grid.jpg ) repeat top left; }
1400+
.debug-grid-16-solid { background: white url( http://tachyons.io/img/16-grid.png ) repeat top left; }
1401+
/* Uncomment out the line below to help debug layout issues */
13381402
/* @import './_debug'; */
13391403
@media screen and (min-width: 30em) {
13401404
.cover-ns { background-size: cover; }
13411405
.contain-ns { background-size: contain; }
1406+
.outline-ns { outline: 1px solid; }
1407+
.outline-transparent-ns { outline: 1px solid transparent; }
1408+
.outline-0-ns { outline: 0; }
13421409
.ba-ns { border-style: solid; border-width: 1px; }
13431410
.bt-ns { border-top-style: solid; border-top-width: 1px; }
13441411
.br-ns { border-right-style: solid; border-right-width: 1px; }
@@ -1351,6 +1418,7 @@ code, .code { font-family: Consolas, monaco, monospace; }
13511418
.br3-ns { border-radius: .5rem; }
13521419
.br4-ns { border-radius: 1rem; }
13531420
.br-100-ns { border-radius: 100%; }
1421+
.br-pill-ns { border-radius: 9999px; }
13541422
.br--bottom-ns { border-top-left-radius: 0; border-top-right-radius: 0; }
13551423
.br--top-ns { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
13561424
.br--right-ns { border-top-left-radius: 0; border-bottom-left-radius: 0; }
@@ -1473,15 +1541,19 @@ code, .code { font-family: Consolas, monaco, monospace; }
14731541
.h-25-ns { height: 25%; }
14741542
.h-50-ns { height: 50%; }
14751543
.h-75-ns { height: 75%; }
1544+
.vh-25-ns { height: 25vh; }
1545+
.vh-50-ns { height: 50vh; }
1546+
.vh-75-ns { height: 75vh; }
1547+
.vh-100-ns { height: 100vh; }
14761548
.h-100-ns { height: 100%; }
14771549
.h-auto-ns { height: auto; }
14781550
.h-inherit-ns { height: inherit; }
14791551
.tracked-ns { letter-spacing: .1em; }
14801552
.tracked-tight-ns { letter-spacing: -.05em; }
14811553
.tracked-mega-ns { letter-spacing: .25em; }
14821554
.lh-solid-ns { line-height: 1; }
1483-
.lh-title-ns { line-height: 1.3; }
1484-
.lh-copy-ns { line-height: 1.6; }
1555+
.lh-title-ns { line-height: 1.25; }
1556+
.lh-copy-ns { line-height: 1.5; }
14851557
.mw-100-ns { max-width: 100%; }
14861558
.mw1-ns { max-width: 1rem; }
14871559
.mw2-ns { max-width: 2rem; }
@@ -1674,6 +1746,12 @@ code, .code { font-family: Consolas, monaco, monospace; }
16741746
@media screen and (min-width: 30em) and (max-width: 60em) {
16751747
.cover-m { background-size: cover; }
16761748
.contain-m { background-size: contain; }
1749+
.outline-m { outline: 1px solid; }
1750+
.outline-transparent-m { outline: 1px solid transparent; }
1751+
.outline-0-m { outline: 0; }
1752+
.outline-l { outline: 1px solid; }
1753+
.outline-transparent-l { outline: 1px solid transparent; }
1754+
.outline-0-l { outline: 0; }
16771755
.ba-m { border-style: solid; border-width: 1px; }
16781756
.bt-m { border-top-style: solid; border-top-width: 1px; }
16791757
.br-m { border-right-style: solid; border-right-width: 1px; }
@@ -1686,6 +1764,7 @@ code, .code { font-family: Consolas, monaco, monospace; }
16861764
.br3-m { border-radius: .5rem; }
16871765
.br4-m { border-radius: 1rem; }
16881766
.br-100-m { border-radius: 100%; }
1767+
.br-pill-m { border-radius: 9999px; }
16891768
.br--bottom-m { border-top-left-radius: 0; border-top-right-radius: 0; }
16901769
.br--top-m { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
16911770
.br--right-m { border-top-left-radius: 0; border-bottom-left-radius: 0; }
@@ -1809,14 +1888,18 @@ code, .code { font-family: Consolas, monaco, monospace; }
18091888
.h-50-m { height: 50%; }
18101889
.h-75-m { height: 75%; }
18111890
.h-100-m { height: 100%; }
1891+
.vh-25-m { height: 25vh; }
1892+
.vh-50-m { height: 50vh; }
1893+
.vh-75-m { height: 75vh; }
1894+
.vh-100-m { height: 100vh; }
18121895
.h-auto-m { height: auto; }
18131896
.h-inherit-m { height: inherit; }
18141897
.tracked-m { letter-spacing: .1em; }
18151898
.tracked-tight-m { letter-spacing: -.05em; }
18161899
.tracked-mega-m { letter-spacing: .25em; }
18171900
.lh-solid-m { line-height: 1; }
1818-
.lh-title-m { line-height: 1.3; }
1819-
.lh-copy-m { line-height: 1.6; }
1901+
.lh-title-m { line-height: 1.25; }
1902+
.lh-copy-m { line-height: 1.5; }
18201903
.mw-100-m { max-width: 100%; }
18211904
.mw1-m { max-width: 1rem; }
18221905
.mw2-m { max-width: 2rem; }
@@ -2021,6 +2104,7 @@ code, .code { font-family: Consolas, monaco, monospace; }
20212104
.br3-l { border-radius: .5rem; }
20222105
.br4-l { border-radius: 1rem; }
20232106
.br-100-l { border-radius: 100%; }
2107+
.br-pill-l { border-radius: 9999px; }
20242108
.br--bottom-l { border-radius-top-left: 0; border-radius-top-right: 0; }
20252109
.br--top-l { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
20262110
.br--right-l { border-top-left-radius: 0; border-bottom-left-radius: 0; }
@@ -2144,14 +2228,18 @@ code, .code { font-family: Consolas, monaco, monospace; }
21442228
.h-50-l { height: 50%; }
21452229
.h-75-l { height: 75%; }
21462230
.h-100-l { height: 100%; }
2231+
.vh-25-l { height: 25vh; }
2232+
.vh-50-l { height: 50vh; }
2233+
.vh-75-l { height: 75vh; }
2234+
.vh-100-l { height: 100vh; }
21472235
.h-auto-l { height: auto; }
21482236
.h-inherit-l { height: inherit; }
21492237
.tracked-l { letter-spacing: .1em; }
21502238
.tracked-tight-l { letter-spacing: -.05em; }
21512239
.tracked-mega-l { letter-spacing: .25em; }
21522240
.lh-solid-l { line-height: 1; }
2153-
.lh-title-l { line-height: 1.3; }
2154-
.lh-copy-l { line-height: 1.6; }
2241+
.lh-title-l { line-height: 1.25; }
2242+
.lh-copy-l { line-height: 1.5; }
21552243
.mw-100-l { max-width: 100%; }
21562244
.mw1-l { max-width: 1rem; }
21572245
.mw2-l { max-width: 2rem; }

‎css/tachyons.min.css

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/css/_border-radius.css

+4
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@
2727
.br3 { border-radius: .5rem; }
2828
.br4 { border-radius: 1rem; }
2929
.br-100 { border-radius: 100%; }
30+
.br-pill { border-radius: 9999px; }
3031
.br--bottom {
3132
border-top-left-radius: 0;
3233
border-top-right-radius: 0;
@@ -51,6 +52,7 @@
5152
.br3-ns { border-radius: .5rem; }
5253
.br4-ns { border-radius: 1rem; }
5354
.br-100-ns { border-radius: 100%; }
55+
.br-pill-ns { border-radius: 9999px; }
5456
.br--bottom-ns {
5557
border-top-left-radius: 0;
5658
border-top-right-radius: 0;
@@ -76,6 +78,7 @@
7678
.br3-m { border-radius: .5rem; }
7779
.br4-m { border-radius: 1rem; }
7880
.br-100-m { border-radius: 100%; }
81+
.br-pill-m { border-radius: 9999px; }
7982
.br--bottom-m {
8083
border-top-left-radius: 0;
8184
border-top-right-radius: 0;
@@ -101,6 +104,7 @@
101104
.br3-l { border-radius: .5rem; }
102105
.br4-l { border-radius: 1rem; }
103106
.br-100-l { border-radius: 100%; }
107+
.br-pill-l { border-radius: 9999px; }
104108
.br--bottom-l {
105109
border-radius-top-left: 0;
106110
border-radius-top-right: 0;

‎src/css/_debug-children.css

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
/*
2+
3+
DEBUG CHILDREN
4+
5+
Just add the debug class to any element to see outlines on its
6+
children.
7+
8+
*/
9+
10+
.debug * { outline: 1px solid gold; }
11+

‎src/css/_debug-grid.css

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
/*
2+
3+
DEBUG GRID
4+
5+
Can be useful for debugging layout issues
6+
or helping to make sure things line up perfectly.
7+
Just tack one of these classes onto a parent element.
8+
9+
*/
10+
11+
.debug-grid {
12+
background:transparent url(http://tachyons.io/img/8-grid-blue-alpha.png) repeat top left;
13+
}
14+
15+
.debug-grid-16 {
16+
background:transparent url(http://tachyons.io/img/16-grid-blue-alpha.png) repeat top left;
17+
}
18+
19+
.debug-grid-8-solid {
20+
background:white url(http://tachyons.io/img/8-grid.jpg) repeat top left;
21+
}
22+
23+
.debug-grid-16-solid {
24+
background:white url(http://tachyons.io/img/16-grid.png) repeat top left;
25+
}

‎src/css/_heights.css

+20-1
Original file line numberDiff line numberDiff line change
@@ -12,13 +12,20 @@
1212
.h4 { height: 8rem; }
1313
.h5 { height: 16rem; }
1414

15-
/* Height Percentages */
15+
/* Height Percentages - Based off of height of parent */
1616

1717
.h-25 { height: 25%; }
1818
.h-50 { height: 50%; }
1919
.h-75 { height: 75%; }
2020
.h-100 { height: 100%; }
2121

22+
/* Screen Height Percentage */
23+
24+
.vh-25 { height: 25vh; }
25+
.vh-50 { height: 50vh; }
26+
.vh-75 { height: 75vh; }
27+
.vh-100 { height: 100vh; }
28+
2229
/* String Properties */
2330

2431
.h-auto { height: auto; }
@@ -33,6 +40,10 @@
3340
.h-25-ns { height: 25%; }
3441
.h-50-ns { height: 50%; }
3542
.h-75-ns { height: 75%; }
43+
.vh-25-ns { height: 25vh; }
44+
.vh-50-ns { height: 50vh; }
45+
.vh-75-ns { height: 75vh; }
46+
.vh-100-ns { height: 100vh; }
3647
.h-100-ns { height: 100%; }
3748
.h-auto-ns { height: auto; }
3849
.h-inherit-ns { height: inherit; }
@@ -48,6 +59,10 @@
4859
.h-50-m { height: 50%; }
4960
.h-75-m { height: 75%; }
5061
.h-100-m { height: 100%; }
62+
.vh-25-m { height: 25vh; }
63+
.vh-50-m { height: 50vh; }
64+
.vh-75-m { height: 75vh; }
65+
.vh-100-m { height: 100vh; }
5166
.h-auto-m { height: auto; }
5267
.h-inherit-m { height: inherit; }
5368
}
@@ -62,6 +77,10 @@
6277
.h-50-l { height: 50%; }
6378
.h-75-l { height: 75%; }
6479
.h-100-l { height: 100%; }
80+
.vh-25-l { height: 25vh; }
81+
.vh-50-l { height: 50vh; }
82+
.vh-75-l { height: 75vh; }
83+
.vh-100-l { height: 100vh; }
6584
.h-auto-l { height: auto; }
6685
.h-inherit-l { height: inherit; }
6786
}

0 commit comments

Comments
 (0)