@iroco/ui 0.15.2 → 0.17.0

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.
Files changed (13) hide show
  1. package/lib/button.scss +60 -0
  2. package/lib/index.js +442 -118
  3. package/lib/index.min.js +55 -55
  4. package/lib/index.mjs +440 -119
  5. package/lib/index.mjs.css +251 -72
  6. package/package.json +4 -3
  7. package/scss/button.scss +60 -0
  8. package/src/Button.svelte +1 -61
  9. package/src/IrocoLogo.svelte +45 -0
  10. package/src/NavBar.svelte +6 -2
  11. package/src/Navigation.svelte +15 -5
  12. package/src/definition.ts +10 -2
  13. package/src/index.ts +4 -0
package/lib/index.mjs.css CHANGED
@@ -1,3 +1,6 @@
1
+ svg.svelte-1cuxg7m {
2
+ overflow: visible; }
3
+
1
4
  .rotate.svelte-1dns1yx {
2
5
  animation: svelte-1dns1yx-rotation 2s; }
3
6
 
@@ -13,9 +16,6 @@
13
16
  to {
14
17
  transform: rotate(359deg); } }
15
18
 
16
- svg.svelte-1cuxg7m {
17
- overflow: visible; }
18
-
19
19
  .data-table.svelte-1ju5y8t {
20
20
  border: 1px solid #464452;
21
21
  width: 100%; }
