tachyons-rails 4.1.1 → 4.6.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/lib/tachyons/rails/version.rb +1 -1
- data/vendor/assets/stylesheets/tachyons.css +1210 -266
- data/vendor/assets/stylesheets/tachyons.min.css +2 -1
- metadata +2 -2
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA1:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: c3119faded647f95ad0b18e975b6e740565fe97d
|
|
4
|
+
data.tar.gz: 23cf0dbefefde55494e750d2861fbf0b7793f550
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 7a3c803e5a3e355169ae5ec801d7bbe2feb122b12760a6b5511603d741bbf2012c34013568f1cb1c43b8db4fe3215ad9b2d95135cba3c2e84232c8abd75eae5b
|
|
7
|
+
data.tar.gz: 6a309e408b682837b40af0cf476a259d6928466ce03bae1c0bb9326dfdde13aac0b8e880df8a53c804d4541b60757a4c15560dea42eda4be14c2242dbb99851f
|
|
@@ -1,11 +1,12 @@
|
|
|
1
|
-
|
|
2
|
-
/*
|
|
3
|
-
*
|
|
4
|
-
*
|
|
5
|
-
*
|
|
6
|
-
*
|
|
7
|
-
*
|
|
8
|
-
*
|
|
1
|
+
/*! TACHYONS v4.6.0 | http://tachyons.io */
|
|
2
|
+
/*
|
|
3
|
+
*
|
|
4
|
+
* ________ ______
|
|
5
|
+
* ___ __/_____ _________ /______ ______________________
|
|
6
|
+
* __ / _ __ `/ ___/_ __ \_ / / / __ \_ __ \_ ___/
|
|
7
|
+
* _ / / /_/ // /__ _ / / / /_/ // /_/ / / / /(__ )
|
|
8
|
+
* /_/ \__,_/ \___/ /_/ /_/_\__, / \____//_/ /_//____/
|
|
9
|
+
* /____/
|
|
9
10
|
*
|
|
10
11
|
* TABLE OF CONTENTS
|
|
11
12
|
*
|
|
@@ -21,47 +22,53 @@
|
|
|
21
22
|
*
|
|
22
23
|
*/
|
|
23
24
|
/* External Library Includes */
|
|
24
|
-
/*! normalize.css
|
|
25
|
+
/*! normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css */
|
|
25
26
|
/**
|
|
26
27
|
* 1. Change the default font family in all browsers (opinionated).
|
|
27
28
|
* 2. Correct the line height in all browsers.
|
|
28
|
-
* 3. Prevent adjustments of font size after orientation changes in
|
|
29
|
+
* 3. Prevent adjustments of font size after orientation changes in
|
|
30
|
+
* IE on Windows Phone and in iOS.
|
|
29
31
|
*/
|
|
32
|
+
/* Document
|
|
33
|
+
========================================================================== */
|
|
30
34
|
html { font-family: sans-serif; /* 1 */ line-height: 1.15; /* 2 */ -ms-text-size-adjust: 100%; /* 3 */ -webkit-text-size-adjust: 100%; /* 3 */ }
|
|
35
|
+
/* Sections
|
|
36
|
+
========================================================================== */
|
|
31
37
|
/**
|
|
32
38
|
* Remove the margin in all browsers (opinionated).
|
|
33
39
|
*/
|
|
34
40
|
body { margin: 0; }
|
|
35
|
-
/* HTML5 display definitions
|
|
36
|
-
========================================================================== */
|
|
37
41
|
/**
|
|
38
42
|
* Add the correct display in IE 9-.
|
|
39
|
-
* 1. Add the correct display in Edge, IE, and Firefox.
|
|
40
|
-
* 2. Add the correct display in IE.
|
|
41
43
|
*/
|
|
42
|
-
article, aside,
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
44
|
+
article, aside, footer, header, nav, section { display: block; }
|
|
45
|
+
/**
|
|
46
|
+
* Correct the font size and margin on `h1` elements within `section` and
|
|
47
|
+
* `article` contexts in Chrome, Firefox, and Safari.
|
|
48
|
+
*/
|
|
49
|
+
h1 { font-size: 2em; margin: .67em 0; }
|
|
50
|
+
/* Grouping content
|
|
51
|
+
========================================================================== */
|
|
46
52
|
/**
|
|
47
53
|
* Add the correct display in IE 9-.
|
|
54
|
+
* 1. Add the correct display in IE.
|
|
48
55
|
*/
|
|
49
|
-
|
|
56
|
+
figcaption, figure, main {/* 1 */ display: block; }
|
|
50
57
|
/**
|
|
51
|
-
* Add the correct
|
|
58
|
+
* Add the correct margin in IE 8.
|
|
52
59
|
*/
|
|
53
|
-
|
|
60
|
+
figure { margin: 1em 40px; }
|
|
54
61
|
/**
|
|
55
|
-
* Add the correct
|
|
62
|
+
* 1. Add the correct box sizing in Firefox.
|
|
63
|
+
* 2. Show the overflow in Edge and IE.
|
|
56
64
|
*/
|
|
57
|
-
|
|
65
|
+
hr { box-sizing: content-box; /* 1 */ height: 0; /* 1 */ overflow: visible; /* 2 */ }
|
|
58
66
|
/**
|
|
59
|
-
*
|
|
60
|
-
*
|
|
67
|
+
* 1. Correct the inheritance and scaling of font size in all browsers.
|
|
68
|
+
* 2. Correct the odd `em` font sizing in all browsers.
|
|
61
69
|
*/
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
/* Links
|
|
70
|
+
pre { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ }
|
|
71
|
+
/* Text-level semantics
|
|
65
72
|
========================================================================== */
|
|
66
73
|
/**
|
|
67
74
|
* 1. Remove the gray background on active links in IE 10.
|
|
@@ -73,8 +80,6 @@ a { background-color: transparent; /* 1 */ -webkit-text-decoration-skip: objects
|
|
|
73
80
|
* in all browsers (opinionated).
|
|
74
81
|
*/
|
|
75
82
|
a:active, a:hover { outline-width: 0; }
|
|
76
|
-
/* Text-level semantics
|
|
77
|
-
========================================================================== */
|
|
78
83
|
/**
|
|
79
84
|
* 1. Remove the bottom border in Firefox 39-.
|
|
80
85
|
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
|
|
@@ -89,14 +94,14 @@ b, strong { font-weight: inherit; }
|
|
|
89
94
|
*/
|
|
90
95
|
b, strong { font-weight: bolder; }
|
|
91
96
|
/**
|
|
92
|
-
*
|
|
97
|
+
* 1. Correct the inheritance and scaling of font size in all browsers.
|
|
98
|
+
* 2. Correct the odd `em` font sizing in all browsers.
|
|
93
99
|
*/
|
|
94
|
-
|
|
100
|
+
code, kbd, samp { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ }
|
|
95
101
|
/**
|
|
96
|
-
*
|
|
97
|
-
* `article` contexts in Chrome, Firefox, and Safari.
|
|
102
|
+
* Add the correct font style in Android 4.3-.
|
|
98
103
|
*/
|
|
99
|
-
|
|
104
|
+
dfn { font-style: italic; }
|
|
100
105
|
/**
|
|
101
106
|
* Add the correct background and color in IE 9-.
|
|
102
107
|
*/
|
|
@@ -115,40 +120,28 @@ sup { top: -0.5em; }
|
|
|
115
120
|
/* Embedded content
|
|
116
121
|
========================================================================== */
|
|
117
122
|
/**
|
|
118
|
-
*
|
|
119
|
-
*/
|
|
120
|
-
img { border-style: none; }
|
|
121
|
-
/**
|
|
122
|
-
* Hide the overflow in IE.
|
|
123
|
+
* Add the correct display in IE 9-.
|
|
123
124
|
*/
|
|
124
|
-
|
|
125
|
-
/* Grouping content
|
|
126
|
-
========================================================================== */
|
|
125
|
+
audio, video { display: inline-block; }
|
|
127
126
|
/**
|
|
128
|
-
*
|
|
129
|
-
* 2. Correct the odd `em` font sizing in all browsers.
|
|
127
|
+
* Add the correct display in iOS 4-7.
|
|
130
128
|
*/
|
|
131
|
-
|
|
129
|
+
audio:not([controls]) { display: none; height: 0; }
|
|
132
130
|
/**
|
|
133
|
-
*
|
|
131
|
+
* Remove the border on images inside links in IE 10-.
|
|
134
132
|
*/
|
|
135
|
-
|
|
133
|
+
img { border-style: none; }
|
|
136
134
|
/**
|
|
137
|
-
*
|
|
138
|
-
* 2. Show the overflow in Edge and IE.
|
|
135
|
+
* Hide the overflow in IE.
|
|
139
136
|
*/
|
|
140
|
-
|
|
137
|
+
svg:not(:root) { overflow: hidden; }
|
|
141
138
|
/* Forms
|
|
142
139
|
========================================================================== */
|
|
143
140
|
/**
|
|
144
|
-
* 1. Change font
|
|
141
|
+
* 1. Change the font styles in all browsers (opinionated).
|
|
145
142
|
* 2. Remove the margin in Firefox and Safari.
|
|
146
143
|
*/
|
|
147
|
-
button, input, optgroup, select, textarea { font:
|
|
148
|
-
/**
|
|
149
|
-
* Restore the font weight unset by the previous rule.
|
|
150
|
-
*/
|
|
151
|
-
optgroup { font-weight: bold; }
|
|
144
|
+
button, input, optgroup, select, textarea { font-family: sans-serif; /* 1 */ font-size: 100%; /* 1 */ line-height: 1.15; /* 1 */ margin: 0; /* 2 */ }
|
|
152
145
|
/**
|
|
153
146
|
* Show the overflow in IE.
|
|
154
147
|
* 1. Show the overflow in Edge.
|
|
@@ -179,7 +172,7 @@ button:-moz-focusring, [type="button"]:-moz-focusring,
|
|
|
179
172
|
/**
|
|
180
173
|
* Change the border, margin, and padding in all browsers (opinionated).
|
|
181
174
|
*/
|
|
182
|
-
fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding:
|
|
175
|
+
fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: .35em .625em .75em; }
|
|
183
176
|
/**
|
|
184
177
|
* 1. Correct the text wrapping in Edge and IE.
|
|
185
178
|
* 2. Correct the color inheritance from `fieldset` elements in IE.
|
|
@@ -187,6 +180,11 @@ fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.7
|
|
|
187
180
|
* `fieldset` elements in all browsers.
|
|
188
181
|
*/
|
|
189
182
|
legend { box-sizing: border-box; /* 1 */ color: inherit; /* 2 */ display: table; /* 1 */ max-width: 100%; /* 1 */ padding: 0; /* 3 */ white-space: normal; /* 1 */ }
|
|
183
|
+
/**
|
|
184
|
+
* 1. Add the correct display in IE 9-.
|
|
185
|
+
* 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
|
|
186
|
+
*/
|
|
187
|
+
progress { display: inline-block; /* 1 */ vertical-align: baseline; /* 2 */ }
|
|
190
188
|
/**
|
|
191
189
|
* Remove the default vertical scrollbar in IE.
|
|
192
190
|
*/
|
|
@@ -207,30 +205,95 @@ textarea { overflow: auto; }
|
|
|
207
205
|
*/
|
|
208
206
|
[type="search"] { -webkit-appearance: textfield; /* 1 */ outline-offset: -2px; /* 2 */ }
|
|
209
207
|
/**
|
|
210
|
-
* Remove the inner padding and cancel buttons in Chrome and Safari on
|
|
208
|
+
* Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
|
|
211
209
|
*/
|
|
212
210
|
[type="search"]::-webkit-search-cancel-button,
|
|
213
211
|
[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }
|
|
214
|
-
/**
|
|
215
|
-
* Correct the text style of placeholders in Chrome, Edge, and Safari.
|
|
216
|
-
*/
|
|
217
|
-
::-webkit-input-placeholder { color: inherit; opacity: 0.54; }
|
|
218
212
|
/**
|
|
219
213
|
* 1. Correct the inability to style clickable types in iOS and Safari.
|
|
220
214
|
* 2. Change font properties to `inherit` in Safari.
|
|
221
215
|
*/
|
|
222
216
|
::-webkit-file-upload-button { -webkit-appearance: button; /* 1 */ font: inherit; /* 2 */ }
|
|
217
|
+
/* Interactive
|
|
218
|
+
========================================================================== */
|
|
219
|
+
/*
|
|
220
|
+
* Add the correct display in IE 9-.
|
|
221
|
+
* 1. Add the correct display in Edge, IE, and Firefox.
|
|
222
|
+
*/
|
|
223
|
+
details, /* 1 */
|
|
224
|
+
menu { display: block; }
|
|
225
|
+
/*
|
|
226
|
+
* Add the correct display in all browsers.
|
|
227
|
+
*/
|
|
228
|
+
summary { display: list-item; }
|
|
229
|
+
/* Scripting
|
|
230
|
+
========================================================================== */
|
|
231
|
+
/**
|
|
232
|
+
* Add the correct display in IE 9-.
|
|
233
|
+
*/
|
|
234
|
+
canvas { display: inline-block; }
|
|
235
|
+
/**
|
|
236
|
+
* Add the correct display in IE.
|
|
237
|
+
*/
|
|
238
|
+
template { display: none; }
|
|
239
|
+
/* Hidden
|
|
240
|
+
========================================================================== */
|
|
241
|
+
/**
|
|
242
|
+
* Add the correct display in IE 10-.
|
|
243
|
+
*/
|
|
244
|
+
[hidden] { display: none; }
|
|
223
245
|
/* Modules */
|
|
224
246
|
/*
|
|
225
|
-
|
|
247
|
+
|
|
248
|
+
BOX SIZING
|
|
249
|
+
|
|
250
|
+
*/
|
|
251
|
+
html, body, div, article, section, main, footer, header, form, fieldset, legend,
|
|
252
|
+
pre, code, a, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, textarea, table,
|
|
253
|
+
td, th, tr, input[type="email"], input[type="number"], input[type="password"],
|
|
254
|
+
input[type="tel"], input[type="text"], input[type="url"], .border-box { box-sizing: border-box; }
|
|
255
|
+
/*
|
|
256
|
+
|
|
257
|
+
ASPECT RATIOS
|
|
258
|
+
|
|
259
|
+
*/
|
|
260
|
+
/* This is for fluid media that is embedded from third party sites like youtube, vimeo etc.
|
|
261
|
+
* Wrap the outer element in aspect-ratio and then extend it with the desired ratio i.e
|
|
262
|
+
* Make sure there are no height and width attributes on the embedded media.
|
|
263
|
+
* Adapted from: https://github.com/suitcss/components-flex-embed
|
|
264
|
+
*
|
|
265
|
+
* Example:
|
|
266
|
+
*
|
|
267
|
+
* <div class="aspect-ratio aspect-ratio--16x9">
|
|
268
|
+
* <iframe class="aspect-ratio--object"></iframe>
|
|
269
|
+
* </div>
|
|
270
|
+
*
|
|
271
|
+
* */
|
|
272
|
+
.aspect-ratio { height: 0; position: relative; }
|
|
273
|
+
.aspect-ratio--16x9 { padding-bottom: 56.25%; }
|
|
274
|
+
.aspect-ratio--9x16 { padding-bottom: 177.77%; }
|
|
275
|
+
.aspect-ratio--4x3 { padding-bottom: 75%; }
|
|
276
|
+
.aspect-ratio--3x4 { padding-bottom: 133.33%; }
|
|
277
|
+
.aspect-ratio--6x4 { padding-bottom: 66.6%; }
|
|
278
|
+
.aspect-ratio--4x6 { padding-bottom: 150%; }
|
|
279
|
+
.aspect-ratio--8x5 { padding-bottom: 62.5%; }
|
|
280
|
+
.aspect-ratio--5x8 { padding-bottom: 160%; }
|
|
281
|
+
.aspect-ratio--7x5 { padding-bottom: 71.42%; }
|
|
282
|
+
.aspect-ratio--5x7 { padding-bottom: 140%; }
|
|
283
|
+
.aspect-ratio--1x1 { padding-bottom: 100%; }
|
|
284
|
+
.aspect-ratio--object { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; z-index: 100; }
|
|
285
|
+
/*
|
|
286
|
+
|
|
287
|
+
IMAGES
|
|
288
|
+
Docs: http://tachyons.io/docs/elements/images/
|
|
289
|
+
|
|
226
290
|
*/
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
input[type="number"], input[type="password"], input[type="tel"],
|
|
230
|
-
input[type="text"], input[type="url"], .border-box { box-sizing: border-box; }
|
|
291
|
+
/* Responsive images! */
|
|
292
|
+
img { max-width: 100%; }
|
|
231
293
|
/*
|
|
232
294
|
|
|
233
295
|
BACKGROUND SIZE
|
|
296
|
+
Docs: http://tachyons.io/docs/themes/background-size/
|
|
234
297
|
|
|
235
298
|
Media Query Extensions:
|
|
236
299
|
-ns = not-small
|
|
@@ -242,19 +305,66 @@ input[type="text"], input[type="url"], .border-box { box-sizing: border-box; }
|
|
|
242
305
|
Often used in combination with background image set as an inline style
|
|
243
306
|
on an html element.
|
|
244
307
|
*/
|
|
245
|
-
.cover { background-size: cover; }
|
|
246
|
-
.contain { background-size: contain; }
|
|
308
|
+
.cover { background-size: cover !important; }
|
|
309
|
+
.contain { background-size: contain !important; }
|
|
247
310
|
/*
|
|
248
311
|
|
|
249
|
-
|
|
312
|
+
BACKGROUND POSITION
|
|
250
313
|
|
|
251
|
-
|
|
314
|
+
Base:
|
|
315
|
+
bg = background
|
|
252
316
|
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
317
|
+
Modifiers:
|
|
318
|
+
-center = center center
|
|
319
|
+
-top = top center
|
|
320
|
+
-right = center right
|
|
321
|
+
-bottom = bottom center
|
|
322
|
+
-left = center left
|
|
323
|
+
|
|
324
|
+
Media Query Extensions:
|
|
325
|
+
-ns = not-small
|
|
326
|
+
-m = medium
|
|
327
|
+
-l = large
|
|
328
|
+
|
|
329
|
+
*/
|
|
330
|
+
.bg-center { background-repeat: no-repeat; background-position: center center; }
|
|
331
|
+
.bg-top { background-repeat: no-repeat; background-position: top center; }
|
|
332
|
+
.bg-right { background-repeat: no-repeat; background-position: center right; }
|
|
333
|
+
.bg-bottom { background-repeat: no-repeat; background-position: bottom center; }
|
|
334
|
+
.bg-left { background-repeat: no-repeat; background-position: center left; }
|
|
335
|
+
/*
|
|
336
|
+
|
|
337
|
+
OUTLINES
|
|
338
|
+
|
|
339
|
+
Media Query Extensions:
|
|
340
|
+
-ns = not-small
|
|
341
|
+
-m = medium
|
|
342
|
+
-l = large
|
|
343
|
+
|
|
344
|
+
*/
|
|
345
|
+
.outline { outline: 1px solid; }
|
|
346
|
+
.outline-transparent { outline: 1px solid transparent; }
|
|
347
|
+
.outline-0 { outline: 0; }
|
|
348
|
+
/*
|
|
349
|
+
|
|
350
|
+
BORDERS
|
|
351
|
+
Docs: http://tachyons.io/docs/themes/borders/
|
|
352
|
+
|
|
353
|
+
Base:
|
|
354
|
+
b = border
|
|
355
|
+
|
|
356
|
+
Modifiers:
|
|
357
|
+
a = all
|
|
358
|
+
t = top
|
|
359
|
+
r = right
|
|
360
|
+
b = bottom
|
|
361
|
+
l = left
|
|
362
|
+
n = none
|
|
363
|
+
|
|
364
|
+
Media Query Extensions:
|
|
365
|
+
-ns = not-small
|
|
366
|
+
-m = medium
|
|
367
|
+
-l = large
|
|
258
368
|
|
|
259
369
|
*/
|
|
260
370
|
.ba { border-style: solid; border-width: 1px; }
|
|
@@ -266,6 +376,20 @@ input[type="text"], input[type="url"], .border-box { box-sizing: border-box; }
|
|
|
266
376
|
/*
|
|
267
377
|
|
|
268
378
|
BORDER COLORS
|
|
379
|
+
Docs: http://tachyons.io/docs/themes/borders/
|
|
380
|
+
|
|
381
|
+
Border colors can be used to extend the base
|
|
382
|
+
border classes ba,bt,bb,br,bl found in the _borders.css file.
|
|
383
|
+
|
|
384
|
+
The base border class by default will set the color of the border
|
|
385
|
+
to that of the current text color. These classes are for the cases
|
|
386
|
+
where you desire for the text and border colors to be different.
|
|
387
|
+
|
|
388
|
+
Base:
|
|
389
|
+
b = border
|
|
390
|
+
|
|
391
|
+
Modifiers:
|
|
392
|
+
--color-name = each color variable name is also a border color name
|
|
269
393
|
|
|
270
394
|
*/
|
|
271
395
|
.b--black { border-color: #000; }
|
|
@@ -302,18 +426,22 @@ input[type="text"], input[type="url"], .border-box { box-sizing: border-box; }
|
|
|
302
426
|
.b--black-05 { border-color: rgba( 0, 0, 0, .05 ); }
|
|
303
427
|
.b--black-025 { border-color: rgba( 0, 0, 0, .025 ); }
|
|
304
428
|
.b--black-0125 { border-color: rgba( 0, 0, 0, .0125 ); }
|
|
305
|
-
.b--dark-red { border-color: #
|
|
306
|
-
.b--red { border-color: #
|
|
307
|
-
.b--
|
|
308
|
-
.b--
|
|
309
|
-
.b--
|
|
310
|
-
.b--
|
|
311
|
-
.b--light-
|
|
312
|
-
.b--
|
|
313
|
-
.b--
|
|
314
|
-
.b--pink { border-color: #
|
|
315
|
-
.b--
|
|
316
|
-
.b--
|
|
429
|
+
.b--dark-red { border-color: #e7040f; }
|
|
430
|
+
.b--red { border-color: #ff4136; }
|
|
431
|
+
.b--light-red { border-color: #ff725c; }
|
|
432
|
+
.b--orange { border-color: #ff6300; }
|
|
433
|
+
.b--gold { border-color: #ffb700; }
|
|
434
|
+
.b--yellow { border-color: #ffd700; }
|
|
435
|
+
.b--light-yellow { border-color: #fbf1a9; }
|
|
436
|
+
.b--purple { border-color: #5e2ca5; }
|
|
437
|
+
.b--light-purple { border-color: #a463f2; }
|
|
438
|
+
.b--dark-pink { border-color: #d5008f; }
|
|
439
|
+
.b--hot-pink { border-color: #ff41b4; }
|
|
440
|
+
.b--pink { border-color: #ff80cc; }
|
|
441
|
+
.b--light-pink { border-color: #ffa3d7; }
|
|
442
|
+
.b--dark-green { border-color: #137752; }
|
|
443
|
+
.b--green { border-color: #19a974; }
|
|
444
|
+
.b--light-green { border-color: #9eebcf; }
|
|
317
445
|
.b--navy { border-color: #001b44; }
|
|
318
446
|
.b--dark-blue { border-color: #00449e; }
|
|
319
447
|
.b--blue { border-color: #357edd; }
|
|
@@ -321,14 +449,13 @@ input[type="text"], input[type="url"], .border-box { box-sizing: border-box; }
|
|
|
321
449
|
.b--lightest-blue { border-color: #cdecff; }
|
|
322
450
|
.b--washed-blue { border-color: #f6fffe; }
|
|
323
451
|
.b--washed-green { border-color: #e8fdf5; }
|
|
324
|
-
.b--washed-yellow { border-color: #
|
|
325
|
-
.b--
|
|
326
|
-
.b--light-yellow { border-color: #f3dd70; }
|
|
327
|
-
.b--light-red { border-color: #ffd3c0; }
|
|
452
|
+
.b--washed-yellow { border-color: #fffceb; }
|
|
453
|
+
.b--washed-red { border-color: #ffdfdf; }
|
|
328
454
|
.b--transparent { border-color: transparent; }
|
|
329
455
|
/*
|
|
330
456
|
|
|
331
457
|
BORDER RADIUS
|
|
458
|
+
Docs: http://tachyons.io/docs/themes/border-radius/
|
|
332
459
|
|
|
333
460
|
Base:
|
|
334
461
|
br = border-radius
|
|
@@ -339,8 +466,10 @@ input[type="text"], input[type="url"], .border-box { box-sizing: border-box; }
|
|
|
339
466
|
2 = 2nd step in scale
|
|
340
467
|
3 = 3rd step in scale
|
|
341
468
|
4 = 4th step in scale
|
|
342
|
-
-100 = 100%
|
|
343
469
|
|
|
470
|
+
Literal values:
|
|
471
|
+
-100 = 100%
|
|
472
|
+
-pill = 9999px
|
|
344
473
|
|
|
345
474
|
Media Query Extensions:
|
|
346
475
|
-ns = not-small
|
|
@@ -354,6 +483,7 @@ input[type="text"], input[type="url"], .border-box { box-sizing: border-box; }
|
|
|
354
483
|
.br3 { border-radius: .5rem; }
|
|
355
484
|
.br4 { border-radius: 1rem; }
|
|
356
485
|
.br-100 { border-radius: 100%; }
|
|
486
|
+
.br-pill { border-radius: 9999px; }
|
|
357
487
|
.br--bottom { border-top-left-radius: 0; border-top-right-radius: 0; }
|
|
358
488
|
.br--top { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
|
|
359
489
|
.br--right { border-top-left-radius: 0; border-bottom-left-radius: 0; }
|
|
@@ -361,15 +491,18 @@ input[type="text"], input[type="url"], .border-box { box-sizing: border-box; }
|
|
|
361
491
|
/*
|
|
362
492
|
|
|
363
493
|
BORDER STYLES
|
|
494
|
+
Docs: http://tachyons.io/docs/themes/borders/
|
|
495
|
+
|
|
496
|
+
Depends on base border module in _borders.css
|
|
364
497
|
|
|
365
498
|
Base:
|
|
366
|
-
|
|
499
|
+
b = border-style
|
|
367
500
|
|
|
368
501
|
Modifiers:
|
|
369
|
-
none = none
|
|
370
|
-
dotted = dotted
|
|
371
|
-
dashed = dashed
|
|
372
|
-
solid = solid
|
|
502
|
+
--none = none
|
|
503
|
+
--dotted = dotted
|
|
504
|
+
--dashed = dashed
|
|
505
|
+
--solid = solid
|
|
373
506
|
|
|
374
507
|
Media Query Extensions:
|
|
375
508
|
-ns = not-small
|
|
@@ -384,6 +517,7 @@ input[type="text"], input[type="url"], .border-box { box-sizing: border-box; }
|
|
|
384
517
|
/*
|
|
385
518
|
|
|
386
519
|
BORDER WIDTHS
|
|
520
|
+
Docs: http://tachyons.io/docs/themes/borders/
|
|
387
521
|
|
|
388
522
|
Base:
|
|
389
523
|
bw = border-width
|
|
@@ -408,6 +542,7 @@ input[type="text"], input[type="url"], .border-box { box-sizing: border-box; }
|
|
|
408
542
|
.bw3 { border-width: .5rem; }
|
|
409
543
|
.bw4 { border-width: 1rem; }
|
|
410
544
|
.bw5 { border-width: 2rem; }
|
|
545
|
+
/* Resets */
|
|
411
546
|
.bt-0 { border-top-width: 0; }
|
|
412
547
|
.br-0 { border-right-width: 0; }
|
|
413
548
|
.bb-0 { border-bottom-width: 0; }
|
|
@@ -415,6 +550,7 @@ input[type="text"], input[type="url"], .border-box { box-sizing: border-box; }
|
|
|
415
550
|
/*
|
|
416
551
|
|
|
417
552
|
BOX-SHADOW
|
|
553
|
+
Docs: http://tachyons.io/docs/themes/box-shadow/
|
|
418
554
|
|
|
419
555
|
Media Query Extensions:
|
|
420
556
|
-ns = not-small
|
|
@@ -422,11 +558,11 @@ input[type="text"], input[type="url"], .border-box { box-sizing: border-box; }
|
|
|
422
558
|
-l = large
|
|
423
559
|
|
|
424
560
|
*/
|
|
425
|
-
.shadow-1 { box-shadow:
|
|
426
|
-
.shadow-2 { box-shadow:
|
|
427
|
-
.shadow-3 { box-shadow: 2px 2px 4px 2px rgba( 0, 0, 0,
|
|
428
|
-
.shadow-4 { box-shadow: 2px 2px 8px
|
|
429
|
-
.shadow-5 { box-shadow: 4px 4px 8px
|
|
561
|
+
.shadow-1 { box-shadow: 0 0 4px 2px rgba( 0, 0, 0, .2 ); }
|
|
562
|
+
.shadow-2 { box-shadow: 0 0 8px 2px rgba( 0, 0, 0, .2 ); }
|
|
563
|
+
.shadow-3 { box-shadow: 2px 2px 4px 2px rgba( 0, 0, 0, .2 ); }
|
|
564
|
+
.shadow-4 { box-shadow: 2px 2px 8px 0 rgba( 0, 0, 0, .2 ); }
|
|
565
|
+
.shadow-5 { box-shadow: 4px 4px 8px 0 rgba( 0, 0, 0, .2 ); }
|
|
430
566
|
/*
|
|
431
567
|
|
|
432
568
|
CODE
|
|
@@ -436,9 +572,28 @@ input[type="text"], input[type="url"], .border-box { box-sizing: border-box; }
|
|
|
436
572
|
/*
|
|
437
573
|
|
|
438
574
|
COORDINATES
|
|
575
|
+
Docs: http://tachyons.io/docs/layout/position/
|
|
439
576
|
|
|
440
577
|
Use in combination with the position module.
|
|
441
578
|
|
|
579
|
+
Base:
|
|
580
|
+
top
|
|
581
|
+
bottom
|
|
582
|
+
right
|
|
583
|
+
left
|
|
584
|
+
|
|
585
|
+
Modifiers:
|
|
586
|
+
-0 = literal value 0
|
|
587
|
+
-1 = literal value 1
|
|
588
|
+
-2 = literal value 2
|
|
589
|
+
--1 = literal value -1
|
|
590
|
+
--2 = literal value -2
|
|
591
|
+
|
|
592
|
+
Media Query Extensions:
|
|
593
|
+
-ns = not-small
|
|
594
|
+
-m = medium
|
|
595
|
+
-l = large
|
|
596
|
+
|
|
442
597
|
*/
|
|
443
598
|
.top-0 { top: 0; }
|
|
444
599
|
.right-0 { right: 0; }
|
|
@@ -464,6 +619,7 @@ input[type="text"], input[type="url"], .border-box { box-sizing: border-box; }
|
|
|
464
619
|
/*
|
|
465
620
|
|
|
466
621
|
CLEARFIX
|
|
622
|
+
http://tachyons.io/docs/layout/clearfix/
|
|
467
623
|
|
|
468
624
|
*/
|
|
469
625
|
/* Nicolas Gallaghers Clearfix solution
|
|
@@ -478,6 +634,7 @@ input[type="text"], input[type="url"], .border-box { box-sizing: border-box; }
|
|
|
478
634
|
/*
|
|
479
635
|
|
|
480
636
|
DISPLAY
|
|
637
|
+
Docs: http://tachyons.io/docs/layout/display
|
|
481
638
|
|
|
482
639
|
Base:
|
|
483
640
|
d = display
|
|
@@ -534,16 +691,16 @@ input[type="text"], input[type="url"], .border-box { box-sizing: border-box; }
|
|
|
534
691
|
.flex-column { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }
|
|
535
692
|
.flex-row { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; }
|
|
536
693
|
.flex-wrap { -ms-flex-wrap: wrap; flex-wrap: wrap; }
|
|
537
|
-
.items-start { -webkit-box-align: start; -ms-flex-align: start;
|
|
538
|
-
.items-end { -webkit-box-align: end; -ms-flex-align: end;
|
|
539
|
-
.items-center { -webkit-box-align: center; -ms-flex-align: center;
|
|
540
|
-
.items-baseline { -webkit-box-align: baseline; -ms-flex-align: baseline;
|
|
541
|
-
.items-stretch { -webkit-box-align: stretch; -ms-flex-align: stretch;
|
|
694
|
+
.items-start { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; }
|
|
695
|
+
.items-end { -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; }
|
|
696
|
+
.items-center { -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
|
|
697
|
+
.items-baseline { -webkit-box-align: baseline; -ms-flex-align: baseline; align-items: baseline; }
|
|
698
|
+
.items-stretch { -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; }
|
|
542
699
|
.self-start { -ms-flex-item-align: start; align-self: flex-start; }
|
|
543
700
|
.self-end { -ms-flex-item-align: end; align-self: flex-end; }
|
|
544
|
-
.self-center { -ms-flex-item-align: center; align-self: center; }
|
|
701
|
+
.self-center { -ms-flex-item-align: center; -ms-grid-row-align: center; align-self: center; }
|
|
545
702
|
.self-baseline { -ms-flex-item-align: baseline; align-self: baseline; }
|
|
546
|
-
.self-stretch { -ms-flex-item-align: stretch; align-self: stretch; }
|
|
703
|
+
.self-stretch { -ms-flex-item-align: stretch; -ms-grid-row-align: stretch; align-self: stretch; }
|
|
547
704
|
.justify-start { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; }
|
|
548
705
|
.justify-end { -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; }
|
|
549
706
|
.justify-center { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }
|
|
@@ -568,6 +725,7 @@ input[type="text"], input[type="url"], .border-box { box-sizing: border-box; }
|
|
|
568
725
|
/*
|
|
569
726
|
|
|
570
727
|
FLOATS
|
|
728
|
+
http://tachyons.io/docs/layout/floats/
|
|
571
729
|
|
|
572
730
|
1. Floated elements are automatically rendered as block level elements.
|
|
573
731
|
Setting floats to display inline will fix the double margin bug in
|
|
@@ -595,6 +753,7 @@ input[type="text"], input[type="url"], .border-box { box-sizing: border-box; }
|
|
|
595
753
|
/*
|
|
596
754
|
|
|
597
755
|
FONT FAMILY GROUPS
|
|
756
|
+
Docs: http://tachyons.io/docs/typography/font-family/
|
|
598
757
|
|
|
599
758
|
*/
|
|
600
759
|
.sans-serif { font-family: -apple-system, BlinkMacSystemFont, 'avenir next', avenir, helvetica, 'helvetica neue', ubuntu, roboto, noto, 'segoe ui', arial, sans-serif; }
|
|
@@ -609,6 +768,7 @@ code, .code { font-family: Consolas, monaco, monospace; }
|
|
|
609
768
|
.helvetica { font-family: 'helvetica neue', helvetica, sans-serif; }
|
|
610
769
|
.avenir { font-family: 'avenir next', avenir, sans-serif; }
|
|
611
770
|
/* Serif Typefaces */
|
|
771
|
+
.athelas { font-family: athelas, georgia, serif; }
|
|
612
772
|
.georgia { font-family: georgia, serif; }
|
|
613
773
|
.times { font-family: times, serif; }
|
|
614
774
|
.bodoni { font-family: "Bodoni MT", serif; }
|
|
@@ -618,6 +778,12 @@ code, .code { font-family: Consolas, monaco, monospace; }
|
|
|
618
778
|
/*
|
|
619
779
|
|
|
620
780
|
FONT STYLE
|
|
781
|
+
Docs: http://tachyons.io/docs/typography/font-style/
|
|
782
|
+
|
|
783
|
+
Media Query Extensions:
|
|
784
|
+
-ns = not-small
|
|
785
|
+
-m = medium
|
|
786
|
+
-l = large
|
|
621
787
|
|
|
622
788
|
*/
|
|
623
789
|
.i { font-style: italic; }
|
|
@@ -625,6 +791,26 @@ code, .code { font-family: Consolas, monaco, monospace; }
|
|
|
625
791
|
/*
|
|
626
792
|
|
|
627
793
|
FONT WEIGHT
|
|
794
|
+
Docs: http://tachyons.io/docs/typography/font-weight/
|
|
795
|
+
|
|
796
|
+
Base
|
|
797
|
+
fw = font-weight
|
|
798
|
+
|
|
799
|
+
Modifiers:
|
|
800
|
+
1 = literal value 100
|
|
801
|
+
2 = literal value 200
|
|
802
|
+
3 = literal value 300
|
|
803
|
+
4 = literal value 400
|
|
804
|
+
5 = literal value 500
|
|
805
|
+
6 = literal value 600
|
|
806
|
+
7 = literal value 700
|
|
807
|
+
8 = literal value 800
|
|
808
|
+
9 = literal value 900
|
|
809
|
+
|
|
810
|
+
Media Query Extensions:
|
|
811
|
+
-ns = not-small
|
|
812
|
+
-m = medium
|
|
813
|
+
-l = large
|
|
628
814
|
|
|
629
815
|
*/
|
|
630
816
|
.normal { font-weight: normal; }
|
|
@@ -641,12 +827,40 @@ code, .code { font-family: Consolas, monaco, monospace; }
|
|
|
641
827
|
/*
|
|
642
828
|
|
|
643
829
|
FORMS
|
|
644
|
-
|
|
830
|
+
|
|
645
831
|
*/
|
|
646
832
|
.input-reset { -webkit-appearance: none; -moz-appearance: none; }
|
|
833
|
+
.button-reset::-moz-focus-inner, .input-reset::-moz-focus-inner { border: 0; padding: 0; }
|
|
647
834
|
/*
|
|
648
835
|
|
|
649
836
|
HEIGHTS
|
|
837
|
+
Docs: http://tachyons.io/docs/layout/heights/
|
|
838
|
+
|
|
839
|
+
Base:
|
|
840
|
+
h = height
|
|
841
|
+
min-h = min-height
|
|
842
|
+
min-vh = min-height vertical screen height
|
|
843
|
+
vh = vertical screen height
|
|
844
|
+
|
|
845
|
+
Modifiers
|
|
846
|
+
1 = 1st step in height scale
|
|
847
|
+
2 = 2nd step in height scale
|
|
848
|
+
3 = 3rd step in height scale
|
|
849
|
+
4 = 4th step in height scale
|
|
850
|
+
5 = 5th step in height scale
|
|
851
|
+
|
|
852
|
+
-25 = literal value 25%
|
|
853
|
+
-50 = literal value 50%
|
|
854
|
+
-75 = literal value 75%
|
|
855
|
+
-100 = literal value 100%
|
|
856
|
+
|
|
857
|
+
-auto = string value of auto
|
|
858
|
+
-inherit = string value of inherit
|
|
859
|
+
|
|
860
|
+
Media Query Extensions:
|
|
861
|
+
-ns = not-small
|
|
862
|
+
-m = medium
|
|
863
|
+
-l = large
|
|
650
864
|
|
|
651
865
|
*/
|
|
652
866
|
/* Height Scale */
|
|
@@ -655,17 +869,30 @@ code, .code { font-family: Consolas, monaco, monospace; }
|
|
|
655
869
|
.h3 { height: 4rem; }
|
|
656
870
|
.h4 { height: 8rem; }
|
|
657
871
|
.h5 { height: 16rem; }
|
|
658
|
-
/* Height Percentages */
|
|
872
|
+
/* Height Percentages - Based off of height of parent */
|
|
659
873
|
.h-25 { height: 25%; }
|
|
660
874
|
.h-50 { height: 50%; }
|
|
661
875
|
.h-75 { height: 75%; }
|
|
662
876
|
.h-100 { height: 100%; }
|
|
877
|
+
.min-h-100 { min-height: 100%; }
|
|
878
|
+
/* Screen Height Percentage */
|
|
879
|
+
.vh-25 { height: 25vh; }
|
|
880
|
+
.vh-50 { height: 50vh; }
|
|
881
|
+
.vh-75 { height: 75vh; }
|
|
882
|
+
.vh-100 { height: 100vh; }
|
|
883
|
+
.min-vh-100 { min-height: 100vh; }
|
|
663
884
|
/* String Properties */
|
|
664
885
|
.h-auto { height: auto; }
|
|
665
886
|
.h-inherit { height: inherit; }
|
|
666
887
|
/*
|
|
667
888
|
|
|
668
889
|
LETTER SPACING
|
|
890
|
+
Docs: http://tachyons.io/docs/typography/tracking/
|
|
891
|
+
|
|
892
|
+
Media Query Extensions:
|
|
893
|
+
-ns = not-small
|
|
894
|
+
-m = medium
|
|
895
|
+
-l = large
|
|
669
896
|
|
|
670
897
|
*/
|
|
671
898
|
.tracked { letter-spacing: .1em; }
|
|
@@ -674,30 +901,63 @@ code, .code { font-family: Consolas, monaco, monospace; }
|
|
|
674
901
|
/*
|
|
675
902
|
|
|
676
903
|
LINE HEIGHT / LEADING
|
|
904
|
+
Docs: http://tachyons.io/docs/typography/line-height
|
|
905
|
+
|
|
906
|
+
Media Query Extensions:
|
|
907
|
+
-ns = not-small
|
|
908
|
+
-m = medium
|
|
909
|
+
-l = large
|
|
677
910
|
|
|
678
911
|
*/
|
|
679
912
|
.lh-solid { line-height: 1; }
|
|
680
|
-
.lh-title { line-height: 1.
|
|
681
|
-
.lh-copy { line-height: 1.
|
|
913
|
+
.lh-title { line-height: 1.25; }
|
|
914
|
+
.lh-copy { line-height: 1.5; }
|
|
682
915
|
/*
|
|
683
916
|
|
|
684
917
|
LINKS
|
|
918
|
+
Docs: http://tachyons.io/docs/elements/links/
|
|
685
919
|
|
|
686
920
|
*/
|
|
687
921
|
.link { text-decoration: none; -webkit-transition: color .15s ease-in; transition: color .15s ease-in; }
|
|
688
922
|
.link:link, .link:visited { -webkit-transition: color .15s ease-in; transition: color .15s ease-in; }
|
|
689
923
|
.link:hover { -webkit-transition: color .15s ease-in; transition: color .15s ease-in; }
|
|
690
924
|
.link:active { -webkit-transition: color .15s ease-in; transition: color .15s ease-in; }
|
|
691
|
-
.link:focus { -webkit-transition: color .15s ease-in; transition: color .15s ease-in; }
|
|
925
|
+
.link:focus { -webkit-transition: color .15s ease-in; transition: color .15s ease-in; outline: 1px dotted currentColor; }
|
|
692
926
|
/*
|
|
693
927
|
|
|
694
928
|
LISTS
|
|
929
|
+
http://tachyons.io/docs/elements/lists/
|
|
695
930
|
|
|
696
931
|
*/
|
|
697
932
|
.list { list-style-type: none; }
|
|
698
933
|
/*
|
|
699
934
|
|
|
700
935
|
MAX WIDTHS
|
|
936
|
+
Docs: http://tachyons.io/docs/layout/max-widths/
|
|
937
|
+
|
|
938
|
+
Base:
|
|
939
|
+
mw = max-width
|
|
940
|
+
|
|
941
|
+
Modifiers
|
|
942
|
+
1 = 1st step in width scale
|
|
943
|
+
2 = 2nd step in width scale
|
|
944
|
+
3 = 3rd step in width scale
|
|
945
|
+
4 = 4th step in width scale
|
|
946
|
+
5 = 5th step in width scale
|
|
947
|
+
6 = 6st step in width scale
|
|
948
|
+
7 = 7nd step in width scale
|
|
949
|
+
8 = 8rd step in width scale
|
|
950
|
+
9 = 9th step in width scale
|
|
951
|
+
|
|
952
|
+
-100 = literal value 100%
|
|
953
|
+
|
|
954
|
+
-none = string value none
|
|
955
|
+
|
|
956
|
+
|
|
957
|
+
Media Query Extensions:
|
|
958
|
+
-ns = not-small
|
|
959
|
+
-m = medium
|
|
960
|
+
-l = large
|
|
701
961
|
|
|
702
962
|
*/
|
|
703
963
|
/* Max Width Percentages */
|
|
@@ -717,6 +977,7 @@ code, .code { font-family: Consolas, monaco, monospace; }
|
|
|
717
977
|
/*
|
|
718
978
|
|
|
719
979
|
WIDTHS
|
|
980
|
+
Docs: http://tachyons.io/docs/layout/widths/
|
|
720
981
|
|
|
721
982
|
Base:
|
|
722
983
|
w = width
|
|
@@ -740,6 +1001,7 @@ code, .code { font-family: Consolas, monaco, monospace; }
|
|
|
740
1001
|
-80 = literal value 80%
|
|
741
1002
|
-100 = literal value 100%
|
|
742
1003
|
|
|
1004
|
+
-third = 100% / 3 (Not supported in opera mini or IE8)
|
|
743
1005
|
-auto = string value auto
|
|
744
1006
|
|
|
745
1007
|
|
|
@@ -758,19 +1020,29 @@ code, .code { font-family: Consolas, monaco, monospace; }
|
|
|
758
1020
|
.w-10 { width: 10%; }
|
|
759
1021
|
.w-20 { width: 20%; }
|
|
760
1022
|
.w-25 { width: 25%; }
|
|
1023
|
+
.w-30 { width: 30%; }
|
|
761
1024
|
.w-33 { width: 33%; }
|
|
762
1025
|
.w-34 { width: 34%; }
|
|
763
1026
|
.w-40 { width: 40%; }
|
|
764
1027
|
.w-50 { width: 50%; }
|
|
765
1028
|
.w-60 { width: 60%; }
|
|
1029
|
+
.w-70 { width: 70%; }
|
|
766
1030
|
.w-75 { width: 75%; }
|
|
767
1031
|
.w-80 { width: 80%; }
|
|
1032
|
+
.w-90 { width: 90%; }
|
|
768
1033
|
.w-100 { width: 100%; }
|
|
1034
|
+
.w-third { width: calc( 100% / 3 ); }
|
|
1035
|
+
.w-two-thirds { width: calc( 100% / 1.5 ); }
|
|
769
1036
|
.w-auto { width: auto; }
|
|
770
1037
|
/*
|
|
771
1038
|
|
|
772
1039
|
OVERFLOW
|
|
773
1040
|
|
|
1041
|
+
Media Query Extensions:
|
|
1042
|
+
-ns = not-small
|
|
1043
|
+
-m = medium
|
|
1044
|
+
-l = large
|
|
1045
|
+
|
|
774
1046
|
*/
|
|
775
1047
|
.overflow-visible { overflow: visible; }
|
|
776
1048
|
.overflow-hidden { overflow: hidden; }
|
|
@@ -786,16 +1058,23 @@ code, .code { font-family: Consolas, monaco, monospace; }
|
|
|
786
1058
|
.overflow-y-auto { overflow-y: auto; }
|
|
787
1059
|
/*
|
|
788
1060
|
|
|
789
|
-
|
|
1061
|
+
POSITIONING
|
|
1062
|
+
Docs: http://tachyons.io/docs/layout/position/
|
|
790
1063
|
|
|
791
|
-
|
|
1064
|
+
Media Query Extensions:
|
|
1065
|
+
-ns = not-small
|
|
1066
|
+
-m = medium
|
|
1067
|
+
-l = large
|
|
1068
|
+
|
|
1069
|
+
*/
|
|
792
1070
|
.static { position: static; }
|
|
793
1071
|
.relative { position: relative; }
|
|
794
1072
|
.absolute { position: absolute; }
|
|
795
1073
|
.fixed { position: fixed; }
|
|
796
1074
|
/*
|
|
797
1075
|
|
|
798
|
-
|
|
1076
|
+
OPACITY
|
|
1077
|
+
Docs: http://tachyons.io/docs/themes/opacity/
|
|
799
1078
|
|
|
800
1079
|
*/
|
|
801
1080
|
.o-100 { opacity: 1; }
|
|
@@ -811,9 +1090,26 @@ code, .code { font-family: Consolas, monaco, monospace; }
|
|
|
811
1090
|
.o-05 { opacity: .05; }
|
|
812
1091
|
.o-025 { opacity: .025; }
|
|
813
1092
|
.o-0 { opacity: 0; }
|
|
1093
|
+
/*
|
|
1094
|
+
|
|
1095
|
+
ROTATIONS
|
|
1096
|
+
|
|
1097
|
+
*/
|
|
1098
|
+
.rotate-45 { -webkit-transform: rotate( 45deg ); transform: rotate( 45deg ); }
|
|
1099
|
+
.rotate-90 { -webkit-transform: rotate( 90deg ); transform: rotate( 90deg ); }
|
|
1100
|
+
.rotate-135 { -webkit-transform: rotate( 135deg ); transform: rotate( 135deg ); }
|
|
1101
|
+
.rotate-180 { -webkit-transform: rotate( 180deg ); transform: rotate( 180deg ); }
|
|
1102
|
+
.rotate-225 { -webkit-transform: rotate( 225deg ); transform: rotate( 225deg ); }
|
|
1103
|
+
.rotate-270 { -webkit-transform: rotate( 270deg ); transform: rotate( 270deg ); }
|
|
1104
|
+
.rotate-315 { -webkit-transform: rotate( 315deg ); transform: rotate( 315deg ); }
|
|
814
1105
|
/*
|
|
815
1106
|
|
|
816
1107
|
SKINS
|
|
1108
|
+
Docs: http://tachyons.io/docs/themes/skins/
|
|
1109
|
+
|
|
1110
|
+
Classes for setting foreground and background colors on elements.
|
|
1111
|
+
If you haven't declared a border color, but set border on an element, it will
|
|
1112
|
+
be set to the current text color.
|
|
817
1113
|
|
|
818
1114
|
*/
|
|
819
1115
|
/* Text colors */
|
|
@@ -847,18 +1143,22 @@ code, .code { font-family: Consolas, monaco, monospace; }
|
|
|
847
1143
|
.light-gray { color: #eee; }
|
|
848
1144
|
.near-white { color: #f4f4f4; }
|
|
849
1145
|
.white { color: #fff; }
|
|
850
|
-
.dark-red { color: #
|
|
851
|
-
.red { color: #
|
|
852
|
-
.
|
|
853
|
-
.
|
|
854
|
-
.
|
|
855
|
-
.
|
|
856
|
-
.light-
|
|
857
|
-
.
|
|
858
|
-
.
|
|
859
|
-
.pink { color: #
|
|
860
|
-
.
|
|
861
|
-
.
|
|
1146
|
+
.dark-red { color: #e7040f; }
|
|
1147
|
+
.red { color: #ff4136; }
|
|
1148
|
+
.light-red { color: #ff725c; }
|
|
1149
|
+
.orange { color: #ff6300; }
|
|
1150
|
+
.gold { color: #ffb700; }
|
|
1151
|
+
.yellow { color: #ffd700; }
|
|
1152
|
+
.light-yellow { color: #fbf1a9; }
|
|
1153
|
+
.purple { color: #5e2ca5; }
|
|
1154
|
+
.light-purple { color: #a463f2; }
|
|
1155
|
+
.dark-pink { color: #d5008f; }
|
|
1156
|
+
.hot-pink { color: #ff41b4; }
|
|
1157
|
+
.pink { color: #ff80cc; }
|
|
1158
|
+
.light-pink { color: #ffa3d7; }
|
|
1159
|
+
.dark-green { color: #137752; }
|
|
1160
|
+
.green { color: #19a974; }
|
|
1161
|
+
.light-green { color: #9eebcf; }
|
|
862
1162
|
.navy { color: #001b44; }
|
|
863
1163
|
.dark-blue { color: #00449e; }
|
|
864
1164
|
.blue { color: #357edd; }
|
|
@@ -866,10 +1166,8 @@ code, .code { font-family: Consolas, monaco, monospace; }
|
|
|
866
1166
|
.lightest-blue { color: #cdecff; }
|
|
867
1167
|
.washed-blue { color: #f6fffe; }
|
|
868
1168
|
.washed-green { color: #e8fdf5; }
|
|
869
|
-
.washed-yellow { color: #
|
|
870
|
-
.
|
|
871
|
-
.light-yellow { color: #f3dd70; }
|
|
872
|
-
.light-red { color: #ffd3c0; }
|
|
1169
|
+
.washed-yellow { color: #fffceb; }
|
|
1170
|
+
.washed-red { color: #ffdfdf; }
|
|
873
1171
|
.bg-black-90 { background-color: rgba( 0, 0, 0, .9 ); }
|
|
874
1172
|
.bg-black-80 { background-color: rgba( 0, 0, 0, .8 ); }
|
|
875
1173
|
.bg-black-70 { background-color: rgba( 0, 0, 0, .7 ); }
|
|
@@ -902,18 +1200,22 @@ code, .code { font-family: Consolas, monaco, monospace; }
|
|
|
902
1200
|
.bg-near-white { background-color: #f4f4f4; }
|
|
903
1201
|
.bg-white { background-color: #fff; }
|
|
904
1202
|
.bg-transparent { background-color: transparent; }
|
|
905
|
-
.bg-dark-red { background-color: #
|
|
906
|
-
.bg-red { background-color: #
|
|
907
|
-
.bg-
|
|
908
|
-
.bg-
|
|
909
|
-
.bg-
|
|
910
|
-
.bg-
|
|
911
|
-
.bg-light-
|
|
912
|
-
.bg-
|
|
913
|
-
.bg-
|
|
914
|
-
.bg-pink { background-color: #
|
|
915
|
-
.bg-
|
|
916
|
-
.bg-
|
|
1203
|
+
.bg-dark-red { background-color: #e7040f; }
|
|
1204
|
+
.bg-red { background-color: #ff4136; }
|
|
1205
|
+
.bg-light-red { background-color: #ff725c; }
|
|
1206
|
+
.bg-orange { background-color: #ff6300; }
|
|
1207
|
+
.bg-gold { background-color: #ffb700; }
|
|
1208
|
+
.bg-yellow { background-color: #ffd700; }
|
|
1209
|
+
.bg-light-yellow { background-color: #fbf1a9; }
|
|
1210
|
+
.bg-purple { background-color: #5e2ca5; }
|
|
1211
|
+
.bg-light-purple { background-color: #a463f2; }
|
|
1212
|
+
.bg-dark-pink { background-color: #d5008f; }
|
|
1213
|
+
.bg-hot-pink { background-color: #ff41b4; }
|
|
1214
|
+
.bg-pink { background-color: #ff80cc; }
|
|
1215
|
+
.bg-light-pink { background-color: #ffa3d7; }
|
|
1216
|
+
.bg-dark-green { background-color: #137752; }
|
|
1217
|
+
.bg-green { background-color: #19a974; }
|
|
1218
|
+
.bg-light-green { background-color: #9eebcf; }
|
|
917
1219
|
.bg-navy { background-color: #001b44; }
|
|
918
1220
|
.bg-dark-blue { background-color: #00449e; }
|
|
919
1221
|
.bg-blue { background-color: #357edd; }
|
|
@@ -921,87 +1223,267 @@ code, .code { font-family: Consolas, monaco, monospace; }
|
|
|
921
1223
|
.bg-lightest-blue { background-color: #cdecff; }
|
|
922
1224
|
.bg-washed-blue { background-color: #f6fffe; }
|
|
923
1225
|
.bg-washed-green { background-color: #e8fdf5; }
|
|
924
|
-
.bg-washed-yellow { background-color: #
|
|
925
|
-
.bg-
|
|
926
|
-
|
|
927
|
-
|
|
928
|
-
|
|
1226
|
+
.bg-washed-yellow { background-color: #fffceb; }
|
|
1227
|
+
.bg-washed-red { background-color: #ffdfdf; }
|
|
1228
|
+
/*
|
|
1229
|
+
|
|
1230
|
+
SKINS:PSEUDO
|
|
1231
|
+
|
|
1232
|
+
Customize the color of an element when
|
|
1233
|
+
it is focused or hovered over.
|
|
1234
|
+
|
|
1235
|
+
*/
|
|
929
1236
|
.hover-black:hover { color: #000; }
|
|
1237
|
+
.hover-black:focus { color: #000; }
|
|
930
1238
|
.hover-near-black:hover { color: #111; }
|
|
1239
|
+
.hover-near-black:focus { color: #111; }
|
|
931
1240
|
.hover-dark-gray:hover { color: #333; }
|
|
1241
|
+
.hover-dark-gray:focus { color: #333; }
|
|
932
1242
|
.hover-mid-gray:hover { color: #555; }
|
|
1243
|
+
.hover-mid-gray:focus { color: #555; }
|
|
933
1244
|
.hover-gray:hover { color: #777; }
|
|
1245
|
+
.hover-gray:focus { color: #777; }
|
|
934
1246
|
.hover-silver:hover { color: #999; }
|
|
1247
|
+
.hover-silver:focus { color: #999; }
|
|
935
1248
|
.hover-light-silver:hover { color: #aaa; }
|
|
1249
|
+
.hover-light-silver:focus { color: #aaa; }
|
|
936
1250
|
.hover-moon-gray:hover { color: #ccc; }
|
|
1251
|
+
.hover-moon-gray:focus { color: #ccc; }
|
|
937
1252
|
.hover-light-gray:hover { color: #eee; }
|
|
1253
|
+
.hover-light-gray:focus { color: #eee; }
|
|
938
1254
|
.hover-near-white:hover { color: #f4f4f4; }
|
|
1255
|
+
.hover-near-white:focus { color: #f4f4f4; }
|
|
939
1256
|
.hover-white:hover { color: #fff; }
|
|
1257
|
+
.hover-white:focus { color: #fff; }
|
|
1258
|
+
.hover-black-90:hover { color: rgba( 0, 0, 0, .9 ); }
|
|
1259
|
+
.hover-black-90:focus { color: rgba( 0, 0, 0, .9 ); }
|
|
1260
|
+
.hover-black-80:hover { color: rgba( 0, 0, 0, .8 ); }
|
|
1261
|
+
.hover-black-80:focus { color: rgba( 0, 0, 0, .8 ); }
|
|
1262
|
+
.hover-black-70:hover { color: rgba( 0, 0, 0, .7 ); }
|
|
1263
|
+
.hover-black-70:focus { color: rgba( 0, 0, 0, .7 ); }
|
|
1264
|
+
.hover-black-60:hover { color: rgba( 0, 0, 0, .6 ); }
|
|
1265
|
+
.hover-black-60:focus { color: rgba( 0, 0, 0, .6 ); }
|
|
1266
|
+
.hover-black-50:hover { color: rgba( 0, 0, 0, .5 ); }
|
|
1267
|
+
.hover-black-50:focus { color: rgba( 0, 0, 0, .5 ); }
|
|
1268
|
+
.hover-black-40:hover { color: rgba( 0, 0, 0, .4 ); }
|
|
1269
|
+
.hover-black-40:focus { color: rgba( 0, 0, 0, .4 ); }
|
|
1270
|
+
.hover-black-30:hover { color: rgba( 0, 0, 0, .3 ); }
|
|
1271
|
+
.hover-black-30:focus { color: rgba( 0, 0, 0, .3 ); }
|
|
1272
|
+
.hover-black-20:hover { color: rgba( 0, 0, 0, .2 ); }
|
|
1273
|
+
.hover-black-20:focus { color: rgba( 0, 0, 0, .2 ); }
|
|
1274
|
+
.hover-black-10:hover { color: rgba( 0, 0, 0, .1 ); }
|
|
1275
|
+
.hover-black-10:focus { color: rgba( 0, 0, 0, .1 ); }
|
|
1276
|
+
.hover-white-90:hover { color: rgba( 255, 255, 255, .9 ); }
|
|
1277
|
+
.hover-white-90:focus { color: rgba( 255, 255, 255, .9 ); }
|
|
1278
|
+
.hover-white-80:hover { color: rgba( 255, 255, 255, .8 ); }
|
|
1279
|
+
.hover-white-80:focus { color: rgba( 255, 255, 255, .8 ); }
|
|
1280
|
+
.hover-white-70:hover { color: rgba( 255, 255, 255, .7 ); }
|
|
1281
|
+
.hover-white-70:focus { color: rgba( 255, 255, 255, .7 ); }
|
|
1282
|
+
.hover-white-60:hover { color: rgba( 255, 255, 255, .6 ); }
|
|
1283
|
+
.hover-white-60:focus { color: rgba( 255, 255, 255, .6 ); }
|
|
1284
|
+
.hover-white-50:hover { color: rgba( 255, 255, 255, .5 ); }
|
|
1285
|
+
.hover-white-50:focus { color: rgba( 255, 255, 255, .5 ); }
|
|
1286
|
+
.hover-white-40:hover { color: rgba( 255, 255, 255, .4 ); }
|
|
1287
|
+
.hover-white-40:focus { color: rgba( 255, 255, 255, .4 ); }
|
|
1288
|
+
.hover-white-30:hover { color: rgba( 255, 255, 255, .3 ); }
|
|
1289
|
+
.hover-white-30:focus { color: rgba( 255, 255, 255, .3 ); }
|
|
1290
|
+
.hover-white-20:hover { color: rgba( 255, 255, 255, .2 ); }
|
|
1291
|
+
.hover-white-20:focus { color: rgba( 255, 255, 255, .2 ); }
|
|
1292
|
+
.hover-white-10:hover { color: rgba( 255, 255, 255, .1 ); }
|
|
1293
|
+
.hover-white-10:focus { color: rgba( 255, 255, 255, .1 ); }
|
|
940
1294
|
.hover-bg-black:hover { background-color: #000; }
|
|
1295
|
+
.hover-bg-black:focus { background-color: #000; }
|
|
941
1296
|
.hover-bg-near-black:hover { background-color: #111; }
|
|
1297
|
+
.hover-bg-near-black:focus { background-color: #111; }
|
|
942
1298
|
.hover-bg-dark-gray:hover { background-color: #333; }
|
|
1299
|
+
.hover-bg-dark-gray:focus { background-color: #333; }
|
|
1300
|
+
.hover-bg-dark-gray:focus { background-color: #555; }
|
|
943
1301
|
.hover-bg-mid-gray:hover { background-color: #555; }
|
|
944
1302
|
.hover-bg-gray:hover { background-color: #777; }
|
|
1303
|
+
.hover-bg-gray:focus { background-color: #777; }
|
|
945
1304
|
.hover-bg-silver:hover { background-color: #999; }
|
|
1305
|
+
.hover-bg-silver:focus { background-color: #999; }
|
|
946
1306
|
.hover-bg-light-silver:hover { background-color: #aaa; }
|
|
1307
|
+
.hover-bg-light-silver:focus { background-color: #aaa; }
|
|
947
1308
|
.hover-bg-moon-gray:hover { background-color: #ccc; }
|
|
1309
|
+
.hover-bg-moon-gray:focus { background-color: #ccc; }
|
|
948
1310
|
.hover-bg-light-gray:hover { background-color: #eee; }
|
|
1311
|
+
.hover-bg-light-gray:focus { background-color: #eee; }
|
|
949
1312
|
.hover-bg-near-white:hover { background-color: #f4f4f4; }
|
|
1313
|
+
.hover-bg-near-white:focus { background-color: #f4f4f4; }
|
|
950
1314
|
.hover-bg-white:hover { background-color: #fff; }
|
|
1315
|
+
.hover-bg-white:focus { background-color: #fff; }
|
|
951
1316
|
.hover-bg-transparent:hover { background-color: transparent; }
|
|
952
|
-
.hover-bg-
|
|
953
|
-
.hover-bg-
|
|
954
|
-
.hover-bg-
|
|
955
|
-
.hover-bg-
|
|
956
|
-
.hover-bg-
|
|
957
|
-
.hover-bg-
|
|
958
|
-
.hover-bg-
|
|
959
|
-
.hover-bg-
|
|
960
|
-
.hover-bg-
|
|
961
|
-
.hover-bg-
|
|
962
|
-
.hover-bg-
|
|
963
|
-
.hover-bg-
|
|
1317
|
+
.hover-bg-transparent:focus { background-color: transparent; }
|
|
1318
|
+
.hover-bg-black-90:hover { color: rgba( 0, 0, 0, .9 ); }
|
|
1319
|
+
.hover-bg-black-90:focus { color: rgba( 0, 0, 0, .9 ); }
|
|
1320
|
+
.hover-bg-black-80:hover { color: rgba( 0, 0, 0, .8 ); }
|
|
1321
|
+
.hover-bg-black-80:focus { color: rgba( 0, 0, 0, .8 ); }
|
|
1322
|
+
.hover-bg-black-70:hover { color: rgba( 0, 0, 0, .7 ); }
|
|
1323
|
+
.hover-bg-black-70:focus { color: rgba( 0, 0, 0, .7 ); }
|
|
1324
|
+
.hover-bg-black-60:hover { color: rgba( 0, 0, 0, .6 ); }
|
|
1325
|
+
.hover-bg-black-60:focus { color: rgba( 0, 0, 0, .6 ); }
|
|
1326
|
+
.hover-bg-black-50:hover { color: rgba( 0, 0, 0, .5 ); }
|
|
1327
|
+
.hover-bg-black-50:focus { color: rgba( 0, 0, 0, .5 ); }
|
|
1328
|
+
.hover-bg-black-40:hover { color: rgba( 0, 0, 0, .4 ); }
|
|
1329
|
+
.hover-bg-black-40:focus { color: rgba( 0, 0, 0, .4 ); }
|
|
1330
|
+
.hover-bg-black-30:hover { color: rgba( 0, 0, 0, .3 ); }
|
|
1331
|
+
.hover-bg-black-30:focus { color: rgba( 0, 0, 0, .3 ); }
|
|
1332
|
+
.hover-bg-black-20:hover { color: rgba( 0, 0, 0, .2 ); }
|
|
1333
|
+
.hover-bg-black-20:focus { color: rgba( 0, 0, 0, .2 ); }
|
|
1334
|
+
.hover-bg-black-10:hover { color: rgba( 0, 0, 0, .1 ); }
|
|
1335
|
+
.hover-bg-black-10:focus { color: rgba( 0, 0, 0, .1 ); }
|
|
1336
|
+
.hover-bg-white-90:hover { color: rgba( 255, 255, 255, .9 ); }
|
|
1337
|
+
.hover-bg-white-90:focus { color: rgba( 255, 255, 255, .9 ); }
|
|
1338
|
+
.hover-bg-white-80:hover { color: rgba( 255, 255, 255, .8 ); }
|
|
1339
|
+
.hover-bg-white-80:focus { color: rgba( 255, 255, 255, .8 ); }
|
|
1340
|
+
.hover-bg-white-70:hover { color: rgba( 255, 255, 255, .7 ); }
|
|
1341
|
+
.hover-bg-white-70:focus { color: rgba( 255, 255, 255, .7 ); }
|
|
1342
|
+
.hover-bg-white-60:hover { color: rgba( 255, 255, 255, .6 ); }
|
|
1343
|
+
.hover-bg-white-60:focus { color: rgba( 255, 255, 255, .6 ); }
|
|
1344
|
+
.hover-bg-white-50:hover { color: rgba( 255, 255, 255, .5 ); }
|
|
1345
|
+
.hover-bg-white-50:focus { color: rgba( 255, 255, 255, .5 ); }
|
|
1346
|
+
.hover-bg-white-40:hover { color: rgba( 255, 255, 255, .4 ); }
|
|
1347
|
+
.hover-bg-white-40:focus { color: rgba( 255, 255, 255, .4 ); }
|
|
1348
|
+
.hover-bg-white-30:hover { color: rgba( 255, 255, 255, .3 ); }
|
|
1349
|
+
.hover-bg-white-30:focus { color: rgba( 255, 255, 255, .3 ); }
|
|
1350
|
+
.hover-bg-white-20:hover { color: rgba( 255, 255, 255, .2 ); }
|
|
1351
|
+
.hover-bg-white-20:focus { color: rgba( 255, 255, 255, .2 ); }
|
|
1352
|
+
.hover-bg-white-10:hover { color: rgba( 255, 255, 255, .1 ); }
|
|
1353
|
+
.hover-bg-white-10:focus { color: rgba( 255, 255, 255, .1 ); }
|
|
1354
|
+
.hover-dark-red:hover { color: #e7040f; }
|
|
1355
|
+
.hover-dark-red:focus { color: #e7040f; }
|
|
1356
|
+
.hover-red:hover { color: #ff4136; }
|
|
1357
|
+
.hover-red:focus { color: #ff4136; }
|
|
1358
|
+
.hover-light-red:hover { color: #ff725c; }
|
|
1359
|
+
.hover-light-red:focus { color: #ff725c; }
|
|
1360
|
+
.hover-orange:hover { color: #ff6300; }
|
|
1361
|
+
.hover-orange:focus { color: #ff6300; }
|
|
1362
|
+
.hover-gold:hover { color: #ffb700; }
|
|
1363
|
+
.hover-gold:focus { color: #ffb700; }
|
|
1364
|
+
.hover-yellow:hover { color: #ffd700; }
|
|
1365
|
+
.hover-yellow:focus { color: #ffd700; }
|
|
1366
|
+
.hover-light-yellow:hover { color: #fbf1a9; }
|
|
1367
|
+
.hover-light-yellow:focus { color: #fbf1a9; }
|
|
1368
|
+
.hover-purple:hover { color: #5e2ca5; }
|
|
1369
|
+
.hover-purple:focus { color: #5e2ca5; }
|
|
1370
|
+
.hover-light-purple:hover { color: #a463f2; }
|
|
1371
|
+
.hover-light-purple:focus { color: #a463f2; }
|
|
1372
|
+
.hover-dark-pink:hover { color: #d5008f; }
|
|
1373
|
+
.hover-dark-pink:focus { color: #d5008f; }
|
|
1374
|
+
.hover-hot-pink:hover { color: #ff41b4; }
|
|
1375
|
+
.hover-hot-pink:focus { color: #ff41b4; }
|
|
1376
|
+
.hover-pink:hover { color: #ff80cc; }
|
|
1377
|
+
.hover-pink:focus { color: #ff80cc; }
|
|
1378
|
+
.hover-light-pink:hover { color: #ffa3d7; }
|
|
1379
|
+
.hover-light-pink:focus { color: #ffa3d7; }
|
|
1380
|
+
.hover-dark-green:hover { color: #137752; }
|
|
1381
|
+
.hover-dark-green:focus { color: #137752; }
|
|
1382
|
+
.hover-green:hover { color: #19a974; }
|
|
1383
|
+
.hover-green:focus { color: #19a974; }
|
|
1384
|
+
.hover-light-green:hover { color: #9eebcf; }
|
|
1385
|
+
.hover-light-green:focus { color: #9eebcf; }
|
|
1386
|
+
.hover-navy:hover { color: #001b44; }
|
|
1387
|
+
.hover-navy:focus { color: #001b44; }
|
|
1388
|
+
.hover-dark-blue:hover { color: #00449e; }
|
|
1389
|
+
.hover-dark-blue:focus { color: #00449e; }
|
|
1390
|
+
.hover-blue:hover { color: #357edd; }
|
|
1391
|
+
.hover-blue:focus { color: #357edd; }
|
|
1392
|
+
.hover-light-blue:hover { color: #96ccff; }
|
|
1393
|
+
.hover-light-blue:focus { color: #96ccff; }
|
|
1394
|
+
.hover-lightest-blue:hover { color: #cdecff; }
|
|
1395
|
+
.hover-lightest-blue:focus { color: #cdecff; }
|
|
1396
|
+
.hover-washed-blue:hover { color: #f6fffe; }
|
|
1397
|
+
.hover-washed-blue:focus { color: #f6fffe; }
|
|
1398
|
+
.hover-washed-green:hover { color: #e8fdf5; }
|
|
1399
|
+
.hover-washed-green:focus { color: #e8fdf5; }
|
|
1400
|
+
.hover-washed-yellow:hover { color: #fffceb; }
|
|
1401
|
+
.hover-washed-yellow:focus { color: #fffceb; }
|
|
1402
|
+
.hover-washed-red:hover { color: #ffdfdf; }
|
|
1403
|
+
.hover-washed-red:focus { color: #ffdfdf; }
|
|
1404
|
+
.hover-bg-dark-red:hover { background-color: #e7040f; }
|
|
1405
|
+
.hover-bg-dark-red:focus { background-color: #e7040f; }
|
|
1406
|
+
.hover-bg-red:hover { background-color: #ff4136; }
|
|
1407
|
+
.hover-bg-red:focus { background-color: #ff4136; }
|
|
1408
|
+
.hover-bg-light-red:hover { background-color: #ff725c; }
|
|
1409
|
+
.hover-bg-light-red:focus { background-color: #ff725c; }
|
|
1410
|
+
.hover-bg-orange:hover { background-color: #ff6300; }
|
|
1411
|
+
.hover-bg-orange:focus { background-color: #ff6300; }
|
|
1412
|
+
.hover-bg-gold:hover { background-color: #ffb700; }
|
|
1413
|
+
.hover-bg-gold:focus { background-color: #ffb700; }
|
|
1414
|
+
.hover-bg-yellow:hover { background-color: #ffd700; }
|
|
1415
|
+
.hover-bg-yellow:focus { background-color: #ffd700; }
|
|
1416
|
+
.hover-bg-light-yellow:hover { background-color: #fbf1a9; }
|
|
1417
|
+
.hover-bg-light-yellow:focus { background-color: #fbf1a9; }
|
|
1418
|
+
.hover-bg-purple:hover { background-color: #5e2ca5; }
|
|
1419
|
+
.hover-bg-purple:focus { background-color: #5e2ca5; }
|
|
1420
|
+
.hover-bg-light-purple:hover { background-color: #a463f2; }
|
|
1421
|
+
.hover-bg-light-purple:focus { background-color: #a463f2; }
|
|
1422
|
+
.hover-bg-dark-pink:hover { background-color: #d5008f; }
|
|
1423
|
+
.hover-bg-dark-pink:focus { background-color: #d5008f; }
|
|
1424
|
+
.hover-bg-hot-pink:hover { background-color: #ff41b4; }
|
|
1425
|
+
.hover-bg-hot-pink:focus { background-color: #ff41b4; }
|
|
1426
|
+
.hover-bg-pink:hover { background-color: #ff80cc; }
|
|
1427
|
+
.hover-bg-pink:focus { background-color: #ff80cc; }
|
|
1428
|
+
.hover-bg-light-pink:hover { background-color: #ffa3d7; }
|
|
1429
|
+
.hover-bg-light-pink:focus { background-color: #ffa3d7; }
|
|
1430
|
+
.hover-bg-dark-green:hover { background-color: #137752; }
|
|
1431
|
+
.hover-bg-dark-green:focus { background-color: #137752; }
|
|
1432
|
+
.hover-bg-green:hover { background-color: #19a974; }
|
|
1433
|
+
.hover-bg-green:focus { background-color: #19a974; }
|
|
1434
|
+
.hover-bg-light-green:hover { background-color: #9eebcf; }
|
|
1435
|
+
.hover-bg-light-green:focus { background-color: #9eebcf; }
|
|
964
1436
|
.hover-bg-navy:hover { background-color: #001b44; }
|
|
1437
|
+
.hover-bg-navy:focus { background-color: #001b44; }
|
|
965
1438
|
.hover-bg-dark-blue:hover { background-color: #00449e; }
|
|
1439
|
+
.hover-bg-dark-blue:focus { background-color: #00449e; }
|
|
966
1440
|
.hover-bg-blue:hover { background-color: #357edd; }
|
|
1441
|
+
.hover-bg-blue:focus { background-color: #357edd; }
|
|
967
1442
|
.hover-bg-light-blue:hover { background-color: #96ccff; }
|
|
1443
|
+
.hover-bg-light-blue:focus { background-color: #96ccff; }
|
|
968
1444
|
.hover-bg-lightest-blue:hover { background-color: #cdecff; }
|
|
1445
|
+
.hover-bg-lightest-blue:focus { background-color: #cdecff; }
|
|
969
1446
|
.hover-bg-washed-blue:hover { background-color: #f6fffe; }
|
|
1447
|
+
.hover-bg-washed-blue:focus { background-color: #f6fffe; }
|
|
970
1448
|
.hover-bg-washed-green:hover { background-color: #e8fdf5; }
|
|
971
|
-
.hover-bg-washed-
|
|
972
|
-
.hover-bg-
|
|
973
|
-
.hover-bg-
|
|
974
|
-
.hover-bg-
|
|
1449
|
+
.hover-bg-washed-green:focus { background-color: #e8fdf5; }
|
|
1450
|
+
.hover-bg-washed-yellow:hover { background-color: #fffceb; }
|
|
1451
|
+
.hover-bg-washed-yellow:focus { background-color: #fffceb; }
|
|
1452
|
+
.hover-bg-washed-red:hover { background-color: #ffdfdf; }
|
|
1453
|
+
.hover-bg-washed-red:focus { background-color: #ffdfdf; }
|
|
975
1454
|
/* Variables */
|
|
976
|
-
/* Spacing Scale - based on a ratio of 1:2 */
|
|
977
|
-
/* Media Queries */
|
|
978
1455
|
/*
|
|
979
1456
|
SPACING
|
|
1457
|
+
Docs: http://tachyons.io/docs/layout/spacing/
|
|
980
1458
|
|
|
981
1459
|
An eight step powers of two scale ranging from 0 to 16rem.
|
|
982
|
-
|
|
983
|
-
|
|
984
|
-
|
|
985
|
-
|
|
986
|
-
|
|
987
|
-
|
|
988
|
-
|
|
989
|
-
|
|
990
|
-
|
|
991
|
-
|
|
992
|
-
|
|
993
|
-
|
|
994
|
-
|
|
995
|
-
|
|
996
|
-
|
|
997
|
-
|
|
998
|
-
|
|
999
|
-
|
|
1000
|
-
|
|
1001
|
-
|
|
1002
|
-
|
|
1003
|
-
|
|
1004
|
-
|
|
1460
|
+
|
|
1461
|
+
Base:
|
|
1462
|
+
p = padding
|
|
1463
|
+
m = margin
|
|
1464
|
+
|
|
1465
|
+
Modifiers:
|
|
1466
|
+
a = all
|
|
1467
|
+
h = horizontal
|
|
1468
|
+
v = vertical
|
|
1469
|
+
t = top
|
|
1470
|
+
r = right
|
|
1471
|
+
b = bottom
|
|
1472
|
+
l = left
|
|
1473
|
+
|
|
1474
|
+
0 = none
|
|
1475
|
+
1 = 1st step in spacing scale
|
|
1476
|
+
2 = 2nd step in spacing scale
|
|
1477
|
+
3 = 3rd step in spacing scale
|
|
1478
|
+
4 = 4th step in spacing scale
|
|
1479
|
+
5 = 5th step in spacing scale
|
|
1480
|
+
6 = 6th step in spacing scale
|
|
1481
|
+
7 = 7th step in spacing scale
|
|
1482
|
+
|
|
1483
|
+
Media Query Extensions:
|
|
1484
|
+
-ns = not-small
|
|
1485
|
+
-m = medium
|
|
1486
|
+
-l = large
|
|
1005
1487
|
|
|
1006
1488
|
*/
|
|
1007
1489
|
.pa0 { padding: 0; }
|
|
@@ -1116,19 +1598,91 @@ code, .code { font-family: Consolas, monaco, monospace; }
|
|
|
1116
1598
|
.mh5 { margin-left: 4rem; margin-right: 4rem; }
|
|
1117
1599
|
.mh6 { margin-left: 8rem; margin-right: 8rem; }
|
|
1118
1600
|
.mh7 { margin-left: 16rem; margin-right: 16rem; }
|
|
1601
|
+
/*
|
|
1602
|
+
NEGATIVE MARGINS
|
|
1603
|
+
|
|
1604
|
+
Base:
|
|
1605
|
+
n = negative
|
|
1606
|
+
|
|
1607
|
+
Modifiers:
|
|
1608
|
+
a = all
|
|
1609
|
+
t = top
|
|
1610
|
+
r = right
|
|
1611
|
+
b = bottom
|
|
1612
|
+
l = left
|
|
1613
|
+
|
|
1614
|
+
1 = 1st step in spacing scale
|
|
1615
|
+
2 = 2nd step in spacing scale
|
|
1616
|
+
3 = 3rd step in spacing scale
|
|
1617
|
+
4 = 4th step in spacing scale
|
|
1618
|
+
5 = 5th step in spacing scale
|
|
1619
|
+
6 = 6th step in spacing scale
|
|
1620
|
+
7 = 7th step in spacing scale
|
|
1621
|
+
|
|
1622
|
+
Media Query Extensions:
|
|
1623
|
+
-ns = not-small
|
|
1624
|
+
-m = medium
|
|
1625
|
+
-l = large
|
|
1626
|
+
|
|
1627
|
+
*/
|
|
1628
|
+
.na1 { margin: -.25rem; }
|
|
1629
|
+
.na2 { margin: -.5rem; }
|
|
1630
|
+
.na3 { margin: -1rem; }
|
|
1631
|
+
.na4 { margin: -2rem; }
|
|
1632
|
+
.na5 { margin: -4rem; }
|
|
1633
|
+
.na6 { margin: -8rem; }
|
|
1634
|
+
.na7 { margin: -16rem; }
|
|
1635
|
+
.nl1 { margin-left: -.25rem; }
|
|
1636
|
+
.nl2 { margin-left: -.5rem; }
|
|
1637
|
+
.nl3 { margin-left: -1rem; }
|
|
1638
|
+
.nl4 { margin-left: -2rem; }
|
|
1639
|
+
.nl5 { margin-left: -4rem; }
|
|
1640
|
+
.nl6 { margin-left: -8rem; }
|
|
1641
|
+
.nl7 { margin-left: -16rem; }
|
|
1642
|
+
.nr1 { margin-right: -.25rem; }
|
|
1643
|
+
.nr2 { margin-right: -.5rem; }
|
|
1644
|
+
.nr3 { margin-right: -1rem; }
|
|
1645
|
+
.nr4 { margin-right: -2rem; }
|
|
1646
|
+
.nr5 { margin-right: -4rem; }
|
|
1647
|
+
.nr6 { margin-right: -8rem; }
|
|
1648
|
+
.nr7 { margin-right: -16rem; }
|
|
1649
|
+
.nb1 { margin-bottom: -.25rem; }
|
|
1650
|
+
.nb2 { margin-bottom: -.5rem; }
|
|
1651
|
+
.nb3 { margin-bottom: -1rem; }
|
|
1652
|
+
.nb4 { margin-bottom: -2rem; }
|
|
1653
|
+
.nb5 { margin-bottom: -4rem; }
|
|
1654
|
+
.nb6 { margin-bottom: -8rem; }
|
|
1655
|
+
.nb7 { margin-bottom: -16rem; }
|
|
1656
|
+
.nt1 { margin-top: -.25rem; }
|
|
1657
|
+
.nt2 { margin-top: -.5rem; }
|
|
1658
|
+
.nt3 { margin-top: -1rem; }
|
|
1659
|
+
.nt4 { margin-top: -2rem; }
|
|
1660
|
+
.nt5 { margin-top: -4rem; }
|
|
1661
|
+
.nt6 { margin-top: -8rem; }
|
|
1662
|
+
.nt7 { margin-top: -16rem; }
|
|
1119
1663
|
/*
|
|
1120
1664
|
|
|
1121
1665
|
TABLES
|
|
1666
|
+
Docs: http://tachyons.io/docs/elements/tables/
|
|
1122
1667
|
|
|
1123
1668
|
*/
|
|
1124
1669
|
.collapse { border-collapse: collapse; border-spacing: 0; }
|
|
1125
|
-
.striped--
|
|
1670
|
+
.striped--light-silver:nth-child(odd) { background-color: #aaa; }
|
|
1126
1671
|
.striped--moon-gray:nth-child(odd) { background-color: #ccc; }
|
|
1127
1672
|
.striped--light-gray:nth-child(odd) { background-color: #eee; }
|
|
1128
1673
|
.striped--near-white:nth-child(odd) { background-color: #f4f4f4; }
|
|
1674
|
+
.stripe-light:nth-child(odd) { background-color: rgba( 255, 255, 255, .1 ); }
|
|
1675
|
+
.stripe-dark:nth-child(odd) { background-color: rgba( 0, 0, 0, .1 ); }
|
|
1129
1676
|
/*
|
|
1130
1677
|
|
|
1131
1678
|
TEXT DECORATION
|
|
1679
|
+
Docs: http://tachyons.io/docs/typography/text-decoration/
|
|
1680
|
+
|
|
1681
|
+
|
|
1682
|
+
Media Query Extensions:
|
|
1683
|
+
-ns = not-small
|
|
1684
|
+
-m = medium
|
|
1685
|
+
-l = large
|
|
1132
1686
|
|
|
1133
1687
|
*/
|
|
1134
1688
|
.strike { text-decoration: line-through; }
|
|
@@ -1137,6 +1691,20 @@ code, .code { font-family: Consolas, monaco, monospace; }
|
|
|
1137
1691
|
/*
|
|
1138
1692
|
|
|
1139
1693
|
TEXT ALIGN
|
|
1694
|
+
Docs: http://tachyons.io/docs/typography/text-align/
|
|
1695
|
+
|
|
1696
|
+
Base
|
|
1697
|
+
t = text-align
|
|
1698
|
+
|
|
1699
|
+
Modifiers
|
|
1700
|
+
l = left
|
|
1701
|
+
r = right
|
|
1702
|
+
c = center
|
|
1703
|
+
|
|
1704
|
+
Media Query Extensions:
|
|
1705
|
+
-ns = not-small
|
|
1706
|
+
-m = medium
|
|
1707
|
+
-l = large
|
|
1140
1708
|
|
|
1141
1709
|
*/
|
|
1142
1710
|
.tl { text-align: left; }
|
|
@@ -1145,6 +1713,21 @@ code, .code { font-family: Consolas, monaco, monospace; }
|
|
|
1145
1713
|
/*
|
|
1146
1714
|
|
|
1147
1715
|
TEXT TRANSFORM
|
|
1716
|
+
Docs: http://tachyons.io/docs/typography/text-transform/
|
|
1717
|
+
|
|
1718
|
+
Base:
|
|
1719
|
+
tt = text-transform
|
|
1720
|
+
|
|
1721
|
+
Modifiers
|
|
1722
|
+
c = capitalize
|
|
1723
|
+
l = lowercase
|
|
1724
|
+
u = uppercase
|
|
1725
|
+
n = none
|
|
1726
|
+
|
|
1727
|
+
Media Query Extensions:
|
|
1728
|
+
-ns = not-small
|
|
1729
|
+
-m = medium
|
|
1730
|
+
-l = large
|
|
1148
1731
|
|
|
1149
1732
|
*/
|
|
1150
1733
|
.ttc { text-transform: capitalize; }
|
|
@@ -1154,9 +1737,30 @@ code, .code { font-family: Consolas, monaco, monospace; }
|
|
|
1154
1737
|
/*
|
|
1155
1738
|
|
|
1156
1739
|
TYPE SCALE
|
|
1740
|
+
Docs: http://tachyons.io/docs/typography/scale/
|
|
1157
1741
|
|
|
1742
|
+
Base:
|
|
1743
|
+
f = font-size
|
|
1744
|
+
|
|
1745
|
+
Modifiers
|
|
1746
|
+
1 = 1st step in size scale
|
|
1747
|
+
2 = 2nd step in size scale
|
|
1748
|
+
3 = 3rd step in size scale
|
|
1749
|
+
4 = 4th step in size scale
|
|
1750
|
+
5 = 5th step in size scale
|
|
1751
|
+
6 = 6th step in size scale
|
|
1752
|
+
|
|
1753
|
+
Media Query Extensions:
|
|
1754
|
+
-ns = not-small
|
|
1755
|
+
-m = medium
|
|
1756
|
+
-l = large
|
|
1158
1757
|
*/
|
|
1159
|
-
/*
|
|
1758
|
+
/*
|
|
1759
|
+
* For Hero/Marketing Titles
|
|
1760
|
+
*
|
|
1761
|
+
* These generally are too large for mobile
|
|
1762
|
+
* so be careful using them on smaller screens.
|
|
1763
|
+
* */
|
|
1160
1764
|
.f-6, .f-headline { font-size: 6rem; }
|
|
1161
1765
|
.f-5, .f-subheadline { font-size: 5rem; }
|
|
1162
1766
|
/* Type Scale */
|
|
@@ -1169,6 +1773,12 @@ code, .code { font-family: Consolas, monaco, monospace; }
|
|
|
1169
1773
|
/*
|
|
1170
1774
|
|
|
1171
1775
|
TYPOGRAPHY
|
|
1776
|
+
http://tachyons.io/docs/typography/measure/
|
|
1777
|
+
|
|
1778
|
+
Media Query Extensions:
|
|
1779
|
+
-ns = not-small
|
|
1780
|
+
-m = medium
|
|
1781
|
+
-l = large
|
|
1172
1782
|
|
|
1173
1783
|
*/
|
|
1174
1784
|
/* Measure is limited to ~66 characters */
|
|
@@ -1187,29 +1797,17 @@ code, .code { font-family: Consolas, monaco, monospace; }
|
|
|
1187
1797
|
UTILITIES
|
|
1188
1798
|
|
|
1189
1799
|
*/
|
|
1190
|
-
/* This is for fluid media that is embedded from third party sites like youtube, vimeo etc.
|
|
1191
|
-
* Wrap the outer element in aspect-ratio and then extend it with the desired ratio i.e
|
|
1192
|
-
* Make sure there are no height and width attributes on the embedded media.
|
|
1193
|
-
* Adapted from: https://github.com/suitcss/components-flex-embed
|
|
1194
|
-
*
|
|
1195
|
-
* Example:
|
|
1196
|
-
*
|
|
1197
|
-
* <div class="aspect-ratio aspect-ratio--16x9">
|
|
1198
|
-
* <iframe class="aspect-ratio--object"></iframe>
|
|
1199
|
-
* </div>
|
|
1200
|
-
*
|
|
1201
|
-
* */
|
|
1202
|
-
.aspect-ratio { height: 0; position: relative; }
|
|
1203
|
-
.aspect-ratio--16x9 { padding-bottom: 56.25%; }
|
|
1204
|
-
.aspect-ratio--4x3 { padding-bottom: 75%; }
|
|
1205
|
-
.aspect-ratio--8x5 { padding-bottom: 62.5%; }
|
|
1206
|
-
.aspect-ratio--object { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; z-index: 100; }
|
|
1207
1800
|
.overflow-container { overflow-y: scroll; }
|
|
1208
1801
|
.center { margin-right: auto; margin-left: auto; }
|
|
1209
1802
|
/*
|
|
1210
1803
|
|
|
1211
1804
|
VISIBILITY
|
|
1212
1805
|
|
|
1806
|
+
Media Query Extensions:
|
|
1807
|
+
-ns = not-small
|
|
1808
|
+
-m = medium
|
|
1809
|
+
-l = large
|
|
1810
|
+
|
|
1213
1811
|
*/
|
|
1214
1812
|
/*
|
|
1215
1813
|
Text that is hidden but accessible
|
|
@@ -1220,6 +1818,11 @@ code, .code { font-family: Consolas, monaco, monospace; }
|
|
|
1220
1818
|
|
|
1221
1819
|
WHITE SPACE
|
|
1222
1820
|
|
|
1821
|
+
Media Query Extensions:
|
|
1822
|
+
-ns = not-small
|
|
1823
|
+
-m = medium
|
|
1824
|
+
-l = large
|
|
1825
|
+
|
|
1223
1826
|
*/
|
|
1224
1827
|
.ws-normal { white-space: normal; }
|
|
1225
1828
|
.nowrap { white-space: nowrap; }
|
|
@@ -1228,6 +1831,11 @@ code, .code { font-family: Consolas, monaco, monospace; }
|
|
|
1228
1831
|
|
|
1229
1832
|
VERTICAL ALIGN
|
|
1230
1833
|
|
|
1834
|
+
Media Query Extensions:
|
|
1835
|
+
-ns = not-small
|
|
1836
|
+
-m = medium
|
|
1837
|
+
-l = large
|
|
1838
|
+
|
|
1231
1839
|
*/
|
|
1232
1840
|
.v-base { vertical-align: baseline; }
|
|
1233
1841
|
.v-mid { vertical-align: middle; }
|
|
@@ -1236,7 +1844,15 @@ code, .code { font-family: Consolas, monaco, monospace; }
|
|
|
1236
1844
|
/*
|
|
1237
1845
|
|
|
1238
1846
|
HOVER EFFECTS
|
|
1847
|
+
Docs: http://tachyons.io/docs/themes/hovers/
|
|
1239
1848
|
|
|
1849
|
+
- Dim
|
|
1850
|
+
- Glow
|
|
1851
|
+
- Hide Child
|
|
1852
|
+
- Underline text
|
|
1853
|
+
- Grow
|
|
1854
|
+
- Pointer
|
|
1855
|
+
- Shadow
|
|
1240
1856
|
|
|
1241
1857
|
*/
|
|
1242
1858
|
/*
|
|
@@ -1247,6 +1863,13 @@ code, .code { font-family: Consolas, monaco, monospace; }
|
|
|
1247
1863
|
.dim { opacity: 1; -webkit-transition: opacity .15s ease-in; transition: opacity .15s ease-in; }
|
|
1248
1864
|
.dim:hover, .dim:focus { opacity: .5; -webkit-transition: opacity .15s ease-in; transition: opacity .15s ease-in; }
|
|
1249
1865
|
.dim:active { opacity: .8; -webkit-transition: opacity .15s ease-out; transition: opacity .15s ease-out; }
|
|
1866
|
+
/*
|
|
1867
|
+
|
|
1868
|
+
Animate opacity to 100% on hover by adding the glow class.
|
|
1869
|
+
|
|
1870
|
+
*/
|
|
1871
|
+
.glow { -webkit-transition: opacity .15s ease-in; transition: opacity .15s ease-in; }
|
|
1872
|
+
.glow:hover, .glow:focus { opacity: 1; -webkit-transition: opacity .15s ease-in; transition: opacity .15s ease-in; }
|
|
1250
1873
|
/*
|
|
1251
1874
|
|
|
1252
1875
|
Hide child & reveal on hover:
|
|
@@ -1266,14 +1889,91 @@ code, .code { font-family: Consolas, monaco, monospace; }
|
|
|
1266
1889
|
.underline-hover:hover, .underline-hover:focus { text-decoration: underline; }
|
|
1267
1890
|
/* Can combine this with overflow-hidden to make background images grow on hover
|
|
1268
1891
|
* even if you are using background-size: cover */
|
|
1269
|
-
.grow { -webkit-transition: -webkit-transform .
|
|
1892
|
+
.grow { -moz-osx-font-smoothing: grayscale; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform: translateZ( 0 ); transform: translateZ( 0 ); -webkit-transition: -webkit-transform .25s ease-out; transition: -webkit-transform .25s ease-out; transition: transform .25s ease-out; transition: transform .25s ease-out, -webkit-transform .25s ease-out; }
|
|
1270
1893
|
.grow:hover, .grow:focus { -webkit-transform: scale( 1.05 ); transform: scale( 1.05 ); }
|
|
1271
|
-
.grow
|
|
1894
|
+
.grow:active { -webkit-transform: scale( .90 ); transform: scale( .90 ); }
|
|
1895
|
+
.grow-large { -moz-osx-font-smoothing: grayscale; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform: translateZ( 0 ); transform: translateZ( 0 ); -webkit-transition: -webkit-transform .25s ease-in-out; transition: -webkit-transform .25s ease-in-out; transition: transform .25s ease-in-out; transition: transform .25s ease-in-out, -webkit-transform .25s ease-in-out; }
|
|
1272
1896
|
.grow-large:hover, .grow-large:focus { -webkit-transform: scale( 1.2 ); transform: scale( 1.2 ); }
|
|
1897
|
+
.grow-large:active { -webkit-transform: scale( .95 ); transform: scale( .95 ); }
|
|
1273
1898
|
/* Add pointer on hover */
|
|
1274
1899
|
.pointer:hover { cursor: pointer; }
|
|
1275
|
-
/*
|
|
1276
|
-
|
|
1900
|
+
/*
|
|
1901
|
+
Add shadow on hover.
|
|
1902
|
+
|
|
1903
|
+
Performant box-shadow animation pattern from
|
|
1904
|
+
http://tobiasahlin.com/blog/how-to-animate-box-shadow/
|
|
1905
|
+
*/
|
|
1906
|
+
.shadow-hover { cursor: pointer; position: relative; -webkit-transition: all .5s cubic-bezier( .165, .84, .44, 1 ); transition: all .5s cubic-bezier( .165, .84, .44, 1 ); }
|
|
1907
|
+
.shadow-hover::after { content: ''; box-shadow: 0 0 16px 2px rgba( 0, 0, 0, .2 ); opacity: 0; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; -webkit-transition: opacity .5s cubic-bezier( .165, .84, .44, 1 ); transition: opacity .5s cubic-bezier( .165, .84, .44, 1 ); }
|
|
1908
|
+
.shadow-hover:hover::after, .shadow-hover:focus::after { opacity: 1; }
|
|
1909
|
+
/* Combine with classes in skins and skins-pseudo for
|
|
1910
|
+
* many different transition possibilities. */
|
|
1911
|
+
.bg-animate, .bg-animate:hover, .bg-animate:focus { -webkit-transition: background-color .15s ease-in-out; transition: background-color .15s ease-in-out; }
|
|
1912
|
+
/*
|
|
1913
|
+
|
|
1914
|
+
Z-INDEX
|
|
1915
|
+
|
|
1916
|
+
Base
|
|
1917
|
+
z = z-index
|
|
1918
|
+
|
|
1919
|
+
Modifiers
|
|
1920
|
+
-0 = literal value 0
|
|
1921
|
+
-1 = literal value 1
|
|
1922
|
+
-2 = literal value 2
|
|
1923
|
+
-3 = literal value 3
|
|
1924
|
+
-4 = literal value 4
|
|
1925
|
+
-5 = literal value 5
|
|
1926
|
+
-999 = literal value 999
|
|
1927
|
+
-9999 = literal value 9999
|
|
1928
|
+
|
|
1929
|
+
-max = largest accepted z-index value as integer
|
|
1930
|
+
|
|
1931
|
+
-inherit = string value inherit
|
|
1932
|
+
-initial = string value initial
|
|
1933
|
+
-unset = string value unset
|
|
1934
|
+
|
|
1935
|
+
MDN: https://developer.mozilla.org/en/docs/Web/CSS/z-index
|
|
1936
|
+
Spec: http://www.w3.org/TR/CSS2/zindex.html
|
|
1937
|
+
Articles:
|
|
1938
|
+
https://philipwalton.com/articles/what-no-one-told-you-about-z-index/
|
|
1939
|
+
|
|
1940
|
+
Tips on extending:
|
|
1941
|
+
There might be a time worth using negative z-index values.
|
|
1942
|
+
Or if you are using tachyons with another project, you might need to
|
|
1943
|
+
adjust these values to suit your needs.
|
|
1944
|
+
|
|
1945
|
+
*/
|
|
1946
|
+
.z-0 { z-index: 0; }
|
|
1947
|
+
.z-1 { z-index: 1; }
|
|
1948
|
+
.z-2 { z-index: 2; }
|
|
1949
|
+
.z-3 { z-index: 3; }
|
|
1950
|
+
.z-4 { z-index: 4; }
|
|
1951
|
+
.z-5 { z-index: 5; }
|
|
1952
|
+
.z-999 { z-index: 999; }
|
|
1953
|
+
.z-9999 { z-index: 9999; }
|
|
1954
|
+
.z-max { z-index: 2147483647; }
|
|
1955
|
+
.z-inherit { z-index: inherit; }
|
|
1956
|
+
.z-initial { z-index: initial; }
|
|
1957
|
+
.z-unset { z-index: unset; }
|
|
1958
|
+
/*
|
|
1959
|
+
|
|
1960
|
+
NESTED
|
|
1961
|
+
Tachyons module for styling nested elements
|
|
1962
|
+
that are generated by a cms.
|
|
1963
|
+
|
|
1964
|
+
*/
|
|
1965
|
+
.nested-copy-line-height p, .nested-copy-line-height ul,
|
|
1966
|
+
.nested-copy-line-height ol { line-height: 1.5; }
|
|
1967
|
+
.nested-headline-line-height h1, .nested-headline-line-height h2,
|
|
1968
|
+
.nested-headline-line-height h3, .nested-headline-line-height h4,
|
|
1969
|
+
.nested-headline-line-height h5, .nested-headline-line-height h6 { line-height: 1.25; }
|
|
1970
|
+
.nested-list-reset ul, .nested-list-reset ol { padding-left: 0; margin-left: 0; list-style-type: none; }
|
|
1971
|
+
.nested-copy-indent p+p { text-indent: 1em; margin-top: 0; margin-bottom: 0; }
|
|
1972
|
+
.nested-copy-seperator p+p { margin-top: 1.5em; }
|
|
1973
|
+
.nested-img img { width: 100%; max-width: 100%; display: block; }
|
|
1974
|
+
.nested-links a { color: #357edd; -webkit-transition: color .15s ease-in; transition: color .15s ease-in; }
|
|
1975
|
+
.nested-links a:hover { color: #96ccff; -webkit-transition: color .15s ease-in; transition: color .15s ease-in; }
|
|
1976
|
+
.nested-links a:focus { color: #96ccff; -webkit-transition: color .15s ease-in; transition: color .15s ease-in; }
|
|
1277
1977
|
/*
|
|
1278
1978
|
|
|
1279
1979
|
STYLES
|
|
@@ -1291,6 +1991,8 @@ code, .code { font-family: Consolas, monaco, monospace; }
|
|
|
1291
1991
|
Grayscale
|
|
1292
1992
|
- Solids
|
|
1293
1993
|
- Transparencies
|
|
1994
|
+
Colors
|
|
1995
|
+
|
|
1294
1996
|
*/
|
|
1295
1997
|
/*
|
|
1296
1998
|
|
|
@@ -1328,17 +2030,55 @@ code, .code { font-family: Consolas, monaco, monospace; }
|
|
|
1328
2030
|
/*
|
|
1329
2031
|
|
|
1330
2032
|
DEBUG CHILDREN
|
|
2033
|
+
Docs: http://tachyons.io/docs/debug/
|
|
1331
2034
|
|
|
1332
2035
|
Just add the debug class to any element to see outlines on its
|
|
1333
2036
|
children.
|
|
1334
2037
|
|
|
1335
2038
|
*/
|
|
1336
2039
|
.debug * { outline: 1px solid gold; }
|
|
1337
|
-
|
|
2040
|
+
.debug-white * { outline: 1px solid white; }
|
|
2041
|
+
.debug-black * { outline: 1px solid black; }
|
|
2042
|
+
/*
|
|
2043
|
+
|
|
2044
|
+
DEBUG GRID
|
|
2045
|
+
http://tachyons.io/docs/debug-grid/
|
|
2046
|
+
|
|
2047
|
+
Can be useful for debugging layout issues
|
|
2048
|
+
or helping to make sure things line up perfectly.
|
|
2049
|
+
Just tack one of these classes onto a parent element.
|
|
2050
|
+
|
|
2051
|
+
*/
|
|
2052
|
+
.debug-grid { background: transparent url( data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTExIDc5LjE1ODMyNSwgMjAxNS8wOS8xMC0wMToxMDoyMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MTRDOTY4N0U2N0VFMTFFNjg2MzZDQjkwNkQ4MjgwMEIiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MTRDOTY4N0Q2N0VFMTFFNjg2MzZDQjkwNkQ4MjgwMEIiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo3NjcyQkQ3NjY3QzUxMUU2QjJCQ0UyNDA4MTAwMjE3MSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo3NjcyQkQ3NzY3QzUxMUU2QjJCQ0UyNDA4MTAwMjE3MSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PsBS+GMAAAAjSURBVHjaYvz//z8DLsD4gcGXiYEAGBIKGBne//fFpwAgwAB98AaF2pjlUQAAAABJRU5ErkJggg== ) repeat top left; }
|
|
2053
|
+
.debug-grid-16 { background: transparent url( data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTExIDc5LjE1ODMyNSwgMjAxNS8wOS8xMC0wMToxMDoyMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6ODYyRjhERDU2N0YyMTFFNjg2MzZDQjkwNkQ4MjgwMEIiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6ODYyRjhERDQ2N0YyMTFFNjg2MzZDQjkwNkQ4MjgwMEIiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo3NjcyQkQ3QTY3QzUxMUU2QjJCQ0UyNDA4MTAwMjE3MSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo3NjcyQkQ3QjY3QzUxMUU2QjJCQ0UyNDA4MTAwMjE3MSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PvCS01IAAABMSURBVHjaYmR4/5+BFPBfAMFm/MBgx8RAGWCn1AAmSg34Q6kBDKMGMDCwICeMIemF/5QawEipAWwUhwEjMDvbAWlWkvVBwu8vQIABAEwBCph8U6c0AAAAAElFTkSuQmCC ) repeat top left; }
|
|
2054
|
+
.debug-grid-8-solid { background: white url( data:image/jpeg;base64,/9j/4QAYRXhpZgAASUkqAAgAAAAAAAAAAAAAAP/sABFEdWNreQABAAQAAAAAAAD/4QMxaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLwA8P3hwYWNrZXQgYmVnaW49Iu+7vyIgaWQ9Ilc1TTBNcENlaGlIenJlU3pOVGN6a2M5ZCI/PiA8eDp4bXBtZXRhIHhtbG5zOng9ImFkb2JlOm5zOm1ldGEvIiB4OnhtcHRrPSJBZG9iZSBYTVAgQ29yZSA1LjYtYzExMSA3OS4xNTgzMjUsIDIwMTUvMDkvMTAtMDE6MTA6MjAgICAgICAgICI+IDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+IDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bXA6Q3JlYXRvclRvb2w9IkFkb2JlIFBob3Rvc2hvcCBDQyAyMDE1IChNYWNpbnRvc2gpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkIxMjI0OTczNjdCMzExRTZCMkJDRTI0MDgxMDAyMTcxIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkIxMjI0OTc0NjdCMzExRTZCMkJDRTI0MDgxMDAyMTcxIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6QjEyMjQ5NzE2N0IzMTFFNkIyQkNFMjQwODEwMDIxNzEiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6QjEyMjQ5NzI2N0IzMTFFNkIyQkNFMjQwODEwMDIxNzEiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7/7gAOQWRvYmUAZMAAAAAB/9sAhAAbGhopHSlBJiZBQi8vL0JHPz4+P0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHAR0pKTQmND8oKD9HPzU/R0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0f/wAARCAAIAAgDASIAAhEBAxEB/8QAWQABAQAAAAAAAAAAAAAAAAAAAAYBAQEAAAAAAAAAAAAAAAAAAAIEEAEBAAMBAAAAAAAAAAAAAAABADECA0ERAAEDBQAAAAAAAAAAAAAAAAARITFBUWESIv/aAAwDAQACEQMRAD8AoOnTV1QTD7JJshP3vSM3P//Z ) repeat top left; }
|
|
2055
|
+
.debug-grid-16-solid { background: white url( data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTExIDc5LjE1ODMyNSwgMjAxNS8wOS8xMC0wMToxMDoyMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NzY3MkJEN0U2N0M1MTFFNkIyQkNFMjQwODEwMDIxNzEiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NzY3MkJEN0Y2N0M1MTFFNkIyQkNFMjQwODEwMDIxNzEiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo3NjcyQkQ3QzY3QzUxMUU2QjJCQ0UyNDA4MTAwMjE3MSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo3NjcyQkQ3RDY3QzUxMUU2QjJCQ0UyNDA4MTAwMjE3MSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pve6J3kAAAAzSURBVHjaYvz//z8D0UDsMwMjSRoYP5Gq4SPNbRjVMEQ1fCRDg+in/6+J1AJUxsgAEGAA31BAJMS0GYEAAAAASUVORK5CYII= ) repeat top left; }
|
|
2056
|
+
/* Uncomment out the line below to help debug layout issues */
|
|
1338
2057
|
/* @import './_debug'; */
|
|
1339
2058
|
@media screen and (min-width: 30em) {
|
|
1340
|
-
.
|
|
1341
|
-
.
|
|
2059
|
+
.aspect-ratio-ns { height: 0; position: relative; }
|
|
2060
|
+
.aspect-ratio--16x9-ns { padding-bottom: 56.25%; }
|
|
2061
|
+
.aspect-ratio--9x16-ns { padding-bottom: 177.77%; }
|
|
2062
|
+
.aspect-ratio--4x3-ns { padding-bottom: 75%; }
|
|
2063
|
+
.aspect-ratio--3x4-ns { padding-bottom: 133.33%; }
|
|
2064
|
+
.aspect-ratio--6x4-ns { padding-bottom: 66.6%; }
|
|
2065
|
+
.aspect-ratio--4x6-ns { padding-bottom: 150%; }
|
|
2066
|
+
.aspect-ratio--8x5-ns { padding-bottom: 62.5%; }
|
|
2067
|
+
.aspect-ratio--5x8-ns { padding-bottom: 160%; }
|
|
2068
|
+
.aspect-ratio--7x5-ns { padding-bottom: 71.42%; }
|
|
2069
|
+
.aspect-ratio--5x7-ns { padding-bottom: 140%; }
|
|
2070
|
+
.aspect-ratio--1x1-ns { padding-bottom: 100%; }
|
|
2071
|
+
.aspect-ratio--object-ns { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; z-index: 100; }
|
|
2072
|
+
.cover-ns { background-size: cover !important; }
|
|
2073
|
+
.contain-ns { background-size: contain !important; }
|
|
2074
|
+
.bg-center-ns { background-repeat: no-repeat; background-position: center center; }
|
|
2075
|
+
.bg-top-ns { background-repeat: no-repeat; background-position: top center; }
|
|
2076
|
+
.bg-right-ns { background-repeat: no-repeat; background-position: center right; }
|
|
2077
|
+
.bg-bottom-ns { background-repeat: no-repeat; background-position: bottom center; }
|
|
2078
|
+
.bg-left-ns { background-repeat: no-repeat; background-position: center left; }
|
|
2079
|
+
.outline-ns { outline: 1px solid; }
|
|
2080
|
+
.outline-transparent-ns { outline: 1px solid transparent; }
|
|
2081
|
+
.outline-0-ns { outline: 0; }
|
|
1342
2082
|
.ba-ns { border-style: solid; border-width: 1px; }
|
|
1343
2083
|
.bt-ns { border-top-style: solid; border-top-width: 1px; }
|
|
1344
2084
|
.br-ns { border-right-style: solid; border-right-width: 1px; }
|
|
@@ -1351,6 +2091,7 @@ code, .code { font-family: Consolas, monaco, monospace; }
|
|
|
1351
2091
|
.br3-ns { border-radius: .5rem; }
|
|
1352
2092
|
.br4-ns { border-radius: 1rem; }
|
|
1353
2093
|
.br-100-ns { border-radius: 100%; }
|
|
2094
|
+
.br-pill-ns { border-radius: 9999px; }
|
|
1354
2095
|
.br--bottom-ns { border-top-left-radius: 0; border-top-right-radius: 0; }
|
|
1355
2096
|
.br--top-ns { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
|
|
1356
2097
|
.br--right-ns { border-top-left-radius: 0; border-bottom-left-radius: 0; }
|
|
@@ -1369,11 +2110,11 @@ code, .code { font-family: Consolas, monaco, monospace; }
|
|
|
1369
2110
|
.br-0-ns { border-right-width: 0; }
|
|
1370
2111
|
.bb-0-ns { border-bottom-width: 0; }
|
|
1371
2112
|
.bl-0-ns { border-left-width: 0; }
|
|
1372
|
-
.shadow-1-ns { box-shadow:
|
|
1373
|
-
.shadow-2-ns { box-shadow:
|
|
1374
|
-
.shadow-3-ns { box-shadow: 2px 2px 4px 2px rgba( 0, 0, 0,
|
|
1375
|
-
.shadow-4-ns { box-shadow: 2px 2px 8px
|
|
1376
|
-
.shadow-5-ns { box-shadow: 4px 4px 8px
|
|
2113
|
+
.shadow-1-ns { box-shadow: 0 0 4px 2px rgba( 0, 0, 0, .2 ); }
|
|
2114
|
+
.shadow-2-ns { box-shadow: 0 0 8px 2px rgba( 0, 0, 0, .2 ); }
|
|
2115
|
+
.shadow-3-ns { box-shadow: 2px 2px 4px 2px rgba( 0, 0, 0, .2 ); }
|
|
2116
|
+
.shadow-4-ns { box-shadow: 2px 2px 8px 0 rgba( 0, 0, 0, .2 ); }
|
|
2117
|
+
.shadow-5-ns { box-shadow: 4px 4px 8px 0 rgba( 0, 0, 0, .2 ); }
|
|
1377
2118
|
.top-0-ns { top: 0; }
|
|
1378
2119
|
.left-0-ns { left: 0; }
|
|
1379
2120
|
.right-0-ns { right: 0; }
|
|
@@ -1418,16 +2159,16 @@ code, .code { font-family: Consolas, monaco, monospace; }
|
|
|
1418
2159
|
.flex-column-ns { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }
|
|
1419
2160
|
.flex-row-ns { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; }
|
|
1420
2161
|
.flex-wrap-ns { -ms-flex-wrap: wrap; flex-wrap: wrap; }
|
|
1421
|
-
.items-start-ns { -webkit-box-align: start; -ms-flex-align: start;
|
|
1422
|
-
.items-end-ns { -webkit-box-align: end; -ms-flex-align: end;
|
|
1423
|
-
.items-center-ns { -webkit-box-align: center; -ms-flex-align: center;
|
|
1424
|
-
.items-baseline-ns { -webkit-box-align: baseline; -ms-flex-align: baseline;
|
|
1425
|
-
.items-stretch-ns { -webkit-box-align: stretch; -ms-flex-align: stretch;
|
|
2162
|
+
.items-start-ns { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; }
|
|
2163
|
+
.items-end-ns { -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; }
|
|
2164
|
+
.items-center-ns { -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
|
|
2165
|
+
.items-baseline-ns { -webkit-box-align: baseline; -ms-flex-align: baseline; align-items: baseline; }
|
|
2166
|
+
.items-stretch-ns { -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; }
|
|
1426
2167
|
.self-start-ns { -ms-flex-item-align: start; align-self: flex-start; }
|
|
1427
2168
|
.self-end-ns { -ms-flex-item-align: end; align-self: flex-end; }
|
|
1428
|
-
.self-center-ns { -ms-flex-item-align: center; align-self: center; }
|
|
2169
|
+
.self-center-ns { -ms-flex-item-align: center; -ms-grid-row-align: center; align-self: center; }
|
|
1429
2170
|
.self-baseline-ns { -ms-flex-item-align: baseline; align-self: baseline; }
|
|
1430
|
-
.self-stretch-ns { -ms-flex-item-align: stretch; align-self: stretch; }
|
|
2171
|
+
.self-stretch-ns { -ms-flex-item-align: stretch; -ms-grid-row-align: stretch; align-self: stretch; }
|
|
1431
2172
|
.justify-start-ns { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; }
|
|
1432
2173
|
.justify-end-ns { -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; }
|
|
1433
2174
|
.justify-center-ns { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }
|
|
@@ -1474,14 +2215,20 @@ code, .code { font-family: Consolas, monaco, monospace; }
|
|
|
1474
2215
|
.h-50-ns { height: 50%; }
|
|
1475
2216
|
.h-75-ns { height: 75%; }
|
|
1476
2217
|
.h-100-ns { height: 100%; }
|
|
2218
|
+
.min-h-100-ns { min-height: 100%; }
|
|
2219
|
+
.vh-25-ns { height: 25vh; }
|
|
2220
|
+
.vh-50-ns { height: 50vh; }
|
|
2221
|
+
.vh-75-ns { height: 75vh; }
|
|
2222
|
+
.vh-100-ns { height: 100vh; }
|
|
2223
|
+
.min-vh-100-ns { min-height: 100vh; }
|
|
1477
2224
|
.h-auto-ns { height: auto; }
|
|
1478
2225
|
.h-inherit-ns { height: inherit; }
|
|
1479
2226
|
.tracked-ns { letter-spacing: .1em; }
|
|
1480
2227
|
.tracked-tight-ns { letter-spacing: -.05em; }
|
|
1481
2228
|
.tracked-mega-ns { letter-spacing: .25em; }
|
|
1482
2229
|
.lh-solid-ns { line-height: 1; }
|
|
1483
|
-
.lh-title-ns { line-height: 1.
|
|
1484
|
-
.lh-copy-ns { line-height: 1.
|
|
2230
|
+
.lh-title-ns { line-height: 1.25; }
|
|
2231
|
+
.lh-copy-ns { line-height: 1.5; }
|
|
1485
2232
|
.mw-100-ns { max-width: 100%; }
|
|
1486
2233
|
.mw1-ns { max-width: 1rem; }
|
|
1487
2234
|
.mw2-ns { max-width: 2rem; }
|
|
@@ -1501,14 +2248,19 @@ code, .code { font-family: Consolas, monaco, monospace; }
|
|
|
1501
2248
|
.w-10-ns { width: 10%; }
|
|
1502
2249
|
.w-20-ns { width: 20%; }
|
|
1503
2250
|
.w-25-ns { width: 25%; }
|
|
2251
|
+
.w-30-ns { width: 30%; }
|
|
1504
2252
|
.w-33-ns { width: 33%; }
|
|
1505
2253
|
.w-34-ns { width: 34%; }
|
|
1506
2254
|
.w-40-ns { width: 40%; }
|
|
1507
2255
|
.w-50-ns { width: 50%; }
|
|
1508
2256
|
.w-60-ns { width: 60%; }
|
|
2257
|
+
.w-70-ns { width: 70%; }
|
|
1509
2258
|
.w-75-ns { width: 75%; }
|
|
1510
2259
|
.w-80-ns { width: 80%; }
|
|
2260
|
+
.w-90-ns { width: 90%; }
|
|
1511
2261
|
.w-100-ns { width: 100%; }
|
|
2262
|
+
.w-third-ns { width: calc( 100% / 3 ); }
|
|
2263
|
+
.w-two-thirds-ns { width: calc( 100% / 1.5 ); }
|
|
1512
2264
|
.w-auto-ns { width: auto; }
|
|
1513
2265
|
.overflow-visible-ns { overflow: visible; }
|
|
1514
2266
|
.overflow-hidden-ns { overflow: hidden; }
|
|
@@ -1526,6 +2278,13 @@ code, .code { font-family: Consolas, monaco, monospace; }
|
|
|
1526
2278
|
.relative-ns { position: relative; }
|
|
1527
2279
|
.absolute-ns { position: absolute; }
|
|
1528
2280
|
.fixed-ns { position: fixed; }
|
|
2281
|
+
.rotate-45-ns { -webkit-transform: rotate( 45deg ); transform: rotate( 45deg ); }
|
|
2282
|
+
.rotate-90-ns { -webkit-transform: rotate( 90deg ); transform: rotate( 90deg ); }
|
|
2283
|
+
.rotate-135-ns { -webkit-transform: rotate( 135deg ); transform: rotate( 135deg ); }
|
|
2284
|
+
.rotate-180-ns { -webkit-transform: rotate( 180deg ); transform: rotate( 180deg ); }
|
|
2285
|
+
.rotate-225-ns { -webkit-transform: rotate( 225deg ); transform: rotate( 225deg ); }
|
|
2286
|
+
.rotate-270-ns { -webkit-transform: rotate( 270deg ); transform: rotate( 270deg ); }
|
|
2287
|
+
.rotate-315-ns { -webkit-transform: rotate( 315deg ); transform: rotate( 315deg ); }
|
|
1529
2288
|
.pa0-ns { padding: 0; }
|
|
1530
2289
|
.pa1-ns { padding: .25rem; }
|
|
1531
2290
|
.pa2-ns { padding: .5rem; }
|
|
@@ -1638,6 +2397,41 @@ code, .code { font-family: Consolas, monaco, monospace; }
|
|
|
1638
2397
|
.mh5-ns { margin-left: 4rem; margin-right: 4rem; }
|
|
1639
2398
|
.mh6-ns { margin-left: 8rem; margin-right: 8rem; }
|
|
1640
2399
|
.mh7-ns { margin-left: 16rem; margin-right: 16rem; }
|
|
2400
|
+
.na1-ns { margin: -.25rem; }
|
|
2401
|
+
.na2-ns { margin: -.5rem; }
|
|
2402
|
+
.na3-ns { margin: -1rem; }
|
|
2403
|
+
.na4-ns { margin: -2rem; }
|
|
2404
|
+
.na5-ns { margin: -4rem; }
|
|
2405
|
+
.na6-ns { margin: -8rem; }
|
|
2406
|
+
.na7-ns { margin: -16rem; }
|
|
2407
|
+
.nl1-ns { margin-left: -.25rem; }
|
|
2408
|
+
.nl2-ns { margin-left: -.5rem; }
|
|
2409
|
+
.nl3-ns { margin-left: -1rem; }
|
|
2410
|
+
.nl4-ns { margin-left: -2rem; }
|
|
2411
|
+
.nl5-ns { margin-left: -4rem; }
|
|
2412
|
+
.nl6-ns { margin-left: -8rem; }
|
|
2413
|
+
.nl7-ns { margin-left: -16rem; }
|
|
2414
|
+
.nr1-ns { margin-right: -.25rem; }
|
|
2415
|
+
.nr2-ns { margin-right: -.5rem; }
|
|
2416
|
+
.nr3-ns { margin-right: -1rem; }
|
|
2417
|
+
.nr4-ns { margin-right: -2rem; }
|
|
2418
|
+
.nr5-ns { margin-right: -4rem; }
|
|
2419
|
+
.nr6-ns { margin-right: -8rem; }
|
|
2420
|
+
.nr7-ns { margin-right: -16rem; }
|
|
2421
|
+
.nb1-ns { margin-bottom: -.25rem; }
|
|
2422
|
+
.nb2-ns { margin-bottom: -.5rem; }
|
|
2423
|
+
.nb3-ns { margin-bottom: -1rem; }
|
|
2424
|
+
.nb4-ns { margin-bottom: -2rem; }
|
|
2425
|
+
.nb5-ns { margin-bottom: -4rem; }
|
|
2426
|
+
.nb6-ns { margin-bottom: -8rem; }
|
|
2427
|
+
.nb7-ns { margin-bottom: -16rem; }
|
|
2428
|
+
.nt1-ns { margin-top: -.25rem; }
|
|
2429
|
+
.nt2-ns { margin-top: -.5rem; }
|
|
2430
|
+
.nt3-ns { margin-top: -1rem; }
|
|
2431
|
+
.nt4-ns { margin-top: -2rem; }
|
|
2432
|
+
.nt5-ns { margin-top: -4rem; }
|
|
2433
|
+
.nt6-ns { margin-top: -8rem; }
|
|
2434
|
+
.nt7-ns { margin-top: -16rem; }
|
|
1641
2435
|
.strike-ns { text-decoration: line-through; }
|
|
1642
2436
|
.underline-ns { text-decoration: underline; }
|
|
1643
2437
|
.no-underline-ns { text-decoration: none; }
|
|
@@ -1672,8 +2466,32 @@ code, .code { font-family: Consolas, monaco, monospace; }
|
|
|
1672
2466
|
.v-btm-ns { vertical-align: bottom; }
|
|
1673
2467
|
}
|
|
1674
2468
|
@media screen and (min-width: 30em) and (max-width: 60em) {
|
|
1675
|
-
.
|
|
1676
|
-
.
|
|
2469
|
+
.aspect-ratio-m { height: 0; position: relative; }
|
|
2470
|
+
.aspect-ratio--16x9-m { padding-bottom: 56.25%; }
|
|
2471
|
+
.aspect-ratio--9x16-m { padding-bottom: 177.77%; }
|
|
2472
|
+
.aspect-ratio--4x3-m { padding-bottom: 75%; }
|
|
2473
|
+
.aspect-ratio--3x4-m { padding-bottom: 133.33%; }
|
|
2474
|
+
.aspect-ratio--6x4-m { padding-bottom: 66.6%; }
|
|
2475
|
+
.aspect-ratio--4x6-m { padding-bottom: 150%; }
|
|
2476
|
+
.aspect-ratio--8x5-m { padding-bottom: 62.5%; }
|
|
2477
|
+
.aspect-ratio--5x8-m { padding-bottom: 160%; }
|
|
2478
|
+
.aspect-ratio--7x5-m { padding-bottom: 71.42%; }
|
|
2479
|
+
.aspect-ratio--5x7-m { padding-bottom: 140%; }
|
|
2480
|
+
.aspect-ratio--1x1-m { padding-bottom: 100%; }
|
|
2481
|
+
.aspect-ratio--object-m { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; z-index: 100; }
|
|
2482
|
+
.cover-m { background-size: cover !important; }
|
|
2483
|
+
.contain-m { background-size: contain !important; }
|
|
2484
|
+
.bg-center-m { background-repeat: no-repeat; background-position: center center; }
|
|
2485
|
+
.bg-top-m { background-repeat: no-repeat; background-position: top center; }
|
|
2486
|
+
.bg-right-m { background-repeat: no-repeat; background-position: center right; }
|
|
2487
|
+
.bg-bottom-m { background-repeat: no-repeat; background-position: bottom center; }
|
|
2488
|
+
.bg-left-m { background-repeat: no-repeat; background-position: center left; }
|
|
2489
|
+
.outline-m { outline: 1px solid; }
|
|
2490
|
+
.outline-transparent-m { outline: 1px solid transparent; }
|
|
2491
|
+
.outline-0-m { outline: 0; }
|
|
2492
|
+
.outline-l { outline: 1px solid; }
|
|
2493
|
+
.outline-transparent-l { outline: 1px solid transparent; }
|
|
2494
|
+
.outline-0-l { outline: 0; }
|
|
1677
2495
|
.ba-m { border-style: solid; border-width: 1px; }
|
|
1678
2496
|
.bt-m { border-top-style: solid; border-top-width: 1px; }
|
|
1679
2497
|
.br-m { border-right-style: solid; border-right-width: 1px; }
|
|
@@ -1686,6 +2504,7 @@ code, .code { font-family: Consolas, monaco, monospace; }
|
|
|
1686
2504
|
.br3-m { border-radius: .5rem; }
|
|
1687
2505
|
.br4-m { border-radius: 1rem; }
|
|
1688
2506
|
.br-100-m { border-radius: 100%; }
|
|
2507
|
+
.br-pill-m { border-radius: 9999px; }
|
|
1689
2508
|
.br--bottom-m { border-top-left-radius: 0; border-top-right-radius: 0; }
|
|
1690
2509
|
.br--top-m { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
|
|
1691
2510
|
.br--right-m { border-top-left-radius: 0; border-bottom-left-radius: 0; }
|
|
@@ -1704,11 +2523,11 @@ code, .code { font-family: Consolas, monaco, monospace; }
|
|
|
1704
2523
|
.br-0-m { border-right-width: 0; }
|
|
1705
2524
|
.bb-0-m { border-bottom-width: 0; }
|
|
1706
2525
|
.bl-0-m { border-left-width: 0; }
|
|
1707
|
-
.shadow-1-m { box-shadow:
|
|
1708
|
-
.shadow-2-m { box-shadow:
|
|
1709
|
-
.shadow-3-m { box-shadow: 2px 2px 4px 2px rgba( 0, 0, 0,
|
|
1710
|
-
.shadow-4-m { box-shadow: 2px 2px 8px
|
|
1711
|
-
.shadow-5-m { box-shadow: 4px 4px 8px
|
|
2526
|
+
.shadow-1-m { box-shadow: 0 0 4px 2px rgba( 0, 0, 0, .2 ); }
|
|
2527
|
+
.shadow-2-m { box-shadow: 0 0 8px 2px rgba( 0, 0, 0, .2 ); }
|
|
2528
|
+
.shadow-3-m { box-shadow: 2px 2px 4px 2px rgba( 0, 0, 0, .2 ); }
|
|
2529
|
+
.shadow-4-m { box-shadow: 2px 2px 8px 0 rgba( 0, 0, 0, .2 ); }
|
|
2530
|
+
.shadow-5-m { box-shadow: 4px 4px 8px 0 rgba( 0, 0, 0, .2 ); }
|
|
1712
2531
|
.top-0-m { top: 0; }
|
|
1713
2532
|
.left-0-m { left: 0; }
|
|
1714
2533
|
.right-0-m { right: 0; }
|
|
@@ -1753,16 +2572,16 @@ code, .code { font-family: Consolas, monaco, monospace; }
|
|
|
1753
2572
|
.flex-column-m { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }
|
|
1754
2573
|
.flex-row-m { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; }
|
|
1755
2574
|
.flex-wrap-m { -ms-flex-wrap: wrap; flex-wrap: wrap; }
|
|
1756
|
-
.items-start-m { -webkit-box-align: start; -ms-flex-align: start;
|
|
1757
|
-
.items-end-m { -webkit-box-align: end; -ms-flex-align: end;
|
|
1758
|
-
.items-center-m { -webkit-box-align: center; -ms-flex-align: center;
|
|
1759
|
-
.items-baseline-m { -webkit-box-align: baseline; -ms-flex-align: baseline;
|
|
1760
|
-
.items-stretch-m { -webkit-box-align: stretch; -ms-flex-align: stretch;
|
|
2575
|
+
.items-start-m { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; }
|
|
2576
|
+
.items-end-m { -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; }
|
|
2577
|
+
.items-center-m { -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
|
|
2578
|
+
.items-baseline-m { -webkit-box-align: baseline; -ms-flex-align: baseline; align-items: baseline; }
|
|
2579
|
+
.items-stretch-m { -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; }
|
|
1761
2580
|
.self-start-m { -ms-flex-item-align: start; align-self: flex-start; }
|
|
1762
2581
|
.self-end-m { -ms-flex-item-align: end; align-self: flex-end; }
|
|
1763
|
-
.self-center-m { -ms-flex-item-align: center; align-self: center; }
|
|
2582
|
+
.self-center-m { -ms-flex-item-align: center; -ms-grid-row-align: center; align-self: center; }
|
|
1764
2583
|
.self-baseline-m { -ms-flex-item-align: baseline; align-self: baseline; }
|
|
1765
|
-
.self-stretch-m { -ms-flex-item-align: stretch; align-self: stretch; }
|
|
2584
|
+
.self-stretch-m { -ms-flex-item-align: stretch; -ms-grid-row-align: stretch; align-self: stretch; }
|
|
1766
2585
|
.justify-start-m { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; }
|
|
1767
2586
|
.justify-end-m { -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; }
|
|
1768
2587
|
.justify-center-m { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }
|
|
@@ -1809,14 +2628,20 @@ code, .code { font-family: Consolas, monaco, monospace; }
|
|
|
1809
2628
|
.h-50-m { height: 50%; }
|
|
1810
2629
|
.h-75-m { height: 75%; }
|
|
1811
2630
|
.h-100-m { height: 100%; }
|
|
2631
|
+
.min-h-100-ns { min-height: 100%; }
|
|
2632
|
+
.vh-25-m { height: 25vh; }
|
|
2633
|
+
.vh-50-m { height: 50vh; }
|
|
2634
|
+
.vh-75-m { height: 75vh; }
|
|
2635
|
+
.vh-100-m { height: 100vh; }
|
|
2636
|
+
.min-vh-100-m { min-height: 100vh; }
|
|
1812
2637
|
.h-auto-m { height: auto; }
|
|
1813
2638
|
.h-inherit-m { height: inherit; }
|
|
1814
2639
|
.tracked-m { letter-spacing: .1em; }
|
|
1815
2640
|
.tracked-tight-m { letter-spacing: -.05em; }
|
|
1816
2641
|
.tracked-mega-m { letter-spacing: .25em; }
|
|
1817
2642
|
.lh-solid-m { line-height: 1; }
|
|
1818
|
-
.lh-title-m { line-height: 1.
|
|
1819
|
-
.lh-copy-m { line-height: 1.
|
|
2643
|
+
.lh-title-m { line-height: 1.25; }
|
|
2644
|
+
.lh-copy-m { line-height: 1.5; }
|
|
1820
2645
|
.mw-100-m { max-width: 100%; }
|
|
1821
2646
|
.mw1-m { max-width: 1rem; }
|
|
1822
2647
|
.mw2-m { max-width: 2rem; }
|
|
@@ -1836,14 +2661,19 @@ code, .code { font-family: Consolas, monaco, monospace; }
|
|
|
1836
2661
|
.w-10-m { width: 10%; }
|
|
1837
2662
|
.w-20-m { width: 20%; }
|
|
1838
2663
|
.w-25-m { width: 25%; }
|
|
2664
|
+
.w-30-m { width: 30%; }
|
|
1839
2665
|
.w-33-m { width: 33%; }
|
|
1840
2666
|
.w-34-m { width: 34%; }
|
|
1841
2667
|
.w-40-m { width: 40%; }
|
|
1842
2668
|
.w-50-m { width: 50%; }
|
|
1843
2669
|
.w-60-m { width: 60%; }
|
|
2670
|
+
.w-70-m { width: 70%; }
|
|
1844
2671
|
.w-75-m { width: 75%; }
|
|
1845
2672
|
.w-80-m { width: 80%; }
|
|
2673
|
+
.w-90-m { width: 90%; }
|
|
1846
2674
|
.w-100-m { width: 100%; }
|
|
2675
|
+
.w-third-m { width: calc( 100% / 3 ); }
|
|
2676
|
+
.w-two-thirds-m { width: calc( 100% / 1.5 ); }
|
|
1847
2677
|
.w-auto-m { width: auto; }
|
|
1848
2678
|
.overflow-visible-m { overflow: visible; }
|
|
1849
2679
|
.overflow-hidden-m { overflow: hidden; }
|
|
@@ -1861,6 +2691,13 @@ code, .code { font-family: Consolas, monaco, monospace; }
|
|
|
1861
2691
|
.relative-m { position: relative; }
|
|
1862
2692
|
.absolute-m { position: absolute; }
|
|
1863
2693
|
.fixed-m { position: fixed; }
|
|
2694
|
+
.rotate-45-m { -webkit-transform: rotate( 45deg ); transform: rotate( 45deg ); }
|
|
2695
|
+
.rotate-90-m { -webkit-transform: rotate( 90deg ); transform: rotate( 90deg ); }
|
|
2696
|
+
.rotate-135-m { -webkit-transform: rotate( 135deg ); transform: rotate( 135deg ); }
|
|
2697
|
+
.rotate-180-m { -webkit-transform: rotate( 180deg ); transform: rotate( 180deg ); }
|
|
2698
|
+
.rotate-225-m { -webkit-transform: rotate( 225deg ); transform: rotate( 225deg ); }
|
|
2699
|
+
.rotate-270-m { -webkit-transform: rotate( 270deg ); transform: rotate( 270deg ); }
|
|
2700
|
+
.rotate-315-m { -webkit-transform: rotate( 315deg ); transform: rotate( 315deg ); }
|
|
1864
2701
|
.pa0-m { padding: 0; }
|
|
1865
2702
|
.pa1-m { padding: .25rem; }
|
|
1866
2703
|
.pa2-m { padding: .5rem; }
|
|
@@ -1973,6 +2810,41 @@ code, .code { font-family: Consolas, monaco, monospace; }
|
|
|
1973
2810
|
.mh5-m { margin-left: 4rem; margin-right: 4rem; }
|
|
1974
2811
|
.mh6-m { margin-left: 8rem; margin-right: 8rem; }
|
|
1975
2812
|
.mh7-m { margin-left: 16rem; margin-right: 16rem; }
|
|
2813
|
+
.na1-m { margin: -.25rem; }
|
|
2814
|
+
.na2-m { margin: -.5rem; }
|
|
2815
|
+
.na3-m { margin: -1rem; }
|
|
2816
|
+
.na4-m { margin: -2rem; }
|
|
2817
|
+
.na5-m { margin: -4rem; }
|
|
2818
|
+
.na6-m { margin: -8rem; }
|
|
2819
|
+
.na7-m { margin: -16rem; }
|
|
2820
|
+
.nl1-m { margin-left: -.25rem; }
|
|
2821
|
+
.nl2-m { margin-left: -.5rem; }
|
|
2822
|
+
.nl3-m { margin-left: -1rem; }
|
|
2823
|
+
.nl4-m { margin-left: -2rem; }
|
|
2824
|
+
.nl5-m { margin-left: -4rem; }
|
|
2825
|
+
.nl6-m { margin-left: -8rem; }
|
|
2826
|
+
.nl7-m { margin-left: -16rem; }
|
|
2827
|
+
.nr1-m { margin-right: -.25rem; }
|
|
2828
|
+
.nr2-m { margin-right: -.5rem; }
|
|
2829
|
+
.nr3-m { margin-right: -1rem; }
|
|
2830
|
+
.nr4-m { margin-right: -2rem; }
|
|
2831
|
+
.nr5-m { margin-right: -4rem; }
|
|
2832
|
+
.nr6-m { margin-right: -8rem; }
|
|
2833
|
+
.nr7-m { margin-right: -16rem; }
|
|
2834
|
+
.nb1-m { margin-bottom: -.25rem; }
|
|
2835
|
+
.nb2-m { margin-bottom: -.5rem; }
|
|
2836
|
+
.nb3-m { margin-bottom: -1rem; }
|
|
2837
|
+
.nb4-m { margin-bottom: -2rem; }
|
|
2838
|
+
.nb5-m { margin-bottom: -4rem; }
|
|
2839
|
+
.nb6-m { margin-bottom: -8rem; }
|
|
2840
|
+
.nb7-m { margin-bottom: -16rem; }
|
|
2841
|
+
.nt1-m { margin-top: -.25rem; }
|
|
2842
|
+
.nt2-m { margin-top: -.5rem; }
|
|
2843
|
+
.nt3-m { margin-top: -1rem; }
|
|
2844
|
+
.nt4-m { margin-top: -2rem; }
|
|
2845
|
+
.nt5-m { margin-top: -4rem; }
|
|
2846
|
+
.nt6-m { margin-top: -8rem; }
|
|
2847
|
+
.nt7-m { margin-top: -16rem; }
|
|
1976
2848
|
.strike-m { text-decoration: line-through; }
|
|
1977
2849
|
.underline-m { text-decoration: underline; }
|
|
1978
2850
|
.no-underline-m { text-decoration: none; }
|
|
@@ -2007,8 +2879,26 @@ code, .code { font-family: Consolas, monaco, monospace; }
|
|
|
2007
2879
|
.v-btm-m { vertical-align: bottom; }
|
|
2008
2880
|
}
|
|
2009
2881
|
@media screen and (min-width: 60em) {
|
|
2010
|
-
.
|
|
2011
|
-
.
|
|
2882
|
+
.aspect-ratio-l { height: 0; position: relative; }
|
|
2883
|
+
.aspect-ratio--16x9-l { padding-bottom: 56.25%; }
|
|
2884
|
+
.aspect-ratio--9x16-l { padding-bottom: 177.77%; }
|
|
2885
|
+
.aspect-ratio--4x3-l { padding-bottom: 75%; }
|
|
2886
|
+
.aspect-ratio--3x4-l { padding-bottom: 133.33%; }
|
|
2887
|
+
.aspect-ratio--6x4-l { padding-bottom: 66.6%; }
|
|
2888
|
+
.aspect-ratio--4x6-l { padding-bottom: 150%; }
|
|
2889
|
+
.aspect-ratio--8x5-l { padding-bottom: 62.5%; }
|
|
2890
|
+
.aspect-ratio--5x8-l { padding-bottom: 160%; }
|
|
2891
|
+
.aspect-ratio--7x5-l { padding-bottom: 71.42%; }
|
|
2892
|
+
.aspect-ratio--5x7-l { padding-bottom: 140%; }
|
|
2893
|
+
.aspect-ratio--1x1-l { padding-bottom: 100%; }
|
|
2894
|
+
.aspect-ratio--object-l { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; z-index: 100; }
|
|
2895
|
+
.cover-l { background-size: cover !important; }
|
|
2896
|
+
.contain-l { background-size: contain !important; }
|
|
2897
|
+
.bg-center-l { background-repeat: no-repeat; background-position: center center; }
|
|
2898
|
+
.bg-top-l { background-repeat: no-repeat; background-position: top center; }
|
|
2899
|
+
.bg-right-l { background-repeat: no-repeat; background-position: center right; }
|
|
2900
|
+
.bg-bottom-l { background-repeat: no-repeat; background-position: bottom center; }
|
|
2901
|
+
.bg-left-l { background-repeat: no-repeat; background-position: center left; }
|
|
2012
2902
|
.ba-l { border-style: solid; border-width: 1px; }
|
|
2013
2903
|
.bt-l { border-top-style: solid; border-top-width: 1px; }
|
|
2014
2904
|
.br-l { border-right-style: solid; border-right-width: 1px; }
|
|
@@ -2021,7 +2911,8 @@ code, .code { font-family: Consolas, monaco, monospace; }
|
|
|
2021
2911
|
.br3-l { border-radius: .5rem; }
|
|
2022
2912
|
.br4-l { border-radius: 1rem; }
|
|
2023
2913
|
.br-100-l { border-radius: 100%; }
|
|
2024
|
-
.br
|
|
2914
|
+
.br-pill-l { border-radius: 9999px; }
|
|
2915
|
+
.br--bottom-l { border-top-left-radius: 0; border-top-right-radius: 0; }
|
|
2025
2916
|
.br--top-l { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
|
|
2026
2917
|
.br--right-l { border-top-left-radius: 0; border-bottom-left-radius: 0; }
|
|
2027
2918
|
.br--left-l { border-top-right-radius: 0; border-bottom-right-radius: 0; }
|
|
@@ -2039,11 +2930,11 @@ code, .code { font-family: Consolas, monaco, monospace; }
|
|
|
2039
2930
|
.br-0-l { border-right-width: 0; }
|
|
2040
2931
|
.bb-0-l { border-bottom-width: 0; }
|
|
2041
2932
|
.bl-0-l { border-left-width: 0; }
|
|
2042
|
-
.shadow-1-l { box-shadow:
|
|
2043
|
-
.shadow-2-l { box-shadow:
|
|
2044
|
-
.shadow-3-l { box-shadow: 2px 2px 4px 2px rgba( 0, 0, 0,
|
|
2045
|
-
.shadow-4-l { box-shadow: 2px 2px 8px
|
|
2046
|
-
.shadow-5-l { box-shadow: 4px 4px 8px
|
|
2933
|
+
.shadow-1-l { box-shadow: 0 0 4px 2px rgba( 0, 0, 0, .2 ); }
|
|
2934
|
+
.shadow-2-l { box-shadow: 0 0 8px 2px rgba( 0, 0, 0, .2 ); }
|
|
2935
|
+
.shadow-3-l { box-shadow: 2px 2px 4px 2px rgba( 0, 0, 0, .2 ); }
|
|
2936
|
+
.shadow-4-l { box-shadow: 2px 2px 8px 0 rgba( 0, 0, 0, .2 ); }
|
|
2937
|
+
.shadow-5-l { box-shadow: 4px 4px 8px 0 rgba( 0, 0, 0, .2 ); }
|
|
2047
2938
|
.top-0-l { top: 0; }
|
|
2048
2939
|
.left-0-l { left: 0; }
|
|
2049
2940
|
.right-0-l { right: 0; }
|
|
@@ -2088,16 +2979,16 @@ code, .code { font-family: Consolas, monaco, monospace; }
|
|
|
2088
2979
|
.flex-column-l { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }
|
|
2089
2980
|
.flex-row-l { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; }
|
|
2090
2981
|
.flex-wrap-l { -ms-flex-wrap: wrap; flex-wrap: wrap; }
|
|
2091
|
-
.items-start-l { -webkit-box-align: start; -ms-flex-align: start;
|
|
2092
|
-
.items-end-l { -webkit-box-align: end; -ms-flex-align: end;
|
|
2093
|
-
.items-center-l { -webkit-box-align: center; -ms-flex-align: center;
|
|
2094
|
-
.items-baseline-l { -webkit-box-align: baseline; -ms-flex-align: baseline;
|
|
2095
|
-
.items-stretch-l { -webkit-box-align: stretch; -ms-flex-align: stretch;
|
|
2982
|
+
.items-start-l { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; }
|
|
2983
|
+
.items-end-l { -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; }
|
|
2984
|
+
.items-center-l { -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
|
|
2985
|
+
.items-baseline-l { -webkit-box-align: baseline; -ms-flex-align: baseline; align-items: baseline; }
|
|
2986
|
+
.items-stretch-l { -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; }
|
|
2096
2987
|
.self-start-l { -ms-flex-item-align: start; align-self: flex-start; }
|
|
2097
2988
|
.self-end-l { -ms-flex-item-align: end; align-self: flex-end; }
|
|
2098
|
-
.self-center-l { -ms-flex-item-align: center; align-self: center; }
|
|
2989
|
+
.self-center-l { -ms-flex-item-align: center; -ms-grid-row-align: center; align-self: center; }
|
|
2099
2990
|
.self-baseline-l { -ms-flex-item-align: baseline; align-self: baseline; }
|
|
2100
|
-
.self-stretch-l { -ms-flex-item-align: stretch; align-self: stretch; }
|
|
2991
|
+
.self-stretch-l { -ms-flex-item-align: stretch; -ms-grid-row-align: stretch; align-self: stretch; }
|
|
2101
2992
|
.justify-start-l { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; }
|
|
2102
2993
|
.justify-end-l { -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; }
|
|
2103
2994
|
.justify-center-l { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }
|
|
@@ -2144,14 +3035,20 @@ code, .code { font-family: Consolas, monaco, monospace; }
|
|
|
2144
3035
|
.h-50-l { height: 50%; }
|
|
2145
3036
|
.h-75-l { height: 75%; }
|
|
2146
3037
|
.h-100-l { height: 100%; }
|
|
3038
|
+
.min-h-100-l { min-height: 100%; }
|
|
3039
|
+
.vh-25-l { height: 25vh; }
|
|
3040
|
+
.vh-50-l { height: 50vh; }
|
|
3041
|
+
.vh-75-l { height: 75vh; }
|
|
3042
|
+
.vh-100-l { height: 100vh; }
|
|
3043
|
+
.min-vh-100-l { min-height: 100vh; }
|
|
2147
3044
|
.h-auto-l { height: auto; }
|
|
2148
3045
|
.h-inherit-l { height: inherit; }
|
|
2149
3046
|
.tracked-l { letter-spacing: .1em; }
|
|
2150
3047
|
.tracked-tight-l { letter-spacing: -.05em; }
|
|
2151
3048
|
.tracked-mega-l { letter-spacing: .25em; }
|
|
2152
3049
|
.lh-solid-l { line-height: 1; }
|
|
2153
|
-
.lh-title-l { line-height: 1.
|
|
2154
|
-
.lh-copy-l { line-height: 1.
|
|
3050
|
+
.lh-title-l { line-height: 1.25; }
|
|
3051
|
+
.lh-copy-l { line-height: 1.5; }
|
|
2155
3052
|
.mw-100-l { max-width: 100%; }
|
|
2156
3053
|
.mw1-l { max-width: 1rem; }
|
|
2157
3054
|
.mw2-l { max-width: 2rem; }
|
|
@@ -2171,14 +3068,19 @@ code, .code { font-family: Consolas, monaco, monospace; }
|
|
|
2171
3068
|
.w-10-l { width: 10%; }
|
|
2172
3069
|
.w-20-l { width: 20%; }
|
|
2173
3070
|
.w-25-l { width: 25%; }
|
|
3071
|
+
.w-30-l { width: 30%; }
|
|
2174
3072
|
.w-33-l { width: 33%; }
|
|
2175
3073
|
.w-34-l { width: 34%; }
|
|
2176
3074
|
.w-40-l { width: 40%; }
|
|
2177
3075
|
.w-50-l { width: 50%; }
|
|
2178
3076
|
.w-60-l { width: 60%; }
|
|
3077
|
+
.w-70-l { width: 70%; }
|
|
2179
3078
|
.w-75-l { width: 75%; }
|
|
2180
3079
|
.w-80-l { width: 80%; }
|
|
3080
|
+
.w-90-l { width: 90%; }
|
|
2181
3081
|
.w-100-l { width: 100%; }
|
|
3082
|
+
.w-third-l { width: calc( 100% / 3 ); }
|
|
3083
|
+
.w-two-thirds-l { width: calc( 100% / 1.5 ); }
|
|
2182
3084
|
.w-auto-l { width: auto; }
|
|
2183
3085
|
.overflow-visible-l { overflow: visible; }
|
|
2184
3086
|
.overflow-hidden-l { overflow: hidden; }
|
|
@@ -2196,6 +3098,13 @@ code, .code { font-family: Consolas, monaco, monospace; }
|
|
|
2196
3098
|
.relative-l { position: relative; }
|
|
2197
3099
|
.absolute-l { position: absolute; }
|
|
2198
3100
|
.fixed-l { position: fixed; }
|
|
3101
|
+
.rotate-45-l { -webkit-transform: rotate( 45deg ); transform: rotate( 45deg ); }
|
|
3102
|
+
.rotate-90-l { -webkit-transform: rotate( 90deg ); transform: rotate( 90deg ); }
|
|
3103
|
+
.rotate-135-l { -webkit-transform: rotate( 135deg ); transform: rotate( 135deg ); }
|
|
3104
|
+
.rotate-180-l { -webkit-transform: rotate( 180deg ); transform: rotate( 180deg ); }
|
|
3105
|
+
.rotate-225-l { -webkit-transform: rotate( 225deg ); transform: rotate( 225deg ); }
|
|
3106
|
+
.rotate-270-l { -webkit-transform: rotate( 270deg ); transform: rotate( 270deg ); }
|
|
3107
|
+
.rotate-315-l { -webkit-transform: rotate( 315deg ); transform: rotate( 315deg ); }
|
|
2199
3108
|
.pa0-l { padding: 0; }
|
|
2200
3109
|
.pa1-l { padding: .25rem; }
|
|
2201
3110
|
.pa2-l { padding: .5rem; }
|
|
@@ -2308,6 +3217,41 @@ code, .code { font-family: Consolas, monaco, monospace; }
|
|
|
2308
3217
|
.mh5-l { margin-left: 4rem; margin-right: 4rem; }
|
|
2309
3218
|
.mh6-l { margin-left: 8rem; margin-right: 8rem; }
|
|
2310
3219
|
.mh7-l { margin-left: 16rem; margin-right: 16rem; }
|
|
3220
|
+
.na1-l { margin: -.25rem; }
|
|
3221
|
+
.na2-l { margin: -.5rem; }
|
|
3222
|
+
.na3-l { margin: -1rem; }
|
|
3223
|
+
.na4-l { margin: -2rem; }
|
|
3224
|
+
.na5-l { margin: -4rem; }
|
|
3225
|
+
.na6-l { margin: -8rem; }
|
|
3226
|
+
.na7-l { margin: -16rem; }
|
|
3227
|
+
.nl1-l { margin-left: -.25rem; }
|
|
3228
|
+
.nl2-l { margin-left: -.5rem; }
|
|
3229
|
+
.nl3-l { margin-left: -1rem; }
|
|
3230
|
+
.nl4-l { margin-left: -2rem; }
|
|
3231
|
+
.nl5-l { margin-left: -4rem; }
|
|
3232
|
+
.nl6-l { margin-left: -8rem; }
|
|
3233
|
+
.nl7-l { margin-left: -16rem; }
|
|
3234
|
+
.nr1-l { margin-right: -.25rem; }
|
|
3235
|
+
.nr2-l { margin-right: -.5rem; }
|
|
3236
|
+
.nr3-l { margin-right: -1rem; }
|
|
3237
|
+
.nr4-l { margin-right: -2rem; }
|
|
3238
|
+
.nr5-l { margin-right: -4rem; }
|
|
3239
|
+
.nr6-l { margin-right: -8rem; }
|
|
3240
|
+
.nr7-l { margin-right: -16rem; }
|
|
3241
|
+
.nb1-l { margin-bottom: -.25rem; }
|
|
3242
|
+
.nb2-l { margin-bottom: -.5rem; }
|
|
3243
|
+
.nb3-l { margin-bottom: -1rem; }
|
|
3244
|
+
.nb4-l { margin-bottom: -2rem; }
|
|
3245
|
+
.nb5-l { margin-bottom: -4rem; }
|
|
3246
|
+
.nb6-l { margin-bottom: -8rem; }
|
|
3247
|
+
.nb7-l { margin-bottom: -16rem; }
|
|
3248
|
+
.nt1-l { margin-top: -.25rem; }
|
|
3249
|
+
.nt2-l { margin-top: -.5rem; }
|
|
3250
|
+
.nt3-l { margin-top: -1rem; }
|
|
3251
|
+
.nt4-l { margin-top: -2rem; }
|
|
3252
|
+
.nt5-l { margin-top: -4rem; }
|
|
3253
|
+
.nt6-l { margin-top: -8rem; }
|
|
3254
|
+
.nt7-l { margin-top: -16rem; }
|
|
2311
3255
|
.strike-l { text-decoration: line-through; }
|
|
2312
3256
|
.underline-l { text-decoration: underline; }
|
|
2313
3257
|
.no-underline-l { text-decoration: none; }
|