vcomply-design-system 1.1.1 → 1.1.2
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.
|
@@ -320,7 +320,7 @@
|
|
|
320
320
|
}
|
|
321
321
|
}
|
|
322
322
|
|
|
323
|
-
// New color
|
|
323
|
+
// New css color
|
|
324
324
|
// Blue
|
|
325
325
|
@blue-10 : #F4F8FF;
|
|
326
326
|
@blue-20 : #E2ECFF;
|
|
@@ -402,3 +402,212 @@
|
|
|
402
402
|
// Neutral
|
|
403
403
|
@neutral-100 : #000000;
|
|
404
404
|
@neutral-0 : #FFFFFF;
|
|
405
|
+
|
|
406
|
+
|
|
407
|
+
|
|
408
|
+
// New class color
|
|
409
|
+
// Blue
|
|
410
|
+
.vx-blue-10 {
|
|
411
|
+
color: #F4F8FF;
|
|
412
|
+
}
|
|
413
|
+
.vx-blue-20 {
|
|
414
|
+
color: #E2ECFF;
|
|
415
|
+
}
|
|
416
|
+
.vx-blue-30 {
|
|
417
|
+
color: #BCD0F6;
|
|
418
|
+
}
|
|
419
|
+
.vx-blue-40 {
|
|
420
|
+
color: #7AA7F7;
|
|
421
|
+
}
|
|
422
|
+
.vx-blue-50 {
|
|
423
|
+
color: #4681EF;
|
|
424
|
+
}
|
|
425
|
+
.vx-blue-60 {
|
|
426
|
+
color: #1E5DD3;
|
|
427
|
+
}
|
|
428
|
+
.vx-blue-70 {
|
|
429
|
+
color: #1146A8;
|
|
430
|
+
}
|
|
431
|
+
.vx-blue-80 {
|
|
432
|
+
color: #042E7D;
|
|
433
|
+
}
|
|
434
|
+
.vx-blue-90 {
|
|
435
|
+
color: #0D2556;
|
|
436
|
+
}
|
|
437
|
+
.vx-blue-100 {
|
|
438
|
+
color: #161B2F;
|
|
439
|
+
}
|
|
440
|
+
|
|
441
|
+
|
|
442
|
+
// Green
|
|
443
|
+
.vx-green-10 {
|
|
444
|
+
color: #DDF4E0;
|
|
445
|
+
}
|
|
446
|
+
.vx-green-20 {
|
|
447
|
+
color: #CAEBCF;
|
|
448
|
+
}
|
|
449
|
+
.vx-green-30 {
|
|
450
|
+
color: #B7E2BD;
|
|
451
|
+
}
|
|
452
|
+
.vx-green-40 {
|
|
453
|
+
color: #97D2A0;
|
|
454
|
+
}
|
|
455
|
+
.vx-green-50 {
|
|
456
|
+
color: #66BF72;
|
|
457
|
+
}
|
|
458
|
+
.vx-green-60 {
|
|
459
|
+
color: #34AA44;
|
|
460
|
+
}
|
|
461
|
+
.vx-green-70 {
|
|
462
|
+
color: #1C802A;
|
|
463
|
+
}
|
|
464
|
+
.vx-green-80 {
|
|
465
|
+
color: #04550F;
|
|
466
|
+
}
|
|
467
|
+
.vx-green-90 {
|
|
468
|
+
color: #023C0A;
|
|
469
|
+
}
|
|
470
|
+
.vx-green-100 {
|
|
471
|
+
color: #021D05;
|
|
472
|
+
}
|
|
473
|
+
|
|
474
|
+
|
|
475
|
+
// Red
|
|
476
|
+
.vx-red-10 {
|
|
477
|
+
color: #FFEEEB;
|
|
478
|
+
}
|
|
479
|
+
.vx-red-20 {
|
|
480
|
+
color: #FDD9D1;
|
|
481
|
+
}
|
|
482
|
+
.vx-red-30 {
|
|
483
|
+
color: #FAC3B7;
|
|
484
|
+
}
|
|
485
|
+
.vx-red-40 {
|
|
486
|
+
color: #E38B7A;
|
|
487
|
+
}
|
|
488
|
+
.vx-red-50 {
|
|
489
|
+
color: #D5624B;
|
|
490
|
+
}
|
|
491
|
+
.vx-red-60 {
|
|
492
|
+
color: #C7381B;
|
|
493
|
+
}
|
|
494
|
+
.vx-red-70 {
|
|
495
|
+
color: #A82A1D;
|
|
496
|
+
}
|
|
497
|
+
.vx-red-80 {
|
|
498
|
+
color: #781C17;
|
|
499
|
+
}
|
|
500
|
+
.vx-red-90 {
|
|
501
|
+
color: #470E10;
|
|
502
|
+
}
|
|
503
|
+
.vx-red-100 {
|
|
504
|
+
color: #2F090A;
|
|
505
|
+
}
|
|
506
|
+
|
|
507
|
+
|
|
508
|
+
// Orange
|
|
509
|
+
.vx-orange-10 {
|
|
510
|
+
color: #FDF1E8;
|
|
511
|
+
}
|
|
512
|
+
.vx-orange-20 {
|
|
513
|
+
color: #FBE3D0;
|
|
514
|
+
}
|
|
515
|
+
.vx-orange-30 {
|
|
516
|
+
color: #F7C8A1;
|
|
517
|
+
}
|
|
518
|
+
.vx-orange-40 {
|
|
519
|
+
color: #F2AC73;
|
|
520
|
+
}
|
|
521
|
+
.vx-orange-50 {
|
|
522
|
+
color: #EE9044;
|
|
523
|
+
}
|
|
524
|
+
.vx-orange-60 {
|
|
525
|
+
color: #E87315;
|
|
526
|
+
}
|
|
527
|
+
.vx-orange-70 {
|
|
528
|
+
color: #BB5D11;
|
|
529
|
+
}
|
|
530
|
+
.vx-orange-80 {
|
|
531
|
+
color: #8C460D;
|
|
532
|
+
}
|
|
533
|
+
.vx-orange-90 {
|
|
534
|
+
color: #5E2F08;
|
|
535
|
+
}
|
|
536
|
+
.vx-orange-100 {
|
|
537
|
+
color: #2F1704;
|
|
538
|
+
}
|
|
539
|
+
|
|
540
|
+
|
|
541
|
+
// Yellow
|
|
542
|
+
.vx-yellow-10 {
|
|
543
|
+
color: #FEF8E7;
|
|
544
|
+
}
|
|
545
|
+
.vx-yellow-20 {
|
|
546
|
+
color: #FCF2CF;
|
|
547
|
+
}
|
|
548
|
+
.vx-yellow-30 {
|
|
549
|
+
color: #FAE6A3;
|
|
550
|
+
}
|
|
551
|
+
.vx-yellow-40 {
|
|
552
|
+
color: #F7D873;
|
|
553
|
+
}
|
|
554
|
+
.vx-yellow-50 {
|
|
555
|
+
color: #F5CC48;
|
|
556
|
+
}
|
|
557
|
+
.vx-yellow-60 {
|
|
558
|
+
color: #F2BF19;
|
|
559
|
+
}
|
|
560
|
+
.vx-yellow-70 {
|
|
561
|
+
color: #CB9E0B;
|
|
562
|
+
}
|
|
563
|
+
.vx-yellow-80 {
|
|
564
|
+
color: #967508;
|
|
565
|
+
}
|
|
566
|
+
.vx-yellow-90 {
|
|
567
|
+
color: #654F06;
|
|
568
|
+
}
|
|
569
|
+
.vx-yellow-100 {
|
|
570
|
+
color: #302603;
|
|
571
|
+
}
|
|
572
|
+
|
|
573
|
+
|
|
574
|
+
// Gray
|
|
575
|
+
.vx-gray-10 {
|
|
576
|
+
color: #F9F9FA;
|
|
577
|
+
}
|
|
578
|
+
.vx-gray-20 {
|
|
579
|
+
color: #F2F2F5;
|
|
580
|
+
}
|
|
581
|
+
.vx-gray-30 {
|
|
582
|
+
color: #E3E3E9;
|
|
583
|
+
}
|
|
584
|
+
.vx-gray-40 {
|
|
585
|
+
color: #CDCED6;
|
|
586
|
+
}
|
|
587
|
+
.vx-gray-50 {
|
|
588
|
+
color: #A9AAB6;
|
|
589
|
+
}
|
|
590
|
+
.vx-gray-60 {
|
|
591
|
+
color: #787A8C;
|
|
592
|
+
}
|
|
593
|
+
.vx-gray-70 {
|
|
594
|
+
color: #565A6F;
|
|
595
|
+
}
|
|
596
|
+
.vx-gray-80 {
|
|
597
|
+
color: #343952;
|
|
598
|
+
}
|
|
599
|
+
.vx-gray-90 {
|
|
600
|
+
color: #282E48;
|
|
601
|
+
}
|
|
602
|
+
.vx-gray-100 {
|
|
603
|
+
color: #242940;
|
|
604
|
+
}
|
|
605
|
+
|
|
606
|
+
|
|
607
|
+
// Neutral
|
|
608
|
+
.vx-neutral-100 {
|
|
609
|
+
color: #000000;
|
|
610
|
+
}
|
|
611
|
+
.vx-neutral-0 {
|
|
612
|
+
color: #FFFFFF;
|
|
613
|
+
}
|
|
@@ -93,20 +93,20 @@
|
|
|
93
93
|
<script type="prism-html-markup">
|
|
94
94
|
class name with color code:
|
|
95
95
|
|
|
96
|
-
blue-10 : #F4F8FF;
|
|
97
|
-
blue-20 : #E2ECFF;
|
|
98
|
-
blue-30 : #BCD0F6;
|
|
99
|
-
blue-40 : #7AA7F7;
|
|
100
|
-
blue-50 : #4681EF;
|
|
101
|
-
blue-60 : #1E5DD3;
|
|
102
|
-
blue-70 : #1146A8;
|
|
103
|
-
blue-80 : #042E7D;
|
|
104
|
-
blue-90 : #0D2556;
|
|
105
|
-
blue-100 : #161B2F;
|
|
96
|
+
vx-blue-10 : #F4F8FF;
|
|
97
|
+
vx-blue-20 : #E2ECFF;
|
|
98
|
+
vx-blue-30 : #BCD0F6;
|
|
99
|
+
vx-blue-40 : #7AA7F7;
|
|
100
|
+
vx-blue-50 : #4681EF;
|
|
101
|
+
vx-blue-60 : #1E5DD3;
|
|
102
|
+
vx-blue-70 : #1146A8;
|
|
103
|
+
vx-blue-80 : #042E7D;
|
|
104
|
+
vx-blue-90 : #0D2556;
|
|
105
|
+
vx-blue-100 : #161B2F;
|
|
106
106
|
|
|
107
107
|
Example:
|
|
108
|
-
If we are using blue-60 color code in our project then we can use it like this:
|
|
109
|
-
<div class="blue-60"></div>
|
|
108
|
+
If we are using vx-blue-60 color code in our project then we can use it like this:
|
|
109
|
+
<div class="vx-blue-60"></div>
|
|
110
110
|
</script>
|
|
111
111
|
</code>
|
|
112
112
|
<code class="language-markup" id="blueColorless">
|
|
@@ -190,20 +190,20 @@
|
|
|
190
190
|
<script type="prism-html-markup">
|
|
191
191
|
class name with color code:
|
|
192
192
|
|
|
193
|
-
green-10 : #DDF4E0;
|
|
194
|
-
green-20 : #CAEBCF;
|
|
195
|
-
green-30 : #B7E2BD;
|
|
196
|
-
green-40 : #97D2A0;
|
|
197
|
-
green-50 : #66BF72;
|
|
198
|
-
green-60 : #34AA44;
|
|
199
|
-
green-70 : #1C802A;
|
|
200
|
-
green-80 : #04550F;
|
|
201
|
-
green-90 : #023C0A;
|
|
202
|
-
green-100 : #021D05;
|
|
193
|
+
vx-green-10 : #DDF4E0;
|
|
194
|
+
vx-green-20 : #CAEBCF;
|
|
195
|
+
vx-green-30 : #B7E2BD;
|
|
196
|
+
vx-green-40 : #97D2A0;
|
|
197
|
+
vx-green-50 : #66BF72;
|
|
198
|
+
vx-green-60 : #34AA44;
|
|
199
|
+
vx-green-70 : #1C802A;
|
|
200
|
+
vx-green-80 : #04550F;
|
|
201
|
+
vx-green-90 : #023C0A;
|
|
202
|
+
vx-green-100 : #021D05;
|
|
203
203
|
|
|
204
204
|
Example:
|
|
205
|
-
If we are using green-60 color code in our project then we can use it like this:
|
|
206
|
-
<div class="green-60"></div>
|
|
205
|
+
If we are using vx-green-60 color code in our project then we can use it like this:
|
|
206
|
+
<div class="vx-green-60"></div>
|
|
207
207
|
</script>
|
|
208
208
|
</code>
|
|
209
209
|
<code class="language-markup" id="greenColorless">
|
|
@@ -287,20 +287,20 @@
|
|
|
287
287
|
<script type="prism-html-markup">
|
|
288
288
|
class name with color code:
|
|
289
289
|
|
|
290
|
-
red-10 : #FFEEEB;
|
|
291
|
-
red-20 : #FDD9D1;
|
|
292
|
-
red-30 : #FAC3B7;
|
|
293
|
-
red-40 : #E38B7A;
|
|
294
|
-
red-50 : #D5624B;
|
|
295
|
-
red-60 : #C7381B;
|
|
296
|
-
red-70 : #A82A1D;
|
|
297
|
-
red-80 : #781C17;
|
|
298
|
-
red-90 : #470E10;
|
|
299
|
-
red-100 : #2F090A;
|
|
290
|
+
vx-red-10 : #FFEEEB;
|
|
291
|
+
vx-red-20 : #FDD9D1;
|
|
292
|
+
vx-red-30 : #FAC3B7;
|
|
293
|
+
vx-red-40 : #E38B7A;
|
|
294
|
+
vx-red-50 : #D5624B;
|
|
295
|
+
vx-red-60 : #C7381B;
|
|
296
|
+
vx-red-70 : #A82A1D;
|
|
297
|
+
vx-red-80 : #781C17;
|
|
298
|
+
vx-red-90 : #470E10;
|
|
299
|
+
vx-red-100 : #2F090A;
|
|
300
300
|
|
|
301
301
|
Example:
|
|
302
|
-
If we are using red-60 color code in our project then we can use it like this:
|
|
303
|
-
<div class="red-60"></div>
|
|
302
|
+
If we are using vx-red-60 color code in our project then we can use it like this:
|
|
303
|
+
<div class="vx-red-60"></div>
|
|
304
304
|
</script>
|
|
305
305
|
</code>
|
|
306
306
|
<code class="language-markup" id="redColorless">
|
|
@@ -384,20 +384,20 @@
|
|
|
384
384
|
<script type="prism-html-markup">
|
|
385
385
|
class name with color code:
|
|
386
386
|
|
|
387
|
-
orange-10 : #FDF1E8;
|
|
388
|
-
orange-20 : #FBE3D0;
|
|
389
|
-
orange-30 : #F7C8A1;
|
|
390
|
-
orange-40 : #F2AC73;
|
|
391
|
-
orange-50 : #EE9044;
|
|
392
|
-
orange-60 : #E87315;
|
|
393
|
-
orange-70 : #BB5D11;
|
|
394
|
-
orange-80 : #8C460D;
|
|
395
|
-
orange-90 : #5E2F08;
|
|
396
|
-
orange-100 : #2F1704;
|
|
387
|
+
vx-orange-10 : #FDF1E8;
|
|
388
|
+
vx-orange-20 : #FBE3D0;
|
|
389
|
+
vx-orange-30 : #F7C8A1;
|
|
390
|
+
vx-orange-40 : #F2AC73;
|
|
391
|
+
vx-orange-50 : #EE9044;
|
|
392
|
+
vx-orange-60 : #E87315;
|
|
393
|
+
vx-orange-70 : #BB5D11;
|
|
394
|
+
vx-orange-80 : #8C460D;
|
|
395
|
+
vx-orange-90 : #5E2F08;
|
|
396
|
+
vx-orange-100 : #2F1704;
|
|
397
397
|
|
|
398
398
|
Example:
|
|
399
|
-
If we are using orange-60 color code in our project then we can use it like this:
|
|
400
|
-
<div class="orange-60"></div>
|
|
399
|
+
If we are using vx-orange-60 color code in our project then we can use it like this:
|
|
400
|
+
<div class="vx-orange-60"></div>
|
|
401
401
|
</script>
|
|
402
402
|
</code>
|
|
403
403
|
<code class="language-markup" id="orangeColorless">
|
|
@@ -481,20 +481,20 @@
|
|
|
481
481
|
<script type="prism-html-markup">
|
|
482
482
|
class name with color code:
|
|
483
483
|
|
|
484
|
-
yellow-10 : #FEF8E7;
|
|
485
|
-
yellow-20 : #FCF2CF;
|
|
486
|
-
yellow-30 : #FAE6A3;
|
|
487
|
-
yellow-40 : #F7D873;
|
|
488
|
-
yellow-50 : #F5CC48;
|
|
489
|
-
yellow-60 : #F2BF19;
|
|
490
|
-
yellow-70 : #CB9E0B;
|
|
491
|
-
yellow-80 : #967508;
|
|
492
|
-
yellow-90 : #654F06;
|
|
493
|
-
yellow-100 : #302603;
|
|
484
|
+
vx-yellow-10 : #FEF8E7;
|
|
485
|
+
vx-yellow-20 : #FCF2CF;
|
|
486
|
+
vx-yellow-30 : #FAE6A3;
|
|
487
|
+
vx-yellow-40 : #F7D873;
|
|
488
|
+
vx-yellow-50 : #F5CC48;
|
|
489
|
+
vx-yellow-60 : #F2BF19;
|
|
490
|
+
vx-yellow-70 : #CB9E0B;
|
|
491
|
+
vx-yellow-80 : #967508;
|
|
492
|
+
vx-yellow-90 : #654F06;
|
|
493
|
+
vx-yellow-100 : #302603;
|
|
494
494
|
|
|
495
495
|
Example:
|
|
496
|
-
If we are using yellow-60 color code in our project then we can use it like this:
|
|
497
|
-
<div class="yellow-60"></div>
|
|
496
|
+
If we are using vx-yellow-60 color code in our project then we can use it like this:
|
|
497
|
+
<div class="vx-yellow-60"></div>
|
|
498
498
|
</script>
|
|
499
499
|
</code>
|
|
500
500
|
<code class="language-markup" id="yellowColorless">
|
|
@@ -578,20 +578,20 @@
|
|
|
578
578
|
<script type="prism-html-markup">
|
|
579
579
|
class name with color code:
|
|
580
580
|
|
|
581
|
-
gray-10 : #F9F9FA;
|
|
582
|
-
gray-20 : #F2F2F5;
|
|
583
|
-
gray-30 : #E3E3E9;
|
|
584
|
-
gray-40 : #CDCED6;
|
|
585
|
-
gray-50 : #A9AAB6;
|
|
586
|
-
gray-60 : #787A8C;
|
|
587
|
-
gray-70 : #565A6F;
|
|
588
|
-
gray-80 : #343952;
|
|
589
|
-
gray-90 : #282E48;
|
|
590
|
-
gray-100 : #242940;
|
|
581
|
+
vx-gray-10 : #F9F9FA;
|
|
582
|
+
vx-gray-20 : #F2F2F5;
|
|
583
|
+
vx-gray-30 : #E3E3E9;
|
|
584
|
+
vx-gray-40 : #CDCED6;
|
|
585
|
+
vx-gray-50 : #A9AAB6;
|
|
586
|
+
vx-gray-60 : #787A8C;
|
|
587
|
+
vx-gray-70 : #565A6F;
|
|
588
|
+
vx-gray-80 : #343952;
|
|
589
|
+
vx-gray-90 : #282E48;
|
|
590
|
+
vx-gray-100 : #242940;
|
|
591
591
|
|
|
592
592
|
Example:
|
|
593
|
-
If we are using gray-60 color code in our project then we can use it like this:
|
|
594
|
-
<div class="gray-60"></div>
|
|
593
|
+
If we are using vx-gray-60 color code in our project then we can use it like this:
|
|
594
|
+
<div class="vx-gray-60"></div>
|
|
595
595
|
</script>
|
|
596
596
|
</code>
|
|
597
597
|
<code class="language-markup" id="grayColorless">
|
|
@@ -651,12 +651,12 @@
|
|
|
651
651
|
<script type="prism-html-markup">
|
|
652
652
|
class name with color code:
|
|
653
653
|
|
|
654
|
-
neutral-100 : #000000;
|
|
655
|
-
neutral-0 : #FFFFFF;
|
|
654
|
+
vx-neutral-100 : #000000;
|
|
655
|
+
vx-neutral-0 : #FFFFFF;
|
|
656
656
|
|
|
657
657
|
Example:
|
|
658
|
-
If we are using neutral-100 color code in our project then we can use it like this:
|
|
659
|
-
<div class="neutral-100"></div>
|
|
658
|
+
If we are using vx-neutral-100 color code in our project then we can use it like this:
|
|
659
|
+
<div class="vx-neutral-100"></div>
|
|
660
660
|
</script>
|
|
661
661
|
</code>
|
|
662
662
|
<code class="language-markup" id="neutralColorless">
|