@samitouri / QOS-React-1
Code Commits Issues Pulls Sessions CI/CD
main
main
css 261 lines 4.69 KB
Raw
1 .nested-parent-exit {
2 width: 280px;
3 min-height: 280px;
4 margin-top: 2rem;
5 padding-top: 1rem;
6 border-top: 1px solid #ccc;
7 }
8
9 .nested-parent-exit-swipe {
10 min-height: 200px;
11 }
12
13 .nested-parent-exit-label {
14 margin: 0 0 0.75rem;
15 font-size: 13px;
16 color: #666;
17 }
18
19 .nested-parent-exit-panel {
20 min-height: 240px;
21 }
22
23 .nested-parent-exit .feed-item {
24 margin-bottom: 0.75rem;
25 cursor: pointer;
26 }
27
28 .nested-parent-exit .feed-item-title {
29 margin: 0 0 0.15rem;
30 font-size: 15px;
31 font-weight: 600;
32 }
33
34 .nested-parent-exit .feed-item p,
35 .nested-parent-exit .detail-view p {
36 margin: 0;
37 font-size: 13px;
38 color: #666;
39 }
40
41 .nested-parent-exit .back-button {
42 margin-bottom: 0.75rem;
43 padding: 0;
44 border: none;
45 background: none;
46 cursor: pointer;
47 font: inherit;
48 color: inherit;
49 text-decoration: underline;
50 }
51
52 @keyframes nested-exit-left {
53 from {
54 opacity: 1;
55 translate: 0 0;
56 }
57 to {
58 opacity: 0;
59 translate: -120% 0;
60 }
61 }
62
63 ::view-transition-old(.nested-exit-left) {
64 animation: nested-exit-left 450ms ease-out forwards;
65 }
66
67 @keyframes nested-enter-from-left {
68 from {
69 opacity: 0;
70 translate: -120% 0;
71 }
72 to {
73 opacity: 1;
74 translate: 0 0;
75 }
76 }
77
78 ::view-transition-new(.nested-enter-from-left) {
79 animation: nested-enter-from-left 450ms ease-out 650ms both;
80 }
81
82 /* Title relays the parent activation but exits/enters vertically. */
83 @keyframes nested-title-exit-up {
84 from {
85 opacity: 1;
86 translate: 0 0;
87 }
88 to {
89 opacity: 0;
90 translate: 0 -80%;
91 }
92 }
93
94 ::view-transition-old(.nested-title-exit-up) {
95 animation: nested-title-exit-up 450ms ease-out forwards;
96 }
97
98 @keyframes nested-title-enter-from-up {
99 from {
100 opacity: 0;
101 translate: 0 -80%;
102 }
103 to {
104 opacity: 1;
105 translate: 0 0;
106 }
107 }
108
109 ::view-transition-new(.nested-title-enter-from-up) {
110 animation: nested-title-enter-from-up 450ms ease-out 650ms both;
111 }
112
113 /* Body relays the same parent activation but exits/enters to the right. */
114 @keyframes nested-body-exit-right {
115 from {
116 opacity: 1;
117 translate: 0 0;
118 }
119 to {
120 opacity: 0;
121 translate: 120% 0;
122 }
123 }
124
125 ::view-transition-old(.nested-body-exit-right) {
126 animation: nested-body-exit-right 450ms ease-in forwards;
127 }
128
129 @keyframes nested-body-enter-from-right {
130 from {
131 opacity: 0;
132 translate: 120% 0;
133 }
134 to {
135 opacity: 1;
136 translate: 0 0;
137 }
138 }
139
140 ::view-transition-new(.nested-body-enter-from-right) {
141 animation: nested-body-enter-from-right 450ms ease-out 650ms both;
142 }
143
144 ::view-transition-group(.nested-shared-post-forward) {
145 animation-duration: 600ms;
146 animation-delay: 300ms;
147 animation-timing-function: ease-in-out;
148 animation-fill-mode: both;
149 }
150
151 ::view-transition-old(.nested-shared-post-forward),
152 ::view-transition-new(.nested-shared-post-forward) {
153 animation-delay: 300ms;
154 animation-duration: 600ms;
155 animation-fill-mode: both;
156 }
157
158 ::view-transition-group(.nested-shared-post-back) {
159 animation-duration: 600ms;
160 animation-timing-function: ease-in-out;
161 }
162
163 ::view-transition-group(.nested-shared-inner-forward) {
164 animation-duration: 500ms;
165 animation-delay: 400ms;
166 animation-timing-function: ease-in-out;
167 animation-fill-mode: both;
168 }
169
170 ::view-transition-old(.nested-shared-inner-forward),
171 ::view-transition-new(.nested-shared-inner-forward) {
172 animation-delay: 400ms;
173 animation-duration: 500ms;
174 animation-fill-mode: both;
175 }
176
177 ::view-transition-group(.nested-shared-inner-back) {
178 animation-duration: 500ms;
179 animation-delay: 100ms;
180 animation-timing-function: ease-in-out;
181 animation-fill-mode: both;
182 }
183
184 @keyframes nested-back-btn-enter {
185 from {
186 opacity: 0;
187 translate: -20px 0;
188 }
189 to {
190 opacity: 1;
191 translate: 0 0;
192 }
193 }
194
195 @keyframes nested-back-btn-exit {
196 from {
197 opacity: 1;
198 translate: 0 0;
199 }
200 to {
201 opacity: 0;
202 translate: -20px 0;
203 }
204 }
205
206 ::view-transition-new(.nested-back-btn-enter):only-child {
207 animation: nested-back-btn-enter 300ms ease-out 650ms both;
208 }
209
210 ::view-transition-old(.nested-back-btn-exit):only-child {
211 animation: nested-back-btn-exit 200ms ease-in forwards;
212 }
213
214 /* Suspense reveal of the feed (drives the SSR parent enter/exit demo). */
215 .feed-item-skeleton {
216 cursor: default;
217 }
218
219 .skeleton-line {
220 background: #ddd;
221 border-radius: 4px;
222 }
223
224 .skeleton-title {
225 height: 15px;
226 width: 60%;
227 margin: 0 0 0.35rem;
228 }
229
230 .skeleton-body {
231 height: 13px;
232 width: 90%;
233 }
234
235 @keyframes nested-feed-enter {
236 from {
237 opacity: 0;
238 translate: 0 20px;
239 }
240 to {
241 opacity: 1;
242 translate: 0 0;
243 }
244 }
245
246 ::view-transition-new(.nested-feed-enter) {
247 animation: nested-feed-enter 450ms ease-out both;
248 }
249
250 @keyframes nested-feed-exit {
251 from {
252 opacity: 1;
253 }
254 to {
255 opacity: 0;
256 }
257 }
258
259 ::view-transition-old(.nested-feed-exit) {
260 animation: nested-feed-exit 300ms ease-in forwards;
261 }