tachyons-rails 4.1.1 → 4.6.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- 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; }
|