1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 |
|
7 |
|
8 |
|
9 |
|
10 |
|
11 |
|
12 |
|
13 |
|
14 |
|
15 |
|
16 |
|
17 |
|
18 |
|
19 |
|
20 |
|
21 |
|
22 |
|
23 |
|
24 |
|
25 |
|
26 |
|
27 |
|
28 |
|
29 |
|
30 |
|
31 |
|
32 |
|
33 |
|
34 |
|
35 |
|
36 |
|
37 |
|
38 |
|
39 |
|
40 |
|
41 |
|
42 |
|
43 |
|
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 | }
|