UNPKG

3.87 kBCSSView Raw
1/*
2
3 WIDTHS
4 Docs: http://tachyons.io/docs/layout/widths/
5
6 Base:
7 w = 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
16 -10 = literal value 10%
17 -20 = literal value 20%
18 -25 = literal value 25%
19 -30 = literal value 30%
20 -33 = literal value 33%
21 -34 = literal value 34%
22 -40 = literal value 40%
23 -50 = literal value 50%
24 -60 = literal value 60%
25 -70 = literal value 70%
26 -75 = literal value 75%
27 -80 = literal value 80%
28 -90 = literal value 90%
29 -100 = literal value 100%
30
31 -third = 100% / 3 (Not supported in opera mini or IE8)
32 -two-thirds = 100% / 1.5 (Not supported in opera mini or IE8)
33 -auto = string value auto
34
35
36 Media Query Extensions:
37 -ns = not-small
38 -m = medium
39 -l = large
40
41 */
42
43/* Width Scale */
44
45.w1 { width: var(--width-1); }
46.w2 { width: var(--width-2); }
47.w3 { width: var(--width-3); }
48.w4 { width: var(--width-4); }
49.w5 { width: var(--width-5); }
50
51.w-10 { width: 10%; }
52.w-20 { width: 20%; }
53.w-25 { width: 25%; }
54.w-30 { width: 30%; }
55.w-33 { width: 33%; }
56.w-34 { width: 34%; }
57.w-40 { width: 40%; }
58.w-50 { width: 50%; }
59.w-60 { width: 60%; }
60.w-70 { width: 70%; }
61.w-75 { width: 75%; }
62.w-80 { width: 80%; }
63.w-90 { width: 90%; }
64.w-100 { width: 100%; }
65
66.w-third { width: calc(100% / 3); }
67.w-two-thirds { width: calc(100% / 1.5); }
68.w-auto { width: auto; }
69
70@media (--breakpoint-not-small) {
71 .w1-ns { width: var(--width-1); }
72 .w2-ns { width: var(--width-2); }
73 .w3-ns { width: var(--width-3); }
74 .w4-ns { width: var(--width-4); }
75 .w5-ns { width: var(--width-5); }
76 .w-10-ns { width: 10%; }
77 .w-20-ns { width: 20%; }
78 .w-25-ns { width: 25%; }
79 .w-30-ns { width: 30%; }
80 .w-33-ns { width: 33%; }
81 .w-34-ns { width: 34%; }
82 .w-40-ns { width: 40%; }
83 .w-50-ns { width: 50%; }
84 .w-60-ns { width: 60%; }
85 .w-70-ns { width: 70%; }
86 .w-75-ns { width: 75%; }
87 .w-80-ns { width: 80%; }
88 .w-90-ns { width: 90%; }
89 .w-100-ns { width: 100%; }
90 .w-third-ns { width: calc(100% / 3); }
91 .w-two-thirds-ns { width: calc(100% / 1.5); }
92 .w-auto-ns { width: auto; }
93}
94
95@media (--breakpoint-medium) {
96 .w1-m { width: var(--width-1); }
97 .w2-m { width: var(--width-2); }
98 .w3-m { width: var(--width-3); }
99 .w4-m { width: var(--width-4); }
100 .w5-m { width: var(--width-5); }
101 .w-10-m { width: 10%; }
102 .w-20-m { width: 20%; }
103 .w-25-m { width: 25%; }
104 .w-30-m { width: 30%; }
105 .w-33-m { width: 33%; }
106 .w-34-m { width: 34%; }
107 .w-40-m { width: 40%; }
108 .w-50-m { width: 50%; }
109 .w-60-m { width: 60%; }
110 .w-70-m { width: 70%; }
111 .w-75-m { width: 75%; }
112 .w-80-m { width: 80%; }
113 .w-90-m { width: 90%; }
114 .w-100-m { width: 100%; }
115 .w-third-m { width: calc(100% / 3); }
116 .w-two-thirds-m { width: calc(100% / 1.5); }
117 .w-auto-m { width: auto; }
118}
119
120@media (--breakpoint-large) {
121 .w1-l { width: var(--width-1); }
122 .w2-l { width: var(--width-2); }
123 .w3-l { width: var(--width-3); }
124 .w4-l { width: var(--width-4); }
125 .w5-l { width: var(--width-5); }
126 .w-10-l { width: 10%; }
127 .w-20-l { width: 20%; }
128 .w-25-l { width: 25%; }
129 .w-30-l { width: 30%; }
130 .w-33-l { width: 33%; }
131 .w-34-l { width: 34%; }
132 .w-40-l { width: 40%; }
133 .w-50-l { width: 50%; }
134 .w-60-l { width: 60%; }
135 .w-70-l { width: 70%; }
136 .w-75-l { width: 75%; }
137 .w-80-l { width: 80%; }
138 .w-90-l { width: 90%; }
139 .w-100-l { width: 100%; }
140 .w-third-l { width: calc(100% / 3); }
141 .w-two-thirds-l { width: calc(100% / 1.5); }
142 .w-auto-l { width: auto; }
143}