@carbon/ibm-products 2.30.0-alpha.9 → 2.31.0-alpha.5
Sign up to get free protection for your applications and to get access to all the features.
- package/css/index-full-carbon.css +270 -30
- package/css/index-full-carbon.css.map +1 -1
- package/css/index-full-carbon.min.css +1 -1
- package/css/index-full-carbon.min.css.map +1 -1
- package/css/index-without-carbon-released-only.css +21 -11
- package/css/index-without-carbon-released-only.css.map +1 -1
- package/css/index-without-carbon-released-only.min.css +1 -1
- package/css/index-without-carbon-released-only.min.css.map +1 -1
- package/css/index-without-carbon.css +270 -30
- package/css/index-without-carbon.css.map +1 -1
- package/css/index-without-carbon.min.css +1 -1
- package/css/index-without-carbon.min.css.map +1 -1
- package/css/index.css +266 -26
- package/css/index.css.map +1 -1
- package/css/index.min.css +1 -1
- package/css/index.min.css.map +1 -1
- package/es/components/ComboButton/ComboButton.d.ts +38 -18
- package/es/components/ComboButton/ComboButton.js +25 -21
- package/es/components/ComboButton/ComboButtonItem/index.d.ts +22 -13
- package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/DraggableItemsList.js +4 -2
- package/es/components/Datagrid/Datagrid/addons/stateReducer.js +7 -0
- package/es/components/EditInPlace/EditInPlace.js +4 -5
- package/es/components/Nav/Nav.d.ts +3 -0
- package/es/components/Nav/Nav.js +154 -0
- package/es/components/Nav/NavItem.d.ts +35 -0
- package/es/components/Nav/NavItem.js +149 -0
- package/es/components/Nav/NavItemLink.d.ts +3 -0
- package/es/components/Nav/NavItemLink.js +30 -0
- package/es/components/Nav/NavList.d.ts +4 -0
- package/es/components/Nav/NavList.js +168 -0
- package/es/components/Nav/index.d.ts +3 -0
- package/es/components/Tearsheet/TearsheetShell.js +22 -7
- package/es/components/index.d.ts +1 -0
- package/es/global/js/package-settings.d.ts +1 -0
- package/es/global/js/package-settings.js +1 -0
- package/es/index.js +1 -0
- package/es/node_modules/@carbon/icon-helpers/es/index.js +140 -0
- package/es/node_modules/@carbon/icons-react/es/Icon.js +73 -0
- package/es/node_modules/@carbon/icons-react/es/generated/bucket-2.js +3091 -0
- package/es/node_modules/@carbon/icons-react/es/generated/bucket-8.js +3004 -0
- package/es/node_modules/@carbon/icons-react/es/iconPropTypes-4cbeb95d.js +14 -0
- package/es/settings.d.ts +1 -0
- package/lib/components/ComboButton/ComboButton.d.ts +38 -18
- package/lib/components/ComboButton/ComboButton.js +24 -20
- package/lib/components/ComboButton/ComboButtonItem/index.d.ts +22 -13
- package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/DraggableItemsList.js +4 -2
- package/lib/components/Datagrid/Datagrid/addons/stateReducer.js +7 -0
- package/lib/components/EditInPlace/EditInPlace.js +4 -5
- package/lib/components/Nav/Nav.d.ts +3 -0
- package/lib/components/Nav/Nav.js +161 -0
- package/lib/components/Nav/NavItem.d.ts +35 -0
- package/lib/components/Nav/NavItem.js +160 -0
- package/lib/components/Nav/NavItemLink.d.ts +3 -0
- package/lib/components/Nav/NavItemLink.js +38 -0
- package/lib/components/Nav/NavList.d.ts +4 -0
- package/lib/components/Nav/NavList.js +179 -0
- package/lib/components/Nav/index.d.ts +3 -0
- package/lib/components/Tearsheet/TearsheetShell.js +22 -7
- package/lib/components/index.d.ts +1 -0
- package/lib/global/js/package-settings.d.ts +1 -0
- package/lib/global/js/package-settings.js +1 -0
- package/lib/index.js +5 -0
- package/lib/node_modules/@carbon/icon-helpers/es/index.js +145 -0
- package/lib/node_modules/@carbon/icons-react/es/Icon.js +81 -0
- package/lib/node_modules/@carbon/icons-react/es/generated/bucket-2.js +3223 -0
- package/lib/node_modules/@carbon/icons-react/es/generated/bucket-8.js +3136 -0
- package/lib/node_modules/@carbon/icons-react/es/iconPropTypes-4cbeb95d.js +18 -0
- package/lib/settings.d.ts +1 -0
- package/package.json +5 -4
- package/scss/components/ComboButton/_combo-button.scss +19 -21
- package/scss/components/Datagrid/styles/_datagrid.scss +15 -4
- package/scss/components/Datagrid/styles/_useStickyColumn.scss +5 -2
- package/scss/components/Nav/_carbon-imports.scss +9 -0
- package/scss/components/Nav/_index-with-carbon.scss +9 -0
- package/scss/components/Nav/_index.scss +8 -0
- package/scss/components/Nav/_nav.scss +259 -0
- package/scss/components/Tearsheet/_tearsheet.scss +24 -6
- package/scss/components/_index-with-carbon.scss +1 -0
- package/scss/components/_index.scss +1 -0
@@ -5500,6 +5500,7 @@ a.cds--overflow-menu-options__btn::before {
|
|
5500
5500
|
outline: 2px solid transparent;
|
5501
5501
|
outline-offset: -2px;
|
5502
5502
|
background-color: var(--cds-layer);
|
5503
|
+
color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
|
5503
5504
|
}
|
5504
5505
|
|
5505
5506
|
.cds--overflow-menu-options__option--disabled .cds--overflow-menu-options__btn svg {
|
@@ -9942,6 +9943,8 @@ fieldset[disabled] .cds--form__helper-text {
|
|
9942
9943
|
inline-size: 1px;
|
9943
9944
|
visibility: inherit;
|
9944
9945
|
white-space: nowrap;
|
9946
|
+
margin-block-start: 0.9rem;
|
9947
|
+
margin-inline-start: 0.63rem;
|
9945
9948
|
visibility: inherit;
|
9946
9949
|
}
|
9947
9950
|
|
@@ -13992,6 +13995,10 @@ button.cds--dropdown-text:focus {
|
|
13992
13995
|
border-block-end-color: var(--cds-border-subtle);
|
13993
13996
|
}
|
13994
13997
|
|
13998
|
+
.cds--dropdown--inline.cds--dropdown--readonly {
|
13999
|
+
border-block-end-color: transparent;
|
14000
|
+
}
|
14001
|
+
|
13995
14002
|
.cds--dropdown--readonly .cds--list-box__field,
|
13996
14003
|
.cds--dropdown--readonly .cds--list-box__menu-icon {
|
13997
14004
|
cursor: default;
|
@@ -21980,6 +21987,10 @@ span.cds--pagination__text.cds--pagination__items-count {
|
|
21980
21987
|
}
|
21981
21988
|
}
|
21982
21989
|
|
21990
|
+
.cds--tabs--contained ~ .cds--tab-content {
|
21991
|
+
background: var(--cds-layer);
|
21992
|
+
}
|
21993
|
+
|
21983
21994
|
.cds--tab-content--interactive:focus {
|
21984
21995
|
outline: none;
|
21985
21996
|
}
|
@@ -25746,60 +25757,60 @@ a.cds--side-nav__link--current::before {
|
|
25746
25757
|
margin-bottom: 0.5rem;
|
25747
25758
|
}
|
25748
25759
|
|
25749
|
-
.
|
25760
|
+
.c4p--combo-button {
|
25750
25761
|
position: relative;
|
25751
25762
|
display: inline-flex;
|
25752
25763
|
}
|
25753
25764
|
|
25754
|
-
.
|
25765
|
+
.c4p--combo-button__action {
|
25755
25766
|
display: block;
|
25756
25767
|
overflow-x: hidden;
|
25757
25768
|
text-overflow: ellipsis;
|
25758
25769
|
white-space: nowrap;
|
25759
25770
|
}
|
25760
25771
|
|
25761
|
-
.
|
25772
|
+
.c4p--combo-button .c4p--combo-button__overflow-menu {
|
25762
25773
|
width: 3rem;
|
25763
|
-
height:
|
25774
|
+
height: 3rem;
|
25764
25775
|
border-left: 0.125rem solid var(--cds-border-subtle-01, #c6c6c6);
|
25765
25776
|
background-color: var(--cds-background-brand, #0f62fe);
|
25766
25777
|
}
|
25767
25778
|
|
25768
|
-
.
|
25769
|
-
.
|
25770
|
-
.
|
25771
|
-
.
|
25779
|
+
.c4p--combo-button .c4p--combo-button__overflow-menu.cds--overflow-menu:hover,
|
25780
|
+
.c4p--combo-button .c4p--combo-button__overflow-menu.cds--overflow-menu--open,
|
25781
|
+
.c4p--combo-button .cds--overflow-menu.cds--overflow-menu--open:hover,
|
25782
|
+
.c4p--combo-button .cds--overflow-menu.cds--overflow-menu--open {
|
25772
25783
|
background-color: var(--cds-button-primary-hover, #0050e6);
|
25773
25784
|
}
|
25774
25785
|
|
25775
|
-
.
|
25786
|
+
.c4p--combo-button .cds--overflow-menu--flip.cds--overflow-menu-options[data-floating-menu-direction=bottom]::after {
|
25776
25787
|
width: 0;
|
25777
25788
|
height: 0;
|
25778
25789
|
}
|
25779
25790
|
|
25780
|
-
.
|
25791
|
+
.c4p--combo-button__overflow-menu.cds--overflow-menu:active {
|
25781
25792
|
background-color: var(--cds-button-primary-active, #002d9c);
|
25782
25793
|
}
|
25783
25794
|
|
25784
|
-
.
|
25795
|
+
.c4p--combo-button__overflow-menu__icon {
|
25785
25796
|
fill: var(--cds-icon-on-color, #ffffff);
|
25786
25797
|
pointer-events: none;
|
25787
25798
|
}
|
25788
25799
|
|
25789
|
-
.
|
25800
|
+
.c4p--combo-button__overflow-menu__list.cds--overflow-menu-options {
|
25790
25801
|
left: 0;
|
25791
25802
|
width: 100%;
|
25792
25803
|
}
|
25793
25804
|
|
25794
|
-
.
|
25805
|
+
.c4p--combo-button__overflow-menu__list:after {
|
25795
25806
|
display: none;
|
25796
25807
|
}
|
25797
25808
|
|
25798
|
-
.
|
25809
|
+
.c4p--combo-button__overflow-menu__item.cds--overflow-menu-options__btn {
|
25799
25810
|
max-width: 100%;
|
25800
25811
|
}
|
25801
25812
|
|
25802
|
-
.
|
25813
|
+
.c4p--combo-button__overflow-menu__item__icon {
|
25803
25814
|
margin-left: auto;
|
25804
25815
|
}
|
25805
25816
|
|
@@ -26606,19 +26617,19 @@ a.cds--side-nav__link--current::before {
|
|
26606
26617
|
.c4p--tearsheet.c4p--tearsheet.c4p--tearsheet .c4p--tearsheet__container {
|
26607
26618
|
transition: transform 240ms cubic-bezier(0, 0, 0.3, 1), max-height 240ms cubic-bezier(0, 0, 0.3, 1);
|
26608
26619
|
}
|
26609
|
-
.c4p--tearsheet.c4p--tearsheet--stacked-1-of-2 .c4p--tearsheet__container, .c4p--tearsheet.c4p--tearsheet--stacked-2-of-3 .c4p--tearsheet__container {
|
26620
|
+
.c4p--tearsheet.c4p--tearsheet--stacked-1-of-2 .c4p--tearsheet__container:not(.c4p--tearsheet__container--mixed-size-stacking), .c4p--tearsheet.c4p--tearsheet--stacked-2-of-3 .c4p--tearsheet__container:not(.c4p--tearsheet__container--mixed-size-stacking) {
|
26610
26621
|
max-height: calc(100% - 3rem + 1rem);
|
26611
26622
|
}
|
26612
|
-
.c4p--tearsheet.c4p--tearsheet--stacked-1-of-3 .c4p--tearsheet__container {
|
26623
|
+
.c4p--tearsheet.c4p--tearsheet--stacked-1-of-3 .c4p--tearsheet__container:not(.c4p--tearsheet__container--mixed-size-stacking) {
|
26613
26624
|
max-height: calc(100% - 3rem + 2 * 1rem);
|
26614
26625
|
}
|
26615
26626
|
.c4p--tearsheet .c4p--tearsheet__container--lower {
|
26616
26627
|
max-height: calc(100% - (3rem + 2.5rem));
|
26617
26628
|
}
|
26618
|
-
.c4p--tearsheet.c4p--tearsheet--stacked-1-of-2 .c4p--tearsheet__container--lower, .c4p--tearsheet.c4p--tearsheet--stacked-2-of-3 .c4p--tearsheet__container--lower {
|
26629
|
+
.c4p--tearsheet.c4p--tearsheet--stacked-1-of-2 .c4p--tearsheet__container--lower:not(.c4p--tearsheet__container--mixed-size-stacking), .c4p--tearsheet.c4p--tearsheet--stacked-2-of-3 .c4p--tearsheet__container--lower:not(.c4p--tearsheet__container--mixed-size-stacking) {
|
26619
26630
|
max-height: calc(100% - (3rem + 2.5rem) + 1rem);
|
26620
26631
|
}
|
26621
|
-
.c4p--tearsheet.c4p--tearsheet--stacked-1-of-3 .c4p--tearsheet__container--lower {
|
26632
|
+
.c4p--tearsheet.c4p--tearsheet--stacked-1-of-3 .c4p--tearsheet__container--lower:not(.c4p--tearsheet__container--mixed-size-stacking) {
|
26622
26633
|
max-height: calc(100% - (3rem + 2.5rem) + 2 * 1rem);
|
26623
26634
|
}
|
26624
26635
|
.c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__container {
|
@@ -33464,7 +33475,6 @@ button.c4p--add-select__global-filter-toggle--open {
|
|
33464
33475
|
position: sticky;
|
33465
33476
|
z-index: 1;
|
33466
33477
|
left: 0;
|
33467
|
-
background-color: var(--cds-layer-01, #f4f4f4);
|
33468
33478
|
}
|
33469
33479
|
.c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-center .c4p--datagrid__cell {
|
33470
33480
|
align-items: center;
|
@@ -33486,7 +33496,6 @@ button.c4p--add-select__global-filter-toggle--open {
|
|
33486
33496
|
.c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-center th.cds--table-column-checkbox.c4p--datagrid__checkbox-cell-sticky-left {
|
33487
33497
|
position: sticky;
|
33488
33498
|
left: 0;
|
33489
|
-
background-color: var(--cds-layer-01, #f4f4f4);
|
33490
33499
|
}
|
33491
33500
|
.c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-center .c4p--datagrid__checkbox-cell th.cds--table-column-checkbox {
|
33492
33501
|
display: flex;
|
@@ -33666,6 +33675,18 @@ button.c4p--add-select__global-filter-toggle--open {
|
|
33666
33675
|
/* stylelint-disable-next-line declaration-no-important */
|
33667
33676
|
color: var(--cds-link-primary-hover, #0043ce) !important;
|
33668
33677
|
}
|
33678
|
+
.c4p--datagrid__grid-container .c4p--datagrid__carbon-row td {
|
33679
|
+
/* stylelint-disable-next-line declaration-no-important */
|
33680
|
+
background-color: var(--cds-layer-01, #f4f4f4);
|
33681
|
+
}
|
33682
|
+
.c4p--datagrid__grid-container .c4p--datagrid__carbon-row:hover td {
|
33683
|
+
/* stylelint-disable-next-line declaration-no-important */
|
33684
|
+
background-color: var(--cds-layer-hover-01, #e8e8e8);
|
33685
|
+
}
|
33686
|
+
.c4p--datagrid__grid-container .cds--data-table--selected td {
|
33687
|
+
/* stylelint-disable-next-line declaration-no-important */
|
33688
|
+
background-color: var(--cds-layer-selected-01, #e0e0e0);
|
33689
|
+
}
|
33669
33690
|
.c4p--datagrid__grid-container .cds--select-input {
|
33670
33691
|
-webkit-appearance: none;
|
33671
33692
|
}
|
@@ -33745,9 +33766,6 @@ button.c4p--add-select__global-filter-toggle--open {
|
|
33745
33766
|
background-color: var(--cds-background-selected-hover, rgba(141, 141, 141, 0.32));
|
33746
33767
|
}
|
33747
33768
|
|
33748
|
-
.c4p--datagrid__resizableColumn:hover {
|
33749
|
-
background-color: var(--cds-layer-selected-hover);
|
33750
|
-
}
|
33751
33769
|
.c4p--datagrid__resizableColumn:hover .c4p--datagrid__resizer {
|
33752
33770
|
border-right: 0.125rem solid var(--cds-border-strong-01, #8d8d8d);
|
33753
33771
|
background-color: var(--cds-background-selected-hover, rgba(141, 141, 141, 0.32));
|
@@ -34332,7 +34350,6 @@ button.c4p--add-select__global-filter-toggle--open {
|
|
34332
34350
|
display: flex;
|
34333
34351
|
align-items: center;
|
34334
34352
|
border-left: 1px solid var(--cds-layer-active-02, #c6c6c6);
|
34335
|
-
background-color: var(--cds-layer-01, #f4f4f4);
|
34336
34353
|
}
|
34337
34354
|
|
34338
34355
|
.c4p--datagrid__right-sticky-column-header {
|
@@ -34348,7 +34365,6 @@ button.c4p--add-select__global-filter-toggle--open {
|
|
34348
34365
|
display: flex;
|
34349
34366
|
align-items: center;
|
34350
34367
|
border-right: 1px solid var(--cds-layer-active-02, #c6c6c6);
|
34351
|
-
background-color: var(--cds-layer-01, #f4f4f4);
|
34352
34368
|
}
|
34353
34369
|
|
34354
34370
|
.c4p--datagrid__left-sticky-column-header {
|
@@ -34356,6 +34372,11 @@ button.c4p--add-select__global-filter-toggle--open {
|
|
34356
34372
|
position: sticky !important;
|
34357
34373
|
z-index: 1;
|
34358
34374
|
left: 0;
|
34375
|
+
border-right: 1px solid var(--cds-layer-active-02, #c6c6c6);
|
34376
|
+
}
|
34377
|
+
|
34378
|
+
.c4p--datagrid__right-sticky-column-header {
|
34379
|
+
border-left: 1px solid var(--cds-layer-active-02, #c6c6c6);
|
34359
34380
|
}
|
34360
34381
|
|
34361
34382
|
.c4p--datagrid__left-sticky-column-cell.c4p--datagrid__left-sticky-column-cell--with-extra-select-column,
|
@@ -37783,11 +37804,11 @@ a.cds--side-nav__link--current::before {
|
|
37783
37804
|
transition: transform 240ms cubic-bezier(0, 0, 0.3, 1), max-height 240ms cubic-bezier(0, 0, 0.3, 1);
|
37784
37805
|
}
|
37785
37806
|
|
37786
|
-
.c4p--tearsheet.c4p--tearsheet--stacked-1-of-2 .c4p--tearsheet__container, .c4p--tearsheet.c4p--tearsheet--stacked-2-of-3 .c4p--tearsheet__container {
|
37807
|
+
.c4p--tearsheet.c4p--tearsheet--stacked-1-of-2 .c4p--tearsheet__container:not(.c4p--tearsheet__container--mixed-size-stacking), .c4p--tearsheet.c4p--tearsheet--stacked-2-of-3 .c4p--tearsheet__container:not(.c4p--tearsheet__container--mixed-size-stacking) {
|
37787
37808
|
max-height: calc(100% - 3rem + 1rem);
|
37788
37809
|
}
|
37789
37810
|
|
37790
|
-
.c4p--tearsheet.c4p--tearsheet--stacked-1-of-3 .c4p--tearsheet__container {
|
37811
|
+
.c4p--tearsheet.c4p--tearsheet--stacked-1-of-3 .c4p--tearsheet__container:not(.c4p--tearsheet__container--mixed-size-stacking) {
|
37791
37812
|
max-height: calc(100% - 3rem + 2 * 1rem);
|
37792
37813
|
}
|
37793
37814
|
|
@@ -37795,11 +37816,11 @@ a.cds--side-nav__link--current::before {
|
|
37795
37816
|
max-height: calc(100% - (3rem + 2.5rem));
|
37796
37817
|
}
|
37797
37818
|
|
37798
|
-
.c4p--tearsheet.c4p--tearsheet--stacked-1-of-2 .c4p--tearsheet__container--lower, .c4p--tearsheet.c4p--tearsheet--stacked-2-of-3 .c4p--tearsheet__container--lower {
|
37819
|
+
.c4p--tearsheet.c4p--tearsheet--stacked-1-of-2 .c4p--tearsheet__container--lower:not(.c4p--tearsheet__container--mixed-size-stacking), .c4p--tearsheet.c4p--tearsheet--stacked-2-of-3 .c4p--tearsheet__container--lower:not(.c4p--tearsheet__container--mixed-size-stacking) {
|
37799
37820
|
max-height: calc(100% - (3rem + 2.5rem) + 1rem);
|
37800
37821
|
}
|
37801
37822
|
|
37802
|
-
.c4p--tearsheet.c4p--tearsheet--stacked-1-of-3 .c4p--tearsheet__container--lower {
|
37823
|
+
.c4p--tearsheet.c4p--tearsheet--stacked-1-of-3 .c4p--tearsheet__container--lower:not(.c4p--tearsheet__container--mixed-size-stacking) {
|
37803
37824
|
max-height: calc(100% - (3rem + 2.5rem) + 2 * 1rem);
|
37804
37825
|
}
|
37805
37826
|
|
@@ -41931,6 +41952,225 @@ a.cds--side-nav__link--current::before {
|
|
41931
41952
|
position: absolute;
|
41932
41953
|
}
|
41933
41954
|
|
41955
|
+
.c4p--nav {
|
41956
|
+
position: relative;
|
41957
|
+
}
|
41958
|
+
|
41959
|
+
.c4p--nav:not(:first-of-type) {
|
41960
|
+
padding-top: 1rem;
|
41961
|
+
}
|
41962
|
+
|
41963
|
+
.c4p--nav:not(:last-of-type) {
|
41964
|
+
padding-bottom: 1rem;
|
41965
|
+
}
|
41966
|
+
|
41967
|
+
.c4p--nav:last-of-type {
|
41968
|
+
padding-bottom: 2rem;
|
41969
|
+
}
|
41970
|
+
|
41971
|
+
.c4p--nav + .c4p--nav > .__heading {
|
41972
|
+
padding-top: 0.25rem;
|
41973
|
+
}
|
41974
|
+
|
41975
|
+
.c4p--nav::before {
|
41976
|
+
position: absolute;
|
41977
|
+
right: 2rem;
|
41978
|
+
bottom: 0;
|
41979
|
+
left: 2rem;
|
41980
|
+
display: inline-block;
|
41981
|
+
width: auto;
|
41982
|
+
/* stylelint-disable-next-line -- to-rem carbon replacement for rem */
|
41983
|
+
border-bottom: 0.0625rem solid var(--cds-layer-02, #ffffff);
|
41984
|
+
content: "";
|
41985
|
+
}
|
41986
|
+
|
41987
|
+
.c4p--nav:last-of-type::before {
|
41988
|
+
border-width: 0;
|
41989
|
+
}
|
41990
|
+
|
41991
|
+
.c4p--nav__wrapper {
|
41992
|
+
padding-left: initial;
|
41993
|
+
margin-top: initial;
|
41994
|
+
margin-bottom: initial;
|
41995
|
+
list-style: none;
|
41996
|
+
}
|
41997
|
+
.c4p--nav__wrapper[dir=rtl], [dir=rtl] .c4p--nav__wrapper {
|
41998
|
+
padding-right: initial;
|
41999
|
+
}
|
42000
|
+
|
42001
|
+
.c4p--nav__heading {
|
42002
|
+
font-size: var(--cds-caption-01-font-size, 0.75rem);
|
42003
|
+
font-weight: var(--cds-caption-01-font-weight, 400);
|
42004
|
+
line-height: var(--cds-caption-01-line-height, 1.33333);
|
42005
|
+
letter-spacing: var(--cds-caption-01-letter-spacing, 0.32px);
|
42006
|
+
padding: 0.75rem 2.5rem;
|
42007
|
+
margin-top: initial;
|
42008
|
+
margin-bottom: initial;
|
42009
|
+
color: var(--cds-text-secondary, #525252);
|
42010
|
+
}
|
42011
|
+
|
42012
|
+
.c4p--nav-list {
|
42013
|
+
font-size: var(--cds-body-short-01-font-size, 0.875rem);
|
42014
|
+
font-weight: var(--cds-body-short-01-font-weight, 400);
|
42015
|
+
line-height: var(--cds-body-short-01-line-height, 1.28572);
|
42016
|
+
letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
|
42017
|
+
display: flex;
|
42018
|
+
flex-direction: column;
|
42019
|
+
margin-bottom: 0.125rem;
|
42020
|
+
list-style: none;
|
42021
|
+
}
|
42022
|
+
|
42023
|
+
.c4p--nav-list:focus {
|
42024
|
+
outline: 0;
|
42025
|
+
outline-width: 0;
|
42026
|
+
}
|
42027
|
+
.c4p--nav-list:focus > .c4p--nav-item__link {
|
42028
|
+
outline: 2px solid var(--cds-focus, #0f62fe);
|
42029
|
+
outline-offset: -2px;
|
42030
|
+
}
|
42031
|
+
@media screen and (prefers-contrast) {
|
42032
|
+
.c4p--nav-list:focus > .c4p--nav-item__link {
|
42033
|
+
outline-style: dotted;
|
42034
|
+
}
|
42035
|
+
}
|
42036
|
+
|
42037
|
+
.c4p--nav-list__icon {
|
42038
|
+
margin-top: 0.125rem;
|
42039
|
+
margin-left: auto;
|
42040
|
+
transform: translate3d(-50%, 0, 0) rotate(0deg);
|
42041
|
+
transition-duration: 240ms;
|
42042
|
+
transition-property: transform;
|
42043
|
+
transition-timing-function: cubic-bezier(0.5, 0, 0.1, 1);
|
42044
|
+
}
|
42045
|
+
.c4p--nav-list__icon[dir=rtl], [dir=rtl] .c4p--nav-list__icon {
|
42046
|
+
right: 0.25rem;
|
42047
|
+
transform: translate3d(-50%, 0, 0) rotate(180deg);
|
42048
|
+
}
|
42049
|
+
|
42050
|
+
.c4p--nav-list--nested {
|
42051
|
+
overflow: hidden;
|
42052
|
+
max-height: 0;
|
42053
|
+
padding-left: 0;
|
42054
|
+
margin-bottom: 0;
|
42055
|
+
opacity: 0;
|
42056
|
+
transition-duration: 240ms;
|
42057
|
+
}
|
42058
|
+
.c4p--nav-list--nested[dir=rtl], [dir=rtl] .c4p--nav-list--nested {
|
42059
|
+
padding-right: 0;
|
42060
|
+
padding-left: initial;
|
42061
|
+
}
|
42062
|
+
.c4p--nav-list--nested > .c4p--nav-item:last-of-type {
|
42063
|
+
margin-bottom: 0.5rem;
|
42064
|
+
}
|
42065
|
+
|
42066
|
+
.c4p--nav-item {
|
42067
|
+
font-size: var(--cds-body-short-01-font-size, 0.875rem);
|
42068
|
+
font-weight: var(--cds-body-short-01-font-weight, 400);
|
42069
|
+
line-height: var(--cds-body-short-01-line-height, 1.28572);
|
42070
|
+
letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
|
42071
|
+
position: relative;
|
42072
|
+
margin-bottom: 0.125rem;
|
42073
|
+
}
|
42074
|
+
|
42075
|
+
.c4p--nav-item__content {
|
42076
|
+
display: flex;
|
42077
|
+
}
|
42078
|
+
|
42079
|
+
.c4p--nav-item::before {
|
42080
|
+
position: absolute;
|
42081
|
+
top: 0;
|
42082
|
+
left: 0;
|
42083
|
+
display: inline-block;
|
42084
|
+
/* stylelint-disable-next-line -- to-rem carbon replacement for rem */
|
42085
|
+
width: 0.25rem;
|
42086
|
+
height: 100%;
|
42087
|
+
background-color: transparent;
|
42088
|
+
content: "";
|
42089
|
+
transform: translate3d(-100%, 0, 0);
|
42090
|
+
transition-property: transform;
|
42091
|
+
}
|
42092
|
+
|
42093
|
+
.c4p--nav-item--disabled {
|
42094
|
+
pointer-events: none;
|
42095
|
+
}
|
42096
|
+
.c4p--nav-item--disabled > c4p--nav-item__link {
|
42097
|
+
color: var(--cds-text-on-color-disabled, #8d8d8d);
|
42098
|
+
}
|
42099
|
+
|
42100
|
+
.c4p--nav-item--active {
|
42101
|
+
font-weight: 600;
|
42102
|
+
}
|
42103
|
+
.c4p--nav-item--active[dir=rtl]::before, [dir=rtl] .c4p--nav-item--active::before {
|
42104
|
+
transform: translate3d(0, 0, 0);
|
42105
|
+
}
|
42106
|
+
|
42107
|
+
.c4p--nav-item--active::before {
|
42108
|
+
z-index: 100;
|
42109
|
+
background-color: var(--cds-background-brand, #0f62fe);
|
42110
|
+
transform: translate3d(0, 0, 0);
|
42111
|
+
}
|
42112
|
+
|
42113
|
+
.c4p--nav-item--expanded {
|
42114
|
+
margin-bottom: 0.5rem;
|
42115
|
+
}
|
42116
|
+
.c4p--nav-item--expanded > .c4p--nav-list--nested {
|
42117
|
+
/* stylelint-disable-next-line -- to-rem carbon replacement for rem */
|
42118
|
+
max-height: 20rem;
|
42119
|
+
opacity: 1;
|
42120
|
+
transition-timing-function: cubic-bezier(0.25, 0, 1, 1);
|
42121
|
+
}
|
42122
|
+
.c4p--nav-item--expanded > .c4p--nav-item__link > .c4p--nav-list__icon {
|
42123
|
+
transform: translate3d(-50%, 0, 0) rotate(180deg);
|
42124
|
+
}
|
42125
|
+
.c4p--nav-item--expanded > .c4p--nav-item__link > .c4p--nav-list__icon[dir=rtl], [dir=rtl] .c4p--nav-item--expanded > .c4p--nav-item__link > .c4p--nav-list__icon {
|
42126
|
+
transform: translate3d(-50%, 0, 0) rotate(0);
|
42127
|
+
}
|
42128
|
+
|
42129
|
+
.c4p--nav-item__link {
|
42130
|
+
position: relative;
|
42131
|
+
display: flex;
|
42132
|
+
padding: 0.5rem 0.25rem 0.5rem 2.5rem;
|
42133
|
+
color: var(--cds-text-primary, #161616);
|
42134
|
+
cursor: pointer;
|
42135
|
+
text-decoration: none;
|
42136
|
+
transition-property: background-color;
|
42137
|
+
}
|
42138
|
+
|
42139
|
+
.c4p--nav-item__link:hover,
|
42140
|
+
.c4p--nav-item__link:focus {
|
42141
|
+
background-color: var(--cds-layer-02, #ffffff);
|
42142
|
+
}
|
42143
|
+
|
42144
|
+
.c4p--nav-item__link:focus {
|
42145
|
+
outline: 2px solid var(--cds-focus, #0f62fe);
|
42146
|
+
outline-offset: -2px;
|
42147
|
+
}
|
42148
|
+
@media screen and (prefers-contrast) {
|
42149
|
+
.c4p--nav-item__link:focus {
|
42150
|
+
outline-style: dotted;
|
42151
|
+
}
|
42152
|
+
}
|
42153
|
+
|
42154
|
+
.c4p--nav-item__img {
|
42155
|
+
/* stylelint-disable-next-line -- to-rem carbon replacement for rem */
|
42156
|
+
height: 1.25rem;
|
42157
|
+
margin-right: 0.75rem;
|
42158
|
+
margin-left: -2rem;
|
42159
|
+
}
|
42160
|
+
|
42161
|
+
.c4p--nav-item__link--external__icon {
|
42162
|
+
flex-shrink: 0;
|
42163
|
+
align-self: center;
|
42164
|
+
margin-left: 0.25rem;
|
42165
|
+
fill: var(--cds-text-primary, #161616);
|
42166
|
+
opacity: 0;
|
42167
|
+
}
|
42168
|
+
|
42169
|
+
.c4p--nav-item__link--external:hover > .c4p--nav-item__link--external__icon,
|
42170
|
+
.c4p--nav-item__link--external:focus > .c4p--nav-item__link--external__icon {
|
42171
|
+
opacity: 1;
|
42172
|
+
}
|
42173
|
+
|
41934
42174
|
.c4p--string-formatter {
|
41935
42175
|
display: inline-block;
|
41936
42176
|
text-align: left;
|