@box/blueprint-web 12.54.0 → 12.56.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.
- package/dist/lib-esm/index.css +411 -216
- package/dist/lib-esm/status/status.js +5 -0
- package/dist/lib-esm/status/status.module.js +1 -1
- package/dist/lib-esm/util-components/base-grid-list-item/base-grid-list-item.module.js +1 -1
- package/dist/lib-esm/util-components/base-grid-list-item/base-grid-list.js +6 -1
- package/dist/lib-esm/util-components/list-checkbox/list-checkbox.js +5 -0
- package/dist/lib-esm/util-components/list-checkbox/list-checkbox.module.js +1 -1
- package/package.json +1 -1
package/dist/lib-esm/index.css
CHANGED
|
@@ -660,41 +660,124 @@
|
|
|
660
660
|
text-decoration:var(--label-default-text-decoration);
|
|
661
661
|
text-transform:var(--label-default-text-case);
|
|
662
662
|
}
|
|
663
|
-
.
|
|
663
|
+
.bp_status_module_maxContainer--a717b[data-modern=false]{
|
|
664
|
+
--status-gap:var(--space-1);
|
|
665
|
+
--status-height:var(--size-5);
|
|
666
|
+
--status-padding-right:var(--size-2);
|
|
667
|
+
--status-padding-left:var(--size-2);
|
|
668
|
+
--status-text-color:var(--text-text-on-light);
|
|
669
|
+
--status-background-color:var(--surface-status-surface-gray);
|
|
670
|
+
--status-border-radius:var(--radius-half);
|
|
671
|
+
--status-interactive-background-color-hover:var(--surface-status-surface-gray-hover);
|
|
672
|
+
--status-interactive-background-color-focus:var(--surface-status-surface-gray-focus);
|
|
673
|
+
--status-interactive-box-shadow-hover:0 0 0 var(--border-3) var(--border-status-border-hover);
|
|
674
|
+
--status-interactive-focus-ring-border:var(--border-2);
|
|
675
|
+
--status-interactive-focus-ring-color:var(--outline-focus-on-light);
|
|
676
|
+
--status-background-gray:var(--surface-status-surface-gray);
|
|
677
|
+
--status-interactive-background-gray-hover:var(--surface-status-surface-gray-hover);
|
|
678
|
+
--status-interactive-background-gray-focus:var(--surface-status-surface-gray-focus);
|
|
679
|
+
--status-background-yellow:var(--surface-status-surface-yellow);
|
|
680
|
+
--status-interactive-background-yellow-hover:var(--surface-status-surface-yellow-hover);
|
|
681
|
+
--status-interactive-background-yellow-focus:var(--surface-status-surface-yellow-focus);
|
|
682
|
+
--status-background-orange:var(--surface-status-surface-orange);
|
|
683
|
+
--status-interactive-background-orange-hover:var(--surface-status-surface-orange-hover);
|
|
684
|
+
--status-interactive-background-orange-focus:var(--surface-status-surface-orange-focus);
|
|
685
|
+
--status-background-red:var(--surface-status-surface-red);
|
|
686
|
+
--status-interactive-background-red-hover:var(--surface-status-surface-red-hover);
|
|
687
|
+
--status-interactive-background-red-focus:var(--surface-status-surface-red-focus);
|
|
688
|
+
--status-background-purple:var(--surface-status-surface-purple);
|
|
689
|
+
--status-interactive-background-purple-hover:var(--surface-status-surface-purple-hover);
|
|
690
|
+
--status-interactive-background-purple-focus:var(--surface-status-surface-purple-focus);
|
|
691
|
+
--status-background-light-blue:var(--surface-status-surface-light-blue);
|
|
692
|
+
--status-interactive-background-light-blue-hover:var(--surface-status-surface-light-blue-hover);
|
|
693
|
+
--status-background-dark-blue:var(--surface-status-surface-dark-blue);
|
|
694
|
+
--status-interactive-background-dark-blue-hover:var(--surface-status-surface-dark-blue-hover);
|
|
695
|
+
--status-interactive-background-dark-blue-focus:var(--surface-status-surface-dark-blue-focus);
|
|
696
|
+
--status-background-green:var(--surface-status-surface-green);
|
|
697
|
+
--status-interactive-background-green-hover:var(--surface-status-surface-green-hover);
|
|
698
|
+
--status-interactive-background-green-focus:var(--surface-status-surface-green-focus);
|
|
699
|
+
}
|
|
700
|
+
|
|
701
|
+
.bp_status_module_maxContainer--a717b[data-modern=true]{
|
|
702
|
+
--status-gap:var(--bp-space-010);
|
|
703
|
+
--status-height:var(--bp-size-050);
|
|
704
|
+
--status-padding-right:var(--bp-space-020);
|
|
705
|
+
--status-padding-left:var(--bp-space-020);
|
|
706
|
+
--status-text-color:var(--bp-text-text-on-light);
|
|
707
|
+
--status-background-color:var(--bp-surface-status-surface-gray);
|
|
708
|
+
--status-border-radius:var(--bp-radius-16);
|
|
709
|
+
--status-interactive-background-color-hover:var(--bp-surface-status-surface-gray-hover);
|
|
710
|
+
--status-interactive-background-color-focus:var(--bp-surface-status-surface-gray-focus);
|
|
711
|
+
--status-interactive-box-shadow-hover:0 0 0 var(--bp-border-03) var(--bp-border-status-border-hover);
|
|
712
|
+
--status-interactive-focus-ring-border:var(--bp-border-02);
|
|
713
|
+
--status-interactive-focus-ring-color:var(--bp-outline-focus-on-light);
|
|
714
|
+
--status-background-gray:var(--bp-surface-status-surface-gray);
|
|
715
|
+
--status-interactive-background-gray-hover:var(--bp-surface-status-surface-gray-hover);
|
|
716
|
+
--status-interactive-background-gray-focus:var(--bp-surface-status-surface-gray-focus);
|
|
717
|
+
--status-background-yellow:var(--bp-surface-status-surface-yellow);
|
|
718
|
+
--status-interactive-background-yellow-hover:var(--bp-surface-status-surface-yellow-hover);
|
|
719
|
+
--status-interactive-background-yellow-focus:var(--bp-surface-status-surface-yellow-focus);
|
|
720
|
+
--status-background-orange:var(--bp-surface-status-surface-orange);
|
|
721
|
+
--status-interactive-background-orange-hover:var(--bp-surface-status-surface-orange-hover);
|
|
722
|
+
--status-interactive-background-orange-focus:var(--bp-surface-status-surface-orange-focus);
|
|
723
|
+
--status-background-red:var(--bp-surface-status-surface-red);
|
|
724
|
+
--status-interactive-background-red-hover:var(--bp-surface-status-surface-red-hover);
|
|
725
|
+
--status-interactive-background-red-focus:var(--bp-surface-status-surface-red-focus);
|
|
726
|
+
--status-background-purple:var(--bp-surface-status-surface-purple);
|
|
727
|
+
--status-interactive-background-purple-hover:var(--bp-surface-status-surface-purple-hover);
|
|
728
|
+
--status-interactive-background-purple-focus:var(--bp-surface-status-surface-purple-focus);
|
|
729
|
+
--status-background-light-blue:var(--bp-surface-status-surface-light-blue);
|
|
730
|
+
--status-interactive-background-light-blue-hover:var(--bp-surface-status-surface-light-blue-hover);
|
|
731
|
+
--status-interactive-background-light-blue-focus:var(--bp-surface-status-surface-light-blue-focus);
|
|
732
|
+
--status-background-dark-blue:var(--bp-surface-status-surface-dark-blue);
|
|
733
|
+
--status-interactive-background-dark-blue-hover:var(--bp-surface-status-surface-dark-blue-hover);
|
|
734
|
+
--status-interactive-background-dark-blue-focus:var(--bp-surface-status-surface-dark-blue-focus);
|
|
735
|
+
--status-background-green:var(--bp-surface-status-surface-green);
|
|
736
|
+
--status-interactive-background-green-hover:var(--bp-surface-status-surface-green-hover);
|
|
737
|
+
--status-interactive-background-green-focus:var(--bp-surface-status-surface-green-focus);
|
|
738
|
+
}
|
|
739
|
+
|
|
740
|
+
.bp_status_module_maxContainer--a717b{
|
|
741
|
+
display:inline-block;
|
|
742
|
+
max-width:100%;
|
|
743
|
+
vertical-align:middle;
|
|
744
|
+
}
|
|
745
|
+
|
|
746
|
+
.bp_status_module_interactiveStatus--a717b{
|
|
664
747
|
border:initial;
|
|
665
748
|
cursor:default;
|
|
666
749
|
max-width:100%;
|
|
667
750
|
padding:initial;
|
|
668
751
|
vertical-align:top;
|
|
669
752
|
}
|
|
670
|
-
.bp_status_module_interactiveStatus--
|
|
671
|
-
box-shadow:0 0 0 var(--border
|
|
753
|
+
.bp_status_module_interactiveStatus--a717b:focus-visible{
|
|
754
|
+
box-shadow:0 0 0 var(--status-interactive-focus-ring-border) var(--status-interactive-focus-ring-color);
|
|
672
755
|
outline:none;
|
|
673
756
|
overflow:visible;
|
|
674
757
|
}
|
|
675
|
-
.bp_status_module_interactiveStatus--
|
|
676
|
-
background-color:var(--status-interactive-background-color-hover
|
|
677
|
-
box-shadow:
|
|
758
|
+
.bp_status_module_interactiveStatus--a717b:hover{
|
|
759
|
+
background-color:var(--status-interactive-background-color-hover);
|
|
760
|
+
box-shadow:var(--status-interactive-box-shadow-hover);
|
|
678
761
|
}
|
|
679
|
-
.bp_status_module_interactiveStatus--
|
|
680
|
-
background-color:var(--status-interactive-background-color-focus
|
|
762
|
+
.bp_status_module_interactiveStatus--a717b:focus-visible{
|
|
763
|
+
background-color:var(--status-interactive-background-color-focus);
|
|
681
764
|
}
|
|
682
765
|
|
|
683
|
-
.bp_status_module_status--
|
|
766
|
+
.bp_status_module_status--a717b{
|
|
684
767
|
align-items:center;
|
|
685
|
-
background-color:var(--status-background-color
|
|
686
|
-
border-radius:var(--radius
|
|
687
|
-
color:var(--
|
|
768
|
+
background-color:var(--status-background-color);
|
|
769
|
+
border-radius:var(--status-border-radius);
|
|
770
|
+
color:var(--status-text-color);
|
|
688
771
|
display:flex;
|
|
689
772
|
font-family:var(--label-bold-font-family);
|
|
690
773
|
font-size:var(--label-bold-font-size);
|
|
691
774
|
font-weight:var(--label-bold-font-weight);
|
|
692
|
-
gap:var(--
|
|
693
|
-
height:var(--
|
|
775
|
+
gap:var(--status-gap);
|
|
776
|
+
height:var(--status-height);
|
|
694
777
|
letter-spacing:var(--label-bold-letter-spacing);
|
|
695
778
|
line-height:var(--label-bold-line-height);
|
|
696
|
-
padding-left:var(--
|
|
697
|
-
padding-right:var(--
|
|
779
|
+
padding-left:var(--status-padding-left);
|
|
780
|
+
padding-right:var(--status-padding-right);
|
|
698
781
|
-webkit-text-decoration:var(--label-bold-text-decoration);
|
|
699
782
|
text-decoration:var(--label-bold-text-decoration);
|
|
700
783
|
text-transform:var(--label-bold-text-case);
|
|
@@ -702,105 +785,99 @@
|
|
|
702
785
|
user-select:text;
|
|
703
786
|
white-space:nowrap;
|
|
704
787
|
}
|
|
705
|
-
.bp_status_module_status--
|
|
788
|
+
.bp_status_module_status--a717b.bp_status_module_reverse--a717b{
|
|
706
789
|
flex-direction:row-reverse;
|
|
707
790
|
}
|
|
708
|
-
.bp_status_module_status--
|
|
791
|
+
.bp_status_module_status--a717b.bp_status_module_circle--a717b{
|
|
709
792
|
padding:0 3px;
|
|
710
793
|
}
|
|
711
|
-
.bp_status_module_status--
|
|
794
|
+
.bp_status_module_status--a717b .bp_status_module_text--a717b{
|
|
712
795
|
overflow:hidden;
|
|
713
796
|
text-overflow:ellipsis;
|
|
714
797
|
}
|
|
715
|
-
.bp_status_module_status--
|
|
798
|
+
.bp_status_module_status--a717b > svg{
|
|
716
799
|
flex:0 0 auto;
|
|
717
800
|
white-space:nowrap;
|
|
718
801
|
}
|
|
719
802
|
|
|
720
|
-
.
|
|
721
|
-
|
|
722
|
-
max-width:100%;
|
|
723
|
-
vertical-align:middle;
|
|
724
|
-
}
|
|
725
|
-
|
|
726
|
-
.bp_status_module_colorSurfaceStatusSurfaceGray--6c98f{
|
|
727
|
-
background-color:var(--surface-status-surface-gray);
|
|
803
|
+
.bp_status_module_colorSurfaceStatusSurfaceGray--a717b{
|
|
804
|
+
background-color:var(--status-background-gray);
|
|
728
805
|
}
|
|
729
|
-
.bp_status_module_colorSurfaceStatusSurfaceGray--
|
|
730
|
-
background-color:var(--
|
|
806
|
+
.bp_status_module_colorSurfaceStatusSurfaceGray--a717b.bp_status_module_interactiveStatus--a717b:hover{
|
|
807
|
+
background-color:var(--status-interactive-background-gray-hover);
|
|
731
808
|
}
|
|
732
|
-
.bp_status_module_colorSurfaceStatusSurfaceGray--
|
|
733
|
-
background-color:var(--
|
|
809
|
+
.bp_status_module_colorSurfaceStatusSurfaceGray--a717b.bp_status_module_interactiveStatus--a717b:focus-visible{
|
|
810
|
+
background-color:var(--status-interactive-background-gray-focus);
|
|
734
811
|
}
|
|
735
812
|
|
|
736
|
-
.bp_status_module_colorSurfaceStatusSurfaceYellow--
|
|
737
|
-
background-color:var(--
|
|
813
|
+
.bp_status_module_colorSurfaceStatusSurfaceYellow--a717b{
|
|
814
|
+
background-color:var(--status-background-yellow);
|
|
738
815
|
}
|
|
739
|
-
.bp_status_module_colorSurfaceStatusSurfaceYellow--
|
|
740
|
-
background-color:var(--
|
|
816
|
+
.bp_status_module_colorSurfaceStatusSurfaceYellow--a717b.bp_status_module_interactiveStatus--a717b:hover{
|
|
817
|
+
background-color:var(--status-interactive-background-yellow-hover);
|
|
741
818
|
}
|
|
742
|
-
.bp_status_module_colorSurfaceStatusSurfaceYellow--
|
|
743
|
-
background-color:var(--
|
|
819
|
+
.bp_status_module_colorSurfaceStatusSurfaceYellow--a717b.bp_status_module_interactiveStatus--a717b:focus-visible{
|
|
820
|
+
background-color:var(--status-interactive-background-yellow-focus);
|
|
744
821
|
}
|
|
745
822
|
|
|
746
|
-
.bp_status_module_colorSurfaceStatusSurfaceOrange--
|
|
747
|
-
background-color:var(--
|
|
823
|
+
.bp_status_module_colorSurfaceStatusSurfaceOrange--a717b{
|
|
824
|
+
background-color:var(--status-background-orange);
|
|
748
825
|
}
|
|
749
|
-
.bp_status_module_colorSurfaceStatusSurfaceOrange--
|
|
750
|
-
background-color:var(--
|
|
826
|
+
.bp_status_module_colorSurfaceStatusSurfaceOrange--a717b.bp_status_module_interactiveStatus--a717b:hover{
|
|
827
|
+
background-color:var(--status-interactive-background-orange-hover);
|
|
751
828
|
}
|
|
752
|
-
.bp_status_module_colorSurfaceStatusSurfaceOrange--
|
|
753
|
-
background-color:var(--
|
|
829
|
+
.bp_status_module_colorSurfaceStatusSurfaceOrange--a717b.bp_status_module_interactiveStatus--a717b:focus-visible{
|
|
830
|
+
background-color:var(--status-interactive-background-orange-focus);
|
|
754
831
|
}
|
|
755
832
|
|
|
756
|
-
.bp_status_module_colorSurfaceStatusSurfaceRed--
|
|
757
|
-
background-color:var(--
|
|
833
|
+
.bp_status_module_colorSurfaceStatusSurfaceRed--a717b{
|
|
834
|
+
background-color:var(--status-background-red);
|
|
758
835
|
}
|
|
759
|
-
.bp_status_module_colorSurfaceStatusSurfaceRed--
|
|
760
|
-
background-color:var(--
|
|
836
|
+
.bp_status_module_colorSurfaceStatusSurfaceRed--a717b.bp_status_module_interactiveStatus--a717b:hover{
|
|
837
|
+
background-color:var(--status-interactive-background-red-hover);
|
|
761
838
|
}
|
|
762
|
-
.bp_status_module_colorSurfaceStatusSurfaceRed--
|
|
763
|
-
background-color:var(--
|
|
839
|
+
.bp_status_module_colorSurfaceStatusSurfaceRed--a717b.bp_status_module_interactiveStatus--a717b:focus-visible{
|
|
840
|
+
background-color:var(--status-interactive-background-red-focus);
|
|
764
841
|
}
|
|
765
842
|
|
|
766
|
-
.bp_status_module_colorSurfaceStatusSurfacePurple--
|
|
767
|
-
background-color:var(--
|
|
843
|
+
.bp_status_module_colorSurfaceStatusSurfacePurple--a717b{
|
|
844
|
+
background-color:var(--status-background-purple);
|
|
768
845
|
}
|
|
769
|
-
.bp_status_module_colorSurfaceStatusSurfacePurple--
|
|
770
|
-
background-color:var(--
|
|
846
|
+
.bp_status_module_colorSurfaceStatusSurfacePurple--a717b.bp_status_module_interactiveStatus--a717b:hover{
|
|
847
|
+
background-color:var(--status-interactive-background-purple-hover);
|
|
771
848
|
}
|
|
772
|
-
.bp_status_module_colorSurfaceStatusSurfacePurple--
|
|
773
|
-
background-color:var(--
|
|
849
|
+
.bp_status_module_colorSurfaceStatusSurfacePurple--a717b.bp_status_module_interactiveStatus--a717b:focus-visible{
|
|
850
|
+
background-color:var(--status-interactive-background-purple-focus);
|
|
774
851
|
}
|
|
775
852
|
|
|
776
|
-
.bp_status_module_colorSurfaceStatusSurfaceLightBlue--
|
|
777
|
-
background-color:var(--
|
|
853
|
+
.bp_status_module_colorSurfaceStatusSurfaceLightBlue--a717b{
|
|
854
|
+
background-color:var(--status-background-light-blue);
|
|
778
855
|
}
|
|
779
|
-
.bp_status_module_colorSurfaceStatusSurfaceLightBlue--
|
|
780
|
-
background-color:var(--
|
|
856
|
+
.bp_status_module_colorSurfaceStatusSurfaceLightBlue--a717b.bp_status_module_interactiveStatus--a717b:hover{
|
|
857
|
+
background-color:var(--status-interactive-background-light-blue-hover);
|
|
781
858
|
}
|
|
782
|
-
.bp_status_module_colorSurfaceStatusSurfaceLightBlue--
|
|
783
|
-
background-color:var(--
|
|
859
|
+
.bp_status_module_colorSurfaceStatusSurfaceLightBlue--a717b.bp_status_module_interactiveStatus--a717b:focus-visible{
|
|
860
|
+
background-color:var(--status-interactive-background-light-blue-focus);
|
|
784
861
|
}
|
|
785
862
|
|
|
786
|
-
.bp_status_module_colorSurfaceStatusSurfaceDarkBlue--
|
|
787
|
-
background-color:var(--
|
|
863
|
+
.bp_status_module_colorSurfaceStatusSurfaceDarkBlue--a717b{
|
|
864
|
+
background-color:var(--status-background-dark-blue);
|
|
788
865
|
}
|
|
789
|
-
.bp_status_module_colorSurfaceStatusSurfaceDarkBlue--
|
|
790
|
-
background-color:var(--
|
|
866
|
+
.bp_status_module_colorSurfaceStatusSurfaceDarkBlue--a717b.bp_status_module_interactiveStatus--a717b:hover{
|
|
867
|
+
background-color:var(--status-interactive-background-dark-blue-hover);
|
|
791
868
|
}
|
|
792
|
-
.bp_status_module_colorSurfaceStatusSurfaceDarkBlue--
|
|
793
|
-
background-color:var(--
|
|
869
|
+
.bp_status_module_colorSurfaceStatusSurfaceDarkBlue--a717b.bp_status_module_interactiveStatus--a717b:focus-visible{
|
|
870
|
+
background-color:var(--status-interactive-background-dark-blue-focus);
|
|
794
871
|
}
|
|
795
872
|
|
|
796
|
-
.bp_status_module_colorSurfaceStatusSurfaceGreen--
|
|
797
|
-
background-color:var(--
|
|
873
|
+
.bp_status_module_colorSurfaceStatusSurfaceGreen--a717b{
|
|
874
|
+
background-color:var(--status-background-green);
|
|
798
875
|
}
|
|
799
|
-
.bp_status_module_colorSurfaceStatusSurfaceGreen--
|
|
800
|
-
background-color:var(--
|
|
876
|
+
.bp_status_module_colorSurfaceStatusSurfaceGreen--a717b.bp_status_module_interactiveStatus--a717b:hover{
|
|
877
|
+
background-color:var(--status-interactive-background-green-hover);
|
|
801
878
|
}
|
|
802
|
-
.bp_status_module_colorSurfaceStatusSurfaceGreen--
|
|
803
|
-
background-color:var(--
|
|
879
|
+
.bp_status_module_colorSurfaceStatusSurfaceGreen--a717b.bp_status_module_interactiveStatus--a717b:focus-visible{
|
|
880
|
+
background-color:var(--status-interactive-background-green-focus);
|
|
804
881
|
}
|
|
805
882
|
|
|
806
883
|
.bp_accordion_module_accordionItem--8cf35[data-modern=false]{
|
|
@@ -3507,46 +3584,82 @@
|
|
|
3507
3584
|
.bp_data_table_module_hideActionWrapperRight--c1c1a table tbody > tr > td [data-actionswrapper]::after{
|
|
3508
3585
|
display:none;
|
|
3509
3586
|
}
|
|
3510
|
-
.bp_list_checkbox_module_selection--
|
|
3587
|
+
.bp_list_checkbox_module_selection--98dc1[data-modern=false]{
|
|
3588
|
+
--selection-width:var(--space-10);
|
|
3589
|
+
--selection-height:var(--space-10);
|
|
3590
|
+
--selection-background:var(--surface-cta-surface-icon);
|
|
3591
|
+
--selection-border-radius:var(--radius-2);
|
|
3592
|
+
--selection-background-hover:var(--surface-cta-surface-icon-hover);
|
|
3593
|
+
--checkbox-width:var(--size-5);
|
|
3594
|
+
--checkbox-height:var(--size-5);
|
|
3595
|
+
--checkbox-background:var(--surface-checkbox-surface);
|
|
3596
|
+
--checkbox-border:var(--border-2) solid var(--border-checkbox-border);
|
|
3597
|
+
--checkbox-border-radius:var(--radius-1);
|
|
3598
|
+
--checkbox-transition:all var(--animation-duration-2);
|
|
3599
|
+
--checkbox-focus-box-shadow:0 0 0 var(--space-05) var(--box-blue-05), 0 0 0 var(--space-1) var(--outline-focus-on-light);
|
|
3600
|
+
--checkbox-selected-background:var(--surface-checkbox-surface-selected);
|
|
3601
|
+
--checkbox-selected-border-color:var(--surface-checkbox-surface-selected);
|
|
3602
|
+
--checkbox-disabled-opacity:0.4;
|
|
3603
|
+
}
|
|
3604
|
+
|
|
3605
|
+
.bp_list_checkbox_module_selection--98dc1[data-modern=true]{
|
|
3606
|
+
--selection-width:var(--bp-size-080);
|
|
3607
|
+
--selection-height:var(--bp-size-080);
|
|
3608
|
+
--selection-background:var(--bp-surface-cta-surface-icon);
|
|
3609
|
+
--selection-border-radius:var(--bp-radius-10);
|
|
3610
|
+
--selection-background-hover:var(--bp-surface-cta-surface-icon-hover);
|
|
3611
|
+
--checkbox-width:var(--bp-size-040);
|
|
3612
|
+
--checkbox-height:var(--bp-size-040);
|
|
3613
|
+
--checkbox-background:var(--bp-surface-checkbox-surface);
|
|
3614
|
+
--checkbox-border:var(--bp-border-02) solid var(--bp-border-checkbox-border);
|
|
3615
|
+
--checkbox-border-radius:var(--bp-radius-02);
|
|
3616
|
+
--checkbox-transition:all var(--animation-duration-2);
|
|
3617
|
+
--checkbox-focus-box-shadow:0 0 0 var(--bp-space-005) var(--bp-box-blue-05), 0 0 0 var(--bp-space-010) var(--bp-outline-focus-on-light);
|
|
3618
|
+
--checkbox-selected-background:var(--bp-surface-checkbox-surface-selected);
|
|
3619
|
+
--checkbox-selected-border-color:var(--bp-border-checkbox-border-selected);
|
|
3620
|
+
--checkbox-disabled-opacity:0.4;
|
|
3621
|
+
}
|
|
3622
|
+
|
|
3623
|
+
.bp_list_checkbox_module_selection--98dc1{
|
|
3511
3624
|
align-items:center;
|
|
3512
|
-
background:var(--
|
|
3513
|
-
border-radius:var(--radius
|
|
3625
|
+
background:var(--selection-background);
|
|
3626
|
+
border-radius:var(--selection-border-radius);
|
|
3514
3627
|
display:flex;
|
|
3515
|
-
height:var(--
|
|
3628
|
+
height:var(--selection-height);
|
|
3516
3629
|
justify-content:center;
|
|
3517
|
-
width:var(--
|
|
3630
|
+
width:var(--selection-width);
|
|
3518
3631
|
}
|
|
3519
|
-
.bp_list_checkbox_module_selection--
|
|
3520
|
-
background:var(--
|
|
3632
|
+
.bp_list_checkbox_module_selection--98dc1:hover{
|
|
3633
|
+
background:var(--selection-background-hover);
|
|
3521
3634
|
}
|
|
3522
3635
|
|
|
3523
|
-
.bp_list_checkbox_module_checkbox--
|
|
3636
|
+
.bp_list_checkbox_module_checkbox--98dc1{
|
|
3524
3637
|
align-items:center;
|
|
3525
|
-
background:var(--
|
|
3526
|
-
border:var(--
|
|
3527
|
-
border-radius:var(--radius
|
|
3638
|
+
background:var(--checkbox-background);
|
|
3639
|
+
border:var(--checkbox-border);
|
|
3640
|
+
border-radius:var(--checkbox-border-radius);
|
|
3528
3641
|
box-sizing:border-box;
|
|
3529
3642
|
cursor:pointer;
|
|
3530
3643
|
display:flex;
|
|
3531
|
-
height:var(--
|
|
3644
|
+
height:var(--checkbox-height);
|
|
3532
3645
|
justify-content:center;
|
|
3533
|
-
transition:
|
|
3534
|
-
width:var(--
|
|
3646
|
+
transition:var(--checkbox-transition);
|
|
3647
|
+
width:var(--checkbox-width);
|
|
3535
3648
|
}
|
|
3536
|
-
.bp_list_checkbox_module_checkbox--
|
|
3649
|
+
.bp_list_checkbox_module_checkbox--98dc1 svg{
|
|
3537
3650
|
transition-duration:.15s;
|
|
3538
3651
|
transition-property:transform;
|
|
3539
3652
|
transition-timing-function:cubic-bezier(0, 0, .6, 1);
|
|
3540
3653
|
}
|
|
3541
|
-
.bp_list_checkbox_module_checkbox--
|
|
3542
|
-
box-shadow:
|
|
3654
|
+
.bp_list_checkbox_module_checkbox--98dc1[data-focus-visible]{
|
|
3655
|
+
box-shadow:var(--checkbox-focus-box-shadow);
|
|
3543
3656
|
}
|
|
3544
|
-
.bp_list_checkbox_module_checkbox--
|
|
3545
|
-
background:var(--
|
|
3546
|
-
border-color:var(--
|
|
3657
|
+
.bp_list_checkbox_module_checkbox--98dc1[data-selected]{
|
|
3658
|
+
background:var(--checkbox-selected-background);
|
|
3659
|
+
border-color:var(--checkbox-selected-border-color);
|
|
3547
3660
|
}
|
|
3548
|
-
.bp_list_checkbox_module_checkbox--
|
|
3549
|
-
opacity
|
|
3661
|
+
.bp_list_checkbox_module_checkbox--98dc1[data-disabled]{
|
|
3662
|
+
opacity:var(--checkbox-disabled-opacity);
|
|
3550
3663
|
}
|
|
3551
3664
|
.bp_main_module_tableSortingContainer--cc705{
|
|
3552
3665
|
display:flex;
|
|
@@ -4683,7 +4796,7 @@
|
|
|
4683
4796
|
.bp_link_module_link--fb308 .bp_link_module_icon--fb308 *{
|
|
4684
4797
|
fill:currentColor;
|
|
4685
4798
|
}
|
|
4686
|
-
.bp_base_grid_list_item_module_smallList--
|
|
4799
|
+
.bp_base_grid_list_item_module_smallList--08322{
|
|
4687
4800
|
box-sizing:border-box;
|
|
4688
4801
|
display:grid;
|
|
4689
4802
|
gap:var(--space-2);
|
|
@@ -4694,7 +4807,7 @@
|
|
|
4694
4807
|
padding:var(--space-1);
|
|
4695
4808
|
width:auto;
|
|
4696
4809
|
}
|
|
4697
|
-
.bp_base_grid_list_item_module_smallList--
|
|
4810
|
+
.bp_base_grid_list_item_module_smallList--08322 .bp_base_grid_list_item_module_smallListItem--08322{
|
|
4698
4811
|
--actions-opacity:0;
|
|
4699
4812
|
--thumbnail-size:var(--size-9);
|
|
4700
4813
|
--item-background:var(--surface-item-small-surface);
|
|
@@ -4713,11 +4826,11 @@
|
|
|
4713
4826
|
transform:translateZ(0);
|
|
4714
4827
|
width:auto;
|
|
4715
4828
|
}
|
|
4716
|
-
.bp_base_grid_list_item_module_smallList--
|
|
4829
|
+
.bp_base_grid_list_item_module_smallList--08322 .bp_base_grid_list_item_module_smallListItem--08322.bp_base_grid_list_item_module_loading--08322{
|
|
4717
4830
|
grid-template-columns:var(--thumbnail-size) auto 0;
|
|
4718
4831
|
grid-template-rows:100% 0;
|
|
4719
4832
|
}
|
|
4720
|
-
.bp_base_grid_list_item_module_smallList--
|
|
4833
|
+
.bp_base_grid_list_item_module_smallList--08322 .bp_base_grid_list_item_module_smallListItem--08322 .bp_base_grid_list_item_module_thumbnail--08322{
|
|
4721
4834
|
align-items:center;
|
|
4722
4835
|
aspect-ratio:1;
|
|
4723
4836
|
display:flex;
|
|
@@ -4726,13 +4839,13 @@
|
|
|
4726
4839
|
overflow:hidden;
|
|
4727
4840
|
z-index:1;
|
|
4728
4841
|
}
|
|
4729
|
-
.bp_base_grid_list_item_module_smallList--
|
|
4842
|
+
.bp_base_grid_list_item_module_smallList--08322 .bp_base_grid_list_item_module_smallListItem--08322 .bp_base_grid_list_item_module_thumbnailContent--08322 img,.bp_base_grid_list_item_module_smallList--08322 .bp_base_grid_list_item_module_smallListItem--08322 .bp_base_grid_list_item_module_thumbnailContent--08322 svg{
|
|
4730
4843
|
height:100%;
|
|
4731
4844
|
object-fit:cover;
|
|
4732
4845
|
object-position:left;
|
|
4733
4846
|
width:100%;
|
|
4734
4847
|
}
|
|
4735
|
-
.bp_base_grid_list_item_module_smallList--
|
|
4848
|
+
.bp_base_grid_list_item_module_smallList--08322 .bp_base_grid_list_item_module_smallListItem--08322 .bp_base_grid_list_item_module_header--08322{
|
|
4736
4849
|
color:var(--text-text-on-light);
|
|
4737
4850
|
font-family:var(--body-default-semibold-font-family);
|
|
4738
4851
|
font-size:var(--body-default-semibold-font-size);
|
|
@@ -4744,11 +4857,11 @@
|
|
|
4744
4857
|
text-decoration:var(--body-default-semibold-text-decoration);
|
|
4745
4858
|
text-transform:var(--body-default-semibold-text-case);
|
|
4746
4859
|
}
|
|
4747
|
-
.bp_base_grid_list_item_module_smallList--
|
|
4860
|
+
.bp_base_grid_list_item_module_smallList--08322 .bp_base_grid_list_item_module_smallListItem--08322 .bp_base_grid_list_item_module_header--08322.bp_base_grid_list_item_module_loading--08322{
|
|
4748
4861
|
align-items:center;
|
|
4749
4862
|
display:flex;
|
|
4750
4863
|
}
|
|
4751
|
-
.bp_base_grid_list_item_module_smallList--
|
|
4864
|
+
.bp_base_grid_list_item_module_smallList--08322 .bp_base_grid_list_item_module_smallListItem--08322 .bp_base_grid_list_item_module_subtitle--08322{
|
|
4752
4865
|
color:var(--text-text-on-light-secondary);
|
|
4753
4866
|
font-family:var(--caption-default-font-family);
|
|
4754
4867
|
font-size:var(--caption-default-font-size);
|
|
@@ -4760,17 +4873,17 @@
|
|
|
4760
4873
|
text-decoration:var(--caption-default-text-decoration);
|
|
4761
4874
|
text-transform:var(--caption-default-text-case);
|
|
4762
4875
|
}
|
|
4763
|
-
.bp_base_grid_list_item_module_smallList--
|
|
4876
|
+
.bp_base_grid_list_item_module_smallList--08322 .bp_base_grid_list_item_module_smallListItem--08322 .bp_base_grid_list_item_module_header--08322,.bp_base_grid_list_item_module_smallList--08322 .bp_base_grid_list_item_module_smallListItem--08322 .bp_base_grid_list_item_module_subtitle--08322{
|
|
4764
4877
|
display:inline-block;
|
|
4765
4878
|
overflow:hidden;
|
|
4766
4879
|
text-overflow:ellipsis;
|
|
4767
4880
|
white-space:nowrap;
|
|
4768
4881
|
}
|
|
4769
|
-
.bp_base_grid_list_item_module_smallList--
|
|
4882
|
+
.bp_base_grid_list_item_module_smallList--08322 .bp_base_grid_list_item_module_smallListItem--08322:not(:has(.bp_base_grid_list_item_module_header--08322)),.bp_base_grid_list_item_module_smallList--08322 .bp_base_grid_list_item_module_smallListItem--08322:not(:has(.bp_base_grid_list_item_module_subtitle--08322)){
|
|
4770
4883
|
grid-template-rows:100% 0;
|
|
4771
4884
|
row-gap:0;
|
|
4772
4885
|
}
|
|
4773
|
-
.bp_base_grid_list_item_module_smallList--
|
|
4886
|
+
.bp_base_grid_list_item_module_smallList--08322 .bp_base_grid_list_item_module_smallListItem--08322 .bp_base_grid_list_item_module_actions--08322{
|
|
4774
4887
|
align-items:center;
|
|
4775
4888
|
display:flex;
|
|
4776
4889
|
grid-area:actions;
|
|
@@ -4780,11 +4893,11 @@
|
|
|
4780
4893
|
padding-right:0;
|
|
4781
4894
|
}
|
|
4782
4895
|
@media (pointer: coarse){
|
|
4783
|
-
.bp_base_grid_list_item_module_smallList--
|
|
4896
|
+
.bp_base_grid_list_item_module_smallList--08322 .bp_base_grid_list_item_module_smallListItem--08322 .bp_base_grid_list_item_module_actions--08322{
|
|
4784
4897
|
--actions-opacity:1;
|
|
4785
4898
|
}
|
|
4786
4899
|
}
|
|
4787
|
-
.bp_base_grid_list_item_module_smallList--
|
|
4900
|
+
.bp_base_grid_list_item_module_smallList--08322 .bp_base_grid_list_item_module_smallListItem--08322 .bp_base_grid_list_item_module_actions--08322 .bp_base_grid_list_item_module_selection--08322{
|
|
4788
4901
|
align-items:center;
|
|
4789
4902
|
background:var(--item-background);
|
|
4790
4903
|
border-radius:var(--radius-2);
|
|
@@ -4793,10 +4906,10 @@
|
|
|
4793
4906
|
justify-content:center;
|
|
4794
4907
|
width:var(--space-8);
|
|
4795
4908
|
}
|
|
4796
|
-
.bp_base_grid_list_item_module_smallList--
|
|
4909
|
+
.bp_base_grid_list_item_module_smallList--08322 .bp_base_grid_list_item_module_smallListItem--08322 .bp_base_grid_list_item_module_actions--08322 .bp_base_grid_list_item_module_selection--08322:hover{
|
|
4797
4910
|
background:var(--surface-cta-surface-icon-hover);
|
|
4798
4911
|
}
|
|
4799
|
-
.bp_base_grid_list_item_module_smallList--
|
|
4912
|
+
.bp_base_grid_list_item_module_smallList--08322 .bp_base_grid_list_item_module_smallListItem--08322 .bp_base_grid_list_item_module_actions--08322 .bp_base_grid_list_item_module_inner--08322{
|
|
4800
4913
|
align-items:center;
|
|
4801
4914
|
border-radius:var(--radius-2);
|
|
4802
4915
|
display:flex;
|
|
@@ -4804,18 +4917,18 @@
|
|
|
4804
4917
|
justify-content:flex-end;
|
|
4805
4918
|
margin-inline-end:var(--space-2);
|
|
4806
4919
|
}
|
|
4807
|
-
.bp_base_grid_list_item_module_smallList--
|
|
4920
|
+
.bp_base_grid_list_item_module_smallList--08322 .bp_base_grid_list_item_module_smallListItem--08322 .bp_base_grid_list_item_module_actions--08322 .bp_base_grid_list_item_module_inner--08322:last-child{
|
|
4808
4921
|
margin-inline-end:0;
|
|
4809
4922
|
}
|
|
4810
|
-
.bp_base_grid_list_item_module_smallList--
|
|
4923
|
+
.bp_base_grid_list_item_module_smallList--08322 .bp_base_grid_list_item_module_smallListItem--08322 .bp_base_grid_list_item_module_actions--08322 .bp_base_grid_list_item_module_actionsCheckboxWrapper--08322{
|
|
4811
4924
|
background:var(--item-hover);
|
|
4812
4925
|
display:flex;
|
|
4813
4926
|
}
|
|
4814
|
-
.bp_base_grid_list_item_module_smallList--
|
|
4927
|
+
.bp_base_grid_list_item_module_smallList--08322 .bp_base_grid_list_item_module_smallListItem--08322:hover,.bp_base_grid_list_item_module_smallList--08322 .bp_base_grid_list_item_module_smallListItem--08322[data-active-item],.bp_base_grid_list_item_module_smallList--08322 .bp_base_grid_list_item_module_smallListItem--08322[data-focus-visible],.bp_base_grid_list_item_module_smallList--08322 .bp_base_grid_list_item_module_smallListItem--08322[data-focused],.bp_base_grid_list_item_module_smallList--08322 .bp_base_grid_list_item_module_smallListItem--08322[data-hovered]{
|
|
4815
4928
|
--actions-opacity:1;
|
|
4816
4929
|
background:var(--item-hover);
|
|
4817
4930
|
}
|
|
4818
|
-
.bp_base_grid_list_item_module_smallList--
|
|
4931
|
+
.bp_base_grid_list_item_module_smallList--08322 .bp_base_grid_list_item_module_smallListItem--08322[data-active-item]::before,.bp_base_grid_list_item_module_smallList--08322 .bp_base_grid_list_item_module_smallListItem--08322[data-focus-visible]::before{
|
|
4819
4932
|
--actions-opacity:1;
|
|
4820
4933
|
border-radius:.875rem;
|
|
4821
4934
|
content:"";
|
|
@@ -4829,7 +4942,7 @@
|
|
|
4829
4942
|
width:100%;
|
|
4830
4943
|
}
|
|
4831
4944
|
|
|
4832
|
-
.bp_base_grid_list_item_module_largeList--
|
|
4945
|
+
.bp_base_grid_list_item_module_largeList--08322{
|
|
4833
4946
|
box-sizing:border-box;
|
|
4834
4947
|
display:flex;
|
|
4835
4948
|
flex-direction:column;
|
|
@@ -4839,7 +4952,7 @@
|
|
|
4839
4952
|
overflow:auto;
|
|
4840
4953
|
padding:var(--space-1);
|
|
4841
4954
|
}
|
|
4842
|
-
.bp_base_grid_list_item_module_largeList--
|
|
4955
|
+
.bp_base_grid_list_item_module_largeList--08322 .bp_base_grid_list_item_module_largeListItem--08322{
|
|
4843
4956
|
--thumbnail-size:10rem;
|
|
4844
4957
|
--actions-opacity:0;
|
|
4845
4958
|
--item-background:var(--gray-white);
|
|
@@ -4856,18 +4969,18 @@
|
|
|
4856
4969
|
position:relative;
|
|
4857
4970
|
transform:translateZ(0);
|
|
4858
4971
|
}
|
|
4859
|
-
.bp_base_grid_list_item_module_largeList--
|
|
4972
|
+
.bp_base_grid_list_item_module_largeList--08322 .bp_base_grid_list_item_module_largeListItem--08322.bp_base_grid_list_item_module_loading--08322{
|
|
4860
4973
|
grid-template-rows:1fr 1fr 1fr;
|
|
4861
4974
|
}
|
|
4862
|
-
.bp_base_grid_list_item_module_largeList--
|
|
4975
|
+
.bp_base_grid_list_item_module_largeList--08322 .bp_base_grid_list_item_module_largeListItem--08322:focus-within{
|
|
4863
4976
|
--actions-opacity:1;
|
|
4864
4977
|
}
|
|
4865
4978
|
@media (max-width: 374px){
|
|
4866
|
-
.bp_base_grid_list_item_module_largeList--
|
|
4979
|
+
.bp_base_grid_list_item_module_largeList--08322 .bp_base_grid_list_item_module_largeListItem--08322{
|
|
4867
4980
|
--thumbnail-size:7.5rem;
|
|
4868
4981
|
}
|
|
4869
4982
|
}
|
|
4870
|
-
.bp_base_grid_list_item_module_largeList--
|
|
4983
|
+
.bp_base_grid_list_item_module_largeList--08322 .bp_base_grid_list_item_module_largeListItem--08322 .bp_base_grid_list_item_module_thumbnail--08322{
|
|
4871
4984
|
aspect-ratio:4/3;
|
|
4872
4985
|
border:var(--border-1) solid var(--gray-10);
|
|
4873
4986
|
border-radius:var(--radius-3);
|
|
@@ -4875,24 +4988,24 @@
|
|
|
4875
4988
|
overflow:hidden;
|
|
4876
4989
|
z-index:1;
|
|
4877
4990
|
}
|
|
4878
|
-
.bp_base_grid_list_item_module_largeList--
|
|
4991
|
+
.bp_base_grid_list_item_module_largeList--08322 .bp_base_grid_list_item_module_largeListItem--08322 .bp_base_grid_list_item_module_thumbnail--08322 img{
|
|
4879
4992
|
height:100%;
|
|
4880
4993
|
object-fit:cover;
|
|
4881
4994
|
object-position:left;
|
|
4882
4995
|
width:100%;
|
|
4883
4996
|
}
|
|
4884
|
-
.bp_base_grid_list_item_module_largeList--
|
|
4997
|
+
.bp_base_grid_list_item_module_largeList--08322 .bp_base_grid_list_item_module_largeListItem--08322 .bp_base_grid_list_item_module_thumbnail--08322.bp_base_grid_list_item_module_loading--08322{
|
|
4885
4998
|
border:none;
|
|
4886
4999
|
}
|
|
4887
5000
|
@media (max-width: 374px){
|
|
4888
|
-
.bp_base_grid_list_item_module_largeList--
|
|
5001
|
+
.bp_base_grid_list_item_module_largeList--08322 .bp_base_grid_list_item_module_largeListItem--08322 .bp_base_grid_list_item_module_thumbnail--08322{
|
|
4889
5002
|
aspect-ratio:1/1;
|
|
4890
5003
|
}
|
|
4891
|
-
.bp_base_grid_list_item_module_largeList--
|
|
5004
|
+
.bp_base_grid_list_item_module_largeList--08322 .bp_base_grid_list_item_module_largeListItem--08322 .bp_base_grid_list_item_module_thumbnail--08322 img{
|
|
4892
5005
|
object-fit:contain;
|
|
4893
5006
|
}
|
|
4894
5007
|
}
|
|
4895
|
-
.bp_base_grid_list_item_module_largeList--
|
|
5008
|
+
.bp_base_grid_list_item_module_largeList--08322 .bp_base_grid_list_item_module_largeListItem--08322 .bp_base_grid_list_item_module_actions--08322{
|
|
4896
5009
|
align-items:center;
|
|
4897
5010
|
display:flex;
|
|
4898
5011
|
height:var(--space-6);
|
|
@@ -4904,11 +5017,11 @@
|
|
|
4904
5017
|
top:.875rem;
|
|
4905
5018
|
}
|
|
4906
5019
|
@media (pointer: coarse){
|
|
4907
|
-
.bp_base_grid_list_item_module_largeList--
|
|
5020
|
+
.bp_base_grid_list_item_module_largeList--08322 .bp_base_grid_list_item_module_largeListItem--08322 .bp_base_grid_list_item_module_actions--08322{
|
|
4908
5021
|
--actions-opacity:1;
|
|
4909
5022
|
}
|
|
4910
5023
|
}
|
|
4911
|
-
.bp_base_grid_list_item_module_largeList--
|
|
5024
|
+
.bp_base_grid_list_item_module_largeList--08322 .bp_base_grid_list_item_module_largeListItem--08322 .bp_base_grid_list_item_module_actions--08322 .bp_base_grid_list_item_module_selection--08322{
|
|
4912
5025
|
align-items:center;
|
|
4913
5026
|
background:var(--item-background);
|
|
4914
5027
|
border-radius:var(--radius-2);
|
|
@@ -4917,15 +5030,15 @@
|
|
|
4917
5030
|
justify-content:center;
|
|
4918
5031
|
width:var(--space-8);
|
|
4919
5032
|
}
|
|
4920
|
-
.bp_base_grid_list_item_module_largeList--
|
|
5033
|
+
.bp_base_grid_list_item_module_largeList--08322 .bp_base_grid_list_item_module_largeListItem--08322 .bp_base_grid_list_item_module_actions--08322 .bp_base_grid_list_item_module_selection--08322:hover{
|
|
4921
5034
|
background:var(--surface-cta-surface-icon-hover);
|
|
4922
5035
|
}
|
|
4923
|
-
.bp_base_grid_list_item_module_largeList--
|
|
5036
|
+
.bp_base_grid_list_item_module_largeList--08322 .bp_base_grid_list_item_module_largeListItem--08322 .bp_base_grid_list_item_module_actions--08322 .bp_base_grid_list_item_module_fade--08322{
|
|
4924
5037
|
align-self:stretch;
|
|
4925
5038
|
background:linear-gradient(270deg, #fff 0, #fff0 100%);
|
|
4926
5039
|
width:var(--size-8);
|
|
4927
5040
|
}
|
|
4928
|
-
.bp_base_grid_list_item_module_largeList--
|
|
5041
|
+
.bp_base_grid_list_item_module_largeList--08322 .bp_base_grid_list_item_module_largeListItem--08322 .bp_base_grid_list_item_module_actions--08322 .bp_base_grid_list_item_module_inner--08322{
|
|
4929
5042
|
align-items:center;
|
|
4930
5043
|
background:var(--item-background);
|
|
4931
5044
|
border-radius:var(--radius-2);
|
|
@@ -4934,14 +5047,14 @@
|
|
|
4934
5047
|
justify-content:flex-end;
|
|
4935
5048
|
margin-inline-end:var(--space-2);
|
|
4936
5049
|
}
|
|
4937
|
-
.bp_base_grid_list_item_module_largeList--
|
|
5050
|
+
.bp_base_grid_list_item_module_largeList--08322 .bp_base_grid_list_item_module_largeListItem--08322 .bp_base_grid_list_item_module_actions--08322 .bp_base_grid_list_item_module_inner--08322:last-child{
|
|
4938
5051
|
margin-inline-end:0;
|
|
4939
5052
|
}
|
|
4940
|
-
.bp_base_grid_list_item_module_largeList--
|
|
5053
|
+
.bp_base_grid_list_item_module_largeList--08322 .bp_base_grid_list_item_module_largeListItem--08322 .bp_base_grid_list_item_module_actions--08322 .bp_base_grid_list_item_module_actionsCheckboxWrapper--08322{
|
|
4941
5054
|
background:var(--item-background);
|
|
4942
5055
|
display:flex;
|
|
4943
5056
|
}
|
|
4944
|
-
.bp_base_grid_list_item_module_largeList--
|
|
5057
|
+
.bp_base_grid_list_item_module_largeList--08322 .bp_base_grid_list_item_module_largeListItem--08322 .bp_base_grid_list_item_module_header--08322{
|
|
4945
5058
|
align-items:center;
|
|
4946
5059
|
color:var(--text-text-on-light);
|
|
4947
5060
|
display:inline-flex;
|
|
@@ -4959,7 +5072,7 @@
|
|
|
4959
5072
|
text-transform:var(--body-default-semibold-text-case);
|
|
4960
5073
|
white-space:nowrap;
|
|
4961
5074
|
}
|
|
4962
|
-
.bp_base_grid_list_item_module_largeList--
|
|
5075
|
+
.bp_base_grid_list_item_module_largeList--08322 .bp_base_grid_list_item_module_largeListItem--08322 .bp_base_grid_list_item_module_subtitle--08322{
|
|
4963
5076
|
align-items:center;
|
|
4964
5077
|
color:var(--text-text-on-light-secondary);
|
|
4965
5078
|
display:flex;
|
|
@@ -4975,7 +5088,7 @@
|
|
|
4975
5088
|
text-transform:var(--caption-default-text-case);
|
|
4976
5089
|
white-space:nowrap;
|
|
4977
5090
|
}
|
|
4978
|
-
.bp_base_grid_list_item_module_largeList--
|
|
5091
|
+
.bp_base_grid_list_item_module_largeList--08322 .bp_base_grid_list_item_module_largeListItem--08322 .bp_base_grid_list_item_module_description--08322{
|
|
4979
5092
|
-webkit-box-orient:vertical;
|
|
4980
5093
|
-webkit-line-clamp:3;
|
|
4981
5094
|
color:var(--text-text-on-light);
|
|
@@ -4994,13 +5107,13 @@
|
|
|
4994
5107
|
text-decoration:var(--body-default-text-decoration);
|
|
4995
5108
|
text-transform:var(--body-default-text-case);
|
|
4996
5109
|
}
|
|
4997
|
-
.bp_base_grid_list_item_module_largeList--
|
|
5110
|
+
.bp_base_grid_list_item_module_largeList--08322 .bp_base_grid_list_item_module_largeListItem--08322 .bp_base_grid_list_item_module_snippet--08322{
|
|
4998
5111
|
grid-area:description;
|
|
4999
5112
|
margin:0;
|
|
5000
5113
|
margin-block-end:var(--space-1);
|
|
5001
5114
|
margin-block-start:var(--space-3);
|
|
5002
5115
|
}
|
|
5003
|
-
.bp_base_grid_list_item_module_largeList--
|
|
5116
|
+
.bp_base_grid_list_item_module_largeList--08322 .bp_base_grid_list_item_module_largeListItem--08322 .bp_base_grid_list_item_module_snippet--08322 .bp_base_grid_list_item_module_snippetContent--08322{
|
|
5004
5117
|
-webkit-box-orient:vertical;
|
|
5005
5118
|
-webkit-line-clamp:2;
|
|
5006
5119
|
border:0 0 0 var(--space-05);
|
|
@@ -5020,12 +5133,12 @@
|
|
|
5020
5133
|
text-decoration:var(--body-default-text-decoration);
|
|
5021
5134
|
text-transform:var(--body-default-text-case);
|
|
5022
5135
|
}
|
|
5023
|
-
.bp_base_grid_list_item_module_largeList--
|
|
5136
|
+
.bp_base_grid_list_item_module_largeList--08322 .bp_base_grid_list_item_module_largeListItem--08322:hover,.bp_base_grid_list_item_module_largeList--08322 .bp_base_grid_list_item_module_largeListItem--08322[data-active-item],.bp_base_grid_list_item_module_largeList--08322 .bp_base_grid_list_item_module_largeListItem--08322[data-focus-visible],.bp_base_grid_list_item_module_largeList--08322 .bp_base_grid_list_item_module_largeListItem--08322[data-focused],.bp_base_grid_list_item_module_largeList--08322 .bp_base_grid_list_item_module_largeListItem--08322[data-hovered]{
|
|
5024
5137
|
--actions-opacity:1;
|
|
5025
5138
|
box-shadow:var(--dropshadow-2);
|
|
5026
5139
|
outline:var(--border-1) solid var(--border-card-border);
|
|
5027
5140
|
}
|
|
5028
|
-
.bp_base_grid_list_item_module_largeList--
|
|
5141
|
+
.bp_base_grid_list_item_module_largeList--08322 .bp_base_grid_list_item_module_largeListItem--08322[data-active-item]::before,.bp_base_grid_list_item_module_largeList--08322 .bp_base_grid_list_item_module_largeListItem--08322[data-focus-visible]::before{
|
|
5029
5142
|
border-radius:.875rem;
|
|
5030
5143
|
content:"";
|
|
5031
5144
|
display:block;
|
|
@@ -5037,130 +5150,212 @@
|
|
|
5037
5150
|
top:0;
|
|
5038
5151
|
width:100%;
|
|
5039
5152
|
}
|
|
5040
|
-
.bp_base_grid_list_item_module_largeList--
|
|
5153
|
+
.bp_base_grid_list_item_module_largeList--08322 .bp_base_grid_list_item_module_largeListItem--08322[aria-selected=true]{
|
|
5041
5154
|
--actions-opacity:1;
|
|
5042
5155
|
--item-background:var(--box-blue-05);
|
|
5043
5156
|
outline:var(--border-2) solid var(--border-card-border-focus);
|
|
5044
5157
|
z-index:2;
|
|
5045
5158
|
}
|
|
5046
|
-
.bp_base_grid_list_item_module_largeList--
|
|
5159
|
+
.bp_base_grid_list_item_module_largeList--08322 .bp_base_grid_list_item_module_largeListItem--08322[aria-selected=true] .bp_base_grid_list_item_module_actions--08322 .bp_base_grid_list_item_module_fade--08322{
|
|
5047
5160
|
background:linear-gradient(270deg, #f2f7fd 0, #f2f7fd00 100%);
|
|
5048
5161
|
}
|
|
5049
|
-
.bp_base_grid_list_item_module_largeList--
|
|
5162
|
+
.bp_base_grid_list_item_module_largeList--08322 .bp_base_grid_list_item_module_largeListItem--08322[aria-selected=true]:not([data-hovered], [data-focus-visible], [data-focused]) .bp_base_grid_list_item_module_actions--08322 .bp_base_grid_list_item_module_inner--08322{
|
|
5050
5163
|
display:none;
|
|
5051
5164
|
}
|
|
5052
5165
|
@supports selector(:has(.foo)){
|
|
5053
|
-
.bp_base_grid_list_item_module_largeList--
|
|
5166
|
+
.bp_base_grid_list_item_module_largeList--08322 .bp_base_grid_list_item_module_largeListItem--08322[aria-selected=true]:has(+ .bp_base_grid_list_item_module_react-aria-DropIndicator--08322 + [aria-selected=true]),.bp_base_grid_list_item_module_largeList--08322 .bp_base_grid_list_item_module_largeListItem--08322[aria-selected=true]:has(+ [aria-selected=true]){
|
|
5054
5167
|
border-end-end-radius:0;
|
|
5055
5168
|
border-end-start-radius:0;
|
|
5056
5169
|
}
|
|
5057
|
-
.bp_base_grid_list_item_module_largeList--
|
|
5170
|
+
.bp_base_grid_list_item_module_largeList--08322 .bp_base_grid_list_item_module_largeListItem--08322[aria-selected=true] + .bp_base_grid_list_item_module_react-aria-DropIndicator--08322 + [aria-selected=true],.bp_base_grid_list_item_module_largeList--08322 .bp_base_grid_list_item_module_largeListItem--08322[aria-selected=true] + [aria-selected=true]{
|
|
5058
5171
|
border-start-end-radius:0;
|
|
5059
5172
|
border-start-start-radius:0;
|
|
5060
5173
|
border-top:none;
|
|
5061
5174
|
}
|
|
5062
5175
|
}
|
|
5063
5176
|
|
|
5064
|
-
.bp_base_grid_list_item_module_gridList--
|
|
5177
|
+
.bp_base_grid_list_item_module_gridList--08322[data-modern=false]{
|
|
5178
|
+
--grid-list-minimum-item-width:188px;
|
|
5179
|
+
--grid-list-gap:var(--space-4);
|
|
5180
|
+
--grid-list-padding:var(--space-1);
|
|
5181
|
+
--grid-list-thumbnail-min-size:7rem;
|
|
5182
|
+
--grid-list-header-height:var(--space-10);
|
|
5183
|
+
--grid-list-subtitle-height:var(--space-4);
|
|
5184
|
+
--grid-list-actions-height:var(--space-8);
|
|
5185
|
+
--grid-list-item-padding:var(--space-2);
|
|
5186
|
+
--grid-list-item-background:var(--gray-white);
|
|
5187
|
+
--grid-list-item-border-radius:var(--radius-3);
|
|
5188
|
+
--grid-list-item-row-gap:var(--space-2);
|
|
5189
|
+
--grid-list-item-status-pin-top:var(--space-3);
|
|
5190
|
+
--grid-list-item-status-pin-left:var(--space-3);
|
|
5191
|
+
--grid-list-thumbnail-background:var(--gray-white);
|
|
5192
|
+
--grid-list-thumbnail-border:var(--border-1) solid var(--border-gridthumbnail-border);
|
|
5193
|
+
--grid-list-thumbnail-border-radius:var(--radius-3);
|
|
5194
|
+
--grid-list-thumbnail-aspect-ratio:4/3;
|
|
5195
|
+
--grid-list-actions-margin-block-start:-.25rem;
|
|
5196
|
+
--grid-list-selection-top:var(--space-2);
|
|
5197
|
+
--grid-list-selection-right:var(--space-2);
|
|
5198
|
+
--grid-list-selection-width:var(--space-8);
|
|
5199
|
+
--grid-list-selection-height:var(--space-8);
|
|
5200
|
+
--grid-list-selection-border-radius:var(--radius-2);
|
|
5201
|
+
--grid-list-selection-hover-background:var(--surface-cta-surface-icon-hover);
|
|
5202
|
+
--grid-list-actions-inner-gap:var(--space-4);
|
|
5203
|
+
--grid-list-actions-inner-border-radius:var(--radius-2);
|
|
5204
|
+
--grid-list-header-color:var(--text-text-on-light);
|
|
5205
|
+
--grid-list-subtitle-color:var(--text-text-on-light-secondary);
|
|
5206
|
+
--grid-list-subtitle-loading-height:1.25rem;
|
|
5207
|
+
--grid-list-item-hover-outline:var(--border-1) solid var(--border-card-border);
|
|
5208
|
+
--grid-list-item-hover-box-shadow:var(--dropshadow-2);
|
|
5209
|
+
--grid-list-item-focus-outline:var(--border-2) solid var(--outline-focus-on-light);
|
|
5210
|
+
--grid-list-item-focus-outline-offset:-3px;
|
|
5211
|
+
--grid-list-item-focus-after-outline:var(--border-1) solid var(--gray-white);
|
|
5212
|
+
--grid-list-item-focus-after-outline-offset:-1px;
|
|
5213
|
+
--grid-list-item-selected-background:var(--box-blue-05);
|
|
5214
|
+
--grid-list-item-selected-outline:var(--border-2) solid var(--border-card-border-focus);
|
|
5215
|
+
--grid-list-item-coarse-row-gap:var(--space-1);
|
|
5216
|
+
}
|
|
5217
|
+
|
|
5218
|
+
.bp_base_grid_list_item_module_gridList--08322[data-modern=true]{
|
|
5219
|
+
--grid-list-minimum-item-width:188px;
|
|
5220
|
+
--grid-list-gap:var(--bp-space-040);
|
|
5221
|
+
--grid-list-padding:var(--bp-space-010);
|
|
5222
|
+
--grid-list-thumbnail-min-size:7rem;
|
|
5223
|
+
--grid-list-header-height:var(--bp-size-100);
|
|
5224
|
+
--grid-list-subtitle-height:var(--bp-size-040);
|
|
5225
|
+
--grid-list-actions-height:var(--bp-size-080);
|
|
5226
|
+
--grid-list-item-padding:var(--bp-space-020);
|
|
5227
|
+
--grid-list-item-background:var(--bp-gray-white);
|
|
5228
|
+
--grid-list-item-border-radius:var(--bp-radius-10);
|
|
5229
|
+
--grid-list-item-row-gap:var(--bp-space-020);
|
|
5230
|
+
--grid-list-item-status-pin-top:var(--bp-space-030);
|
|
5231
|
+
--grid-list-item-status-pin-left:var(--bp-space-030);
|
|
5232
|
+
--grid-list-thumbnail-background:var(--bp-gray-white);
|
|
5233
|
+
--grid-list-thumbnail-border:var(--bp-border-01) solid var(--bp-border-grid-thumbnail-border);
|
|
5234
|
+
--grid-list-thumbnail-border-radius:var(--bp-radius-06);
|
|
5235
|
+
--grid-list-thumbnail-aspect-ratio:4/3;
|
|
5236
|
+
--grid-list-actions-margin-block-start:-.25rem;
|
|
5237
|
+
--grid-list-selection-top:var(--bp-space-020);
|
|
5238
|
+
--grid-list-selection-right:var(--bp-space-020);
|
|
5239
|
+
--grid-list-selection-width:var(--bp-size-080);
|
|
5240
|
+
--grid-list-selection-height:var(--bp-size-080);
|
|
5241
|
+
--grid-list-selection-border-radius:var(--bp-radius-10);
|
|
5242
|
+
--grid-list-selection-hover-background:var(--bp-surface-cta-surface-icon-hover);
|
|
5243
|
+
--grid-list-actions-inner-gap:var(--bp-space-040);
|
|
5244
|
+
--grid-list-actions-inner-border-radius:var(--bp-radius-02);
|
|
5245
|
+
--grid-list-header-color:var(--bp-text-text-on-light);
|
|
5246
|
+
--grid-list-subtitle-color:var(--bp-text-text-on-light-secondary);
|
|
5247
|
+
--grid-list-subtitle-loading-height:var(--bp-size-050);
|
|
5248
|
+
--grid-list-item-hover-outline:var(--bp-border-list-item-border);
|
|
5249
|
+
--grid-list-item-hover-box-shadow:var(--dropshadow-3);
|
|
5250
|
+
--grid-list-item-focus-outline:var(--bp-border-02) solid var(--bp-outline-focus-on-light);
|
|
5251
|
+
--grid-list-item-focus-outline-offset:-3px;
|
|
5252
|
+
--grid-list-item-focus-after-outline:var(--bp-border-01) solid var(--bp-gray-white);
|
|
5253
|
+
--grid-list-item-focus-after-outline-offset:-1px;
|
|
5254
|
+
--grid-list-item-selected-background:var(--bp-surface-list-item-surface-selected);
|
|
5255
|
+
--grid-list-item-selected-outline:var(--bp-border-02) solid var(--bp-border-list-item-border-selected);
|
|
5256
|
+
--grid-list-item-coarse-row-gap:var(--bp-space-010);
|
|
5257
|
+
}
|
|
5258
|
+
|
|
5259
|
+
.bp_base_grid_list_item_module_gridList--08322{
|
|
5065
5260
|
box-sizing:border-box;
|
|
5066
5261
|
display:grid;
|
|
5067
|
-
gap:var(--
|
|
5068
|
-
grid-template-columns:repeat(auto-fit, minmax(
|
|
5262
|
+
gap:var(--grid-list-gap);
|
|
5263
|
+
grid-template-columns:repeat(auto-fit, minmax(var(--grid-list-minimum-item-width), 1fr));
|
|
5069
5264
|
max-height:inherit;
|
|
5070
5265
|
outline:none;
|
|
5071
5266
|
overflow:auto;
|
|
5072
|
-
padding:var(--
|
|
5267
|
+
padding:var(--grid-list-padding);
|
|
5073
5268
|
}
|
|
5074
|
-
.bp_base_grid_list_item_module_gridList--
|
|
5269
|
+
.bp_base_grid_list_item_module_gridList--08322 .bp_base_grid_list_item_module_gridListItem--08322{
|
|
5075
5270
|
--actions-opacity:0;
|
|
5076
|
-
--item-background:var(--
|
|
5077
|
-
--row-gap:var(--
|
|
5271
|
+
--item-background:var(--grid-list-item-background);
|
|
5272
|
+
--row-gap:var(--grid-list-item-row-gap);
|
|
5078
5273
|
background:var(--item-background);
|
|
5079
|
-
border-radius:var(--radius
|
|
5274
|
+
border-radius:var(--grid-list-item-border-radius);
|
|
5080
5275
|
cursor:default;
|
|
5081
5276
|
display:grid;
|
|
5082
5277
|
grid-template-areas:"thumbnail" "head" "subtitle";
|
|
5083
5278
|
grid-template-columns:1fr;
|
|
5084
|
-
grid-template-rows:minmax(
|
|
5279
|
+
grid-template-rows:minmax(var(--grid-list-thumbnail-min-size), auto) var(--grid-list-header-height) minmax(var(--grid-list-subtitle-height), var(--grid-list-actions-height));
|
|
5085
5280
|
justify-content:center;
|
|
5086
5281
|
outline:none;
|
|
5087
|
-
padding:var(--
|
|
5282
|
+
padding:var(--grid-list-item-padding);
|
|
5088
5283
|
position:relative;
|
|
5089
5284
|
row-gap:var(--row-gap);
|
|
5090
5285
|
transform:translateZ(0);
|
|
5091
5286
|
}
|
|
5092
|
-
.bp_base_grid_list_item_module_gridList--
|
|
5287
|
+
.bp_base_grid_list_item_module_gridList--08322 .bp_base_grid_list_item_module_gridListItem--08322:focus-within{
|
|
5093
5288
|
--actions-opacity:1;
|
|
5094
5289
|
}
|
|
5095
|
-
.bp_base_grid_list_item_module_gridList--
|
|
5096
|
-
left:var(--
|
|
5290
|
+
.bp_base_grid_list_item_module_gridList--08322 .bp_base_grid_list_item_module_gridListItem--08322 .bp_base_grid_list_item_module_statusPin--08322{
|
|
5291
|
+
left:var(--grid-list-item-status-pin-left);
|
|
5097
5292
|
position:absolute;
|
|
5098
|
-
top:var(--
|
|
5293
|
+
top:var(--grid-list-item-status-pin-top);
|
|
5099
5294
|
}
|
|
5100
|
-
.bp_base_grid_list_item_module_gridList--
|
|
5101
|
-
aspect-ratio:
|
|
5102
|
-
background:var(--
|
|
5103
|
-
border:var(--
|
|
5104
|
-
border-radius:var(--radius
|
|
5295
|
+
.bp_base_grid_list_item_module_gridList--08322 .bp_base_grid_list_item_module_gridListItem--08322 .bp_base_grid_list_item_module_thumbnail--08322{
|
|
5296
|
+
aspect-ratio:var(--grid-list-thumbnail-aspect-ratio);
|
|
5297
|
+
background:var(--grid-list-thumbnail-background);
|
|
5298
|
+
border:var(--grid-list-thumbnail-border);
|
|
5299
|
+
border-radius:var(--grid-list-thumbnail-border-radius);
|
|
5105
5300
|
grid-area:thumbnail;
|
|
5106
5301
|
overflow:hidden;
|
|
5107
5302
|
}
|
|
5108
|
-
.bp_base_grid_list_item_module_gridList--
|
|
5303
|
+
.bp_base_grid_list_item_module_gridList--08322 .bp_base_grid_list_item_module_gridListItem--08322 .bp_base_grid_list_item_module_thumbnail--08322 img{
|
|
5109
5304
|
height:100%;
|
|
5110
5305
|
object-fit:contain;
|
|
5111
5306
|
width:100%;
|
|
5112
5307
|
}
|
|
5113
|
-
.bp_base_grid_list_item_module_gridList--
|
|
5308
|
+
.bp_base_grid_list_item_module_gridList--08322 .bp_base_grid_list_item_module_gridListItem--08322 .bp_base_grid_list_item_module_thumbnail--08322.bp_base_grid_list_item_module_loading--08322{
|
|
5114
5309
|
border:none;
|
|
5115
5310
|
}
|
|
5116
5311
|
@media (pointer: coarse){
|
|
5117
|
-
.bp_base_grid_list_item_module_gridList--
|
|
5312
|
+
.bp_base_grid_list_item_module_gridList--08322 .bp_base_grid_list_item_module_gridListItem--08322 .bp_base_grid_list_item_module_thumbnail--08322{
|
|
5118
5313
|
margin-block-end:var(--space-1);
|
|
5119
5314
|
}
|
|
5120
5315
|
}
|
|
5121
|
-
.bp_base_grid_list_item_module_gridList--
|
|
5316
|
+
.bp_base_grid_list_item_module_gridList--08322 .bp_base_grid_list_item_module_gridListItem--08322 .bp_base_grid_list_item_module_actions--08322{
|
|
5122
5317
|
grid-area:subtitle;
|
|
5123
|
-
margin-block-start
|
|
5318
|
+
margin-block-start:var(--grid-list-actions-margin-block-start);
|
|
5124
5319
|
opacity:var(--actions-opacity);
|
|
5125
5320
|
}
|
|
5126
|
-
.bp_base_grid_list_item_module_gridList--
|
|
5321
|
+
.bp_base_grid_list_item_module_gridList--08322 .bp_base_grid_list_item_module_gridListItem--08322 .bp_base_grid_list_item_module_actions--08322 .bp_base_grid_list_item_module_selection--08322{
|
|
5127
5322
|
align-items:center;
|
|
5128
|
-
border-radius:var(--radius
|
|
5323
|
+
border-radius:var(--grid-list-selection-border-radius);
|
|
5129
5324
|
display:flex;
|
|
5130
|
-
height:var(--
|
|
5325
|
+
height:var(--grid-list-selection-height);
|
|
5131
5326
|
justify-content:center;
|
|
5132
5327
|
position:absolute;
|
|
5133
|
-
right:var(--
|
|
5134
|
-
top:var(--
|
|
5135
|
-
width:var(--
|
|
5328
|
+
right:var(--grid-list-selection-right);
|
|
5329
|
+
top:var(--grid-list-selection-top);
|
|
5330
|
+
width:var(--grid-list-selection-width);
|
|
5136
5331
|
}
|
|
5137
|
-
.bp_base_grid_list_item_module_gridList--
|
|
5138
|
-
background:var(--
|
|
5332
|
+
.bp_base_grid_list_item_module_gridList--08322 .bp_base_grid_list_item_module_gridListItem--08322 .bp_base_grid_list_item_module_actions--08322 .bp_base_grid_list_item_module_selection--08322:hover{
|
|
5333
|
+
background:var(--grid-list-selection-hover-background);
|
|
5139
5334
|
}
|
|
5140
|
-
.bp_base_grid_list_item_module_gridList--
|
|
5335
|
+
.bp_base_grid_list_item_module_gridList--08322 .bp_base_grid_list_item_module_gridListItem--08322 .bp_base_grid_list_item_module_actions--08322 .bp_base_grid_list_item_module_inner--08322{
|
|
5141
5336
|
align-items:center;
|
|
5142
5337
|
background:var(--item-background);
|
|
5143
|
-
border-radius:var(--radius
|
|
5338
|
+
border-radius:var(--grid-list-actions-inner-border-radius);
|
|
5144
5339
|
display:flex;
|
|
5145
|
-
gap:var(--
|
|
5340
|
+
gap:var(--grid-list-actions-inner-gap);
|
|
5146
5341
|
justify-content:center;
|
|
5147
5342
|
}
|
|
5148
5343
|
@media (pointer: coarse){
|
|
5149
|
-
.bp_base_grid_list_item_module_gridList--
|
|
5344
|
+
.bp_base_grid_list_item_module_gridList--08322 .bp_base_grid_list_item_module_gridListItem--08322 .bp_base_grid_list_item_module_actions--08322{
|
|
5150
5345
|
grid-area:actions;
|
|
5151
5346
|
margin-block-start:0;
|
|
5152
5347
|
}
|
|
5153
5348
|
}
|
|
5154
|
-
.bp_base_grid_list_item_module_gridList--
|
|
5349
|
+
.bp_base_grid_list_item_module_gridList--08322 .bp_base_grid_list_item_module_gridListItem--08322 .bp_base_grid_list_item_module_header--08322{
|
|
5155
5350
|
-webkit-box-orient:vertical;
|
|
5156
5351
|
-webkit-line-clamp:2;
|
|
5157
|
-
color:var(--
|
|
5352
|
+
color:var(--grid-list-header-color);
|
|
5158
5353
|
display:-webkit-box;
|
|
5159
5354
|
font-family:var(--body-default-font-family);
|
|
5160
5355
|
font-size:var(--body-default-font-size);
|
|
5161
5356
|
font-weight:var(--body-default-font-weight);
|
|
5162
5357
|
grid-area:head;
|
|
5163
|
-
height:var(--
|
|
5358
|
+
height:var(--grid-list-header-height);
|
|
5164
5359
|
letter-spacing:var(--body-default-letter-spacing);
|
|
5165
5360
|
line-height:var(--body-default-line-height);
|
|
5166
5361
|
overflow:hidden;
|
|
@@ -5169,17 +5364,17 @@
|
|
|
5169
5364
|
text-decoration:var(--body-default-text-decoration);
|
|
5170
5365
|
text-transform:var(--body-default-text-case);
|
|
5171
5366
|
}
|
|
5172
|
-
.bp_base_grid_list_item_module_gridList--
|
|
5367
|
+
.bp_base_grid_list_item_module_gridList--08322 .bp_base_grid_list_item_module_gridListItem--08322 .bp_base_grid_list_item_module_header--08322.bp_base_grid_list_item_module_loading--08322{
|
|
5173
5368
|
align-items:center;
|
|
5174
5369
|
display:flex;
|
|
5175
5370
|
}
|
|
5176
|
-
.bp_base_grid_list_item_module_gridList--
|
|
5177
|
-
color:var(--
|
|
5371
|
+
.bp_base_grid_list_item_module_gridList--08322 .bp_base_grid_list_item_module_gridListItem--08322 .bp_base_grid_list_item_module_subtitle--08322{
|
|
5372
|
+
color:var(--grid-list-subtitle-color);
|
|
5178
5373
|
font-family:var(--caption-default-font-family);
|
|
5179
5374
|
font-size:var(--caption-default-font-size);
|
|
5180
5375
|
font-weight:var(--caption-default-font-weight);
|
|
5181
5376
|
grid-area:subtitle;
|
|
5182
|
-
height:var(--
|
|
5377
|
+
height:var(--grid-list-subtitle-height);
|
|
5183
5378
|
letter-spacing:var(--caption-default-letter-spacing);
|
|
5184
5379
|
line-height:var(--caption-default-line-height);
|
|
5185
5380
|
overflow:hidden;
|
|
@@ -5190,56 +5385,56 @@
|
|
|
5190
5385
|
text-transform:var(--caption-default-text-case);
|
|
5191
5386
|
white-space:nowrap;
|
|
5192
5387
|
}
|
|
5193
|
-
.bp_base_grid_list_item_module_gridList--
|
|
5194
|
-
height:
|
|
5388
|
+
.bp_base_grid_list_item_module_gridList--08322 .bp_base_grid_list_item_module_gridListItem--08322 .bp_base_grid_list_item_module_subtitle--08322.bp_base_grid_list_item_module_loading--08322{
|
|
5389
|
+
height:var(--grid-list-subtitle-loading-height);
|
|
5195
5390
|
}
|
|
5196
|
-
.bp_base_grid_list_item_module_gridList--
|
|
5391
|
+
.bp_base_grid_list_item_module_gridList--08322 .bp_base_grid_list_item_module_gridListItem--08322.bp_base_grid_list_item_module_isItemInteracted--08322,.bp_base_grid_list_item_module_gridList--08322 .bp_base_grid_list_item_module_gridListItem--08322:hover,.bp_base_grid_list_item_module_gridList--08322 .bp_base_grid_list_item_module_gridListItem--08322[data-active-item],.bp_base_grid_list_item_module_gridList--08322 .bp_base_grid_list_item_module_gridListItem--08322[data-focus-visible],.bp_base_grid_list_item_module_gridList--08322 .bp_base_grid_list_item_module_gridListItem--08322[data-focused],.bp_base_grid_list_item_module_gridList--08322 .bp_base_grid_list_item_module_gridListItem--08322[data-hovered]{
|
|
5197
5392
|
--actions-opacity:1;
|
|
5198
|
-
box-shadow:var(--
|
|
5199
|
-
outline:var(--
|
|
5393
|
+
box-shadow:var(--grid-list-item-hover-box-shadow);
|
|
5394
|
+
outline:var(--grid-list-item-hover-outline);
|
|
5200
5395
|
}
|
|
5201
|
-
.bp_base_grid_list_item_module_gridList--
|
|
5202
|
-
border-radius:var(--radius
|
|
5396
|
+
.bp_base_grid_list_item_module_gridList--08322 .bp_base_grid_list_item_module_gridListItem--08322[data-active-item]::before,.bp_base_grid_list_item_module_gridList--08322 .bp_base_grid_list_item_module_gridListItem--08322[data-focus-visible]::before{
|
|
5397
|
+
border-radius:var(--grid-list-item-border-radius);
|
|
5203
5398
|
content:"";
|
|
5204
5399
|
display:block;
|
|
5205
5400
|
height:100%;
|
|
5206
5401
|
left:0;
|
|
5207
|
-
outline:var(--
|
|
5208
|
-
outline-offset
|
|
5402
|
+
outline:var(--grid-list-item-focus-outline);
|
|
5403
|
+
outline-offset:var(--grid-list-item-focus-outline-offset);
|
|
5209
5404
|
position:absolute;
|
|
5210
5405
|
top:0;
|
|
5211
5406
|
width:100%;
|
|
5212
5407
|
}
|
|
5213
|
-
.bp_base_grid_list_item_module_gridList--
|
|
5214
|
-
border-radius:var(--radius
|
|
5408
|
+
.bp_base_grid_list_item_module_gridList--08322 .bp_base_grid_list_item_module_gridListItem--08322[data-active-item]::after,.bp_base_grid_list_item_module_gridList--08322 .bp_base_grid_list_item_module_gridListItem--08322[data-focus-visible]::after{
|
|
5409
|
+
border-radius:var(--grid-list-item-border-radius);
|
|
5215
5410
|
content:"";
|
|
5216
5411
|
display:block;
|
|
5217
5412
|
height:100%;
|
|
5218
5413
|
left:0;
|
|
5219
|
-
outline:var(--
|
|
5220
|
-
outline-offset
|
|
5414
|
+
outline:var(--grid-list-item-focus-after-outline);
|
|
5415
|
+
outline-offset:var(--grid-list-item-focus-after-outline-offset);
|
|
5221
5416
|
position:absolute;
|
|
5222
5417
|
top:0;
|
|
5223
5418
|
width:100%;
|
|
5224
5419
|
}
|
|
5225
|
-
.bp_base_grid_list_item_module_gridList--
|
|
5420
|
+
.bp_base_grid_list_item_module_gridList--08322 .bp_base_grid_list_item_module_gridListItem--08322[aria-selected=true]{
|
|
5226
5421
|
--actions-opacity:1;
|
|
5227
|
-
--item-background:var(--
|
|
5228
|
-
outline:var(--
|
|
5422
|
+
--item-background:var(--grid-list-item-selected-background);
|
|
5423
|
+
outline:var(--grid-list-item-selected-outline);
|
|
5229
5424
|
}
|
|
5230
|
-
.bp_base_grid_list_item_module_gridList--
|
|
5425
|
+
.bp_base_grid_list_item_module_gridList--08322 .bp_base_grid_list_item_module_gridListItem--08322[aria-selected=true]:not([data-hovered], [data-focus-visible], [data-focused], .bp_base_grid_list_item_module_isItemInteracted--08322) .bp_base_grid_list_item_module_actions--08322 .bp_base_grid_list_item_module_inner--08322{
|
|
5231
5426
|
opacity:0;
|
|
5232
5427
|
}
|
|
5233
5428
|
@media (pointer: coarse){
|
|
5234
|
-
.bp_base_grid_list_item_module_gridList--
|
|
5235
|
-
--row-gap:var(--
|
|
5429
|
+
.bp_base_grid_list_item_module_gridList--08322 .bp_base_grid_list_item_module_gridListItem--08322{
|
|
5430
|
+
--row-gap:var(--grid-list-item-coarse-row-gap);
|
|
5236
5431
|
--actions-opacity:1;
|
|
5237
5432
|
grid-template-areas:"thumbnail" "head" "subtitle" "actions";
|
|
5238
|
-
grid-template-rows:minmax(
|
|
5433
|
+
grid-template-rows:minmax(var(--grid-list-thumbnail-min-size), auto) var(--grid-list-header-height) var(--grid-list-subtitle-height) var(--grid-list-actions-height);
|
|
5239
5434
|
}
|
|
5240
5435
|
}
|
|
5241
5436
|
|
|
5242
|
-
.bp_base_grid_list_item_module_tooltipContent--
|
|
5437
|
+
.bp_base_grid_list_item_module_tooltipContent--08322{
|
|
5243
5438
|
background-color:var(--surface-tooltip-surface);
|
|
5244
5439
|
border:var(--border-1) solid var(--surface-tooltip-surface);
|
|
5245
5440
|
border-radius:var(--radius-1);
|
|
@@ -5258,28 +5453,28 @@
|
|
|
5258
5453
|
word-break:break-word;
|
|
5259
5454
|
z-index:2147483647;
|
|
5260
5455
|
}
|
|
5261
|
-
.bp_base_grid_list_item_module_tooltipContent--
|
|
5456
|
+
.bp_base_grid_list_item_module_tooltipContent--08322 .bp_base_grid_list_item_module_tooltipArrow--08322 svg{
|
|
5262
5457
|
display:block;
|
|
5263
5458
|
height:.5rem;
|
|
5264
5459
|
width:1rem;
|
|
5265
5460
|
}
|
|
5266
|
-
.bp_base_grid_list_item_module_tooltipContent--
|
|
5461
|
+
.bp_base_grid_list_item_module_tooltipContent--08322[data-placement=top]{
|
|
5267
5462
|
margin-block-end:var(--space-2);
|
|
5268
5463
|
}
|
|
5269
|
-
.bp_base_grid_list_item_module_tooltipContent--
|
|
5464
|
+
.bp_base_grid_list_item_module_tooltipContent--08322[data-placement=top] .bp_base_grid_list_item_module_tooltipArrow--08322 svg{
|
|
5270
5465
|
transform:rotate(180deg);
|
|
5271
5466
|
}
|
|
5272
|
-
.bp_base_grid_list_item_module_tooltipContent--
|
|
5467
|
+
.bp_base_grid_list_item_module_tooltipContent--08322[data-placement=bottom]{
|
|
5273
5468
|
margin-block-start:var(--space-2);
|
|
5274
5469
|
}
|
|
5275
|
-
.bp_base_grid_list_item_module_tooltipContent--
|
|
5470
|
+
.bp_base_grid_list_item_module_tooltipContent--08322[data-placement=right]{
|
|
5276
5471
|
margin-inline-start:var(--space-2);
|
|
5277
5472
|
}
|
|
5278
|
-
.bp_base_grid_list_item_module_tooltipContent--
|
|
5473
|
+
.bp_base_grid_list_item_module_tooltipContent--08322[data-placement=left]{
|
|
5279
5474
|
margin-inline-end:var(--space-2);
|
|
5280
5475
|
}
|
|
5281
5476
|
|
|
5282
|
-
.bp_base_grid_list_item_module_staticList--
|
|
5477
|
+
.bp_base_grid_list_item_module_staticList--08322 .bp_base_grid_list_item_module_staticListItem--08322{
|
|
5283
5478
|
display:contents;
|
|
5284
5479
|
}
|
|
5285
5480
|
.bp_guided_tooltip_module_content--47a15{
|
|
@@ -2,6 +2,7 @@ import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
|
|
|
2
2
|
import { IconIconOnLight } from '@box/blueprint-web-assets/tokens/tokens';
|
|
3
3
|
import clsx from 'clsx';
|
|
4
4
|
import { forwardRef, useMemo, createElement } from 'react';
|
|
5
|
+
import { useBlueprintModernization } from '../blueprint-modernization-context/useBlueprintModernization.js';
|
|
5
6
|
import { colorToTokenMap, colors, colorsMap } from './consts.js';
|
|
6
7
|
import styles from './status.module.js';
|
|
7
8
|
|
|
@@ -22,6 +23,9 @@ const Status = /*#__PURE__*/forwardRef((props, forwardedRef) => {
|
|
|
22
23
|
'aria-label': ariaLabel,
|
|
23
24
|
...rest
|
|
24
25
|
} = props;
|
|
26
|
+
const {
|
|
27
|
+
enableModernizedComponents
|
|
28
|
+
} = useBlueprintModernization();
|
|
25
29
|
const backgroundColor = useMemo(() => {
|
|
26
30
|
const bgColor = color || getColorFromColorsMap(colorIndex);
|
|
27
31
|
return colorToTokenMap[bgColor] || 'SurfaceStatusSurfaceGray';
|
|
@@ -74,6 +78,7 @@ const Status = /*#__PURE__*/forwardRef((props, forwardedRef) => {
|
|
|
74
78
|
});
|
|
75
79
|
return jsx("span", {
|
|
76
80
|
className: clsx(styles.maxContainer, className),
|
|
81
|
+
"data-modern": enableModernizedComponents,
|
|
77
82
|
children: innerElement
|
|
78
83
|
});
|
|
79
84
|
});
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import '../index.css';
|
|
2
|
-
var styles = {"interactiveStatus":"bp_status_module_interactiveStatus--
|
|
2
|
+
var styles = {"maxContainer":"bp_status_module_maxContainer--a717b","interactiveStatus":"bp_status_module_interactiveStatus--a717b","status":"bp_status_module_status--a717b","reverse":"bp_status_module_reverse--a717b","circle":"bp_status_module_circle--a717b","text":"bp_status_module_text--a717b","colorSurfaceStatusSurfaceGray":"bp_status_module_colorSurfaceStatusSurfaceGray--a717b","colorSurfaceStatusSurfaceYellow":"bp_status_module_colorSurfaceStatusSurfaceYellow--a717b","colorSurfaceStatusSurfaceOrange":"bp_status_module_colorSurfaceStatusSurfaceOrange--a717b","colorSurfaceStatusSurfaceRed":"bp_status_module_colorSurfaceStatusSurfaceRed--a717b","colorSurfaceStatusSurfacePurple":"bp_status_module_colorSurfaceStatusSurfacePurple--a717b","colorSurfaceStatusSurfaceLightBlue":"bp_status_module_colorSurfaceStatusSurfaceLightBlue--a717b","colorSurfaceStatusSurfaceDarkBlue":"bp_status_module_colorSurfaceStatusSurfaceDarkBlue--a717b","colorSurfaceStatusSurfaceGreen":"bp_status_module_colorSurfaceStatusSurfaceGreen--a717b"};
|
|
3
3
|
|
|
4
4
|
export { styles as default };
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import '../../index.css';
|
|
2
|
-
var styles = {"smallList":"bp_base_grid_list_item_module_smallList--
|
|
2
|
+
var styles = {"smallList":"bp_base_grid_list_item_module_smallList--08322","smallListItem":"bp_base_grid_list_item_module_smallListItem--08322","loading":"bp_base_grid_list_item_module_loading--08322","thumbnail":"bp_base_grid_list_item_module_thumbnail--08322","thumbnailContent":"bp_base_grid_list_item_module_thumbnailContent--08322","header":"bp_base_grid_list_item_module_header--08322","subtitle":"bp_base_grid_list_item_module_subtitle--08322","actions":"bp_base_grid_list_item_module_actions--08322","selection":"bp_base_grid_list_item_module_selection--08322","inner":"bp_base_grid_list_item_module_inner--08322","actionsCheckboxWrapper":"bp_base_grid_list_item_module_actionsCheckboxWrapper--08322","largeList":"bp_base_grid_list_item_module_largeList--08322","largeListItem":"bp_base_grid_list_item_module_largeListItem--08322","fade":"bp_base_grid_list_item_module_fade--08322","description":"bp_base_grid_list_item_module_description--08322","snippet":"bp_base_grid_list_item_module_snippet--08322","snippetContent":"bp_base_grid_list_item_module_snippetContent--08322","react-aria-DropIndicator":"bp_base_grid_list_item_module_react-aria-DropIndicator--08322","gridList":"bp_base_grid_list_item_module_gridList--08322","gridListItem":"bp_base_grid_list_item_module_gridListItem--08322","statusPin":"bp_base_grid_list_item_module_statusPin--08322","isItemInteracted":"bp_base_grid_list_item_module_isItemInteracted--08322","tooltipContent":"bp_base_grid_list_item_module_tooltipContent--08322","tooltipArrow":"bp_base_grid_list_item_module_tooltipArrow--08322","staticList":"bp_base_grid_list_item_module_staticList--08322","staticListItem":"bp_base_grid_list_item_module_staticListItem--08322"};
|
|
3
3
|
|
|
4
4
|
export { styles as default };
|
|
@@ -3,9 +3,10 @@ import clsx from 'clsx';
|
|
|
3
3
|
import noop from 'lodash/noop';
|
|
4
4
|
import { forwardRef, useMemo, createContext, useContext } from 'react';
|
|
5
5
|
import { GridList } from 'react-aria-components';
|
|
6
|
+
import { useBlueprintModernization } from '../../blueprint-modernization-context/useBlueprintModernization.js';
|
|
6
7
|
import { isCtrlKeyPressed } from '../../utils/keyboardUtils.js';
|
|
7
|
-
import { StaticGridList } from './static-grid-list.js';
|
|
8
8
|
import styles from './base-grid-list-item.module.js';
|
|
9
|
+
import { StaticGridList } from './static-grid-list.js';
|
|
9
10
|
|
|
10
11
|
const BaseGridListContext = /*#__PURE__*/createContext({
|
|
11
12
|
layoutStyle: 'grid'
|
|
@@ -30,6 +31,9 @@ const BaseGridList = /*#__PURE__*/forwardRef(function BaseGridList(props, forwar
|
|
|
30
31
|
layoutStyle,
|
|
31
32
|
...rest
|
|
32
33
|
} = props;
|
|
34
|
+
const {
|
|
35
|
+
enableModernizedComponents
|
|
36
|
+
} = useBlueprintModernization();
|
|
33
37
|
const handleOnAction = onAction || noop;
|
|
34
38
|
const context = useMemo(() => ({
|
|
35
39
|
selectionMode: rest.selectionMode,
|
|
@@ -63,6 +67,7 @@ const BaseGridList = /*#__PURE__*/forwardRef(function BaseGridList(props, forwar
|
|
|
63
67
|
...rest,
|
|
64
68
|
ref: forwardedRef,
|
|
65
69
|
className: clsx(layoutStyleClass, className),
|
|
70
|
+
"data-modern": enableModernizedComponents,
|
|
66
71
|
layout: layoutFinal,
|
|
67
72
|
onAction: handleOnAction,
|
|
68
73
|
children: children
|
|
@@ -4,6 +4,7 @@ import { IconIconOnDark, Size3 } from '@box/blueprint-web-assets/tokens/tokens';
|
|
|
4
4
|
import clsx from 'clsx';
|
|
5
5
|
import { forwardRef } from 'react';
|
|
6
6
|
import { Checkbox } from 'react-aria-components';
|
|
7
|
+
import { useBlueprintModernization } from '../../blueprint-modernization-context/useBlueprintModernization.js';
|
|
7
8
|
import styles from './list-checkbox.module.js';
|
|
8
9
|
|
|
9
10
|
/**
|
|
@@ -14,8 +15,12 @@ import styles from './list-checkbox.module.js';
|
|
|
14
15
|
* @see https://react-spectrum.adobe.com/react-aria/Checkbox.html
|
|
15
16
|
*/
|
|
16
17
|
const ListCheckbox = /*#__PURE__*/forwardRef((props, ref) => {
|
|
18
|
+
const {
|
|
19
|
+
enableModernizedComponents
|
|
20
|
+
} = useBlueprintModernization();
|
|
17
21
|
return jsx("div", {
|
|
18
22
|
className: clsx(styles.selection, props.className),
|
|
23
|
+
"data-modern": enableModernizedComponents,
|
|
19
24
|
children: jsx(Checkbox, {
|
|
20
25
|
...props,
|
|
21
26
|
ref: ref,
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import '../../index.css';
|
|
2
|
-
var styles = {"selection":"bp_list_checkbox_module_selection--
|
|
2
|
+
var styles = {"selection":"bp_list_checkbox_module_selection--98dc1","checkbox":"bp_list_checkbox_module_checkbox--98dc1"};
|
|
3
3
|
|
|
4
4
|
export { styles as default };
|