@visns-studio/visns-components 5.11.7 → 5.11.9

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.
@@ -93,13 +93,43 @@
93
93
  }
94
94
  }
95
95
 
96
+ .brandingInfo {
97
+ padding: 8px 12px;
98
+ border: 1px solid #e9ecef;
99
+ border-radius: 4px;
100
+ background: #f8f9fa;
101
+ font-size: 14px;
102
+ min-height: 36px;
103
+ display: flex;
104
+ align-items: center;
105
+ }
106
+
107
+ .brandingName {
108
+ color: #495057;
109
+ font-weight: 500;
110
+
111
+ .brandingNote {
112
+ display: block;
113
+ font-size: 12px;
114
+ color: #6c757d;
115
+ font-weight: normal;
116
+ margin-top: 2px;
117
+ }
118
+ }
119
+
120
+ .brandingPlaceholder {
121
+ color: #6c757d;
122
+ font-style: italic;
123
+ }
124
+
96
125
  .proposalActions {
97
126
  display: flex;
98
127
  gap: 10px;
99
128
  flex-shrink: 0;
129
+ flex-wrap: wrap;
100
130
  }
101
131
 
102
- .previewButton, .pdfButton {
132
+ .previewButton, .pdfButton, .editButton {
103
133
  padding: 8px 16px;
104
134
  border: none;
105
135
  border-radius: 4px;
@@ -117,21 +147,30 @@
117
147
  }
118
148
  }
119
149
 
150
+ .editButton {
151
+ background: #4fbfa5;
152
+ color: white;
153
+
154
+ &:hover:not(:disabled) {
155
+ background: #3da389;
156
+ }
157
+ }
158
+
120
159
  .previewButton {
121
- background: #17a2b8;
160
+ background: #2563eb;
122
161
  color: white;
123
162
 
124
163
  &:hover:not(:disabled) {
125
- background: #138496;
164
+ background: #1d4ed8;
126
165
  }
127
166
  }
128
167
 
129
168
  .pdfButton {
130
- background: #dc3545;
169
+ background: #1a3d66;
131
170
  color: white;
132
171
 
133
172
  &:hover:not(:disabled) {
134
- background: #c82333;
173
+ background: #1e293b;
135
174
  }
136
175
  }
137
176
 
@@ -140,8 +179,11 @@
140
179
  border: 1px solid #e9ecef;
141
180
  border-radius: 8px;
142
181
  background: white;
143
- max-height: 600px;
144
- overflow: hidden;
182
+ height: auto;
183
+ min-height: 1100px;
184
+ max-height: none; /* Remove height restriction */
185
+ overflow: visible; /* Allow content to be visible */
186
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
145
187
  }
146
188
 
147
189
  .proposalPreviewHeader {
@@ -173,71 +215,311 @@
173
215
  }
174
216
 
