@policystudio/policy-studio-ui-vue 1.2.0-access.35 → 1.2.0-access.37

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.
@@ -1,4 +1,16 @@
1
1
  @import url("https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Round");
2
+ .psui-el-table-results.layout-results tbody tr td:first-child, .psui-el-table-results.layout-results thead tr th:first-child {
3
+ position: sticky;
4
+ left: 0px;
5
+ z-index: 10;
6
+ --tw-bg-opacity: 1;
7
+ background-color: rgb(255, 255, 255, var(--tw-bg-opacity, 1));
8
+ padding-left: 0px;
9
+ padding-right: 2rem;
10
+ text-align: left;
11
+ box-shadow: inset -1px 0px 0px #ebeef0;
12
+ }
13
+
2
14
  *, ::before, ::after {
3
15
  --tw-border-spacing-x: 0;
4
16
  --tw-border-spacing-y: 0;
@@ -568,31 +580,31 @@ video {
568
580
  --tw-shadow-colored: 0px 0px 8px var(--tw-shadow-color), 0px 2px 5px var(--tw-shadow-color);
569
581
  box-shadow: var(--tw-ring-offset-shadow, 0 0 rgba(0, 0, 0, 0)), var(--tw-ring-shadow, 0 0 rgba(0, 0, 0, 0)), var(--tw-shadow);
570
582
  }
571
- .psui-el-table-results.layout-results thead:after {
583
+ .psui-el-table-results.layout-results thead::after {
572
584
  content: "";
573
585
  }
574
- .psui-el-table-results.layout-results thead:after {
586
+ .psui-el-table-results.layout-results thead::after {
575
587
  position: absolute;
576
588
  }
577
- .psui-el-table-results.layout-results thead:after {
589
+ .psui-el-table-results.layout-results thead::after {
578
590
  top: 0px;
579
591
  }
580
- .psui-el-table-results.layout-results thead:after {
592
+ .psui-el-table-results.layout-results thead::after {
593
+ right: -8px;
594
+ }
595
+ .psui-el-table-results.layout-results thead::after {
581
596
  display: inline-block;
582
597
  }
583
- .psui-el-table-results.layout-results thead:after {
598
+ .psui-el-table-results.layout-results thead::after {
584
599
  height: 100%;
585
600
  }
586
- .psui-el-table-results.layout-results thead:after {
601
+ .psui-el-table-results.layout-results thead::after {
587
602
  width: 0.5rem;
588
603
  }
589
- .psui-el-table-results.layout-results thead:after {
604
+ .psui-el-table-results.layout-results thead::after {
590
605
  --tw-bg-opacity: 1;
591
606
  background-color: rgb(255, 255, 255, var(--tw-bg-opacity, 1));
592
607
  }
593
- .psui-el-table-results.layout-results thead:after {
594
- right: -8px;
595
- }
596
608
  .psui-el-table-results.layout-results thead tr .title {
597
609
  font-size: 14px;
598
610
  line-height: 20px;
@@ -600,9 +612,6 @@ video {
600
612
  .psui-el-table-results.layout-results thead tr .title {
601
613
  font-weight: 600;
602
614
  }
603
- .psui-el-table-results.layout-results thead tr .title {
604
- line-height: 1rem;
605
- }
606
615
  .psui-el-table-results.layout-results thead tr .title {
607
616
  --tw-text-opacity: 1;
608
617
  color: rgb(40, 50, 59, var(--tw-text-opacity, 1));
@@ -610,6 +619,10 @@ video {
610
619
  .psui-el-table-results.layout-results thead tr th {
611
620
  width: auto;
612
621
  }
622
+ .psui-el-table-results.layout-results thead tr th {
623
+ padding-top: 13px;
624
+ padding-bottom: 13px;
625
+ }
613
626
  .psui-el-table-results.layout-results thead tr th {
614
627
  padding-left: 1.5rem;
615
628
  }
@@ -623,10 +636,6 @@ video {
623
636
  --tw-text-opacity: 1;
624
637
  color: rgb(121, 132, 144, var(--tw-text-opacity, 1));
625
638
  }
626
- .psui-el-table-results.layout-results thead tr th {
627
- padding-top: 13px;
628
- padding-bottom: 13px;
629
- }
630
639
  .psui-el-table-results.layout-results thead tr th .description {
631
640
  font-size: 14px;
632
641
  line-height: 20px;
@@ -638,44 +647,18 @@ video {
638
647
  --tw-text-opacity: 1;
639
648
  color: rgb(81, 94, 106, var(--tw-text-opacity, 1));
640
649
  }
641
- .psui-el-table-results.layout-results thead tr th .description {
642
- line-height: 110%;
643
- }
644
- .psui-el-table-results.layout-results thead tr th:first-child {
645
- position: sticky;
646
- }
647
650
  .psui-el-table-results.layout-results thead tr th:first-child {
648
- left: 0px;
649
- }
650
- .psui-el-table-results.layout-results thead tr th:first-child {
651
- z-index: 10;
652
- }
653
- .psui-el-table-results.layout-results thead tr th:first-child {
654
- --tw-bg-opacity: 1;
655
- background-color: rgb(255, 255, 255, var(--tw-bg-opacity, 1));
656
- }
657
- .psui-el-table-results.layout-results thead tr th:first-child {
658
- padding-left: 0px;
659
- }
660
- .psui-el-table-results.layout-results thead tr th:first-child {
661
- padding-right: 2rem;
662
- }
663
- .psui-el-table-results.layout-results thead tr th:first-child {
664
- text-align: left;
665
- }
666
- .psui-el-table-results.layout-results thead tr th:first-child {
667
- box-shadow: inset -1px 0px 0px #ebeef0;
668
651
  min-width: 300px;
669
652
  }
670
653
  .psui-el-table-results.layout-results thead tr th:first-child > div {
671
654
  padding-left: 0px;
672
655
  }
673
656
  .psui-el-table-results.layout-results thead tr:first-of-type th {
674
- text-align: left;
657
+ padding-top: 0px;
658
+ padding-bottom: 0px;
675
659
  }
676
660
  .psui-el-table-results.layout-results thead tr:first-of-type th {
677
- padding-top: 0;
678
- padding-bottom: 0;
661
+ text-align: left;
679
662
  }
680
663
  .psui-el-table-results.layout-results thead tr:first-of-type th > div {
681
664
  display: flex;
@@ -694,39 +677,45 @@ video {
694
677
  padding-top: 0.688rem;
695
678
  padding-bottom: 0.688rem;
696
679
  }
697
- .psui-el-table-results.layout-results thead tr:first-of-type p {
698
- font-size: 16px;
699
- line-height: 24px;
700
- }
701
- .psui-el-table-results.layout-results thead tr:first-of-type p {
702
- line-height: 18px;
680
+ .psui-el-table-results.layout-results thead tr:first-of-type th > div {
681
+ padding-left: 0px;
682
+ padding-right: 0px;
703
683
  }
704
684
  .psui-el-table-results.layout-results tbody tr {
705
685
  border-bottom-width: 1px;
706
- }
707
- .psui-el-table-results.layout-results tbody tr {
708
686
  --tw-border-opacity: 1;
709
687
  border-color: rgb(230, 236, 242, var(--tw-border-opacity, 1));
710
688
  }
711
- .psui-el-table-results.layout-results tbody tr.is-first .title {
712
- font-weight: 700;
713
- }
714
- .psui-el-table-results.layout-results tbody tr.is-first .title {
715
- --tw-text-opacity: 1;
716
- color: rgb(40, 50, 59, var(--tw-text-opacity, 1));
717
- }
718
689
  .psui-el-table-results.layout-results tbody tr .title {
719
690
  display: flex;
720
691
  }
721
692
  .psui-el-table-results.layout-results tbody tr .title {
722
693
  align-items: center;
723
694
  }
695
+ .psui-el-table-results.layout-results tbody tr .title {
696
+ font-size: 14px;
697
+ line-height: 20px;
698
+ }
724
699
  .psui-el-table-results.layout-results tbody tr .title {
725
700
  line-height: 24px;
726
701
  }
702
+ .psui-el-table-results.layout-results tbody tr.is-first .title {
703
+ font-weight: 700;
704
+ }
705
+ .psui-el-table-results.layout-results tbody tr.is-first .title {
706
+ --tw-text-opacity: 1;
707
+ color: rgb(40, 50, 59, var(--tw-text-opacity, 1));
708
+ }
727
709
  .psui-el-table-results.layout-results tbody tr td {
728
710
  height: 2.5rem;
729
711
  }
712
+ .psui-el-table-results.layout-results tbody tr td {
713
+ min-height: 41.5px;
714
+ }
715
+ .psui-el-table-results.layout-results tbody tr td {
716
+ padding-top: 0.688rem;
717
+ padding-bottom: 0.688rem;
718
+ }
730
719
  .psui-el-table-results.layout-results tbody tr td {
731
720
  padding-left: 2rem;
732
721
  }
@@ -741,17 +730,22 @@ video {
741
730
  --tw-text-opacity: 1;
742
731
  color: rgb(40, 50, 59, var(--tw-text-opacity, 1));
743
732
  }
744
- .psui-el-table-results.layout-results tbody tr td {
745
- padding-top: 0.688rem;
746
- padding-bottom: 0.688rem;
747
- min-height: 41.5px;
748
- }
749
733
  .psui-el-table-results.layout-results tbody tr td > div {
750
734
  display: flex;
751
735
  }
752
736
  .psui-el-table-results.layout-results tbody tr td > div {
753
737
  align-items: center;
754
738
  }
739
+ .psui-el-table-results.layout-results tbody tr td:not(:first-child) > div {
740
+ justify-content: flex-end;
741
+ }
742
+ .psui-el-table-results.layout-results tbody tr td:first-child {
743
+ display: block;
744
+ }
745
+ .psui-el-table-results.layout-results tbody tr td:first-child {
746
+ padding-top: 0.5rem;
747
+ padding-bottom: 0.5rem;
748
+ }
755
749
  .psui-el-table-results.layout-results tbody tr td .actions {
756
750
  position: relative;
757
751
  }
@@ -773,39 +767,6 @@ video {
773
767
  .psui-el-table-results.layout-results tbody tr td .actions .is-last-deep {
774
768
  padding-left: 2.5rem;
775
769
  }
776
- .psui-el-table-results.layout-results tbody tr td:not(:first-child) > div {
777
- justify-content: flex-end;
778
- }
779
- .psui-el-table-results.layout-results tbody tr td:first-child {
780
- position: sticky;
781
- }
782
- .psui-el-table-results.layout-results tbody tr td:first-child {
783
- left: 0px;
784
- }
785
- .psui-el-table-results.layout-results tbody tr td:first-child {
786
- z-index: 10;
787
- }
788
- .psui-el-table-results.layout-results tbody tr td:first-child {
789
- display: block;
790
- }
791
- .psui-el-table-results.layout-results tbody tr td:first-child {
792
- --tw-bg-opacity: 1;
793
- background-color: rgb(255, 255, 255, var(--tw-bg-opacity, 1));
794
- }
795
- .psui-el-table-results.layout-results tbody tr td:first-child {
796
- padding-left: 0px;
797
- }
798
- .psui-el-table-results.layout-results tbody tr td:first-child {
799
- padding-right: 2rem;
800
- }
801
- .psui-el-table-results.layout-results tbody tr td:first-child {
802
- text-align: left;
803
- }
804
- .psui-el-table-results.layout-results tbody tr td:first-child {
805
- box-shadow: inset -1px 0px 0px #ebeef0;
806
- padding-top: 8px;
807
- padding-bottom: 8px;
808
- }
809
770
  .psui-el-table-results.layout-results tbody tr.is-active {
810
771
  --tw-bg-opacity: 1;
811
772
  background-color: rgb(243, 246, 249, var(--tw-bg-opacity, 1));
@@ -3510,13 +3471,24 @@ video {
3510
3471
  color: rgb(81, 94, 106, var(--tw-text-opacity, 1));
3511
3472
  }
3512
3473
  .psui-el-checkbox:focus {
3513
- outline: none;
3474
+ outline: 2px solid transparent;
3475
+ outline-offset: 2px;
3514
3476
  }
3515
3477
  .psui-el-checkbox:focus-visible {
3516
- outline: 2px solid #2563EB;
3517
- outline-offset: 2px;
3518
3478
  border-radius: 6px;
3519
3479
  }
3480
+ .psui-el-checkbox:focus-visible {
3481
+ outline-style: solid;
3482
+ }
3483
+ .psui-el-checkbox:focus-visible {
3484
+ outline-width: 2px;
3485
+ }
3486
+ .psui-el-checkbox:focus-visible {
3487
+ outline-offset: 2px;
3488
+ }
3489
+ .psui-el-checkbox:focus-visible {
3490
+ outline-color: #2563EB;
3491
+ }
3520
3492
  .psui-el-checkbox.disabled .psui-el-checkmark {
3521
3493
  cursor: default !important;
3522
3494
  }
@@ -3526,20 +3498,26 @@ video {
3526
3498
  }
3527
3499
  .psui-el-checkbox.disabled .psui-el-checkmark::before {
3528
3500
  --tw-text-opacity: 1 !important;
3529
- color: rgb(214, 221, 229, var(--tw-text-opacity, 1)) !important;
3501
+ color: rgb(162, 172, 183, var(--tw-text-opacity, 1)) !important;
3530
3502
  }
3531
3503
  .psui-el-checkbox.size-small {
3532
3504
  font-size: 14px;
3533
3505
  line-height: 20px;
3534
3506
  }
3535
3507
  .psui-el-checkbox.size-small.layout-default input:checked ~ .psui-el-checkmark::before {
3536
- content: "check_box";
3537
3508
  font-family: "Material Icons Round";
3538
3509
  }
3510
+ .psui-el-checkbox.size-small.layout-default input:checked ~ .psui-el-checkmark::before {
3511
+ --tw-content: "check_box";
3512
+ content: var(--tw-content);
3513
+ }
3539
3514
  .psui-el-checkbox.size-small.layout-mixed input:checked ~ .psui-el-checkmark::before {
3540
- content: "indeterminate_check_box";
3541
3515
  font-family: "Material Icons Round";
3542
3516
  }
3517
+ .psui-el-checkbox.size-small.layout-mixed input:checked ~ .psui-el-checkmark::before {
3518
+ --tw-content: "indeterminate_check_box";
3519
+ content: var(--tw-content);
3520
+ }
3543
3521
  .psui-el-checkbox.size-small input {
3544
3522
  position: absolute;
3545
3523
  }
@@ -3553,50 +3531,59 @@ video {
3553
3531
  opacity: 0;
3554
3532
  }
3555
3533
  .psui-el-checkbox.size-small input:checked ~ .psui-el-checkmark::before {
3556
- --tw-text-opacity: 1;
3557
- color: rgb(45, 165, 204, var(--tw-text-opacity, 1));
3534
+ font-size: 18px;
3558
3535
  }
3559
3536
  .psui-el-checkbox.size-small input:checked ~ .psui-el-checkmark::before {
3560
- font-size: 18px;
3537
+ --tw-text-opacity: 1;
3538
+ color: rgb(18, 121, 153, var(--tw-text-opacity, 1));
3561
3539
  }
3562
3540
  .psui-el-checkbox.size-small .psui-el-checkmark {
3563
3541
  display: flex;
3564
3542
  }
3565
3543
  .psui-el-checkbox.size-small .psui-el-checkmark {
3566
- cursor: pointer;
3544
+ min-height: 18px;
3567
3545
  }
3568
3546
  .psui-el-checkbox.size-small .psui-el-checkmark {
3569
- align-items: center;
3547
+ cursor: pointer;
3570
3548
  }
3571
3549
  .psui-el-checkbox.size-small .psui-el-checkmark {
3572
- min-height: 18px;
3550
+ align-items: center;
3573
3551
  }
3574
3552
  .psui-el-checkbox.size-small .psui-el-checkmark span {
3575
3553
  margin-left: 8px;
3576
3554
  }
3577
3555
  .psui-el-checkbox.size-small .psui-el-checkmark::before {
3578
- content: "check_box_outline_blank";
3556
+ font-family: "Material Icons Round";
3557
+ }
3558
+ .psui-el-checkbox.size-small .psui-el-checkmark::before {
3559
+ font-size: 18px;
3579
3560
  }
3580
3561
  .psui-el-checkbox.size-small .psui-el-checkmark::before {
3581
3562
  --tw-text-opacity: 1;
3582
- color: rgb(162, 172, 183, var(--tw-text-opacity, 1));
3563
+ color: rgb(81, 94, 106, var(--tw-text-opacity, 1));
3583
3564
  }
3584
3565
  .psui-el-checkbox.size-small .psui-el-checkmark::before {
3585
- font-family: "Material Icons Round";
3586
- font-size: 18px;
3566
+ --tw-content: "check_box_outline_blank";
3567
+ content: var(--tw-content);
3587
3568
  }
3588
3569
  .psui-el-checkbox.size-big {
3589
3570
  font-size: 16px;
3590
3571
  line-height: 24px;
3591
3572
  }
3592
3573
  .psui-el-checkbox.size-big.layout-mixed input:checked ~ .psui-el-checkmark::before {
3593
- content: "indeterminate_check_box";
3594
3574
  font-family: "Material Icons Round";
3595
3575
  }
3576
+ .psui-el-checkbox.size-big.layout-mixed input:checked ~ .psui-el-checkmark::before {
3577
+ --tw-content: "indeterminate_check_box";
3578
+ content: var(--tw-content);
3579
+ }
3596
3580
  .psui-el-checkbox.size-big.layout-default input:checked ~ .psui-el-checkmark::before {
3597
- content: "check_box";
3598
3581
  font-family: "Material Icons Round";
3599
3582
  }
3583
+ .psui-el-checkbox.size-big.layout-default input:checked ~ .psui-el-checkmark::before {
3584
+ --tw-content: "check_box";
3585
+ content: var(--tw-content);
3586
+ }
3600
3587
  .psui-el-checkbox.size-big input {
3601
3588
  position: absolute;
3602
3589
  }
@@ -3609,42 +3596,45 @@ video {
3609
3596
  .psui-el-checkbox.size-big input {
3610
3597
  opacity: 0;
3611
3598
  }
3612
- .psui-el-checkbox.size-big input:checked ~ .psui-el-checkmark:before {
3613
- --tw-text-opacity: 1;
3614
- color: rgb(45, 165, 204, var(--tw-text-opacity, 1));
3615
- }
3616
- .psui-el-checkbox.size-big input:checked ~ .psui-el-checkmark:before {
3599
+ .psui-el-checkbox.size-big input:checked ~ .psui-el-checkmark::before {
3617
3600
  font-size: 24px;
3618
3601
  }
3602
+ .psui-el-checkbox.size-big input:checked ~ .psui-el-checkmark::before {
3603
+ --tw-text-opacity: 1;
3604
+ color: rgb(18, 121, 153, var(--tw-text-opacity, 1));
3605
+ }
3619
3606
  .psui-el-checkbox.size-big .psui-el-checkmark {
3620
3607
  display: flex;
3621
3608
  }
3622
3609
  .psui-el-checkbox.size-big .psui-el-checkmark {
3623
- cursor: pointer;
3610
+ min-height: 24px;
3624
3611
  }
3625
3612
  .psui-el-checkbox.size-big .psui-el-checkmark {
3626
- align-items: center;
3613
+ cursor: pointer;
3627
3614
  }
3628
3615
  .psui-el-checkbox.size-big .psui-el-checkmark {
3629
- min-height: 24px;
3616
+ align-items: center;
3630
3617
  }
3631
3618
  .psui-el-checkbox.size-big .psui-el-checkmark span {
3632
3619
  margin-left: 8px;
3633
3620
  }
3634
- .psui-el-checkbox.size-big .psui-el-checkmark:before {
3635
- content: "check_box_outline_blank";
3636
- }
3637
- .psui-el-checkbox.size-big .psui-el-checkmark:before {
3621
+ .psui-el-checkbox.size-big .psui-el-checkmark::before {
3638
3622
  vertical-align: text-bottom;
3639
3623
  }
3640
- .psui-el-checkbox.size-big .psui-el-checkmark:before {
3641
- --tw-text-opacity: 1;
3642
- color: rgb(162, 172, 183, var(--tw-text-opacity, 1));
3643
- }
3644
- .psui-el-checkbox.size-big .psui-el-checkmark:before {
3624
+ .psui-el-checkbox.size-big .psui-el-checkmark::before {
3645
3625
  font-family: "Material Icons Round";
3626
+ }
3627
+ .psui-el-checkbox.size-big .psui-el-checkmark::before {
3646
3628
  font-size: 24px;
3647
3629
  }
3630
+ .psui-el-checkbox.size-big .psui-el-checkmark::before {
3631
+ --tw-text-opacity: 1;
3632
+ color: rgb(81, 94, 106, var(--tw-text-opacity, 1));
3633
+ }
3634
+ .psui-el-checkbox.size-big .psui-el-checkmark::before {
3635
+ --tw-content: "check_box_outline_blank";
3636
+ content: var(--tw-content);
3637
+ }
3648
3638
 
3649
3639
  .psui-el-dialog {
3650
3640
  display: flex;
@@ -5940,9 +5930,6 @@ video {
5940
5930
  .psui-el-draggable .psui-el-draggable-wrapper {
5941
5931
  padding: 0.5rem;
5942
5932
  }
5943
- .psui-el-draggable .psui-el-draggable-wrapper {
5944
- padding: 8px;
5945
- }
5946
5933
  .psui-el-draggable .psui-el-draggable-wrapper-title {
5947
5934
  margin-bottom: 0.5rem;
5948
5935
  }
@@ -5965,7 +5952,12 @@ video {
5965
5952
  border-radius: 0.125rem;
5966
5953
  }
5967
5954
  .psui-el-draggable .psui-el-draggable-wrapper-title {
5968
- padding: 8px 16px;
5955
+ padding-top: 0.5rem;
5956
+ padding-bottom: 0.5rem;
5957
+ }
5958
+ .psui-el-draggable .psui-el-draggable-wrapper-title {
5959
+ padding-left: 1rem;
5960
+ padding-right: 1rem;
5969
5961
  }
5970
5962
  .psui-el-draggable .psui-el-draggable-wrapper-title p {
5971
5963
  font-size: 12px;
@@ -5982,16 +5974,13 @@ video {
5982
5974
  --tw-text-opacity: 1;
5983
5975
  color: rgb(40, 50, 59, var(--tw-text-opacity, 1));
5984
5976
  }
5985
- .psui-el-draggable .psui-el-draggable-wrapper-title p {
5986
- letter-spacing: 0.6px;
5977
+ .psui-el-draggable .psui-el-draggable-wrapper-title i {
5978
+ font-size: 18px;
5987
5979
  }
5988
5980
  .psui-el-draggable .psui-el-draggable-wrapper-title i {
5989
5981
  --tw-text-opacity: 1;
5990
5982
  color: rgb(162, 172, 183, var(--tw-text-opacity, 1));
5991
5983
  }
5992
- .psui-el-draggable .psui-el-draggable-wrapper-title i {
5993
- font-size: 18px;
5994
- }
5995
5984
  .psui-el-draggable .psui-el-draggable-wrapper-title:hover .psui-el-draggable-wrapper-title-icon {
5996
5985
  visibility: visible;
5997
5986
  }
@@ -6029,14 +6018,19 @@ video {
6029
6018
  --tw-bg-opacity: 1;
6030
6019
  background-color: rgb(255, 255, 255, var(--tw-bg-opacity, 1));
6031
6020
  }
6021
+ .psui-el-draggable .psui-el-draggable-item {
6022
+ padding-top: 7px;
6023
+ padding-bottom: 7px;
6024
+ }
6025
+ .psui-el-draggable .psui-el-draggable-item {
6026
+ padding-left: 1rem;
6027
+ padding-right: 1rem;
6028
+ }
6032
6029
  .psui-el-draggable .psui-el-draggable-item {
6033
6030
  --tw-shadow: 0px 0px 4px rgba(0, 0, 0, 0.03), 0px 1px 2px rgba(0, 0, 0, 0.1);
6034
6031
  --tw-shadow-colored: 0px 0px 4px var(--tw-shadow-color), 0px 1px 2px var(--tw-shadow-color);
6035
6032
  box-shadow: var(--tw-ring-offset-shadow, 0 0 rgba(0, 0, 0, 0)), var(--tw-ring-shadow, 0 0 rgba(0, 0, 0, 0)), var(--tw-shadow);
6036
6033
  }
6037
- .psui-el-draggable .psui-el-draggable-item {
6038
- padding: 7px 16px;
6039
- }
6040
6034
  .psui-el-draggable .psui-el-draggable-item-title {
6041
6035
  display: flex;
6042
6036
  }
@@ -6049,25 +6043,26 @@ video {
6049
6043
  }
6050
6044
  .psui-el-draggable .psui-el-draggable-item-title {
6051
6045
  --tw-text-opacity: 1;
6052
- color: rgb(121, 132, 144, var(--tw-text-opacity, 1));
6046
+ color: rgb(81, 94, 106, var(--tw-text-opacity, 1));
6053
6047
  }
6054
6048
  .psui-el-draggable .psui-el-draggable-item-title .psui-el-checkbox {
6055
6049
  --tw-text-opacity: 1;
6056
- color: rgb(121, 132, 144, var(--tw-text-opacity, 1));
6050
+ color: rgb(81, 94, 106, var(--tw-text-opacity, 1));
6057
6051
  }
6058
- .psui-el-draggable .psui-el-draggable-item-title .psui-el-checkbox .psui-el-checkmark:before {
6052
+ .psui-el-draggable .psui-el-draggable-item-title .psui-el-checkbox .psui-el-checkmark::before {
6059
6053
  margin-right: 0.25rem;
6060
6054
  }
6061
- .psui-el-draggable .psui-el-draggable-item-title .psui-el-checkbox .psui-el-checkmark:before {
6055
+ .psui-el-draggable .psui-el-draggable-item-title .psui-el-checkbox .psui-el-checkmark::before {
6062
6056
  --tw-text-opacity: 1;
6063
- color: rgb(214, 221, 229, var(--tw-text-opacity, 1));
6057
+ color: rgb(81, 94, 106, var(--tw-text-opacity, 1));
6064
6058
  }
6065
6059
  .psui-el-draggable .psui-el-draggable-item-title .psui-el-checkbox.active {
6066
6060
  --tw-text-opacity: 1;
6067
- color: rgb(81, 94, 106, var(--tw-text-opacity, 1));
6061
+ color: rgb(40, 50, 59, var(--tw-text-opacity, 1));
6068
6062
  }
6069
6063
  .psui-el-draggable .psui-el-draggable-item-title .psui-el-checkbox.disabled .psui-el-checkmark {
6070
- color: #798490 !important;
6064
+ --tw-text-opacity: 1 !important;
6065
+ color: rgb(81, 94, 106, var(--tw-text-opacity, 1)) !important;
6071
6066
  }
6072
6067
  .psui-el-draggable .psui-el-draggable-item-title:hover .psui-el-draggable-item-title-icon {
6073
6068
  visibility: visible;
@@ -6097,18 +6092,20 @@ video {
6097
6092
  .psui-el-draggable .psui-el-draggable-item .psui-el-checkbox.size-small .psui-el-checkmark span {
6098
6093
  font-weight: 700;
6099
6094
  }
6100
- .psui-el-draggable .psui-el-draggable-item .psui-el-checkbox.size-small .psui-el-checkmark:before {
6095
+ .psui-el-draggable .psui-el-draggable-item .psui-el-checkbox.size-small .psui-el-checkmark::before {
6101
6096
  display: flex;
6102
6097
  }
6103
- .psui-el-draggable .psui-el-draggable-item .psui-el-checkbox.size-small .psui-el-checkmark:before {
6098
+ .psui-el-draggable .psui-el-draggable-item .psui-el-checkbox.size-small .psui-el-checkmark::before {
6099
+ min-height: 24px;
6100
+ }
6101
+ .psui-el-draggable .psui-el-draggable-item .psui-el-checkbox.size-small .psui-el-checkmark::before {
6104
6102
  align-items: center;
6105
6103
  }
6106
- .psui-el-draggable .psui-el-draggable-item .psui-el-checkbox.size-small .psui-el-checkmark:before {
6104
+ .psui-el-draggable .psui-el-draggable-item .psui-el-checkbox.size-small .psui-el-checkmark::before {
6107
6105
  justify-content: center;
6108
6106
  }
6109
- .psui-el-draggable .psui-el-draggable-item .psui-el-checkbox.size-small .psui-el-checkmark:before {
6107
+ .psui-el-draggable .psui-el-draggable-item .psui-el-checkbox.size-small .psui-el-checkmark::before {
6110
6108
  font-size: 24px;
6111
- min-height: 24px;
6112
6109
  }
6113
6110
 
6114
6111
  .psui-el-badge-with-icon {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@policystudio/policy-studio-ui-vue",
3
- "version": "1.2.0-access.35",
3
+ "version": "1.2.0-access.37",
4
4
  "description": "Policy Studio UI",
5
5
  "author": "Policy Studio Team",
6
6
  "scripts": {
@@ -1,107 +1,95 @@
1
1
  @layer components {
2
-
3
2
  .psui-el-checkbox {
4
- @apply psui-relative psui-text-gray-60;
5
-
3
+ @apply psui-relative psui-text-gray-60;
4
+
6
5
  &:focus {
7
- outline: none;
8
- }
6
+ @apply psui-outline-none;
7
+ }
9
8
 
10
9
  &:focus-visible {
11
- outline: 2px solid #2563EB;
12
- outline-offset: 2px;
13
- border-radius: 6px;
14
- }
10
+ @apply psui-outline psui-outline-2 psui-outline-focus-ring psui-outline-offset-2 psui-rounded-[6px];
11
+ }
15
12
 
16
13
  &.disabled {
17
14
  .psui-el-checkmark {
18
- @apply psui-cursor-default psui-text-gray-40 !important
15
+ @apply psui-cursor-default psui-text-gray-40 !important;
19
16
  }
20
17
 
21
18
  .psui-el-checkmark::before {
22
- @apply psui-text-gray-30 !important
19
+ @apply psui-text-gray-40 !important;
23
20
  }
24
21
  }
25
22
 
26
23
  &.size-small {
27
24
  @apply psui-text-14;
28
-
25
+
29
26
  &.layout-default {
30
- input:checked ~.psui-el-checkmark::before {
31
- content: 'check_box';
32
- font-family: 'Material Icons Round';
27
+ input:checked ~ .psui-el-checkmark::before {
28
+ @apply psui-content-['check\_box'] psui-font-['Material_Icons_Round'];
33
29
  }
34
30
  }
35
-
31
+
36
32
  &.layout-mixed {
37
- input:checked ~.psui-el-checkmark::before {
38
- content: 'indeterminate_check_box';
39
- font-family: 'Material Icons Round';
33
+ input:checked ~ .psui-el-checkmark::before {
34
+ @apply psui-content-['indeterminate\_check\_box'] psui-font-['Material_Icons_Round'];
40
35
  }
41
36
  }
37
+
42
38
  input {
43
39
  @apply psui-absolute psui-opacity-0 psui-h-0 psui-w-0;
44
40
 
45
41
  &:checked ~ .psui-el-checkmark::before {
46
- @apply psui-text-blue-50;
47
- font-size: 18px;
42
+ @apply psui-text-blue-60 psui-text-[18px];
48
43
  }
49
44
  }
45
+
50
46
  .psui-el-checkmark {
51
- @apply psui-flex psui-cursor-pointer psui-items-center;
52
- min-height: 18px;
47
+ @apply psui-flex psui-cursor-pointer psui-items-center psui-min-h-[18px];
53
48
 
54
49
  span {
55
- margin-left: 8px;
50
+ @apply psui-ml-[8px];
56
51
  }
57
52
 
58
53
  &::before {
59
- content:'check_box_outline_blank';
60
- @apply psui-text-gray-40;
61
- font-family:'Material Icons Round';
62
- font-size: 18px;
54
+ @apply psui-content-['check\_box\_outline\_blank'] psui-text-gray-60 psui-font-['Material_Icons_Round'] psui-text-[18px];
63
55
  }
64
- }
56
+ }
65
57
  }
66
58
 
67
59
  &.size-big {
68
60
  @apply psui-text-16;
69
61
 
70
62
  &.layout-mixed {
71
- input:checked ~.psui-el-checkmark::before {
72
- content: 'indeterminate_check_box';
73
- font-family: 'Material Icons Round';
63
+ input:checked ~ .psui-el-checkmark::before {
64
+ @apply psui-content-['indeterminate\_check\_box'] psui-font-['Material_Icons_Round'];
74
65
  }
75
66
  }
67
+
76
68
  &.layout-default {
77
- input:checked ~.psui-el-checkmark::before {
78
- content: 'check_box';
79
- font-family: 'Material Icons Round';
69
+ input:checked ~ .psui-el-checkmark::before {
70
+ @apply psui-content-['check\_box'] psui-font-['Material_Icons_Round'];
80
71
  }
81
72
  }
73
+
82
74
  input {
83
75
  @apply psui-absolute psui-opacity-0 psui-h-0 psui-w-0;
84
76
 
85
- &:checked ~ .psui-el-checkmark:before {
86
- @apply psui-text-blue-50;
87
- font-size: 24px;
77
+ &:checked ~ .psui-el-checkmark::before {
78
+ @apply psui-text-blue-60 psui-text-[24px];
88
79
  }
89
80
  }
81
+
90
82
  .psui-el-checkmark {
91
- @apply psui-flex psui-cursor-pointer psui-items-center;
92
- min-height: 24px;
93
-
83
+ @apply psui-flex psui-cursor-pointer psui-items-center psui-min-h-[24px];
84
+
94
85
  span {
95
- margin-left: 8px;
86
+ @apply psui-ml-[8px];
96
87
  }
97
88
 
98
- &:before {
99
- content:'check_box_outline_blank';
100
- @apply psui-text-gray-40 psui-align-text-bottom;
101
- font-family:'Material Icons Round';
102
- font-size: 24px;
89
+ &::before {
90
+ @apply psui-content-['check\_box\_outline\_blank'] psui-text-gray-60 psui-align-text-bottom psui-font-['Material_Icons_Round'] psui-text-[24px];
103
91
  }
104
92
  }
105
93
  }
106
94
  }
107
- }
95
+ }
@@ -4,32 +4,27 @@
4
4
 
5
5
  .psui-el-draggable-wrapper {
6
6
  @apply psui-w-full psui-rounded-md psui-bg-gray-20 psui-p-2 psui-flex psui-items-center psui-flex-col;
7
- padding: 8px;
8
7
 
9
8
  &-title {
10
- @apply psui-w-full psui-flex psui-rounded-sm psui-items-center psui-justify-between psui-cursor-grab psui-mb-2;
11
- padding: 8px 16px;
12
-
9
+ @apply psui-w-full psui-flex psui-rounded-sm psui-items-center psui-justify-between psui-cursor-grab psui-mb-2 psui-py-2 psui-px-4;
10
+
13
11
  p {
14
12
  @apply psui-text-accentSmall psui-text-gray-80 psui-font-bold psui-uppercase;
15
- letter-spacing: 0.6px;
16
13
  }
17
-
14
+
18
15
  i {
19
- @apply psui-text-gray-40;
20
- font-size: 18px;
16
+ @apply psui-text-gray-40 psui-text-[18px];
21
17
  }
22
18
 
23
- &:hover{
19
+ &:hover {
24
20
  .psui-el-draggable-wrapper-title-icon {
25
- visibility: visible;
21
+ @apply psui-visible;
26
22
  }
27
23
  }
28
24
 
29
- &-icon{
30
- visibility: hidden;
25
+ &-icon {
26
+ @apply psui-invisible;
31
27
  }
32
-
33
28
  }
34
29
 
35
30
  &-list {
@@ -38,39 +33,39 @@
38
33
  }
39
34
 
40
35
  .psui-el-draggable-item {
41
- @apply psui-w-full psui-flex psui-rounded-sm psui-bg-white psui-items-center psui-cursor-grab psui-shadow-elevation-5;
42
- padding: 7px 16px;
36
+ @apply psui-w-full psui-flex psui-rounded-sm psui-bg-white psui-items-center psui-cursor-grab psui-shadow-elevation-5 psui-py-[7px] psui-px-4;
43
37
 
44
38
  &-title {
45
- @apply psui-text-gray-50 psui-text-14 psui-flex psui-items-center;
39
+ @apply psui-text-gray-60 psui-text-14 psui-flex psui-items-center;
46
40
 
47
41
  .psui-el-checkbox {
48
- @apply psui-text-gray-50;
42
+ @apply psui-text-gray-60;
49
43
 
50
44
  .psui-el-checkmark {
51
- &:before {
52
- @apply psui-mr-1 psui-text-gray-30;
45
+ &::before {
46
+ @apply psui-mr-1 psui-text-gray-60;
53
47
  }
54
48
  }
55
49
 
56
50
  &.active {
57
- @apply psui-text-gray-60;
51
+ @apply psui-text-gray-80;
58
52
  }
59
53
 
60
54
  &.disabled {
61
55
  .psui-el-checkmark {
62
- color: #798490 !important;
56
+ @apply !psui-text-gray-60;
63
57
  }
64
58
  }
65
59
  }
66
- &:hover{
60
+
61
+ &:hover {
67
62
  .psui-el-draggable-item-title-icon {
68
- visibility: visible;
63
+ @apply psui-visible;
69
64
  }
70
65
  }
71
66
 
72
- &-icon{
73
- visibility: hidden;
67
+ &-icon {
68
+ @apply psui-invisible;
74
69
  }
75
70
  }
76
71
 
@@ -78,19 +73,17 @@
78
73
  @apply psui-flex psui-text-gray-30 psui-ml-auto;
79
74
 
80
75
  i {
81
- font-size: 18px;
76
+ @apply psui-text-[18px];
82
77
  }
83
78
  }
84
79
 
85
80
  &:active,
86
81
  &.on-dragging {
87
- cursor: -webkit-grabbing;
88
- cursor: -moz-grabbing;
89
- cursor: grabbing;
82
+ @apply psui-cursor-grabbing;
90
83
  }
91
84
 
92
85
  &.on-drag-over {
93
- opacity: 0.2;
86
+ @apply psui-opacity-20;
94
87
  }
95
88
 
96
89
  .psui-el-checkbox.size-small {
@@ -98,13 +91,12 @@
98
91
  span {
99
92
  @apply psui-font-bold;
100
93
  }
101
- &:before {
102
- @apply psui-flex psui-items-center psui-justify-center;
103
- font-size: 24px;
104
- min-height: 24px;
94
+
95
+ &::before {
96
+ @apply psui-flex psui-items-center psui-justify-center psui-text-[24px] psui-min-h-[24px];
105
97
  }
106
98
  }
107
99
  }
108
100
  }
109
101
  }
110
- }
102
+ }
@@ -1,126 +1,101 @@
1
+ %sticky-first-column {
2
+ @apply psui-pl-0 psui-pr-8 psui-text-left psui-bg-white psui-sticky psui-z-10 psui-left-0;
3
+ box-shadow: inset -1px 0px 0px #ebeef0;
4
+ }
5
+
1
6
  @mixin renderResults {
2
- tr {
3
- th,
4
- td {
5
- &:last-child {
6
- @apply psui-pr-2;
7
- }
8
- }
7
+ tr th:last-child,
8
+ tr td:last-child {
9
+ @apply psui-pr-2;
9
10
  }
10
11
 
11
12
  thead {
12
13
  @apply psui-bg-white psui-items-start psui-shadow-elevation-10 psui-sticky psui-top-0 psui-z-15;
13
14
 
14
- &:after {
15
- content: "";
16
- @apply psui-inline-block psui-absolute psui-top-0 psui-w-2 psui-h-full psui-bg-white;
17
- right: -8px;
15
+ &::after {
16
+ content: '';
17
+ @apply psui-inline-block psui-absolute psui-top-0 psui-w-2 psui-h-full psui-bg-white psui-right-[-8px];
18
18
  }
19
19
 
20
20
  tr {
21
21
  .title {
22
- @apply psui-text-14 psui-font-semibold psui-leading-4 psui-text-gray-80;
22
+ @apply psui-text-14 psui-font-semibold psui-text-gray-80;
23
23
  }
24
24
 
25
25
  th {
26
- @apply psui-pl-6 psui-text-gray-50 psui-text-right psui-w-auto psui-align-top;
27
- padding-top: 13px;
28
- padding-bottom: 13px;
26
+ @apply psui-pl-6 psui-text-gray-50 psui-text-right psui-w-auto psui-align-top psui-py-[13px];
29
27
 
30
28
  .description {
31
29
  @apply psui-text-14 psui-text-gray-60 psui-font-normal;
32
- line-height: 110%;
33
30
  }
34
31
 
35
32
  &:first-child {
36
- @apply psui-pl-0 psui-pr-8 psui-text-left psui-bg-white psui-sticky psui-z-10 psui-left-0;
37
- box-shadow: inset -1px 0px 0px #ebeef0;
38
- min-width: 300px;
33
+ @extend %sticky-first-column;
34
+ @apply psui-min-w-[300px];
39
35
 
40
36
  > div {
41
37
  @apply psui-pl-0;
42
38
  }
43
39
  }
44
40
  }
41
+ }
45
42
 
46
- &:first-of-type {
47
- th {
48
- @apply psui-text-left;
49
- padding-top: 0;
50
- padding-bottom: 0;
51
-
52
- > div {
53
- @apply psui-flex psui-flex-row psui-border-b psui-border-gray-30;
54
- padding-top: 0.688rem;
55
- padding-bottom: 0.688rem;
56
- }
57
- }
43
+ tr:first-of-type {
44
+ th {
45
+ @apply psui-text-left psui-py-0;
58
46
 
59
- p {
60
- @apply psui-text-16;
61
- line-height: 18px;
47
+ > div {
48
+ @apply psui-flex psui-flex-row psui-border-b psui-border-gray-30 psui-py-[0.688rem] psui-px-0;
62
49
  }
63
50
  }
64
51
  }
65
52
  }
66
53
 
67
- tbody {
68
- tr {
69
- @apply psui-border-b psui-border-gray-20;
54
+ tbody tr {
55
+ @apply psui-border-b psui-border-gray-20;
70
56
 
71
- &.is-first {
72
- .title {
73
- @apply psui-font-bold psui-text-gray-80;
74
- }
75
- }
57
+ .title {
58
+ @apply psui-flex psui-items-center psui-text-14 psui-leading-[24px];
59
+ }
76
60
 
77
- .title {
78
- @apply psui-flex psui-items-center;
79
- line-height: 24px;
80
- }
61
+ &.is-first .title {
62
+ @apply psui-text-gray-80 psui-font-bold;
63
+ }
81
64
 
82
- td {
83
- @apply psui-pl-8 psui-text-gray-80 psui-h-10 psui-text-right psui-text-14;
84
- padding-top: 0.688rem;
85
- padding-bottom: 0.688rem;
86
- min-height: 41.5px;
65
+ td {
66
+ @apply psui-pl-8 psui-text-gray-80 psui-h-10 psui-text-right psui-text-14 psui-py-[0.688rem] psui-min-h-[41.5px];
87
67
 
88
- > div {
89
- @apply psui-flex psui-items-center;
90
- }
68
+ > div {
69
+ @apply psui-flex psui-items-center;
70
+ }
91
71
 
92
- .actions {
93
- @apply psui-flex psui-items-center psui-h-full psui-relative;
72
+ &:not(:first-child) > div {
73
+ @apply psui-justify-end;
74
+ }
94
75
 
95
- &-button {
96
- @apply psui-cursor-pointer psui-ml-1;
97
- }
76
+ &:first-child {
77
+ @extend %sticky-first-column;
78
+ @apply psui-block psui-py-2;
79
+ }
80
+ }
98
81
 
99
- .is-last-deep {
100
- @apply psui-pl-10;
101
- }
102
- }
82
+ td .actions {
83
+ @apply psui-flex psui-items-center psui-h-full psui-relative;
103
84
 
104
- &:not(:first-child) {
105
- > div {
106
- @apply psui-justify-end;
107
- }
108
- }
85
+ &-button {
86
+ @apply psui-cursor-pointer psui-ml-1;
87
+ }
109
88
 
110
- &:first-child {
111
- @apply psui-pl-0 psui-pr-8 psui-text-left psui-block psui-bg-white psui-sticky psui-z-10 psui-left-0;
112
- box-shadow: inset -1px 0px 0px #ebeef0;
113
- padding-top: 8px;
114
- padding-bottom: 8px;
115
- }
89
+ .is-last-deep {
90
+ @apply psui-pl-10;
116
91
  }
92
+ }
117
93
 
118
- &.is-active {
119
- @apply psui-bg-gray-10;
94
+ &.is-active {
95
+ @apply psui-bg-gray-10;
120
96
 
121
- td:first-child {
122
- @apply psui-bg-gray-10;
123
- }
97
+ td:first-child {
98
+ @apply psui-bg-gray-10;
124
99
  }
125
100
  }
126
101
  }