|
72 | 72 | * <div class="inline-block bg-darken10">inline-block</div> |
73 | 73 | * <div class="none bg-darken10">none</div> |
74 | 74 | */ |
75 | | -.inline { display: inline !important; } |
76 | | -.block { display: block !important; } |
77 | | -.inline-block { display: inline-block !important; } |
78 | | -.none { display: none !important; } |
| 75 | +.inline { |
| 76 | + display: inline !important; |
| 77 | +} |
| 78 | +.block { |
| 79 | + display: block !important; |
| 80 | +} |
| 81 | +.inline-block { |
| 82 | + display: inline-block !important; |
| 83 | +} |
| 84 | +.none { |
| 85 | + display: none !important; |
| 86 | +} |
79 | 87 | /** @endgroup */ |
80 | 88 |
|
81 | 89 | /** |
|
102 | 110 | * --> |
103 | 111 | * </div> |
104 | 112 | */ |
105 | | -.fixed { position: fixed !important; } |
106 | | -.absolute { position: absolute !important; } |
107 | | -.relative { position: relative !important; } |
108 | | -.static { position: static !important; } |
109 | | -.sticky { position: sticky !important; } |
| 113 | +.fixed { |
| 114 | + position: fixed !important; |
| 115 | +} |
| 116 | +.absolute { |
| 117 | + position: absolute !important; |
| 118 | +} |
| 119 | +.relative { |
| 120 | + position: relative !important; |
| 121 | +} |
| 122 | +.static { |
| 123 | + position: static !important; |
| 124 | +} |
| 125 | +.sticky { |
| 126 | + position: sticky !important; |
| 127 | +} |
110 | 128 | /** @endgroup */ |
111 | 129 |
|
112 | 130 | /** |
|
122 | 140 | * <div class="absolute bg-darken10 top left right align-center">top left right</div> |
123 | 141 | * </div> |
124 | 142 | */ |
125 | | -.top { top: 0 !important; } |
126 | | -.right { right: 0 !important; } |
127 | | -.left { left: 0 !important; } |
128 | | -.bottom { bottom: 0 !important; } |
| 143 | +.top { |
| 144 | + top: 0 !important; |
| 145 | +} |
| 146 | +.right { |
| 147 | + right: 0 !important; |
| 148 | +} |
| 149 | +.left { |
| 150 | + left: 0 !important; |
| 151 | +} |
| 152 | +.bottom { |
| 153 | + bottom: 0 !important; |
| 154 | +} |
129 | 155 | /** @endgroup */ |
130 | 156 |
|
131 | 157 | /** |
|
141 | 167 | * <div class="absolute z1-neg1 bg-blue px6 py6 mt24 ml60">z-neg1</div> |
142 | 168 | * </div> |
143 | 169 | */ |
144 | | -.z-neg1 { z-index: -1 !important; } |
145 | | -.z0 { z-index: 0 !important; } |
146 | | -.z1 { z-index: 1 !important; } |
147 | | -.z2 { z-index: 2 !important; } |
148 | | -.z3 { z-index: 3 !important; } |
149 | | -.z4 { z-index: 4 !important; } |
150 | | -.z5 { z-index: 5 !important; } |
| 170 | +.z-neg1 { |
| 171 | + z-index: -1 !important; |
| 172 | +} |
| 173 | +.z0 { |
| 174 | + z-index: 0 !important; |
| 175 | +} |
| 176 | +.z1 { |
| 177 | + z-index: 1 !important; |
| 178 | +} |
| 179 | +.z2 { |
| 180 | + z-index: 2 !important; |
| 181 | +} |
| 182 | +.z3 { |
| 183 | + z-index: 3 !important; |
| 184 | +} |
| 185 | +.z4 { |
| 186 | + z-index: 4 !important; |
| 187 | +} |
| 188 | +.z5 { |
| 189 | + z-index: 5 !important; |
| 190 | +} |
151 | 191 | /** @endgroup */ |
152 | 192 |
|
153 | 193 | /** |
|
163 | 203 | */ |
164 | 204 |
|
165 | 205 | /** |
166 | | - * Set `auto` margins on left and right. This pattern is useful for horizontally centering block elements |
| 206 | + * Set `auto` margins on left and right. This pattern is useful for horizontally centering block elements |
167 | 207 | * or aligning block elements to the start or end of their container. |
168 | 208 | * |
169 | 209 | * @example |
|
172 | 212 | * <div class='mr-auto w60 bg-darken10'>mr-auto</div> |
173 | 213 | * @memberof Margins |
174 | 214 | */ |
175 | | -.mx-auto { margin-left: auto !important; margin-right: auto !important; } |
176 | | -.ml-auto { margin-left: auto !important; } |
177 | | -.mr-auto { margin-right: auto !important; } |
| 215 | +.mx-auto { |
| 216 | + margin-left: auto !important; |
| 217 | + margin-right: auto !important; |
| 218 | +} |
| 219 | +.ml-auto { |
| 220 | + margin-left: auto !important; |
| 221 | +} |
| 222 | +.mr-auto { |
| 223 | + margin-right: auto !important; |
| 224 | +} |
178 | 225 |
|
179 | 226 | /** |
180 | 227 | * All padding classes fit the following pattern: `m<side><size>`. |
|
214 | 261 | * <div class='bg-darken10 flex'>flex</div> |
215 | 262 | * <div class='bg-darken10 inline-flex'>inline-flex</div> |
216 | 263 | */ |
217 | | -.flex { display: flex !important; } |
218 | | -.inline-flex { display: inline-flex !important; } |
| 264 | +.flex { |
| 265 | + display: flex !important; |
| 266 | +} |
| 267 | +.inline-flex { |
| 268 | + display: inline-flex !important; |
| 269 | +} |
219 | 270 | /** @endgroup */ |
220 | 271 |
|
221 | 272 | /** |
|
229 | 280 | * <span>3</span> |
230 | 281 | * </div> |
231 | 282 | */ |
232 | | -.flex--column { flex-direction: column !important; } |
| 283 | +.flex--column { |
| 284 | + flex-direction: column !important; |
| 285 | +} |
233 | 286 |
|
234 | 287 | /** |
235 | 288 | * Set the direction of the main axis to bottom-to-top (default is left-to-right). |
|
242 | 295 | * <span>3</span> |
243 | 296 | * </div> |
244 | 297 | */ |
245 | | -.flex--column-reverse { flex-direction: column-reverse !important; } |
| 298 | +.flex--column-reverse { |
| 299 | + flex-direction: column-reverse !important; |
| 300 | +} |
246 | 301 |
|
247 | 302 | /** |
248 | 303 | * Set the direction of the main axis to left-to-right (the default value of `flex`). |
|
255 | 310 | * <span>3</span> |
256 | 311 | * </div> |
257 | 312 | */ |
258 | | -.flex--row { flex-direction: row !important; } |
| 313 | +.flex--row { |
| 314 | + flex-direction: row !important; |
| 315 | +} |
259 | 316 |
|
260 | 317 | /** |
261 | 318 | * Set the direction of the main axis to right-to-left (default is left-to-right). |
|
268 | 325 | * <span>3</span> |
269 | 326 | * </div> |
270 | 327 | */ |
271 | | -.flex--row-reverse { flex-direction: row-reverse !important; } |
| 328 | +.flex--row-reverse { |
| 329 | + flex-direction: row-reverse !important; |
| 330 | +} |
272 | 331 |
|
273 | 332 | /** |
274 | 333 | * Center an element's children on the main axis. |
|
279 | 338 | * <div class='bg-darken10'>child</div> |
280 | 339 | * </div> |
281 | 340 | */ |
282 | | -.flex--center-main { justify-content: center !important; } |
| 341 | +.flex--center-main { |
| 342 | + justify-content: center !important; |
| 343 | +} |
283 | 344 |
|
284 | 345 | /** |
285 | 346 | * Center an element's children on the cross axis. |
|
290 | 351 | * <div class='bg-darken10'>child</div> |
291 | 352 | * </div> |
292 | 353 | */ |
293 | | -.flex--center-cross { align-items: center !important; } |
| 354 | +.flex--center-cross { |
| 355 | + align-items: center !important; |
| 356 | +} |
294 | 357 |
|
295 | 358 | /** |
296 | 359 | * Align an element's children to the start of the cross axis. |
|
302 | 365 | * <div class='bg-darken10'>child</div> |
303 | 366 | * </div> |
304 | 367 | */ |
305 | | -.flex--start-cross { align-items: flex-start !important; } |
| 368 | +.flex--start-cross { |
| 369 | + align-items: flex-start !important; |
| 370 | +} |
306 | 371 |
|
307 | 372 | /** |
308 | 373 | * Align an element's children to the start of the main axis. |
|
313 | 378 | * <div class='bg-darken10'>child</div> |
314 | 379 | * </div> |
315 | 380 | */ |
316 | | -.flex--start-main { justify-content: flex-start !important; } |
| 381 | +.flex--start-main { |
| 382 | + justify-content: flex-start !important; |
| 383 | +} |
317 | 384 |
|
318 | 385 | /** |
319 | 386 | * Align an element's children to the end of the cross axis. |
|
325 | 392 | * <div class='bg-darken10'>child</div> |
326 | 393 | * </div> |
327 | 394 | */ |
328 | | -.flex--end-cross { align-items: flex-end !important; } |
| 395 | +.flex--end-cross { |
| 396 | + align-items: flex-end !important; |
| 397 | +} |
329 | 398 |
|
330 | 399 | /** |
331 | 400 | * Align an element's children to the end of the main axis. |
|
336 | 405 | * <div class='bg-darken10'>child</div> |
337 | 406 | * </div> |
338 | 407 | */ |
339 | | -.flex--end-main { justify-content: flex-end !important; } |
| 408 | +.flex--end-main { |
| 409 | + justify-content: flex-end !important; |
| 410 | +} |
340 | 411 |
|
341 | 412 | /** |
342 | 413 | * Allow children to wrap. By default, they are all forced onto one line. |
|
348 | 419 | * <div class='bg-darken10 w600'>child</div> |
349 | 420 | * </div> |
350 | 421 | */ |
351 | | -.flex--wrap { flex-wrap: wrap !important; } |
| 422 | +.flex--wrap { |
| 423 | + flex-wrap: wrap !important; |
| 424 | +} |
352 | 425 |
|
353 | 426 | /** |
354 | 427 | * Stretch children to fill the parent container along the cross axis. |
|
359 | 432 | * <div class='bg-darken10'>child</div> |
360 | 433 | * </div> |
361 | 434 | */ |
362 | | -.flex--stretch-cross { align-items: stretch !important; } |
| 435 | +.flex--stretch-cross { |
| 436 | + align-items: stretch !important; |
| 437 | +} |
363 | 438 |
|
364 | 439 | /** |
365 | 440 | * Evenly distribute children across the line, so first child is at the start |
|
372 | 447 | * <div class='bg-darken10'>child</div> |
373 | 448 | * </div> |
374 | 449 | */ |
375 | | -.flex--space-between-main { justify-content: space-between !important; } |
| 450 | +.flex--space-between-main { |
| 451 | + justify-content: space-between !important; |
| 452 | +} |
376 | 453 |
|
377 | 454 | /** |
378 | 455 | * Make a child to grow to fill whatever space is available in the main axis of the parent container. |
|
479 | 556 | * <div class='bg-darken10'> without .clearfix </div> |
480 | 557 | * <div class='fl unfloat'>unfloat</div> |
481 | 558 | */ |
482 | | -.fl { float: left !important; } |
483 | | -.fr { float: right !important; } |
484 | | -.unfloat { float: none !important; } |
| 559 | +.fl { |
| 560 | + float: left !important; |
| 561 | +} |
| 562 | +.fr { |
| 563 | + float: right !important; |
| 564 | +} |
| 565 | +.unfloat { |
| 566 | + float: none !important; |
| 567 | +} |
485 | 568 | .clearfix::after { |
486 | 569 | content: '' !important; |
487 | 570 | display: block !important; |
|
0 commit comments