this repo has no description
Differentiate clickable vs static toasts
+21
-11
+18
-8
src/app.css
+18
-8
src/app.css
···
1219
1219
1220
1220
/* SHINY PILL */
1221
1221
1222
-
.shiny-pill {
1222
+
:is(.shiny-pill, :root .toastify.shiny-pill) {
1223
+
pointer-events: auto;
1223
1224
color: var(--button-text-color);
1224
1225
text-shadow: 0 calc(var(--hairline-width) * -1) var(--drop-shadow-color);
1225
1226
background-color: var(--button-bg-color);
1226
1227
background-image: linear-gradient(
1227
1228
160deg,
1228
1229
rgba(255, 255, 255, 0.5),
1229
-
rgba(255, 255, 255, 0) 50%
1230
+
rgba(0, 0, 0, 0.1)
1230
1231
);
1231
1232
box-shadow: 0 3px 8px -1px var(--drop-shadow-color),
1232
1233
0 10px 36px -4px var(--button-bg-blur-color),
1233
1234
inset var(--hairline-width) var(--hairline-width) rgba(255, 255, 255, 0.5);
1235
+
transition: filter 0.3s;
1236
+
}
1237
+
:is(.shiny-pill, :root .toastify.shiny-pill):hover {
1238
+
filter: brightness(1.2);
1239
+
}
1240
+
:is(.shiny-pill, :root .toastify.shiny-pill):active {
1241
+
transition: none;
1242
+
filter: brightness(0.9);
1234
1243
}
1235
1244
1236
1245
/* TOAST */
1237
1246
1238
1247
:root .toastify {
1248
+
user-select: none;
1239
1249
padding: 8px 16px;
1240
1250
border-radius: 999px;
1251
+
pointer-events: none;
1252
+
color: var(--button-text-color);
1253
+
text-shadow: 0 calc(var(--hairline-width) * -1) var(--drop-shadow-color);
1254
+
background-color: var(--button-bg-blur-color);
1255
+
background-image: none;
1256
+
backdrop-filter: blur(16px);
1241
1257
}
1242
1258
.toastify-bottom {
1243
1259
margin-bottom: env(safe-area-inset-bottom);
1244
-
}
1245
-
:root .toastify:hover {
1246
-
filter: brightness(1.2);
1247
-
}
1248
-
:root .toastify:active {
1249
-
filter: brightness(0.8);
1250
1260
}
1251
1261
1252
1262
/* AVATARS STACK */
+3
-3
src/utils/show-toast.js
+3
-3
src/utils/show-toast.js
···
4
4
if (typeof props === 'string') {
5
5
props = { text: props };
6
6
}
7
-
const { onClick = () => {}, delay, ...rest } = props;
7
+
const { onClick, delay, ...rest } = props;
8
8
const toast = Toastify({
9
-
className: 'shiny-pill',
9
+
className: `${onClick || props.destination ? 'shiny-pill' : ''}`,
10
10
gravity: 'bottom',
11
11
position: 'center',
12
12
...rest,
13
13
onClick: () => {
14
-
onClick(toast); // Pass in the object itself!
14
+
onClick?.(toast); // Pass in the object itself!
15
15
},
16
16
});
17
17
if (delay) {