Skip to content

Commit 46e3698

Browse files
author
Adam Argyle
committed
organized for bundling
1 parent c0c8f40 commit 46e3698

23 files changed

Lines changed: 118 additions & 73 deletions

‎app/index.html‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -109,6 +109,7 @@ <h3>Squares</h3>
109109
<dd><a href="#">out:square:top-left</a></dd>
110110
<dd><a href="#">out:square:bottom-right</a></dd>
111111
<dd><a href="#">out:square:bottom-left</a></dd>
112+
<dd><a href="#">in:square:opposing-corners</a></dd>
112113
</dl>
113114

114115
<h3>Wipes</h3>
@@ -126,13 +127,15 @@ <h3>Wipes</h3>
126127
<dd><a href="#">out:wipe:down</a></dd>
127128
</dl>
128129

129-
<h3>Diamonds</h3>
130+
<h3>Polygons</h3>
130131
<dl>
131132
<dt>Entrances</dt>
132133
<dd><a href="#">in:diamond:center</a></dd>
134+
<dd><a href="#">in:polygon:opposing-corners</a></dd>
133135

134136
<dt>Exits</dt>
135137
<dd><a href="#">out:diamond:center</a></dd>
138+
<dd><a href="#">out:polygon:opposing-corners</a></dd>
136139
</dl>
137140

138141
<hr>

‎src/_vars.css‎

Lines changed: 3 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,3 @@
1-
:root {
2-
/* CIRCLES */
3-
--circle-center-center-out: circle(0%);
4-
--circle-center-center-in: circle(125%);
5-
6-
--circle-top-left-out: circle(0% at top left);
7-
--circle-top-right-out: circle(0% at top right);
8-
--circle-bottom-right-out: circle(0% at bottom right);
9-
--circle-bottom-left-out: circle(0% at bottom left);
10-
11-
--circle-top-left-in: circle(150% at top left);
12-
--circle-top-right-in: circle(150% at top right);
13-
--circle-bottom-right-in: circle(150% at bottom right);
14-
--circle-bottom-left-in: circle(150% at bottom left);
15-
16-
/* WIPE */
17-
--wipe-in: inset(0 0 0 0);
18-
--wipe-bottom: inset(100% 0 0 0);
19-
--wipe-left: inset(0 100% 0 0);
20-
--wipe-top: inset(0 0 100% 0);
21-
--wipe-right: inset(0 0 0 100%);
22-
23-
/* SQUARES */
24-
--square-out: inset(100% 100% 100% 100%);
25-
--square-in: var(--wipe-in);
26-
--square-top-left-out: inset(0 100% 100% 0);
27-
--square-top-right-out: inset(0 0 100% 100%);
28-
--square-bottom-left-out: inset(100% 100% 0 0);
29-
--square-bottom-right-out: inset(100% 0 0 100%);
30-
31-
/* DIAMOND */
32-
--diamond-out: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%);
33-
--diamond-in: polygon(-50% 50%, 50% -50%, 150% 50%, 50% 150%);
34-
}
1+
@import "circles/_vars.css";
2+
@import "wipes/_vars.css";
3+
@import "squares/_vars.css";

‎src/circles/_vars.css‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
:root {
2+
--circle-center-center-out: circle(0%);
3+
--circle-center-center-in: circle(125%);
4+
5+
--circle-top-left-out: circle(0% at top left);
6+
--circle-top-right-out: circle(0% at top right);
7+
--circle-bottom-right-out: circle(0% at bottom right);
8+
--circle-bottom-left-out: circle(0% at bottom left);
9+
10+
--circle-top-left-in: circle(150% at top left);
11+
--circle-top-right-in: circle(150% at top right);
12+
--circle-bottom-right-in: circle(150% at bottom right);
13+
--circle-bottom-left-in: circle(150% at bottom left);
14+
}

‎src/circles/index.css‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
@import "in-center.css";
2+
@import "out-center.css";
3+
4+
@import "out-top-left.css";
5+
@import "out-top-right.css";
6+
@import "out-bottom-left.css";
7+
@import "out-bottom-right.css";
8+
9+
@import "in-top-left.css";
10+
@import "in-top-right.css";
11+
@import "in-bottom-left.css";
12+
@import "in-bottom-right.css";

‎src/circles/out-bottom-left.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,5 +8,6 @@
88
}
99

1010
[transition="out:circle:bottom-left"] {
11+
--transition__duration: 1.5s;
1112
animation-name: circle-out-bottom-left;
1213
}

‎src/circles/out-bottom-right.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,5 +8,6 @@
88
}
99

1010
[transition="out:circle:bottom-right"] {
11+
--transition__duration: 1.5s;
1112
animation-name: circle-out-bottom-right;
1213
}

‎src/circles/out-top-left.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,5 +8,6 @@
88
}
99

1010
[transition="out:circle:top-left"] {
11+
--transition__duration: 1.5s;
1112
animation-name: circle-out-top-left;
1213
}

‎src/circles/out-top-right.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,5 +8,6 @@
88
}
99

1010
[transition="out:circle:top-right"] {
11+
--transition__duration: 1.5s;
1112
animation-name: circle-out-top-right;
1213
}

‎src/index.css‎

Lines changed: 4 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,7 @@
11
@import "_vars";
22
@import "_base";
33

4-
@import "wipes/out-top.css";
5-
@import "wipes/out-right.css";
6-
@import "wipes/out-bottom.css";
7-
@import "wipes/out-left.css";
8-
@import "wipes/in-top.css";
9-
@import "wipes/in-right.css";
10-
@import "wipes/in-bottom.css";
11-
@import "wipes/in-left.css";
12-
13-
@import "circles/in-center.css";
14-
@import "circles/out-center.css";
15-
@import "circles/out-top-left.css";
16-
@import "circles/out-top-right.css";
17-
@import "circles/out-bottom-left.css";
18-
@import "circles/out-bottom-right.css";
19-
@import "circles/in-top-left.css";
20-
@import "circles/in-top-right.css";
21-
@import "circles/in-bottom-left.css";
22-
@import "circles/in-bottom-right.css";
23-
24-
@import "squares/in-center.css";
25-
@import "squares/out-center.css";
26-
@import "squares/out-top-left.css";
27-
@import "squares/out-top-right.css";
28-
@import "squares/out-bottom-left.css";
29-
@import "squares/out-bottom-right.css";
30-
@import "squares/in-top-left.css";
31-
@import "squares/in-top-right.css";
32-
@import "squares/in-bottom-left.css";
33-
@import "squares/in-bottom-right.css";
34-
35-
@import "polygons/diamond-in-center.css";
36-
@import "polygons/diamond-out-center.css";
4+
@import "wipes/";
5+
@import "circles/";
6+
@import "squares/";
7+
@import "polygons/";

‎src/polygons/diamond-in-center.css‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
11
@keyframes diamond-in-center {
22
from {
3-
clip-path: var(--diamond-out);
3+
clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%);
44
}
55
to {
6-
clip-path: var(--diamond-in);
6+
clip-path: polygon(-50% 50%, 50% -50%, 150% 50%, 50% 150%);
77
}
88
}
99

1010
[transition="in:diamond:center"] {
11+
--transition__duration: 1.5s;
1112
animation-name: diamond-in-center;
1213
}

0 commit comments

Comments
 (0)