175
217
  .proposalPreview {
218
+ /* Iframe container styles - content is completely isolated */
219
+ width: 100% !important;
220
+ height: 1000px !important;
221
+ min-height: 1000px !important;
222
+ max-height: none !important;
223
+ background: white;
224
+ box-sizing: border-box;
225
+ border: none;
226
+ border-radius: 4px;
227
+ display: block !important;
228
+ }
229
+
230
+ /* Content Editor Styles */
231
+ .contentEditorOverlay {
232
+ position: fixed;
233
+ top: 0;
234
+ left: 0;
235
+ right: 0;
236
+ bottom: 0;
237
+ background: rgba(0, 0, 0, 0.5);
238
+ z-index: 1000;
239
+ display: flex;
240
+ align-items: center;
241
+ justify-content: center;
176
242
  padding: 20px;
177
- overflow-y: auto;
178
- max-height: 500px;
243
+ }
244
+
245
+ .contentEditorModal {
246
+ background: white;
247
+ border-radius: 12px;
248
+ box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
249
+ width: 95%;
250
+ max-width: 1400px;
251
+ height: 90vh;
252
+ max-height: 90vh;
253
+ display: flex;
254
+ flex-direction: column;
255
+ overflow: hidden;
256
+ transform: scale(1);
257
+ animation: modalAppear 0.2s ease-out;
258
+ }
259
+
260
+ @keyframes modalAppear {
261
+ from {
262
+ opacity: 0;
263
+ transform: scale(0.95);
264
+ }
265
+ to {
266
+ opacity: 1;
267
+ transform: scale(1);
268
+ }
269
+ }
270
+
271
+ .contentEditorHeader {
272
+ display: flex;
273
+ justify-content: space-between;
274
+ align-items: center;
275
+ padding: 24px 30px;
276
+ border-bottom: 1px solid rgba(var(--primary-rgb), 0.1);
277
+ background: linear-gradient(135deg, var(--primary-color) 0%, rgba(var(--primary-rgb), 0.9) 100%);
278
+ border-radius: 12px 12px 0 0;
179
279
 
180
- // Style the preview content
181
- h1, h2, h3, h4, h5, h6 {
182
- margin-top: 0;
183
- margin-bottom: 10px;
280
+ h3 {
281
+ margin: 0;
282
+ font-size: 20px;
283
+ font-weight: 600;
284
+ color: var(--tertiary-color);
285
+ display: flex;
286
+ align-items: center;
287
+ gap: 12px;
184
288
  }
289
+ }
290
+
291
+ .closeEditor {
292
+ background: rgba(var(--tertiary-rgb), 0.9);
293
+ border: 1px solid rgba(var(--tertiary-rgb), 0.3);
294
+ font-size: 18px;
295
+ cursor: pointer;
296
+ color: rgba(var(--primary-rgb), 0.7);
297
+ padding: 8px;
298
+ border-radius: 8px;
299
+ transition: all 0.2s ease;
300
+ display: flex;
301
+ align-items: center;
302
+ justify-content: center;
303
+ width: 36px;
304
+ height: 36px;
185
305
 
186
- table {
187
- width: 100%;
188
- border-collapse: collapse;
189
- margin: 10px 0;
190
-
191
- th, td {
192
- padding: 8px;
193
- border: 1px solid #dee2e6;
194
- text-align: left;
195
- }
196
-
197
- th {
198
- background: #f8f9fa;
199
- font-weight: 600;
200
- }
306
+ &:hover {
307
+ color: var(--tertiary-color);
308
+ background: var(--secondary-color);
309
+ border-color: var(--secondary-color);
310
+ transform: scale(1.05);
201
311
  }
202
312
  }
203
313
 
204
- /* Compact HTML content styling for proposal preview */
205
- .proposalPreview h1,
206
- .proposalPreview h2,
207
- .proposalPreview h3,
208
- .proposalPreview h4,
209
- .proposalPreview h5,
210
- .proposalPreview h6 {
211
- font-size: 0.95rem !important;
212
- line-height: 1.2 !important;
213
- margin: 0 0 0.5rem 0 !important;
314
+ .contentEditorBody {
315
+ flex: 1;
316
+ padding: 20px;
317
+ overflow: hidden;
318
+ background: var(--tertiary-color);
319
+ display: flex;
320
+ flex-direction: column;
321
+ min-height: 0; /* Allow flex shrinking */
322
+ }
323
+
324
+ .editorSection {
325
+ margin-bottom: 16px;
326
+ background: var(--item-color);
327
+ padding: 16px 20px;
328
+ border-radius: var(--br);
329
+ border: 1px solid rgba(var(--primary-rgb), 0.1);
330
+ box-shadow: 0 5px 20px rgba(var(--primary-rgb), 0.05);
331
+ flex-shrink: 0; /* Don't shrink this section */
332
+ }
333
+
334
+ .editorLabel {
335
+ display: flex;
214
336
  font-weight: 600;
215
- color: #374151 !important;
337
+ margin-bottom: 12px;
338
+ color: var(--paragraph-color);
339
+ font-size: 15px;
340
+ align-items: center;
341
+ gap: 8px;
342
+ }
343
+
344
+ .sectionTypeSelect {
345
+ width: 240px;
346
+ padding: 12px 16px;
347
+ border: 2px solid rgba(var(--primary-rgb), 0.15);
348
+ border-radius: 8px;
349
+ font-size: 14px;
350
+ font-weight: 500;
351
+ background: var(--tertiary-color);
352
+ color: var(--paragraph-color);
353
+ transition: all 0.2s ease;
354
+ cursor: pointer;
355
+
356
+ &:focus {
357
+ outline: none;
358
+ border-color: var(--primary-color);
359
+ box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.1);
360
+ transform: translateY(-1px);
361
+ }
362
+
363
+ &:hover {
364
+ border-color: rgba(var(--primary-rgb), 0.25);
365
+ }
216
366
  }
217
367
 
218
- .proposalPreview p {
219
- font-size: 0.875rem !important;
220
- line-height: 1.4 !important;
221
- margin: 0 0 0.5rem 0 !important;
222
- color: #374151 !important;
368
+ .editorContainer {
369
+ border: 2px solid rgba(var(--primary-rgb), 0.15);
370
+ border-radius: 12px;
371
+ overflow: hidden;
372
+ box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.08);
373
+ background: var(--tertiary-color);
374
+ flex: 1; /* Take all remaining space */
375
+ display: flex;
376
+ flex-direction: column;
377
+ min-height: 0; /* Allow flex shrinking */
378
+
379
+ /* TinyMCE overrides */
380
+ :global(.tox-tinymce) {
381
+ border: none !important;
382
+ border-radius: 12px !important;
383
+ font-family: 'Inter', 'Segoe UI', system-ui, sans-serif !important;
384
+ height: 100% !important;
385
+ display: flex !important;
386
+ flex-direction: column !important;
387
+ }
388
+
389
+ :global(.tox-editor-header) {
390
+ border-bottom: 2px solid rgba(var(--primary-rgb), 0.1) !important;
391
+ background: linear-gradient(135deg, var(--item-color) 0%, var(--tertiary-color) 100%) !important;
392
+ padding: 12px 16px !important;
393
+ }
394
+
395
+ :global(.tox-toolbar) {
396
+ background: transparent !important;
397
+ border: none !important;
398
+ padding: 8px 4px !important;
399
+ }
400
+
401
+ :global(.tox-toolbar__group) {
402
+ border: none !important;
403
+ margin: 0 8px !important;
404
+ padding: 4px 8px !important;
405
+ border-radius: 6px !important;
406
+ background: rgba(var(--primary-rgb), 0.05) !important;
407
+ }
408
+
409
+ :global(.tox-toolbar__group:hover) {
410
+ background: rgba(var(--primary-rgb), 0.1) !important;
411
+ }
412
+
413
+ :global(.tox-tbtn) {
414
+ border-radius: 6px !important;
415
+ margin: 2px !important;
416
+ transition: all 0.2s ease !important;
417
+ }
418
+
419
+ :global(.tox-tbtn:hover) {
420
+ background: rgba(var(--primary-rgb), 0.15) !important;
421
+ transform: translateY(-1px) !important;
422
+ }
423
+
424
+ :global(.tox-tbtn--enabled) {
425
+ background: var(--primary-color) !important;
426
+ color: var(--tertiary-color) !important;
427
+ }
428
+
429
+ :global(.tox-edit-area) {
430
+ border: none !important;
431
+ flex: 1 !important;
432
+ display: flex !important;
433
+ flex-direction: column !important;
434
+ }
435
+
436
+ :global(.tox-edit-area__iframe) {
437
+ background: var(--tertiary-color) !important;
438
+ padding: 20px !important;
439
+ flex: 1 !important;
440
+ height: 100% !important;
441
+ }
442
+
443
+ :global(.tox-statusbar) {
444
+ border-top: 1px solid rgba(var(--primary-rgb), 0.1) !important;
445
+ background: var(--item-color) !important;
446
+ border-radius: 0 0 12px 12px !important;
447
+ }
223
448
  }
224
449
 
225
- .proposalPreview ul,
226
- .proposalPreview ol {
227
- font-size: 0.875rem !important;
228
- line-height: 1.4 !important;
229
- margin: 0 0 0.5rem 1rem !important;
230
- padding: 0;
231
- color: #374151 !important;
450
+ .contentEditorFooter {
451
+ display: flex;
452
+ justify-content: space-between;
453
+ align-items: center;
454
+ gap: 16px;
455
+ padding: 24px 30px;
456
+ border-top: 1px solid rgba(var(--primary-rgb), 0.1);
457
+ background: linear-gradient(135deg, var(--item-color) 0%, rgba(var(--primary-rgb), 0.05) 100%);
458
+ border-radius: 0 0 12px 12px;
459
+ }
460
+
461
+ .footerInfo {
462
+ display: flex;
463
+ align-items: center;
464
+ gap: 12px;
465
+ color: var(--paragraph-color);
466
+ opacity: 0.7;
467
+ font-size: 13px;
468
+ }
469
+
470
+ .footerButtons {
471
+ display: flex;
472
+ gap: 12px;
473
+ }
474
+
475
+ .cancelButton, .saveButton {
476
+ padding: 12px 24px;
477
+ border: 2px solid transparent;
478
+ border-radius: 8px;
479
+ font-size: 14px;
480
+ font-weight: 600;
481
+ cursor: pointer;
482
+ transition: all 0.2s ease;
483
+ display: flex;
484
+ align-items: center;
485
+ gap: 8px;
486
+ text-transform: uppercase;
487
+ letter-spacing: 0.5px;
488
+
489
+ &:hover {
490
+ transform: translateY(-2px);
491
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
492
+ }
493
+
494
+ &:active {
495
+ transform: translateY(0);
496
+ }
232
497
  }
233
498
 
234
- .proposalPreview li {
235
- margin: 0 !important;
236
- padding: 0 !important;
237
- font-size: 0.875rem !important;
238
- line-height: 1.4 !important;
499
+ .cancelButton {
500
+ background: var(--secondary-color);
501
+ color: var(--tertiary-color);
502
+ border-color: var(--secondary-color);
503
+
504
+ &:hover {
505
+ background: rgba(var(--secondary-rgb), 0.9);
506
+ border-color: rgba(var(--secondary-rgb), 0.9);
507
+ }
508
+ }
509
+
510
+ .saveButton {
511
+ background: linear-gradient(135deg, var(--primary-color) 0%, rgba(var(--primary-rgb), 0.9) 100%);
512
+ color: var(--tertiary-color);
513
+ border-color: var(--primary-color);
514
+
515
+ &:hover {
516
+ background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.9) 0%, rgba(var(--primary-rgb), 0.8) 100%);
517
+ border-color: rgba(var(--primary-rgb), 0.9);
518
+ }
239
519
  }
240
520
 
521
+ /* Old compact styling rules removed - replaced with isolated styling above */
522
+
241
523
  .grid {
242
524
  width: 100%;
243
525
  display: flex;
@@ -831,23 +1113,24 @@
831
1113
  width: 100%;
832
1114
  table-layout: fixed; /* Ensures consistent column widths across tables */
833
1115
  border-collapse: collapse;
834
- font-size: 0.9rem;
1116
+ font-size: 14px;
835
1117
  border-radius: 0;
836
1118
  overflow: hidden;
837
- border: none;
1119
+ border: 2px solid #333333;
838
1120
  box-sizing: border-box;
839
- box-shadow: none;
1121
+ box-shadow: 0 2px 8px rgba(0,0,0,0.1);
840
1122
  margin-bottom: 25px;
1123
+ background: white;
841
1124
  }
842
1125
 
843
1126
  .tableHeader {
844
- background-color: #4fbfa5;
845
- color: white;
1127
+ background-color: #4fbfa5 !important;
1128
+ color: white !important;
846
1129
  text-align: left;
847
- font-weight: 600;
848
- font-size: 0.85rem;
849
- padding: 10px 15px;
850
- border-bottom: none;
1130
+ font-weight: bold;
1131
+ font-size: 14px;
1132
+ padding: 16px 15px;
1133
+ border: 1px solid #333333;
851
1134
 
852
1135
  &:first-child {
853
1136
  border-top-left-radius: 0;
@@ -904,11 +1187,13 @@
904
1187
  }
905
1188
 
906
1189
  .tableCell {
907
- padding: 12px 15px;
908
- color: var(--paragraph-color);
909
- font-size: 0.85rem;
1190
+ padding: 14px 15px;
1191
+ color: #374151;
1192
+ font-size: 14px;
910
1193
  line-height: 1.4;
911
1194
  vertical-align: middle;
1195
+ border: 1px solid #333333;
1196
+ font-weight: 500;
912
1197
 
913
1198
  &[style*='text-align: right'] {
914
1199
  font-weight: 600;
@@ -920,29 +1205,48 @@
920
1205
  }
921
1206
 
922
1207
  .subtotalRow {
923
- background-color: rgba(var(--primary-rgb), 0.05);
924
- border-top: 1px solid rgba(var(--primary-rgb), 0.1);
1208
+ background-color: #f3f4f6;
1209
+ border-top: 2px solid #333333;
925
1210
 
926
1211
  &:hover {
927
- background-color: rgba(var(--primary-rgb), 0.05);
1212
+ background-color: #f3f4f6;
1213
+ }
1214
+
1215
+ .subtotalLabel,
1216
+ .subtotalValue {
1217
+ color: #333 !important;
1218
+ }
1219
+
1220
+ &:last-child {
1221
+ background-color: #333333 !important;
1222
+
1223
+ .subtotalLabel,
1224
+ .subtotalValue {
1225
+ color: white !important;
1226
+ background-color: #333333 !important;
1227
+ }
928
1228
  }
929
1229
  }
930
1230
 
931
1231
  .subtotalLabel {
932
1232
  padding: 12px 15px;
933
1233
  text-align: right;
934
- font-weight: 600;
935
- color: var(--primary-color);
936
- font-size: 0.9rem;
1234
+ font-weight: bold;
1235
+ color: #374151;
1236
+ font-size: 14px;
1237
+ border: 1px solid #333333;
1238
+ background: inherit;
937
1239
  }
938
1240
 
939
1241
  .subtotalValue {
940
1242
  padding: 12px 15px;
941
1243
  text-align: right;
942
- font-weight: 700;
943
- color: var(--primary-color);
944
- font-size: 0.9rem;
945
- white-space: nowrap; /* Prevents wrapping of the value */
1244
+ font-weight: bold;
1245
+ color: #374151;
1246
+ font-size: 14px;
1247
+ white-space: nowrap;
1248
+ border: 1px solid #333333;
1249
+ background: inherit;
946
1250
  }
947
1251
 
948
1252
  /* Responsive styles */