@patternfly/react-styles 6.2.2 → 6.3.0-prerelease.10
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/CHANGELOG.md +45 -5
- package/css/assets/images/icon-help.hbs +3 -0
- package/css/assets/images/icon-outlined-star.hbs +3 -0
- package/css/assets/images/icon-star.hbs +3 -0
- package/css/components/Accordion/accordion.css +72 -3
- package/css/components/Alert/alert-group.css +52 -31
- package/css/components/Alert/alert-group.d.ts +4 -1
- package/css/components/Alert/alert-group.js +4 -1
- package/css/components/Alert/alert-group.mjs +4 -1
- package/css/components/Button/button.css +154 -6
- package/css/components/Button/button.d.ts +12 -0
- package/css/components/Button/button.js +12 -0
- package/css/components/Button/button.mjs +12 -0
- package/css/components/Card/card.css +3 -0
- package/css/components/DataList/data-list.css +2 -2
- package/css/components/Drawer/drawer.css +28 -14
- package/css/components/DualListSelector/dual-list-selector.css +36 -0
- package/css/components/DualListSelector/dual-list-selector.d.ts +1 -0
- package/css/components/DualListSelector/dual-list-selector.js +1 -0
- package/css/components/DualListSelector/dual-list-selector.mjs +1 -0
- package/css/components/ExpandableSection/expandable-section.css +63 -1
- package/css/components/ExpandableSection/expandable-section.d.ts +3 -2
- package/css/components/ExpandableSection/expandable-section.js +3 -2
- package/css/components/ExpandableSection/expandable-section.mjs +3 -2
- package/css/components/FileUpload/file-upload.css +3 -3
- package/css/components/Form/form.css +40 -1
- package/css/components/Form/form.d.ts +2 -1
- package/css/components/Form/form.js +2 -1
- package/css/components/Form/form.mjs +2 -1
- package/css/components/FormControl/form-control.css +17 -2
- package/css/components/FormControl/form-control.d.ts +2 -2
- package/css/components/FormControl/form-control.js +2 -2
- package/css/components/FormControl/form-control.mjs +2 -2
- package/css/components/InputGroup/input-group.css +80 -0
- package/css/components/InputGroup/input-group.d.ts +6 -0
- package/css/components/InputGroup/input-group.js +6 -0
- package/css/components/InputGroup/input-group.mjs +6 -0
- package/css/components/Menu/menu.css +24 -4
- package/css/components/MenuToggle/menu-toggle.css +38 -4
- package/css/components/MenuToggle/menu-toggle.d.ts +1 -0
- package/css/components/MenuToggle/menu-toggle.js +1 -0
- package/css/components/MenuToggle/menu-toggle.mjs +1 -0
- package/css/components/Nav/nav.css +22 -8
- package/css/components/Page/page.css +62 -3
- package/css/components/Page/page.d.ts +3 -0
- package/css/components/Page/page.js +3 -0
- package/css/components/Page/page.mjs +3 -0
- package/css/components/Progress/progress.css +16 -0
- package/css/components/Skeleton/skeleton.css +22 -2
- package/css/components/Spinner/spinner.css +5 -0
- package/css/components/Spinner/spinner.d.ts +1 -0
- package/css/components/Spinner/spinner.js +1 -0
- package/css/components/Spinner/spinner.mjs +1 -0
- package/css/components/Table/table-grid.css +21 -5
- package/css/components/Table/table-grid.d.ts +1 -0
- package/css/components/Table/table-grid.js +1 -0
- package/css/components/Table/table-grid.mjs +1 -0
- package/css/components/Table/table.css +86 -8
- package/css/components/Table/table.d.ts +4 -0
- package/css/components/Table/table.js +4 -0
- package/css/components/Table/table.mjs +4 -0
- package/css/components/Tabs/tabs.css +75 -0
- package/css/components/Tabs/tabs.d.ts +3 -1
- package/css/components/Tabs/tabs.js +3 -1
- package/css/components/Tabs/tabs.mjs +3 -1
- package/css/components/TextInputGroup/text-input-group.css +16 -0
- package/css/components/TextInputGroup/text-input-group.d.ts +1 -1
- package/css/components/TextInputGroup/text-input-group.js +1 -1
- package/css/components/TextInputGroup/text-input-group.mjs +1 -1
- package/css/components/Timestamp/timestamp.css +4 -0
- package/css/components/Timestamp/timestamp.d.ts +2 -1
- package/css/components/Timestamp/timestamp.js +2 -1
- package/css/components/Timestamp/timestamp.mjs +2 -1
- package/css/components/TreeView/tree-view.css +39 -0
- package/css/components/TreeView/tree-view.d.ts +1 -0
- package/css/components/TreeView/tree-view.js +1 -0
- package/css/components/TreeView/tree-view.mjs +1 -0
- package/css/components/Truncate/truncate.css +6 -0
- package/css/components/Truncate/truncate.d.ts +3 -0
- package/css/components/Truncate/truncate.js +3 -0
- package/css/components/Truncate/truncate.mjs +3 -0
- package/css/components/_index.css +985 -97
- package/css/components/_index.d.ts +28 -2
- package/css/components/_index.js +28 -2
- package/css/components/_index.mjs +28 -2
- package/package.json +3 -3
@@ -29,12 +29,15 @@ exports.default = {
|
|
29
29
|
"favorite": "pf-m-favorite",
|
30
30
|
"borderRight": "pf-m-border-right",
|
31
31
|
"borderLeft": "pf-m-border-left",
|
32
|
+
"action": "pf-m-action",
|
32
33
|
"noBorderRows": "pf-m-no-border-rows",
|
33
34
|
"expanded": "pf-m-expanded",
|
34
35
|
"clickable": "pf-m-clickable",
|
35
36
|
"selected": "pf-m-selected",
|
36
37
|
"firstCellOffsetReset": "pf-m-first-cell-offset-reset",
|
37
38
|
"dragOver": "pf-m-drag-over",
|
39
|
+
"animateExpand": "pf-m-animate-expand",
|
40
|
+
"noAnimateExpand": "pf-m-no-animate-expand",
|
38
41
|
"truncate": "pf-m-truncate",
|
39
42
|
"wrap": "pf-m-wrap",
|
40
43
|
"nowrap": "pf-m-nowrap",
|
@@ -43,6 +46,7 @@ exports.default = {
|
|
43
46
|
"standalone": "pf-m-standalone",
|
44
47
|
"favorited": "pf-m-favorited",
|
45
48
|
"noPadding": "pf-m-no-padding",
|
49
|
+
"noBackground": "pf-m-no-background",
|
46
50
|
"compact": "pf-m-compact",
|
47
51
|
"borderRow": "pf-m-border-row",
|
48
52
|
"width_10": "pf-m-width-10",
|
@@ -27,12 +27,15 @@ export default {
|
|
27
27
|
"favorite": "pf-m-favorite",
|
28
28
|
"borderRight": "pf-m-border-right",
|
29
29
|
"borderLeft": "pf-m-border-left",
|
30
|
+
"action": "pf-m-action",
|
30
31
|
"noBorderRows": "pf-m-no-border-rows",
|
31
32
|
"expanded": "pf-m-expanded",
|
32
33
|
"clickable": "pf-m-clickable",
|
33
34
|
"selected": "pf-m-selected",
|
34
35
|
"firstCellOffsetReset": "pf-m-first-cell-offset-reset",
|
35
36
|
"dragOver": "pf-m-drag-over",
|
37
|
+
"animateExpand": "pf-m-animate-expand",
|
38
|
+
"noAnimateExpand": "pf-m-no-animate-expand",
|
36
39
|
"truncate": "pf-m-truncate",
|
37
40
|
"wrap": "pf-m-wrap",
|
38
41
|
"nowrap": "pf-m-nowrap",
|
@@ -41,6 +44,7 @@ export default {
|
|
41
44
|
"standalone": "pf-m-standalone",
|
42
45
|
"favorited": "pf-m-favorited",
|
43
46
|
"noPadding": "pf-m-no-padding",
|
47
|
+
"noBackground": "pf-m-no-background",
|
44
48
|
"compact": "pf-m-compact",
|
45
49
|
"borderRow": "pf-m-border-row",
|
46
50
|
"width_10": "pf-m-width-10",
|
@@ -1,3 +1,13 @@
|
|
1
|
+
@property --pf-v6-c-tabs--link-accent--length {
|
2
|
+
syntax: "<length>";
|
3
|
+
inherits: true;
|
4
|
+
initial-value: 0px;
|
5
|
+
}
|
6
|
+
@property --pf-v6-c-tabs--link-accent--start {
|
7
|
+
syntax: "<length>";
|
8
|
+
inherits: true;
|
9
|
+
initial-value: 0px;
|
10
|
+
}
|
1
11
|
.pf-v6-c-tabs {
|
2
12
|
--pf-v6-c-tabs--inset: 0;
|
3
13
|
--pf-v6-c-tabs--Width: auto;
|
@@ -59,6 +69,8 @@
|
|
59
69
|
--pf-v6-c-tabs--m-box--m-secondary__link--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
|
60
70
|
--pf-v6-c-tabs--m-box--m-secondary__item--m-current__link--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
|
61
71
|
--pf-v6-c-tabs--m-subtab__link--FontSize: var(--pf-t--global--font--size--xs);
|
72
|
+
--pf-v6-c-tabs__link--TransitionDuration--background-color: var(--pf-t--global--motion--duration--fade--short);
|
73
|
+
--pf-v6-c-tabs__link--TransitionTimingFunction--background-color: var(--pf-t--global--motion--timing-function--default);
|
62
74
|
--pf-v6-c-tabs__link--before--border-color--base: var(--pf-t--global--border--color--default);
|
63
75
|
--pf-v6-c-tabs__link--before--border-width--base: var(--pf-t--global--border--width--regular);
|
64
76
|
--pf-v6-c-tabs__link--before--BorderBlockStartColor: var(--pf-v6-c-tabs__link--before--border-color--base);
|
@@ -83,6 +95,29 @@
|
|
83
95
|
--pf-v6-c-tabs__link--after--BorderInlineStartWidth: 0;
|
84
96
|
--pf-v6-c-tabs__item--m-current__link--after--BorderColor: var(--pf-t--global--border--color--clicked);
|
85
97
|
--pf-v6-c-tabs__item--m-current__link--after--BorderWidth: var(--pf-t--global--border--width--extra-strong);
|
98
|
+
--pf-v6-c-tabs--link-accent--start: 0;
|
99
|
+
--pf-v6-c-tabs--link-accent--length: 0;
|
100
|
+
--pf-v6-c-tabs--link-accent--color: var(--pf-v6-c-tabs__item--m-current__link--after--BorderColor);
|
101
|
+
--pf-v6-c-tabs--link-accent--border-size: var(--pf-v6-c-tabs__item--m-current__link--after--BorderWidth);
|
102
|
+
--pf-v6-c-tabs--link-accent--TransitionDuration: var(--pf-t--global--motion--duration--md);
|
103
|
+
--pf-v6-c-tabs--link-accent--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
|
104
|
+
--pf-v6-c-tabs--link-accent--InsetBlockStart: auto;
|
105
|
+
--pf-v6-c-tabs--link-accent--InsetBlockEnd: 0;
|
106
|
+
--pf-v6-c-tabs--link-accent--InsetInlineStart: 0;
|
107
|
+
--pf-v6-c-tabs--link-accent--Width: initial;
|
108
|
+
--pf-v6-c-tabs--link-accent--Height: 0;
|
109
|
+
--pf-v6-c-tabs--link-accent--BorderBlockEndWidth: var(--pf-v6-c-tabs--link-accent--border-size);
|
110
|
+
--pf-v6-c-tabs--link-accent--BorderInlineStartWidth: 0;
|
111
|
+
--pf-v6-c-tabs--link-accent--TranslateX: var(--pf-v6-c-tabs--link-accent--start);
|
112
|
+
--pf-v6-c-tabs--link-accent--TranslateY: 0;
|
113
|
+
--pf-v6-c-tabs--link-accent--TransformOrigin: 0 center;
|
114
|
+
--pf-v6-c-tabs--m-vertical--link-accent--InsetBlockStart: 0;
|
115
|
+
--pf-v6-c-tabs--m-vertical--link-accent--InsetBlockEnd: auto;
|
116
|
+
--pf-v6-c-tabs--m-vertical--link-accent--BorderBlockEndWidth: 0;
|
117
|
+
--pf-v6-c-tabs--m-vertical--link-accent--BorderInlineStartWidth: var(--pf-v6-c-tabs--link-accent--border-size);
|
118
|
+
--pf-v6-c-tabs--m-vertical--link-accent--TranslateX: 0;
|
119
|
+
--pf-v6-c-tabs--m-vertical--link-accent--TranslateY: var(--pf-v6-c-tabs--link-accent--start);
|
120
|
+
--pf-v6-c-tabs--m-vertical--link-accent--TransformOrigin: center 0;
|
86
121
|
--pf-v6-c-tabs__scroll-button--PaddingBlockStart: var(--pf-t--global--spacer--sm);
|
87
122
|
--pf-v6-c-tabs__scroll-button--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
|
88
123
|
--pf-v6-c-tabs__scroll-button--PaddingInlineStart: var(--pf-t--global--spacer--sm);
|
@@ -240,6 +275,15 @@
|
|
240
275
|
--pf-v6-c-tabs__link--after--InsetBlockEnd: 0;
|
241
276
|
--pf-v6-c-tabs__link--after--InsetInlineEnd: auto;
|
242
277
|
--pf-v6-c-tabs__list--ScrollSnapTypeAxis: var(--pf-v6-c-tabs--m-vertical__list--ScrollSnapTypeAxis);
|
278
|
+
--pf-v6-c-tabs--link-accent--InsetBlockStart: var(--pf-v6-c-tabs--m-vertical--link-accent--InsetBlockStart);
|
279
|
+
--pf-v6-c-tabs--link-accent--InsetBlockEnd: var(--pf-v6-c-tabs--m-vertical--link-accent--InsetBlockEnd);
|
280
|
+
--pf-v6-c-tabs--link-accent--Width: var(--pf-v6-c-tabs--m-vertical--link-accent--Width);
|
281
|
+
--pf-v6-c-tabs--link-accent--Height: var(--pf-v6-c-tabs--m-vertical--link-accent--Height);
|
282
|
+
--pf-v6-c-tabs--link-accent--BorderBlockEndWidth: var(--pf-v6-c-tabs--m-vertical--link-accent--BorderBlockEndWidth);
|
283
|
+
--pf-v6-c-tabs--link-accent--BorderInlineStartWidth: var(--pf-v6-c-tabs--m-vertical--link-accent--BorderInlineStartWidth);
|
284
|
+
--pf-v6-c-tabs--link-accent--TranslateX: var(--pf-v6-c-tabs--m-vertical--link-accent--TranslateX);
|
285
|
+
--pf-v6-c-tabs--link-accent--TranslateY: var(--pf-v6-c-tabs--m-vertical--link-accent--TranslateY);
|
286
|
+
--pf-v6-c-tabs--link-accent--TransformOrigin: var(--pf-v6-c-tabs--m-vertical--link-accent--TransformOrigin);
|
243
287
|
display: inline-flex;
|
244
288
|
flex-direction: column;
|
245
289
|
height: 100%;
|
@@ -502,6 +546,7 @@
|
|
502
546
|
text-decoration-line: none;
|
503
547
|
background-color: var(--pf-v6-c-tabs__link--BackgroundColor);
|
504
548
|
border-radius: var(--pf-v6-c-tabs__link--BorderRadius);
|
549
|
+
transition: background-color var(--pf-v6-c-tabs__link--TransitionDuration--background-color) var(--pf-v6-c-tabs__link--TransitionTimingFunction--background-color);
|
505
550
|
}
|
506
551
|
.pf-v6-c-tabs__item.pf-m-action, .pf-v6-c-tabs__link {
|
507
552
|
--pf-v6-c-tabs__link--after--BorderBlockEndWidth: var(--pf-v6-c-tabs__link--after--BorderWidth);
|
@@ -812,4 +857,34 @@
|
|
812
857
|
--pf-v6-c-tabs--m-vertical--inset: var(--pf-t--global--spacer--2xl);
|
813
858
|
--pf-v6-c-tabs--m-vertical--m-box--inset: var(--pf-t--global--spacer--2xl);
|
814
859
|
}
|
860
|
+
}
|
861
|
+
|
862
|
+
@media (prefers-reduced-motion: no-preference) {
|
863
|
+
.pf-v6-c-tabs.pf-m-animate-current:not(.pf-m-box) .pf-v6-c-tabs__link::after,
|
864
|
+
.pf-v6-c-tabs.pf-m-animate-current:not(.pf-m-box) .pf-v6-c-tabs__item.pf-m-action::after {
|
865
|
+
content: revert;
|
866
|
+
}
|
867
|
+
.pf-v6-c-tabs.pf-m-animate-current:not(.pf-m-box) .pf-v6-c-tabs__list::after {
|
868
|
+
position: absolute;
|
869
|
+
inset-block-start: var(--pf-v6-c-tabs--link-accent--InsetBlockStart);
|
870
|
+
inset-block-end: var(--pf-v6-c-tabs--link-accent--InsetBlockEnd);
|
871
|
+
inset-inline-start: var(--pf-v6-c-tabs--link-accent--InsetInlineStart);
|
872
|
+
width: var(--pf-v6-c-tabs--link-accent--Width, var(--pf-v6-c-tabs--link-accent--length));
|
873
|
+
height: var(--pf-v6-c-tabs--link-accent--Height, var(--pf-v6-c-tabs--link-accent--length));
|
874
|
+
content: "";
|
875
|
+
border: 0 solid var(--pf-v6-c-tabs--link-accent--color);
|
876
|
+
border-block-end-width: var(--pf-v6-c-tabs--link-accent--BorderBlockEndWidth);
|
877
|
+
border-inline-start-width: var(--pf-v6-c-tabs--link-accent--BorderInlineStartWidth);
|
878
|
+
transition-timing-function: var(--pf-v6-c-tabs--link-accent--TransitionTimingFunction);
|
879
|
+
transition-duration: var(--pf-v6-c-tabs--link-accent--TransitionDuration);
|
880
|
+
transition-property: width, height, translate;
|
881
|
+
transform-origin: var(--pf-v6-c-tabs--link-accent--TransformOrigin);
|
882
|
+
translate: var(--pf-v6-c-tabs--link-accent--TranslateX) var(--pf-v6-c-tabs--link-accent--TranslateY);
|
883
|
+
}
|
884
|
+
:where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-tabs.pf-m-animate-current:not(.pf-m-box) .pf-v6-c-tabs__list::after {
|
885
|
+
translate: calc(var(--pf-v6-c-tabs--link-accent--TranslateX) * var(--pf-v6-global--inverse--multiplier)) var(--pf-v6-c-tabs--link-accent--TranslateY);
|
886
|
+
}
|
887
|
+
.pf-v6-c-tabs.pf-m-initializing-accent {
|
888
|
+
--pf-v6-c-tabs--link-accent--TransitionDuration: 0;
|
889
|
+
}
|
815
890
|
}
|
@@ -64,7 +64,9 @@ declare const _default: {
|
|
64
64
|
"insetMdOn_2xl": "pf-m-inset-md-on-2xl",
|
65
65
|
"insetLgOn_2xl": "pf-m-inset-lg-on-2xl",
|
66
66
|
"insetXlOn_2xl": "pf-m-inset-xl-on-2xl",
|
67
|
-
"inset_2xlOn_2xl": "pf-m-inset-2xl-on-2xl"
|
67
|
+
"inset_2xlOn_2xl": "pf-m-inset-2xl-on-2xl",
|
68
|
+
"animateCurrent": "pf-m-animate-current",
|
69
|
+
"initializingAccent": "pf-m-initializing-accent"
|
68
70
|
},
|
69
71
|
"tabs": "pf-v6-c-tabs",
|
70
72
|
"tabsAdd": "pf-v6-c-tabs__add",
|
@@ -66,7 +66,9 @@ exports.default = {
|
|
66
66
|
"insetMdOn_2xl": "pf-m-inset-md-on-2xl",
|
67
67
|
"insetLgOn_2xl": "pf-m-inset-lg-on-2xl",
|
68
68
|
"insetXlOn_2xl": "pf-m-inset-xl-on-2xl",
|
69
|
-
"inset_2xlOn_2xl": "pf-m-inset-2xl-on-2xl"
|
69
|
+
"inset_2xlOn_2xl": "pf-m-inset-2xl-on-2xl",
|
70
|
+
"animateCurrent": "pf-m-animate-current",
|
71
|
+
"initializingAccent": "pf-m-initializing-accent"
|
70
72
|
},
|
71
73
|
"tabs": "pf-v6-c-tabs",
|
72
74
|
"tabsAdd": "pf-v6-c-tabs__add",
|
@@ -64,7 +64,9 @@ export default {
|
|
64
64
|
"insetMdOn_2xl": "pf-m-inset-md-on-2xl",
|
65
65
|
"insetLgOn_2xl": "pf-m-inset-lg-on-2xl",
|
66
66
|
"insetXlOn_2xl": "pf-m-inset-xl-on-2xl",
|
67
|
-
"inset_2xlOn_2xl": "pf-m-inset-2xl-on-2xl"
|
67
|
+
"inset_2xlOn_2xl": "pf-m-inset-2xl-on-2xl",
|
68
|
+
"animateCurrent": "pf-m-animate-current",
|
69
|
+
"initializingAccent": "pf-m-initializing-accent"
|
68
70
|
},
|
69
71
|
"tabs": "pf-v6-c-tabs",
|
70
72
|
"tabsAdd": "pf-v6-c-tabs__add",
|
@@ -103,6 +103,22 @@
|
|
103
103
|
--pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-error--BorderColor);
|
104
104
|
--pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-error__icon--m-status--Color);
|
105
105
|
}
|
106
|
+
@media (prefers-reduced-motion: no-preference) {
|
107
|
+
.pf-v6-c-text-input-group.pf-m-error {
|
108
|
+
translate: var(--pf-v6-global--danger-jiggle--TranslateX, 0);
|
109
|
+
animation-name: pf-v6-global-danger-jiggle-motion;
|
110
|
+
animation-duration: var(--pf-v6-global--danger-jiggle--AnimationDuration--Transform);
|
111
|
+
animation-timing-function: var(--pf-v6-global--danger-jiggle--AnimationTimingFunction--Transform);
|
112
|
+
animation-fill-mode: both;
|
113
|
+
}
|
114
|
+
}
|
115
|
+
.pf-v6-c-text-input-group.pf-m-error .pf-v6-c-text-input-group__icon.pf-m-status {
|
116
|
+
--pf-v6-c-text-input-group--TransitionDuration--Opacity: var(--pf-t--global--motion--duration--fade--default);
|
117
|
+
--pf-v6-c-text-input-group--TransitionTimingFunction--Opacity: var(--pf-t--global--motion--timing-function--default);
|
118
|
+
animation-name: pf-v6-global-fade-in;
|
119
|
+
animation-duration: var(--pf-v6-c-text-input-group--TransitionDuration--Opacity);
|
120
|
+
animation-timing-function: var(--pf-v6-c-text-input-group--TransitionTimingFunction--Opacity);
|
121
|
+
}
|
106
122
|
.pf-v6-c-text-input-group:hover {
|
107
123
|
--pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-hover--BorderColor);
|
108
124
|
}
|
@@ -7,8 +7,8 @@ declare const _default: {
|
|
7
7
|
"success": "pf-m-success",
|
8
8
|
"warning": "pf-m-warning",
|
9
9
|
"error": "pf-m-error",
|
10
|
-
"icon": "pf-m-icon",
|
11
10
|
"status": "pf-m-status",
|
11
|
+
"icon": "pf-m-icon",
|
12
12
|
"hint": "pf-m-hint"
|
13
13
|
},
|
14
14
|
"textInputGroup": "pf-v6-c-text-input-group",
|
@@ -28,4 +28,8 @@
|
|
28
28
|
--pf-v6-c-timestamp--Color: var(--pf-v6-c-timestamp--m-help-text--hover--Color);
|
29
29
|
--pf-v6-c-timestamp--m-help-text--TextDecorationLine: var(--pf-v6-c-timestamp--m-help-text--hover--TextDecorationLine);
|
30
30
|
--pf-v6-c-timestamp--m-help-text--TextDecorationStyle: var(--pf-v6-c-timestamp--m-help-text--hover--TextDecorationStyle);
|
31
|
+
}
|
32
|
+
|
33
|
+
.pf-v6-c-timestamp__text {
|
34
|
+
text-decoration: inherit;
|
31
35
|
}
|
@@ -14,6 +14,17 @@
|
|
14
14
|
--pf-v6-c-tree-view__node-container--Display: contents;
|
15
15
|
--pf-v6-c-tree-view__node-content--RowGap: var(--pf-t--global--spacer--sm);
|
16
16
|
--pf-v6-c-tree-view__node-content--Overflow: visible;
|
17
|
+
--pf-v6-c-tree-view__list--TransitionDuration--expand--slide: 0s;
|
18
|
+
--pf-v6-c-tree-view__list--TransitionDuration--expand--fade: var(--pf-t--global--motion--duration--fade--default);
|
19
|
+
--pf-v6-c-tree-view__list--TransitionDuration--collapse--slide: 0s;
|
20
|
+
--pf-v6-c-tree-view__list--TransitionDuration--collapse--fade: var(--pf-t--global--motion--duration--fade--short);
|
21
|
+
--pf-v6-c-tree-view__list--TransitionDuration--slide: var(--pf-v6-c-tree-view__list--TransitionDuration--collapse--slide);
|
22
|
+
--pf-v6-c-tree-view__list--TransitionDuration--fade: var(--pf-v6-c-tree-view__list--TransitionDuration--collapse--fade);
|
23
|
+
--pf-v6-c-tree-view__list--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
|
24
|
+
--pf-v6-c-tree-view__list--Opacity: 0;
|
25
|
+
--pf-v6-c-tree-view--m-expanded__list--Opacity: 1;
|
26
|
+
--pf-v6-c-tree-view__list--TranslateY: 0;
|
27
|
+
--pf-v6-c-tree-view--m-expanded__list--TranslateY: 0;
|
17
28
|
--pf-v6-c-tree-view__list-item__list-item__node-toggle--InsetBlockStart: var(--pf-v6-c-tree-view__node--PaddingBlockStart);
|
18
29
|
--pf-v6-c-tree-view__list-item__list-item__node-toggle--InsetInlineStart: var(--pf-v6-c-tree-view__node--PaddingInlineStart);
|
19
30
|
--pf-v6-c-tree-view__list-item__list-item__node-toggle--TranslateX: -100%;
|
@@ -29,6 +40,8 @@
|
|
29
40
|
--pf-v6-c-tree-view__node-toggle--PaddingInlineStart: var(--pf-t--global--spacer--md);
|
30
41
|
--pf-v6-c-tree-view__node-toggle--MarginBlockStart: calc(var(--pf-v6-c-tree-view__node-toggle--PaddingBlockStart) * -1);
|
31
42
|
--pf-v6-c-tree-view__node-toggle--MarginBlockEnd: calc(var(--pf-v6-c-tree-view__node-toggle--PaddingBlockStart) * -1);
|
43
|
+
--pf-v6-c-tree-view__node-toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
|
44
|
+
--pf-v6-c-tree-view__node-toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
|
32
45
|
--pf-v6-c-tree-view__node-check--MarginInlineEnd: var(--pf-t--global--spacer--sm);
|
33
46
|
--pf-v6-c-tree-view__node-count--MarginInlineStart: var(--pf-t--global--spacer--sm);
|
34
47
|
--pf-v6-c-tree-view__search--PaddingBlockStart: var(--pf-t--global--spacer--sm);
|
@@ -104,6 +117,13 @@
|
|
104
117
|
--pf-v6-c-tree-view--m-compact--m-no-background__node--nested--PaddingBlockEnd: 0;
|
105
118
|
--pf-v6-c-tree-view--m-compact--m-no-background__node--before--InsetBlockStart: calc(var(--pf-v6-c-tree-view--m-compact__node-container--nested--PaddingBlockStart) + var(--pf-v6-c-tree-view--m-compact__node--nested--PaddingBlockStart) + 0.25rem);
|
106
119
|
}
|
120
|
+
@media screen and (prefers-reduced-motion: no-preference) {
|
121
|
+
.pf-v6-c-tree-view {
|
122
|
+
--pf-v6-c-tree-view__list--TransitionDuration--expand--slide: var(--pf-t--global--motion--duration--fade--default);
|
123
|
+
--pf-v6-c-tree-view__list--TransitionDuration--collapse--slide: var(--pf-t--global--motion--duration--fade--short);
|
124
|
+
--pf-v6-c-tree-view__list--TranslateY: -.5rem;
|
125
|
+
}
|
126
|
+
}
|
107
127
|
|
108
128
|
.pf-v6-c-tree-view.pf-m-compact .pf-v6-c-tree-view__list-item, .pf-v6-c-tree-view.pf-m-guides .pf-v6-c-tree-view__list-item {
|
109
129
|
position: relative;
|
@@ -219,12 +239,23 @@
|
|
219
239
|
display: inline-block;
|
220
240
|
min-width: var(--pf-v6-c-tree-view__node-toggle-icon--MinWidth);
|
221
241
|
text-align: center;
|
242
|
+
transition: transform var(--pf-v6-c-tree-view__node-toggle-icon--TransitionDuration) var(--pf-v6-c-tree-view__node-toggle-icon--TransitionTimingFunction);
|
222
243
|
transform: rotate(var(--pf-v6-c-tree-view__node-toggle-icon--Rotate));
|
223
244
|
}
|
224
245
|
:where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-tree-view__node-toggle-icon {
|
225
246
|
scale: -1 1;
|
226
247
|
}
|
227
248
|
|
249
|
+
.pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list {
|
250
|
+
max-height: 0;
|
251
|
+
visibility: hidden;
|
252
|
+
opacity: var(--pf-v6-c-tree-view__list--Opacity);
|
253
|
+
transition-delay: 0s, 0s, var(--pf-v6-c-tree-view__list--TransitionDuration--fade), var(--pf-v6-c-tree-view__list--TransitionDuration--fade);
|
254
|
+
transition-timing-function: var(--pf-v6-c-tree-view__list--TransitionTimingFunction);
|
255
|
+
transition-duration: var(--pf-v6-c-tree-view__list--TransitionDuration--fade), var(--pf-v6-c-tree-view__list--TransitionDuration--slide), 0s, 0s;
|
256
|
+
transition-property: opacity, translate, visibility, max-height;
|
257
|
+
translate: 0 var(--pf-v6-c-tree-view__list--TranslateY);
|
258
|
+
}
|
228
259
|
.pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item {
|
229
260
|
--pf-v6-c-tree-view__node-toggle-icon--Rotate: var(--pf-v6-c-tree-view__node-toggle-icon--base--Rotate);
|
230
261
|
--pf-v6-c-tree-view__node-toggle--Color: var(--pf-v6-c-tree-view__node-toggle--Color--base);
|
@@ -233,6 +264,14 @@
|
|
233
264
|
--pf-v6-c-tree-view__node-toggle--Color: var(--pf-v6-c-tree-view__list-item--m-expanded__node-toggle--Color);
|
234
265
|
--pf-v6-c-tree-view__node-toggle-icon--Rotate: var(--pf-v6-c-tree-view__list-item--m-expanded__node-toggle-icon--Rotate);
|
235
266
|
}
|
267
|
+
.pf-v6-c-tree-view__list-item.pf-m-expanded > .pf-v6-c-tree-view__list {
|
268
|
+
max-height: 99999px;
|
269
|
+
visibility: revert;
|
270
|
+
opacity: var(--pf-v6-c-tree-view--m-expanded__list--Opacity);
|
271
|
+
transition-delay: 0s;
|
272
|
+
transition-duration: var(--pf-v6-c-tree-view__list--TransitionDuration--expand--fade), var(--pf-v6-c-tree-view__list--TransitionDuration--expand--slide), 0s, 0s;
|
273
|
+
translate: 0 var(--pf-v6-c-tree-view--m-expanded__list--TranslateY);
|
274
|
+
}
|
236
275
|
|
237
276
|
.pf-v6-c-tree-view__node,
|
238
277
|
.pf-v6-c-tree-view__node-container {
|
@@ -12,6 +12,7 @@ declare const _default: {
|
|
12
12
|
"treeView": "pf-v6-c-tree-view",
|
13
13
|
"treeViewAction": "pf-v6-c-tree-view__action",
|
14
14
|
"treeViewContent": "pf-v6-c-tree-view__content",
|
15
|
+
"treeViewList": "pf-v6-c-tree-view__list",
|
15
16
|
"treeViewListItem": "pf-v6-c-tree-view__list-item",
|
16
17
|
"treeViewNode": "pf-v6-c-tree-view__node",
|
17
18
|
"treeViewNodeCheck": "pf-v6-c-tree-view__node-check",
|
@@ -14,6 +14,7 @@ exports.default = {
|
|
14
14
|
"treeView": "pf-v6-c-tree-view",
|
15
15
|
"treeViewAction": "pf-v6-c-tree-view__action",
|
16
16
|
"treeViewContent": "pf-v6-c-tree-view__content",
|
17
|
+
"treeViewList": "pf-v6-c-tree-view__list",
|
17
18
|
"treeViewListItem": "pf-v6-c-tree-view__list-item",
|
18
19
|
"treeViewNode": "pf-v6-c-tree-view__node",
|
19
20
|
"treeViewNodeCheck": "pf-v6-c-tree-view__node-check",
|
@@ -12,6 +12,7 @@ export default {
|
|
12
12
|
"treeView": "pf-v6-c-tree-view",
|
13
13
|
"treeViewAction": "pf-v6-c-tree-view__action",
|
14
14
|
"treeViewContent": "pf-v6-c-tree-view__content",
|
15
|
+
"treeViewList": "pf-v6-c-tree-view__list",
|
15
16
|
"treeViewListItem": "pf-v6-c-tree-view__list-item",
|
16
17
|
"treeViewNode": "pf-v6-c-tree-view__node",
|
17
18
|
"treeViewNodeCheck": "pf-v6-c-tree-view__node-check",
|
@@ -8,6 +8,12 @@
|
|
8
8
|
grid-auto-flow: column;
|
9
9
|
align-items: baseline;
|
10
10
|
min-width: var(--pf-v6-c-truncate--MinWidth);
|
11
|
+
text-decoration: inherit;
|
12
|
+
}
|
13
|
+
.pf-v6-c-truncate.pf-m-fixed {
|
14
|
+
display: inline;
|
15
|
+
align-items: revert;
|
16
|
+
min-width: revert;
|
11
17
|
}
|
12
18
|
|
13
19
|
.pf-v6-c-truncate__start,
|
@@ -3,6 +3,9 @@ exports.__esModule = true;
|
|
3
3
|
require('./truncate.css');
|
4
4
|
exports.default = {
|
5
5
|
"dirRtl": "pf-v6-m-dir-rtl",
|
6
|
+
"modifiers": {
|
7
|
+
"fixed": "pf-m-fixed"
|
8
|
+
},
|
6
9
|
"truncate": "pf-v6-c-truncate",
|
7
10
|
"truncateEnd": "pf-v6-c-truncate__end",
|
8
11
|
"truncateStart": "pf-v6-c-truncate__start"
|