UNPKG

3.35 kBCSSView Raw
1/*
2
3 COORDINATES
4 Docs: http://tachyons.io/docs/layout/position/
5
6 Use in combination with the position module.
7
8 Base:
9 top
10 bottom
11 right
12 left
13
14 Modifiers:
15 -0 = literal value 0
16 -1 = literal value 1
17 -2 = literal value 2
18 --1 = literal value -1
19 --2 = literal value -2
20
21 Media Query Extensions:
22 -ns = not-small
23 -m = medium
24 -l = large
25
26*/
27
28.top-0 { top: 0; }
29.right-0 { right: 0; }
30.bottom-0 { bottom: 0; }
31.left-0 { left: 0; }
32
33.top-1 { top: 1rem; }
34.right-1 { right: 1rem; }
35.bottom-1 { bottom: 1rem; }
36.left-1 { left: 1rem; }
37
38.top-2 { top: 2rem; }
39.right-2 { right: 2rem; }
40.bottom-2 { bottom: 2rem; }
41.left-2 { left: 2rem; }
42
43.top--1 { top: -1rem; }
44.right--1 { right: -1rem; }
45.bottom--1 { bottom: -1rem; }
46.left--1 { left: -1rem; }
47
48.top--2 { top: -2rem; }
49.right--2 { right: -2rem; }
50.bottom--2 { bottom: -2rem; }
51.left--2 { left: -2rem; }
52
53
54.absolute--fill {
55 top: 0;
56 right: 0;
57 bottom: 0;
58 left: 0;
59}
60
61@media (--breakpoint-not-small) {
62 .top-0-ns { top: 0; }
63 .left-0-ns { left: 0; }
64 .right-0-ns { right: 0; }
65 .bottom-0-ns { bottom: 0; }
66 .top-1-ns { top: 1rem; }
67 .left-1-ns { left: 1rem; }
68 .right-1-ns { right: 1rem; }
69 .bottom-1-ns { bottom: 1rem; }
70 .top-2-ns { top: 2rem; }
71 .left-2-ns { left: 2rem; }
72 .right-2-ns { right: 2rem; }
73 .bottom-2-ns { bottom: 2rem; }
74 .top--1-ns { top: -1rem; }
75 .right--1-ns { right: -1rem; }
76 .bottom--1-ns { bottom: -1rem; }
77 .left--1-ns { left: -1rem; }
78 .top--2-ns { top: -2rem; }
79 .right--2-ns { right: -2rem; }
80 .bottom--2-ns { bottom: -2rem; }
81 .left--2-ns { left: -2rem; }
82 .absolute--fill-ns {
83 top: 0;
84 right: 0;
85 bottom: 0;
86 left: 0;
87 }
88}
89
90@media (--breakpoint-medium) {
91 .top-0-m { top: 0; }
92 .left-0-m { left: 0; }
93 .right-0-m { right: 0; }
94 .bottom-0-m { bottom: 0; }
95 .top-1-m { top: 1rem; }
96 .left-1-m { left: 1rem; }
97 .right-1-m { right: 1rem; }
98 .bottom-1-m { bottom: 1rem; }
99 .top-2-m { top: 2rem; }
100 .left-2-m { left: 2rem; }
101 .right-2-m { right: 2rem; }
102 .bottom-2-m { bottom: 2rem; }
103 .top--1-m { top: -1rem; }
104 .right--1-m { right: -1rem; }
105 .bottom--1-m { bottom: -1rem; }
106 .left--1-m { left: -1rem; }
107 .top--2-m { top: -2rem; }
108 .right--2-m { right: -2rem; }
109 .bottom--2-m { bottom: -2rem; }
110 .left--2-m { left: -2rem; }
111 .absolute--fill-m {
112 top: 0;
113 right: 0;
114 bottom: 0;
115 left: 0;
116 }
117}
118
119@media (--breakpoint-large) {
120 .top-0-l { top: 0; }
121 .left-0-l { left: 0; }
122 .right-0-l { right: 0; }
123 .bottom-0-l { bottom: 0; }
124 .top-1-l { top: 1rem; }
125 .left-1-l { left: 1rem; }
126 .right-1-l { right: 1rem; }
127 .bottom-1-l { bottom: 1rem; }
128 .top-2-l { top: 2rem; }
129 .left-2-l { left: 2rem; }
130 .right-2-l { right: 2rem; }
131 .bottom-2-l { bottom: 2rem; }
132 .top--1-l { top: -1rem; }
133 .right--1-l { right: -1rem; }
134 .bottom--1-l { bottom: -1rem; }
135 .left--1-l { left: -1rem; }
136 .top--2-l { top: -2rem; }
137 .right--2-l { right: -2rem; }
138 .bottom--2-l { bottom: -2rem; }
139 .left--2-l { left: -2rem; }
140 .absolute--fill-l {
141 top: 0;
142 right: 0;
143 bottom: 0;
144 left: 0;
145 }
146}