Skip to content

Commit 33229df

Browse files
author
mrmrs
committed
Update css modules from tachyons repo
1 parent 7974c36 commit 33229df

File tree

9 files changed

+216
-130
lines changed

9 files changed

+216
-130
lines changed

‎src/css/_border-colors.css

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
21
/*
32
4-
Tachyons Colors
3+
Tachyons
4+
COLOR VARIABLES
55
66
Grayscale
77
- Solids

‎src/css/_border-radius.css

+4-4
Original file line numberDiff line numberDiff line change
@@ -26,15 +26,15 @@
2626
2727
*/
2828

29-
.brn { border-radius: 0; }
29+
.br0 { border-radius: 0; }
3030
.br1 { border-radius: .125rem; }
3131
.br2 { border-radius: .25rem; }
3232
.br3 { border-radius: .5rem; }
3333
.br4 { border-radius: 1rem; }
3434
.br-100 { border-radius: 100%; }
3535

3636
@media (--breakpoint-not-small) {
37-
.brn-ns { border-radius: 0; }
37+
.br0-ns { border-radius: 0; }
3838
.br1-ns { border-radius: .125rem; }
3939
.br2-ns { border-radius: .25rem; }
4040
.br3-ns { border-radius: .5rem; }
@@ -43,7 +43,7 @@
4343
}
4444

4545
@media (--breakpoint-medium) {
46-
.brn-m { border-radius: 0; }
46+
.br0-m { border-radius: 0; }
4747
.br1-m { border-radius: .125rem; }
4848
.br2-m { border-radius: .25rem; }
4949
.br3-m { border-radius: .5rem; }
@@ -52,7 +52,7 @@
5252
}
5353

