oppi.li
1.simple-grid {
2 display: grid;
3 gap: 1em 2em;
4}
5
6@media (min-width: 30em) {
7 .simple-grid.grid-2 {
8 grid-template-columns: repeat(2, 1fr);
9 }
10}
11
12/* based on Fomantic UI grid module, with just the parts extracted that we use. If you find any
13 unused rules here after refactoring, please remove them. */
14
15.ui.grid {
16 display: flex;
17 flex-direction: row;
18 flex-wrap: wrap;
19 align-items: stretch;
20 padding: 0;
21 margin: -1rem;
22}
23
24.ui.relaxed.grid {
25 margin-left: -1.5rem;
26 margin-right: -1.5rem;
27}
28.ui[class*="very relaxed"].grid {
29 margin-left: -2.5rem;
30 margin-right: -2.5rem;
31}
32
33.ui.grid + .grid {
34 margin-top: 1rem;
35}
36
37.ui.grid > .column:not(.row),
38.ui.grid > .row > .column {
39 position: relative;
40 display: inline-block;
41 width: 6.25%;
42 padding-left: 1rem;
43 padding-right: 1rem;
44 vertical-align: top;
45}
46.ui.grid > * {
47 padding-left: 1rem;
48 padding-right: 1rem;
49}
50
51.ui.grid > .row {
52 position: relative;
53 display: flex;
54 flex-direction: row;
55 flex-wrap: wrap;
56 justify-content: inherit;
57 align-items: stretch;
58 width: 100% !important;
59 padding: 0;
60 padding-top: 1rem;
61 padding-bottom: 1rem;
62}
63
64.ui.grid > .column:not(.row) {
65 padding-top: 1rem;
66 padding-bottom: 1rem;
67}
68.ui.grid > .row > .column {
69 margin-top: 0;
70 margin-bottom: 0;
71}
72
73.ui.grid > .row > img,
74.ui.grid > .row > .column > img {
75 max-width: 100%;
76}
77
78.ui.grid > .ui.grid:first-child {
79 margin-top: 0;
80}
81.ui.grid > .ui.grid:last-child {
82 margin-bottom: 0;
83}
84
85.ui.grid .aligned.row > .column > .segment:not(.compact):not(.attached),
86.ui.aligned.grid .column > .segment:not(.compact):not(.attached) {
87 width: 100%;
88}
89
90.ui.grid .row + .ui.divider {
91 flex-grow: 1;
92 margin: 1rem;
93}
94.ui.grid .column + .ui.vertical.divider {
95 height: calc(50% - 1rem);
96}
97
98.ui.grid > .row > .column:last-child > .horizontal.segment,
99.ui.grid > .column:last-child > .horizontal.segment {
100 box-shadow: none;
101}
102
103@media only screen and (max-width: 767.98px) {
104 .ui.page.grid {
105 width: auto;
106 padding-left: 0;
107 padding-right: 0;
108 margin-left: 0;
109 margin-right: 0;
110 }
111}
112@media only screen and (min-width: 768px) and (max-width: 991.98px) {
113 .ui.page.grid {
114 width: auto;
115 margin-left: 0;
116 margin-right: 0;
117 padding-left: 2em;
118 padding-right: 2em;
119 }
120}
121@media only screen and (min-width: 992px) and (max-width: 1199.98px) {
122 .ui.page.grid {
123 width: auto;
124 margin-left: 0;
125 margin-right: 0;
126 padding-left: 3%;
127 padding-right: 3%;
128 }
129}
130@media only screen and (min-width: 1200px) and (max-width: 1919.98px) {
131 .ui.page.grid {
132 width: auto;
133 margin-left: 0;
134 margin-right: 0;
135 padding-left: 15%;
136 padding-right: 15%;
137 }
138}
139@media only screen and (min-width: 1920px) {
140 .ui.page.grid {
141 width: auto;
142 margin-left: 0;
143 margin-right: 0;
144 padding-left: 23%;
145 padding-right: 23%;
146 }
147}
148
149.ui.grid > .column:only-child,
150.ui.grid > .row > .column:only-child {
151 width: 100%;
152}
153
154.ui[class*="one column"].grid > .row > .column,
155.ui[class*="one column"].grid > .column:not(.row) {
156 width: 100%;
157}
158.ui[class*="two column"].grid > .row > .column,
159.ui[class*="two column"].grid > .column:not(.row) {
160 width: 50%;
161}
162.ui[class*="three column"].grid > .row > .column,
163.ui[class*="three column"].grid > .column:not(.row) {
164 width: 33.33333333%;
165}
166.ui[class*="four column"].grid > .row > .column,
167.ui[class*="four column"].grid > .column:not(.row) {
168 width: 25%;
169}
170.ui[class*="five column"].grid > .row > .column,
171.ui[class*="five column"].grid > .column:not(.row) {
172 width: 20%;
173}
174.ui[class*="six column"].grid > .row > .column,
175.ui[class*="six column"].grid > .column:not(.row) {
176 width: 16.66666667%;
177}
178.ui[class*="seven column"].grid > .row > .column,
179.ui[class*="seven column"].grid > .column:not(.row) {
180 width: 14.28571429%;
181}
182.ui[class*="eight column"].grid > .row > .column,
183.ui[class*="eight column"].grid > .column:not(.row) {
184 width: 12.5%;
185}
186.ui[class*="nine column"].grid > .row > .column,
187.ui[class*="nine column"].grid > .column:not(.row) {
188 width: 11.11111111%;
189}
190.ui[class*="ten column"].grid > .row > .column,
191.ui[class*="ten column"].grid > .column:not(.row) {
192 width: 10%;
193}
194.ui[class*="eleven column"].grid > .row > .column,
195.ui[class*="eleven column"].grid > .column:not(.row) {
196 width: 9.09090909%;
197}
198.ui[class*="twelve column"].grid > .row > .column,
199.ui[class*="twelve column"].grid > .column:not(.row) {
200 width: 8.33333333%;
201}
202.ui[class*="thirteen column"].grid > .row > .column,
203.ui[class*="thirteen column"].grid > .column:not(.row) {
204 width: 7.69230769%;
205}
206.ui[class*="fourteen column"].grid > .row > .column,
207.ui[class*="fourteen column"].grid > .column:not(.row) {
208 width: 7.14285714%;
209}
210.ui[class*="fifteen column"].grid > .row > .column,
211.ui[class*="fifteen column"].grid > .column:not(.row) {
212 width: 6.66666667%;
213}
214.ui[class*="sixteen column"].grid > .row > .column,
215.ui[class*="sixteen column"].grid > .column:not(.row) {
216 width: 6.25%;
217}
218
219.ui.grid > [class*="one column"].row > .column {
220 width: 100% !important;
221}
222.ui.grid > [class*="two column"].row > .column {
223 width: 50% !important;
224}
225.ui.grid > [class*="three column"].row > .column {
226 width: 33.33333333% !important;
227}
228.ui.grid > [class*="four column"].row > .column {
229 width: 25% !important;
230}
231.ui.grid > [class*="five column"].row > .column {
232 width: 20% !important;
233}
234.ui.grid > [class*="six column"].row > .column {
235 width: 16.66666667% !important;
236}
237.ui.grid > [class*="seven column"].row > .column {
238 width: 14.28571429% !important;
239}
240.ui.grid > [class*="eight column"].row > .column {
241 width: 12.5% !important;
242}
243.ui.grid > [class*="nine column"].row > .column {
244 width: 11.11111111% !important;
245}
246.ui.grid > [class*="ten column"].row > .column {
247 width: 10% !important;
248}
249.ui.grid > [class*="eleven column"].row > .column {
250 width: 9.09090909% !important;
251}
252.ui.grid > [class*="twelve column"].row > .column {
253 width: 8.33333333% !important;
254}
255.ui.grid > [class*="thirteen column"].row > .column {
256 width: 7.69230769% !important;
257}
258.ui.grid > [class*="fourteen column"].row > .column {
259 width: 7.14285714% !important;
260}
261.ui.grid > [class*="fifteen column"].row > .column {
262 width: 6.66666667% !important;
263}
264.ui.grid > [class*="sixteen column"].row > .column {
265 width: 6.25% !important;
266}
267
268.ui.grid > .row > [class*="one wide"].column,
269.ui.grid > .column.row > [class*="one wide"].column,
270.ui.grid > [class*="one wide"].column,
271.ui.column.grid > [class*="one wide"].column {
272 width: 6.25% !important;
273}
274.ui.grid > .row > [class*="two wide"].column,
275.ui.grid > .column.row > [class*="two wide"].column,
276.ui.grid > [class*="two wide"].column,
277.ui.column.grid > [class*="two wide"].column {
278 width: 12.5% !important;
279}
280.ui.grid > .row > [class*="three wide"].column,
281.ui.grid > .column.row > [class*="three wide"].column,
282.ui.grid > [class*="three wide"].column,
283.ui.column.grid > [class*="three wide"].column {
284 width: 18.75% !important;
285}
286.ui.grid > .row > [class*="four wide"].column,
287.ui.grid > .column.row > [class*="four wide"].column,
288.ui.grid > [class*="four wide"].column,
289.ui.column.grid > [class*="four wide"].column {
290 width: 25% !important;
291}
292.ui.grid > .row > [class*="five wide"].column,
293.ui.grid > .column.row > [class*="five wide"].column,
294.ui.grid > [class*="five wide"].column,
295.ui.column.grid > [class*="five wide"].column {
296 width: 31.25% !important;
297}
298.ui.grid > .row > [class*="six wide"].column,
299.ui.grid > .column.row > [class*="six wide"].column,
300.ui.grid > [class*="six wide"].column,
301.ui.column.grid > [class*="six wide"].column {
302 width: 37.5% !important;
303}
304.ui.grid > .row > [class*="seven wide"].column,
305.ui.grid > .column.row > [class*="seven wide"].column,
306.ui.grid > [class*="seven wide"].column,
307.ui.column.grid > [class*="seven wide"].column {
308 width: 43.75% !important;
309}
310.ui.grid > .row > [class*="eight wide"].column,
311.ui.grid > .column.row > [class*="eight wide"].column,
312.ui.grid > [class*="eight wide"].column,
313.ui.column.grid > [class*="eight wide"].column {
314 width: 50% !important;
315}
316.ui.grid > .row > [class*="nine wide"].column,
317.ui.grid > .column.row > [class*="nine wide"].column,
318.ui.grid > [class*="nine wide"].column,
319.ui.column.grid > [class*="nine wide"].column {
320 width: 56.25% !important;
321}
322.ui.grid > .row > [class*="ten wide"].column,
323.ui.grid > .column.row > [class*="ten wide"].column,
324.ui.grid > [class*="ten wide"].column,
325.ui.column.grid > [class*="ten wide"].column {
326 width: 62.5% !important;
327}
328.ui.grid > .row > [class*="eleven wide"].column,
329.ui.grid > .column.row > [class*="eleven wide"].column,
330.ui.grid > [class*="eleven wide"].column,
331.ui.column.grid > [class*="eleven wide"].column {
332 width: 68.75% !important;
333}
334.ui.grid > .row > [class*="twelve wide"].column,
335.ui.grid > .column.row > [class*="twelve wide"].column,
336.ui.grid > [class*="twelve wide"].column,
337.ui.column.grid > [class*="twelve wide"].column {
338 width: 75% !important;
339}
340.ui.grid > .row > [class*="thirteen wide"].column,
341.ui.grid > .column.row > [class*="thirteen wide"].column,
342.ui.grid > [class*="thirteen wide"].column,
343.ui.column.grid > [class*="thirteen wide"].column {
344 width: 81.25% !important;
345}
346.ui.grid > .row > [class*="fourteen wide"].column,
347.ui.grid > .column.row > [class*="fourteen wide"].column,
348.ui.grid > [class*="fourteen wide"].column,
349.ui.column.grid > [class*="fourteen wide"].column {
350 width: 87.5% !important;
351}
352.ui.grid > .row > [class*="fifteen wide"].column,
353.ui.grid > .column.row > [class*="fifteen wide"].column,
354.ui.grid > [class*="fifteen wide"].column,
355.ui.column.grid > [class*="fifteen wide"].column {
356 width: 93.75% !important;
357}
358.ui.grid > .row > [class*="sixteen wide"].column,
359.ui.grid > .column.row > [class*="sixteen wide"].column,
360.ui.grid > [class*="sixteen wide"].column,
361.ui.column.grid > [class*="sixteen wide"].column {
362 width: 100% !important;
363}
364
365.ui.centered.grid,
366.ui.centered.grid > .row,
367.ui.grid > .centered.row {
368 text-align: center;
369 justify-content: center;
370}
371.ui.centered.grid > .column:not(.aligned):not(.justified):not(.row),
372.ui.centered.grid > .row > .column:not(.aligned):not(.justified),
373.ui.grid .centered.row > .column:not(.aligned):not(.justified) {
374 text-align: left;
375}
376.ui.grid > .centered.column,
377.ui.grid > .row > .centered.column {
378 display: block;
379 margin-left: auto;
380 margin-right: auto;
381}
382
383.ui.relaxed.grid > .column:not(.row),
384.ui.relaxed.grid > .row > .column,
385.ui.grid > .relaxed.row > .column {
386 padding-left: 1.5rem;
387 padding-right: 1.5rem;
388}
389.ui[class*="very relaxed"].grid > .column:not(.row),
390.ui[class*="very relaxed"].grid > .row > .column,
391.ui.grid > [class*="very relaxed"].row > .column {
392 padding-left: 2.5rem;
393 padding-right: 2.5rem;
394}
395
396.ui.relaxed.grid .row + .ui.divider,
397.ui.grid .relaxed.row + .ui.divider {
398 margin-left: 1.5rem;
399 margin-right: 1.5rem;
400}
401.ui[class*="very relaxed"].grid .row + .ui.divider,
402.ui.grid [class*="very relaxed"].row + .ui.divider {
403 margin-left: 2.5rem;
404 margin-right: 2.5rem;
405}
406
407.ui[class*="middle aligned"].grid > .column:not(.row),
408.ui[class*="middle aligned"].grid > .row > .column,
409.ui.grid > [class*="middle aligned"].row > .column,
410.ui.grid > [class*="middle aligned"].column:not(.row),
411.ui.grid > .row > [class*="middle aligned"].column {
412 flex-direction: column;
413 vertical-align: middle;
414 align-self: center !important;
415}
416
417.ui[class*="left aligned"].grid > .column,
418.ui[class*="left aligned"].grid > .row > .column,
419.ui.grid > [class*="left aligned"].row > .column,
420.ui.grid > [class*="left aligned"].column.column,
421.ui.grid > .row > [class*="left aligned"].column.column {
422 text-align: left;
423 align-self: inherit;
424}
425
426.ui[class*="center aligned"].grid > .column,
427.ui[class*="center aligned"].grid > .row > .column,
428.ui.grid > [class*="center aligned"].row > .column,
429.ui.grid > [class*="center aligned"].column.column,
430.ui.grid > .row > [class*="center aligned"].column.column {
431 text-align: center;
432 align-self: inherit;
433}
434.ui[class*="center aligned"].grid {
435 justify-content: center;
436}
437
438.ui[class*="right aligned"].grid > .column,
439.ui[class*="right aligned"].grid > .row > .column,
440.ui.grid > [class*="right aligned"].row > .column,
441.ui.grid > [class*="right aligned"].column.column,
442.ui.grid > .row > [class*="right aligned"].column.column {
443 text-align: right;
444 align-self: inherit;
445}
446
447.ui[class*="equal width"].grid > .column:not(.row),
448.ui[class*="equal width"].grid > .row > .column,
449.ui.grid > [class*="equal width"].row > .column {
450 display: inline-block;
451 flex-grow: 1;
452}
453.ui[class*="equal width"].grid > .wide.column,
454.ui[class*="equal width"].grid > .row > .wide.column,
455.ui.grid > [class*="equal width"].row > .wide.column {
456 flex-grow: 0;
457}
458
459@media only screen and (max-width: 767.98px) {
460 .ui[class*="mobile reversed"].grid,
461 .ui[class*="mobile reversed"].grid > .row,
462 .ui.grid > [class*="mobile reversed"].row {
463 flex-direction: row-reverse;
464 }
465 .ui.stackable[class*="mobile reversed"] {
466 flex-direction: column-reverse;
467 }
468}
469
470@media only screen and (max-width: 767.98px) {
471 .ui.stackable.grid {
472 width: auto;
473 margin-left: 0 !important;
474 margin-right: 0 !important;
475 }
476 .ui.stackable.grid > .row > .wide.column,
477 .ui.stackable.grid > .wide.column,
478 .ui.stackable.grid > .column.grid > .column,
479 .ui.stackable.grid > .column.row > .column,
480 .ui.stackable.grid > .row > .column,
481 .ui.stackable.grid > .column:not(.row),
482 .ui.grid > .stackable.stackable.stackable.row > .column {
483 width: 100% !important;
484 margin: 0 !important;
485 box-shadow: none !important;
486 padding: 1rem;
487 }
488 .ui.stackable.grid:not(.vertically) > .row {
489 margin: 0;
490 padding: 0;
491 }
492
493 .ui.container > .ui.stackable.grid > .column,
494 .ui.container > .ui.stackable.grid > .row > .column {
495 padding-left: 0 !important;
496 padding-right: 0 !important;
497 }
498
499 .ui.grid .ui.stackable.grid,
500 .ui.segment:not(.vertical) .ui.stackable.page.grid {
501 margin-left: -1rem !important;
502 margin-right: -1rem !important;
503 }
504}
505
506.ui.ui.ui.compact.grid > .column:not(.row),
507.ui.ui.ui.compact.grid > .row > .column {
508 padding-left: 0.5rem;
509 padding-right: 0.5rem;
510}
511.ui.ui.ui.compact.grid > * {
512 padding-left: 0.5rem;
513 padding-right: 0.5rem;
514}
515
516.ui.ui.ui.compact.grid > .row {
517 padding-top: 0.5rem;
518 padding-bottom: 0.5rem;
519}
520
521.ui.ui.ui.compact.grid > .column:not(.row) {
522 padding-top: 0.5rem;
523 padding-bottom: 0.5rem;
524}