tachyonscss-rails 4.9.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (69) hide show
  1. checksums.yaml +7 -0
  2. data/LICENSE.md +33 -0
  3. data/README.md +42 -0
  4. data/Rakefile +43 -0
  5. data/app/assets/stylesheets/scss/_aspect-ratios.scss +142 -0
  6. data/app/assets/stylesheets/scss/_background-position.scss +133 -0
  7. data/app/assets/stylesheets/scss/_background-size.scss +41 -0
  8. data/app/assets/stylesheets/scss/_border-colors.scss +93 -0
  9. data/app/assets/stylesheets/scss/_border-radius.scss +134 -0
  10. data/app/assets/stylesheets/scss/_border-style.scss +55 -0
  11. data/app/assets/stylesheets/scss/_border-widths.scss +81 -0
  12. data/app/assets/stylesheets/scss/_borders.scss +65 -0
  13. data/app/assets/stylesheets/scss/_box-shadow.scss +48 -0
  14. data/app/assets/stylesheets/scss/_box-sizing.scss +49 -0
  15. data/app/assets/stylesheets/scss/_clears.scss +47 -0
  16. data/app/assets/stylesheets/scss/_code.scss +18 -0
  17. data/app/assets/stylesheets/scss/_coordinates.scss +153 -0
  18. data/app/assets/stylesheets/scss/_debug-children.scss +21 -0
  19. data/app/assets/stylesheets/scss/_debug-grid.scss +33 -0
  20. data/app/assets/stylesheets/scss/_debug.scss +127 -0
  21. data/app/assets/stylesheets/scss/_debug_children.scss +18 -0
  22. data/app/assets/stylesheets/scss/_display.scss +111 -0
  23. data/app/assets/stylesheets/scss/_flexbox.scss +257 -0
  24. data/app/assets/stylesheets/scss/_floats.scss +56 -0
  25. data/app/assets/stylesheets/scss/_font-family.scss +99 -0
  26. data/app/assets/stylesheets/scss/_font-style.scss +36 -0
  27. data/app/assets/stylesheets/scss/_font-weight.scss +87 -0
  28. data/app/assets/stylesheets/scss/_forms.scss +23 -0
  29. data/app/assets/stylesheets/scss/_gradients.scss +29 -0
  30. data/app/assets/stylesheets/scss/_heights.scss +131 -0
  31. data/app/assets/stylesheets/scss/_hovers.scss +166 -0
  32. data/app/assets/stylesheets/scss/_images.scss +18 -0
  33. data/app/assets/stylesheets/scss/_letter-spacing.scss +40 -0
  34. data/app/assets/stylesheets/scss/_line-height.scss +41 -0
  35. data/app/assets/stylesheets/scss/_links.scss +34 -0
  36. data/app/assets/stylesheets/scss/_lists.scss +15 -0
  37. data/app/assets/stylesheets/scss/_max-widths.scss +105 -0
  38. data/app/assets/stylesheets/scss/_module-template.scss +29 -0
  39. data/app/assets/stylesheets/scss/_negative-margins.scss +205 -0
  40. data/app/assets/stylesheets/scss/_nested.scss +63 -0
  41. data/app/assets/stylesheets/scss/_normalize.scss +454 -0
  42. data/app/assets/stylesheets/scss/_opacity.scss +27 -0
  43. data/app/assets/stylesheets/scss/_outlines.scss +39 -0
  44. data/app/assets/stylesheets/scss/_overflow.scss +82 -0
  45. data/app/assets/stylesheets/scss/_position.scss +44 -0
  46. data/app/assets/stylesheets/scss/_rotations.scss +50 -0
  47. data/app/assets/stylesheets/scss/_skins-pseudo.scss +243 -0
  48. data/app/assets/stylesheets/scss/_skins.scss +143 -0
  49. data/app/assets/stylesheets/scss/_spacing.scss +947 -0
  50. data/app/assets/stylesheets/scss/_styles.scss +15 -0
  51. data/app/assets/stylesheets/scss/_tables.scss +42 -0
  52. data/app/assets/stylesheets/scss/_text-align.scss +53 -0
  53. data/app/assets/stylesheets/scss/_text-decoration.scss +42 -0
  54. data/app/assets/stylesheets/scss/_text-transform.scss +53 -0
  55. data/app/assets/stylesheets/scss/_type-scale.scss +102 -0
  56. data/app/assets/stylesheets/scss/_typography.scss +129 -0
  57. data/app/assets/stylesheets/scss/_utilities.scss +57 -0
  58. data/app/assets/stylesheets/scss/_variables.scss +143 -0
  59. data/app/assets/stylesheets/scss/_vertical-align.scss +43 -0
  60. data/app/assets/stylesheets/scss/_visibility.scss +58 -0
  61. data/app/assets/stylesheets/scss/_white-space.scss +41 -0
  62. data/app/assets/stylesheets/scss/_widths.scss +150 -0
  63. data/app/assets/stylesheets/scss/_word-break.scss +43 -0
  64. data/app/assets/stylesheets/scss/_z-index.scss +60 -0
  65. data/app/assets/stylesheets/tachyons.scss +94 -0
  66. data/lib/tachyonscss-rails/engine.rb +11 -0
  67. data/lib/tachyonscss-rails/version.rb +3 -0
  68. data/lib/tachyonscss-rails.rb +5 -0
  69. metadata +113 -0
