1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 |
|
7 |
|
8 |
|
9 |
|
10 |
|
11 |
|
12 | .flex { display: flex; }
|
13 | .inline-flex { display: inline-flex; }
|
14 |
|
15 |
|
16 |
|
17 | .flex-auto {
|
18 | flex: 1 1 auto;
|
19 | min-width: 0;
|
20 | min-height: 0;
|
21 | }
|
22 |
|
23 | .flex-none { flex: none; }
|
24 |
|
25 | .flex-column { flex-direction: column; }
|
26 | .flex-row { flex-direction: row; }
|
27 | .flex-wrap { flex-wrap: wrap; }
|
28 | .flex-nowrap { flex-wrap: nowrap; }
|
29 | .flex-wrap-reverse { flex-wrap: wrap-reverse; }
|
30 | .flex-column-reverse { flex-direction: column-reverse; }
|
31 | .flex-row-reverse { flex-direction: row-reverse; }
|
32 |
|
33 | .items-start { align-items: flex-start; }
|
34 | .items-end { align-items: flex-end; }
|
35 | .items-center { align-items: center; }
|
36 | .items-baseline { align-items: baseline; }
|
37 | .items-stretch { align-items: stretch; }
|
38 |
|
39 | .self-start { align-self: flex-start; }
|
40 | .self-end { align-self: flex-end; }
|
41 | .self-center { align-self: center; }
|
42 | .self-baseline { align-self: baseline; }
|
43 | .self-stretch { align-self: stretch; }
|
44 |
|
45 | .justify-start { justify-content: flex-start; }
|
46 | .justify-end { justify-content: flex-end; }
|
47 | .justify-center { justify-content: center; }
|
48 | .justify-between { justify-content: space-between; }
|
49 | .justify-around { justify-content: space-around; }
|
50 |
|
51 | .content-start { align-content: flex-start; }
|
52 | .content-end { align-content: flex-end; }
|
53 | .content-center { align-content: center; }
|
54 | .content-between { align-content: space-between; }
|
55 | .content-around { align-content: space-around; }
|
56 | .content-stretch { align-content: stretch; }
|
57 |
|
58 | .order-0 { order: 0; }
|
59 | .order-1 { order: 1; }
|
60 | .order-2 { order: 2; }
|
61 | .order-3 { order: 3; }
|
62 | .order-4 { order: 4; }
|
63 | .order-5 { order: 5; }
|
64 | .order-6 { order: 6; }
|
65 | .order-7 { order: 7; }
|
66 | .order-8 { order: 8; }
|
67 | .order-last { order: 99999; }
|
68 |
|
69 | .flex-grow-0 { flex-grow: 0; }
|
70 | .flex-grow-1 { flex-grow: 1; }
|
71 |
|
72 | .flex-shrink-0 { flex-shrink: 0; }
|
73 | .flex-shrink-1 { flex-shrink: 1; }
|
74 |
|
75 | @media (--breakpoint-not-small) {
|
76 | .flex-ns { display: flex; }
|
77 | .inline-flex-ns { display: inline-flex; }
|
78 | .flex-auto-ns {
|
79 | flex: 1 1 auto;
|
80 | min-width: 0;
|
81 | min-height: 0;
|
82 | }
|
83 | .flex-none-ns { flex: none; }
|
84 | .flex-column-ns { flex-direction: column; }
|
85 | .flex-row-ns { flex-direction: row; }
|
86 | .flex-wrap-ns { flex-wrap: wrap; }
|
87 | .flex-nowrap-ns { flex-wrap: nowrap; }
|
88 | .flex-wrap-reverse-ns { flex-wrap: wrap-reverse; }
|
89 | .flex-column-reverse-ns { flex-direction: column-reverse; }
|
90 | .flex-row-reverse-ns { flex-direction: row-reverse; }
|
91 | .items-start-ns { align-items: flex-start; }
|
92 | .items-end-ns { align-items: flex-end; }
|
93 | .items-center-ns { align-items: center; }
|
94 | .items-baseline-ns { align-items: baseline; }
|
95 | .items-stretch-ns { align-items: stretch; }
|
96 |
|
97 | .self-start-ns { align-self: flex-start; }
|
98 | .self-end-ns { align-self: flex-end; }
|
99 | .self-center-ns { align-self: center; }
|
100 | .self-baseline-ns { align-self: baseline; }
|
101 | .self-stretch-ns { align-self: stretch; }
|
102 |
|
103 | .justify-start-ns { justify-content: flex-start; }
|
104 | .justify-end-ns { justify-content: flex-end; }
|
105 | .justify-center-ns { justify-content: center; }
|
106 | .justify-between-ns { justify-content: space-between; }
|
107 | .justify-around-ns { justify-content: space-around; }
|
108 |
|
109 | .content-start-ns { align-content: flex-start; }
|
110 | .content-end-ns { align-content: flex-end; }
|
111 | .content-center-ns { align-content: center; }
|
112 | .content-between-ns { align-content: space-between; }
|
113 | .content-around-ns { align-content: space-around; }
|
114 | .content-stretch-ns { align-content: stretch; }
|
115 |
|
116 | .order-0-ns { order: 0; }
|
117 | .order-1-ns { order: 1; }
|
118 | .order-2-ns { order: 2; }
|
119 | .order-3-ns { order: 3; }
|
120 | .order-4-ns { order: 4; }
|
121 | .order-5-ns { order: 5; }
|
122 | .order-6-ns { order: 6; }
|
123 | .order-7-ns { order: 7; }
|
124 | .order-8-ns { order: 8; }
|
125 | .order-last-ns { order: 99999; }
|
126 |
|
127 | .flex-grow-0-ns { flex-grow: 0; }
|
128 | .flex-grow-1-ns { flex-grow: 1; }
|
129 |
|
130 | .flex-shrink-0-ns { flex-shrink: 0; }
|
131 | .flex-shrink-1-ns { flex-shrink: 1; }
|
132 | }
|
133 | @media (--breakpoint-medium) {
|
134 | .flex-m { display: flex; }
|
135 | .inline-flex-m { display: inline-flex; }
|
136 | .flex-auto-m {
|
137 | flex: 1 1 auto;
|
138 | min-width: 0;
|
139 | min-height: 0;
|
140 | }
|
141 | .flex-none-m { flex: none; }
|
142 | .flex-column-m { flex-direction: column; }
|
143 | .flex-row-m { flex-direction: row; }
|
144 | .flex-wrap-m { flex-wrap: wrap; }
|
145 | .flex-nowrap-m { flex-wrap: nowrap; }
|
146 | .flex-wrap-reverse-m { flex-wrap: wrap-reverse; }
|
147 | .flex-column-reverse-m { flex-direction: column-reverse; }
|
148 | .flex-row-reverse-m { flex-direction: row-reverse; }
|
149 | .items-start-m { align-items: flex-start; }
|
150 | .items-end-m { align-items: flex-end; }
|
151 | .items-center-m { align-items: center; }
|
152 | .items-baseline-m { align-items: baseline; }
|
153 | .items-stretch-m { align-items: stretch; }
|
154 |
|
155 | .self-start-m { align-self: flex-start; }
|
156 | .self-end-m { align-self: flex-end; }
|
157 | .self-center-m { align-self: center; }
|
158 | .self-baseline-m { align-self: baseline; }
|
159 | .self-stretch-m { align-self: stretch; }
|
160 |
|
161 | .justify-start-m { justify-content: flex-start; }
|
162 | .justify-end-m { justify-content: flex-end; }
|
163 | .justify-center-m { justify-content: center; }
|
164 | .justify-between-m { justify-content: space-between; }
|
165 | .justify-around-m { justify-content: space-around; }
|
166 |
|
167 | .content-start-m { align-content: flex-start; }
|
168 | .content-end-m { align-content: flex-end; }
|
169 | .content-center-m { align-content: center; }
|
170 | .content-between-m { align-content: space-between; }
|
171 | .content-around-m { align-content: space-around; }
|
172 | .content-stretch-m { align-content: stretch; }
|
173 |
|
174 | .order-0-m { order: 0; }
|
175 | .order-1-m { order: 1; }
|
176 | .order-2-m { order: 2; }
|
177 | .order-3-m { order: 3; }
|
178 | .order-4-m { order: 4; }
|
179 | .order-5-m { order: 5; }
|
180 | .order-6-m { order: 6; }
|
181 | .order-7-m { order: 7; }
|
182 | .order-8-m { order: 8; }
|
183 | .order-last-m { order: 99999; }
|
184 |
|
185 | .flex-grow-0-m { flex-grow: 0; }
|
186 | .flex-grow-1-m { flex-grow: 1; }
|
187 |
|
188 | .flex-shrink-0-m { flex-shrink: 0; }
|
189 | .flex-shrink-1-m { flex-shrink: 1; }
|
190 | }
|
191 |
|
192 | @media (--breakpoint-large) {
|
193 | .flex-l { display: flex; }
|
194 | .inline-flex-l { display: inline-flex; }
|
195 | .flex-auto-l {
|
196 | flex: 1 1 auto;
|
197 | min-width: 0;
|
198 | min-height: 0;
|
199 | }
|
200 | .flex-none-l { flex: none; }
|
201 | .flex-column-l { flex-direction: column; }
|
202 | .flex-row-l { flex-direction: row; }
|
203 | .flex-wrap-l { flex-wrap: wrap; }
|
204 | .flex-nowrap-l { flex-wrap: nowrap; }
|
205 | .flex-wrap-reverse-l { flex-wrap: wrap-reverse; }
|
206 | .flex-column-reverse-l { flex-direction: column-reverse; }
|
207 | .flex-row-reverse-l { flex-direction: row-reverse; }
|
208 |
|
209 | .items-start-l { align-items: flex-start; }
|
210 | .items-end-l { align-items: flex-end; }
|
211 | .items-center-l { align-items: center; }
|
212 | .items-baseline-l { align-items: baseline; }
|
213 | .items-stretch-l { align-items: stretch; }
|
214 |
|
215 | .self-start-l { align-self: flex-start; }
|
216 | .self-end-l { align-self: flex-end; }
|
217 | .self-center-l { align-self: center; }
|
218 | .self-baseline-l { align-self: baseline; }
|
219 | .self-stretch-l { align-self: stretch; }
|
220 |
|
221 | .justify-start-l { justify-content: flex-start; }
|
222 | .justify-end-l { justify-content: flex-end; }
|
223 | .justify-center-l { justify-content: center; }
|
224 | .justify-between-l { justify-content: space-between; }
|
225 | .justify-around-l { justify-content: space-around; }
|
226 |
|
227 | .content-start-l { align-content: flex-start; }
|
228 | .content-end-l { align-content: flex-end; }
|
229 | .content-center-l { align-content: center; }
|
230 | .content-between-l { align-content: space-between; }
|
231 | .content-around-l { align-content: space-around; }
|
232 | .content-stretch-l { align-content: stretch; }
|
233 |
|
234 | .order-0-l { order: 0; }
|
235 | .order-1-l { order: 1; }
|
236 | .order-2-l { order: 2; }
|
237 | .order-3-l { order: 3; }
|
238 | .order-4-l { order: 4; }
|
239 | .order-5-l { order: 5; }
|
240 | .order-6-l { order: 6; }
|
241 | .order-7-l { order: 7; }
|
242 | .order-8-l { order: 8; }
|
243 | .order-last-l { order: 99999; }
|
244 |
|
245 | .flex-grow-0-l { flex-grow: 0; }
|
246 | .flex-grow-1-l { flex-grow: 1; }
|
247 |
|
248 | .flex-shrink-0-l { flex-shrink: 0; }
|
249 | .flex-shrink-1-l { flex-shrink: 1; }
|
250 | }
|