@box/blueprint-web 12.61.0 → 12.63.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 +277 -151
- package/dist/lib-esm/primitives/context-menu/context-menu-menu-content.js +6 -0
- package/dist/lib-esm/primitives/context-menu/context-menu-menu-header.js +5 -0
- package/dist/lib-esm/primitives/context-menu/context-menu-sub-menu-content.js +6 -0
- package/dist/lib-esm/primitives/context-menu/context-menu.module.js +1 -1
- package/dist/lib-esm/small-list-item/small-list.js +5 -0
- package/dist/lib-esm/util-components/base-grid-list-item/base-grid-list-item.module.js +1 -1
- package/dist/lib-esm/util-components/menu-item-sections/menu-item-sections.js +24 -13
- package/dist/lib-esm/util-components/menu-item-sections/menu-item-sections.module.js +1 -1
- package/package.json +1 -1
package/dist/lib-esm/index.css
CHANGED
|
@@ -4232,12 +4232,28 @@
|
|
|
4232
4232
|
height:var(--border-1);
|
|
4233
4233
|
margin-block:0;
|
|
4234
4234
|
}
|
|
4235
|
-
.bp_menu_item_sections_module_menuItemMainContent--
|
|
4235
|
+
.bp_menu_item_sections_module_menuItemMainContent--d8163[data-modern=false]{
|
|
4236
|
+
--menu-item-text-color:var(--text-text-on-light);
|
|
4237
|
+
}
|
|
4238
|
+
|
|
4239
|
+
.bp_menu_item_sections_module_menuItemMainContent--d8163[data-modern=true]{
|
|
4240
|
+
--menu-item-text-color:var(--bp-text-text-on-light);
|
|
4241
|
+
}
|
|
4242
|
+
|
|
4243
|
+
.bp_menu_item_sections_module_menuItemSideContent--d8163[data-modern=false]{
|
|
4244
|
+
--menu-item-text-color:var(--text-text-on-light-secondary);
|
|
4245
|
+
}
|
|
4246
|
+
|
|
4247
|
+
.bp_menu_item_sections_module_menuItemSideContent--d8163[data-modern=true]{
|
|
4248
|
+
--menu-item-text-color:var(--bp-text-text-on-light-secondary);
|
|
4249
|
+
}
|
|
4250
|
+
|
|
4251
|
+
.bp_menu_item_sections_module_menuItemMainContent--d8163{
|
|
4236
4252
|
display:flex;
|
|
4237
4253
|
flex:1;
|
|
4238
4254
|
flex-direction:column;
|
|
4239
4255
|
}
|
|
4240
|
-
.bp_menu_item_sections_module_menuItemMainContent--
|
|
4256
|
+
.bp_menu_item_sections_module_menuItemMainContent--d8163 .bp_menu_item_sections_module_label--d8163{
|
|
4241
4257
|
font-family:var(--body-default-font-family);
|
|
4242
4258
|
font-size:var(--body-default-font-size);
|
|
4243
4259
|
font-weight:var(--body-default-font-weight);
|
|
@@ -4247,7 +4263,7 @@
|
|
|
4247
4263
|
text-decoration:var(--body-default-text-decoration);
|
|
4248
4264
|
text-transform:var(--body-default-text-case);
|
|
4249
4265
|
}
|
|
4250
|
-
.bp_menu_item_sections_module_menuItemMainContent--
|
|
4266
|
+
.bp_menu_item_sections_module_menuItemMainContent--d8163 .bp_menu_item_sections_module_label--d8163.bp_menu_item_sections_module_bold--d8163{
|
|
4251
4267
|
font-family:var(--body-default-bold-font-family);
|
|
4252
4268
|
font-size:var(--body-default-bold-font-size);
|
|
4253
4269
|
font-weight:var(--body-default-bold-font-weight);
|
|
@@ -4257,11 +4273,11 @@
|
|
|
4257
4273
|
text-decoration:var(--body-default-bold-text-decoration);
|
|
4258
4274
|
text-transform:var(--body-default-bold-text-case);
|
|
4259
4275
|
}
|
|
4260
|
-
.bp_menu_item_sections_module_menuItemMainContent--
|
|
4261
|
-
color:var(--
|
|
4276
|
+
.bp_menu_item_sections_module_menuItemMainContent--d8163 .bp_menu_item_sections_module_description--d8163{
|
|
4277
|
+
color:var(--menu-item-text-color);
|
|
4262
4278
|
}
|
|
4263
4279
|
|
|
4264
|
-
.bp_menu_item_sections_module_menuItemMainContent--
|
|
4280
|
+
.bp_menu_item_sections_module_menuItemMainContent--d8163 .bp_menu_item_sections_module_description--d8163,.bp_menu_item_sections_module_menuItemSideContent--d8163{
|
|
4265
4281
|
font-family:var(--body-default-font-family);
|
|
4266
4282
|
font-size:var(--body-default-font-size);
|
|
4267
4283
|
font-weight:var(--body-default-font-weight);
|
|
@@ -4272,12 +4288,12 @@
|
|
|
4272
4288
|
text-transform:var(--body-default-text-case);
|
|
4273
4289
|
}
|
|
4274
4290
|
|
|
4275
|
-
.bp_menu_item_sections_module_menuItemSideContent--
|
|
4291
|
+
.bp_menu_item_sections_module_menuItemSideContent--d8163{
|
|
4276
4292
|
align-items:center;
|
|
4277
4293
|
display:flex;
|
|
4278
4294
|
}
|
|
4279
|
-
.bp_menu_item_sections_module_menuItemSideContent--
|
|
4280
|
-
color:var(--
|
|
4295
|
+
.bp_menu_item_sections_module_menuItemSideContent--d8163.bp_menu_item_sections_module_textOnLightSecondary--d8163{
|
|
4296
|
+
color:var(--menu-item-text-color);
|
|
4281
4297
|
}
|
|
4282
4298
|
|
|
4283
4299
|
.bp_sticky_cell_module_stickyCell--98a29{
|
|
@@ -4840,41 +4856,89 @@
|
|
|
4840
4856
|
.bp_link_module_link--fb308 .bp_link_module_icon--fb308 *{
|
|
4841
4857
|
fill:currentColor;
|
|
4842
4858
|
}
|
|
4843
|
-
.bp_base_grid_list_item_module_smallList--
|
|
4859
|
+
.bp_base_grid_list_item_module_smallList--17ab9[data-modern=false]{
|
|
4860
|
+
--small-list-gap:var(--space-2);
|
|
4861
|
+
--small-list-padding:var(--space-1);
|
|
4862
|
+
--small-list-item-background:var(--surface-item-small-surface);
|
|
4863
|
+
--small-list-item-hover:var(--surface-item-small-surface-hover);
|
|
4864
|
+
--small-list-item-border-radius:var(--radius-4);
|
|
4865
|
+
--small-list-thumbnail-size:var(--size-9);
|
|
4866
|
+
--small-list-actions-opacity:0;
|
|
4867
|
+
--small-list-item-padding:var(--space-2) var(--space-3) var(--space-2) var(--space-3);
|
|
4868
|
+
--small-list-item-column-gap:var(--space-3);
|
|
4869
|
+
--small-list-header-color:var(--text-text-on-light);
|
|
4870
|
+
--small-list-subtitle-color:var(--text-text-on-light-secondary);
|
|
4871
|
+
--small-list-actions-height:var(--space-6);
|
|
4872
|
+
--small-list-selection-width:var(--space-8);
|
|
4873
|
+
--small-list-selection-height:var(--space-8);
|
|
4874
|
+
--small-list-selection-border-radius:var(--radius-2);
|
|
4875
|
+
--small-list-selection-hover-background:var(--surface-cta-surface-icon-hover);
|
|
4876
|
+
--small-list-inner-gap:var(--space-2);
|
|
4877
|
+
--small-list-inner-border-radius:var(--radius-2);
|
|
4878
|
+
--small-list-inner-margin-end:var(--space-2);
|
|
4879
|
+
--small-list-focus-outline:var(--border-2) solid var(--outline-focus-on-light);
|
|
4880
|
+
--small-list-focus-outline-offset:calc(var(--border-4)*-1);
|
|
4881
|
+
}
|
|
4882
|
+
|
|
4883
|
+
.bp_base_grid_list_item_module_smallList--17ab9[data-modern=true]{
|
|
4884
|
+
--small-list-gap:var(--bp-space-020);
|
|
4885
|
+
--small-list-padding:var(--bp-space-010);
|
|
4886
|
+
--small-list-item-background:var(--bp-surface-item-small-surface);
|
|
4887
|
+
--small-list-item-hover:var(--bp-surface-item-small-surface-hover);
|
|
4888
|
+
--small-list-item-border-radius:var(--bp-radius-08);
|
|
4889
|
+
--small-list-thumbnail-size:var(--bp-size-090);
|
|
4890
|
+
--small-list-actions-opacity:0;
|
|
4891
|
+
--small-list-item-padding:var(--bp-space-020) var(--bp-space-030) var(--bp-space-020) var(--bp-space-030);
|
|
4892
|
+
--small-list-item-column-gap:var(--bp-space-030);
|
|
4893
|
+
--small-list-header-color:var(--bp-text-text-on-light);
|
|
4894
|
+
--small-list-subtitle-color:var(--bp-text-text-on-light-secondary);
|
|
4895
|
+
--small-list-actions-height:var(--bp-size-060);
|
|
4896
|
+
--small-list-selection-width:var(--bp-size-080);
|
|
4897
|
+
--small-list-selection-height:var(--bp-size-080);
|
|
4898
|
+
--small-list-selection-border-radius:var(--bp-radius-03);
|
|
4899
|
+
--small-list-selection-hover-background:var(--bp-surface-cta-surface-icon-hover);
|
|
4900
|
+
--small-list-inner-gap:var(--bp-space-020);
|
|
4901
|
+
--small-list-inner-border-radius:var(--bp-radius-03);
|
|
4902
|
+
--small-list-inner-margin-end:var(--bp-space-020);
|
|
4903
|
+
--small-list-focus-outline:var(--bp-border-02) solid var(--bp-outline-focus-on-light);
|
|
4904
|
+
--small-list-focus-outline-offset:calc(var(--bp-border-04)*-1);
|
|
4905
|
+
}
|
|
4906
|
+
|
|
4907
|
+
.bp_base_grid_list_item_module_smallList--17ab9{
|
|
4844
4908
|
box-sizing:border-box;
|
|
4845
4909
|
display:grid;
|
|
4846
|
-
gap:var(--
|
|
4910
|
+
gap:var(--small-list-gap);
|
|
4847
4911
|
grid-auto-flow:row;
|
|
4848
4912
|
height:inherit;
|
|
4849
4913
|
outline:none;
|
|
4850
4914
|
overflow:auto;
|
|
4851
|
-
padding:var(--
|
|
4915
|
+
padding:var(--small-list-padding);
|
|
4852
4916
|
width:auto;
|
|
4853
4917
|
}
|
|
4854
|
-
.bp_base_grid_list_item_module_smallList--
|
|
4855
|
-
--actions-opacity:
|
|
4856
|
-
--thumbnail-size:var(--size
|
|
4857
|
-
--item-background:var(--
|
|
4858
|
-
--item-hover:var(--
|
|
4918
|
+
.bp_base_grid_list_item_module_smallList--17ab9 .bp_base_grid_list_item_module_smallListItem--17ab9{
|
|
4919
|
+
--actions-opacity:var(--small-list-actions-opacity);
|
|
4920
|
+
--thumbnail-size:var(--small-list-thumbnail-size);
|
|
4921
|
+
--item-background:var(--small-list-item-background);
|
|
4922
|
+
--item-hover:var(--small-list-item-hover);
|
|
4859
4923
|
align-items:center;
|
|
4860
4924
|
background:var(--item-background);
|
|
4861
|
-
border-radius:var(--radius
|
|
4862
|
-
column-gap:var(--
|
|
4925
|
+
border-radius:var(--small-list-item-border-radius);
|
|
4926
|
+
column-gap:var(--small-list-item-column-gap);
|
|
4863
4927
|
cursor:default;
|
|
4864
4928
|
display:grid;
|
|
4865
4929
|
grid-template-areas:"thumbnail head actions" "thumbnail subtitle actions";
|
|
4866
4930
|
grid-template-columns:var(--thumbnail-size) auto auto;
|
|
4867
4931
|
outline:none;
|
|
4868
|
-
padding:var(--
|
|
4932
|
+
padding:var(--small-list-item-padding);
|
|
4869
4933
|
position:relative;
|
|
4870
4934
|
transform:translateZ(0);
|
|
4871
4935
|
width:auto;
|
|
4872
4936
|
}
|
|
4873
|
-
.bp_base_grid_list_item_module_smallList--
|
|
4937
|
+
.bp_base_grid_list_item_module_smallList--17ab9 .bp_base_grid_list_item_module_smallListItem--17ab9.bp_base_grid_list_item_module_loading--17ab9{
|
|
4874
4938
|
grid-template-columns:var(--thumbnail-size) auto 0;
|
|
4875
4939
|
grid-template-rows:100% 0;
|
|
4876
4940
|
}
|
|
4877
|
-
.bp_base_grid_list_item_module_smallList--
|
|
4941
|
+
.bp_base_grid_list_item_module_smallList--17ab9 .bp_base_grid_list_item_module_smallListItem--17ab9 .bp_base_grid_list_item_module_thumbnail--17ab9{
|
|
4878
4942
|
align-items:center;
|
|
4879
4943
|
aspect-ratio:1;
|
|
4880
4944
|
display:flex;
|
|
@@ -4883,14 +4947,14 @@
|
|
|
4883
4947
|
overflow:hidden;
|
|
4884
4948
|
z-index:1;
|
|
4885
4949
|
}
|
|
4886
|
-
.bp_base_grid_list_item_module_smallList--
|
|
4950
|
+
.bp_base_grid_list_item_module_smallList--17ab9 .bp_base_grid_list_item_module_smallListItem--17ab9 .bp_base_grid_list_item_module_thumbnailContent--17ab9 img,.bp_base_grid_list_item_module_smallList--17ab9 .bp_base_grid_list_item_module_smallListItem--17ab9 .bp_base_grid_list_item_module_thumbnailContent--17ab9 svg{
|
|
4887
4951
|
height:100%;
|
|
4888
4952
|
object-fit:cover;
|
|
4889
4953
|
object-position:left;
|
|
4890
4954
|
width:100%;
|
|
4891
4955
|
}
|
|
4892
|
-
.bp_base_grid_list_item_module_smallList--
|
|
4893
|
-
color:var(--
|
|
4956
|
+
.bp_base_grid_list_item_module_smallList--17ab9 .bp_base_grid_list_item_module_smallListItem--17ab9 .bp_base_grid_list_item_module_header--17ab9{
|
|
4957
|
+
color:var(--small-list-header-color);
|
|
4894
4958
|
font-family:var(--body-default-semibold-font-family);
|
|
4895
4959
|
font-size:var(--body-default-semibold-font-size);
|
|
4896
4960
|
font-weight:var(--body-default-semibold-font-weight);
|
|
@@ -4901,12 +4965,12 @@
|
|
|
4901
4965
|
text-decoration:var(--body-default-semibold-text-decoration);
|
|
4902
4966
|
text-transform:var(--body-default-semibold-text-case);
|
|
4903
4967
|
}
|
|
4904
|
-
.bp_base_grid_list_item_module_smallList--
|
|
4968
|
+
.bp_base_grid_list_item_module_smallList--17ab9 .bp_base_grid_list_item_module_smallListItem--17ab9 .bp_base_grid_list_item_module_header--17ab9.bp_base_grid_list_item_module_loading--17ab9{
|
|
4905
4969
|
align-items:center;
|
|
4906
4970
|
display:flex;
|
|
4907
4971
|
}
|
|
4908
|
-
.bp_base_grid_list_item_module_smallList--
|
|
4909
|
-
color:var(--
|
|
4972
|
+
.bp_base_grid_list_item_module_smallList--17ab9 .bp_base_grid_list_item_module_smallListItem--17ab9 .bp_base_grid_list_item_module_subtitle--17ab9{
|
|
4973
|
+
color:var(--small-list-subtitle-color);
|
|
4910
4974
|
font-family:var(--caption-default-font-family);
|
|
4911
4975
|
font-size:var(--caption-default-font-size);
|
|
4912
4976
|
font-weight:var(--caption-default-font-weight);
|
|
@@ -4917,76 +4981,76 @@
|
|
|
4917
4981
|
text-decoration:var(--caption-default-text-decoration);
|
|
4918
4982
|
text-transform:var(--caption-default-text-case);
|
|
4919
4983
|
}
|
|
4920
|
-
.bp_base_grid_list_item_module_smallList--
|
|
4984
|
+
.bp_base_grid_list_item_module_smallList--17ab9 .bp_base_grid_list_item_module_smallListItem--17ab9 .bp_base_grid_list_item_module_header--17ab9,.bp_base_grid_list_item_module_smallList--17ab9 .bp_base_grid_list_item_module_smallListItem--17ab9 .bp_base_grid_list_item_module_subtitle--17ab9{
|
|
4921
4985
|
display:inline-block;
|
|
4922
4986
|
overflow:hidden;
|
|
4923
4987
|
text-overflow:ellipsis;
|
|
4924
4988
|
white-space:nowrap;
|
|
4925
4989
|
}
|
|
4926
|
-
.bp_base_grid_list_item_module_smallList--
|
|
4990
|
+
.bp_base_grid_list_item_module_smallList--17ab9 .bp_base_grid_list_item_module_smallListItem--17ab9:not(:has(.bp_base_grid_list_item_module_header--17ab9)),.bp_base_grid_list_item_module_smallList--17ab9 .bp_base_grid_list_item_module_smallListItem--17ab9:not(:has(.bp_base_grid_list_item_module_subtitle--17ab9)){
|
|
4927
4991
|
grid-template-rows:100% 0;
|
|
4928
4992
|
row-gap:0;
|
|
4929
4993
|
}
|
|
4930
|
-
.bp_base_grid_list_item_module_smallList--
|
|
4994
|
+
.bp_base_grid_list_item_module_smallList--17ab9 .bp_base_grid_list_item_module_smallListItem--17ab9 .bp_base_grid_list_item_module_actions--17ab9{
|
|
4931
4995
|
align-items:center;
|
|
4932
4996
|
display:flex;
|
|
4933
4997
|
grid-area:actions;
|
|
4934
|
-
height:var(--
|
|
4998
|
+
height:var(--small-list-actions-height);
|
|
4935
4999
|
justify-content:flex-end;
|
|
4936
5000
|
opacity:var(--actions-opacity);
|
|
4937
5001
|
padding-right:0;
|
|
4938
5002
|
}
|
|
4939
5003
|
@media (pointer: coarse){
|
|
4940
|
-
.bp_base_grid_list_item_module_smallList--
|
|
5004
|
+
.bp_base_grid_list_item_module_smallList--17ab9 .bp_base_grid_list_item_module_smallListItem--17ab9 .bp_base_grid_list_item_module_actions--17ab9{
|
|
4941
5005
|
--actions-opacity:1;
|
|
4942
5006
|
}
|
|
4943
5007
|
}
|
|
4944
|
-
.bp_base_grid_list_item_module_smallList--
|
|
5008
|
+
.bp_base_grid_list_item_module_smallList--17ab9 .bp_base_grid_list_item_module_smallListItem--17ab9 .bp_base_grid_list_item_module_actions--17ab9 .bp_base_grid_list_item_module_selection--17ab9{
|
|
4945
5009
|
align-items:center;
|
|
4946
5010
|
background:var(--item-background);
|
|
4947
|
-
border-radius:var(--radius
|
|
5011
|
+
border-radius:var(--small-list-selection-border-radius);
|
|
4948
5012
|
display:flex;
|
|
4949
|
-
height:var(--
|
|
5013
|
+
height:var(--small-list-selection-height);
|
|
4950
5014
|
justify-content:center;
|
|
4951
|
-
width:var(--
|
|
5015
|
+
width:var(--small-list-selection-width);
|
|
4952
5016
|
}
|
|
4953
|
-
.bp_base_grid_list_item_module_smallList--
|
|
4954
|
-
background:var(--
|
|
5017
|
+
.bp_base_grid_list_item_module_smallList--17ab9 .bp_base_grid_list_item_module_smallListItem--17ab9 .bp_base_grid_list_item_module_actions--17ab9 .bp_base_grid_list_item_module_selection--17ab9:hover{
|
|
5018
|
+
background:var(--small-list-selection-hover-background);
|
|
4955
5019
|
}
|
|
4956
|
-
.bp_base_grid_list_item_module_smallList--
|
|
5020
|
+
.bp_base_grid_list_item_module_smallList--17ab9 .bp_base_grid_list_item_module_smallListItem--17ab9 .bp_base_grid_list_item_module_actions--17ab9 .bp_base_grid_list_item_module_inner--17ab9{
|
|
4957
5021
|
align-items:center;
|
|
4958
|
-
border-radius:var(--radius
|
|
5022
|
+
border-radius:var(--small-list-inner-border-radius);
|
|
4959
5023
|
display:flex;
|
|
4960
|
-
gap:var(--
|
|
5024
|
+
gap:var(--small-list-inner-gap);
|
|
4961
5025
|
justify-content:flex-end;
|
|
4962
|
-
margin-inline-end:var(--
|
|
5026
|
+
margin-inline-end:var(--small-list-inner-margin-end);
|
|
4963
5027
|
}
|
|
4964
|
-
.bp_base_grid_list_item_module_smallList--
|
|
5028
|
+
.bp_base_grid_list_item_module_smallList--17ab9 .bp_base_grid_list_item_module_smallListItem--17ab9 .bp_base_grid_list_item_module_actions--17ab9 .bp_base_grid_list_item_module_inner--17ab9:last-child{
|
|
4965
5029
|
margin-inline-end:0;
|
|
4966
5030
|
}
|
|
4967
|
-
.bp_base_grid_list_item_module_smallList--
|
|
5031
|
+
.bp_base_grid_list_item_module_smallList--17ab9 .bp_base_grid_list_item_module_smallListItem--17ab9 .bp_base_grid_list_item_module_actions--17ab9 .bp_base_grid_list_item_module_actionsCheckboxWrapper--17ab9{
|
|
4968
5032
|
background:var(--item-hover);
|
|
4969
5033
|
display:flex;
|
|
4970
5034
|
}
|
|
4971
|
-
.bp_base_grid_list_item_module_smallList--
|
|
5035
|
+
.bp_base_grid_list_item_module_smallList--17ab9 .bp_base_grid_list_item_module_smallListItem--17ab9:hover,.bp_base_grid_list_item_module_smallList--17ab9 .bp_base_grid_list_item_module_smallListItem--17ab9[data-active-item],.bp_base_grid_list_item_module_smallList--17ab9 .bp_base_grid_list_item_module_smallListItem--17ab9[data-focus-visible],.bp_base_grid_list_item_module_smallList--17ab9 .bp_base_grid_list_item_module_smallListItem--17ab9[data-focused],.bp_base_grid_list_item_module_smallList--17ab9 .bp_base_grid_list_item_module_smallListItem--17ab9[data-hovered]{
|
|
4972
5036
|
--actions-opacity:1;
|
|
4973
5037
|
background:var(--item-hover);
|
|
4974
5038
|
}
|
|
4975
|
-
.bp_base_grid_list_item_module_smallList--
|
|
5039
|
+
.bp_base_grid_list_item_module_smallList--17ab9 .bp_base_grid_list_item_module_smallListItem--17ab9[data-active-item]::before,.bp_base_grid_list_item_module_smallList--17ab9 .bp_base_grid_list_item_module_smallListItem--17ab9[data-focus-visible]::before{
|
|
4976
5040
|
--actions-opacity:1;
|
|
4977
5041
|
border-radius:.875rem;
|
|
4978
5042
|
content:"";
|
|
4979
5043
|
display:block;
|
|
4980
5044
|
height:100%;
|
|
4981
5045
|
left:0;
|
|
4982
|
-
outline:var(--
|
|
4983
|
-
outline-offset:
|
|
5046
|
+
outline:var(--small-list-focus-outline);
|
|
5047
|
+
outline-offset:var(--small-list-focus-outline-offset);
|
|
4984
5048
|
position:absolute;
|
|
4985
5049
|
top:0;
|
|
4986
5050
|
width:100%;
|
|
4987
5051
|
}
|
|
4988
5052
|
|
|
4989
|
-
.bp_base_grid_list_item_module_largeList--
|
|
5053
|
+
.bp_base_grid_list_item_module_largeList--17ab9{
|
|
4990
5054
|
box-sizing:border-box;
|
|
4991
5055
|
display:flex;
|
|
4992
5056
|
flex-direction:column;
|
|
@@ -4996,7 +5060,7 @@
|
|
|
4996
5060
|
overflow:auto;
|
|
4997
5061
|
padding:var(--space-1);
|
|
4998
5062
|
}
|
|
4999
|
-
.bp_base_grid_list_item_module_largeList--
|
|
5063
|
+
.bp_base_grid_list_item_module_largeList--17ab9 .bp_base_grid_list_item_module_largeListItem--17ab9{
|
|
5000
5064
|
--thumbnail-size:10rem;
|
|
5001
5065
|
--actions-opacity:0;
|
|
5002
5066
|
--item-background:var(--gray-white);
|
|
@@ -5013,18 +5077,18 @@
|
|
|
5013
5077
|
position:relative;
|
|
5014
5078
|
transform:translateZ(0);
|
|
5015
5079
|
}
|
|
5016
|
-
.bp_base_grid_list_item_module_largeList--
|
|
5080
|
+
.bp_base_grid_list_item_module_largeList--17ab9 .bp_base_grid_list_item_module_largeListItem--17ab9.bp_base_grid_list_item_module_loading--17ab9{
|
|
5017
5081
|
grid-template-rows:1fr 1fr 1fr;
|
|
5018
5082
|
}
|
|
5019
|
-
.bp_base_grid_list_item_module_largeList--
|
|
5083
|
+
.bp_base_grid_list_item_module_largeList--17ab9 .bp_base_grid_list_item_module_largeListItem--17ab9:focus-within{
|
|
5020
5084
|
--actions-opacity:1;
|
|
5021
5085
|
}
|
|
5022
5086
|
@media (max-width: 374px){
|
|
5023
|
-
.bp_base_grid_list_item_module_largeList--
|
|
5087
|
+
.bp_base_grid_list_item_module_largeList--17ab9 .bp_base_grid_list_item_module_largeListItem--17ab9{
|
|
5024
5088
|
--thumbnail-size:7.5rem;
|
|
5025
5089
|
}
|
|
5026
5090
|
}
|
|
5027
|
-
.bp_base_grid_list_item_module_largeList--
|
|
5091
|
+
.bp_base_grid_list_item_module_largeList--17ab9 .bp_base_grid_list_item_module_largeListItem--17ab9 .bp_base_grid_list_item_module_thumbnail--17ab9{
|
|
5028
5092
|
aspect-ratio:4/3;
|
|
5029
5093
|
border:var(--border-1) solid var(--gray-10);
|
|
5030
5094
|
border-radius:var(--radius-3);
|
|
@@ -5032,24 +5096,24 @@
|
|
|
5032
5096
|
overflow:hidden;
|
|
5033
5097
|
z-index:1;
|
|
5034
5098
|
}
|
|
5035
|
-
.bp_base_grid_list_item_module_largeList--
|
|
5099
|
+
.bp_base_grid_list_item_module_largeList--17ab9 .bp_base_grid_list_item_module_largeListItem--17ab9 .bp_base_grid_list_item_module_thumbnail--17ab9 img{
|
|
5036
5100
|
height:100%;
|
|
5037
5101
|
object-fit:cover;
|
|
5038
5102
|
object-position:left;
|
|
5039
5103
|
width:100%;
|
|
5040
5104
|
}
|
|
5041
|
-
.bp_base_grid_list_item_module_largeList--
|
|
5105
|
+
.bp_base_grid_list_item_module_largeList--17ab9 .bp_base_grid_list_item_module_largeListItem--17ab9 .bp_base_grid_list_item_module_thumbnail--17ab9.bp_base_grid_list_item_module_loading--17ab9{
|
|
5042
5106
|
border:none;
|
|
5043
5107
|
}
|
|
5044
5108
|
@media (max-width: 374px){
|
|
5045
|
-
.bp_base_grid_list_item_module_largeList--
|
|
5109
|
+
.bp_base_grid_list_item_module_largeList--17ab9 .bp_base_grid_list_item_module_largeListItem--17ab9 .bp_base_grid_list_item_module_thumbnail--17ab9{
|
|
5046
5110
|
aspect-ratio:1/1;
|
|
5047
5111
|
}
|
|
5048
|
-
.bp_base_grid_list_item_module_largeList--
|
|
5112
|
+
.bp_base_grid_list_item_module_largeList--17ab9 .bp_base_grid_list_item_module_largeListItem--17ab9 .bp_base_grid_list_item_module_thumbnail--17ab9 img{
|
|
5049
5113
|
object-fit:contain;
|
|
5050
5114
|
}
|
|
5051
5115
|
}
|
|
5052
|
-
.bp_base_grid_list_item_module_largeList--
|
|
5116
|
+
.bp_base_grid_list_item_module_largeList--17ab9 .bp_base_grid_list_item_module_largeListItem--17ab9 .bp_base_grid_list_item_module_actions--17ab9{
|
|
5053
5117
|
align-items:center;
|
|
5054
5118
|
display:flex;
|
|
5055
5119
|
height:var(--space-6);
|
|
@@ -5061,11 +5125,11 @@
|
|
|
5061
5125
|
top:.875rem;
|
|
5062
5126
|
}
|
|
5063
5127
|
@media (pointer: coarse){
|
|
5064
|
-
.bp_base_grid_list_item_module_largeList--
|
|
5128
|
+
.bp_base_grid_list_item_module_largeList--17ab9 .bp_base_grid_list_item_module_largeListItem--17ab9 .bp_base_grid_list_item_module_actions--17ab9{
|
|
5065
5129
|
--actions-opacity:1;
|
|
5066
5130
|
}
|
|
5067
5131
|
}
|
|
5068
|
-
.bp_base_grid_list_item_module_largeList--
|
|
5132
|
+
.bp_base_grid_list_item_module_largeList--17ab9 .bp_base_grid_list_item_module_largeListItem--17ab9 .bp_base_grid_list_item_module_actions--17ab9 .bp_base_grid_list_item_module_selection--17ab9{
|
|
5069
5133
|
align-items:center;
|
|
5070
5134
|
background:var(--item-background);
|
|
5071
5135
|
border-radius:var(--radius-2);
|
|
@@ -5074,15 +5138,15 @@
|
|
|
5074
5138
|
justify-content:center;
|
|
5075
5139
|
width:var(--space-8);
|
|
5076
5140
|
}
|
|
5077
|
-
.bp_base_grid_list_item_module_largeList--
|
|
5141
|
+
.bp_base_grid_list_item_module_largeList--17ab9 .bp_base_grid_list_item_module_largeListItem--17ab9 .bp_base_grid_list_item_module_actions--17ab9 .bp_base_grid_list_item_module_selection--17ab9:hover{
|
|
5078
5142
|
background:var(--surface-cta-surface-icon-hover);
|
|
5079
5143
|
}
|
|
5080
|
-
.bp_base_grid_list_item_module_largeList--
|
|
5144
|
+
.bp_base_grid_list_item_module_largeList--17ab9 .bp_base_grid_list_item_module_largeListItem--17ab9 .bp_base_grid_list_item_module_actions--17ab9 .bp_base_grid_list_item_module_fade--17ab9{
|
|
5081
5145
|
align-self:stretch;
|
|
5082
5146
|
background:linear-gradient(270deg, #fff 0, #fff0 100%);
|
|
5083
5147
|
width:var(--size-8);
|
|
5084
5148
|
}
|
|
5085
|
-
.bp_base_grid_list_item_module_largeList--
|
|
5149
|
+
.bp_base_grid_list_item_module_largeList--17ab9 .bp_base_grid_list_item_module_largeListItem--17ab9 .bp_base_grid_list_item_module_actions--17ab9 .bp_base_grid_list_item_module_inner--17ab9{
|
|
5086
5150
|
align-items:center;
|
|
5087
5151
|
background:var(--item-background);
|
|
5088
5152
|
border-radius:var(--radius-2);
|
|
@@ -5091,14 +5155,14 @@
|
|
|
5091
5155
|
justify-content:flex-end;
|
|
5092
5156
|
margin-inline-end:var(--space-2);
|
|
5093
5157
|
}
|
|
5094
|
-
.bp_base_grid_list_item_module_largeList--
|
|
5158
|
+
.bp_base_grid_list_item_module_largeList--17ab9 .bp_base_grid_list_item_module_largeListItem--17ab9 .bp_base_grid_list_item_module_actions--17ab9 .bp_base_grid_list_item_module_inner--17ab9:last-child{
|
|
5095
5159
|
margin-inline-end:0;
|
|
5096
5160
|
}
|
|
5097
|
-
.bp_base_grid_list_item_module_largeList--
|
|
5161
|
+
.bp_base_grid_list_item_module_largeList--17ab9 .bp_base_grid_list_item_module_largeListItem--17ab9 .bp_base_grid_list_item_module_actions--17ab9 .bp_base_grid_list_item_module_actionsCheckboxWrapper--17ab9{
|
|
5098
5162
|
background:var(--item-background);
|
|
5099
5163
|
display:flex;
|
|
5100
5164
|
}
|
|
5101
|
-
.bp_base_grid_list_item_module_largeList--
|
|
5165
|
+
.bp_base_grid_list_item_module_largeList--17ab9 .bp_base_grid_list_item_module_largeListItem--17ab9 .bp_base_grid_list_item_module_header--17ab9{
|
|
5102
5166
|
align-items:center;
|
|
5103
5167
|
color:var(--text-text-on-light);
|
|
5104
5168
|
display:inline-flex;
|
|
@@ -5116,7 +5180,7 @@
|
|
|
5116
5180
|
text-transform:var(--body-default-semibold-text-case);
|
|
5117
5181
|
white-space:nowrap;
|
|
5118
5182
|
}
|
|
5119
|
-
.bp_base_grid_list_item_module_largeList--
|
|
5183
|
+
.bp_base_grid_list_item_module_largeList--17ab9 .bp_base_grid_list_item_module_largeListItem--17ab9 .bp_base_grid_list_item_module_subtitle--17ab9{
|
|
5120
5184
|
align-items:center;
|
|
5121
5185
|
color:var(--text-text-on-light-secondary);
|
|
5122
5186
|
display:flex;
|
|
@@ -5132,7 +5196,7 @@
|
|
|
5132
5196
|
text-transform:var(--caption-default-text-case);
|
|
5133
5197
|
white-space:nowrap;
|
|
5134
5198
|
}
|
|
5135
|
-
.bp_base_grid_list_item_module_largeList--
|
|
5199
|
+
.bp_base_grid_list_item_module_largeList--17ab9 .bp_base_grid_list_item_module_largeListItem--17ab9 .bp_base_grid_list_item_module_description--17ab9{
|
|
5136
5200
|
-webkit-box-orient:vertical;
|
|
5137
5201
|
-webkit-line-clamp:3;
|
|
5138
5202
|
color:var(--text-text-on-light);
|
|
@@ -5151,13 +5215,13 @@
|
|
|
5151
5215
|
text-decoration:var(--body-default-text-decoration);
|
|
5152
5216
|
text-transform:var(--body-default-text-case);
|
|
5153
5217
|
}
|
|
5154
|
-
.bp_base_grid_list_item_module_largeList--
|
|
5218
|
+
.bp_base_grid_list_item_module_largeList--17ab9 .bp_base_grid_list_item_module_largeListItem--17ab9 .bp_base_grid_list_item_module_snippet--17ab9{
|
|
5155
5219
|
grid-area:description;
|
|
5156
5220
|
margin:0;
|
|
5157
5221
|
margin-block-end:var(--space-1);
|
|
5158
5222
|
margin-block-start:var(--space-3);
|
|
5159
5223
|
}
|
|
5160
|
-
.bp_base_grid_list_item_module_largeList--
|
|
5224
|
+
.bp_base_grid_list_item_module_largeList--17ab9 .bp_base_grid_list_item_module_largeListItem--17ab9 .bp_base_grid_list_item_module_snippet--17ab9 .bp_base_grid_list_item_module_snippetContent--17ab9{
|
|
5161
5225
|
-webkit-box-orient:vertical;
|
|
5162
5226
|
-webkit-line-clamp:2;
|
|
5163
5227
|
border:0 0 0 var(--space-05);
|
|
@@ -5177,12 +5241,12 @@
|
|
|
5177
5241
|
text-decoration:var(--body-default-text-decoration);
|
|
5178
5242
|
text-transform:var(--body-default-text-case);
|
|
5179
5243
|
}
|
|
5180
|
-
.bp_base_grid_list_item_module_largeList--
|
|
5244
|
+
.bp_base_grid_list_item_module_largeList--17ab9 .bp_base_grid_list_item_module_largeListItem--17ab9:hover,.bp_base_grid_list_item_module_largeList--17ab9 .bp_base_grid_list_item_module_largeListItem--17ab9[data-active-item],.bp_base_grid_list_item_module_largeList--17ab9 .bp_base_grid_list_item_module_largeListItem--17ab9[data-focus-visible],.bp_base_grid_list_item_module_largeList--17ab9 .bp_base_grid_list_item_module_largeListItem--17ab9[data-focused],.bp_base_grid_list_item_module_largeList--17ab9 .bp_base_grid_list_item_module_largeListItem--17ab9[data-hovered]{
|
|
5181
5245
|
--actions-opacity:1;
|
|
5182
5246
|
box-shadow:var(--dropshadow-2);
|
|
5183
5247
|
outline:var(--border-1) solid var(--border-card-border);
|
|
5184
5248
|
}
|
|
5185
|
-
.bp_base_grid_list_item_module_largeList--
|
|
5249
|
+
.bp_base_grid_list_item_module_largeList--17ab9 .bp_base_grid_list_item_module_largeListItem--17ab9[data-active-item]::before,.bp_base_grid_list_item_module_largeList--17ab9 .bp_base_grid_list_item_module_largeListItem--17ab9[data-focus-visible]::before{
|
|
5186
5250
|
border-radius:.875rem;
|
|
5187
5251
|
content:"";
|
|
5188
5252
|
display:block;
|
|
@@ -5194,31 +5258,31 @@
|
|
|
5194
5258
|
top:0;
|
|
5195
5259
|
width:100%;
|
|
5196
5260
|
}
|
|
5197
|
-
.bp_base_grid_list_item_module_largeList--
|
|
5261
|
+
.bp_base_grid_list_item_module_largeList--17ab9 .bp_base_grid_list_item_module_largeListItem--17ab9[aria-selected=true]{
|
|
5198
5262
|
--actions-opacity:1;
|
|
5199
5263
|
--item-background:var(--box-blue-05);
|
|
5200
5264
|
outline:var(--border-2) solid var(--border-card-border-focus);
|
|
5201
5265
|
z-index:2;
|
|
5202
5266
|
}
|
|
5203
|
-
.bp_base_grid_list_item_module_largeList--
|
|
5267
|
+
.bp_base_grid_list_item_module_largeList--17ab9 .bp_base_grid_list_item_module_largeListItem--17ab9[aria-selected=true] .bp_base_grid_list_item_module_actions--17ab9 .bp_base_grid_list_item_module_fade--17ab9{
|
|
5204
5268
|
background:linear-gradient(270deg, #f2f7fd 0, #f2f7fd00 100%);
|
|
5205
5269
|
}
|
|
5206
|
-
.bp_base_grid_list_item_module_largeList--
|
|
5270
|
+
.bp_base_grid_list_item_module_largeList--17ab9 .bp_base_grid_list_item_module_largeListItem--17ab9[aria-selected=true]:not([data-hovered], [data-focus-visible], [data-focused]) .bp_base_grid_list_item_module_actions--17ab9 .bp_base_grid_list_item_module_inner--17ab9{
|
|
5207
5271
|
display:none;
|
|
5208
5272
|
}
|
|
5209
5273
|
@supports selector(:has(.foo)){
|
|
5210
|
-
.bp_base_grid_list_item_module_largeList--
|
|
5274
|
+
.bp_base_grid_list_item_module_largeList--17ab9 .bp_base_grid_list_item_module_largeListItem--17ab9[aria-selected=true]:has(+ .bp_base_grid_list_item_module_react-aria-DropIndicator--17ab9 + [aria-selected=true]),.bp_base_grid_list_item_module_largeList--17ab9 .bp_base_grid_list_item_module_largeListItem--17ab9[aria-selected=true]:has(+ [aria-selected=true]){
|
|
5211
5275
|
border-end-end-radius:0;
|
|
5212
5276
|
border-end-start-radius:0;
|
|
5213
5277
|
}
|
|
5214
|
-
.bp_base_grid_list_item_module_largeList--
|
|
5278
|
+
.bp_base_grid_list_item_module_largeList--17ab9 .bp_base_grid_list_item_module_largeListItem--17ab9[aria-selected=true] + .bp_base_grid_list_item_module_react-aria-DropIndicator--17ab9 + [aria-selected=true],.bp_base_grid_list_item_module_largeList--17ab9 .bp_base_grid_list_item_module_largeListItem--17ab9[aria-selected=true] + [aria-selected=true]{
|
|
5215
5279
|
border-start-end-radius:0;
|
|
5216
5280
|
border-start-start-radius:0;
|
|
5217
5281
|
border-top:none;
|
|
5218
5282
|
}
|
|
5219
5283
|
}
|
|
5220
5284
|
|
|
5221
|
-
.bp_base_grid_list_item_module_gridList--
|
|
5285
|
+
.bp_base_grid_list_item_module_gridList--17ab9[data-modern=false]{
|
|
5222
5286
|
--grid-list-minimum-item-width:188px;
|
|
5223
5287
|
--grid-list-gap:var(--space-4);
|
|
5224
5288
|
--grid-list-padding:var(--space-1);
|
|
@@ -5259,7 +5323,7 @@
|
|
|
5259
5323
|
--grid-list-item-coarse-row-gap:var(--space-1);
|
|
5260
5324
|
}
|
|
5261
5325
|
|
|
5262
|
-
.bp_base_grid_list_item_module_gridList--
|
|
5326
|
+
.bp_base_grid_list_item_module_gridList--17ab9[data-modern=true]{
|
|
5263
5327
|
--grid-list-minimum-item-width:188px;
|
|
5264
5328
|
--grid-list-gap:var(--bp-space-040);
|
|
5265
5329
|
--grid-list-padding:var(--bp-space-010);
|
|
@@ -5300,7 +5364,7 @@
|
|
|
5300
5364
|
--grid-list-item-coarse-row-gap:var(--bp-space-010);
|
|
5301
5365
|
}
|
|
5302
5366
|
|
|
5303
|
-
.bp_base_grid_list_item_module_gridList--
|
|
5367
|
+
.bp_base_grid_list_item_module_gridList--17ab9{
|
|
5304
5368
|
box-sizing:border-box;
|
|
5305
5369
|
display:grid;
|
|
5306
5370
|
gap:var(--grid-list-gap);
|
|
@@ -5310,7 +5374,7 @@
|
|
|
5310
5374
|
overflow:auto;
|
|
5311
5375
|
padding:var(--grid-list-padding);
|
|
5312
5376
|
}
|
|
5313
|
-
.bp_base_grid_list_item_module_gridList--
|
|
5377
|
+
.bp_base_grid_list_item_module_gridList--17ab9 .bp_base_grid_list_item_module_gridListItem--17ab9{
|
|
5314
5378
|
--actions-opacity:0;
|
|
5315
5379
|
--item-background:var(--grid-list-item-background);
|
|
5316
5380
|
--row-gap:var(--grid-list-item-row-gap);
|
|
@@ -5328,15 +5392,15 @@
|
|
|
5328
5392
|
row-gap:var(--row-gap);
|
|
5329
5393
|
transform:translateZ(0);
|
|
5330
5394
|
}
|
|
5331
|
-
.bp_base_grid_list_item_module_gridList--
|
|
5395
|
+
.bp_base_grid_list_item_module_gridList--17ab9 .bp_base_grid_list_item_module_gridListItem--17ab9:focus-within{
|
|
5332
5396
|
--actions-opacity:1;
|
|
5333
5397
|
}
|
|
5334
|
-
.bp_base_grid_list_item_module_gridList--
|
|
5398
|
+
.bp_base_grid_list_item_module_gridList--17ab9 .bp_base_grid_list_item_module_gridListItem--17ab9 .bp_base_grid_list_item_module_statusPin--17ab9{
|
|
5335
5399
|
left:var(--grid-list-item-status-pin-left);
|
|
5336
5400
|
position:absolute;
|
|
5337
5401
|
top:var(--grid-list-item-status-pin-top);
|
|
5338
5402
|
}
|
|
5339
|
-
.bp_base_grid_list_item_module_gridList--
|
|
5403
|
+
.bp_base_grid_list_item_module_gridList--17ab9 .bp_base_grid_list_item_module_gridListItem--17ab9 .bp_base_grid_list_item_module_thumbnail--17ab9{
|
|
5340
5404
|
aspect-ratio:var(--grid-list-thumbnail-aspect-ratio);
|
|
5341
5405
|
background:var(--grid-list-thumbnail-background);
|
|
5342
5406
|
border:var(--grid-list-thumbnail-border);
|
|
@@ -5344,25 +5408,25 @@
|
|
|
5344
5408
|
grid-area:thumbnail;
|
|
5345
5409
|
overflow:hidden;
|
|
5346
5410
|
}
|
|
5347
|
-
.bp_base_grid_list_item_module_gridList--
|
|
5411
|
+
.bp_base_grid_list_item_module_gridList--17ab9 .bp_base_grid_list_item_module_gridListItem--17ab9 .bp_base_grid_list_item_module_thumbnail--17ab9 img{
|
|
5348
5412
|
height:100%;
|
|
5349
5413
|
object-fit:contain;
|
|
5350
5414
|
width:100%;
|
|
5351
5415
|
}
|
|
5352
|
-
.bp_base_grid_list_item_module_gridList--
|
|
5416
|
+
.bp_base_grid_list_item_module_gridList--17ab9 .bp_base_grid_list_item_module_gridListItem--17ab9 .bp_base_grid_list_item_module_thumbnail--17ab9.bp_base_grid_list_item_module_loading--17ab9{
|
|
5353
5417
|
border:none;
|
|
5354
5418
|
}
|
|
5355
5419
|
@media (pointer: coarse){
|
|
5356
|
-
.bp_base_grid_list_item_module_gridList--
|
|
5420
|
+
.bp_base_grid_list_item_module_gridList--17ab9 .bp_base_grid_list_item_module_gridListItem--17ab9 .bp_base_grid_list_item_module_thumbnail--17ab9{
|
|
5357
5421
|
margin-block-end:var(--space-1);
|
|
5358
5422
|
}
|
|
5359
5423
|
}
|
|
5360
|
-
.bp_base_grid_list_item_module_gridList--
|
|
5424
|
+
.bp_base_grid_list_item_module_gridList--17ab9 .bp_base_grid_list_item_module_gridListItem--17ab9 .bp_base_grid_list_item_module_actions--17ab9{
|
|
5361
5425
|
grid-area:subtitle;
|
|
5362
5426
|
margin-block-start:var(--grid-list-actions-margin-block-start);
|
|
5363
5427
|
opacity:var(--actions-opacity);
|
|
5364
5428
|
}
|
|
5365
|
-
.bp_base_grid_list_item_module_gridList--
|
|
5429
|
+
.bp_base_grid_list_item_module_gridList--17ab9 .bp_base_grid_list_item_module_gridListItem--17ab9 .bp_base_grid_list_item_module_actions--17ab9 .bp_base_grid_list_item_module_selection--17ab9{
|
|
5366
5430
|
align-items:center;
|
|
5367
5431
|
border-radius:var(--grid-list-selection-border-radius);
|
|
5368
5432
|
display:flex;
|
|
@@ -5373,10 +5437,10 @@
|
|
|
5373
5437
|
top:var(--grid-list-selection-top);
|
|
5374
5438
|
width:var(--grid-list-selection-width);
|
|
5375
5439
|
}
|
|
5376
|
-
.bp_base_grid_list_item_module_gridList--
|
|
5440
|
+
.bp_base_grid_list_item_module_gridList--17ab9 .bp_base_grid_list_item_module_gridListItem--17ab9 .bp_base_grid_list_item_module_actions--17ab9 .bp_base_grid_list_item_module_selection--17ab9:hover{
|
|
5377
5441
|
background:var(--grid-list-selection-hover-background);
|
|
5378
5442
|
}
|
|
5379
|
-
.bp_base_grid_list_item_module_gridList--
|
|
5443
|
+
.bp_base_grid_list_item_module_gridList--17ab9 .bp_base_grid_list_item_module_gridListItem--17ab9 .bp_base_grid_list_item_module_actions--17ab9 .bp_base_grid_list_item_module_inner--17ab9{
|
|
5380
5444
|
align-items:center;
|
|
5381
5445
|
background:var(--item-background);
|
|
5382
5446
|
border-radius:var(--grid-list-actions-inner-border-radius);
|
|
@@ -5385,12 +5449,12 @@
|
|
|
5385
5449
|
justify-content:center;
|
|
5386
5450
|
}
|
|
5387
5451
|
@media (pointer: coarse){
|
|
5388
|
-
.bp_base_grid_list_item_module_gridList--
|
|
5452
|
+
.bp_base_grid_list_item_module_gridList--17ab9 .bp_base_grid_list_item_module_gridListItem--17ab9 .bp_base_grid_list_item_module_actions--17ab9{
|
|
5389
5453
|
grid-area:actions;
|
|
5390
5454
|
margin-block-start:0;
|
|
5391
5455
|
}
|
|
5392
5456
|
}
|
|
5393
|
-
.bp_base_grid_list_item_module_gridList--
|
|
5457
|
+
.bp_base_grid_list_item_module_gridList--17ab9 .bp_base_grid_list_item_module_gridListItem--17ab9 .bp_base_grid_list_item_module_header--17ab9{
|
|
5394
5458
|
-webkit-box-orient:vertical;
|
|
5395
5459
|
-webkit-line-clamp:2;
|
|
5396
5460
|
color:var(--grid-list-header-color);
|
|
@@ -5408,11 +5472,11 @@
|
|
|
5408
5472
|
text-decoration:var(--body-default-text-decoration);
|
|
5409
5473
|
text-transform:var(--body-default-text-case);
|
|
5410
5474
|
}
|
|
5411
|
-
.bp_base_grid_list_item_module_gridList--
|
|
5475
|
+
.bp_base_grid_list_item_module_gridList--17ab9 .bp_base_grid_list_item_module_gridListItem--17ab9 .bp_base_grid_list_item_module_header--17ab9.bp_base_grid_list_item_module_loading--17ab9{
|
|
5412
5476
|
align-items:center;
|
|
5413
5477
|
display:flex;
|
|
5414
5478
|
}
|
|
5415
|
-
.bp_base_grid_list_item_module_gridList--
|
|
5479
|
+
.bp_base_grid_list_item_module_gridList--17ab9 .bp_base_grid_list_item_module_gridListItem--17ab9 .bp_base_grid_list_item_module_subtitle--17ab9{
|
|
5416
5480
|
color:var(--grid-list-subtitle-color);
|
|
5417
5481
|
font-family:var(--caption-default-font-family);
|
|
5418
5482
|
font-size:var(--caption-default-font-size);
|
|
@@ -5429,15 +5493,15 @@
|
|
|
5429
5493
|
text-transform:var(--caption-default-text-case);
|
|
5430
5494
|
white-space:nowrap;
|
|
5431
5495
|
}
|
|
5432
|
-
.bp_base_grid_list_item_module_gridList--
|
|
5496
|
+
.bp_base_grid_list_item_module_gridList--17ab9 .bp_base_grid_list_item_module_gridListItem--17ab9 .bp_base_grid_list_item_module_subtitle--17ab9.bp_base_grid_list_item_module_loading--17ab9{
|
|
5433
5497
|
height:var(--grid-list-subtitle-loading-height);
|
|
5434
5498
|
}
|
|
5435
|
-
.bp_base_grid_list_item_module_gridList--
|
|
5499
|
+
.bp_base_grid_list_item_module_gridList--17ab9 .bp_base_grid_list_item_module_gridListItem--17ab9.bp_base_grid_list_item_module_isItemInteracted--17ab9,.bp_base_grid_list_item_module_gridList--17ab9 .bp_base_grid_list_item_module_gridListItem--17ab9:hover,.bp_base_grid_list_item_module_gridList--17ab9 .bp_base_grid_list_item_module_gridListItem--17ab9[data-active-item],.bp_base_grid_list_item_module_gridList--17ab9 .bp_base_grid_list_item_module_gridListItem--17ab9[data-focus-visible],.bp_base_grid_list_item_module_gridList--17ab9 .bp_base_grid_list_item_module_gridListItem--17ab9[data-focused],.bp_base_grid_list_item_module_gridList--17ab9 .bp_base_grid_list_item_module_gridListItem--17ab9[data-hovered]{
|
|
5436
5500
|
--actions-opacity:1;
|
|
5437
5501
|
box-shadow:var(--grid-list-item-hover-box-shadow);
|
|
5438
5502
|
outline:var(--grid-list-item-hover-outline);
|
|
5439
5503
|
}
|
|
5440
|
-
.bp_base_grid_list_item_module_gridList--
|
|
5504
|
+
.bp_base_grid_list_item_module_gridList--17ab9 .bp_base_grid_list_item_module_gridListItem--17ab9[data-active-item]::before,.bp_base_grid_list_item_module_gridList--17ab9 .bp_base_grid_list_item_module_gridListItem--17ab9[data-focus-visible]::before{
|
|
5441
5505
|
border-radius:var(--grid-list-item-border-radius);
|
|
5442
5506
|
content:"";
|
|
5443
5507
|
display:block;
|
|
@@ -5449,7 +5513,7 @@
|
|
|
5449
5513
|
top:0;
|
|
5450
5514
|
width:100%;
|
|
5451
5515
|
}
|
|
5452
|
-
.bp_base_grid_list_item_module_gridList--
|
|
5516
|
+
.bp_base_grid_list_item_module_gridList--17ab9 .bp_base_grid_list_item_module_gridListItem--17ab9[data-active-item]::after,.bp_base_grid_list_item_module_gridList--17ab9 .bp_base_grid_list_item_module_gridListItem--17ab9[data-focus-visible]::after{
|
|
5453
5517
|
border-radius:var(--grid-list-item-border-radius);
|
|
5454
5518
|
content:"";
|
|
5455
5519
|
display:block;
|
|
@@ -5461,16 +5525,16 @@
|
|
|
5461
5525
|
top:0;
|
|
5462
5526
|
width:100%;
|
|
5463
5527
|
}
|
|
5464
|
-
.bp_base_grid_list_item_module_gridList--
|
|
5528
|
+
.bp_base_grid_list_item_module_gridList--17ab9 .bp_base_grid_list_item_module_gridListItem--17ab9[aria-selected=true]{
|
|
5465
5529
|
--actions-opacity:1;
|
|
5466
5530
|
--item-background:var(--grid-list-item-selected-background);
|
|
5467
5531
|
outline:var(--grid-list-item-selected-outline);
|
|
5468
5532
|
}
|
|
5469
|
-
.bp_base_grid_list_item_module_gridList--
|
|
5533
|
+
.bp_base_grid_list_item_module_gridList--17ab9 .bp_base_grid_list_item_module_gridListItem--17ab9[aria-selected=true]:not([data-hovered], [data-focus-visible], [data-focused], .bp_base_grid_list_item_module_isItemInteracted--17ab9) .bp_base_grid_list_item_module_actions--17ab9 .bp_base_grid_list_item_module_inner--17ab9{
|
|
5470
5534
|
opacity:0;
|
|
5471
5535
|
}
|
|
5472
5536
|
@media (pointer: coarse){
|
|
5473
|
-
.bp_base_grid_list_item_module_gridList--
|
|
5537
|
+
.bp_base_grid_list_item_module_gridList--17ab9 .bp_base_grid_list_item_module_gridListItem--17ab9{
|
|
5474
5538
|
--row-gap:var(--grid-list-item-coarse-row-gap);
|
|
5475
5539
|
--actions-opacity:1;
|
|
5476
5540
|
grid-template-areas:"thumbnail" "head" "subtitle" "actions";
|
|
@@ -5478,7 +5542,7 @@
|
|
|
5478
5542
|
}
|
|
5479
5543
|
}
|
|
5480
5544
|
|
|
5481
|
-
.bp_base_grid_list_item_module_tooltipContent--
|
|
5545
|
+
.bp_base_grid_list_item_module_tooltipContent--17ab9{
|
|
5482
5546
|
background-color:var(--surface-tooltip-surface);
|
|
5483
5547
|
border:var(--border-1) solid var(--surface-tooltip-surface);
|
|
5484
5548
|
border-radius:var(--radius-1);
|
|
@@ -5497,28 +5561,28 @@
|
|
|
5497
5561
|
word-break:break-word;
|
|
5498
5562
|
z-index:2147483647;
|
|
5499
5563
|
}
|
|
5500
|
-
.bp_base_grid_list_item_module_tooltipContent--
|
|
5564
|
+
.bp_base_grid_list_item_module_tooltipContent--17ab9 .bp_base_grid_list_item_module_tooltipArrow--17ab9 svg{
|
|
5501
5565
|
display:block;
|
|
5502
5566
|
height:.5rem;
|
|
5503
5567
|
width:1rem;
|
|
5504
5568
|
}
|
|
5505
|
-
.bp_base_grid_list_item_module_tooltipContent--
|
|
5569
|
+
.bp_base_grid_list_item_module_tooltipContent--17ab9[data-placement=top]{
|
|
5506
5570
|
margin-block-end:var(--space-2);
|
|
5507
5571
|
}
|
|
5508
|
-
.bp_base_grid_list_item_module_tooltipContent--
|
|
5572
|
+
.bp_base_grid_list_item_module_tooltipContent--17ab9[data-placement=top] .bp_base_grid_list_item_module_tooltipArrow--17ab9 svg{
|
|
5509
5573
|
transform:rotate(180deg);
|
|
5510
5574
|
}
|
|
5511
|
-
.bp_base_grid_list_item_module_tooltipContent--
|
|
5575
|
+
.bp_base_grid_list_item_module_tooltipContent--17ab9[data-placement=bottom]{
|
|
5512
5576
|
margin-block-start:var(--space-2);
|
|
5513
5577
|
}
|
|
5514
|
-
.bp_base_grid_list_item_module_tooltipContent--
|
|
5578
|
+
.bp_base_grid_list_item_module_tooltipContent--17ab9[data-placement=right]{
|
|
5515
5579
|
margin-inline-start:var(--space-2);
|
|
5516
5580
|
}
|
|
5517
|
-
.bp_base_grid_list_item_module_tooltipContent--
|
|
5581
|
+
.bp_base_grid_list_item_module_tooltipContent--17ab9[data-placement=left]{
|
|
5518
5582
|
margin-inline-end:var(--space-2);
|
|
5519
5583
|
}
|
|
5520
5584
|
|
|
5521
|
-
.bp_base_grid_list_item_module_staticList--
|
|
5585
|
+
.bp_base_grid_list_item_module_staticList--17ab9 .bp_base_grid_list_item_module_staticListItem--17ab9{
|
|
5522
5586
|
display:contents;
|
|
5523
5587
|
}
|
|
5524
5588
|
.bp_guided_tooltip_module_content--47a15{
|
|
@@ -6915,18 +6979,81 @@ table.bp_inline_table_module_inlineTable--14908[data-modern=true] td:last-child,
|
|
|
6915
6979
|
}
|
|
6916
6980
|
}
|
|
6917
6981
|
|
|
6918
|
-
.bp_context_menu_module_menuBlock--
|
|
6919
|
-
|
|
6920
|
-
|
|
6921
|
-
|
|
6922
|
-
|
|
6982
|
+
.bp_context_menu_module_menuBlock--e8e64[data-modern=false]{
|
|
6983
|
+
--context-menu-block-min-width:var(--blueprint-web-context-menu-min-width, 160px);
|
|
6984
|
+
--context-menu-block-max-width:var(--blueprint-web-context-menu-max-width);
|
|
6985
|
+
--context-menu-block-max-height:var(
|
|
6986
|
+
--blueprint-web-context-menu-max-height,
|
|
6987
|
+
var(--radix-context-menu-content-available-height)
|
|
6988
|
+
);
|
|
6989
|
+
--context-menu-block-padding:var(--space-3);
|
|
6990
|
+
--context-menu-block-background-color:var(--surface-menu-surface);
|
|
6991
|
+
--context-menu-block-backdrop-filter:none;
|
|
6992
|
+
--context-menu-block-radius:var(--radius-3);
|
|
6993
|
+
--context-menu-block-border:var(--border-1) solid var(--border-card-border);
|
|
6994
|
+
--context-menu-block-shadow:var(--dropshadow-3);
|
|
6995
|
+
--context-menu-item-gap:var(--space-4);
|
|
6996
|
+
--context-menu-background-color:var(--surface-menu-surface);
|
|
6997
|
+
--context-menu-fullscreen-content-padding:var(--space-3);
|
|
6998
|
+
--context-menu-item-radius:var(--radius-3);
|
|
6999
|
+
--context-menu-item-border:var(--border-2) solid #0000;
|
|
7000
|
+
--context-menu-item-background-color-hover:var(--surface-menu-surface-focus);
|
|
7001
|
+
--context-menu-item-background-color-pressed:var(--surface-menu-surface-focus);
|
|
7002
|
+
--context-menu-item-focus-border:var(--border-2) solid var(--outline-focus-on-light);
|
|
7003
|
+
--context-menu-item-padding:var(--space-2);
|
|
7004
|
+
--context-menu-items-separator-margin:var(--space-2);
|
|
7005
|
+
}
|
|
7006
|
+
|
|
7007
|
+
.bp_context_menu_module_menuBlock--e8e64[data-modern=true]{
|
|
7008
|
+
--context-menu-block-min-width:var(--blueprint-web-context-menu-min-width, 160px);
|
|
7009
|
+
--context-menu-block-max-width:var(--blueprint-web-context-menu-max-width);
|
|
7010
|
+
--context-menu-block-max-height:var(
|
|
7011
|
+
--blueprint-web-context-menu-max-height,
|
|
7012
|
+
var(--radix-context-menu-content-available-height)
|
|
7013
|
+
);
|
|
7014
|
+
--context-menu-block-padding:var(--bp-space-030);
|
|
7015
|
+
--context-menu-block-background-color:var(--bp-surface-menu-surface-dropdown);
|
|
7016
|
+
--context-menu-block-backdrop-filter:blur(16px);
|
|
7017
|
+
--context-menu-block-radius:var(--bp-radius-10);
|
|
7018
|
+
--context-menu-block-border:var(--bp-border-01) solid var(--bp-border-menu-border);
|
|
7019
|
+
--context-menu-block-shadow:var(--dropshadow-2);
|
|
7020
|
+
--context-menu-item-gap:var(--bp-space-030);
|
|
7021
|
+
--context-menu-background-color:#0000;
|
|
7022
|
+
--context-menu-fullscreen-content-padding:var(--bp-space-030);
|
|
7023
|
+
--context-menu-item-radius:var(--bp-radius-06);
|
|
7024
|
+
--context-menu-item-border:var(--bp-border-02) solid #0000;
|
|
7025
|
+
--context-menu-item-background-color-hover:var(--bp-surface-menu-item-surface-hover);
|
|
7026
|
+
--context-menu-item-background-color-pressed:var(--bp-surface-menu-item-surface-pressed);
|
|
7027
|
+
--context-menu-item-focus-border:var(--bp-border-02) solid var(--bp-outline-focus-on-light);
|
|
7028
|
+
--context-menu-item-padding:var(--bp-space-020);
|
|
7029
|
+
--context-menu-items-separator-margin:var(--bp-space-020);
|
|
7030
|
+
}
|
|
7031
|
+
|
|
7032
|
+
.bp_context_menu_module_menuHeader--e8e64[data-modern=false]{
|
|
7033
|
+
--context-menu-header-padding:var(--space-3);
|
|
7034
|
+
--context-menu-header-gap:var(--space-2);
|
|
7035
|
+
--context-menu-header-shadow:var(--dropshadow-1);
|
|
7036
|
+
}
|
|
7037
|
+
|
|
7038
|
+
.bp_context_menu_module_menuHeader--e8e64[data-modern=true]{
|
|
7039
|
+
--context-menu-header-padding:var(--bp-space-030) var(--bp-space-040);
|
|
7040
|
+
--context-menu-header-gap:var(--bp-space-030);
|
|
7041
|
+
--context-menu-header-shadow:var(--dropshadow-1);
|
|
7042
|
+
}
|
|
7043
|
+
|
|
7044
|
+
.bp_context_menu_module_menuBlock--e8e64{
|
|
7045
|
+
backdrop-filter:var(--context-menu-block-backdrop-filter);
|
|
7046
|
+
background-color:var(--context-menu-block-background-color);
|
|
7047
|
+
border:var(--context-menu-block-border);
|
|
7048
|
+
border-radius:var(--context-menu-block-radius);
|
|
7049
|
+
box-shadow:var(--context-menu-block-shadow);
|
|
6923
7050
|
box-sizing:border-box;
|
|
6924
|
-
max-height:var(--
|
|
6925
|
-
max-width:var(--
|
|
6926
|
-
min-width:var(--
|
|
6927
|
-
padding:var(--
|
|
7051
|
+
max-height:var(--context-menu-block-max-height);
|
|
7052
|
+
max-width:var(--context-menu-block-max-width);
|
|
7053
|
+
min-width:var(--context-menu-block-min-width);
|
|
7054
|
+
padding:var(--context-menu-block-padding);
|
|
6928
7055
|
}
|
|
6929
|
-
.bp_context_menu_module_menuBlock--
|
|
7056
|
+
.bp_context_menu_module_menuBlock--e8e64[data-menu-fullscreen=true]{
|
|
6930
7057
|
border:unset;
|
|
6931
7058
|
border-radius:unset;
|
|
6932
7059
|
display:flex;
|
|
@@ -6939,41 +7066,40 @@ table.bp_inline_table_module_inlineTable--14908[data-modern=true] td:last-child,
|
|
|
6939
7066
|
position:relative;
|
|
6940
7067
|
width:100vw;
|
|
6941
7068
|
}
|
|
6942
|
-
.bp_context_menu_module_menuBlock--
|
|
7069
|
+
.bp_context_menu_module_menuBlock--e8e64[data-menu-fullscreen=true] .bp_context_menu_module_fullScreenContent--e8e64{
|
|
6943
7070
|
overflow-y:auto;
|
|
6944
|
-
padding:var(--
|
|
7071
|
+
padding:var(--context-menu-fullscreen-content-padding);
|
|
6945
7072
|
}
|
|
6946
|
-
.bp_context_menu_module_menuBlock--
|
|
6947
|
-
margin
|
|
6948
|
-
margin-inline:var(--space-2);
|
|
7073
|
+
.bp_context_menu_module_menuBlock--e8e64 .bp_context_menu_module_menuItemsSeparator--e8e64{
|
|
7074
|
+
margin:var(--context-menu-items-separator-margin);
|
|
6949
7075
|
}
|
|
6950
|
-
.bp_context_menu_module_menuBlock--
|
|
7076
|
+
.bp_context_menu_module_menuBlock--e8e64 .bp_context_menu_module_menuItem--e8e64{
|
|
6951
7077
|
align-items:center;
|
|
6952
|
-
background-color:var(--
|
|
6953
|
-
border:var(--border
|
|
6954
|
-
border-radius:var(--radius
|
|
7078
|
+
background-color:var(--context-menu-background-color);
|
|
7079
|
+
border:var(--context-menu-item-border);
|
|
7080
|
+
border-radius:var(--context-menu-item-radius);
|
|
6955
7081
|
cursor:pointer;
|
|
6956
7082
|
display:flex;
|
|
6957
|
-
gap:var(--
|
|
7083
|
+
gap:var(--context-menu-item-gap);
|
|
6958
7084
|
outline:none;
|
|
6959
|
-
padding-block:var(--
|
|
6960
|
-
padding-inline:var(--
|
|
7085
|
+
padding-block:var(--context-menu-item-padding);
|
|
7086
|
+
padding-inline:var(--context-menu-item-padding);
|
|
6961
7087
|
position:relative;
|
|
6962
7088
|
}
|
|
6963
|
-
.bp_context_menu_module_menuBlock--
|
|
7089
|
+
.bp_context_menu_module_menuBlock--e8e64 .bp_context_menu_module_menuItem--e8e64[data-disabled]{
|
|
6964
7090
|
opacity:60%;
|
|
6965
7091
|
pointer-events:none;
|
|
6966
7092
|
}
|
|
6967
|
-
.bp_context_menu_module_menuBlock--
|
|
6968
|
-
background-color:var(--
|
|
6969
|
-
border:var(--
|
|
7093
|
+
.bp_context_menu_module_menuBlock--e8e64 .bp_context_menu_module_menuItem--e8e64[data-highlighted]:not(:hover){
|
|
7094
|
+
background-color:var(--context-menu-item-background-color-hover);
|
|
7095
|
+
border:var(--context-menu-item-focus-border);
|
|
6970
7096
|
}
|
|
6971
|
-
.bp_context_menu_module_menuBlock--
|
|
6972
|
-
background-color:var(--
|
|
6973
|
-
border:var(--border
|
|
7097
|
+
.bp_context_menu_module_menuBlock--e8e64 .bp_context_menu_module_menuItem--e8e64:active{
|
|
7098
|
+
background-color:var(--context-menu-item-background-color-pressed);
|
|
7099
|
+
border:var(--context-menu-item-border);
|
|
6974
7100
|
}
|
|
6975
|
-
.bp_context_menu_module_menuBlock--
|
|
6976
|
-
background-color:var(--
|
|
7101
|
+
.bp_context_menu_module_menuBlock--e8e64 .bp_context_menu_module_menuItem--e8e64:hover{
|
|
7102
|
+
background-color:var(--context-menu-item-background-color-hover);
|
|
6977
7103
|
}
|
|
6978
7104
|
div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):has([data-menu-fullscreen=true]){
|
|
6979
7105
|
height:100%;
|
|
@@ -6981,29 +7107,29 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
|
|
|
6981
7107
|
width:100%;
|
|
6982
7108
|
}
|
|
6983
7109
|
|
|
6984
|
-
.bp_context_menu_module_menuHeader--
|
|
7110
|
+
.bp_context_menu_module_menuHeader--e8e64{
|
|
6985
7111
|
align-items:center;
|
|
6986
|
-
box-shadow:var(--
|
|
7112
|
+
box-shadow:var(--context-menu-header-shadow);
|
|
6987
7113
|
display:grid;
|
|
6988
|
-
gap:var(--
|
|
7114
|
+
gap:var(--context-menu-header-gap);
|
|
6989
7115
|
grid-template-areas:"submenu-close content close";
|
|
6990
7116
|
grid-template-columns:auto minmax(0, 1fr) auto;
|
|
6991
|
-
padding:var(--
|
|
7117
|
+
padding:var(--context-menu-header-padding);
|
|
6992
7118
|
}
|
|
6993
7119
|
|
|
6994
|
-
.bp_context_menu_module_headerTextContent--
|
|
7120
|
+
.bp_context_menu_module_headerTextContent--e8e64{
|
|
6995
7121
|
display:grid;
|
|
6996
7122
|
}
|
|
6997
7123
|
|
|
6998
|
-
.bp_context_menu_module_submenuCloseButton--
|
|
7124
|
+
.bp_context_menu_module_submenuCloseButton--e8e64{
|
|
6999
7125
|
grid-area:submenu-close;
|
|
7000
7126
|
}
|
|
7001
7127
|
|
|
7002
|
-
.bp_context_menu_module_menuCloseButton--
|
|
7128
|
+
.bp_context_menu_module_menuCloseButton--e8e64{
|
|
7003
7129
|
grid-area:close;
|
|
7004
7130
|
}
|
|
7005
7131
|
|
|
7006
|
-
.bp_context_menu_module_ellipsis--
|
|
7132
|
+
.bp_context_menu_module_ellipsis--e8e64{
|
|
7007
7133
|
overflow:hidden;
|
|
7008
7134
|
text-overflow:ellipsis;
|
|
7009
7135
|
white-space:nowrap;
|
|
@@ -2,6 +2,7 @@ import { jsx, jsxs } from 'react/jsx-runtime';
|
|
|
2
2
|
import * as ContextMenuPrimitve from '@radix-ui/react-context-menu';
|
|
3
3
|
import clsx from 'clsx';
|
|
4
4
|
import { forwardRef, Children, isValidElement } from 'react';
|
|
5
|
+
import { useBlueprintModernization } from '../../blueprint-modernization-context/useBlueprintModernization.js';
|
|
5
6
|
import { useFullScreenContextMenu } from '../menu-utils/responsiveness/FullScreenContextMenuContext.js';
|
|
6
7
|
import { ContextMenuHeader } from './context-menu-menu-header.js';
|
|
7
8
|
import styles from './context-menu.module.js';
|
|
@@ -32,6 +33,9 @@ const ContextMenuMenuContent = /*#__PURE__*/forwardRef((props, forwardedRef) =>
|
|
|
32
33
|
className,
|
|
33
34
|
...rest
|
|
34
35
|
} = props;
|
|
36
|
+
const {
|
|
37
|
+
enableModernizedComponents
|
|
38
|
+
} = useBlueprintModernization();
|
|
35
39
|
const {
|
|
36
40
|
isMenuFullScreenEnabled
|
|
37
41
|
} = useFullScreenContextMenu();
|
|
@@ -47,6 +51,7 @@ const ContextMenuMenuContent = /*#__PURE__*/forwardRef((props, forwardedRef) =>
|
|
|
47
51
|
ref: forwardedRef,
|
|
48
52
|
className: clsx(styles.menuBlock, className),
|
|
49
53
|
"data-menu-fullscreen": true,
|
|
54
|
+
"data-modern": enableModernizedComponents,
|
|
50
55
|
children: [Header, jsx("div", {
|
|
51
56
|
className: styles.fullScreenContent,
|
|
52
57
|
children: OtherChildren
|
|
@@ -60,6 +65,7 @@ const ContextMenuMenuContent = /*#__PURE__*/forwardRef((props, forwardedRef) =>
|
|
|
60
65
|
...rest,
|
|
61
66
|
ref: forwardedRef,
|
|
62
67
|
className: clsx(styles.menuBlock, className),
|
|
68
|
+
"data-modern": enableModernizedComponents,
|
|
63
69
|
children: children
|
|
64
70
|
})
|
|
65
71
|
});
|
|
@@ -2,6 +2,7 @@ import { jsx, jsxs } from 'react/jsx-runtime';
|
|
|
2
2
|
import { XMark, PointerChevronLeft } from '@box/blueprint-web-assets/icons/Fill';
|
|
3
3
|
import clsx from 'clsx';
|
|
4
4
|
import { forwardRef, useCallback } from 'react';
|
|
5
|
+
import { useBlueprintModernization } from '../../blueprint-modernization-context/useBlueprintModernization.js';
|
|
5
6
|
import { Text } from '../../text/text.js';
|
|
6
7
|
import { composeEventHandlers } from '../../utils/composeEventHandlers.js';
|
|
7
8
|
import { IconButton } from '../icon-button/icon-button.js';
|
|
@@ -55,9 +56,13 @@ const MenuHeaderPrimitive = ({
|
|
|
55
56
|
className,
|
|
56
57
|
...rest
|
|
57
58
|
}) => {
|
|
59
|
+
const {
|
|
60
|
+
enableModernizedComponents
|
|
61
|
+
} = useBlueprintModernization();
|
|
58
62
|
return jsx("div", {
|
|
59
63
|
...rest,
|
|
60
64
|
className: clsx(styles.menuHeader, className),
|
|
65
|
+
"data-modern": enableModernizedComponents,
|
|
61
66
|
role: "presentation",
|
|
62
67
|
children: children
|
|
63
68
|
});
|
|
@@ -2,6 +2,7 @@ import { jsx, jsxs } from 'react/jsx-runtime';
|
|
|
2
2
|
import * as ContextMenuPrimitve from '@radix-ui/react-context-menu';
|
|
3
3
|
import clsx from 'clsx';
|
|
4
4
|
import { forwardRef, useCallback } from 'react';
|
|
5
|
+
import { useBlueprintModernization } from '../../blueprint-modernization-context/useBlueprintModernization.js';
|
|
5
6
|
import { useFullScreenContextMenu } from '../menu-utils/responsiveness/FullScreenContextMenuContext.js';
|
|
6
7
|
import { sortMenuChildren } from './context-menu-menu-content.js';
|
|
7
8
|
import styles from './context-menu.module.js';
|
|
@@ -19,6 +20,9 @@ const ContextMenuSubMenuContent = /*#__PURE__*/forwardRef((props, forwardedRef)
|
|
|
19
20
|
className,
|
|
20
21
|
...rest
|
|
21
22
|
} = props;
|
|
23
|
+
const {
|
|
24
|
+
enableModernizedComponents
|
|
25
|
+
} = useBlueprintModernization();
|
|
22
26
|
const {
|
|
23
27
|
isMenuFullScreenEnabled
|
|
24
28
|
} = useFullScreenContextMenu();
|
|
@@ -36,6 +40,7 @@ const ContextMenuSubMenuContent = /*#__PURE__*/forwardRef((props, forwardedRef)
|
|
|
36
40
|
alignOffset: alignOffsetPx,
|
|
37
41
|
className: clsx(styles.menuBlock, className),
|
|
38
42
|
"data-menu-fullscreen": true,
|
|
43
|
+
"data-modern": enableModernizedComponents,
|
|
39
44
|
// Prevents submenu from closing, when detects focus outside submenu in fullscreen mode,
|
|
40
45
|
// while mouse is moving over submenu.
|
|
41
46
|
onFocusOutside: preventDefault,
|
|
@@ -54,6 +59,7 @@ const ContextMenuSubMenuContent = /*#__PURE__*/forwardRef((props, forwardedRef)
|
|
|
54
59
|
ref: forwardedRef,
|
|
55
60
|
alignOffset: alignOffsetPx,
|
|
56
61
|
className: clsx(styles.menuBlock, className),
|
|
62
|
+
"data-modern": enableModernizedComponents,
|
|
57
63
|
sideOffset: sideOffsetPx,
|
|
58
64
|
children: children
|
|
59
65
|
})
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import '../../index.css';
|
|
2
|
-
var styles = {"menuBlock":"bp_context_menu_module_menuBlock--
|
|
2
|
+
var styles = {"menuBlock":"bp_context_menu_module_menuBlock--e8e64","menuHeader":"bp_context_menu_module_menuHeader--e8e64","fullScreenContent":"bp_context_menu_module_fullScreenContent--e8e64","menuItemsSeparator":"bp_context_menu_module_menuItemsSeparator--e8e64","menuItem":"bp_context_menu_module_menuItem--e8e64","headerTextContent":"bp_context_menu_module_headerTextContent--e8e64","submenuCloseButton":"bp_context_menu_module_submenuCloseButton--e8e64","menuCloseButton":"bp_context_menu_module_menuCloseButton--e8e64","ellipsis":"bp_context_menu_module_ellipsis--e8e64"};
|
|
3
3
|
|
|
4
4
|
export { styles as default };
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { jsx } from 'react/jsx-runtime';
|
|
2
2
|
import { forwardRef } from 'react';
|
|
3
|
+
import { useBlueprintModernization } from '../blueprint-modernization-context/useBlueprintModernization.js';
|
|
3
4
|
import { BaseGridList } from '../util-components/base-grid-list-item/base-grid-list.js';
|
|
4
5
|
|
|
5
6
|
const SmallList = /*#__PURE__*/forwardRef(function SmallList(props, forwardedRef) {
|
|
@@ -7,9 +8,13 @@ const SmallList = /*#__PURE__*/forwardRef(function SmallList(props, forwardedRef
|
|
|
7
8
|
children,
|
|
8
9
|
...rest
|
|
9
10
|
} = props;
|
|
11
|
+
const {
|
|
12
|
+
enableModernizedComponents
|
|
13
|
+
} = useBlueprintModernization();
|
|
10
14
|
return jsx(BaseGridList, {
|
|
11
15
|
...rest,
|
|
12
16
|
ref: forwardedRef,
|
|
17
|
+
"data-modern": enableModernizedComponents,
|
|
13
18
|
layoutStyle: "small-list",
|
|
14
19
|
children: children
|
|
15
20
|
});
|
|
@@ -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--17ab9","smallListItem":"bp_base_grid_list_item_module_smallListItem--17ab9","loading":"bp_base_grid_list_item_module_loading--17ab9","thumbnail":"bp_base_grid_list_item_module_thumbnail--17ab9","thumbnailContent":"bp_base_grid_list_item_module_thumbnailContent--17ab9","header":"bp_base_grid_list_item_module_header--17ab9","subtitle":"bp_base_grid_list_item_module_subtitle--17ab9","actions":"bp_base_grid_list_item_module_actions--17ab9","selection":"bp_base_grid_list_item_module_selection--17ab9","inner":"bp_base_grid_list_item_module_inner--17ab9","actionsCheckboxWrapper":"bp_base_grid_list_item_module_actionsCheckboxWrapper--17ab9","largeList":"bp_base_grid_list_item_module_largeList--17ab9","largeListItem":"bp_base_grid_list_item_module_largeListItem--17ab9","fade":"bp_base_grid_list_item_module_fade--17ab9","description":"bp_base_grid_list_item_module_description--17ab9","snippet":"bp_base_grid_list_item_module_snippet--17ab9","snippetContent":"bp_base_grid_list_item_module_snippetContent--17ab9","react-aria-DropIndicator":"bp_base_grid_list_item_module_react-aria-DropIndicator--17ab9","gridList":"bp_base_grid_list_item_module_gridList--17ab9","gridListItem":"bp_base_grid_list_item_module_gridListItem--17ab9","statusPin":"bp_base_grid_list_item_module_statusPin--17ab9","isItemInteracted":"bp_base_grid_list_item_module_isItemInteracted--17ab9","tooltipContent":"bp_base_grid_list_item_module_tooltipContent--17ab9","tooltipArrow":"bp_base_grid_list_item_module_tooltipArrow--17ab9","staticList":"bp_base_grid_list_item_module_staticList--17ab9","staticListItem":"bp_base_grid_list_item_module_staticListItem--17ab9"};
|
|
3
3
|
|
|
4
4
|
export { styles as default };
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
2
2
|
import clsx from 'clsx';
|
|
3
|
+
import { useBlueprintModernization } from '../../blueprint-modernization-context/useBlueprintModernization.js';
|
|
3
4
|
import styles from './menu-item-sections.module.js';
|
|
4
5
|
|
|
5
6
|
/**
|
|
@@ -10,11 +11,15 @@ const MenuItemSideContent = ({
|
|
|
10
11
|
className,
|
|
11
12
|
...rest
|
|
12
13
|
}) => {
|
|
14
|
+
const {
|
|
15
|
+
enableModernizedComponents
|
|
16
|
+
} = useBlueprintModernization();
|
|
13
17
|
return jsx("div", {
|
|
14
18
|
...rest,
|
|
15
19
|
className: clsx(styles.menuItemSideContent, {
|
|
16
20
|
[styles.textOnLightSecondary]: typeof children === 'string'
|
|
17
21
|
}, className),
|
|
22
|
+
"data-modern": enableModernizedComponents,
|
|
18
23
|
children: children
|
|
19
24
|
});
|
|
20
25
|
};
|
|
@@ -26,18 +31,24 @@ const MenuItemMainContent = ({
|
|
|
26
31
|
label,
|
|
27
32
|
description,
|
|
28
33
|
...rest
|
|
29
|
-
}) =>
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
34
|
+
}) => {
|
|
35
|
+
const {
|
|
36
|
+
enableModernizedComponents
|
|
37
|
+
} = useBlueprintModernization();
|
|
38
|
+
return jsxs("div", {
|
|
39
|
+
...rest,
|
|
40
|
+
className: clsx(styles.menuItemMainContent, className),
|
|
41
|
+
"data-modern": enableModernizedComponents,
|
|
42
|
+
children: [jsx("span", {
|
|
43
|
+
className: clsx(styles.label, {
|
|
44
|
+
[styles.bold]: Boolean(description)
|
|
45
|
+
}),
|
|
46
|
+
children: label
|
|
47
|
+
}), description ? jsx("span", {
|
|
48
|
+
className: styles.description,
|
|
49
|
+
children: description
|
|
50
|
+
}) : null]
|
|
51
|
+
});
|
|
52
|
+
};
|
|
42
53
|
|
|
43
54
|
export { MenuItemMainContent, MenuItemSideContent };
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import '../../index.css';
|
|
2
|
-
var styles = {"menuItemMainContent":"bp_menu_item_sections_module_menuItemMainContent--
|
|
2
|
+
var styles = {"menuItemMainContent":"bp_menu_item_sections_module_menuItemMainContent--d8163","menuItemSideContent":"bp_menu_item_sections_module_menuItemSideContent--d8163","label":"bp_menu_item_sections_module_label--d8163","bold":"bp_menu_item_sections_module_bold--d8163","description":"bp_menu_item_sections_module_description--d8163","textOnLightSecondary":"bp_menu_item_sections_module_textOnLightSecondary--d8163"};
|
|
3
3
|
|
|
4
4
|
export { styles as default };
|