@visns-studio/visns-components 4.4.2 → 4.4.4

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.
@@ -0,0 +1,578 @@
1
+ .grid {
2
+ width: 100%;
3
+ display: flex;
4
+ align-items: flex-start;
5
+ flex-wrap: nowrap;
6
+ height: auto;
7
+ gap: 1rem;
8
+ }
9
+
10
+ .grid__row {
11
+ width: 100%;
12
+ display: flex;
13
+ align-items: flex-start;
14
+ flex-wrap: nowrap;
15
+ height: auto;
16
+ gap: 1rem;
17
+ }
18
+
19
+ .grid__three {
20
+ width: 33%;
21
+ background: var(--item-color);
22
+ border-radius: var(--br);
23
+ border: 1px solid rgba(var(--item-color-rgb), 1.15);
24
+ box-sizing: border-box;
25
+ overflow: visible;
26
+ position: relative;
27
+ padding: 20px;
28
+ margin: 8px 0;
29
+ box-shadow: 0 4px 0 rgba(var(--primary-color-rgb), 0.05);
30
+ }
31
+
32
+ .grid__half {
33
+ width: 50%;
34
+ background: var(--item-color);
35
+ border-radius: 6px;
36
+ border: 1px solid #dadce0;
37
+ box-sizing: border-box;
38
+ overflow: visible;
39
+ position: relative;
40
+ padding: 20px;
41
+ margin: 8px 0;
42
+ box-shadow: 0 4px 0 rgba(var(--primary-color-rgb), 0.05);
43
+ }
44
+
45
+ .grid__full {
46
+ width: 100%;
47
+ background: var(--item-color);
48
+ border-radius: var(--br);
49
+ border: 1px solid rgba(var(--item-color-rgb), 1.15);
50
+ box-sizing: border-box;
51
+ overflow: visible;
52
+ position: relative;
53
+ padding: 2px;
54
+ margin: 8px 0;
55
+ box-shadow: 0 4px 0 rgba(var(--primary-color-rgb), 0.05);
56
+ }
57
+
58
+ .grid__dashfull {
59
+ width: 100%;
60
+ background: var(--item-color);
61
+ border-radius: 6px;
62
+ border: 1px solid #dadce0;
63
+ box-sizing: border-box;
64
+ overflow: visible;
65
+ position: relative;
66
+ padding: 20px;
67
+ margin: 8px 0;
68
+ box-shadow: 0 4px 0 rgba(var(--primary-color-rgb), 0.05);
69
+ }
70
+
71
+ .grid__subrow {
72
+ width: 100%;
73
+ display: flex;
74
+ flex-wrap: wrap;
75
+ height: auto;
76
+ gap: 0.5rem;
77
+ }
78
+
79
+ .grid__subnav {
80
+ flex: 1;
81
+ background: rgba(var(--item-color-rgb), 1.01);
82
+ border-radius: var(--br);
83
+ border: 1px solid rgba(var(--item-color-rgb), 1.15);
84
+ box-sizing: border-box;
85
+ padding: 5px;
86
+ margin: 8px 0;
87
+ height: auto;
88
+ box-shadow: 0 4px 0 rgba(var(--primary-color-rgb), 0.05);
89
+ }
90
+
91
+ .grid__subnav > ul {
92
+ width: 100%;
93
+ list-style: none;
94
+ padding: 0;
95
+ margin: 0;
96
+ display: flex;
97
+ flex-wrap: wrap;
98
+ }
99
+
100
+ .grid__subnav > ul li {
101
+ width: 100%;
102
+ margin-bottom: 3px;
103
+ }
104
+
105
+ .grid__subnav > ul li a {
106
+ width: 100%;
107
+ padding: 8px 20px;
108
+ box-sizing: border-box;
109
+ display: block;
110
+ text-decoration: none;
111
+ background: rgba(var(--primary-color-rgb), 0.05);
112
+ color: var(--primary-color);
113
+ border-radius: 5px;
114
+ transition: background 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
115
+ outline: none;
116
+ cursor: pointer;
117
+ }
118
+
119
+ .grid__subnav > ul li:hover a {
120
+ background: var(--primary-color);
121
+ color: var(--background-color);
122
+ }
123
+
124
+ .grid__subnav > ul li .subactive {
125
+ font-weight: 700;
126
+ background: var(--primary-color);
127
+ color: var(--background-color);
128
+ }
129
+
130
+ .grid__minheight {
131
+ min-height: 300px;
132
+ }
133
+
134
+ .noborder {
135
+ border: none !important;
136
+ }
137
+
138
+ .grid__subcontent {
139
+ flex: 0 1 80%;
140
+ background: var(--item-color);
141
+ border-radius: var(--br);
142
+ border: 1px solid rgba(var(--item-color-rgb), 1.15);
143
+ box-sizing: border-box;
144
+ padding: 2px;
145
+ margin: 8px 0;
146
+ height: auto;
147
+ position: relative;
148
+ box-shadow: 0 4px 0 rgba(var(--primary-color-rgb), 0.05);
149
+ }
150
+
151
+ .grid__subcontent h2 {
152
+ color: var(--primary-color);
153
+ font-size: 1.35em;
154
+ padding: 0;
155
+ margin: 0 0 30px 0;
156
+ }
157
+
158
+ .gridtxt__header {
159
+ width: 100%;
160
+ display: block;
161
+ background: rgba(var(--item-color-rgb), 1.05);
162
+ box-sizing: border-box;
163
+ padding: 10px 20px;
164
+ border-radius: 0;
165
+ margin-bottom: 0;
166
+ font-weight: 700;
167
+ text-align: center;
168
+ color: var(--paragraph-color);
169
+ }
170
+
171
+ .gridtxt__header span {
172
+ font-weight: 700;
173
+ }
174
+
175
+ .gridtxt > ul {
176
+ width: 100%;
177
+ display: flex;
178
+ justify-content: flex-start;
179
+ flex-direction: row;
180
+ flex-wrap: wrap;
181
+ list-style: none;
182
+ box-sizing: border-box;
183
+ padding: 0.85rem;
184
+ margin: 0;
185
+ }
186
+
187
+ .gridtxt > ul li {
188
+ flex: 0 0 calc(50% - 10px);
189
+ padding: 0.85rem;
190
+ box-sizing: border-box;
191
+ border: 1px solid rgba(var(--primary-color-rgb), 0.15);
192
+ color: var(--paragraph-color);
193
+ background: rgba(var(--tertiary-color-rgb), 0.95);
194
+ margin: 5px;
195
+ border-radius: var(--br);
196
+ line-height: 1.45;
197
+ }
198
+
199
+ .gridtxt > ul .fw-grid-item {
200
+ flex: 0 0 calc(100% - 10px);
201
+ }
202
+
203
+ .gridtxt > ul .notecolor {
204
+ border: 1px solid var(--secondary-color);
205
+ }
206
+
207
+ .crmtitle {
208
+ border: none;
209
+ min-height: auto;
210
+ padding: 5px 20px;
211
+ margin: 0;
212
+ background: var(--primary-color);
213
+ border-radius: var(--br);
214
+ border: 1px solid rgba(var(--item-color-rgb), 1.15);
215
+ position: relative;
216
+ display: flex;
217
+ align-items: center;
218
+
219
+ h1 {
220
+ color: var(--background-color);
221
+ font-weight: 700;
222
+ font-size: 1.15em;
223
+ margin: 0;
224
+ padding: 0.65rem 0;
225
+ display: flex;
226
+ align-items: center;
227
+ gap: 0.25rem;
228
+
229
+ a {
230
+ text-decoration: none;
231
+ color: var(--secondary-color);
232
+ }
233
+
234
+ svg {
235
+ color: rgba(var(--tertiary-color-rgb), 0.5);
236
+ position: relative;
237
+ top: 0;
238
+ margin: 0 0.5rem;
239
+ max-width: 15px;
240
+ }
241
+ }
242
+ }
243
+
244
+ .titleInfo {
245
+ position: absolute;
246
+ right: 2em;
247
+
248
+ span {
249
+ font-size: 0.875em;
250
+ color: rgba(var(--background-color-rgb), 0.65);
251
+ }
252
+ }
253
+
254
+ .customer__overview {
255
+ width: 100%;
256
+ display: flex;
257
+ justify-content: flex-start;
258
+ flex-direction: row;
259
+ flex-wrap: wrap;
260
+ list-style: none;
261
+ box-sizing: border-box;
262
+ padding: 1em;
263
+ margin: 0;
264
+
265
+ li {
266
+ width: 49%;
267
+ padding: 1em;
268
+ box-sizing: border-box;
269
+ border: 1px solid rgba(var(--primary-color-rgb), 0.15);
270
+ color: var(--paragraph-color);
271
+ background: rgba(#f4f4f4, 0.65);
272
+ margin: 5px;
273
+ border-radius: 5px;
274
+ }
275
+ }
276
+
277
+ .progress {
278
+ width: 100%;
279
+ display: block;
280
+ }
281
+
282
+ .progress__bar {
283
+ width: 100%;
284
+ height: 5px;
285
+ border-radius: var(--br);
286
+ background: var(--secondary-color);
287
+ }
288
+
289
+ .dropzone__container {
290
+ > div {
291
+ flex: 1 1 0%;
292
+ display: flex;
293
+ flex-direction: column;
294
+ align-items: center;
295
+ padding: 30px;
296
+ border-width: 2px;
297
+ border-radius: 2px;
298
+ border-color: rgb(238, 238, 238);
299
+ border-style: dashed;
300
+ background-color: rgb(250, 250, 250);
301
+ color: rgb(189, 189, 189);
302
+ outline: currentcolor none medium;
303
+ transition: border 0.24s ease-in-out 0s;
304
+ margin: 1em;
305
+
306
+ p {
307
+ padding: 0;
308
+ margin: 0;
309
+ }
310
+ }
311
+ }
312
+
313
+ .dropzone__files {
314
+ list-style: none;
315
+ padding: 0;
316
+ margin: 1em;
317
+ box-sizing: border-box;
318
+
319
+ li {
320
+ width: 100%;
321
+ display: block;
322
+ background: rgba(var(--tertiary-color-rgb), 1.05);
323
+ color: var(--primary-color);
324
+ border-radius: 3px;
325
+ transition: background 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
326
+ outline: none;
327
+ cursor: pointer;
328
+ border-radius: 3px;
329
+ padding: 1em 2em;
330
+ box-sizing: border-box;
331
+ position: relative;
332
+ margin-bottom: 5px;
333
+
334
+ i {
335
+ position: relative;
336
+ top: 0;
337
+ right: 5px;
338
+ color: rgba(var(--secondary-color-rgb), 1.15);
339
+ }
340
+
341
+ button {
342
+ position: relative;
343
+ float: right;
344
+ background: none;
345
+ outline: none;
346
+ border: none;
347
+ z-index: 200;
348
+ cursor: pointer;
349
+
350
+ i {
351
+ font-size: 1.15em;
352
+ color: var(--primary-color);
353
+ line-height: 1;
354
+ }
355
+ }
356
+ }
357
+
358
+ li:hover {
359
+ background: rgba(var(--secondary-color-rgb, 0.65));
360
+ }
361
+ }
362
+
363
+ .sortlist {
364
+ width: 100%;
365
+ display: grid;
366
+ grid-gap: 0.5rem;
367
+ grid-template-columns: repeat(4, 1fr);
368
+ box-sizing: border-box;
369
+ padding: 0;
370
+ margin: 0;
371
+ list-style: none;
372
+
373
+ li {
374
+ display: flex;
375
+ justify-content: center;
376
+ align-items: center;
377
+ flex-wrap: wrap;
378
+ border-radius: 5px;
379
+ border: 1px solid rgba(var(--primary-color-rgb), 0.2);
380
+ box-shadow: 0px 0px 20px rgba(var(--primary-color-rgb), 0.1);
381
+ padding: 1.25rem 1.25rem 1.25rem 2rem;
382
+ box-sizing: border-box;
383
+ cursor: pointer;
384
+ list-style: none;
385
+ position: relative;
386
+ color: var(--paragraph-color);
387
+ user-select: none;
388
+
389
+ svg {
390
+ width: 100%;
391
+ max-width: 18px;
392
+ position: absolute;
393
+ left: 5px;
394
+ top: 5px;
395
+ }
396
+
397
+ .pencil-edit {
398
+ width: 100%;
399
+ max-width: 18px;
400
+ position: absolute;
401
+ left: 5px;
402
+ top: 30px;
403
+ }
404
+
405
+ .delete {
406
+ width: 100%;
407
+ max-width: 18px;
408
+ position: absolute;
409
+ left: 5px;
410
+ top: 60px;
411
+ }
412
+ }
413
+
414
+ .sortimg {
415
+ width: 50px;
416
+ position: relative;
417
+ height: 50px;
418
+ margin-left: auto;
419
+ border-radius: 5px;
420
+ overflow: hidden;
421
+
422
+ img {
423
+ display: block;
424
+ object-fit: cover;
425
+ height: 100%;
426
+ width: 100%;
427
+ overflow: hidden;
428
+ }
429
+ }
430
+ }
431
+
432
+ .polActions {
433
+ position: fixed;
434
+ bottom: 15px;
435
+ right: 20px;
436
+ width: auto;
437
+ }
438
+
439
+ .polActions button {
440
+ display: block;
441
+ float: left;
442
+ padding: 0.35em 1em;
443
+ margin: 0 0.15em;
444
+ }
445
+
446
+ .oppoverview {
447
+ width: 100%;
448
+ display: flex;
449
+ flex-wrap: nowrap;
450
+ align-items: flex-start;
451
+ padding: 0 1.5em;
452
+ }
453
+
454
+ .oppoverview__box {
455
+ width: auto;
456
+ margin: 0;
457
+ padding: 0 2em;
458
+ border-right: 1px solid rgba(var(--primary-color-rgb), 0.35);
459
+ }
460
+
461
+ .oppoverview__box:first-child {
462
+ padding-left: 0;
463
+ }
464
+
465
+ .oppoverview__box p {
466
+ margin: 0;
467
+ }
468
+
469
+ .oppoverview__box span {
470
+ display: block;
471
+ color: rgba(var(--paragraph-color-rgb), 0.7);
472
+ }
473
+
474
+ .oppstatus {
475
+ width: 100%;
476
+ }
477
+
478
+ .opppath {
479
+ display: flex;
480
+ align-items: flex-start;
481
+ overflow: hidden;
482
+ list-style: none;
483
+ padding: 0;
484
+ margin: 0;
485
+ }
486
+
487
+ .opppath > li {
488
+ position: relative;
489
+ flex: 1;
490
+ margin-left: 0.375rem;
491
+ margin-right: 0.4375rem;
492
+ min-width: 5rem;
493
+ text-align: center;
494
+ background: var(--primary-color);
495
+ }
496
+
497
+ .opppath > li:first-child {
498
+ margin-left: 0;
499
+ border-top-left-radius: 1rem;
500
+ border-bottom-left-radius: 1rem;
501
+ padding-left: 0.625rem;
502
+ }
503
+
504
+ .opppath > li:first-child:before,
505
+ .opppath > li:first-child:after {
506
+ left: 1.125rem;
507
+ }
508
+
509
+ .opppath > li:last-child {
510
+ margin-right: 0;
511
+ border-top-right-radius: 1rem;
512
+ border-bottom-right-radius: 1rem;
513
+ padding-left: 0.625rem;
514
+ }
515
+
516
+ .opppath > li:last-child:before,
517
+ .opppath > li:last-child:after {
518
+ right: 1.125rem;
519
+ }
520
+
521
+ .opppath > li:before,
522
+ .opppath > li:after {
523
+ content: '';
524
+ position: absolute;
525
+ left: -0.35rem;
526
+ right: -0.35rem;
527
+ cursor: pointer;
528
+ background: var(--primary-color);
529
+ }
530
+
531
+ .opppath > li:before {
532
+ top: 0;
533
+ height: 1.5rem;
534
+ transform: skew(28deg) translate3d(0, 0, 0);
535
+ }
536
+
537
+ .opppath > li:after {
538
+ bottom: 0;
539
+ height: 1.5rem;
540
+ transform: skew(-30deg) translate3d(0, 0, 0);
541
+ }
542
+
543
+ .opppath > li a {
544
+ position: relative;
545
+ display: flex;
546
+ justify-content: center;
547
+ align-items: center;
548
+ height: 2rem;
549
+ padding: 1.45rem;
550
+ text-decoration: none;
551
+ z-index: 5;
552
+ cursor: pointer;
553
+ color: var(--tertiary-color);
554
+ }
555
+
556
+ .opppath > li a svg {
557
+ position: relative;
558
+ top: 2px;
559
+ left: 8px;
560
+ color: rgba(var(--highlight-color-rgb), 0.5);
561
+ }
562
+
563
+ .opp-complete {
564
+ background: rgba(var(--primary-color-rgb), 0.9);
565
+ }
566
+
567
+ .opp-complete a {
568
+ color: var(--highlight-color);
569
+ }
570
+
571
+ .opp-complete:before,
572
+ .opp-complete:after {
573
+ background: rgba(var(--primary-color-rgb), 0.9);
574
+ }
575
+
576
+ .oppdets {
577
+ line-height: 1.475em;
578
+ }