UNPKG

2.66 kBCSSView Raw
1/*
2
3 MAX WIDTHS
4 Docs: http://tachyons.io/docs/layout/max-widths/
5
6 Base:
7 mw = max-width
8
9 Modifiers
10 1 = 1st step in width scale
11 2 = 2nd step in width scale
12 3 = 3rd step in width scale
13 4 = 4th step in width scale
14 5 = 5th step in width scale
15 6 = 6st step in width scale
16 7 = 7nd step in width scale
17 8 = 8rd step in width scale
18 9 = 9th step in width scale
19
20 -100 = literal value 100%
21
22 -none = string value none
23
24
25 Media Query Extensions:
26 -ns = not-small
27 -m = medium
28 -l = large
29
30*/
31
32/* Max Width Percentages */
33
34.mw-100 { max-width: 100%; }
35
36/* Max Width Scale */
37
38.mw1 { max-width: var(--max-width-1); }
39.mw2 { max-width: var(--max-width-2); }
40.mw3 { max-width: var(--max-width-3); }
41.mw4 { max-width: var(--max-width-4); }
42.mw5 { max-width: var(--max-width-5); }
43.mw6 { max-width: var(--max-width-6); }
44.mw7 { max-width: var(--max-width-7); }
45.mw8 { max-width: var(--max-width-8); }
46.mw9 { max-width: var(--max-width-9); }
47
48/* Max Width String Properties */
49
50.mw-none { max-width: none; }
51
52@media (--breakpoint-not-small) {
53 .mw-100-ns { max-width: 100%; }
54
55 .mw1-ns { max-width: var(--max-width-1); }
56 .mw2-ns { max-width: var(--max-width-2); }
57 .mw3-ns { max-width: var(--max-width-3); }
58 .mw4-ns { max-width: var(--max-width-4); }
59 .mw5-ns { max-width: var(--max-width-5); }
60 .mw6-ns { max-width: var(--max-width-6); }
61 .mw7-ns { max-width: var(--max-width-7); }
62 .mw8-ns { max-width: var(--max-width-8); }
63 .mw9-ns { max-width: var(--max-width-9); }
64
65 .mw-none-ns { max-width: none; }
66}
67
68@media (--breakpoint-medium) {
69 .mw-100-m { max-width: 100%; }
70
71 .mw1-m { max-width: var(--max-width-1); }
72 .mw2-m { max-width: var(--max-width-2); }
73 .mw3-m { max-width: var(--max-width-3); }
74 .mw4-m { max-width: var(--max-width-4); }
75 .mw5-m { max-width: var(--max-width-5); }
76 .mw6-m { max-width: var(--max-width-6); }
77 .mw7-m { max-width: var(--max-width-7); }
78 .mw8-m { max-width: var(--max-width-8); }
79 .mw9-m { max-width: var(--max-width-9); }
80
81 .mw-none-m { max-width: none; }
82}
83
84@media (--breakpoint-large) {
85 .mw-100-l { max-width: 100%; }
86
87 .mw1-l { max-width: var(--max-width-1); }
88 .mw2-l { max-width: var(--max-width-2); }
89 .mw3-l { max-width: var(--max-width-3); }
90 .mw4-l { max-width: var(--max-width-4); }
91 .mw5-l { max-width: var(--max-width-5); }
92 .mw6-l { max-width: var(--max-width-6); }
93 .mw7-l { max-width: var(--max-width-7); }
94 .mw8-l { max-width: var(--max-width-8); }
95 .mw9-l { max-width: var(--max-width-9); }
96
97 .mw-none-l { max-width: none; }
98}