@carbon/styles 1.84.0-rc.0 → 1.84.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/css/styles.css +55 -0
- package/css/styles.min.css +1 -1
- package/package.json +8 -8
- package/scss/components/treeview/_treeview.scss +56 -1
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@carbon/styles",
|
|
3
3
|
"description": "Styles for the Carbon Design System",
|
|
4
|
-
"version": "1.84.0
|
|
4
|
+
"version": "1.84.0",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"repository": {
|
|
7
7
|
"type": "git",
|
|
@@ -40,13 +40,13 @@
|
|
|
40
40
|
}
|
|
41
41
|
},
|
|
42
42
|
"dependencies": {
|
|
43
|
-
"@carbon/colors": "^11.35.0
|
|
43
|
+
"@carbon/colors": "^11.35.0",
|
|
44
44
|
"@carbon/feature-flags": "^0.27.0",
|
|
45
|
-
"@carbon/grid": "^11.38.0
|
|
46
|
-
"@carbon/layout": "^11.36.0
|
|
47
|
-
"@carbon/motion": "^11.30.0
|
|
48
|
-
"@carbon/themes": "^11.55.0
|
|
49
|
-
"@carbon/type": "^11.42.0
|
|
45
|
+
"@carbon/grid": "^11.38.0",
|
|
46
|
+
"@carbon/layout": "^11.36.0",
|
|
47
|
+
"@carbon/motion": "^11.30.0",
|
|
48
|
+
"@carbon/themes": "^11.55.0",
|
|
49
|
+
"@carbon/type": "^11.42.0",
|
|
50
50
|
"@ibm/plex": "6.0.0-next.6",
|
|
51
51
|
"@ibm/plex-mono": "0.0.3-alpha.0",
|
|
52
52
|
"@ibm/plex-sans": "0.0.3-alpha.0",
|
|
@@ -75,5 +75,5 @@
|
|
|
75
75
|
"scss/**/*.css",
|
|
76
76
|
"css/**/*.css"
|
|
77
77
|
],
|
|
78
|
-
"gitHead": "
|
|
78
|
+
"gitHead": "faed0dec20f49fc7a98d7509c2c0170dff9992fc"
|
|
79
79
|
}
|
|
@@ -57,7 +57,10 @@
|
|
|
57
57
|
.#{$prefix}--tree-node:focus > .#{$prefix}--tree-node__label {
|
|
58
58
|
@include focus-outline('outline');
|
|
59
59
|
}
|
|
60
|
-
|
|
60
|
+
.#{$prefix}--tree-node.#{$prefix}--tree-parent-node
|
|
61
|
+
> .#{$prefix}--tree-node__label {
|
|
62
|
+
inline-size: auto;
|
|
63
|
+
}
|
|
61
64
|
.#{$prefix}--tree-node--disabled:focus > .#{$prefix}--tree-node__label {
|
|
62
65
|
outline: none;
|
|
63
66
|
}
|
|
@@ -110,10 +113,14 @@
|
|
|
110
113
|
.#{$prefix}--tree-node__label {
|
|
111
114
|
@include type-style('body-compact-01');
|
|
112
115
|
|
|
116
|
+
position: relative;
|
|
113
117
|
display: flex;
|
|
118
|
+
box-sizing: border-box;
|
|
114
119
|
flex: 1;
|
|
115
120
|
align-items: center;
|
|
121
|
+
inline-size: 100%;
|
|
116
122
|
min-block-size: convert.to-rem(32px);
|
|
123
|
+
padding-inline-end: 1rem;
|
|
117
124
|
|
|
118
125
|
&:hover {
|
|
119
126
|
background-color: $layer-hover-01;
|
|
@@ -154,6 +161,7 @@
|
|
|
154
161
|
.#{$prefix}--tree-node__label__details {
|
|
155
162
|
display: flex;
|
|
156
163
|
align-items: center;
|
|
164
|
+
min-inline-size: 0;
|
|
157
165
|
}
|
|
158
166
|
|
|
159
167
|
.#{$prefix}--tree-node--with-icon .#{$prefix}--tree-parent-node__toggle {
|
|
@@ -247,4 +255,51 @@
|
|
|
247
255
|
.#{$prefix}--tree--xs .#{$prefix}--tree-parent-node__toggle {
|
|
248
256
|
margin-block-start: 0;
|
|
249
257
|
}
|
|
258
|
+
.#{$prefix}--tree-node__label__text {
|
|
259
|
+
@include type-style('body-compact-01');
|
|
260
|
+
|
|
261
|
+
display: block;
|
|
262
|
+
overflow: hidden;
|
|
263
|
+
line-height: 1.2;
|
|
264
|
+
padding-inline-start: convert.to-rem(4px);
|
|
265
|
+
text-overflow: ellipsis;
|
|
266
|
+
white-space: nowrap;
|
|
267
|
+
}
|
|
268
|
+
|
|
269
|
+
.#{$prefix}--tree-node__label .#{$prefix}--icon-tooltip {
|
|
270
|
+
inline-size: 100%;
|
|
271
|
+
}
|
|
272
|
+
|
|
273
|
+
.#{$prefix}--tree-node__label
|
|
274
|
+
.#{$prefix}--icon-tooltip
|
|
275
|
+
.#{$prefix}--btn--icon-only {
|
|
276
|
+
padding: 0;
|
|
277
|
+
border: none;
|
|
278
|
+
background: transparent;
|
|
279
|
+
block-size: auto;
|
|
280
|
+
color: inherit;
|
|
281
|
+
inline-size: 100%;
|
|
282
|
+
min-block-size: unset;
|
|
283
|
+
text-align: start;
|
|
284
|
+
}
|
|
285
|
+
|
|
286
|
+
.#{$prefix}--tree-node__label
|
|
287
|
+
.#{$prefix}--icon-tooltip
|
|
288
|
+
.#{$prefix}--btn--icon-only
|
|
289
|
+
.#{$prefix}--tree-node__label__text {
|
|
290
|
+
color: inherit;
|
|
291
|
+
inline-size: 100%;
|
|
292
|
+
}
|
|
293
|
+
|
|
294
|
+
.#{$prefix}--tree-node__label .#{$prefix}--tooltip-content {
|
|
295
|
+
padding: 1rem;
|
|
296
|
+
}
|
|
297
|
+
|
|
298
|
+
.#{$prefix}--tree-node__label .#{$prefix}--popover-container {
|
|
299
|
+
inline-size: 100%;
|
|
300
|
+
}
|
|
301
|
+
.#{$prefix}--tooltip-trigger__wrapper .#{$prefix}--btn--ghost:focus {
|
|
302
|
+
box-shadow: none;
|
|
303
|
+
outline: 2px solid $focus;
|
|
304
|
+
}
|
|
250
305
|
}
|