forked from tachyons-css/tachyons
-
Notifications
You must be signed in to change notification settings - Fork 0
/
_display.css
104 lines (90 loc) · 2.78 KB
/
_display.css
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
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
/*
DISPLAY
Docs: https://tachyons.io/docs/layout/display
Base:
d = display
Modifiers:
n = none
b = block
ib = inline-block
it = inline-table
t = table
tc = table-cell
t-row = table-row
t-columm = table-column
t-column-group = table-column-group
Media Query Extensions:
-ns = not-small
-m = medium
-l = large
*/
.dn { display: none; }
.di { display: inline; }
.db { display: block; }
.dib { display: inline-block; }
.dit { display: inline-table; }
.dt { display: table; }
.dtc { display: table-cell; }
.dt-row { display: table-row; }
.dt-row-group { display: table-row-group; }
.dt-column { display: table-column; }
.dt-column-group { display: table-column-group; }
/*
This will set table to full width and then
all cells will be equal width
*/
.dt--fixed {
table-layout: fixed;
width: 100%;
}
@media (--breakpoint-not-small) {
.dn-ns { display: none; }
.di-ns { display: inline; }
.db-ns { display: block; }
.dib-ns { display: inline-block; }
.dit-ns { display: inline-table; }
.dt-ns { display: table; }
.dtc-ns { display: table-cell; }
.dt-row-ns { display: table-row; }
.dt-row-group-ns { display: table-row-group; }
.dt-column-ns { display: table-column; }
.dt-column-group-ns { display: table-column-group; }
.dt--fixed-ns {
table-layout: fixed;
width: 100%;
}
}
@media (--breakpoint-medium) {
.dn-m { display: none; }
.di-m { display: inline; }
.db-m { display: block; }
.dib-m { display: inline-block; }
.dit-m { display: inline-table; }
.dt-m { display: table; }
.dtc-m { display: table-cell; }
.dt-row-m { display: table-row; }
.dt-row-group-m { display: table-row-group; }
.dt-column-m { display: table-column; }
.dt-column-group-m { display: table-column-group; }
.dt--fixed-m {
table-layout: fixed;
width: 100%;
}
}
@media (--breakpoint-large) {
.dn-l { display: none; }
.di-l { display: inline; }
.db-l { display: block; }
.dib-l { display: inline-block; }
.dit-l { display: inline-table; }
.dt-l { display: table; }
.dtc-l { display: table-cell; }
.dt-row-l { display: table-row; }
.dt-row-group-l { display: table-row-group; }
.dt-column-l { display: table-column; }
.dt-column-group-l { display: table-column-group; }
.dt--fixed-l {
table-layout: fixed;
width: 100%;
}
}