@@ -0,0 +1,947 @@
1
+
2
+ // Converted Variables
3
+
4
+
5
+ // Custom Media Query Variables
6
+
7
+
8
+ /* Variables */
9
+
10
+ /*
11
+ SPACING
12
+ Docs: http://tachyons.io/docs/layout/spacing/
13
+
14
+ An eight step powers of two scale ranging from 0 to 16rem.
15
+
16
+ Base:
17
+ p = padding
18
+ m = margin
19
+
20
+ Modifiers:
21
+ a = all
22
+ h = horizontal
23
+ v = vertical
24
+ t = top
25
+ r = right
26
+ b = bottom
27
+ l = left
28
+
29
+ 0 = none
30
+ 1 = 1st step in spacing scale
31
+ 2 = 2nd step in spacing scale
32
+ 3 = 3rd step in spacing scale
33
+ 4 = 4th step in spacing scale
34
+ 5 = 5th step in spacing scale
35
+ 6 = 6th step in spacing scale
36
+ 7 = 7th step in spacing scale
37
+
38
+ Media Query Extensions:
39
+ -ns = not-small
40
+ -m = medium
41
+ -l = large
42
+
43
+ */
44
+
45
+
46
+ .pa0 { padding: $spacing-none; }
47
+ .pa1 { padding: $spacing-extra-small; }
48
+ .pa2 { padding: $spacing-small; }
49
+ .pa3 { padding: $spacing-medium; }
50
+ .pa4 { padding: $spacing-large; }
51
+ .pa5 { padding: $spacing-extra-large; }
52
+ .pa6 { padding: $spacing-extra-extra-large; }
53
+ .pa7 { padding: $spacing-extra-extra-extra-large; }
54
+
55
+ .pl0 { padding-left: $spacing-none; }
56
+ .pl1 { padding-left: $spacing-extra-small; }
57
+ .pl2 { padding-left: $spacing-small; }
58
+ .pl3 { padding-left: $spacing-medium; }
59
+ .pl4 { padding-left: $spacing-large; }
60
+ .pl5 { padding-left: $spacing-extra-large; }
61
+ .pl6 { padding-left: $spacing-extra-extra-large; }
62
+ .pl7 { padding-left: $spacing-extra-extra-extra-large; }
63
+
64
+ .pr0 { padding-right: $spacing-none; }
65
+ .pr1 { padding-right: $spacing-extra-small; }
66
+ .pr2 { padding-right: $spacing-small; }
67
+ .pr3 { padding-right: $spacing-medium; }
68
+ .pr4 { padding-right: $spacing-large; }
69
+ .pr5 { padding-right: $spacing-extra-large; }
70
+ .pr6 { padding-right: $spacing-extra-extra-large; }
71
+ .pr7 { padding-right: $spacing-extra-extra-extra-large; }
72
+
73
+ .pb0 { padding-bottom: $spacing-none; }
74
+ .pb1 { padding-bottom: $spacing-extra-small; }
75
+ .pb2 { padding-bottom: $spacing-small; }
76
+ .pb3 { padding-bottom: $spacing-medium; }
77
+ .pb4 { padding-bottom: $spacing-large; }
78
+ .pb5 { padding-bottom: $spacing-extra-large; }
79
+ .pb6 { padding-bottom: $spacing-extra-extra-large; }
80
+ .pb7 { padding-bottom: $spacing-extra-extra-extra-large; }
81
+
82
+ .pt0 { padding-top: $spacing-none; }
83
+ .pt1 { padding-top: $spacing-extra-small; }
84
+ .pt2 { padding-top: $spacing-small; }
85
+ .pt3 { padding-top: $spacing-medium; }
86
+ .pt4 { padding-top: $spacing-large; }
87
+ .pt5 { padding-top: $spacing-extra-large; }
88
+ .pt6 { padding-top: $spacing-extra-extra-large; }
89
+ .pt7 { padding-top: $spacing-extra-extra-extra-large; }
90
+
91
+ .pv0 {
92
+ padding-top: $spacing-none;
93
+ padding-bottom: $spacing-none;
94
+ }
95
+ .pv1 {
96
+ padding-top: $spacing-extra-small;
97
+ padding-bottom: $spacing-extra-small;
98
+ }
99
+ .pv2 {
100
+ padding-top: $spacing-small;
101
+ padding-bottom: $spacing-small;
102
+ }
103
+ .pv3 {
104
+ padding-top: $spacing-medium;
105
+ padding-bottom: $spacing-medium;
106
+ }
107
+ .pv4 {
108
+ padding-top: $spacing-large;
109
+ padding-bottom: $spacing-large;
110
+ }
111
+ .pv5 {
112
+ padding-top: $spacing-extra-large;
113
+ padding-bottom: $spacing-extra-large;
114
+ }
115
+ .pv6 {
116
+ padding-top: $spacing-extra-extra-large;
117
+ padding-bottom: $spacing-extra-extra-large;
118
+ }
119
+
120
+ .pv7 {
121
+ padding-top: $spacing-extra-extra-extra-large;
122
+ padding-bottom: $spacing-extra-extra-extra-large;
123
+ }
124
+
125
+ .ph0 {
126
+ padding-left: $spacing-none;
127
+ padding-right: $spacing-none;
128
+ }
129
+
130
+ .ph1 {
131
+ padding-left: $spacing-extra-small;
132
+ padding-right: $spacing-extra-small;
133
+ }
134
+
135
+ .ph2 {
136
+ padding-left: $spacing-small;
137
+ padding-right: $spacing-small;
138
+ }
139
+
140
+ .ph3 {
141
+ padding-left: $spacing-medium;
142
+ padding-right: $spacing-medium;
143
+ }
144
+
145
+ .ph4 {
146
+ padding-left: $spacing-large;
147
+ padding-right: $spacing-large;
148
+ }
149
+
150
+ .ph5 {
151
+ padding-left: $spacing-extra-large;
152
+ padding-right: $spacing-extra-large;
153
+ }
154
+
155
+ .ph6 {
156
+ padding-left: $spacing-extra-extra-large;
157
+ padding-right: $spacing-extra-extra-large;
158
+ }
159
+
160
+ .ph7 {
161
+ padding-left: $spacing-extra-extra-extra-large;
162
+ padding-right: $spacing-extra-extra-extra-large;
163
+ }
164
+
165
+ .ma0 { margin: $spacing-none; }
166
+ .ma1 { margin: $spacing-extra-small; }
167
+ .ma2 { margin: $spacing-small; }
168
+ .ma3 { margin: $spacing-medium; }
169
+ .ma4 { margin: $spacing-large; }
170
+ .ma5 { margin: $spacing-extra-large; }
171
+ .ma6 { margin: $spacing-extra-extra-large; }
172
+ .ma7 { margin: $spacing-extra-extra-extra-large; }
173
+
174
+ .ml0 { margin-left: $spacing-none; }
175
+ .ml1 { margin-left: $spacing-extra-small; }
176
+ .ml2 { margin-left: $spacing-small; }
177
+ .ml3 { margin-left: $spacing-medium; }
178
+ .ml4 { margin-left: $spacing-large; }
179
+ .ml5 { margin-left: $spacing-extra-large; }
180
+ .ml6 { margin-left: $spacing-extra-extra-large; }
181
+ .ml7 { margin-left: $spacing-extra-extra-extra-large; }
182
+
183
+ .mr0 { margin-right: $spacing-none; }
184
+ .mr1 { margin-right: $spacing-extra-small; }
185
+ .mr2 { margin-right: $spacing-small; }
186
+ .mr3 { margin-right: $spacing-medium; }
187
+ .mr4 { margin-right: $spacing-large; }
188
+ .mr5 { margin-right: $spacing-extra-large; }
189
+ .mr6 { margin-right: $spacing-extra-extra-large; }
190
+ .mr7 { margin-right: $spacing-extra-extra-extra-large; }
191
+
192
+ .mb0 { margin-bottom: $spacing-none; }
193
+ .mb1 { margin-bottom: $spacing-extra-small; }
194
+ .mb2 { margin-bottom: $spacing-small; }
195
+ .mb3 { margin-bottom: $spacing-medium; }
196
+ .mb4 { margin-bottom: $spacing-large; }
197
+ .mb5 { margin-bottom: $spacing-extra-large; }
198
+ .mb6 { margin-bottom: $spacing-extra-extra-large; }
199
+ .mb7 { margin-bottom: $spacing-extra-extra-extra-large; }
200
+
201
+ .mt0 { margin-top: $spacing-none; }
202
+ .mt1 { margin-top: $spacing-extra-small; }
203
+ .mt2 { margin-top: $spacing-small; }
204
+ .mt3 { margin-top: $spacing-medium; }
205
+ .mt4 { margin-top: $spacing-large; }
206
+ .mt5 { margin-top: $spacing-extra-large; }
207
+ .mt6 { margin-top: $spacing-extra-extra-large; }
208
+ .mt7 { margin-top: $spacing-extra-extra-extra-large; }
209
+
210
+ .mv0 {
211
+ margin-top: $spacing-none;
212
+ margin-bottom: $spacing-none;
213
+ }
214
+ .mv1 {
215
+ margin-top: $spacing-extra-small;
216
+ margin-bottom: $spacing-extra-small;
217
+ }
218
+ .mv2 {
219
+ margin-top: $spacing-small;
220
+ margin-bottom: $spacing-small;
221
+ }
222
+ .mv3 {
223
+ margin-top: $spacing-medium;
224
+ margin-bottom: $spacing-medium;
225
+ }
226
+ .mv4 {
227
+ margin-top: $spacing-large;
228
+ margin-bottom: $spacing-large;
229
+ }
230
+ .mv5 {
231
+ margin-top: $spacing-extra-large;
232
+ margin-bottom: $spacing-extra-large;
233
+ }
234
+ .mv6 {
235
+ margin-top: $spacing-extra-extra-large;
236
+ margin-bottom: $spacing-extra-extra-large;
237
+ }
238
+ .mv7 {
239
+ margin-top: $spacing-extra-extra-extra-large;
240
+ margin-bottom: $spacing-extra-extra-extra-large;
241
+ }
242
+
243
+ .mh0 {
244
+ margin-left: $spacing-none;
245
+ margin-right: $spacing-none;
246
+ }
247
+ .mh1 {
248
+ margin-left: $spacing-extra-small;
249
+ margin-right: $spacing-extra-small;
250
+ }
251
+ .mh2 {
252
+ margin-left: $spacing-small;
253
+ margin-right: $spacing-small;
254
+ }
255
+ .mh3 {
256
+ margin-left: $spacing-medium;
257
+ margin-right: $spacing-medium;
258
+ }
259
+ .mh4 {
260
+ margin-left: $spacing-large;
261
+ margin-right: $spacing-large;
262
+ }
263
+ .mh5 {
264
+ margin-left: $spacing-extra-large;
265
+ margin-right: $spacing-extra-large;
266
+ }
267
+ .mh6 {
268
+ margin-left: $spacing-extra-extra-large;
269
+ margin-right: $spacing-extra-extra-large;
270
+ }
271
+ .mh7 {
272
+ margin-left: $spacing-extra-extra-extra-large;
273
+ margin-right: $spacing-extra-extra-extra-large;
274
+ }
275
+
276
+ @media #{$breakpoint-not-small} {
277
+ .pa0-ns { padding: $spacing-none; }
278
+ .pa1-ns { padding: $spacing-extra-small; }
279
+ .pa2-ns { padding: $spacing-small; }
280
+ .pa3-ns { padding: $spacing-medium; }
281
+ .pa4-ns { padding: $spacing-large; }
282
+ .pa5-ns { padding: $spacing-extra-large; }
283
+ .pa6-ns { padding: $spacing-extra-extra-large; }
284
+ .pa7-ns { padding: $spacing-extra-extra-extra-large; }
285
+
286
+ .pl0-ns { padding-left: $spacing-none; }
287
+ .pl1-ns { padding-left: $spacing-extra-small; }
288
+ .pl2-ns { padding-left: $spacing-small; }
289
+ .pl3-ns { padding-left: $spacing-medium; }
290
+ .pl4-ns { padding-left: $spacing-large; }
291
+ .pl5-ns { padding-left: $spacing-extra-large; }
292
+ .pl6-ns { padding-left: $spacing-extra-extra-large; }
293
+ .pl7-ns { padding-left: $spacing-extra-extra-extra-large; }
294
+
295
+ .pr0-ns { padding-right: $spacing-none; }
296
+ .pr1-ns { padding-right: $spacing-extra-small; }
297
+ .pr2-ns { padding-right: $spacing-small; }
298
+ .pr3-ns { padding-right: $spacing-medium; }
299
+ .pr4-ns { padding-right: $spacing-large; }
300
+ .pr5-ns { padding-right: $spacing-extra-large; }
301
+ .pr6-ns { padding-right: $spacing-extra-extra-large; }
302
+ .pr7-ns { padding-right: $spacing-extra-extra-extra-large; }
303
+
304
+ .pb0-ns { padding-bottom: $spacing-none; }
305
+ .pb1-ns { padding-bottom: $spacing-extra-small; }
306
+ .pb2-ns { padding-bottom: $spacing-small; }
307
+ .pb3-ns { padding-bottom: $spacing-medium; }
308
+ .pb4-ns { padding-bottom: $spacing-large; }
309
+ .pb5-ns { padding-bottom: $spacing-extra-large; }
310
+ .pb6-ns { padding-bottom: $spacing-extra-extra-large; }
311
+ .pb7-ns { padding-bottom: $spacing-extra-extra-extra-large; }
312
+
313
+ .pt0-ns { padding-top: $spacing-none; }
314
+ .pt1-ns { padding-top: $spacing-extra-small; }
315
+ .pt2-ns { padding-top: $spacing-small; }
316
+ .pt3-ns { padding-top: $spacing-medium; }
317
+ .pt4-ns { padding-top: $spacing-large; }
318
+ .pt5-ns { padding-top: $spacing-extra-large; }
319
+ .pt6-ns { padding-top: $spacing-extra-extra-large; }
320
+ .pt7-ns { padding-top: $spacing-extra-extra-extra-large; }
321
+
322
+ .pv0-ns {
323
+ padding-top: $spacing-none;
324
+ padding-bottom: $spacing-none;
325
+ }
326
+ .pv1-ns {
327
+ padding-top: $spacing-extra-small;
328
+ padding-bottom: $spacing-extra-small;
329
+ }
330
+ .pv2-ns {
331
+ padding-top: $spacing-small;
332
+ padding-bottom: $spacing-small;
333
+ }
334
+ .pv3-ns {
335
+ padding-top: $spacing-medium;
336
+ padding-bottom: $spacing-medium;
337
+ }
338
+ .pv4-ns {
339
+ padding-top: $spacing-large;
340
+ padding-bottom: $spacing-large;
341
+ }
342
+ .pv5-ns {
343
+ padding-top: $spacing-extra-large;
344
+ padding-bottom: $spacing-extra-large;
345
+ }
346
+ .pv6-ns {
347
+ padding-top: $spacing-extra-extra-large;
348
+ padding-bottom: $spacing-extra-extra-large;
349
+ }
350
+ .pv7-ns {
351
+ padding-top: $spacing-extra-extra-extra-large;
352
+ padding-bottom: $spacing-extra-extra-extra-large;
353
+ }
354
+ .ph0-ns {
355
+ padding-left: $spacing-none;
356
+ padding-right: $spacing-none;
357
+ }
358
+ .ph1-ns {
359
+ padding-left: $spacing-extra-small;
360
+ padding-right: $spacing-extra-small;
361
+ }
362
+ .ph2-ns {
363
+ padding-left: $spacing-small;
364
+ padding-right: $spacing-small;
365
+ }
366
+ .ph3-ns {
367
+ padding-left: $spacing-medium;
368
+ padding-right: $spacing-medium;
369
+ }
370
+ .ph4-ns {
371
+ padding-left: $spacing-large;
372
+ padding-right: $spacing-large;
373
+ }
374
+ .ph5-ns {
375
+ padding-left: $spacing-extra-large;
376
+ padding-right: $spacing-extra-large;
377
+ }
378
+ .ph6-ns {
379
+ padding-left: $spacing-extra-extra-large;
380
+ padding-right: $spacing-extra-extra-large;
381
+ }
382
+ .ph7-ns {
383
+ padding-left: $spacing-extra-extra-extra-large;
384
+ padding-right: $spacing-extra-extra-extra-large;
385
+ }
386
+
387
+ .ma0-ns { margin: $spacing-none; }
388
+ .ma1-ns { margin: $spacing-extra-small; }
389
+ .ma2-ns { margin: $spacing-small; }
390
+ .ma3-ns { margin: $spacing-medium; }
391
+ .ma4-ns { margin: $spacing-large; }
392
+ .ma5-ns { margin: $spacing-extra-large; }
393
+ .ma6-ns { margin: $spacing-extra-extra-large; }
394
+ .ma7-ns { margin: $spacing-extra-extra-extra-large; }
395
+
396
+ .ml0-ns { margin-left: $spacing-none; }
397
+ .ml1-ns { margin-left: $spacing-extra-small; }
398
+ .ml2-ns { margin-left: $spacing-small; }
399
+ .ml3-ns { margin-left: $spacing-medium; }
400
+ .ml4-ns { margin-left: $spacing-large; }
401
+ .ml5-ns { margin-left: $spacing-extra-large; }
402
+ .ml6-ns { margin-left: $spacing-extra-extra-large; }
403
+ .ml7-ns { margin-left: $spacing-extra-extra-extra-large; }
404
+
405
+ .mr0-ns { margin-right: $spacing-none; }
406
+ .mr1-ns { margin-right: $spacing-extra-small; }
407
+ .mr2-ns { margin-right: $spacing-small; }
408
+ .mr3-ns { margin-right: $spacing-medium; }
409
+ .mr4-ns { margin-right: $spacing-large; }
410
+ .mr5-ns { margin-right: $spacing-extra-large; }
411
+ .mr6-ns { margin-right: $spacing-extra-extra-large; }
412
+ .mr7-ns { margin-right: $spacing-extra-extra-extra-large; }
413
+
414
+ .mb0-ns { margin-bottom: $spacing-none; }
415
+ .mb1-ns { margin-bottom: $spacing-extra-small; }
416
+ .mb2-ns { margin-bottom: $spacing-small; }
417
+ .mb3-ns { margin-bottom: $spacing-medium; }
418
+ .mb4-ns { margin-bottom: $spacing-large; }
419
+ .mb5-ns { margin-bottom: $spacing-extra-large; }
420
+ .mb6-ns { margin-bottom: $spacing-extra-extra-large; }
421
+ .mb7-ns { margin-bottom: $spacing-extra-extra-extra-large; }
422
+
423
+ .mt0-ns { margin-top: $spacing-none; }
424
+ .mt1-ns { margin-top: $spacing-extra-small; }
425
+ .mt2-ns { margin-top: $spacing-small; }
426
+ .mt3-ns { margin-top: $spacing-medium; }
427
+ .mt4-ns { margin-top: $spacing-large; }
428
+ .mt5-ns { margin-top: $spacing-extra-large; }
429
+ .mt6-ns { margin-top: $spacing-extra-extra-large; }
430
+ .mt7-ns { margin-top: $spacing-extra-extra-extra-large; }
431
+
432
+ .mv0-ns {
433
+ margin-top: $spacing-none;
434
+ margin-bottom: $spacing-none;
435
+ }
436
+ .mv1-ns {
437
+ margin-top: $spacing-extra-small;
438
+ margin-bottom: $spacing-extra-small;
439
+ }
440
+ .mv2-ns {
441
+ margin-top: $spacing-small;
442
+ margin-bottom: $spacing-small;
443
+ }
444
+ .mv3-ns {
445
+ margin-top: $spacing-medium;
446
+ margin-bottom: $spacing-medium;
447
+ }
448
+ .mv4-ns {
449
+ margin-top: $spacing-large;
450
+ margin-bottom: $spacing-large;
451
+ }
452
+ .mv5-ns {
453
+ margin-top: $spacing-extra-large;
454
+ margin-bottom: $spacing-extra-large;
455
+ }
456
+ .mv6-ns {
457
+ margin-top: $spacing-extra-extra-large;
458
+ margin-bottom: $spacing-extra-extra-large;
459
+ }
460
+ .mv7-ns {
461
+ margin-top: $spacing-extra-extra-extra-large;
462
+ margin-bottom: $spacing-extra-extra-extra-large;
463
+ }
464
+
465
+ .mh0-ns {
466
+ margin-left: $spacing-none;
467
+ margin-right: $spacing-none;
468
+ }
469
+ .mh1-ns {
470
+ margin-left: $spacing-extra-small;
471
+ margin-right: $spacing-extra-small;
472
+ }
473
+ .mh2-ns {
474
+ margin-left: $spacing-small;
475
+ margin-right: $spacing-small;
476
+ }
477
+ .mh3-ns {
478
+ margin-left: $spacing-medium;
479
+ margin-right: $spacing-medium;
480
+ }
481
+ .mh4-ns {
482
+ margin-left: $spacing-large;
483
+ margin-right: $spacing-large;
484
+ }
485
+ .mh5-ns {
486
+ margin-left: $spacing-extra-large;
487
+ margin-right: $spacing-extra-large;
488
+ }
489
+ .mh6-ns {
490
+ margin-left: $spacing-extra-extra-large;
491
+ margin-right: $spacing-extra-extra-large;
492
+ }
493
+ .mh7-ns {
494
+ margin-left: $spacing-extra-extra-extra-large;
495
+ margin-right: $spacing-extra-extra-extra-large;
496
+ }
497
+
498
+ }
499
+
500
+ @media #{$breakpoint-medium} {
501
+ .pa0-m { padding: $spacing-none; }
502
+ .pa1-m { padding: $spacing-extra-small; }
503
+ .pa2-m { padding: $spacing-small; }
504
+ .pa3-m { padding: $spacing-medium; }
505
+ .pa4-m { padding: $spacing-large; }
506
+ .pa5-m { padding: $spacing-extra-large; }
507
+ .pa6-m { padding: $spacing-extra-extra-large; }
508
+ .pa7-m { padding: $spacing-extra-extra-extra-large; }
509
+
510
+ .pl0-m { padding-left: $spacing-none; }
511
+ .pl1-m { padding-left: $spacing-extra-small; }
512
+ .pl2-m { padding-left: $spacing-small; }
513
+ .pl3-m { padding-left: $spacing-medium; }
514
+ .pl4-m { padding-left: $spacing-large; }
515
+ .pl5-m { padding-left: $spacing-extra-large; }
516
+ .pl6-m { padding-left: $spacing-extra-extra-large; }
517
+ .pl7-m { padding-left: $spacing-extra-extra-extra-large; }
518
+
519
+ .pr0-m { padding-right: $spacing-none; }
520
+ .pr1-m { padding-right: $spacing-extra-small; }
521
+ .pr2-m { padding-right: $spacing-small; }
522
+ .pr3-m { padding-right: $spacing-medium; }
523
+ .pr4-m { padding-right: $spacing-large; }
524
+ .pr5-m { padding-right: $spacing-extra-large; }
525
+ .pr6-m { padding-right: $spacing-extra-extra-large; }
526
+ .pr7-m { padding-right: $spacing-extra-extra-extra-large; }
527
+
528
+ .pb0-m { padding-bottom: $spacing-none; }
529
+ .pb1-m { padding-bottom: $spacing-extra-small; }
530
+ .pb2-m { padding-bottom: $spacing-small; }
531
+ .pb3-m { padding-bottom: $spacing-medium; }
532
+ .pb4-m { padding-bottom: $spacing-large; }
533
+ .pb5-m { padding-bottom: $spacing-extra-large; }
534
+ .pb6-m { padding-bottom: $spacing-extra-extra-large; }
535
+ .pb7-m { padding-bottom: $spacing-extra-extra-extra-large; }
536
+
537
+ .pt0-m { padding-top: $spacing-none; }
538
+ .pt1-m { padding-top: $spacing-extra-small; }
539
+ .pt2-m { padding-top: $spacing-small; }
540
+ .pt3-m { padding-top: $spacing-medium; }
541
+ .pt4-m { padding-top: $spacing-large; }
542
+ .pt5-m { padding-top: $spacing-extra-large; }
543
+ .pt6-m { padding-top: $spacing-extra-extra-large; }
544
+ .pt7-m { padding-top: $spacing-extra-extra-extra-large; }
545
+
546
+ .pv0-m {
547
+ padding-top: $spacing-none;
548
+ padding-bottom: $spacing-none;
549
+ }
550
+ .pv1-m {
551
+ padding-top: $spacing-extra-small;
552
+ padding-bottom: $spacing-extra-small;
553
+ }
554
+ .pv2-m {
555
+ padding-top: $spacing-small;
556
+ padding-bottom: $spacing-small;
557
+ }
558
+ .pv3-m {
559
+ padding-top: $spacing-medium;
560
+ padding-bottom: $spacing-medium;
561
+ }
562
+ .pv4-m {
563
+ padding-top: $spacing-large;
564
+ padding-bottom: $spacing-large;
565
+ }
566
+ .pv5-m {
567
+ padding-top: $spacing-extra-large;
568
+ padding-bottom: $spacing-extra-large;
569
+ }
570
+ .pv6-m {
571
+ padding-top: $spacing-extra-extra-large;
572
+ padding-bottom: $spacing-extra-extra-large;
573
+ }
574
+ .pv7-m {
575
+ padding-top: $spacing-extra-extra-extra-large;
576
+ padding-bottom: $spacing-extra-extra-extra-large;
577
+ }
578
+
579
+ .ph0-m {
580
+ padding-left: $spacing-none;
581
+ padding-right: $spacing-none;
582
+ }
583
+ .ph1-m {
584
+ padding-left: $spacing-extra-small;
585
+ padding-right: $spacing-extra-small;
586
+ }
587
+ .ph2-m {
588
+ padding-left: $spacing-small;
589
+ padding-right: $spacing-small;
590
+ }
591
+ .ph3-m {
592
+ padding-left: $spacing-medium;
593
+ padding-right: $spacing-medium;
594
+ }
595
+ .ph4-m {
596
+ padding-left: $spacing-large;
597
+ padding-right: $spacing-large;
598
+ }
599
+ .ph5-m {
600
+ padding-left: $spacing-extra-large;
601
+ padding-right: $spacing-extra-large;
602
+ }
603
+ .ph6-m {
604
+ padding-left: $spacing-extra-extra-large;
605
+ padding-right: $spacing-extra-extra-large;
606
+ }
607
+ .ph7-m {
608
+ padding-left: $spacing-extra-extra-extra-large;
609
+ padding-right: $spacing-extra-extra-extra-large;
610
+ }
611
+
612
+ .ma0-m { margin: $spacing-none; }
613
+ .ma1-m { margin: $spacing-extra-small; }
614
+ .ma2-m { margin: $spacing-small; }
615
+ .ma3-m { margin: $spacing-medium; }
616
+ .ma4-m { margin: $spacing-large; }
617
+ .ma5-m { margin: $spacing-extra-large; }
618
+ .ma6-m { margin: $spacing-extra-extra-large; }
619
+ .ma7-m { margin: $spacing-extra-extra-extra-large; }
620
+
621
+ .ml0-m { margin-left: $spacing-none; }
622
+ .ml1-m { margin-left: $spacing-extra-small; }
623
+ .ml2-m { margin-left: $spacing-small; }
624
+ .ml3-m { margin-left: $spacing-medium; }
625
+ .ml4-m { margin-left: $spacing-large; }
626
+ .ml5-m { margin-left: $spacing-extra-large; }
627
+ .ml6-m { margin-left: $spacing-extra-extra-large; }
628
+ .ml7-m { margin-left: $spacing-extra-extra-extra-large; }
629
+
630
+ .mr0-m { margin-right: $spacing-none; }
631
+ .mr1-m { margin-right: $spacing-extra-small; }
632
+ .mr2-m { margin-right: $spacing-small; }
633
+ .mr3-m { margin-right: $spacing-medium; }
634
+ .mr4-m { margin-right: $spacing-large; }
635
+ .mr5-m { margin-right: $spacing-extra-large; }
636
+ .mr6-m { margin-right: $spacing-extra-extra-large; }
637
+ .mr7-m { margin-right: $spacing-extra-extra-extra-large; }
638
+
639
+ .mb0-m { margin-bottom: $spacing-none; }
640
+ .mb1-m { margin-bottom: $spacing-extra-small; }
641
+ .mb2-m { margin-bottom: $spacing-small; }
642
+ .mb3-m { margin-bottom: $spacing-medium; }
643
+ .mb4-m { margin-bottom: $spacing-large; }
644
+ .mb5-m { margin-bottom: $spacing-extra-large; }
645
+ .mb6-m { margin-bottom: $spacing-extra-extra-large; }
646
+ .mb7-m { margin-bottom: $spacing-extra-extra-extra-large; }
647
+
648
+ .mt0-m { margin-top: $spacing-none; }
649
+ .mt1-m { margin-top: $spacing-extra-small; }
650
+ .mt2-m { margin-top: $spacing-small; }
651
+ .mt3-m { margin-top: $spacing-medium; }
652
+ .mt4-m { margin-top: $spacing-large; }
653
+ .mt5-m { margin-top: $spacing-extra-large; }
654
+ .mt6-m { margin-top: $spacing-extra-extra-large; }
655
+ .mt7-m { margin-top: $spacing-extra-extra-extra-large; }
656
+
657
+ .mv0-m {
658
+ margin-top: $spacing-none;
659
+ margin-bottom: $spacing-none;
660
+ }
661
+ .mv1-m {
662
+ margin-top: $spacing-extra-small;
663
+ margin-bottom: $spacing-extra-small;
664
+ }
665
+ .mv2-m {
666
+ margin-top: $spacing-small;
667
+ margin-bottom: $spacing-small;
668
+ }
669
+ .mv3-m {
670
+ margin-top: $spacing-medium;
671
+ margin-bottom: $spacing-medium;
672
+ }
673
+ .mv4-m {
674
+ margin-top: $spacing-large;
675
+ margin-bottom: $spacing-large;
676
+ }
677
+ .mv5-m {
678
+ margin-top: $spacing-extra-large;
679
+ margin-bottom: $spacing-extra-large;
680
+ }
681
+ .mv6-m {
682
+ margin-top: $spacing-extra-extra-large;
683
+ margin-bottom: $spacing-extra-extra-large;
684
+ }
685
+ .mv7-m {
686
+ margin-top: $spacing-extra-extra-extra-large;
687
+ margin-bottom: $spacing-extra-extra-extra-large;
688
+ }
689
+
690
+ .mh0-m {
691
+ margin-left: $spacing-none;
692
+ margin-right: $spacing-none;
693
+ }
694
+ .mh1-m {
695
+ margin-left: $spacing-extra-small;
696
+ margin-right: $spacing-extra-small;
697
+ }
698
+ .mh2-m {
699
+ margin-left: $spacing-small;
700
+ margin-right: $spacing-small;
701
+ }
702
+ .mh3-m {
703
+ margin-left: $spacing-medium;
704
+ margin-right: $spacing-medium;
705
+ }
706
+ .mh4-m {
707
+ margin-left: $spacing-large;
708
+ margin-right: $spacing-large;
709
+ }
710
+ .mh5-m {
711
+ margin-left: $spacing-extra-large;
712
+ margin-right: $spacing-extra-large;
713
+ }
714
+ .mh6-m {
715
+ margin-left: $spacing-extra-extra-large;
716
+ margin-right: $spacing-extra-extra-large;
717
+ }
718
+ .mh7-m {
719
+ margin-left: $spacing-extra-extra-extra-large;
720
+ margin-right: $spacing-extra-extra-extra-large;
721
+ }
722
+
723
+ }
724
+
725
+ @media #{$breakpoint-large} {
726
+ .pa0-l { padding: $spacing-none; }
727
+ .pa1-l { padding: $spacing-extra-small; }
728
+ .pa2-l { padding: $spacing-small; }
729
+ .pa3-l { padding: $spacing-medium; }
730
+ .pa4-l { padding: $spacing-large; }
731
+ .pa5-l { padding: $spacing-extra-large; }
732
+ .pa6-l { padding: $spacing-extra-extra-large; }
733
+ .pa7-l { padding: $spacing-extra-extra-extra-large; }
734
+
735
+ .pl0-l { padding-left: $spacing-none; }
736
+ .pl1-l { padding-left: $spacing-extra-small; }
737
+ .pl2-l { padding-left: $spacing-small; }
738
+ .pl3-l { padding-left: $spacing-medium; }
739
+ .pl4-l { padding-left: $spacing-large; }
740
+ .pl5-l { padding-left: $spacing-extra-large; }
741
+ .pl6-l { padding-left: $spacing-extra-extra-large; }
742
+ .pl7-l { padding-left: $spacing-extra-extra-extra-large; }
743
+
744
+ .pr0-l { padding-right: $spacing-none; }
745
+ .pr1-l { padding-right: $spacing-extra-small; }
746
+ .pr2-l { padding-right: $spacing-small; }
747
+ .pr3-l { padding-right: $spacing-medium; }
748
+ .pr4-l { padding-right: $spacing-large; }
749
+ .pr5-l { padding-right: $spacing-extra-large; }
750
+ .pr6-l { padding-right: $spacing-extra-extra-large; }
751
+ .pr7-l { padding-right: $spacing-extra-extra-extra-large; }
752
+
753
+ .pb0-l { padding-bottom: $spacing-none; }
754
+ .pb1-l { padding-bottom: $spacing-extra-small; }
755
+ .pb2-l { padding-bottom: $spacing-small; }
756
+ .pb3-l { padding-bottom: $spacing-medium; }
757
+ .pb4-l { padding-bottom: $spacing-large; }
758
+ .pb5-l { padding-bottom: $spacing-extra-large; }
759
+ .pb6-l { padding-bottom: $spacing-extra-extra-large; }
760
+ .pb7-l { padding-bottom: $spacing-extra-extra-extra-large; }
761
+
762
+ .pt0-l { padding-top: $spacing-none; }
763
+ .pt1-l { padding-top: $spacing-extra-small; }
764
+ .pt2-l { padding-top: $spacing-small; }
765
+ .pt3-l { padding-top: $spacing-medium; }
766
+ .pt4-l { padding-top: $spacing-large; }
767
+ .pt5-l { padding-top: $spacing-extra-large; }
768
+ .pt6-l { padding-top: $spacing-extra-extra-large; }
769
+ .pt7-l { padding-top: $spacing-extra-extra-extra-large; }
770
+
771
+ .pv0-l {
772
+ padding-top: $spacing-none;
773
+ padding-bottom: $spacing-none;
774
+ }
775
+ .pv1-l {
776
+ padding-top: $spacing-extra-small;
777
+ padding-bottom: $spacing-extra-small;
778
+ }
779
+ .pv2-l {
780
+ padding-top: $spacing-small;
781
+ padding-bottom: $spacing-small;
782
+ }
783
+ .pv3-l {
784
+ padding-top: $spacing-medium;
785
+ padding-bottom: $spacing-medium;
786
+ }
787
+ .pv4-l {
788
+ padding-top: $spacing-large;
789
+ padding-bottom: $spacing-large;
790
+ }
791
+ .pv5-l {
792
+ padding-top: $spacing-extra-large;
793
+ padding-bottom: $spacing-extra-large;
794
+ }
795
+ .pv6-l {
796
+ padding-top: $spacing-extra-extra-large;
797
+ padding-bottom: $spacing-extra-extra-large;
798
+ }
799
+ .pv7-l {
800
+ padding-top: $spacing-extra-extra-extra-large;
801
+ padding-bottom: $spacing-extra-extra-extra-large;
802
+ }
803
+
804
+ .ph0-l {
805
+ padding-left: $spacing-none;
806
+ padding-right: $spacing-none;
807
+ }
808
+ .ph1-l {
809
+ padding-left: $spacing-extra-small;
810
+ padding-right: $spacing-extra-small;
811
+ }
812
+ .ph2-l {
813
+ padding-left: $spacing-small;
814
+ padding-right: $spacing-small;
815
+ }
816
+ .ph3-l {
817
+ padding-left: $spacing-medium;
818
+ padding-right: $spacing-medium;
819
+ }
820
+ .ph4-l {
821
+ padding-left: $spacing-large;
822
+ padding-right: $spacing-large;
823
+ }
824
+ .ph5-l {
825
+ padding-left: $spacing-extra-large;
826
+ padding-right: $spacing-extra-large;
827
+ }
828
+ .ph6-l {
829
+ padding-left: $spacing-extra-extra-large;
830
+ padding-right: $spacing-extra-extra-large;
831
+ }
832
+ .ph7-l {
833
+ padding-left: $spacing-extra-extra-extra-large;
834
+ padding-right: $spacing-extra-extra-extra-large;
835
+ }
836
+
837
+ .ma0-l { margin: $spacing-none; }
838
+ .ma1-l { margin: $spacing-extra-small; }
839
+ .ma2-l { margin: $spacing-small; }
840
+ .ma3-l { margin: $spacing-medium; }
841
+ .ma4-l { margin: $spacing-large; }
842
+ .ma5-l { margin: $spacing-extra-large; }
843
+ .ma6-l { margin: $spacing-extra-extra-large; }
844
+ .ma7-l { margin: $spacing-extra-extra-extra-large; }
845
+
846
+ .ml0-l { margin-left: $spacing-none; }
847
+ .ml1-l { margin-left: $spacing-extra-small; }
848
+ .ml2-l { margin-left: $spacing-small; }
849
+ .ml3-l { margin-left: $spacing-medium; }
850
+ .ml4-l { margin-left: $spacing-large; }
851
+ .ml5-l { margin-left: $spacing-extra-large; }
852
+ .ml6-l { margin-left: $spacing-extra-extra-large; }
853
+ .ml7-l { margin-left: $spacing-extra-extra-extra-large; }
854
+
855
+ .mr0-l { margin-right: $spacing-none; }
856
+ .mr1-l { margin-right: $spacing-extra-small; }
857
+ .mr2-l { margin-right: $spacing-small; }
858
+ .mr3-l { margin-right: $spacing-medium; }
859
+ .mr4-l { margin-right: $spacing-large; }
860
+ .mr5-l { margin-right: $spacing-extra-large; }
861
+ .mr6-l { margin-right: $spacing-extra-extra-large; }
862
+ .mr7-l { margin-right: $spacing-extra-extra-extra-large; }
863
+
864
+ .mb0-l { margin-bottom: $spacing-none; }
865
+ .mb1-l { margin-bottom: $spacing-extra-small; }
866
+ .mb2-l { margin-bottom: $spacing-small; }
867
+ .mb3-l { margin-bottom: $spacing-medium; }
868
+ .mb4-l { margin-bottom: $spacing-large; }
869
+ .mb5-l { margin-bottom: $spacing-extra-large; }
870
+ .mb6-l { margin-bottom: $spacing-extra-extra-large; }
871
+ .mb7-l { margin-bottom: $spacing-extra-extra-extra-large; }
872
+
873
+ .mt0-l { margin-top: $spacing-none; }
874
+ .mt1-l { margin-top: $spacing-extra-small; }
875
+ .mt2-l { margin-top: $spacing-small; }
876
+ .mt3-l { margin-top: $spacing-medium; }
877
+ .mt4-l { margin-top: $spacing-large; }
878
+ .mt5-l { margin-top: $spacing-extra-large; }
879
+ .mt6-l { margin-top: $spacing-extra-extra-large; }
880
+ .mt7-l { margin-top: $spacing-extra-extra-extra-large; }
881
+
882
+ .mv0-l {
883
+ margin-top: $spacing-none;
884
+ margin-bottom: $spacing-none;
885
+ }
886
+ .mv1-l {
887
+ margin-top: $spacing-extra-small;
888
+ margin-bottom: $spacing-extra-small;
889
+ }
890
+ .mv2-l {
891
+ margin-top: $spacing-small;
892
+ margin-bottom: $spacing-small;
893
+ }
894
+ .mv3-l {
895
+ margin-top: $spacing-medium;
896
+ margin-bottom: $spacing-medium;
897
+ }
898
+ .mv4-l {
899
+ margin-top: $spacing-large;
900
+ margin-bottom: $spacing-large;
901
+ }
902
+ .mv5-l {
903
+ margin-top: $spacing-extra-large;
904
+ margin-bottom: $spacing-extra-large;
905
+ }
906
+ .mv6-l {
907
+ margin-top: $spacing-extra-extra-large;
908
+ margin-bottom: $spacing-extra-extra-large;
909
+ }
910
+ .mv7-l {
911
+ margin-top: $spacing-extra-extra-extra-large;
912
+ margin-bottom: $spacing-extra-extra-extra-large;
913
+ }
914
+
915
+ .mh0-l {
916
+ margin-left: $spacing-none;
917
+ margin-right: $spacing-none;
918
+ }
919
+ .mh1-l {
920
+ margin-left: $spacing-extra-small;
921
+ margin-right: $spacing-extra-small;
922
+ }
923
+ .mh2-l {
924
+ margin-left: $spacing-small;
925
+ margin-right: $spacing-small;
926
+ }
927
+ .mh3-l {
928
+ margin-left: $spacing-medium;
929
+ margin-right: $spacing-medium;
930
+ }
931
+ .mh4-l {
932
+ margin-left: $spacing-large;
933
+ margin-right: $spacing-large;
934
+ }
935
+ .mh5-l {
936
+ margin-left: $spacing-extra-large;
937
+ margin-right: $spacing-extra-large;
938
+ }
939
+ .mh6-l {
940
+ margin-left: $spacing-extra-extra-large;
941
+ margin-right: $spacing-extra-extra-large;
942
+ }
943
+ .mh7-l {
944
+ margin-left: $spacing-extra-extra-extra-large;
945
+ margin-right: $spacing-extra-extra-extra-large;
946
+ }
947
+ }