@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
@@ -0,0 +1,18 @@
|
|
1
|
+
/**
|
2
|
+
* Copyright IBM Corp. 2020, 2024
|
3
|
+
*
|
4
|
+
* This source code is licensed under the Apache-2.0 license found in the
|
5
|
+
* LICENSE file in the root directory of this source tree.
|
6
|
+
*/
|
7
|
+
|
8
|
+
'use strict';
|
9
|
+
|
10
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
11
|
+
|
12
|
+
var index = require('../../../prop-types/index.js');
|
13
|
+
|
14
|
+
var iconPropTypes = {
|
15
|
+
size: index["default"].oneOfType([index["default"].number, index["default"].string])
|
16
|
+
};
|
17
|
+
|
18
|
+
exports.i = iconPropTypes;
|
package/lib/settings.d.ts
CHANGED
package/package.json
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
{
|
2
2
|
"name": "@carbon/ibm-products",
|
3
3
|
"description": "Carbon for IBM Products",
|
4
|
-
"version": "2.
|
4
|
+
"version": "2.31.0-alpha.5+ce1358ad0",
|
5
5
|
"license": "Apache-2.0",
|
6
6
|
"main": "lib/index.js",
|
7
7
|
"module": "es/index.js",
|
@@ -90,9 +90,10 @@
|
|
90
90
|
},
|
91
91
|
"dependencies": {
|
92
92
|
"@babel/runtime": "^7.23.9",
|
93
|
-
"@carbon/ibm-products-styles": "^2.
|
93
|
+
"@carbon/ibm-products-styles": "^2.30.0-alpha.5+ce1358ad0",
|
94
94
|
"@carbon/telemetry": "^0.1.0",
|
95
95
|
"@dnd-kit/core": "^6.0.8",
|
96
|
+
"@dnd-kit/modifiers": "^7.0.0",
|
96
97
|
"@dnd-kit/sortable": "^8.0.0",
|
97
98
|
"@dnd-kit/utilities": "^3.2.2",
|
98
99
|
"@ibm/telemetry-js": "^1.2.0",
|
@@ -107,11 +108,11 @@
|
|
107
108
|
"@carbon/grid": "^11.21.1",
|
108
109
|
"@carbon/layout": "^11.20.1",
|
109
110
|
"@carbon/motion": "^11.16.1",
|
110
|
-
"@carbon/react": "^1.
|
111
|
+
"@carbon/react": "^1.52.0",
|
111
112
|
"@carbon/themes": "^11.32.0",
|
112
113
|
"@carbon/type": "^11.25.1",
|
113
114
|
"react": "^16.8.6 || ^17.0.1 || ^18.2.0",
|
114
115
|
"react-dom": "^16.8.6 || ^17.0.1 || ^18.2.0"
|
115
116
|
},
|
116
|
-
"gitHead": "
|
117
|
+
"gitHead": "ce1358ad0493a21f742e455f5b11c3540592c78f"
|
117
118
|
}
|
@@ -1,5 +1,5 @@
|
|
1
1
|
//
|
2
|
-
// Copyright IBM Corp. 2020,
|
2
|
+
// Copyright IBM Corp. 2020, 2024
|
3
3
|
//
|
4
4
|
// This source code is licensed under the Apache-2.0 license found in the
|
5
5
|
// LICENSE file in the root directory of this source tree.
|
@@ -10,67 +10,65 @@
|
|
10
10
|
@use '@carbon/styles/scss/components/button/tokens' as *;
|
11
11
|
@use '../../global/styles/project-settings' as c4p-settings;
|
12
12
|
|
13
|
-
|
14
|
-
|
15
|
-
.#{$security--prefix}--combo-button {
|
13
|
+
.#{c4p-settings.$pkg-prefix}--combo-button {
|
16
14
|
position: relative;
|
17
15
|
display: inline-flex;
|
18
16
|
}
|
19
17
|
|
20
|
-
.#{
|
18
|
+
.#{c4p-settings.$pkg-prefix}--combo-button__action {
|
21
19
|
display: block;
|
22
20
|
overflow-x: hidden;
|
23
21
|
text-overflow: ellipsis;
|
24
22
|
white-space: nowrap;
|
25
23
|
}
|
26
24
|
|
27
|
-
.#{
|
28
|
-
.#{
|
25
|
+
.#{c4p-settings.$pkg-prefix}--combo-button
|
26
|
+
.#{c4p-settings.$pkg-prefix}--combo-button__overflow-menu {
|
29
27
|
width: $spacing-09;
|
30
|
-
height:
|
28
|
+
height: $spacing-09;
|
31
29
|
border-left: $spacing-01 solid $border-subtle-01;
|
32
30
|
background-color: $background-brand;
|
33
31
|
}
|
34
32
|
|
35
|
-
.#{
|
36
|
-
.#{
|
37
|
-
.#{
|
38
|
-
.#{
|
39
|
-
.#{
|
33
|
+
.#{c4p-settings.$pkg-prefix}--combo-button
|
34
|
+
.#{c4p-settings.$pkg-prefix}--combo-button__overflow-menu.#{c4p-settings.$carbon-prefix}--overflow-menu:hover,
|
35
|
+
.#{c4p-settings.$pkg-prefix}--combo-button
|
36
|
+
.#{c4p-settings.$pkg-prefix}--combo-button__overflow-menu.#{c4p-settings.$carbon-prefix}--overflow-menu--open,
|
37
|
+
.#{c4p-settings.$pkg-prefix}--combo-button
|
40
38
|
.#{c4p-settings.$carbon-prefix}--overflow-menu.#{c4p-settings.$carbon-prefix}--overflow-menu--open:hover,
|
41
|
-
.#{
|
39
|
+
.#{c4p-settings.$pkg-prefix}--combo-button
|
42
40
|
.#{c4p-settings.$carbon-prefix}--overflow-menu.#{c4p-settings.$carbon-prefix}--overflow-menu--open {
|
43
41
|
background-color: $button-primary-hover;
|
44
42
|
}
|
45
43
|
|
46
|
-
.#{
|
44
|
+
.#{c4p-settings.$pkg-prefix}--combo-button
|
47
45
|
.cds--overflow-menu--flip.cds--overflow-menu-options[data-floating-menu-direction='bottom']::after {
|
48
46
|
width: 0;
|
49
47
|
height: 0;
|
50
48
|
}
|
51
49
|
|
52
|
-
.#{
|
50
|
+
.#{c4p-settings.$pkg-prefix}--combo-button__overflow-menu.#{c4p-settings.$carbon-prefix}--overflow-menu:active {
|
53
51
|
background-color: $button-primary-active;
|
54
52
|
}
|
55
53
|
|
56
|
-
.#{
|
54
|
+
.#{c4p-settings.$pkg-prefix}--combo-button__overflow-menu__icon {
|
57
55
|
fill: $icon-on-color;
|
58
56
|
pointer-events: none;
|
59
57
|
}
|
60
58
|
|
61
|
-
.#{
|
59
|
+
.#{c4p-settings.$pkg-prefix}--combo-button__overflow-menu__list.#{c4p-settings.$carbon-prefix}--overflow-menu-options {
|
62
60
|
left: 0;
|
63
61
|
width: 100%;
|
64
62
|
}
|
65
63
|
|
66
|
-
.#{
|
64
|
+
.#{c4p-settings.$pkg-prefix}--combo-button__overflow-menu__list:after {
|
67
65
|
display: none;
|
68
66
|
}
|
69
67
|
|
70
|
-
.#{
|
68
|
+
.#{c4p-settings.$pkg-prefix}--combo-button__overflow-menu__item.#{c4p-settings.$carbon-prefix}--overflow-menu-options__btn {
|
71
69
|
max-width: 100%;
|
72
70
|
}
|
73
71
|
|
74
|
-
.#{
|
72
|
+
.#{c4p-settings.$pkg-prefix}--combo-button__overflow-menu__item__icon {
|
75
73
|
margin-left: auto;
|
76
74
|
}
|
@@ -46,7 +46,6 @@
|
|
46
46
|
position: sticky;
|
47
47
|
z-index: 1;
|
48
48
|
left: 0;
|
49
|
-
background-color: $layer-01;
|
50
49
|
}
|
51
50
|
}
|
52
51
|
|
@@ -70,7 +69,6 @@
|
|
70
69
|
&.#{$block-class}__checkbox-cell-sticky-left {
|
71
70
|
position: sticky;
|
72
71
|
left: 0;
|
73
|
-
background-color: $layer-01;
|
74
72
|
}
|
75
73
|
}
|
76
74
|
|
@@ -339,6 +337,21 @@
|
|
339
337
|
}
|
340
338
|
}
|
341
339
|
|
340
|
+
.#{$block-class}__carbon-row td {
|
341
|
+
/* stylelint-disable-next-line declaration-no-important */
|
342
|
+
background-color: $layer-01;
|
343
|
+
}
|
344
|
+
|
345
|
+
.#{$block-class}__carbon-row:hover td {
|
346
|
+
/* stylelint-disable-next-line declaration-no-important */
|
347
|
+
background-color: $layer-hover-01;
|
348
|
+
}
|
349
|
+
|
350
|
+
.#{c4p-settings.$carbon-prefix}--data-table--selected td {
|
351
|
+
/* stylelint-disable-next-line declaration-no-important */
|
352
|
+
background-color: $layer-selected-01;
|
353
|
+
}
|
354
|
+
|
342
355
|
.#{c4p-settings.$carbon-prefix}--select-input {
|
343
356
|
-webkit-appearance: none; // could be fixed by post-css plugin
|
344
357
|
}
|
@@ -432,8 +445,6 @@
|
|
432
445
|
}
|
433
446
|
|
434
447
|
.#{$block-class}__resizableColumn:hover {
|
435
|
-
background-color: $layer-selected-hover;
|
436
|
-
|
437
448
|
.#{$block-class}__resizer {
|
438
449
|
border-right: $spacing-01 solid $border-strong-01;
|
439
450
|
background-color: $background-selected-hover;
|
@@ -17,7 +17,6 @@
|
|
17
17
|
display: flex;
|
18
18
|
align-items: center;
|
19
19
|
border-left: 1px solid $layer-active-02;
|
20
|
-
background-color: $layer-01;
|
21
20
|
}
|
22
21
|
|
23
22
|
.#{variables.$block-class}__right-sticky-column-header {
|
@@ -33,7 +32,6 @@
|
|
33
32
|
display: flex;
|
34
33
|
align-items: center;
|
35
34
|
border-right: 1px solid $layer-active-02;
|
36
|
-
background-color: $layer-01;
|
37
35
|
}
|
38
36
|
|
39
37
|
.#{variables.$block-class}__left-sticky-column-header {
|
@@ -41,6 +39,11 @@
|
|
41
39
|
position: sticky !important;
|
42
40
|
z-index: 1;
|
43
41
|
left: 0;
|
42
|
+
border-right: 1px solid $layer-active-02;
|
43
|
+
}
|
44
|
+
|
45
|
+
.#{variables.$block-class}__right-sticky-column-header {
|
46
|
+
border-left: 1px solid $layer-active-02;
|
44
47
|
}
|
45
48
|
|
46
49
|
.#{variables.$block-class}__left-sticky-column-cell.#{variables.$block-class}__left-sticky-column-cell--with-extra-select-column,
|
@@ -0,0 +1,9 @@
|
|
1
|
+
//
|
2
|
+
// Copyright IBM Corp. 2024, 2024
|
3
|
+
//
|
4
|
+
// This source code is licensed under the Apache-2.0 license found in the
|
5
|
+
// LICENSE file in the root directory of this source tree.
|
6
|
+
//
|
7
|
+
|
8
|
+
// Import any Carbon component styles used from Nav in this file.
|
9
|
+
// Nav uses the following Carbon components:
|
@@ -0,0 +1,259 @@
|
|
1
|
+
//
|
2
|
+
// Copyright IBM Corp. 2024, 2024
|
3
|
+
//
|
4
|
+
// This source code is licensed under the Apache-2.0 license found in the
|
5
|
+
// LICENSE file in the root directory of this source tree.
|
6
|
+
//
|
7
|
+
|
8
|
+
// Standard imports.
|
9
|
+
@use '@carbon/styles/scss/theme' as *;
|
10
|
+
@use '@carbon/layout/scss/convert' as *;
|
11
|
+
@use '@carbon/styles/scss/spacing' as *;
|
12
|
+
@use '@carbon/styles/scss/motion' as *;
|
13
|
+
@use '@carbon/styles/scss/type';
|
14
|
+
@use '@carbon/type/scss/font-family';
|
15
|
+
@use '../../global/styles/project-settings' as c4p-settings;
|
16
|
+
@use '../../global/styles/mixins';
|
17
|
+
@use '@carbon/styles/scss/utilities';
|
18
|
+
|
19
|
+
$block-class: #{c4p-settings.$pkg-prefix}--nav;
|
20
|
+
$nav-list-block-class: #{c4p-settings.$pkg-prefix}--nav-list;
|
21
|
+
$nav-item-block-class: #{c4p-settings.$pkg-prefix}--nav-item;
|
22
|
+
|
23
|
+
$nav__heading: '#{&}__heading';
|
24
|
+
$nav__wrapper: '#{&}__wrapper';
|
25
|
+
|
26
|
+
/// Icon position.
|
27
|
+
/// @type Length
|
28
|
+
$nav__icon__position: translate3d(-50%, 0, 0);
|
29
|
+
|
30
|
+
@mixin rtl {
|
31
|
+
$rtl: '[dir="rtl"]';
|
32
|
+
|
33
|
+
&#{$rtl},
|
34
|
+
#{$rtl} & {
|
35
|
+
@content;
|
36
|
+
}
|
37
|
+
}
|
38
|
+
|
39
|
+
.#{$block-class} {
|
40
|
+
position: relative;
|
41
|
+
}
|
42
|
+
|
43
|
+
.#{$block-class}:not(:first-of-type) {
|
44
|
+
padding-top: $spacing-05;
|
45
|
+
}
|
46
|
+
|
47
|
+
.#{$block-class}:not(:last-of-type) {
|
48
|
+
padding-bottom: $spacing-05;
|
49
|
+
}
|
50
|
+
|
51
|
+
.#{$block-class}:last-of-type {
|
52
|
+
padding-bottom: $spacing-07;
|
53
|
+
}
|
54
|
+
|
55
|
+
.#{$block-class} + .#{$block-class} > .#{$nav__heading} {
|
56
|
+
padding-top: $spacing-02;
|
57
|
+
}
|
58
|
+
|
59
|
+
.#{$block-class}::before {
|
60
|
+
position: absolute;
|
61
|
+
right: $spacing-07;
|
62
|
+
bottom: 0;
|
63
|
+
left: $spacing-07;
|
64
|
+
display: inline-block;
|
65
|
+
width: auto;
|
66
|
+
/* stylelint-disable-next-line -- to-rem carbon replacement for rem */
|
67
|
+
border-bottom: to-rem(1px) solid $layer-02;
|
68
|
+
content: '';
|
69
|
+
}
|
70
|
+
|
71
|
+
.#{$block-class}:last-of-type::before {
|
72
|
+
border-width: 0;
|
73
|
+
}
|
74
|
+
|
75
|
+
.#{$block-class}__wrapper {
|
76
|
+
padding-left: initial;
|
77
|
+
margin-top: initial;
|
78
|
+
margin-bottom: initial;
|
79
|
+
list-style: none;
|
80
|
+
|
81
|
+
@include rtl {
|
82
|
+
padding-right: initial;
|
83
|
+
}
|
84
|
+
}
|
85
|
+
|
86
|
+
.#{$block-class}__heading {
|
87
|
+
@include type.type-style('caption-01');
|
88
|
+
|
89
|
+
padding: $spacing-04 $spacing-08;
|
90
|
+
margin-top: initial;
|
91
|
+
margin-bottom: initial;
|
92
|
+
color: $text-secondary;
|
93
|
+
}
|
94
|
+
|
95
|
+
// Navigation lists.
|
96
|
+
.#{$nav-list-block-class} {
|
97
|
+
@include type.type-style('body-short-01');
|
98
|
+
|
99
|
+
display: flex;
|
100
|
+
flex-direction: column;
|
101
|
+
margin-bottom: $spacing-01;
|
102
|
+
list-style: none;
|
103
|
+
}
|
104
|
+
|
105
|
+
.#{$nav-list-block-class}:focus {
|
106
|
+
outline: 0;
|
107
|
+
outline-width: 0;
|
108
|
+
|
109
|
+
> .#{$nav-item-block-class}__link {
|
110
|
+
@include utilities.focus-outline('outline');
|
111
|
+
}
|
112
|
+
}
|
113
|
+
|
114
|
+
.#{$nav-list-block-class}__icon {
|
115
|
+
margin-top: $spacing-01;
|
116
|
+
margin-left: auto;
|
117
|
+
transform: $nav__icon__position rotate(0deg);
|
118
|
+
transition-duration: $duration-moderate-02;
|
119
|
+
transition-property: transform;
|
120
|
+
transition-timing-function: $standard-easing;
|
121
|
+
@include rtl {
|
122
|
+
right: $spacing-02;
|
123
|
+
transform: $nav__icon__position rotate(180deg);
|
124
|
+
}
|
125
|
+
}
|
126
|
+
|
127
|
+
.#{$nav-list-block-class}--nested {
|
128
|
+
overflow: hidden;
|
129
|
+
max-height: 0;
|
130
|
+
padding-left: 0;
|
131
|
+
margin-bottom: 0;
|
132
|
+
opacity: 0;
|
133
|
+
transition-duration: $duration-moderate-02;
|
134
|
+
$transition-property: (max-height, opacity);
|
135
|
+
@include rtl {
|
136
|
+
padding-right: 0;
|
137
|
+
padding-left: initial;
|
138
|
+
}
|
139
|
+
|
140
|
+
> .#{$nav-item-block-class}:last-of-type {
|
141
|
+
margin-bottom: $spacing-03;
|
142
|
+
}
|
143
|
+
}
|
144
|
+
|
145
|
+
// Navigation items.
|
146
|
+
.#{$nav-item-block-class} {
|
147
|
+
@include type.type-style('body-short-01');
|
148
|
+
|
149
|
+
position: relative;
|
150
|
+
margin-bottom: $spacing-01;
|
151
|
+
}
|
152
|
+
|
153
|
+
// Content including text and sometimes a product icon.
|
154
|
+
.#{$nav-item-block-class}__content {
|
155
|
+
display: flex;
|
156
|
+
}
|
157
|
+
|
158
|
+
.#{$nav-item-block-class}::before {
|
159
|
+
position: absolute;
|
160
|
+
top: 0;
|
161
|
+
left: 0;
|
162
|
+
display: inline-block;
|
163
|
+
/* stylelint-disable-next-line -- to-rem carbon replacement for rem */
|
164
|
+
width: to-rem(4px);
|
165
|
+
height: 100%;
|
166
|
+
background-color: transparent;
|
167
|
+
content: '';
|
168
|
+
transform: translate3d(-100%, 0, 0);
|
169
|
+
transition-property: transform;
|
170
|
+
}
|
171
|
+
|
172
|
+
.#{$nav-item-block-class}--disabled {
|
173
|
+
pointer-events: none;
|
174
|
+
|
175
|
+
> #{$nav-item-block-class}__link {
|
176
|
+
color: $text-on-color-disabled;
|
177
|
+
}
|
178
|
+
}
|
179
|
+
|
180
|
+
.#{$nav-item-block-class}--active {
|
181
|
+
@include font-family.font-weight('semibold');
|
182
|
+
|
183
|
+
@include rtl {
|
184
|
+
&::before {
|
185
|
+
transform: translate3d(0, 0, 0);
|
186
|
+
}
|
187
|
+
}
|
188
|
+
}
|
189
|
+
|
190
|
+
.#{$nav-item-block-class}--active::before {
|
191
|
+
z-index: 100;
|
192
|
+
background-color: $background-brand;
|
193
|
+
transform: translate3d(0, 0, 0);
|
194
|
+
}
|
195
|
+
|
196
|
+
// Expanded navigation list.
|
197
|
+
.#{$nav-item-block-class}--expanded {
|
198
|
+
margin-bottom: $spacing-03;
|
199
|
+
|
200
|
+
> .#{$nav-list-block-class}--nested {
|
201
|
+
/* stylelint-disable-next-line -- to-rem carbon replacement for rem */
|
202
|
+
max-height: to-rem(320px);
|
203
|
+
opacity: 1;
|
204
|
+
transition-timing-function: $ease-in;
|
205
|
+
}
|
206
|
+
|
207
|
+
> .#{$nav-item-block-class}__link > .#{$nav-list-block-class}__icon {
|
208
|
+
transform: $nav__icon__position rotate(180deg);
|
209
|
+
|
210
|
+
@include rtl {
|
211
|
+
transform: $nav__icon__position rotate(0);
|
212
|
+
}
|
213
|
+
}
|
214
|
+
}
|
215
|
+
|
216
|
+
// Navigation item link.
|
217
|
+
.#{$nav-item-block-class}__link {
|
218
|
+
position: relative;
|
219
|
+
display: flex;
|
220
|
+
padding: $spacing-03 $spacing-02 $spacing-03 $spacing-08;
|
221
|
+
color: $text-primary;
|
222
|
+
cursor: pointer;
|
223
|
+
text-decoration: none;
|
224
|
+
transition-property: background-color;
|
225
|
+
}
|
226
|
+
|
227
|
+
.#{$nav-item-block-class}__link:hover,
|
228
|
+
.#{$nav-item-block-class}__link:focus {
|
229
|
+
background-color: $layer-02;
|
230
|
+
}
|
231
|
+
|
232
|
+
.#{$nav-item-block-class}__link:focus {
|
233
|
+
@include utilities.focus-outline('outline');
|
234
|
+
}
|
235
|
+
|
236
|
+
.#{$nav-item-block-class}__img {
|
237
|
+
/* stylelint-disable-next-line -- to-rem carbon replacement for rem */
|
238
|
+
height: to-rem(20px);
|
239
|
+
margin-right: $spacing-04;
|
240
|
+
margin-left: -$spacing-07;
|
241
|
+
}
|
242
|
+
|
243
|
+
//nav-item__link--external__icon
|
244
|
+
|
245
|
+
// External link icon selector.
|
246
|
+
.#{$nav-item-block-class}__link--external__icon {
|
247
|
+
flex-shrink: 0;
|
248
|
+
align-self: center;
|
249
|
+
margin-left: $spacing-02;
|
250
|
+
fill: $text-primary;
|
251
|
+
opacity: 0;
|
252
|
+
}
|
253
|
+
|
254
|
+
.#{$nav-item-block-class}__link--external:hover,
|
255
|
+
.#{$nav-item-block-class}__link--external:focus {
|
256
|
+
> .#{$nav-item-block-class}__link--external__icon {
|
257
|
+
opacity: 1;
|
258
|
+
}
|
259
|
+
}
|
@@ -131,12 +131,21 @@ $motion-duration: $duration-moderate-02;
|
|
131
131
|
max-height $motion-duration motion(entrance, expressive);
|
132
132
|
}
|
133
133
|
|
134
|
-
&.#{$block-class}--stacked-1-of-2
|
135
|
-
|
134
|
+
&.#{$block-class}--stacked-1-of-2
|
135
|
+
.#{$block-class}__container:not(
|
136
|
+
.#{$block-class}__container--mixed-size-stacking
|
137
|
+
),
|
138
|
+
&.#{$block-class}--stacked-2-of-3
|
139
|
+
.#{$block-class}__container:not(
|
140
|
+
.#{$block-class}__container--mixed-size-stacking
|
141
|
+
) {
|
136
142
|
max-height: calc(100% - #{$spacing-09} + #{$spacing-05});
|
137
143
|
}
|
138
144
|
|
139
|
-
&.#{$block-class}--stacked-1-of-3
|
145
|
+
&.#{$block-class}--stacked-1-of-3
|
146
|
+
.#{$block-class}__container:not(
|
147
|
+
.#{$block-class}__container--mixed-size-stacking
|
148
|
+
) {
|
140
149
|
max-height: calc(100% - #{$spacing-09} + (2 * #{$spacing-05}));
|
141
150
|
}
|
142
151
|
|
@@ -144,12 +153,21 @@ $motion-duration: $duration-moderate-02;
|
|
144
153
|
max-height: calc(100% - (#{$spacing-09} + #{$spacing-08}));
|
145
154
|
}
|
146
155
|
|
147
|
-
&.#{$block-class}--stacked-1-of-2
|
148
|
-
|
156
|
+
&.#{$block-class}--stacked-1-of-2
|
157
|
+
.#{$block-class}__container--lower:not(
|
158
|
+
.#{$block-class}__container--mixed-size-stacking
|
159
|
+
),
|
160
|
+
&.#{$block-class}--stacked-2-of-3
|
161
|
+
.#{$block-class}__container--lower:not(
|
162
|
+
.#{$block-class}__container--mixed-size-stacking
|
163
|
+
) {
|
149
164
|
max-height: calc(100% - (#{$spacing-09} + #{$spacing-08}) + #{$spacing-05});
|
150
165
|
}
|
151
166
|
|
152
|
-
&.#{$block-class}--stacked-1-of-3
|
167
|
+
&.#{$block-class}--stacked-1-of-3
|
168
|
+
.#{$block-class}__container--lower:not(
|
169
|
+
.#{$block-class}__container--mixed-size-stacking
|
170
|
+
) {
|
153
171
|
max-height: calc(
|
154
172
|
100% - (#{$spacing-09} + #{$spacing-08}) + (2 * #{$spacing-05})
|
155
173
|
);
|
@@ -64,6 +64,7 @@
|
|
64
64
|
@use './DescriptionList/index-with-carbon' as *;
|
65
65
|
@use './FullPageError/index-with-carbon' as *;
|
66
66
|
@use './SearchBar/index-with-carbon' as *;
|
67
|
+
@use './Nav/index-with-carbon' as *;
|
67
68
|
@use './StringFormatter/index-with-carbon' as *;
|
68
69
|
@use './UserAvatar/index-with-carbon' as *;
|
69
70
|
@use './StatusIndicator/index-with-carbon' as *;
|