@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
package/css/index.css
CHANGED
@@ -4011,6 +4011,10 @@ fieldset[disabled] .cds--form__helper-text {
|
|
4011
4011
|
}
|
4012
4012
|
}
|
4013
4013
|
|
4014
|
+
.cds--tabs--contained ~ .cds--tab-content {
|
4015
|
+
background: var(--cds-layer);
|
4016
|
+
}
|
4017
|
+
|
4014
4018
|
.cds--tab-content--interactive:focus {
|
4015
4019
|
outline: none;
|
4016
4020
|
}
|
@@ -4595,6 +4599,7 @@ a.cds--overflow-menu-options__btn::before {
|
|
4595
4599
|
outline: 2px solid transparent;
|
4596
4600
|
outline-offset: -2px;
|
4597
4601
|
background-color: var(--cds-layer);
|
4602
|
+
color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
|
4598
4603
|
}
|
4599
4604
|
|
4600
4605
|
.cds--overflow-menu-options__option--disabled .cds--overflow-menu-options__btn svg {
|
@@ -6213,60 +6218,60 @@ a.cds--overflow-menu-options__btn::before {
|
|
6213
6218
|
animation-delay: 480ms;
|
6214
6219
|
}
|
6215
6220
|
|
6216
|
-
.
|
6221
|
+
.c4p--combo-button {
|
6217
6222
|
position: relative;
|
6218
6223
|
display: inline-flex;
|
6219
6224
|
}
|
6220
6225
|
|
6221
|
-
.
|
6226
|
+
.c4p--combo-button__action {
|
6222
6227
|
display: block;
|
6223
6228
|
overflow-x: hidden;
|
6224
6229
|
text-overflow: ellipsis;
|
6225
6230
|
white-space: nowrap;
|
6226
6231
|
}
|
6227
6232
|
|
6228
|
-
.
|
6233
|
+
.c4p--combo-button .c4p--combo-button__overflow-menu {
|
6229
6234
|
width: 3rem;
|
6230
|
-
height:
|
6235
|
+
height: 3rem;
|
6231
6236
|
border-left: 0.125rem solid var(--cds-border-subtle-01, #c6c6c6);
|
6232
6237
|
background-color: var(--cds-background-brand, #0f62fe);
|
6233
6238
|
}
|
6234
6239
|
|
6235
|
-
.
|
6236
|
-
.
|
6237
|
-
.
|
6238
|
-
.
|
6240
|
+
.c4p--combo-button .c4p--combo-button__overflow-menu.cds--overflow-menu:hover,
|
6241
|
+
.c4p--combo-button .c4p--combo-button__overflow-menu.cds--overflow-menu--open,
|
6242
|
+
.c4p--combo-button .cds--overflow-menu.cds--overflow-menu--open:hover,
|
6243
|
+
.c4p--combo-button .cds--overflow-menu.cds--overflow-menu--open {
|
6239
6244
|
background-color: var(--cds-button-primary-hover, #0050e6);
|
6240
6245
|
}
|
6241
6246
|
|
6242
|
-
.
|
6247
|
+
.c4p--combo-button .cds--overflow-menu--flip.cds--overflow-menu-options[data-floating-menu-direction=bottom]::after {
|
6243
6248
|
width: 0;
|
6244
6249
|
height: 0;
|
6245
6250
|
}
|
6246
6251
|
|
6247
|
-
.
|
6252
|
+
.c4p--combo-button__overflow-menu.cds--overflow-menu:active {
|
6248
6253
|
background-color: var(--cds-button-primary-active, #002d9c);
|
6249
6254
|
}
|
6250
6255
|
|
6251
|
-
.
|
6256
|
+
.c4p--combo-button__overflow-menu__icon {
|
6252
6257
|
fill: var(--cds-icon-on-color, #ffffff);
|
6253
6258
|
pointer-events: none;
|
6254
6259
|
}
|
6255
6260
|
|
6256
|
-
.
|
6261
|
+
.c4p--combo-button__overflow-menu__list.cds--overflow-menu-options {
|
6257
6262
|
left: 0;
|
6258
6263
|
width: 100%;
|
6259
6264
|
}
|
6260
6265
|
|
6261
|
-
.
|
6266
|
+
.c4p--combo-button__overflow-menu__list:after {
|
6262
6267
|
display: none;
|
6263
6268
|
}
|
6264
6269
|
|
6265
|
-
.
|
6270
|
+
.c4p--combo-button__overflow-menu__item.cds--overflow-menu-options__btn {
|
6266
6271
|
max-width: 100%;
|
6267
6272
|
}
|
6268
6273
|
|
6269
|
-
.
|
6274
|
+
.c4p--combo-button__overflow-menu__item__icon {
|
6270
6275
|
margin-left: auto;
|
6271
6276
|
}
|
6272
6277
|
|
@@ -7643,19 +7648,19 @@ a.cds--overflow-menu-options__btn::before {
|
|
7643
7648
|
.c4p--tearsheet.c4p--tearsheet.c4p--tearsheet .c4p--tearsheet__container {
|
7644
7649
|
transition: transform 240ms cubic-bezier(0, 0, 0.3, 1), max-height 240ms cubic-bezier(0, 0, 0.3, 1);
|
7645
7650
|
}
|
7646
|
-
.c4p--tearsheet.c4p--tearsheet--stacked-1-of-2 .c4p--tearsheet__container, .c4p--tearsheet.c4p--tearsheet--stacked-2-of-3 .c4p--tearsheet__container {
|
7651
|
+
.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) {
|
7647
7652
|
max-height: calc(100% - 3rem + 1rem);
|
7648
7653
|
}
|
7649
|
-
.c4p--tearsheet.c4p--tearsheet--stacked-1-of-3 .c4p--tearsheet__container {
|
7654
|
+
.c4p--tearsheet.c4p--tearsheet--stacked-1-of-3 .c4p--tearsheet__container:not(.c4p--tearsheet__container--mixed-size-stacking) {
|
7650
7655
|
max-height: calc(100% - 3rem + 2 * 1rem);
|
7651
7656
|
}
|
7652
7657
|
.c4p--tearsheet .c4p--tearsheet__container--lower {
|
7653
7658
|
max-height: calc(100% - (3rem + 2.5rem));
|
7654
7659
|
}
|
7655
|
-
.c4p--tearsheet.c4p--tearsheet--stacked-1-of-2 .c4p--tearsheet__container--lower, .c4p--tearsheet.c4p--tearsheet--stacked-2-of-3 .c4p--tearsheet__container--lower {
|
7660
|
+
.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) {
|
7656
7661
|
max-height: calc(100% - (3rem + 2.5rem) + 1rem);
|
7657
7662
|
}
|
7658
|
-
.c4p--tearsheet.c4p--tearsheet--stacked-1-of-3 .c4p--tearsheet__container--lower {
|
7663
|
+
.c4p--tearsheet.c4p--tearsheet--stacked-1-of-3 .c4p--tearsheet__container--lower:not(.c4p--tearsheet__container--mixed-size-stacking) {
|
7659
7664
|
max-height: calc(100% - (3rem + 2.5rem) + 2 * 1rem);
|
7660
7665
|
}
|
7661
7666
|
.c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__container {
|
@@ -8240,6 +8245,8 @@ a.cds--overflow-menu-options__btn::before {
|
|
8240
8245
|
inline-size: 1px;
|
8241
8246
|
visibility: inherit;
|
8242
8247
|
white-space: nowrap;
|
8248
|
+
margin-block-start: 0.9rem;
|
8249
|
+
margin-inline-start: 0.63rem;
|
8243
8250
|
visibility: inherit;
|
8244
8251
|
}
|
8245
8252
|
|
@@ -16326,7 +16333,6 @@ button.c4p--add-select__global-filter-toggle--open {
|
|
16326
16333
|
position: sticky;
|
16327
16334
|
z-index: 1;
|
16328
16335
|
left: 0;
|
16329
|
-
background-color: var(--cds-layer-01, #f4f4f4);
|
16330
16336
|
}
|
16331
16337
|
.c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-center .c4p--datagrid__cell {
|
16332
16338
|
align-items: center;
|
@@ -16348,7 +16354,6 @@ button.c4p--add-select__global-filter-toggle--open {
|
|
16348
16354
|
.c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-center th.cds--table-column-checkbox.c4p--datagrid__checkbox-cell-sticky-left {
|
16349
16355
|
position: sticky;
|
16350
16356
|
left: 0;
|
16351
|
-
background-color: var(--cds-layer-01, #f4f4f4);
|
16352
16357
|
}
|
16353
16358
|
.c4p--datagrid__grid-container table.c4p--datagrid__vertical-align-center .c4p--datagrid__checkbox-cell th.cds--table-column-checkbox {
|
16354
16359
|
display: flex;
|
@@ -16528,6 +16533,18 @@ button.c4p--add-select__global-filter-toggle--open {
|
|
16528
16533
|
/* stylelint-disable-next-line declaration-no-important */
|
16529
16534
|
color: var(--cds-link-primary-hover, #0043ce) !important;
|
16530
16535
|
}
|
16536
|
+
.c4p--datagrid__grid-container .c4p--datagrid__carbon-row td {
|
16537
|
+
/* stylelint-disable-next-line declaration-no-important */
|
16538
|
+
background-color: var(--cds-layer-01, #f4f4f4);
|
16539
|
+
}
|
16540
|
+
.c4p--datagrid__grid-container .c4p--datagrid__carbon-row:hover td {
|
16541
|
+
/* stylelint-disable-next-line declaration-no-important */
|
16542
|
+
background-color: var(--cds-layer-hover-01, #e8e8e8);
|
16543
|
+
}
|
16544
|
+
.c4p--datagrid__grid-container .cds--data-table--selected td {
|
16545
|
+
/* stylelint-disable-next-line declaration-no-important */
|
16546
|
+
background-color: var(--cds-layer-selected-01, #e0e0e0);
|
16547
|
+
}
|
16531
16548
|
.c4p--datagrid__grid-container .cds--select-input {
|
16532
16549
|
-webkit-appearance: none;
|
16533
16550
|
}
|
@@ -16607,9 +16624,6 @@ button.c4p--add-select__global-filter-toggle--open {
|
|
16607
16624
|
background-color: var(--cds-background-selected-hover, rgba(141, 141, 141, 0.32));
|
16608
16625
|
}
|
16609
16626
|
|
16610
|
-
.c4p--datagrid__resizableColumn:hover {
|
16611
|
-
background-color: var(--cds-layer-selected-hover);
|
16612
|
-
}
|
16613
16627
|
.c4p--datagrid__resizableColumn:hover .c4p--datagrid__resizer {
|
16614
16628
|
border-right: 0.125rem solid var(--cds-border-strong-01, #8d8d8d);
|
16615
16629
|
background-color: var(--cds-background-selected-hover, rgba(141, 141, 141, 0.32));
|
@@ -17194,7 +17208,6 @@ button.c4p--add-select__global-filter-toggle--open {
|
|
17194
17208
|
display: flex;
|
17195
17209
|
align-items: center;
|
17196
17210
|
border-left: 1px solid var(--cds-layer-active-02, #c6c6c6);
|
17197
|
-
background-color: var(--cds-layer-01, #f4f4f4);
|
17198
17211
|
}
|
17199
17212
|
|
17200
17213
|
.c4p--datagrid__right-sticky-column-header {
|
@@ -17210,7 +17223,6 @@ button.c4p--add-select__global-filter-toggle--open {
|
|
17210
17223
|
display: flex;
|
17211
17224
|
align-items: center;
|
17212
17225
|
border-right: 1px solid var(--cds-layer-active-02, #c6c6c6);
|
17213
|
-
background-color: var(--cds-layer-01, #f4f4f4);
|
17214
17226
|
}
|
17215
17227
|
|
17216
17228
|
.c4p--datagrid__left-sticky-column-header {
|
@@ -17218,6 +17230,11 @@ button.c4p--add-select__global-filter-toggle--open {
|
|
17218
17230
|
position: sticky !important;
|
17219
17231
|
z-index: 1;
|
17220
17232
|
left: 0;
|
17233
|
+
border-right: 1px solid var(--cds-layer-active-02, #c6c6c6);
|
17234
|
+
}
|
17235
|
+
|
17236
|
+
.c4p--datagrid__right-sticky-column-header {
|
17237
|
+
border-left: 1px solid var(--cds-layer-active-02, #c6c6c6);
|
17221
17238
|
}
|
17222
17239
|
|
17223
17240
|
.c4p--datagrid__left-sticky-column-cell.c4p--datagrid__left-sticky-column-cell--with-extra-select-column,
|
@@ -26321,6 +26338,10 @@ button.cds--dropdown-text:focus {
|
|
26321
26338
|
border-block-end-color: var(--cds-border-subtle);
|
26322
26339
|
}
|
26323
26340
|
|
26341
|
+
.cds--dropdown--inline.cds--dropdown--readonly {
|
26342
|
+
border-block-end-color: transparent;
|
26343
|
+
}
|
26344
|
+
|
26324
26345
|
.cds--dropdown--readonly .cds--list-box__field,
|
26325
26346
|
.cds--dropdown--readonly .cds--list-box__menu-icon {
|
26326
26347
|
cursor: default;
|
@@ -37299,6 +37320,225 @@ a.cds--side-nav__link--current::before {
|
|
37299
37320
|
position: absolute;
|
37300
37321
|
}
|
37301
37322
|
|
37323
|
+
.c4p--nav {
|
37324
|
+
position: relative;
|
37325
|
+
}
|
37326
|
+
|
37327
|
+
.c4p--nav:not(:first-of-type) {
|
37328
|
+
padding-top: 1rem;
|
37329
|
+
}
|
37330
|
+
|
37331
|
+
.c4p--nav:not(:last-of-type) {
|
37332
|
+
padding-bottom: 1rem;
|
37333
|
+
}
|
37334
|
+
|
37335
|
+
.c4p--nav:last-of-type {
|
37336
|
+
padding-bottom: 2rem;
|
37337
|
+
}
|
37338
|
+
|
37339
|
+
.c4p--nav + .c4p--nav > .__heading {
|
37340
|
+
padding-top: 0.25rem;
|
37341
|
+
}
|
37342
|
+
|
37343
|
+
.c4p--nav::before {
|
37344
|
+
position: absolute;
|
37345
|
+
right: 2rem;
|
37346
|
+
bottom: 0;
|
37347
|
+
left: 2rem;
|
37348
|
+
display: inline-block;
|
37349
|
+
width: auto;
|
37350
|
+
/* stylelint-disable-next-line -- to-rem carbon replacement for rem */
|
37351
|
+
border-bottom: 0.0625rem solid var(--cds-layer-02, #ffffff);
|
37352
|
+
content: "";
|
37353
|
+
}
|
37354
|
+
|
37355
|
+
.c4p--nav:last-of-type::before {
|
37356
|
+
border-width: 0;
|
37357
|
+
}
|
37358
|
+
|
37359
|
+
.c4p--nav__wrapper {
|
37360
|
+
padding-left: initial;
|
37361
|
+
margin-top: initial;
|
37362
|
+
margin-bottom: initial;
|
37363
|
+
list-style: none;
|
37364
|
+
}
|
37365
|
+
.c4p--nav__wrapper[dir=rtl], [dir=rtl] .c4p--nav__wrapper {
|
37366
|
+
padding-right: initial;
|
37367
|
+
}
|
37368
|
+
|
37369
|
+
.c4p--nav__heading {
|
37370
|
+
font-size: var(--cds-caption-01-font-size, 0.75rem);
|
37371
|
+
font-weight: var(--cds-caption-01-font-weight, 400);
|
37372
|
+
line-height: var(--cds-caption-01-line-height, 1.33333);
|
37373
|
+
letter-spacing: var(--cds-caption-01-letter-spacing, 0.32px);
|
37374
|
+
padding: 0.75rem 2.5rem;
|
37375
|
+
margin-top: initial;
|
37376
|
+
margin-bottom: initial;
|
37377
|
+
color: var(--cds-text-secondary, #525252);
|
37378
|
+
}
|
37379
|
+
|
37380
|
+
.c4p--nav-list {
|
37381
|
+
font-size: var(--cds-body-short-01-font-size, 0.875rem);
|
37382
|
+
font-weight: var(--cds-body-short-01-font-weight, 400);
|
37383
|
+
line-height: var(--cds-body-short-01-line-height, 1.28572);
|
37384
|
+
letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
|
37385
|
+
display: flex;
|
37386
|
+
flex-direction: column;
|
37387
|
+
margin-bottom: 0.125rem;
|
37388
|
+
list-style: none;
|
37389
|
+
}
|
37390
|
+
|
37391
|
+
.c4p--nav-list:focus {
|
37392
|
+
outline: 0;
|
37393
|
+
outline-width: 0;
|
37394
|
+
}
|
37395
|
+
.c4p--nav-list:focus > .c4p--nav-item__link {
|
37396
|
+
outline: 2px solid var(--cds-focus, #0f62fe);
|
37397
|
+
outline-offset: -2px;
|
37398
|
+
}
|
37399
|
+
@media screen and (prefers-contrast) {
|
37400
|
+
.c4p--nav-list:focus > .c4p--nav-item__link {
|
37401
|
+
outline-style: dotted;
|
37402
|
+
}
|
37403
|
+
}
|
37404
|
+
|
37405
|
+
.c4p--nav-list__icon {
|
37406
|
+
margin-top: 0.125rem;
|
37407
|
+
margin-left: auto;
|
37408
|
+
transform: translate3d(-50%, 0, 0) rotate(0deg);
|
37409
|
+
transition-duration: 240ms;
|
37410
|
+
transition-property: transform;
|
37411
|
+
transition-timing-function: cubic-bezier(0.5, 0, 0.1, 1);
|
37412
|
+
}
|
37413
|
+
.c4p--nav-list__icon[dir=rtl], [dir=rtl] .c4p--nav-list__icon {
|
37414
|
+
right: 0.25rem;
|
37415
|
+
transform: translate3d(-50%, 0, 0) rotate(180deg);
|
37416
|
+
}
|
37417
|
+
|
37418
|
+
.c4p--nav-list--nested {
|
37419
|
+
overflow: hidden;
|
37420
|
+
max-height: 0;
|
37421
|
+
padding-left: 0;
|
37422
|
+
margin-bottom: 0;
|
37423
|
+
opacity: 0;
|
37424
|
+
transition-duration: 240ms;
|
37425
|
+
}
|
37426
|
+
.c4p--nav-list--nested[dir=rtl], [dir=rtl] .c4p--nav-list--nested {
|
37427
|
+
padding-right: 0;
|
37428
|
+
padding-left: initial;
|
37429
|
+
}
|
37430
|
+
.c4p--nav-list--nested > .c4p--nav-item:last-of-type {
|
37431
|
+
margin-bottom: 0.5rem;
|
37432
|
+
}
|
37433
|
+
|
37434
|
+
.c4p--nav-item {
|
37435
|
+
font-size: var(--cds-body-short-01-font-size, 0.875rem);
|
37436
|
+
font-weight: var(--cds-body-short-01-font-weight, 400);
|
37437
|
+
line-height: var(--cds-body-short-01-line-height, 1.28572);
|
37438
|
+
letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
|
37439
|
+
position: relative;
|
37440
|
+
margin-bottom: 0.125rem;
|
37441
|
+
}
|
37442
|
+
|
37443
|
+
.c4p--nav-item__content {
|
37444
|
+
display: flex;
|
37445
|
+
}
|
37446
|
+
|
37447
|
+
.c4p--nav-item::before {
|
37448
|
+
position: absolute;
|
37449
|
+
top: 0;
|
37450
|
+
left: 0;
|
37451
|
+
display: inline-block;
|
37452
|
+
/* stylelint-disable-next-line -- to-rem carbon replacement for rem */
|
37453
|
+
width: 0.25rem;
|
37454
|
+
height: 100%;
|
37455
|
+
background-color: transparent;
|
37456
|
+
content: "";
|
37457
|
+
transform: translate3d(-100%, 0, 0);
|
37458
|
+
transition-property: transform;
|
37459
|
+
}
|
37460
|
+
|
37461
|
+
.c4p--nav-item--disabled {
|
37462
|
+
pointer-events: none;
|
37463
|
+
}
|
37464
|
+
.c4p--nav-item--disabled > c4p--nav-item__link {
|
37465
|
+
color: var(--cds-text-on-color-disabled, #8d8d8d);
|
37466
|
+
}
|
37467
|
+
|
37468
|
+
.c4p--nav-item--active {
|
37469
|
+
font-weight: 600;
|
37470
|
+
}
|
37471
|
+
.c4p--nav-item--active[dir=rtl]::before, [dir=rtl] .c4p--nav-item--active::before {
|
37472
|
+
transform: translate3d(0, 0, 0);
|
37473
|
+
}
|
37474
|
+
|
37475
|
+
.c4p--nav-item--active::before {
|
37476
|
+
z-index: 100;
|
37477
|
+
background-color: var(--cds-background-brand, #0f62fe);
|
37478
|
+
transform: translate3d(0, 0, 0);
|
37479
|
+
}
|
37480
|
+
|
37481
|
+
.c4p--nav-item--expanded {
|
37482
|
+
margin-bottom: 0.5rem;
|
37483
|
+
}
|
37484
|
+
.c4p--nav-item--expanded > .c4p--nav-list--nested {
|
37485
|
+
/* stylelint-disable-next-line -- to-rem carbon replacement for rem */
|
37486
|
+
max-height: 20rem;
|
37487
|
+
opacity: 1;
|
37488
|
+
transition-timing-function: cubic-bezier(0.25, 0, 1, 1);
|
37489
|
+
}
|
37490
|
+
.c4p--nav-item--expanded > .c4p--nav-item__link > .c4p--nav-list__icon {
|
37491
|
+
transform: translate3d(-50%, 0, 0) rotate(180deg);
|
37492
|
+
}
|
37493
|
+
.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 {
|
37494
|
+
transform: translate3d(-50%, 0, 0) rotate(0);
|
37495
|
+
}
|
37496
|
+
|
37497
|
+
.c4p--nav-item__link {
|
37498
|
+
position: relative;
|
37499
|
+
display: flex;
|
37500
|
+
padding: 0.5rem 0.25rem 0.5rem 2.5rem;
|
37501
|
+
color: var(--cds-text-primary, #161616);
|
37502
|
+
cursor: pointer;
|
37503
|
+
text-decoration: none;
|
37504
|
+
transition-property: background-color;
|
37505
|
+
}
|
37506
|
+
|
37507
|
+
.c4p--nav-item__link:hover,
|
37508
|
+
.c4p--nav-item__link:focus {
|
37509
|
+
background-color: var(--cds-layer-02, #ffffff);
|
37510
|
+
}
|
37511
|
+
|
37512
|
+
.c4p--nav-item__link:focus {
|
37513
|
+
outline: 2px solid var(--cds-focus, #0f62fe);
|
37514
|
+
outline-offset: -2px;
|
37515
|
+
}
|
37516
|
+
@media screen and (prefers-contrast) {
|
37517
|
+
.c4p--nav-item__link:focus {
|
37518
|
+
outline-style: dotted;
|
37519
|
+
}
|
37520
|
+
}
|
37521
|
+
|
37522
|
+
.c4p--nav-item__img {
|
37523
|
+
/* stylelint-disable-next-line -- to-rem carbon replacement for rem */
|
37524
|
+
height: 1.25rem;
|
37525
|
+
margin-right: 0.75rem;
|
37526
|
+
margin-left: -2rem;
|
37527
|
+
}
|
37528
|
+
|
37529
|
+
.c4p--nav-item__link--external__icon {
|
37530
|
+
flex-shrink: 0;
|
37531
|
+
align-self: center;
|
37532
|
+
margin-left: 0.25rem;
|
37533
|
+
fill: var(--cds-text-primary, #161616);
|
37534
|
+
opacity: 0;
|
37535
|
+
}
|
37536
|
+
|
37537
|
+
.c4p--nav-item__link--external:hover > .c4p--nav-item__link--external__icon,
|
37538
|
+
.c4p--nav-item__link--external:focus > .c4p--nav-item__link--external__icon {
|
37539
|
+
opacity: 1;
|
37540
|
+
}
|
37541
|
+
|
37302
37542
|
.c4p--string-formatter {
|
37303
37543
|
display: inline-block;
|
37304
37544
|
text-align: left;
|