react-confirm-alert 3.1.1 → 3.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.esm.js +11 -3
- package/lib/index.js +11 -3
- package/package.json +1 -1
- package/src/react-confirm-alert.css +189 -0
- package/style.css +189 -0
package/dist/index.esm.js
CHANGED
|
@@ -348,7 +348,7 @@ function closeDialog$1(id, { sync = true } = {}) {
|
|
|
348
348
|
commit(() => store.set(remove(store.get(), id)), sync);
|
|
349
349
|
return;
|
|
350
350
|
}
|
|
351
|
-
Promise.all(exits.map((a) => a.finished)).
|
|
351
|
+
Promise.all(exits.map((a) => a.finished.catch(() => {}))).then(() => store.set(remove(store.get(), id)));
|
|
352
352
|
}
|
|
353
353
|
var reopenQueued = false;
|
|
354
354
|
function reopenClosedFrames() {
|
|
@@ -440,7 +440,10 @@ function DialogFrame(props) {
|
|
|
440
440
|
const isBusy = () => !!props.id && runtime().busy.has(props.id);
|
|
441
441
|
const onKeyDown = (e) => {
|
|
442
442
|
var _props$onKeyDown;
|
|
443
|
-
(_props$onKeyDown = props.onKeyDown) === null || _props$onKeyDown === void 0 || _props$onKeyDown.call(props, e,
|
|
443
|
+
(_props$onKeyDown = props.onKeyDown) === null || _props$onKeyDown === void 0 || _props$onKeyDown.call(props, e, () => {
|
|
444
|
+
e.preventDefault();
|
|
445
|
+
props.onDismiss();
|
|
446
|
+
});
|
|
444
447
|
if (!native && !props.legacy && e.key === "Escape" && props.closeOnEscape && !isBusy()) props.onDismiss();
|
|
445
448
|
};
|
|
446
449
|
const slot = slotsFor(props.layers);
|
|
@@ -453,6 +456,7 @@ function DialogFrame(props) {
|
|
|
453
456
|
"data-rca": "",
|
|
454
457
|
"data-state": props.state,
|
|
455
458
|
"data-kind": props.kind,
|
|
459
|
+
"data-skin": props.legacy ? void 0 : "",
|
|
456
460
|
"data-tone": (_props$tone = props.tone) !== null && _props$tone !== void 0 ? _props$tone : "default",
|
|
457
461
|
"data-depth": String((_props$depth = props.depth) !== null && _props$depth !== void 0 ? _props$depth : 0),
|
|
458
462
|
"data-topmost": ((_props$topmost = props.topmost) !== null && _props$topmost !== void 0 ? _props$topmost : true) ? "" : void 0,
|
|
@@ -510,7 +514,11 @@ function LegacyContent({ props, titleId, close, id }) {
|
|
|
510
514
|
const keyboard = (event) => {
|
|
511
515
|
var _topmost, _props$keyCodeForClos, _props$closeOnEscape, _props$onkeyPress;
|
|
512
516
|
if (id && ((_topmost = topmost(store.get())) === null || _topmost === void 0 ? void 0 : _topmost.id) !== id) return;
|
|
513
|
-
const { props
|
|
517
|
+
const { props } = latest.current;
|
|
518
|
+
const close = () => {
|
|
519
|
+
event.preventDefault();
|
|
520
|
+
latest.current.close();
|
|
521
|
+
};
|
|
514
522
|
const keyCode = event.keyCode;
|
|
515
523
|
if (((_props$keyCodeForClos = props.keyCodeForClose) !== null && _props$keyCodeForClos !== void 0 ? _props$keyCodeForClos : []).includes(keyCode)) close();
|
|
516
524
|
if (((_props$closeOnEscape = props.closeOnEscape) !== null && _props$closeOnEscape !== void 0 ? _props$closeOnEscape : true) && keyCode === 27) {
|
package/lib/index.js
CHANGED
|
@@ -352,7 +352,7 @@ function closeDialog$1(id, { sync = true } = {}) {
|
|
|
352
352
|
commit(() => store.set(remove(store.get(), id)), sync);
|
|
353
353
|
return;
|
|
354
354
|
}
|
|
355
|
-
Promise.all(exits.map((a) => a.finished)).
|
|
355
|
+
Promise.all(exits.map((a) => a.finished.catch(() => {}))).then(() => store.set(remove(store.get(), id)));
|
|
356
356
|
}
|
|
357
357
|
var reopenQueued = false;
|
|
358
358
|
function reopenClosedFrames() {
|
|
@@ -444,7 +444,10 @@ function DialogFrame(props) {
|
|
|
444
444
|
const isBusy = () => !!props.id && runtime().busy.has(props.id);
|
|
445
445
|
const onKeyDown = (e) => {
|
|
446
446
|
var _props$onKeyDown;
|
|
447
|
-
(_props$onKeyDown = props.onKeyDown) === null || _props$onKeyDown === void 0 || _props$onKeyDown.call(props, e,
|
|
447
|
+
(_props$onKeyDown = props.onKeyDown) === null || _props$onKeyDown === void 0 || _props$onKeyDown.call(props, e, () => {
|
|
448
|
+
e.preventDefault();
|
|
449
|
+
props.onDismiss();
|
|
450
|
+
});
|
|
448
451
|
if (!native && !props.legacy && e.key === "Escape" && props.closeOnEscape && !isBusy()) props.onDismiss();
|
|
449
452
|
};
|
|
450
453
|
const slot = slotsFor(props.layers);
|
|
@@ -457,6 +460,7 @@ function DialogFrame(props) {
|
|
|
457
460
|
"data-rca": "",
|
|
458
461
|
"data-state": props.state,
|
|
459
462
|
"data-kind": props.kind,
|
|
463
|
+
"data-skin": props.legacy ? void 0 : "",
|
|
460
464
|
"data-tone": (_props$tone = props.tone) !== null && _props$tone !== void 0 ? _props$tone : "default",
|
|
461
465
|
"data-depth": String((_props$depth = props.depth) !== null && _props$depth !== void 0 ? _props$depth : 0),
|
|
462
466
|
"data-topmost": ((_props$topmost = props.topmost) !== null && _props$topmost !== void 0 ? _props$topmost : true) ? "" : void 0,
|
|
@@ -514,7 +518,11 @@ function LegacyContent({ props, titleId, close, id }) {
|
|
|
514
518
|
const keyboard = (event) => {
|
|
515
519
|
var _topmost, _props$keyCodeForClos, _props$closeOnEscape, _props$onkeyPress;
|
|
516
520
|
if (id && ((_topmost = topmost(store.get())) === null || _topmost === void 0 ? void 0 : _topmost.id) !== id) return;
|
|
517
|
-
const { props
|
|
521
|
+
const { props } = latest.current;
|
|
522
|
+
const close = () => {
|
|
523
|
+
event.preventDefault();
|
|
524
|
+
latest.current.close();
|
|
525
|
+
};
|
|
518
526
|
const keyCode = event.keyCode;
|
|
519
527
|
if (((_props$keyCodeForClos = props.keyCodeForClose) !== null && _props$keyCodeForClos !== void 0 ? _props$keyCodeForClos : []).includes(keyCode)) close();
|
|
520
528
|
if (((_props$closeOnEscape = props.closeOnEscape) !== null && _props$closeOnEscape !== void 0 ? _props$closeOnEscape : true) && keyCode === 27) {
|
package/package.json
CHANGED
|
@@ -32,6 +32,8 @@ body.react-confirm-alert-body-element {
|
|
|
32
32
|
border-radius: var(--rca-radius, 10px);
|
|
33
33
|
box-shadow: var(--rca-shadow, 0 20px 75px rgba(0, 0, 0, 0.13));
|
|
34
34
|
color: var(--rca-fg, #666);
|
|
35
|
+
/* confirmAlert renders message as text right in the body; keep its line breaks (#38). */
|
|
36
|
+
white-space: pre-line;
|
|
35
37
|
}
|
|
36
38
|
|
|
37
39
|
.react-confirm-alert-body > h1 {
|
|
@@ -125,3 +127,190 @@ dialog.react-confirm-alert-overlay::backdrop {
|
|
|
125
127
|
opacity: 1;
|
|
126
128
|
}
|
|
127
129
|
}
|
|
130
|
+
|
|
131
|
+
/* The default look of every dialog except confirmAlert, which has no data-skin and keeps the 3.0 look above; unstyled drops the overlay class, so none of this applies.
|
|
132
|
+
--_* are internal defaults: a --rca-* variable set by the app always wins over them. */
|
|
133
|
+
.react-confirm-alert-overlay[data-skin] {
|
|
134
|
+
--_bg: #fff;
|
|
135
|
+
--_fg: #71717a;
|
|
136
|
+
--_title: #09090b;
|
|
137
|
+
--_border: #e4e4e7;
|
|
138
|
+
--_hover: #f4f4f5;
|
|
139
|
+
--_primary: #18181b;
|
|
140
|
+
--_primary-fg: #fff;
|
|
141
|
+
--_ring: #a1a1aa;
|
|
142
|
+
--_danger: #dc2626;
|
|
143
|
+
--_error: #dc2626;
|
|
144
|
+
box-sizing: border-box;
|
|
145
|
+
padding: 16px;
|
|
146
|
+
background: var(--rca-backdrop, rgba(0, 0, 0, 0.5));
|
|
147
|
+
opacity: 1;
|
|
148
|
+
animation: rca-in var(--rca-duration, 200ms) var(--rca-easing, cubic-bezier(0.32, 0.72, 0, 1)) both;
|
|
149
|
+
}
|
|
150
|
+
/* Dark is opt-in: the app's .dark class or data-theme="dark" on an ancestor, usually <html>. */
|
|
151
|
+
:is(.dark, [data-theme=dark]) .react-confirm-alert-overlay[data-skin] {
|
|
152
|
+
--_bg: #18181b;
|
|
153
|
+
--_fg: #a1a1aa;
|
|
154
|
+
--_title: #fafafa;
|
|
155
|
+
--_border: #3f3f46;
|
|
156
|
+
--_hover: #27272a;
|
|
157
|
+
--_primary: #fafafa;
|
|
158
|
+
--_primary-fg: #18181b;
|
|
159
|
+
--_ring: #71717a;
|
|
160
|
+
--_error: #f87171;
|
|
161
|
+
background: var(--rca-backdrop, rgba(0, 0, 0, 0.7));
|
|
162
|
+
}
|
|
163
|
+
.react-confirm-alert-overlay[data-skin] .react-confirm-alert {
|
|
164
|
+
max-width: 100%;
|
|
165
|
+
animation: rca-pop var(--rca-duration, 200ms) var(--rca-easing, cubic-bezier(0.32, 0.72, 0, 1)) both;
|
|
166
|
+
}
|
|
167
|
+
.react-confirm-alert-overlay[data-skin] .react-confirm-alert-body {
|
|
168
|
+
box-sizing: border-box;
|
|
169
|
+
width: var(--rca-width, 420px);
|
|
170
|
+
max-width: 100%;
|
|
171
|
+
padding: var(--rca-padding, 24px);
|
|
172
|
+
border: 1px solid var(--rca-border, var(--_border));
|
|
173
|
+
border-radius: var(--rca-radius, 10px);
|
|
174
|
+
background: var(--rca-bg, var(--_bg));
|
|
175
|
+
box-shadow: var(--rca-shadow, 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1));
|
|
176
|
+
color: var(--rca-fg, var(--_fg));
|
|
177
|
+
font-family: var(--rca-font, inherit);
|
|
178
|
+
font-size: 14px;
|
|
179
|
+
line-height: 1.5;
|
|
180
|
+
}
|
|
181
|
+
.react-confirm-alert-overlay[data-skin][data-state=closing] {
|
|
182
|
+
animation: rca-out 150ms ease-in both;
|
|
183
|
+
}
|
|
184
|
+
.react-confirm-alert-overlay[data-skin][data-state=closing] .react-confirm-alert {
|
|
185
|
+
animation: rca-pop-out 150ms ease-in both;
|
|
186
|
+
}
|
|
187
|
+
.react-confirm-alert-overlay[data-skin] [data-slot=title] {
|
|
188
|
+
margin: 0 0 8px;
|
|
189
|
+
font-size: 18px;
|
|
190
|
+
font-weight: 600;
|
|
191
|
+
line-height: 1.3;
|
|
192
|
+
letter-spacing: -0.01em;
|
|
193
|
+
color: var(--rca-title, var(--_title));
|
|
194
|
+
}
|
|
195
|
+
.react-confirm-alert-overlay[data-skin] [data-slot=field] {
|
|
196
|
+
margin-top: 16px;
|
|
197
|
+
}
|
|
198
|
+
.react-confirm-alert-overlay[data-skin] [data-slot=label] {
|
|
199
|
+
display: block;
|
|
200
|
+
margin-bottom: 6px;
|
|
201
|
+
font-size: 13px;
|
|
202
|
+
font-weight: 500;
|
|
203
|
+
color: var(--rca-title, var(--_title));
|
|
204
|
+
}
|
|
205
|
+
.react-confirm-alert-overlay[data-skin] [data-slot=input] {
|
|
206
|
+
box-sizing: border-box;
|
|
207
|
+
width: 100%;
|
|
208
|
+
height: 36px;
|
|
209
|
+
padding: 0 12px;
|
|
210
|
+
border: 1px solid var(--rca-border, var(--_border));
|
|
211
|
+
border-radius: 6px;
|
|
212
|
+
background: transparent;
|
|
213
|
+
color: var(--rca-title, var(--_title));
|
|
214
|
+
font: inherit;
|
|
215
|
+
outline: none;
|
|
216
|
+
transition: border-color 150ms, box-shadow 150ms;
|
|
217
|
+
}
|
|
218
|
+
.react-confirm-alert-overlay[data-skin] [data-slot=input]:focus {
|
|
219
|
+
border-color: var(--rca-ring, var(--_ring));
|
|
220
|
+
box-shadow: 0 0 0 3px color-mix(in srgb, var(--rca-ring, var(--_ring)) 50%, transparent);
|
|
221
|
+
}
|
|
222
|
+
.react-confirm-alert-overlay[data-skin] [data-slot=input][aria-invalid=true] {
|
|
223
|
+
border-color: var(--rca-danger, var(--_error));
|
|
224
|
+
box-shadow: 0 0 0 3px color-mix(in srgb, var(--rca-danger, var(--_error)) 20%, transparent);
|
|
225
|
+
}
|
|
226
|
+
.react-confirm-alert-overlay[data-skin] [data-slot=error] {
|
|
227
|
+
margin: 6px 0 0;
|
|
228
|
+
font-size: 13px;
|
|
229
|
+
color: var(--rca-danger, var(--_error));
|
|
230
|
+
}
|
|
231
|
+
.react-confirm-alert-overlay[data-skin] .react-confirm-alert-button-group {
|
|
232
|
+
justify-content: flex-end;
|
|
233
|
+
gap: var(--rca-gap, 8px);
|
|
234
|
+
margin-top: 24px;
|
|
235
|
+
}
|
|
236
|
+
.react-confirm-alert-overlay[data-skin] .react-confirm-alert-button-group > button {
|
|
237
|
+
display: inline-flex;
|
|
238
|
+
align-items: center;
|
|
239
|
+
justify-content: center;
|
|
240
|
+
gap: 8px;
|
|
241
|
+
height: 36px;
|
|
242
|
+
margin: 0;
|
|
243
|
+
padding: 0 16px;
|
|
244
|
+
border: 1px solid var(--rca-border, var(--_border));
|
|
245
|
+
border-radius: var(--rca-button-radius, 6px);
|
|
246
|
+
background: var(--rca-bg, var(--_bg));
|
|
247
|
+
color: var(--rca-title, var(--_title));
|
|
248
|
+
font-family: inherit;
|
|
249
|
+
font-size: 14px;
|
|
250
|
+
font-weight: 500;
|
|
251
|
+
line-height: 1;
|
|
252
|
+
white-space: nowrap;
|
|
253
|
+
transition: background-color 150ms, transform 150ms;
|
|
254
|
+
}
|
|
255
|
+
.react-confirm-alert-overlay[data-skin] .react-confirm-alert-button-group > button:hover {
|
|
256
|
+
background: var(--_hover);
|
|
257
|
+
}
|
|
258
|
+
.react-confirm-alert-overlay[data-skin] .react-confirm-alert-button-group > [data-variant=primary] {
|
|
259
|
+
border-color: transparent;
|
|
260
|
+
background: var(--rca-button-bg, var(--_primary));
|
|
261
|
+
color: var(--rca-button-fg, var(--_primary-fg));
|
|
262
|
+
}
|
|
263
|
+
.react-confirm-alert-overlay[data-skin] .react-confirm-alert-button-group > [data-variant=danger] {
|
|
264
|
+
border-color: transparent;
|
|
265
|
+
background: var(--rca-danger, var(--_danger));
|
|
266
|
+
color: #fff;
|
|
267
|
+
}
|
|
268
|
+
.react-confirm-alert-overlay[data-skin] .react-confirm-alert-button-group > :is([data-variant=primary],[data-variant=danger]):hover {
|
|
269
|
+
opacity: 0.9;
|
|
270
|
+
}
|
|
271
|
+
.react-confirm-alert-overlay[data-skin] .react-confirm-alert-button-group > button:active {
|
|
272
|
+
transform: scale(0.97);
|
|
273
|
+
}
|
|
274
|
+
.react-confirm-alert-overlay[data-skin] .react-confirm-alert-button-group > button:focus-visible {
|
|
275
|
+
outline: var(--rca-focus-ring, 2px solid var(--_ring));
|
|
276
|
+
outline-offset: 2px;
|
|
277
|
+
}
|
|
278
|
+
.react-confirm-alert-overlay[data-skin] .react-confirm-alert-button-group > button:disabled {
|
|
279
|
+
cursor: default;
|
|
280
|
+
opacity: 0.6;
|
|
281
|
+
}
|
|
282
|
+
.react-confirm-alert-overlay[data-skin] .react-confirm-alert-button-group > button[aria-busy=true] {
|
|
283
|
+
cursor: progress;
|
|
284
|
+
opacity: 1;
|
|
285
|
+
}
|
|
286
|
+
.react-confirm-alert-overlay[data-skin] .react-confirm-alert-button-group > button[aria-busy=true]::before {
|
|
287
|
+
content: '';
|
|
288
|
+
width: 12px;
|
|
289
|
+
height: 12px;
|
|
290
|
+
border: 2px solid currentColor;
|
|
291
|
+
border-right-color: transparent;
|
|
292
|
+
border-radius: 50%;
|
|
293
|
+
animation: rca-spin 700ms linear infinite;
|
|
294
|
+
}
|
|
295
|
+
@media (max-width: 480px) {
|
|
296
|
+
.react-confirm-alert-overlay[data-skin] .react-confirm-alert-button-group {
|
|
297
|
+
flex-direction: column-reverse;
|
|
298
|
+
}
|
|
299
|
+
.react-confirm-alert-overlay[data-skin] .react-confirm-alert-button-group > button {
|
|
300
|
+
height: 40px;
|
|
301
|
+
}
|
|
302
|
+
}
|
|
303
|
+
@media (prefers-reduced-motion: reduce) {
|
|
304
|
+
.react-confirm-alert-overlay[data-skin],
|
|
305
|
+
.react-confirm-alert-overlay[data-skin] .react-confirm-alert {
|
|
306
|
+
animation: none;
|
|
307
|
+
}
|
|
308
|
+
.react-confirm-alert-overlay[data-skin] .react-confirm-alert-button-group > button {
|
|
309
|
+
transition: none;
|
|
310
|
+
}
|
|
311
|
+
}
|
|
312
|
+
@keyframes rca-in { from { opacity: 0; } }
|
|
313
|
+
@keyframes rca-out { to { opacity: 0; } }
|
|
314
|
+
@keyframes rca-pop { from { opacity: 0; transform: scale(0.95); } }
|
|
315
|
+
@keyframes rca-pop-out { to { opacity: 0; transform: scale(0.95); } }
|
|
316
|
+
@keyframes rca-spin { to { transform: rotate(360deg); } }
|
package/style.css
CHANGED
|
@@ -32,6 +32,8 @@ body.react-confirm-alert-body-element {
|
|
|
32
32
|
border-radius: var(--rca-radius, 10px);
|
|
33
33
|
box-shadow: var(--rca-shadow, 0 20px 75px rgba(0, 0, 0, 0.13));
|
|
34
34
|
color: var(--rca-fg, #666);
|
|
35
|
+
/* confirmAlert renders message as text right in the body; keep its line breaks (#38). */
|
|
36
|
+
white-space: pre-line;
|
|
35
37
|
}
|
|
36
38
|
|
|
37
39
|
.react-confirm-alert-body > h1 {
|
|
@@ -125,3 +127,190 @@ dialog.react-confirm-alert-overlay::backdrop {
|
|
|
125
127
|
opacity: 1;
|
|
126
128
|
}
|
|
127
129
|
}
|
|
130
|
+
|
|
131
|
+
/* The default look of every dialog except confirmAlert, which has no data-skin and keeps the 3.0 look above; unstyled drops the overlay class, so none of this applies.
|
|
132
|
+
--_* are internal defaults: a --rca-* variable set by the app always wins over them. */
|
|
133
|
+
.react-confirm-alert-overlay[data-skin] {
|
|
134
|
+
--_bg: #fff;
|
|
135
|
+
--_fg: #71717a;
|
|
136
|
+
--_title: #09090b;
|
|
137
|
+
--_border: #e4e4e7;
|
|
138
|
+
--_hover: #f4f4f5;
|
|
139
|
+
--_primary: #18181b;
|
|
140
|
+
--_primary-fg: #fff;
|
|
141
|
+
--_ring: #a1a1aa;
|
|
142
|
+
--_danger: #dc2626;
|
|
143
|
+
--_error: #dc2626;
|
|
144
|
+
box-sizing: border-box;
|
|
145
|
+
padding: 16px;
|
|
146
|
+
background: var(--rca-backdrop, rgba(0, 0, 0, 0.5));
|
|
147
|
+
opacity: 1;
|
|
148
|
+
animation: rca-in var(--rca-duration, 200ms) var(--rca-easing, cubic-bezier(0.32, 0.72, 0, 1)) both;
|
|
149
|
+
}
|
|
150
|
+
/* Dark is opt-in: the app's .dark class or data-theme="dark" on an ancestor, usually <html>. */
|
|
151
|
+
:is(.dark, [data-theme=dark]) .react-confirm-alert-overlay[data-skin] {
|
|
152
|
+
--_bg: #18181b;
|
|
153
|
+
--_fg: #a1a1aa;
|
|
154
|
+
--_title: #fafafa;
|
|
155
|
+
--_border: #3f3f46;
|
|
156
|
+
--_hover: #27272a;
|
|
157
|
+
--_primary: #fafafa;
|
|
158
|
+
--_primary-fg: #18181b;
|
|
159
|
+
--_ring: #71717a;
|
|
160
|
+
--_error: #f87171;
|
|
161
|
+
background: var(--rca-backdrop, rgba(0, 0, 0, 0.7));
|
|
162
|
+
}
|
|
163
|
+
.react-confirm-alert-overlay[data-skin] .react-confirm-alert {
|
|
164
|
+
max-width: 100%;
|
|
165
|
+
animation: rca-pop var(--rca-duration, 200ms) var(--rca-easing, cubic-bezier(0.32, 0.72, 0, 1)) both;
|
|
166
|
+
}
|
|
167
|
+
.react-confirm-alert-overlay[data-skin] .react-confirm-alert-body {
|
|
168
|
+
box-sizing: border-box;
|
|
169
|
+
width: var(--rca-width, 420px);
|
|
170
|
+
max-width: 100%;
|
|
171
|
+
padding: var(--rca-padding, 24px);
|
|
172
|
+
border: 1px solid var(--rca-border, var(--_border));
|
|
173
|
+
border-radius: var(--rca-radius, 10px);
|
|
174
|
+
background: var(--rca-bg, var(--_bg));
|
|
175
|
+
box-shadow: var(--rca-shadow, 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1));
|
|
176
|
+
color: var(--rca-fg, var(--_fg));
|
|
177
|
+
font-family: var(--rca-font, inherit);
|
|
178
|
+
font-size: 14px;
|
|
179
|
+
line-height: 1.5;
|
|
180
|
+
}
|
|
181
|
+
.react-confirm-alert-overlay[data-skin][data-state=closing] {
|
|
182
|
+
animation: rca-out 150ms ease-in both;
|
|
183
|
+
}
|
|
184
|
+
.react-confirm-alert-overlay[data-skin][data-state=closing] .react-confirm-alert {
|
|
185
|
+
animation: rca-pop-out 150ms ease-in both;
|
|
186
|
+
}
|
|
187
|
+
.react-confirm-alert-overlay[data-skin] [data-slot=title] {
|
|
188
|
+
margin: 0 0 8px;
|
|
189
|
+
font-size: 18px;
|
|
190
|
+
font-weight: 600;
|
|
191
|
+
line-height: 1.3;
|
|
192
|
+
letter-spacing: -0.01em;
|
|
193
|
+
color: var(--rca-title, var(--_title));
|
|
194
|
+
}
|
|
195
|
+
.react-confirm-alert-overlay[data-skin] [data-slot=field] {
|
|
196
|
+
margin-top: 16px;
|
|
197
|
+
}
|
|
198
|
+
.react-confirm-alert-overlay[data-skin] [data-slot=label] {
|
|
199
|
+
display: block;
|
|
200
|
+
margin-bottom: 6px;
|
|
201
|
+
font-size: 13px;
|
|
202
|
+
font-weight: 500;
|
|
203
|
+
color: var(--rca-title, var(--_title));
|
|
204
|
+
}
|
|
205
|
+
.react-confirm-alert-overlay[data-skin] [data-slot=input] {
|
|
206
|
+
box-sizing: border-box;
|
|
207
|
+
width: 100%;
|
|
208
|
+
height: 36px;
|
|
209
|
+
padding: 0 12px;
|
|
210
|
+
border: 1px solid var(--rca-border, var(--_border));
|
|
211
|
+
border-radius: 6px;
|
|
212
|
+
background: transparent;
|
|
213
|
+
color: var(--rca-title, var(--_title));
|
|
214
|
+
font: inherit;
|
|
215
|
+
outline: none;
|
|
216
|
+
transition: border-color 150ms, box-shadow 150ms;
|
|
217
|
+
}
|
|
218
|
+
.react-confirm-alert-overlay[data-skin] [data-slot=input]:focus {
|
|
219
|
+
border-color: var(--rca-ring, var(--_ring));
|
|
220
|
+
box-shadow: 0 0 0 3px color-mix(in srgb, var(--rca-ring, var(--_ring)) 50%, transparent);
|
|
221
|
+
}
|
|
222
|
+
.react-confirm-alert-overlay[data-skin] [data-slot=input][aria-invalid=true] {
|
|
223
|
+
border-color: var(--rca-danger, var(--_error));
|
|
224
|
+
box-shadow: 0 0 0 3px color-mix(in srgb, var(--rca-danger, var(--_error)) 20%, transparent);
|
|
225
|
+
}
|
|
226
|
+
.react-confirm-alert-overlay[data-skin] [data-slot=error] {
|
|
227
|
+
margin: 6px 0 0;
|
|
228
|
+
font-size: 13px;
|
|
229
|
+
color: var(--rca-danger, var(--_error));
|
|
230
|
+
}
|
|
231
|
+
.react-confirm-alert-overlay[data-skin] .react-confirm-alert-button-group {
|
|
232
|
+
justify-content: flex-end;
|
|
233
|
+
gap: var(--rca-gap, 8px);
|
|
234
|
+
margin-top: 24px;
|
|
235
|
+
}
|
|
236
|
+
.react-confirm-alert-overlay[data-skin] .react-confirm-alert-button-group > button {
|
|
237
|
+
display: inline-flex;
|
|
238
|
+
align-items: center;
|
|
239
|
+
justify-content: center;
|
|
240
|
+
gap: 8px;
|
|
241
|
+
height: 36px;
|
|
242
|
+
margin: 0;
|
|
243
|
+
padding: 0 16px;
|
|
244
|
+
border: 1px solid var(--rca-border, var(--_border));
|
|
245
|
+
border-radius: var(--rca-button-radius, 6px);
|
|
246
|
+
background: var(--rca-bg, var(--_bg));
|
|
247
|
+
color: var(--rca-title, var(--_title));
|
|
248
|
+
font-family: inherit;
|
|
249
|
+
font-size: 14px;
|
|
250
|
+
font-weight: 500;
|
|
251
|
+
line-height: 1;
|
|
252
|
+
white-space: nowrap;
|
|
253
|
+
transition: background-color 150ms, transform 150ms;
|
|
254
|
+
}
|
|
255
|
+
.react-confirm-alert-overlay[data-skin] .react-confirm-alert-button-group > button:hover {
|
|
256
|
+
background: var(--_hover);
|
|
257
|
+
}
|
|
258
|
+
.react-confirm-alert-overlay[data-skin] .react-confirm-alert-button-group > [data-variant=primary] {
|
|
259
|
+
border-color: transparent;
|
|
260
|
+
background: var(--rca-button-bg, var(--_primary));
|
|
261
|
+
color: var(--rca-button-fg, var(--_primary-fg));
|
|
262
|
+
}
|
|
263
|
+
.react-confirm-alert-overlay[data-skin] .react-confirm-alert-button-group > [data-variant=danger] {
|
|
264
|
+
border-color: transparent;
|
|
265
|
+
background: var(--rca-danger, var(--_danger));
|
|
266
|
+
color: #fff;
|
|
267
|
+
}
|
|
268
|
+
.react-confirm-alert-overlay[data-skin] .react-confirm-alert-button-group > :is([data-variant=primary],[data-variant=danger]):hover {
|
|
269
|
+
opacity: 0.9;
|
|
270
|
+
}
|
|
271
|
+
.react-confirm-alert-overlay[data-skin] .react-confirm-alert-button-group > button:active {
|
|
272
|
+
transform: scale(0.97);
|
|
273
|
+
}
|
|
274
|
+
.react-confirm-alert-overlay[data-skin] .react-confirm-alert-button-group > button:focus-visible {
|
|
275
|
+
outline: var(--rca-focus-ring, 2px solid var(--_ring));
|
|
276
|
+
outline-offset: 2px;
|
|
277
|
+
}
|
|
278
|
+
.react-confirm-alert-overlay[data-skin] .react-confirm-alert-button-group > button:disabled {
|
|
279
|
+
cursor: default;
|
|
280
|
+
opacity: 0.6;
|
|
281
|
+
}
|
|
282
|
+
.react-confirm-alert-overlay[data-skin] .react-confirm-alert-button-group > button[aria-busy=true] {
|
|
283
|
+
cursor: progress;
|
|
284
|
+
opacity: 1;
|
|
285
|
+
}
|
|
286
|
+
.react-confirm-alert-overlay[data-skin] .react-confirm-alert-button-group > button[aria-busy=true]::before {
|
|
287
|
+
content: '';
|
|
288
|
+
width: 12px;
|
|
289
|
+
height: 12px;
|
|
290
|
+
border: 2px solid currentColor;
|
|
291
|
+
border-right-color: transparent;
|
|
292
|
+
border-radius: 50%;
|
|
293
|
+
animation: rca-spin 700ms linear infinite;
|
|
294
|
+
}
|
|
295
|
+
@media (max-width: 480px) {
|
|
296
|
+
.react-confirm-alert-overlay[data-skin] .react-confirm-alert-button-group {
|
|
297
|
+
flex-direction: column-reverse;
|
|
298
|
+
}
|
|
299
|
+
.react-confirm-alert-overlay[data-skin] .react-confirm-alert-button-group > button {
|
|
300
|
+
height: 40px;
|
|
301
|
+
}
|
|
302
|
+
}
|
|
303
|
+
@media (prefers-reduced-motion: reduce) {
|
|
304
|
+
.react-confirm-alert-overlay[data-skin],
|
|
305
|
+
.react-confirm-alert-overlay[data-skin] .react-confirm-alert {
|
|
306
|
+
animation: none;
|
|
307
|
+
}
|
|
308
|
+
.react-confirm-alert-overlay[data-skin] .react-confirm-alert-button-group > button {
|
|
309
|
+
transition: none;
|
|
310
|
+
}
|
|
311
|
+
}
|
|
312
|
+
@keyframes rca-in { from { opacity: 0; } }
|
|
313
|
+
@keyframes rca-out { to { opacity: 0; } }
|
|
314
|
+
@keyframes rca-pop { from { opacity: 0; transform: scale(0.95); } }
|
|
315
|
+
@keyframes rca-pop-out { to { opacity: 0; transform: scale(0.95); } }
|
|
316
|
+
@keyframes rca-spin { to { transform: rotate(360deg); } }
|