PluginProbe
aBlocks – Gutenberg Blocks, User Dashboard Builder, Popup Builder, Form Builder & Animation Builder / 2.14.0
aBlocks – Gutenberg Blocks, User Dashboard Builder, Popup Builder, Form Builder & Animation Builder v2.14.0
2.14.0 2.13.0 2.13.1 2.12.0 2.11.1 2.11.0 2.10.0 2.9.0 2.7.4 2.7.5 2.7.6 2.7.7 2.8.0 2.8.1 2.9.1 trunk 1.0 1.0-beta1 1.0-beta2 1.0-beta3 1.0.1 1.0.2 1.0.3 1.1.0 1.1.1 All 81 releases
ablocks / vendor / storeengine / wordpress-sdk / static / deactivation-modal.css

deactivation-modal.css in aBlocks – Gutenberg Blocks, User Dashboard Builder, Popup Builder, Form Builder & Animation Builder 2.14.0, at vendor/storeengine/wordpress-sdk/static/deactivation-modal.css

630 lines 15.2 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 body.se-sdk-deactivation-modal-open {
2 overflow: hidden !important;
3 }
4
5 .se-sdk-deactivation-modal,
6 .se-sdk-deactivation-modal * {
7 box-sizing: border-box;
8 }
9
10 .se-sdk-deactivation-modal {
11 position: fixed;
12 z-index: 9999999;
13 inset: 0;
14 display: none;
15 background: rgba(0, 0, 0, 0.5);
16 color: var(--se-sdk-muted-color, #787878);
17 font-size: 13px;
18 line-height: 25px;
19 }
20
21 .se-sdk-deactivation-modal.modal-active {
22 display: block;
23 }
24
25 .se-sdk-deactivation-modal strong,
26 .se-sdk-deactivation-modal b {
27 font-weight: bold;
28 }
29
30 .se-sdk-deactivation-modal--wrap {
31 position: absolute;
32 inset: 0;
33 z-index: 99;
34 display: block;
35 width: 550px;
36 height: max-content;
37 margin: auto;
38 background: #fff;
39 border-radius: 3px;
40 box-shadow: 0 15px 15px rgba(0, 0, 0, 0.2);
41 }
42
43 .se-sdk-deactivation-modal--wrap.support {
44 z-index: 999;
45 }
46
47 .se-sdk-deactivation-modal--wrap .response {
48 position: absolute;
49 inset: 0;
50 display: none;
51 overflow: hidden;
52 background: rgba(0, 0, 0, 0.8);
53 }
54
55 .se-sdk-deactivation-modal .response.show {
56 display: block;
57 }
58
59 .se-sdk-deactivation-modal--wrap .response .wrapper {
60 display: flex;
61 flex-flow: column;
62 align-items: center;
63 justify-content: center;
64 width: calc(100% - 40px);
65 height: calc(100% - 40px);
66 margin: 20px;
67 padding: 40px;
68 text-align: center;
69 background: #fff;
70 }
71
72 .se-sdk-deactivation-modal .reason .response .wrapper {
73 width: calc(100% - 80px);
74 height: calc(100% - 80px);
75 margin: 40px;
76 }
77
78 .se-sdk-deactivation-modal .button .dashicons {
79 margin: 4px 0;
80 }
81
82 .se-sdk-deactivation-modal--header {
83 position: relative;
84 display: block;
85 float: left;
86 width: 100%;
87 padding: 12px 24px;
88 border-bottom: 1px solid var(--se-sdk-border-color, #eee);
89 }
90
91 .se-sdk-deactivation-modal--header h3 {
92 display: flex;
93 flex: 1 0 0;
94 gap: 8px;
95 align-items: center;
96 margin: 0;
97 color: var(--se-sdk-text-color, #141A24);
98 font-size: 18px;
99 font-style: normal;
100 font-weight: 600;
101 line-height: 28px;
102 }
103
104 .se-sdk-deactivation-modal--close {
105 position: absolute;
106 top: -15px;
107 right: -15px;
108 width: 30px;
109 height: 30px;
110 padding: 6px;
111 line-height: 0;
112 background: #fff;
113 border-radius: 15px;
114 box-shadow: 0 5px 7px rgba(0, 0, 0, 0.3);
115 }
116
117 .se-sdk-deactivation-modal--close svg {
118 display: inline-block;
119 width: 1em;
120 height: 1em;
121 font-size: 18px;
122 user-select: none;
123 }
124
125 .se-sdk-deactivation-modal--body {
126 position: relative;
127 display: block;
128 float: left;
129 width: 100%;
130 max-height: 58dvh;
131 padding: 32px 32px 12px;
132 overflow: auto;
133 }
134
135 .se-sdk-deactivation-modal .feedback-message {
136 margin-bottom: 24px;
137 color: var(--se-sdk-text-color, #141A24);
138 font-size: 16px;
139 font-style: normal;
140 font-weight: 500;
141 line-height: 24px;
142 }
143
144 .se-sdk-deactivation-modal .reasons {
145 display: flex;
146 flex-direction: column;
147 gap: 12px;
148 margin: 0;
149 }
150
151 .se-sdk-deactivation-modal dd,
152 .se-sdk-deactivation-modal li {
153 margin: 0;
154 }
155
156 .se-sdk-deactivation-modal .reason-input {
157 margin-top: 5px;
158 margin-left: 20px;
159 }
160
161 .se-sdk-deactivation-modal--footer {
162 position: relative;
163 display: flex;
164 justify-content: space-between;
165 width: 100%;
166 padding: 12px 32px 32px;
167 border-top: 1px solid var(--se-sdk-border-color, #eee);
168 }
169
170 .se-sdk-deactivation-modal--open-ticket {
171 margin-bottom: 24px;
172 }
173
174 .se-sdk-deactivation-modal--open-ticket span {
175 color: var(--se-sdk-muted-color, #738496);
176 font-size: 16px;
177 font-style: normal;
178 font-weight: 500;
179 line-height: 24px;
180 }
181
182 .se-sdk-deactivation-modal--footer a,
183 .se-sdk-deactivation-modal--footer button {
184 vertical-align: middle;
185 }
186
187 .support .se-sdk-deactivation-modal--footer {
188 text-align: left;
189 }
190
191 .support .se-sdk-deactivation-modal--footer button {
192 float: right;
193 margin-left: 10px;
194 }
195
196 .se-sdk-deactivation-modal .se-sdk-row {
197 position: relative;
198 display: block;
199 float: left;
200 width: 100%;
201 margin: 4px auto;
202 }
203
204 .se-sdk-deactivation-modal .mui {
205 display: inline-flex;
206 flex-direction: column;
207 min-width: 0;
208 margin: 0;
209 padding: 0;
210 border: 0;
211 vertical-align: top;
212 }
213
214 .se-sdk-deactivation-modal .se-sdk-row.col-2 {
215 width: calc(50% - 16px);
216 }
217
218 .se-sdk-deactivation-modal .se-sdk-row.col-3 {
219 width: calc(calc(100% / 3) - 16px);
220 }
221
222 .se-sdk-deactivation-modal .se-sdk-row.col-left {
223 margin-right: 8px;
224 }
225
226 .se-sdk-deactivation-modal .se-sdk-row.col-center {
227 margin-right: 8px;
228 margin-left: 8px;
229 }
230
231 .se-sdk-deactivation-modal .se-sdk-row.col-right {
232 margin-left: 8px;
233 }
234
235 .se-sdk-deactivation-modal .mui .se-sdk-form-control {
236 position: relative;
237 display: inline-flex;
238 align-items: center;
239 width: 100%;
240 font-size: 1rem;
241 line-height: 1.1875em;
242 cursor: text;
243 }
244
245 .se-sdk-deactivation-modal .mui label {
246 position: absolute;
247 top: 0;
248 left: 0;
249 display: block;
250 padding: 0;
251 color: rgba(0, 0, 0, 0.54);
252 font-size: 1rem;
253 font-weight: 400;
254 line-height: 1;
255 letter-spacing: 0.00938em;
256 transform: translate(0, 24px) scale(1);
257 transform-origin: top left;
258 transition: color 200ms cubic-bezier(0, 0, 0.2, 1), transform 200ms cubic-bezier(0, 0, 0.2, 1), padding 200ms cubic-bezier(0, 0, 0.2, 1);
259 }
260
261 .se-sdk-deactivation-modal .mui label.focused {
262 color: var(--se-sdk-primary-color, #008DFF);
263 }
264
265 .se-sdk-deactivation-modal p:not(.helper-text).mui-error,
266 .se-sdk-deactivation-modal div:not(.helper-text).mui-error,
267 .se-sdk-deactivation-modal .mui label.mui-error {
268 padding: 5px 10px;
269 color: var(--se-sdk-danger-color, #f02e5e);
270 }
271
272 .se-sdk-deactivation-modal .mui label.shrink.mui-error {
273 padding: 0;
274 }
275
276 .se-sdk-deactivation-modal p:not(.helper-text).mui-error,
277 .se-sdk-deactivation-modal div:not(.helper-text).mui-error {
278 font-weight: bold;
279 border: 1px solid var(--se-sdk-danger-color, #f02e5e);
280 }
281
282 .se-sdk-deactivation-modal .mui label.shrink {
283 transform: translate(0, 2px) scale(0.75);
284 transform-origin: top left;
285 }
286
287 .se-sdk-deactivation-modal .mui label + .se-sdk-form-control {
288 margin-top: 16px;
289 }
290
291 .se-sdk-deactivation-modal .mui .se-sdk-form-control::before {
292 position: absolute;
293 right: 0;
294 bottom: 0;
295 left: 0;
296 content: "\00a0";
297 border-bottom: 1px solid rgba(0, 0, 0, 0.42);
298 pointer-events: none;
299 transition: border-bottom-color 200ms cubic-bezier(0.4, 0, 0.2, 1);
300 }
301
302 .se-sdk-deactivation-modal .mui .se-sdk-form-control:hover:not(.disabled)::before {
303 border-bottom: 2px solid rgba(0, 0, 0, 0.87);
304 }
305
306 .se-sdk-deactivation-modal .mui .se-sdk-form-control::after {
307 position: absolute;
308 right: 0;
309 bottom: 0;
310 left: 0;
311 content: "";
312 border-bottom: 2px solid var(--se-sdk-primary-color, #008DFF);
313 transform: scaleX(0);
314 pointer-events: none;
315 transition: transform 200ms cubic-bezier(0, 0, 0.2, 1);
316 }
317
318 .se-sdk-deactivation-modal .mui .se-sdk-form-control.focused::after {
319 transform: scaleX(1);
320 }
321
322 .se-sdk-deactivation-modal .mui .se-sdk-form-control.mui-error::after {
323 border-bottom-color: var(--se-sdk-danger-color, #f02e5e);
324 transform: scaleX(1);
325 }
326
327 .se-sdk-deactivation-modal .mui .se-sdk-form-control input,
328 .se-sdk-deactivation-modal .mui .se-sdk-form-control textarea {
329 display: block;
330 width: 100%;
331 min-width: 0;
332 min-height: auto;
333 height: 1.1875em;
334 margin: 0;
335 padding: 6px 0 7px;
336 color: currentColor;
337 font: inherit;
338 background: none;
339 border: 0;
340 box-sizing: content-box;
341 -webkit-tap-highlight-color: transparent;
342 }
343
344 .se-sdk-deactivation-modal .mui .se-sdk-form-control input {
345 animation-name: mui-keyframes-auto-fill-cancel;
346 }
347
348 .se-sdk-deactivation-modal .mui .se-sdk-form-control input:-moz-autofill,
349 .se-sdk-deactivation-modal .mui .se-sdk-form-control input:-webkit-autofill {
350 animation-name: mui-keyframes-auto-fill;
351 animation-duration: 5000s;
352 }
353
354 @-webkit-keyframes mui-keyframes-auto-fill {
355 }
356
357 @-webkit-keyframes mui-keyframes-auto-fill-cancel {
358 }
359
360 .se-sdk-deactivation-modal .mui .se-sdk-form-control textarea {
361 height: auto;
362 padding: 0;
363 resize: none;
364 }
365
366 .se-sdk-deactivation-modal .mui .se-sdk-form-control input::-webkit-search-decoration,
367 .se-sdk-deactivation-modal .mui .se-sdk-form-control textarea::-webkit-search-decoration {
368 -webkit-appearance: none;
369 }
370
371 .se-sdk-deactivation-modal .mui .se-sdk-form-control input::placeholder,
372 .se-sdk-deactivation-modal .mui .se-sdk-form-control textarea::placeholder {
373 color: currentColor;
374 opacity: 0.42;
375 transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1);
376 }
377
378 .se-sdk-deactivation-modal .mui .se-sdk-form-control input:focus,
379 .se-sdk-deactivation-modal .mui .se-sdk-form-control input:invalid,
380 .se-sdk-deactivation-modal .mui .se-sdk-form-control textarea:focus,
381 .se-sdk-deactivation-modal .mui .se-sdk-form-control textarea:invalid {
382 outline: 0;
383 box-shadow: none;
384 }
385
386 .se-sdk-deactivation-modal .reason-input input[type="text"]:focus,
387 .se-sdk-deactivation-modal .reason-input textarea:focus {
388 border-color: var(--se-sdk-primary-color, #008DFF);
389 box-shadow: 0 0 0 1px var(--se-sdk-primary-color, #008DFF);
390 }
391
392 .se-sdk-deactivation-modal .mui .helper-text {
393 min-height: 1em;
394 margin: 8px 0 0;
395 color: rgba(0, 0, 0, 0.54);
396 font-size: 0.75rem;
397 font-weight: 400;
398 line-height: 1em;
399 text-align: left;
400 letter-spacing: 0.03333em;
401 }
402
403 .se-sdk-deactivation-modal .mui .helper-text.contained {
404 margin: 8px 14px 0;
405 }
406
407 .se-sdk-deactivation-modal .mui .helper-text.mui-error {
408 position: absolute;
409 right: 0;
410 margin-top: 3px;
411 color: var(--se-sdk-danger-color, #f02e5e);
412 font-size: 11px;
413 }
414
415 .se-sdk-deactivation-modal--open-ticket a,
416 .se-sdk-deactivation-modal--open-ticket button,
417 .se-sdk-deactivation-modal .button {
418 display: inline-flex;
419 align-items: center;
420 justify-content: center;
421 padding: 2px 14px;
422 color: #fff;
423 font-size: 14px;
424 font-weight: 500;
425 text-decoration: none;
426 cursor: pointer;
427 background: var(--se-sdk-primary-color, #008DFF);
428 border: 1px solid var(--se-sdk-primary-color, #008DFF);
429 border-radius: 4px;
430 }
431
432 .se-sdk-deactivation-modal--open-ticket a,
433 .se-sdk-deactivation-modal--open-ticket button {
434 gap: 8px;
435 margin-top: 12px;
436 padding: 9px 14px;
437 color: var(--se-sdk-primary-color, #008DFF);
438 background: #fff;
439 border: 1px solid var(--se-sdk-primary-color, #008DFF);
440 border-radius: 9999px;
441 }
442
443 .se-sdk-deactivation-modal .button:hover,
444 .se-sdk-deactivation-modal .button:focus {
445 color: #fff;
446 background: var(--se-sdk-primary-color, #008DFF);
447 border-color: var(--se-sdk-primary-color, #008DFF);
448 box-shadow: inset 1px 1px 12px -1px #00000040;
449 }
450
451 .se-sdk-deactivation-modal--open-ticket a:hover,
452 .se-sdk-deactivation-modal--open-ticket button:hover {
453 color: #fff;
454 background: var(--se-sdk-primary-color, #008DFF);
455 }
456
457 .se-sdk-deactivation-modal--open-ticket a:hover svg path,
458 .se-sdk-deactivation-modal--open-ticket button:hover svg path {
459 fill: #fff;
460 }
461
462 .se-sdk-deactivation-modal--open-ticket a:focus,
463 .se-sdk-deactivation-modal--open-ticket button:focus,
464 .se-sdk-deactivation-modal .button:focus {
465 box-shadow: 0 0 0 1px #fff, 0 0 0 3px var(--se-sdk-primary-color, #008DFF);
466 }
467
468 .se-sdk-deactivation-modal .button.button-link,
469 .se-sdk-deactivation-modal button.button-link {
470 color: var(--se-sdk-muted-color, #738496);
471 font-weight: 400;
472 background: transparent;
473 border-color: transparent;
474 }
475
476 .se-sdk-deactivation-modal .button.button-link:hover,
477 .se-sdk-deactivation-modal button.button-link:hover {
478 background: transparent;
479 border-color: transparent;
480 box-shadow: none;
481 }
482
483 .se-sdk-deactivation-modal .button.button-link:focus,
484 .se-sdk-deactivation-modal button.button-link:focus {
485 box-shadow: 0 0 0 1px #fff, 0 0 0 3px currentColor;
486 }
487
488 .se-sdk-deactivation-modal .open-ticket-form svg path,
489 .se-sdk-deactivation-modal .open-ticket-link svg path {
490 fill: var(--se-sdk-primary-color, #008DFF);
491 }
492
493 .se-sdk-deactivation-modal .button.disabled,
494 .se-sdk-deactivation-modal button.disabled,
495 .se-sdk-deactivation-modal .button:disabled,
496 .se-sdk-deactivation-modal button:disabled {
497 cursor: not-allowed !important;
498 background: transparent !important;
499 border: 1px solid #c8c8c8;
500 box-shadow: none;
501 color: #7a7a7a;
502 }
503
504 /* Loading state keeps the original primary colour so the spinner reads
505 as "submitting" rather than "disabled". `.loading` always wins over
506 `.disabled` thanks to ordering below. */
507 .se-sdk-deactivation-modal .button.loading,
508 .se-sdk-deactivation-modal button.loading,
509 .se-sdk-deactivation-modal .button.disabled.loading,
510 .se-sdk-deactivation-modal button.disabled.loading,
511 .se-sdk-deactivation-modal .button.loading:disabled,
512 .se-sdk-deactivation-modal button.loading:disabled {
513 cursor: wait !important;
514 background: var(--se-sdk-primary-color, #008DFF) !important;
515 border: 1px solid var(--se-sdk-primary-color, #008DFF) !important;
516 color: #fff !important;
517 box-shadow: none;
518 opacity: 0.85;
519 }
520
521 /* Skip & Deactivate is the muted "link" button — keep its look while loading. */
522 .se-sdk-deactivation-modal .button.button-link.loading,
523 .se-sdk-deactivation-modal button.button-link.loading,
524 .se-sdk-deactivation-modal .button.button-link.disabled.loading,
525 .se-sdk-deactivation-modal button.button-link.disabled.loading {
526 background: transparent !important;
527 border-color: transparent !important;
528 color: var(--se-sdk-muted-color, #738496) !important;
529 }
530
531 /* In-button loading spinner shown while feedback is being sent. */
532 .se-sdk-deactivation-modal .se-sdk-spinner {
533 display: inline-block;
534 width: 12px;
535 height: 12px;
536 margin-right: 8px;
537 border: 2px solid currentColor;
538 border-right-color: transparent;
539 border-radius: 50%;
540 vertical-align: -2px;
541 animation: se-sdk-modal-spin 0.7s linear infinite;
542 }
543
544 .se-sdk-deactivation-modal .se-sdk-spinner-label {
545 vertical-align: middle;
546 }
547
548 @keyframes se-sdk-modal-spin {
549 to { transform: rotate(360deg); }
550 }
551
552 .se-sdk-deactivation-modal .button.disabled.button-link,
553 .se-sdk-deactivation-modal button.disabled.button-link,
554 .se-sdk-deactivation-modal .button.button-link:disabled,
555 .se-sdk-deactivation-modal button.button-link:disabled {
556 border-color: transparent !important;
557 }
558
559 .se-sdk-deactivation-modal input[type="radio"]:checked::before {
560 background-color: var(--se-sdk-primary-color, #008DFF);
561 }
562
563 .se-sdk-deactivation-modal input[type="checkbox"]:checked::before {
564 content: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M14.83 4.89l1.34.94-5.81 8.38H9.02L5.78 9.67l1.34-1.25 2.57 2.4z' fill='%23008DFF'/%3E%3C/svg%3E");
565 }
566
567 .se-sdk-deactivation-modal input[type="checkbox"],
568 .se-sdk-deactivation-modal input[type="radio"] {
569 border-color: var(--se-sdk-primary-color, #008DFF);
570 }
571
572 .se-sdk-deactivation-modal--consent {
573 margin-top: 16px;
574 padding-top: 14px;
575 border-top: 1px solid var(--se-sdk-border-color, #eeeeee);
576 font-size: 13px;
577 color: var(--se-sdk-text-color, #141A24);
578 }
579
580 .se-sdk-deactivation-modal--consent .se-sdk-consent-summary {
581 cursor: pointer;
582 user-select: none;
583 color: var(--se-sdk-primary-color, #008DFF);
584 font-weight: 500;
585 }
586
587 .se-sdk-deactivation-modal--consent .se-sdk-consent-summary:hover {
588 text-decoration: underline;
589 }
590
591 .se-sdk-deactivation-modal--consent .se-sdk-consent-content {
592 margin-top: 10px;
593 }
594
595 .se-sdk-deactivation-modal--consent .se-sdk-consent-intro {
596 margin: 0 0 6px;
597 color: var(--se-sdk-muted-color, #738496);
598 }
599
600 .se-sdk-deactivation-modal--consent .se-sdk-consent-note {
601 margin: 6px 0 0;
602 color: var(--se-sdk-muted-color, #738496);
603 }
604
605 .se-sdk-deactivation-modal--consent .se-sdk-consent-list {
606 margin: 0 0 6px;
607 padding-left: 18px;
608 list-style: disc;
609 color: var(--se-sdk-muted-color, #738496);
610 }
611
612 .se-sdk-deactivation-modal--consent .se-sdk-consent-list li {
613 margin: 2px 0;
614 }
615
616 .se-sdk-deactivation-modal--consent .se-sdk-consent-note a {
617 color: var(--se-sdk-primary-color, #008DFF);
618 margin-left: 4px;
619 }
620
621 @media (max-width: 768px) {
622 .se-sdk-deactivation-modal--wrap {
623 width: calc(100% - 30px) !important;
624 }
625
626 .se-sdk-deactivation-modal--body {
627 padding: 16px !important;
628 }
629 }
630