5454
@media (--breakpoint-large) {
55-
.brn-l { border-radius: 0; }
55+
.br0-l { border-radius: 0; }
5656
.br1-l { border-radius: .125rem; }
5757
.br2-l { border-radius: .25rem; }
5858
.br3-l { border-radius: .5rem; }

‎src/css/_coordinates.css

+108-61
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
1+
@custom-media --breakpoint-not-small screen and (min-width: 48em);
2+
@custom-media --breakpoint-medium screen and (min-width: 48em) and (max-width: 64em);
3+
@custom-media --breakpoint-large screen and (min-width: 64em);
4+
15
/*
26
37
COORDINATES
@@ -6,79 +10,122 @@
610
711
*/
812

9-
.top-0 { top: 0; }
10-
.left-0 { left: 0; }
11-
.right-0 { right: 0; }
13+
.top-0 { top: 0; }
14+
.right-0 { right: 0; }
1215
.bottom-0 { bottom: 0; }
16+
.left-0 { left: 0; }
1317

14-
.top-1 { top: 1rem; }
15-
.left-1 { left: 1rem; }
16-
.right-1 { right: 1rem; }
18+
.top-1 { top: 1rem; }
19+
.right-1 { right: 1rem; }
1720
.bottom-1 { bottom: 1rem; }
21+
.left-1 { left: 1rem; }
1822

19-
.top-2 { top: 2rem; }
20-
.left-2 { left: 2rem; }
21-
.right-2 { right: 2rem; }
23+
.top-2 { top: 2rem; }
24+
.right-2 { right: 2rem; }
2225
.bottom-2 { bottom: 2rem; }
26+
.left-2 { left: 2rem; }
27+
28+
.top--1 { top: -1rem; }
29+
.right--1 { right: -1rem; }
30+
.bottom--1 { bottom: -1rem; }
31+
.left--1 { left: -1rem; }
32+
33+
.top--2 { top: -2rem; }
34+
.right--2 { right: -2rem; }
35+
.bottom--2 { bottom: -2rem; }
36+
.left--2 { left: -2rem; }
2337

24-
.top-4 { top: 4rem; }
25-
.left-4 { left: 4rem; }
26-
.right-4 { right: 4rem; }
27-
.bottom-4 { bottom: 4rem; }
38+
39+
.pos-abs--fill {
40+
top: 0;
41+
right: 0;
42+
bottom: 0;
43+
left: 0;
44+
}
2845

2946
@media (--breakpoint-not-small) {
30-
.top-0-ns { top: 0; }
31-
.left-0-ns { left: 0; }
32-
.right-0-ns { right: 0; }
33-
.bottom-0-ns { bottom: 0; }
34-
.top-1-ns { top: 1rem; }
35-
.left-1-ns { left: 1rem; }
36-
.right-1-ns { right: 1rem; }
37-
.bottom-1-ns { bottom: 1rem; }
38-
.top-2-ns { top: 2rem; }
39-
.left-2-ns { left: 2rem; }
40-
.right-2-ns { right: 2rem; }
41-
.bottom-2-ns { bottom: 2rem; }
42-
.top-4-ns { top: 4rem; }
43-
.left-4-ns { left: 4rem; }
44-
.right-4-ns { right: 4rem; }
45-
.bottom-4-ns { bottom: 4rem; }
47+
.top-0-ns { top: 0; }
48+
.left-0-ns { left: 0; }
49+
.right-0-ns { right: 0; }
50+
.bottom-0-ns { bottom: 0; }
51+
.top-1-ns { top: 1rem; }
52+
.left-1-ns { left: 1rem; }
53+
.right-1-ns { right: 1rem; }
54+
.bottom-1-ns { bottom: 1rem; }
55+
.top-2-ns { top: 2rem; }
56+
.left-2-ns { left: 2rem; }
57+
.right-2-ns { right: 2rem; }
58+
.bottom-2-ns { bottom: 2rem; }
59+
.top--1-ns { top: -1rem; }
60+
.right--1-ns { right: -1rem; }
61+
.bottom--1-ns { bottom: -1rem; }
62+
.left--1-ns { left: -1rem; }
63+
.top--2-ns { top: -2rem; }
64+
.right--2-ns { right: -2rem; }
65+
.bottom--2-ns { bottom: -2rem; }
66+
.left--2-ns { left: -2rem; }
67+
.pos-abs--fill-ns {
68+
top: 0;
69+
right: 0;
70+
bottom: 0;
71+
left: 0;
72+
}
4673
}
4774

4875
@media (--breakpoint-medium) {
49-
.top-0-m { top: 0; }
50-
.left-0-m { left: 0; }
51-
.right-0-m { right: 0; }
52-
.bottom-0-m { bottom: 0; }
53-
.top-1-m { top: 1rem; }
54-
.left-1-m { left: 1rem; }
55-
.right-1-m { right: 1rem; }
56-
.bottom-1-m { bottom: 1rem; }
57-
.top-2-m { top: 2rem; }
58-
.left-2-m { left: 2rem; }
59-
.right-2-m { right: 2rem; }
60-
.bottom-2-m { bottom: 2rem; }
61-
.top-4-m { top: 4rem; }
62-
.left-4-m { left: 4rem; }
63-
.right-4-m { right: 4rem; }
64-
.bottom-4-m { bottom: 4rem; }
76+
.top-0-m { top: 0; }
77+
.left-0-m { left: 0; }
78+
.right-0-m { right: 0; }
79+
.bottom-0-m { bottom: 0; }
80+
.top-1-m { top: 1rem; }
81+
.left-1-m { left: 1rem; }
82+
.right-1-m { right: 1rem; }
83+
.bottom-1-m { bottom: 1rem; }
84+
.top-2-m { top: 2rem; }
85+
.left-2-m { left: 2rem; }
86+
.right-2-m { right: 2rem; }
87+
.bottom-2-m { bottom: 2rem; }
88+
.top--1-m { top: -1rem; }
89+
.right--1-m { right: -1rem; }
90+
.bottom--1-m { bottom: -1rem; }
91+
.left--1-m { left: -1rem; }
92+
.top--2-m { top: -2rem; }
93+
.right--2-m { right: -2rem; }
94+
.bottom--2-m { bottom: -2rem; }
95+
.left--2-m { left: -2rem; }
96+
.pos-abs--fill-m {
97+
top: 0;
98+
right: 0;
99+
bottom: 0;
100+
left: 0;
101+
}
65102
}
66103

67104
@media (--breakpoint-large) {
68-
.top-0-l { top: 0; }
69-
.left-0-l { left: 0; }
70-
.right-0-l { right: 0; }
71-
.bottom-0-l { bottom: 0; }
72-
.top-1-l { top: 1rem; }
73-
.left-1-l { left: 1rem; }
74-
.right-1-l { right: 1rem; }
75-
.bottom-1-l { bottom: 1rem; }
76-
.top-2-l { top: 2rem; }
77-
.left-2-l { left: 2rem; }
78-
.right-2-l { right: 2rem; }
79-
.bottom-2-l { bottom: 2rem; }
80-
.top-4-l { top: 4rem; }
81-
.left-4-l { left: 4rem; }
82-
.right-4-l { right: 4rem; }
83-
.bottom-4-l { bottom: 4rem; }
105+
.top-0-l { top: 0; }
106+
.left-0-l { left: 0; }
107+
.right-0-l { right: 0; }
108+
.bottom-0-l { bottom: 0; }
109+
.top-1-l { top: 1rem; }
110+
.left-1-l { left: 1rem; }
111+
.right-1-l { right: 1rem; }
112+
.bottom-1-l { bottom: 1rem; }
113+
.top-2-l { top: 2rem; }
114+
.left-2-l { left: 2rem; }
115+
.right-2-l { right: 2rem; }
116+
.bottom-2-l { bottom: 2rem; }
117+
.top--1-l { top: -1rem; }
118+
.right--1-l { right: -1rem; }
119+
.bottom--1-l { bottom: -1rem; }
120+
.left--1-l { left: -1rem; }
121+
.top--2-l { top: -2rem; }
122+
.right--2-l { right: -2rem; }
123+
.bottom--2-l { bottom: -2rem; }
124+
.left--2-l { left: -2rem; }
125+
.pos-abs--fill-l {
126+
top: 0;
127+
right: 0;
128+
bottom: 0;
129+
left: 0;
130+
}
84131
}

‎src/css/_display.css

+16-8
Original file line numberDiff line numberDiff line change
@@ -34,8 +34,10 @@
3434
.dit { display: inline-table; }
3535
.dt { display: table; }
3636
.dtc { display: table-cell; }
37-
.dtcol { display: table-column; }
38-
.dtcolg { display: table-column-group; }
37+
.dt-row { display: table-row; }
38+
.dt-row-group { display: table-row-group; }
39+
.dt-column { display: table-column; }
40+
.dt-column-group { display: table-column-group; }
3941

4042
@media (--breakpoint-not-small) {
4143
.dn-ns { display: none; }
@@ -45,8 +47,10 @@
4547
.dit-ns { display: inline-table; }
4648
.dt-ns { display: table; }
4749
.dtc-ns { display: table-cell; }
48-
.dtcol-ns { display: table-column; }
49-
.dtcolg-ns { display: table-column-group; }
50+
.dt-row-ns { display: table-row; }
51+
.dt-row-group-ns { display: table-row-group; }
52+
.dt-column-ns { display: table-column; }
53+
.dt-column-group-ns { display: table-column-group; }
5054
}
5155

5256
@media (--breakpoint-medium) {
@@ -57,8 +61,10 @@
5761
.dit-m { display: inline-table; }
5862
.dt-m { display: table; }
5963
.dtc-m { display: table-cell; }
60-
.dtcol-m { display: table-column; }
61-
.dtcolg-m { display: table-column-group; }
64+
.dt-row-m { display: table-row; }
65+
.dt-row-group-m { display: table-row-group; }
66+
.dt-column-m { display: table-column; }
67+
.dt-column-group-m { display: table-column-group; }
6268
}
6369

6470
@media (--breakpoint-large) {
@@ -69,7 +75,9 @@
6975
.dit-l { display: inline-table; }
7076
.dt-l { display: table; }
7177
.dtc-l { display: table-cell; }
72-
.dtcol-l { display: table-column; }
73-
.dtcolg-l { display: table-column-group; }
78+
.dt-row-l { display: table-row; }
79+
.dt-row-group-l { display: table-row-group; }
80+
.dt-column-l { display: table-column; }
81+
.dt-column-group-l { display: table-column-group; }
7482
}
7583

0 commit comments

Comments
 (0)