UNPKG

2.81 kBCSSView Raw
1/*
2
3 DISPLAY
4 Docs: http://tachyons.io/docs/layout/display
5
6 Base:
7 d = display
8
9 Modifiers:
10 n = none
11 b = block
12 ib = inline-block
13 it = inline-table
14 t = table
15 tc = table-cell
16 tr = table-row
17 tcol = table-column
18 tcolg = table-column-group
19
20 Media Query Extensions:
21 -ns = not-small
22 -m = medium
23 -l = large
24
25*/
26
27.dn { display: none; }
28.di { display: inline; }
29.db { display: block; }
30.dib { display: inline-block; }
31.dit { display: inline-table; }
32.dt { display: table; }
33.dtc { display: table-cell; }
34.dt-row { display: table-row; }
35.dt-row-group { display: table-row-group; }
36.dt-column { display: table-column; }
37.dt-column-group { display: table-column-group; }
38
39/*
40 This will set table to full width and then
41 all cells will be equal width
42*/
43.dt--fixed {
44 table-layout: fixed;
45 width: 100%;
46}
47
48@media (--breakpoint-not-small) {
49 .dn-ns { display: none; }
50 .di-ns { display: inline; }
51 .db-ns { display: block; }
52 .dib-ns { display: inline-block; }
53 .dit-ns { display: inline-table; }
54 .dt-ns { display: table; }
55 .dtc-ns { display: table-cell; }
56 .dt-row-ns { display: table-row; }
57 .dt-row-group-ns { display: table-row-group; }
58 .dt-column-ns { display: table-column; }
59 .dt-column-group-ns { display: table-column-group; }
60
61 .dt--fixed-ns {
62 table-layout: fixed;
63 width: 100%;
64 }
65}
66
67@media (--breakpoint-medium) {
68 .dn-m { display: none; }
69 .di-m { display: inline; }
70 .db-m { display: block; }
71 .dib-m { display: inline-block; }
72 .dit-m { display: inline-table; }
73 .dt-m { display: table; }
74 .dtc-m { display: table-cell; }
75 .dt-row-m { display: table-row; }
76 .dt-row-group-m { display: table-row-group; }
77 .dt-column-m { display: table-column; }
78 .dt-column-group-m { display: table-column-group; }
79
80 .dt--fixed-m {
81 table-layout: fixed;
82 width: 100%;
83 }
84}
85
86@media (--breakpoint-large) {
87 .dn-l { display: none; }
88 .di-l { display: inline; }
89 .db-l { display: block; }
90 .dib-l { display: inline-block; }
91 .dit-l { display: inline-table; }
92 .dt-l { display: table; }
93 .dtc-l { display: table-cell; }
94 .dt-row-l { display: table-row; }
95 .dt-row-group-l { display: table-row-group; }
96 .dt-column-l { display: table-column; }
97 .dt-column-group-l { display: table-column-group; }
98
99 .dt--fixed-l {
100 table-layout: fixed;
101 width: 100%;
102 }
103}
104