@magicfeedback/native 2.1.7-alpha.8 → 2.1.11
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/README.md +315 -467
- package/dist/magicfeedback-sdk.browser.js +1 -1
- package/dist/magicfeedback-sdk.node.js +1 -1
- package/dist/styles/magicfeedback-default.css +268 -148
- package/dist/types/src/models/pageGraphs.d.ts +52 -0
- package/dist/types/src/models/types.d.ts +92 -3
- package/dist/types/src/render/helpers.d.ts +3 -0
- package/dist/types/src/render/ratingHelpers.d.ts +3 -0
- package/dist/types/src/render/registry.d.ts +3 -0
- package/dist/types/src/render/renderBoolean.d.ts +2 -0
- package/dist/types/src/render/renderChoice.d.ts +2 -0
- package/dist/types/src/render/renderConsent.d.ts +2 -0
- package/dist/types/src/render/renderDate.d.ts +2 -0
- package/dist/types/src/render/renderEmail.d.ts +2 -0
- package/dist/types/src/render/renderInfoPage.d.ts +2 -0
- package/dist/types/src/render/renderLongText.d.ts +2 -0
- package/dist/types/src/render/renderMatrix.d.ts +2 -0
- package/dist/types/src/render/renderMultipleChoiceImage.d.ts +2 -0
- package/dist/types/src/render/renderNumber.d.ts +2 -0
- package/dist/types/src/render/renderPassword.d.ts +2 -0
- package/dist/types/src/render/renderPointSystem.d.ts +2 -0
- package/dist/types/src/render/renderPriorityList.d.ts +2 -0
- package/dist/types/src/render/renderRatingEmoji.d.ts +2 -0
- package/dist/types/src/render/renderRatingNumber.d.ts +2 -0
- package/dist/types/src/render/renderRatingStar.d.ts +2 -0
- package/dist/types/src/render/renderSelect.d.ts +2 -0
- package/dist/types/src/render/renderText.d.ts +2 -0
- package/dist/types/src/render/renderUploadFile.d.ts +2 -0
- package/dist/types/src/render/renderUploadImage.d.ts +2 -0
- package/dist/types/src/render/types.d.ts +20 -0
- package/package.json +1 -1
|
@@ -3,29 +3,35 @@
|
|
|
3
3
|
* Clean, minimal, and elegant survey rendering
|
|
4
4
|
*/
|
|
5
5
|
|
|
6
|
+
@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800&display=swap");
|
|
7
|
+
|
|
6
8
|
/* ========================================
|
|
7
9
|
CSS VARIABLES - Design SYSTEM
|
|
8
10
|
======================================== */
|
|
9
11
|
:root {
|
|
10
|
-
/* Colors -
|
|
11
|
-
--mf-primary: #
|
|
12
|
-
--mf-primary-hover: #
|
|
13
|
-
--mf-primary-light: #
|
|
12
|
+
/* Colors - Minimal Pastel */
|
|
13
|
+
--mf-primary: #1E293B;
|
|
14
|
+
--mf-primary-hover: #0F172A;
|
|
15
|
+
--mf-primary-light: #E2E8F0;
|
|
16
|
+
|
|
17
|
+
--mf-text-primary: #1E293B;
|
|
18
|
+
--mf-text-secondary: #475569;
|
|
19
|
+
--mf-text-muted: #94A3B8;
|
|
14
20
|
|
|
15
|
-
--mf-
|
|
16
|
-
--mf-
|
|
17
|
-
--mf-
|
|
21
|
+
--mf-bg-primary: #F8FAFC;
|
|
22
|
+
--mf-bg-secondary: #FFFFFF;
|
|
23
|
+
--mf-bg-hover: #EEF2F6;
|
|
18
24
|
|
|
19
|
-
--mf-
|
|
20
|
-
--mf-
|
|
21
|
-
--mf-bg-hover: #f1f5f9;
|
|
25
|
+
--mf-border: #E2E8F0;
|
|
26
|
+
--mf-border-focus: #1E293B;
|
|
22
27
|
|
|
23
|
-
--mf-
|
|
24
|
-
--mf-
|
|
28
|
+
--mf-success: #16A34A;
|
|
29
|
+
--mf-error: #EF4444;
|
|
30
|
+
--mf-warning: #F59E0B;
|
|
25
31
|
|
|
26
|
-
--mf-
|
|
27
|
-
--mf-
|
|
28
|
-
--mf-
|
|
32
|
+
--mf-surface: #FFFFFF;
|
|
33
|
+
--mf-surface-alt: #F1F5F9;
|
|
34
|
+
--mf-accent: #38BDF8;
|
|
29
35
|
|
|
30
36
|
/* Spacing */
|
|
31
37
|
--mf-space-xs: 0.25rem;
|
|
@@ -35,25 +41,33 @@
|
|
|
35
41
|
--mf-space-xl: 1.5rem;
|
|
36
42
|
|
|
37
43
|
/* Border Radius */
|
|
38
|
-
--mf-radius-sm: 0.
|
|
39
|
-
--mf-radius-md: 0.
|
|
40
|
-
--mf-radius-lg:
|
|
44
|
+
--mf-radius-sm: 0.5rem;
|
|
45
|
+
--mf-radius-md: 0.75rem;
|
|
46
|
+
--mf-radius-lg: 1.25rem;
|
|
41
47
|
--mf-radius-full: 9999px;
|
|
42
48
|
|
|
43
49
|
/* Shadows */
|
|
44
|
-
--mf-shadow-sm: 0 1px 2px 0 rgba(
|
|
45
|
-
--mf-shadow-md: 0
|
|
46
|
-
--mf-shadow-lg: 0
|
|
47
|
-
--mf-shadow-focus: 0 0 0 3px rgba(
|
|
50
|
+
--mf-shadow-sm: 0 1px 2px 0 rgba(15, 23, 42, 0.06);
|
|
51
|
+
--mf-shadow-md: 0 8px 20px rgba(15, 23, 42, 0.08);
|
|
52
|
+
--mf-shadow-lg: 0 16px 30px rgba(15, 23, 42, 0.12);
|
|
53
|
+
--mf-shadow-focus: 0 0 0 3px rgba(30, 41, 59, 0.15);
|
|
54
|
+
--mf-shadow-card: 0 18px 40px rgba(15, 23, 42, 0.08);
|
|
48
55
|
|
|
49
56
|
/* Typography */
|
|
50
|
-
--mf-font-sans:
|
|
57
|
+
--mf-font-sans: "Nunito", "Quicksand", "Avenir Next", "Trebuchet MS", sans-serif;
|
|
51
58
|
--mf-font-size-sm: 0.875rem;
|
|
52
59
|
--mf-font-size-base: 1rem;
|
|
53
60
|
--mf-font-size-lg: 1.125rem;
|
|
54
61
|
--mf-font-size-xl: 1.25rem;
|
|
55
62
|
--mf-line-height: 1.6;
|
|
56
63
|
|
|
64
|
+
/* Font Weights */
|
|
65
|
+
--mf-font-weight-normal: 400;
|
|
66
|
+
--mf-font-weight-medium: 500;
|
|
67
|
+
--mf-font-weight-semibold: 600;
|
|
68
|
+
--mf-font-weight-bold: 700;
|
|
69
|
+
--mf-font-weight-extrabold: 800;
|
|
70
|
+
|
|
57
71
|
/* Transitions */
|
|
58
72
|
--mf-transition: all 0.2s ease;
|
|
59
73
|
--mf-transition-fast: all 0.15s ease;
|
|
@@ -109,11 +123,11 @@
|
|
|
109
123
|
BASE CONTAINER
|
|
110
124
|
======================================== */
|
|
111
125
|
.magicfeedback-container {
|
|
112
|
-
width: 100%;
|
|
113
126
|
font-family: var(--mf-font-sans), sans-serif;
|
|
114
127
|
color: var(--mf-text-primary);
|
|
115
128
|
line-height: var(--mf-line-height);
|
|
116
129
|
animation: mf-fade-in 0.4s ease-out;
|
|
130
|
+
border-radius: var(--mf-radius-lg);
|
|
117
131
|
}
|
|
118
132
|
|
|
119
133
|
/* ========================================
|
|
@@ -125,7 +139,9 @@
|
|
|
125
139
|
padding: var(--mf-space-lg);
|
|
126
140
|
margin: var(--mf-space-lg) 0;
|
|
127
141
|
border-radius: var(--mf-radius-lg);
|
|
128
|
-
background: var(--mf-
|
|
142
|
+
background: var(--mf-surface-alt);
|
|
143
|
+
border: 1px solid var(--mf-border);
|
|
144
|
+
box-shadow: var(--mf-shadow-sm);
|
|
129
145
|
animation: mf-scale-in 0.3s ease-out;
|
|
130
146
|
}
|
|
131
147
|
|
|
@@ -164,7 +180,10 @@
|
|
|
164
180
|
display: flex;
|
|
165
181
|
flex-direction: column;
|
|
166
182
|
gap: var(--mf-space-lg);
|
|
167
|
-
|
|
183
|
+
background: var(--mf-surface);
|
|
184
|
+
padding: clamp(16px, 2.5vw, 28px);
|
|
185
|
+
border: 1px solid var(--mf-border);
|
|
186
|
+
border-radius: var(--mf-radius-lg);
|
|
168
187
|
}
|
|
169
188
|
|
|
170
189
|
.magicfeedback-questions {
|
|
@@ -178,8 +197,9 @@
|
|
|
178
197
|
display: flex;
|
|
179
198
|
flex-direction: column;
|
|
180
199
|
gap: var(--mf-space-sm);
|
|
181
|
-
width: 100%;
|
|
182
200
|
animation: mf-slide-in 0.3s ease-out;
|
|
201
|
+
background: var(--mf-bg-secondary);
|
|
202
|
+
border-radius: var(--mf-radius-md);
|
|
183
203
|
}
|
|
184
204
|
|
|
185
205
|
/* ========================================
|
|
@@ -187,11 +207,18 @@
|
|
|
187
207
|
======================================== */
|
|
188
208
|
.magicfeedback-label {
|
|
189
209
|
font-size: var(--mf-font-size-lg);
|
|
190
|
-
font-weight:
|
|
210
|
+
font-weight: var(--mf-font-weight-bold);
|
|
191
211
|
color: var(--mf-text-primary);
|
|
192
212
|
line-height: var(--mf-line-height);
|
|
193
|
-
margin: 0 0 var(--mf-space-md) 0;
|
|
194
213
|
text-align: left;
|
|
214
|
+
letter-spacing: -0.01em;
|
|
215
|
+
}
|
|
216
|
+
|
|
217
|
+
.magicfeedback-sublabel {
|
|
218
|
+
font-size: var(--mf-font-size-base);
|
|
219
|
+
font-weight: var(--mf-font-weight-normal);
|
|
220
|
+
color: var(--mf-text-secondary);
|
|
221
|
+
margin-bottom: var(--mf-space-sm);
|
|
195
222
|
}
|
|
196
223
|
|
|
197
224
|
h2 {
|
|
@@ -219,18 +246,18 @@ input[type="email"],
|
|
|
219
246
|
input[type="password"],
|
|
220
247
|
textarea,
|
|
221
248
|
select {
|
|
222
|
-
|
|
223
|
-
padding: var(--mf-space-sm) var(--mf-space-md);
|
|
249
|
+
padding: 0.75rem 0.9rem;
|
|
224
250
|
font-size: var(--mf-font-size-base);
|
|
225
251
|
font-family: inherit;
|
|
226
252
|
color: var(--mf-text-primary);
|
|
227
|
-
background-color: var(--mf-
|
|
228
|
-
border:
|
|
253
|
+
background-color: var(--mf-surface);
|
|
254
|
+
border: 2px solid var(--mf-border);
|
|
229
255
|
border-radius: var(--mf-radius-md);
|
|
230
256
|
outline: none;
|
|
231
257
|
transition: var(--mf-transition);
|
|
232
258
|
-webkit-appearance: none;
|
|
233
259
|
appearance: none;
|
|
260
|
+
box-shadow: var(--mf-shadow-sm);
|
|
234
261
|
}
|
|
235
262
|
|
|
236
263
|
textarea {
|
|
@@ -238,13 +265,6 @@ textarea {
|
|
|
238
265
|
resize: vertical;
|
|
239
266
|
}
|
|
240
267
|
|
|
241
|
-
input:focus,
|
|
242
|
-
select:focus,
|
|
243
|
-
textarea:focus {
|
|
244
|
-
border-color: var(--mf-border-focus);
|
|
245
|
-
box-shadow: var(--mf-shadow-focus);
|
|
246
|
-
}
|
|
247
|
-
|
|
248
268
|
input::placeholder,
|
|
249
269
|
textarea::placeholder {
|
|
250
270
|
color: var(--mf-text-muted);
|
|
@@ -373,6 +393,8 @@ textarea.error {
|
|
|
373
393
|
cursor: pointer;
|
|
374
394
|
transition: var(--mf-transition-fast);
|
|
375
395
|
margin: 0;
|
|
396
|
+
width: -webkit-fill-available;
|
|
397
|
+
height: inherit;
|
|
376
398
|
}
|
|
377
399
|
|
|
378
400
|
.magicfeedback-boolean-option label:hover {
|
|
@@ -420,6 +442,40 @@ textarea.error {
|
|
|
420
442
|
margin: var(--mf-space-sm) 0;
|
|
421
443
|
}
|
|
422
444
|
|
|
445
|
+
@media (min-width: 600px) {
|
|
446
|
+
.magicfeedback-rating-container,
|
|
447
|
+
.magicfeedback-rating-number-container,
|
|
448
|
+
.magicfeedback-rating-star-container {
|
|
449
|
+
position: relative;
|
|
450
|
+
}
|
|
451
|
+
|
|
452
|
+
.magicfeedback-rating-container--with-placeholder,
|
|
453
|
+
.magicfeedback-rating-number-container--with-placeholder {
|
|
454
|
+
padding-top: calc(var(--mf-space-md) + var(--mf-space-sm) - 4px);
|
|
455
|
+
padding-bottom: calc(var(--mf-space-md) - var(--mf-space-sm));
|
|
456
|
+
}
|
|
457
|
+
|
|
458
|
+
.magicfeedback-rating-placeholder {
|
|
459
|
+
position: absolute;
|
|
460
|
+
top: 0;
|
|
461
|
+
left: 0;
|
|
462
|
+
right: 0;
|
|
463
|
+
margin: 0;
|
|
464
|
+
padding: 0 4px;
|
|
465
|
+
box-sizing: border-box;
|
|
466
|
+
pointer-events: none;
|
|
467
|
+
z-index: 1;
|
|
468
|
+
}
|
|
469
|
+
|
|
470
|
+
.magicfeedback-rating-placeholder-value {
|
|
471
|
+
margin: 0;
|
|
472
|
+
max-width: 50%;
|
|
473
|
+
overflow-wrap: anywhere;
|
|
474
|
+
word-break: break-word;
|
|
475
|
+
white-space: normal;
|
|
476
|
+
}
|
|
477
|
+
}
|
|
478
|
+
|
|
423
479
|
/* Rating with Images */
|
|
424
480
|
.magicfeedback-rating-option-label-container input[type="radio"] {
|
|
425
481
|
position: absolute;
|
|
@@ -683,7 +739,7 @@ textarea.error {
|
|
|
683
739
|
background-color: var(--mf-bg-primary);
|
|
684
740
|
border: 1.5px solid var(--mf-border);
|
|
685
741
|
border-radius: var(--mf-radius-md);
|
|
686
|
-
min-height:
|
|
742
|
+
min-height: 45px;
|
|
687
743
|
}
|
|
688
744
|
|
|
689
745
|
.magicfeedback-point-system-item label {
|
|
@@ -724,7 +780,8 @@ textarea.error {
|
|
|
724
780
|
======================================== */
|
|
725
781
|
.magicfeedback-consent-container {
|
|
726
782
|
display: flex;
|
|
727
|
-
|
|
783
|
+
flex-direction: row;
|
|
784
|
+
align-items: center;
|
|
728
785
|
gap: var(--mf-space-sm);
|
|
729
786
|
padding: var(--mf-space-md);
|
|
730
787
|
background-color: var(--mf-bg-secondary);
|
|
@@ -745,6 +802,7 @@ textarea.error {
|
|
|
745
802
|
color: var(--mf-text-secondary);
|
|
746
803
|
line-height: var(--mf-line-height);
|
|
747
804
|
cursor: pointer;
|
|
805
|
+
margin-bottom: 0;
|
|
748
806
|
}
|
|
749
807
|
|
|
750
808
|
/* ========================================
|
|
@@ -761,22 +819,22 @@ textarea.error {
|
|
|
761
819
|
}
|
|
762
820
|
|
|
763
821
|
.magicfeedback-submit {
|
|
764
|
-
padding:
|
|
822
|
+
padding: 0.8rem 1.6rem;
|
|
765
823
|
font-size: var(--mf-font-size-base);
|
|
766
|
-
font-weight:
|
|
767
|
-
color:
|
|
824
|
+
font-weight: 800;
|
|
825
|
+
color: #FFFFFF;
|
|
768
826
|
background-color: var(--mf-primary);
|
|
769
|
-
border:
|
|
770
|
-
border-radius: var(--mf-radius-
|
|
827
|
+
border: 2px solid var(--mf-primary);
|
|
828
|
+
border-radius: var(--mf-radius-full);
|
|
771
829
|
cursor: pointer;
|
|
772
830
|
transition: var(--mf-transition-fast);
|
|
773
|
-
box-shadow: var(--mf-shadow-
|
|
831
|
+
box-shadow: var(--mf-shadow-md);
|
|
774
832
|
}
|
|
775
833
|
|
|
776
834
|
.magicfeedback-submit:hover {
|
|
777
835
|
background-color: var(--mf-primary-hover);
|
|
778
|
-
box-shadow: var(--mf-shadow-
|
|
779
|
-
transform: translateY(-
|
|
836
|
+
box-shadow: var(--mf-shadow-lg);
|
|
837
|
+
transform: translateY(-2px);
|
|
780
838
|
}
|
|
781
839
|
|
|
782
840
|
.magicfeedback-submit:active {
|
|
@@ -791,18 +849,20 @@ textarea.error {
|
|
|
791
849
|
}
|
|
792
850
|
|
|
793
851
|
.magicfeedback-back {
|
|
794
|
-
padding:
|
|
852
|
+
padding: 0.65rem 1rem;
|
|
795
853
|
font-size: var(--mf-font-size-base);
|
|
796
|
-
font-weight:
|
|
797
|
-
color: var(--mf-
|
|
798
|
-
background-color:
|
|
799
|
-
border:
|
|
854
|
+
font-weight: 700;
|
|
855
|
+
color: var(--mf-primary);
|
|
856
|
+
background-color: var(--mf-bg-secondary);
|
|
857
|
+
border: 2px solid var(--mf-border);
|
|
858
|
+
border-radius: var(--mf-radius-full);
|
|
800
859
|
cursor: pointer;
|
|
801
860
|
transition: var(--mf-transition-fast);
|
|
802
861
|
}
|
|
803
862
|
|
|
804
863
|
.magicfeedback-back:hover {
|
|
805
|
-
color: var(--mf-primary);
|
|
864
|
+
border-color: var(--mf-primary);
|
|
865
|
+
background-color: var(--mf-bg-hover);
|
|
806
866
|
}
|
|
807
867
|
|
|
808
868
|
/* ========================================
|
|
@@ -845,143 +905,154 @@ textarea.error {
|
|
|
845
905
|
======================================== */
|
|
846
906
|
/* Modal backdrop */
|
|
847
907
|
.magicfeedback-modal-backdrop {
|
|
848
|
-
|
|
849
|
-
|
|
850
|
-
|
|
851
|
-
|
|
852
|
-
|
|
853
|
-
|
|
854
|
-
|
|
855
|
-
|
|
856
|
-
|
|
857
|
-
|
|
908
|
+
position: fixed;
|
|
909
|
+
top: 0;
|
|
910
|
+
left: 0;
|
|
911
|
+
width: 100vw;
|
|
912
|
+
height: 100vh;
|
|
913
|
+
background: rgba(0,0,0,0.4);
|
|
914
|
+
display: none; /* toggled to flex when open */
|
|
915
|
+
align-items: center;
|
|
916
|
+
justify-content: center;
|
|
917
|
+
z-index: 9999;
|
|
858
918
|
}
|
|
859
919
|
|
|
860
920
|
/* Modal container */
|
|
861
921
|
.magicfeedback-modal {
|
|
862
|
-
|
|
863
|
-
|
|
864
|
-
|
|
865
|
-
|
|
866
|
-
|
|
867
|
-
|
|
868
|
-
|
|
869
|
-
|
|
922
|
+
background: #fff;
|
|
923
|
+
border-radius: 8px;
|
|
924
|
+
box-shadow: 0 8px 24px rgba(0,0,0,0.2);
|
|
925
|
+
max-width: 520px;
|
|
926
|
+
width: 90%;
|
|
927
|
+
max-height: 80vh;
|
|
928
|
+
overflow: auto;
|
|
929
|
+
padding: 16px;
|
|
870
930
|
}
|
|
871
931
|
|
|
872
932
|
/* Modal actions */
|
|
873
933
|
.magicfeedback-modal-actions {
|
|
874
|
-
|
|
875
|
-
|
|
876
|
-
|
|
877
|
-
|
|
934
|
+
display: flex;
|
|
935
|
+
justify-content: flex-end;
|
|
936
|
+
gap: 8px;
|
|
937
|
+
margin-top: 12px;
|
|
878
938
|
}
|
|
879
939
|
|
|
880
940
|
.magicfeedback-modal-counter {
|
|
881
|
-
|
|
882
|
-
|
|
883
|
-
|
|
884
|
-
|
|
885
|
-
|
|
941
|
+
margin-right: auto;
|
|
942
|
+
display: flex;
|
|
943
|
+
align-items: center;
|
|
944
|
+
font-size: 14px;
|
|
945
|
+
color: #444;
|
|
886
946
|
}
|
|
887
947
|
|
|
888
948
|
/* Modal list */
|
|
889
949
|
.magicfeedback-modal-list {
|
|
890
|
-
|
|
891
|
-
|
|
892
|
-
|
|
950
|
+
display: flex;
|
|
951
|
+
flex-direction: column;
|
|
952
|
+
gap: 8px;
|
|
893
953
|
}
|
|
894
954
|
|
|
895
955
|
.magicfeedback-modal-row {
|
|
896
|
-
|
|
897
|
-
|
|
898
|
-
|
|
899
|
-
|
|
956
|
+
display: flex;
|
|
957
|
+
align-items: center;
|
|
958
|
+
gap: 10px;
|
|
959
|
+
cursor: pointer;
|
|
900
960
|
}
|
|
901
961
|
|
|
902
962
|
/* Priority list header */
|
|
903
963
|
.magicfeedback-priority-list-header {
|
|
904
|
-
|
|
905
|
-
|
|
906
|
-
|
|
907
|
-
|
|
908
|
-
|
|
909
|
-
margin-bottom: 8px;
|
|
964
|
+
display: flex;
|
|
965
|
+
align-items: center;
|
|
966
|
+
justify-content: space-between;
|
|
967
|
+
gap: 12px;
|
|
968
|
+
margin-bottom: 8px;
|
|
910
969
|
}
|
|
911
970
|
|
|
912
971
|
.magicfeedback-priority-list-reorder {
|
|
913
|
-
|
|
972
|
+
margin-top: 8px;
|
|
914
973
|
}
|
|
915
974
|
|
|
916
975
|
.magicfeedback-priority-list-list {
|
|
917
|
-
|
|
918
|
-
|
|
976
|
+
padding: 0;
|
|
977
|
+
list-style: none;
|
|
919
978
|
}
|
|
920
979
|
|
|
921
980
|
.magicfeedback-priority-list-item {
|
|
922
|
-
|
|
923
|
-
|
|
924
|
-
|
|
925
|
-
|
|
981
|
+
display: flex;
|
|
982
|
+
justify-content: space-between;
|
|
983
|
+
align-items: center;
|
|
984
|
+
margin: 5px 0;
|
|
926
985
|
}
|
|
927
986
|
|
|
928
987
|
.magicfeedback-priority-list-item-label {
|
|
929
|
-
|
|
988
|
+
font-size: 15px;
|
|
930
989
|
}
|
|
931
990
|
|
|
932
991
|
.magicfeedback-priority-list-arrows {
|
|
933
|
-
|
|
934
|
-
|
|
935
|
-
|
|
992
|
+
display: flex;
|
|
993
|
+
align-items: center;
|
|
994
|
+
gap: 6px;
|
|
936
995
|
}
|
|
937
996
|
|
|
938
997
|
/* Buttons */
|
|
939
998
|
.magicfeedback-button {
|
|
940
|
-
|
|
941
|
-
|
|
942
|
-
|
|
943
|
-
|
|
944
|
-
|
|
945
|
-
|
|
946
|
-
|
|
947
|
-
|
|
999
|
+
appearance: none;
|
|
1000
|
+
border: 2px solid var(--mf-border);
|
|
1001
|
+
border-radius: var(--mf-radius-full);
|
|
1002
|
+
background: var(--mf-bg-secondary);
|
|
1003
|
+
color: var(--mf-text-primary);
|
|
1004
|
+
padding: 0.6rem 1rem;
|
|
1005
|
+
font-size: 14px;
|
|
1006
|
+
font-weight: 700;
|
|
1007
|
+
cursor: pointer;
|
|
1008
|
+
box-shadow: var(--mf-shadow-sm);
|
|
948
1009
|
}
|
|
1010
|
+
|
|
949
1011
|
.magicfeedback-button:hover {
|
|
950
|
-
|
|
1012
|
+
background: var(--mf-bg-hover);
|
|
1013
|
+
border-color: var(--mf-primary);
|
|
951
1014
|
}
|
|
1015
|
+
|
|
952
1016
|
.magicfeedback-button:active {
|
|
953
|
-
|
|
1017
|
+
transform: translateY(1px);
|
|
954
1018
|
}
|
|
1019
|
+
|
|
955
1020
|
.magicfeedback-button-primary {
|
|
956
|
-
|
|
957
|
-
|
|
958
|
-
|
|
1021
|
+
border-color: var(--mf-primary);
|
|
1022
|
+
background: var(--mf-primary);
|
|
1023
|
+
color: #fff;
|
|
1024
|
+
box-shadow: var(--mf-shadow-md);
|
|
959
1025
|
}
|
|
1026
|
+
|
|
960
1027
|
.magicfeedback-button-primary:hover {
|
|
961
|
-
|
|
1028
|
+
background: var(--mf-primary-hover);
|
|
962
1029
|
}
|
|
1030
|
+
|
|
963
1031
|
.magicfeedback-button-primary:active {
|
|
964
|
-
|
|
1032
|
+
background: var(--mf-primary-hover);
|
|
965
1033
|
}
|
|
966
1034
|
|
|
967
1035
|
/* Warning flash */
|
|
968
1036
|
.magicfeedback-warning {
|
|
969
|
-
|
|
1037
|
+
color: #C70039;
|
|
970
1038
|
}
|
|
971
1039
|
|
|
972
1040
|
/* Start message button */
|
|
973
1041
|
.magicfeedback-start-message-button {
|
|
974
|
-
|
|
975
|
-
|
|
976
|
-
|
|
977
|
-
|
|
978
|
-
|
|
979
|
-
|
|
980
|
-
|
|
981
|
-
|
|
1042
|
+
appearance: none;
|
|
1043
|
+
border: 2px solid var(--mf-primary);
|
|
1044
|
+
border-radius: var(--mf-radius-full);
|
|
1045
|
+
background: var(--mf-primary);
|
|
1046
|
+
color: #fff;
|
|
1047
|
+
padding: 0.8rem 1.4rem;
|
|
1048
|
+
font-size: 15px;
|
|
1049
|
+
font-weight: 800;
|
|
1050
|
+
cursor: pointer;
|
|
1051
|
+
box-shadow: var(--mf-shadow-md);
|
|
982
1052
|
}
|
|
1053
|
+
|
|
983
1054
|
.magicfeedback-start-message-button:hover {
|
|
984
|
-
|
|
1055
|
+
background: var(--mf-primary-hover);
|
|
985
1056
|
}
|
|
986
1057
|
|
|
987
1058
|
/* ========================================
|
|
@@ -993,12 +1064,64 @@ textarea.error {
|
|
|
993
1064
|
--mf-space-xl: 1.5rem;
|
|
994
1065
|
}
|
|
995
1066
|
|
|
1067
|
+
.magicfeedback-container {
|
|
1068
|
+
padding: 12px;
|
|
1069
|
+
border-radius: var(--mf-radius-md);
|
|
1070
|
+
}
|
|
1071
|
+
|
|
1072
|
+
.magicfeedback-form {
|
|
1073
|
+
padding: 14px;
|
|
1074
|
+
border-radius: var(--mf-radius-md);
|
|
1075
|
+
}
|
|
1076
|
+
|
|
1077
|
+
.magicfeedback-div {
|
|
1078
|
+
padding: 12px;
|
|
1079
|
+
gap: var(--mf-space-lg)
|
|
1080
|
+
}
|
|
1081
|
+
|
|
996
1082
|
.magicfeedback-label {
|
|
997
1083
|
font-size: var(--mf-font-size-base);
|
|
998
1084
|
}
|
|
999
1085
|
|
|
1086
|
+
input[type="date"],
|
|
1087
|
+
input[type="text"],
|
|
1088
|
+
input[type="number"],
|
|
1089
|
+
input[type="email"],
|
|
1090
|
+
input[type="password"],
|
|
1091
|
+
textarea,
|
|
1092
|
+
select {
|
|
1093
|
+
padding: 0.85rem 0.95rem;
|
|
1094
|
+
font-size: 1rem;
|
|
1095
|
+
min-height: 46px;
|
|
1096
|
+
}
|
|
1097
|
+
|
|
1098
|
+
/*
|
|
1099
|
+
.magicfeedback-radio-container,
|
|
1100
|
+
.magicfeedback-checkbox-container,
|
|
1101
|
+
.magicfeedback-boolean-container,
|
|
1102
|
+
.magicfeedback-consent-container {
|
|
1103
|
+
width: 100%;
|
|
1104
|
+
}
|
|
1105
|
+
*/
|
|
1106
|
+
|
|
1107
|
+
.magicfeedback-radio-container,
|
|
1108
|
+
.magicfeedback-checkbox-container {
|
|
1109
|
+
padding: 10px 12px;
|
|
1110
|
+
border-radius: var(--mf-radius-md);
|
|
1111
|
+
background: var(--mf-surface-alt);
|
|
1112
|
+
border: 1px solid var(--mf-border);
|
|
1113
|
+
gap: 10px;
|
|
1114
|
+
}
|
|
1115
|
+
|
|
1116
|
+
.magicfeedback-rating-container,
|
|
1117
|
+
.magicfeedback-rating-number-container,
|
|
1118
|
+
.magicfeedback-rating-star-container {
|
|
1119
|
+
gap: 10px;
|
|
1120
|
+
}
|
|
1121
|
+
|
|
1000
1122
|
.magicfeedback-boolean-container {
|
|
1001
1123
|
flex-direction: column;
|
|
1124
|
+
gap: 10px;
|
|
1002
1125
|
}
|
|
1003
1126
|
|
|
1004
1127
|
.magicfeedback-rating-number-container {
|
|
@@ -1017,6 +1140,7 @@ textarea.error {
|
|
|
1017
1140
|
.magicfeedback-back {
|
|
1018
1141
|
width: 100%;
|
|
1019
1142
|
text-align: center;
|
|
1143
|
+
min-height: 48px;
|
|
1020
1144
|
}
|
|
1021
1145
|
}
|
|
1022
1146
|
|
|
@@ -1033,11 +1157,6 @@ textarea.error {
|
|
|
1033
1157
|
}
|
|
1034
1158
|
}
|
|
1035
1159
|
|
|
1036
|
-
/* Focus visible for keyboard navigation */
|
|
1037
|
-
*:focus-visible {
|
|
1038
|
-
outline: 2px solid var(--mf-primary);
|
|
1039
|
-
outline-offset: 2px;
|
|
1040
|
-
}
|
|
1041
1160
|
|
|
1042
1161
|
/* ========================================
|
|
1043
1162
|
UTILITY CLASSES
|
|
@@ -1055,18 +1174,19 @@ textarea.error {
|
|
|
1055
1174
|
}
|
|
1056
1175
|
|
|
1057
1176
|
.magicfeedback-modal-close {
|
|
1058
|
-
|
|
1059
|
-
|
|
1060
|
-
|
|
1061
|
-
|
|
1062
|
-
|
|
1063
|
-
|
|
1064
|
-
|
|
1065
|
-
|
|
1066
|
-
|
|
1177
|
+
position: absolute;
|
|
1178
|
+
top: 8px;
|
|
1179
|
+
right: 8px;
|
|
1180
|
+
background: transparent;
|
|
1181
|
+
border: none;
|
|
1182
|
+
font-size: 20px;
|
|
1183
|
+
line-height: 1;
|
|
1184
|
+
cursor: pointer;
|
|
1185
|
+
color: #666;
|
|
1067
1186
|
}
|
|
1187
|
+
|
|
1068
1188
|
.magicfeedback-modal-close:hover,
|
|
1069
1189
|
.magicfeedback-modal-close:focus {
|
|
1070
|
-
|
|
1071
|
-
|
|
1190
|
+
color: #000;
|
|
1191
|
+
outline: none;
|
|
1072
1192
|
}
|