@@ -327,31 +327,135 @@ input.svelte-1y0402x.svelte-1y0402x:focus {
327
327
  .iroco-ui-button.disabled.svelte-5qkkwb:hover {
328
328
  box-shadow: none; }
329
329
 
330
- @use "colors";
331
- @use "containers";
332
- @use "fonts";
333
- @use "forms";
334
- @use "layouts";
335
- .alert.svelte-itln7g {
336
- min-height: 2em;
337
- display: inline-flex;
338
- align-items: center;
339
- border-radius: 0.3em;
340
- padding: 0 1em 0 1em;
341
- font-size: 1.2em;
342
- justify-content: center;
343
- margin-bottom: 1em;
344
- cursor: pointer; }
330
+ .container-wide.svelte-v0jihd.svelte-v0jihd {
331
+ width: calc(100% - 20px);
332
+ max-width: 2360px;
333
+ margin-left: auto;
334
+ margin-right: auto;
335
+ transition: max-width ease-out 200ms; }
345
336
 
346
- .alert--danger.svelte-itln7g {
347
- background-color: rgba(255, 80, 77, 0.5);
348
- border: 1px solid #ff504d; }
337
+ @media all and (max-width: 2560px) {
338
+ .container-wide.svelte-v0jihd.svelte-v0jihd {
339
+ max-width: 1620px; } }
349
340
 
350
- .alert--success.svelte-itln7g {
351
- background-color: rgba(0, 214, 146, 0.5);
352
- border: 1px solid #00D692; }
341
+ @media all and (max-width: 1800px) {
342
+ .container-wide.svelte-v0jihd.svelte-v0jihd {
343
+ max-width: 1280px; } }
344
+
345
+ @media all and (max-width: 1440px) {
346
+ .container-wide.svelte-v0jihd.svelte-v0jihd {
347
+ max-width: 884px; } }
348
+
349
+ @media all and (max-width: 1024px) {
350
+ .container-wide.svelte-v0jihd.svelte-v0jihd {
351
+ max-width: 648px; } }
352
+
353
+ @media all and (max-width: 768px) {
354
+ .container-wide.svelte-v0jihd.svelte-v0jihd {
355
+ max-width: 496px; } }
356
+
357
+ @media all and (max-width: 596px) {
358
+ .container-wide.svelte-v0jihd.svelte-v0jihd {
359
+ max-width: 365px; } }
360
+
361
+ @media all and (max-width: 425px) {
362
+ .container-wide.svelte-v0jihd.svelte-v0jihd {
363
+ max-width: calc(100% - 60px); } }
364
+
365
+ @media all and (max-width: 375px) {
366
+ .container-wide.svelte-v0jihd.svelte-v0jihd {
367
+ max-width: calc(100% - 40px); } }
368
+
369
+ @media all and (max-width: 320px) {
370
+ .container-wide.svelte-v0jihd.svelte-v0jihd {
371
+ max-width: calc(100% - 20px); } }
372
+
373
+ .container-large.svelte-v0jihd.svelte-v0jihd {
374
+ width: calc(100% - 20px);
375
+ max-width: 1280px;
376
+ margin-left: auto;
377
+ margin-right: auto;
378
+ transition: max-width ease-out 200ms; }
379
+
380
+ @media all and (max-width: 1440px) {
381
+ .container-large.svelte-v0jihd.svelte-v0jihd {
382
+ max-width: 884px; } }
383
+
384
+ @media all and (max-width: 1024px) {
385
+ .container-large.svelte-v0jihd.svelte-v0jihd {
386
+ max-width: 648px; } }
387
+
388
+ @media all and (max-width: 768px) {
389
+ .container-large.svelte-v0jihd.svelte-v0jihd {
390
+ max-width: 496px; } }
391
+
392
+ @media all and (max-width: 596px) {
393
+ .container-large.svelte-v0jihd.svelte-v0jihd {
394
+ max-width: 365px; } }
395
+
396
+ @media all and (max-width: 425px) {
397
+ .container-large.svelte-v0jihd.svelte-v0jihd {
398
+ max-width: calc(100% - 60px); } }
399
+
400
+ @media all and (max-width: 375px) {
401
+ .container-large.svelte-v0jihd.svelte-v0jihd {
402
+ max-width: calc(100% - 40px); } }
403
+
404
+ @media all and (max-width: 320px) {
405
+ .container-large.svelte-v0jihd.svelte-v0jihd {
406
+ max-width: calc(100% - 20px); } }
407
+
408
+ .container-medium.svelte-v0jihd.svelte-v0jihd {
409
+ width: calc(100% - 20px);
410
+ max-width: 884px;
411
+ margin-left: auto;
412
+ margin-right: auto;
413
+ transition: max-width ease-out 200ms; }
414
+
415
+ @media all and (max-width: 1024px) {
416
+ .container-medium.svelte-v0jihd.svelte-v0jihd {
417
+ max-width: 648px; } }
353
418
 
354
- .container-wide.svelte-1c8sozl.svelte-1c8sozl {
419
+ @media all and (max-width: 768px) {
420
+ .container-medium.svelte-v0jihd.svelte-v0jihd {
421
+ max-width: 496px; } }
422
+
423
+ @media all and (max-width: 596px) {
424
+ .container-medium.svelte-v0jihd.svelte-v0jihd {
425
+ max-width: 365px; } }
426
+
427
+ @media all and (max-width: 425px) {
428
+ .container-medium.svelte-v0jihd.svelte-v0jihd {
429
+ max-width: calc(100% - 60px); } }
430
+
431
+ @media all and (max-width: 375px) {
432
+ .container-medium.svelte-v0jihd.svelte-v0jihd {
433
+ max-width: calc(100% - 40px); } }
434
+
435
+ @media all and (max-width: 320px) {
436
+ .container-medium.svelte-v0jihd.svelte-v0jihd {
437
+ max-width: calc(100% - 20px); } }
438
+
439
+ .container-small.svelte-v0jihd.svelte-v0jihd {
440
+ width: calc(100% - 20px);
441
+ max-width: 496px;
442
+ margin-left: auto;
443
+ margin-right: auto;
444
+ transition: max-width ease-out 200ms; }
445
+
446
+ @media all and (max-width: 425px) {
447
+ .container-small.svelte-v0jihd.svelte-v0jihd {
448
+ max-width: calc(100% - 60px); } }
449
+
450
+ @media all and (max-width: 375px) {
451
+ .container-small.svelte-v0jihd.svelte-v0jihd {
452
+ max-width: calc(100% - 40px); } }
453
+
454
+ @media all and (max-width: 320px) {
455
+ .container-small.svelte-v0jihd.svelte-v0jihd {
456
+ max-width: calc(100% - 20px); } }
457
+
458
+ .container-wide.svelte-v0jihd.svelte-v0jihd {
355
459
  width: calc(100% - 20px);
356
460
  max-width: 2360px;
357
461
  margin-left: auto;
@@ -359,42 +463,42 @@ input.svelte-1y0402x.svelte-1y0402x:focus {
359
463
  transition: max-width ease-out 200ms; }
360
464
 
361
465
  @media all and (max-width: 2560px) {
362
- .container-wide.svelte-1c8sozl.svelte-1c8sozl {
466
+ .container-wide.svelte-v0jihd.svelte-v0jihd {
363
467
  max-width: 1620px; } }
364
468
 
365
469
  @media all and (max-width: 1800px) {
366
- .container-wide.svelte-1c8sozl.svelte-1c8sozl {
470
+ .container-wide.svelte-v0jihd.svelte-v0jihd {
367
471
  max-width: 1280px; } }
368
472
 
369
473
  @media all and (max-width: 1440px) {
370
- .container-wide.svelte-1c8sozl.svelte-1c8sozl {
474
+ .container-wide.svelte-v0jihd.svelte-v0jihd {
371
475
  max-width: 884px; } }
372
476
 
373
477
  @media all and (max-width: 1024px) {
374
- .container-wide.svelte-1c8sozl.svelte-1c8sozl {
478
+ .container-wide.svelte-v0jihd.svelte-v0jihd {
375
479
  max-width: 648px; } }
376
480
 
377
481
  @media all and (max-width: 768px) {
378
- .container-wide.svelte-1c8sozl.svelte-1c8sozl {
482
+ .container-wide.svelte-v0jihd.svelte-v0jihd {
379
483
  max-width: 496px; } }
380
484
 
381
485
  @media all and (max-width: 596px) {
382
- .container-wide.svelte-1c8sozl.svelte-1c8sozl {
486
+ .container-wide.svelte-v0jihd.svelte-v0jihd {
383
487
  max-width: 365px; } }
384
488
 
385
489
  @media all and (max-width: 425px) {
386
- .container-wide.svelte-1c8sozl.svelte-1c8sozl {
490
+ .container-wide.svelte-v0jihd.svelte-v0jihd {
387
491
  max-width: calc(100% - 60px); } }
388
492
 
389
493
  @media all and (max-width: 375px) {
390
- .container-wide.svelte-1c8sozl.svelte-1c8sozl {
494
+ .container-wide.svelte-v0jihd.svelte-v0jihd {
391
495
  max-width: calc(100% - 40px); } }
392
496
 
393
497
  @media all and (max-width: 320px) {
394
- .container-wide.svelte-1c8sozl.svelte-1c8sozl {
498
+ .container-wide.svelte-v0jihd.svelte-v0jihd {
395
499
  max-width: calc(100% - 20px); } }
396
500
 
397
- .container-large.svelte-1c8sozl.svelte-1c8sozl {
501
+ .container-large.svelte-v0jihd.svelte-v0jihd {
398
502
  width: calc(100% - 20px);
399
503
  max-width: 1280px;
400
504
  margin-left: auto;
@@ -402,34 +506,34 @@ input.svelte-1y0402x.svelte-1y0402x:focus {
402
506
  transition: max-width ease-out 200ms; }
403
507
 
404
508
  @media all and (max-width: 1440px) {
405
- .container-large.svelte-1c8sozl.svelte-1c8sozl {
509
+ .container-large.svelte-v0jihd.svelte-v0jihd {
406
510
  max-width: 884px; } }
407
511
 
408
512
  @media all and (max-width: 1024px) {
409
- .container-large.svelte-1c8sozl.svelte-1c8sozl {
513
+ .container-large.svelte-v0jihd.svelte-v0jihd {
410
514
  max-width: 648px; } }
411
515
 
412
516
  @media all and (max-width: 768px) {
413
- .container-large.svelte-1c8sozl.svelte-1c8sozl {
517
+ .container-large.svelte-v0jihd.svelte-v0jihd {
414
518
  max-width: 496px; } }
415
519
 
416
520
  @media all and (max-width: 596px) {
417
- .container-large.svelte-1c8sozl.svelte-1c8sozl {
521
+ .container-large.svelte-v0jihd.svelte-v0jihd {
418
522
  max-width: 365px; } }
419
523
 
420
524
  @media all and (max-width: 425px) {
421
- .container-large.svelte-1c8sozl.svelte-1c8sozl {
525
+ .container-large.svelte-v0jihd.svelte-v0jihd {
422
526
  max-width: calc(100% - 60px); } }
423
527
 
424
528
  @media all and (max-width: 375px) {
425
- .container-large.svelte-1c8sozl.svelte-1c8sozl {
529
+ .container-large.svelte-v0jihd.svelte-v0jihd {
426
530
  max-width: calc(100% - 40px); } }
427
531
 
428
532
  @media all and (max-width: 320px) {
429
- .container-large.svelte-1c8sozl.svelte-1c8sozl {
533
+ .container-large.svelte-v0jihd.svelte-v0jihd {
430
534
  max-width: calc(100% - 20px); } }
431
535
 
432
- .container-medium.svelte-1c8sozl.svelte-1c8sozl {
536
+ .container-medium.svelte-v0jihd.svelte-v0jihd {
433
537
  width: calc(100% - 20px);
434
538
  max-width: 884px;
435
539
  margin-left: auto;
@@ -437,30 +541,30 @@ input.svelte-1y0402x.svelte-1y0402x:focus {
437
541
  transition: max-width ease-out 200ms; }
438
542
 
439
543
  @media all and (max-width: 1024px) {
440
- .container-medium.svelte-1c8sozl.svelte-1c8sozl {
544
+ .container-medium.svelte-v0jihd.svelte-v0jihd {
441
545
  max-width: 648px; } }
442
546
 
443
547
  @media all and (max-width: 768px) {
444
- .container-medium.svelte-1c8sozl.svelte-1c8sozl {
548
+ .container-medium.svelte-v0jihd.svelte-v0jihd {
445
549
  max-width: 496px; } }
446
550
 
447
551
  @media all and (max-width: 596px) {
448
- .container-medium.svelte-1c8sozl.svelte-1c8sozl {
552
+ .container-medium.svelte-v0jihd.svelte-v0jihd {
449
553
  max-width: 365px; } }
450
554
 
451
555
  @media all and (max-width: 425px) {
452
- .container-medium.svelte-1c8sozl.svelte-1c8sozl {
556
+ .container-medium.svelte-v0jihd.svelte-v0jihd {
453
557
  max-width: calc(100% - 60px); } }
454
558
 
455
559
  @media all and (max-width: 375px) {
456
- .container-medium.svelte-1c8sozl.svelte-1c8sozl {
560
+ .container-medium.svelte-v0jihd.svelte-v0jihd {
457
561
  max-width: calc(100% - 40px); } }
458
562
 
459
563
  @media all and (max-width: 320px) {
460
- .container-medium.svelte-1c8sozl.svelte-1c8sozl {
564
+ .container-medium.svelte-v0jihd.svelte-v0jihd {
461
565
  max-width: calc(100% - 20px); } }
462
566
 
463
- .container-small.svelte-1c8sozl.svelte-1c8sozl {
567
+ .container-small.svelte-v0jihd.svelte-v0jihd {
464
568
  width: calc(100% - 20px);
465
569
  max-width: 496px;
466
570
  margin-left: auto;
@@ -468,30 +572,81 @@ input.svelte-1y0402x.svelte-1y0402x:focus {
468
572
  transition: max-width ease-out 200ms; }
469
573
 
470
574
  @media all and (max-width: 425px) {
471
- .container-small.svelte-1c8sozl.svelte-1c8sozl {
575
+ .container-small.svelte-v0jihd.svelte-v0jihd {
472
576
  max-width: calc(100% - 60px); } }
473
577
 
474
578
  @media all and (max-width: 375px) {
475
- .container-small.svelte-1c8sozl.svelte-1c8sozl {
579
+ .container-small.svelte-v0jihd.svelte-v0jihd {
476
580
  max-width: calc(100% - 40px); } }
477
581
 
478
582
  @media all and (max-width: 320px) {
479
- .container-small.svelte-1c8sozl.svelte-1c8sozl {
583
+ .container-small.svelte-v0jihd.svelte-v0jihd {
480
584
  max-width: calc(100% - 20px); } }
481
585
 
482
- .nav__sidebar__item.svelte-1c8sozl.svelte-1c8sozl, .nav__topbar__item.svelte-1c8sozl.svelte-1c8sozl {
586
+ .iroco-ui-button.svelte-v0jihd.svelte-v0jihd {
587
+ cursor: pointer;
588
+ -webkit-touch-callout: none;
589
+ -webkit-user-select: none;
590
+ -khtml-user-select: none;
591
+ -moz-user-select: none;
592
+ -ms-user-select: none;
593
+ user-select: none;
594
+ border: none;
595
+ flex-shrink: 0;
596
+ margin: 1em 0em;
597
+ position: relative;
598
+ text-transform: uppercase;
599
+ border-radius: 0.3em; }
600
+
601
+ .iroco-ui-button--basic.svelte-v0jihd.svelte-v0jihd {
602
+ background: #f2ebe3;
603
+ border: 1px solid #18151E; }
604
+
605
+ .iroco-ui-button--dark.svelte-v0jihd.svelte-v0jihd {
606
+ background: #18151E;
607
+ color: #f2ebe3; }
608
+
609
+ .iroco-ui-button--success.svelte-v0jihd.svelte-v0jihd {
610
+ background: #00D692; }
611
+
612
+ .iroco-ui-button--danger.svelte-v0jihd.svelte-v0jihd {
613
+ background: #ff504d; }
614
+
615
+ .iroco-ui-button--regular.svelte-v0jihd.svelte-v0jihd {
616
+ padding: 1em 2em; }
617
+
618
+ .iroco-ui-button--small.svelte-v0jihd.svelte-v0jihd {
619
+ padding: 0.5em 1em; }
620
+
621
+ .iroco-ui-button--basic.svelte-v0jihd.svelte-v0jihd:hover, .iroco-ui-button--success.svelte-v0jihd.svelte-v0jihd:hover, .iroco-ui-button--danger.svelte-v0jihd.svelte-v0jihd:hover {
622
+ box-shadow: inset 0 0 0 10em rgba(0, 0, 0, 0.2); }
623
+
624
+ .iroco-ui-button--dark.svelte-v0jihd.svelte-v0jihd:hover {
625
+ box-shadow: inset 0 0 0 10em rgba(255, 255, 255, 0.2); }
626
+
627
+ .iroco-ui-button.svelte-v0jihd.svelte-v0jihd:active {
628
+ box-shadow: none; }
629
+
630
+ .iroco-ui-button.disabled.svelte-v0jihd.svelte-v0jihd {
631
+ background-color: #f5f5f5;
632
+ cursor: default; }
633
+
634
+ .iroco-ui-button.disabled.svelte-v0jihd.svelte-v0jihd:hover {
635
+ box-shadow: none; }
636
+
637
+ .nav__sidebar__item.svelte-v0jihd.svelte-v0jihd, .nav__topbar__item.svelte-v0jihd.svelte-v0jihd {
483
638
  text-decoration: none;
484
639
  font-size: 0.75em;
485
640
  display: block; }
486
641
 
487
- .nav__sidebar__item.svelte-1c8sozl a.svelte-1c8sozl, .nav__topbar__item.svelte-1c8sozl a.svelte-1c8sozl {
642
+ .nav__sidebar__item.svelte-v0jihd a.svelte-v0jihd, .nav__topbar__item.svelte-v0jihd a.svelte-v0jihd {
488
643
  color: #f2ebe3;
489
644
  font-size: 2em; }
490
645
 
491
- .nav__sidebar__close.svelte-1c8sozl.svelte-1c8sozl, .nav__topbar__close.svelte-1c8sozl.svelte-1c8sozl {
646
+ .nav__sidebar__close.svelte-v0jihd.svelte-v0jihd, .nav__topbar__close.svelte-v0jihd.svelte-v0jihd {
492
647
  display: none; }
493
648
 
494
- .nav__sidebar.svelte-1c8sozl.svelte-1c8sozl {
649
+ .nav__sidebar.svelte-v0jihd.svelte-v0jihd {
495
650
  height: 100%;
496
651
  width: 300px;
497
652
  position: absolute;
@@ -499,38 +654,38 @@ input.svelte-1y0402x.svelte-1y0402x:focus {
499
654
  left: 0;
500
655
  overflow-x: hidden; }
501
656
 
502
- .nav__sidebar__item-container.svelte-1c8sozl.svelte-1c8sozl {
657
+ .nav__sidebar__item-container.svelte-v0jihd.svelte-v0jihd {
503
658
  margin: 0;
504
659
  padding: 0;
505
660
  width: 100%;
506
661
  height: 100%; }
507
662
 
508
- .nav__sidebar__item.svelte-1c8sozl.svelte-1c8sozl {
663
+ .nav__sidebar__item.svelte-v0jihd.svelte-v0jihd {
509
664
  padding: 2em;
510
665
  border-top: 1px solid #464452; }
511
666
 
512
- .nav__sidebar__item.svelte-1c8sozl.svelte-1c8sozl:first-child {
667
+ .nav__sidebar__item.svelte-v0jihd.svelte-v0jihd:first-child {
513
668
  border-top: none; }
514
669
 
515
- .nav__sidebar.svelte-1c8sozl .active.svelte-1c8sozl {
670
+ .nav__sidebar.svelte-v0jihd .active.svelte-v0jihd {
516
671
  border-top: 1px solid #00D692;
517
672
  border-bottom: 1px solid #00D692; }
518
673
 
519
- .nav__topbar.svelte-1c8sozl.svelte-1c8sozl {
674
+ .nav__topbar.svelte-v0jihd.svelte-v0jihd {
520
675
  flex-grow: 1;
521
676
  display: flex;
522
677
  justify-content: flex-end; }
523
678
 
524
- .nav__topbar.svelte-1c8sozl ul.svelte-1c8sozl, .nav__topbar.svelte-1c8sozl li.svelte-1c8sozl {
679
+ .nav__topbar.svelte-v0jihd ul.svelte-v0jihd, .nav__topbar.svelte-v0jihd li.svelte-v0jihd {
525
680
  display: inline; }
526
681
 
527
- .nav__topbar.svelte-1c8sozl ul.svelte-1c8sozl {
682
+ .nav__topbar.svelte-v0jihd ul.svelte-v0jihd {
528
683
  display: flex;
529
684
  flex-grow: 1;
530
685
  justify-content: space-around; }
531
686
 
532
687
  @media all and (max-width: 768px) {
533
- .nav__sidebar.svelte-1c8sozl.svelte-1c8sozl, .nav__topbar.svelte-1c8sozl.svelte-1c8sozl {
688
+ .nav__sidebar.svelte-v0jihd.svelte-v0jihd, .nav__topbar.svelte-v0jihd.svelte-v0jihd {
534
689
  position: fixed;
535
690
  background-color: #211D28;
536
691
  top: 0;
@@ -540,12 +695,12 @@ input.svelte-1y0402x.svelte-1y0402x:focus {
540
695
  padding-top: 2em;
541
696
  margin: 0;
542
697
  border-right: none; }
543
- .nav__sidebar__item-container.svelte-1c8sozl.svelte-1c8sozl, .nav__topbar__item-container.svelte-1c8sozl.svelte-1c8sozl {
698
+ .nav__sidebar__item-container.svelte-v0jihd.svelte-v0jihd, .nav__topbar__item-container.svelte-v0jihd.svelte-v0jihd {
544
699
  padding: 0em;
545
700
  margin-top: 2rem; }
546
- .nav__sidebar.svelte-1c8sozl ul.svelte-1c8sozl, .nav__sidebar.svelte-1c8sozl li.svelte-1c8sozl, .nav__topbar.svelte-1c8sozl ul.svelte-1c8sozl, .nav__topbar.svelte-1c8sozl li.svelte-1c8sozl {
701
+ .nav__sidebar.svelte-v0jihd ul.svelte-v0jihd, .nav__sidebar.svelte-v0jihd li.svelte-v0jihd, .nav__topbar.svelte-v0jihd ul.svelte-v0jihd, .nav__topbar.svelte-v0jihd li.svelte-v0jihd {
547
702
  display: block; }
548
- .nav__sidebar__close.svelte-1c8sozl.svelte-1c8sozl, .nav__topbar__close.svelte-1c8sozl.svelte-1c8sozl {
703
+ .nav__sidebar__close.svelte-v0jihd.svelte-v0jihd, .nav__topbar__close.svelte-v0jihd.svelte-v0jihd {
549
704
  display: block;
550
705
  position: absolute;
551
706
  right: 0;
@@ -553,13 +708,37 @@ input.svelte-1y0402x.svelte-1y0402x:focus {
553
708
  background-color: transparent;
554
709
  border: none;
555
710
  color: #a9a29e; }
556
- .nav__sidebar.svelte-1c8sozl.svelte-1c8sozl {
711
+ .nav__sidebar.svelte-v0jihd.svelte-v0jihd {
557
712
  top: 0;
558
713
  left: 0; }
559
- .nav__sidebar__item.svelte-1c8sozl.svelte-1c8sozl:first-child {
714
+ .nav__sidebar__item.svelte-v0jihd.svelte-v0jihd:first-child {
560
715
  border-top: 1px solid #464452; }
561
- .nav__topbar.svelte-1c8sozl.svelte-1c8sozl {
716
+ .nav__topbar.svelte-v0jihd.svelte-v0jihd {
562
717
  height: 100%; }
563
- .nav__topbar__item.svelte-1c8sozl.svelte-1c8sozl {
718
+ .nav__topbar__item.svelte-v0jihd.svelte-v0jihd {
564
719
  padding: 2em;
565
720
  border-top: 1px solid #464452; } }
721
+
722
+ @use "colors";
723
+ @use "containers";
724
+ @use "fonts";
725
+ @use "forms";
726
+ @use "layouts";
727
+ .alert.svelte-itln7g {
728
+ min-height: 2em;
729
+ display: inline-flex;
730
+ align-items: center;
731
+ border-radius: 0.3em;
732
+ padding: 0 1em 0 1em;
733
+ font-size: 1.2em;
734
+ justify-content: center;
735
+ margin-bottom: 1em;
736
+ cursor: pointer; }
737
+
738
+ .alert--danger.svelte-itln7g {
739
+ background-color: rgba(255, 80, 77, 0.5);
740
+ border: 1px solid #ff504d; }
741
+
742
+ .alert--success.svelte-itln7g {
743
+ background-color: rgba(0, 214, 146, 0.5);
744
+ border: 1px solid #00D692; }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@iroco/ui",
3
- "version": "0.15.2",
3
+ "version": "0.17.0",
4
4
  "description": "Iroco design system based on Svelte",
5
5
  "main": "lib/index.js",
6
6
  "module": "lib/index.mjs",
@@ -62,6 +62,7 @@
62
62
  "husky": "^7.0.2",
63
63
  "jest": "^26.6.3",
64
64
  "lint-staged": "^11.1.2",
65
+ "node-sass": "^7.0.1",
65
66
  "npm-watch": "^0.10.0",
66
67
  "prettier": "^2.3.1",
67
68
  "prettier-plugin-svelte": "^2.3.0",
@@ -75,7 +76,6 @@
75
76
  "svelte-jester": "^1.7.0",
76
77
  "svelte-preprocess": "^4.7.3",
77
78
  "ts-jest": "^26.5.5",
78
- "node-sass": "^7.0.1",
79
79
  "typescript": "^4.3.3"
80
80
  },
81
81
  "peerDependencies": {
@@ -95,7 +95,8 @@
95
95
  "preprocess": true
96
96
  }
97
97
  ],
98
- "^.+\\.js$": "babel-jest"
98
+ "^.+\\.js$": "babel-jest",
99
+ "^.+\\.ts$": "ts-jest"
99
100
  },
100
101
  "testEnvironment": "jsdom",
101
102
  "moduleFileExtensions": [
package/scss/button.scss ADDED
@@ -0,0 +1,60 @@
1
+ @use '../scss/colors';
2
+ @use '../scss/fonts';
3
+ @use '../scss/containers';
4
+ @use '../scss/constants';
5
+
6
+ .iroco-ui-button {
7
+ cursor: pointer;
8
+ -webkit-touch-callout: none;
9
+ -webkit-user-select: none;
10
+ -khtml-user-select: none;
11
+ -moz-user-select: none;
12
+ -ms-user-select: none;
13
+ user-select: none;
14
+ border: none;
15
+ flex-shrink: 0;
16
+ margin: 1em 0em;
17
+ position: relative;
18
+ text-transform: uppercase;
19
+ border-radius: constants.$border-radius;
20
+
21
+ &--basic {
22
+ background: colors.$beige;
23
+ border: 1px solid colors.$nightBlue;
24
+ }
25
+ &--dark {
26
+ background: colors.$nightBlue;
27
+ color: colors.$beige;
28
+ }
29
+ &--success {
30
+ background: colors.$green;
31
+ }
32
+ &--danger {
33
+ background: colors.$red;
34
+ }
35
+ &--regular {
36
+ padding: 1em 2em;
37
+ }
38
+ &--small {
39
+ padding: 0.5em 1em;
40
+ }
41
+
42
+ &--basic:hover, &--success:hover, &--danger:hover {
43
+ box-shadow: inset 0 0 0 10em rgba(0, 0, 0, 0.2);
44
+ }
45
+ &--dark:hover {
46
+ box-shadow: inset 0 0 0 10em rgba(255, 255, 255, 0.2);
47
+ }
48
+
49
+ &:active {
50
+ box-shadow: none;
51
+ }
52
+
53
+ &.disabled {
54
+ background-color: colors.$lightGrey;
55
+ cursor: default;
56
+ &:hover {
57
+ box-shadow: none;
58
+ }
59
+ }
60
+ }
package/src/Button.svelte CHANGED
@@ -20,65 +20,5 @@
20
20
  </button>
21
21
 
22
22
  <style lang="scss">
23
- @use '../scss/colors';
24
- @use '../scss/fonts';
25
- @use '../scss/containers';
26
- @use '../scss/constants';
27
-
28
- .iroco-ui-button {
29
- cursor: pointer;
30
- -webkit-touch-callout: none;
31
- -webkit-user-select: none;
32
- -khtml-user-select: none;
33
- -moz-user-select: none;
34
- -ms-user-select: none;
35
- user-select: none;
36
- border: none;
37
- flex-shrink: 0;
38
- margin: 1em 0em;
39
- position: relative;
40
- text-transform: uppercase;
41
- border-radius: constants.$border-radius;
42
-
43
- &--basic {
44
- background: colors.$beige;
45
- border: 1px solid colors.$nightBlue;
46
- }
47
- &--dark {
48
- background: colors.$nightBlue;
49
- color: colors.$beige;
50
- }
51
- &--success {
52
- background: colors.$green;
53
- }
54
- &--danger {
55
- background: colors.$red;
56
- }
57
- &--regular {
58
- padding: 1em 2em;
59
- }
60
- &--small {
61
- padding: 0.5em 1em;
62
- }
63
-
64
- &--basic:hover, &--success:hover, &--danger:hover {
65
- box-shadow: inset 0 0 0 10em rgba(0, 0, 0, 0.2);
66
- }
67
- &--dark:hover {
68
- box-shadow: inset 0 0 0 10em rgba(255, 255, 255, 0.2);
69
- }
70
-
71
- &:active {
72
- box-shadow: none;
73
- }
74
-
75
- &.disabled {
76
- background-color: colors.$lightGrey;
77
- cursor: default;
78
- &:hover {
79
- box-shadow: none;
80
- }
81
- }
82
- }
83
-
23
+ @use '../scss/button';
84
24
  </style>