@patternfly/react-styles 6.5.0-prerelease.10 → 6.5.0-prerelease.11
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 +6 -0
- package/css/components/AboutModalBox/about-modal-box.css +36 -26
- package/css/components/Accordion/accordion.css +16 -13
- package/css/components/Alert/alert.css +5 -4
- package/css/components/Avatar/avatar.css +12 -4
- package/css/components/BackgroundImage/background-image.css +6 -3
- package/css/components/Banner/banner.css +8 -6
- package/css/components/Brand/brand.css +3 -1
- package/css/components/Breadcrumb/breadcrumb.css +4 -3
- package/css/components/Button/button.css +6 -6
- package/css/components/CalendarMonth/calendar-month.css +4 -3
- package/css/components/Card/card.css +7 -6
- package/css/components/ClipboardCopy/clipboard-copy.css +4 -3
- package/css/components/CodeEditor/code-editor.css +1 -1
- package/css/components/Compass/compass.css +6 -2
- package/css/components/DataList/data-list.css +28 -21
- package/css/components/DescriptionList/description-list.css +7 -5
- package/css/components/Divider/divider.css +7 -5
- package/css/components/Drawer/drawer.css +38 -28
- package/css/components/DualListSelector/dual-list-selector.css +17 -11
- package/css/components/ExpandableSection/expandable-section.css +16 -14
- package/css/components/Form/form.css +1 -1
- package/css/components/FormControl/form-control.css +1 -1
- package/css/components/JumpLinks/jump-links.css +4 -3
- package/css/components/Label/label-group.css +2 -2
- package/css/components/Label/label.css +4 -3
- package/css/components/Login/login.css +51 -37
- package/css/components/Masthead/masthead.css +20 -18
- package/css/components/Menu/menu.css +23 -14
- package/css/components/ModalBox/modal-box.css +9 -7
- package/css/components/Nav/nav.css +13 -9
- package/css/components/NotificationDrawer/notification-drawer.css +6 -6
- package/css/components/Page/page.css +35 -29
- package/css/components/Sidebar/sidebar.css +1 -1
- package/css/components/Skeleton/skeleton.css +16 -15
- package/css/components/Slider/slider.css +32 -18
- package/css/components/Switch/switch.css +3 -1
- package/css/components/Table/table-tree-view.css +4 -2
- package/css/components/Table/table.css +31 -27
- package/css/components/Tabs/tabs.css +17 -15
- package/css/components/Toolbar/toolbar.css +14 -8
- package/css/components/TreeView/tree-view.css +44 -13
- 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/Wizard/wizard.css +20 -16
- package/css/components/_index.css +598 -427
- package/css/layouts/Gallery/gallery.css +6 -2
- package/css/layouts/_index.css +6 -2
- package/package.json +4 -4
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,12 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
# [6.5.0-prerelease.11](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-styles@6.5.0-prerelease.10...@patternfly/react-styles@6.5.0-prerelease.11) (2026-02-05)
|
|
7
|
+
|
|
8
|
+
### Features
|
|
9
|
+
|
|
10
|
+
- **TreeView:** add support for disabled TreeViewListItems ([#12140](https://github.com/patternfly/patternfly-react/issues/12140)) ([3514831](https://github.com/patternfly/patternfly-react/commit/35148312f5d9ce4e706ad36b801455fc987842bb))
|
|
11
|
+
|
|
6
12
|
# [6.5.0-prerelease.10](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-styles@6.5.0-prerelease.9...@patternfly/react-styles@6.5.0-prerelease.10) (2026-01-09)
|
|
7
13
|
|
|
8
14
|
**Note:** Version bump only for package @patternfly/react-styles
|
|
@@ -17,31 +17,6 @@
|
|
|
17
17
|
--pf-v6-c-about-modal-box__brand--sm--PaddingInlineEnd: var(--pf-t--global--spacer--3xl);
|
|
18
18
|
--pf-v6-c-about-modal-box__brand--sm--PaddingInlineStart: var(--pf-t--global--spacer--3xl);
|
|
19
19
|
--pf-v6-c-about-modal-box__brand--sm--PaddingBlockEnd: var(--pf-t--global--spacer--3xl);
|
|
20
|
-
--pf-v6-c-about-modal-box__close--ZIndex: var(--pf-t--global--z-index--2xl);
|
|
21
|
-
--pf-v6-c-about-modal-box__close--PaddingBlockStart: var(--pf-t--global--spacer--2xl);
|
|
22
|
-
--pf-v6-c-about-modal-box__close--PaddingInlineEnd: var(--pf-t--global--spacer--xl);
|
|
23
|
-
--pf-v6-c-about-modal-box__close--PaddingBlockEnd: var(--pf-t--global--spacer--xl);
|
|
24
|
-
--pf-v6-c-about-modal-box__close--sm--PaddingBlockEnd: var(--pf-t--global--spacer--3xl);
|
|
25
|
-
--pf-v6-c-about-modal-box__close--lg--PaddingInlineEnd: var(--pf-t--global--spacer--3xl);
|
|
26
|
-
--pf-v6-c-about-modal-box__close--c-button--FontSize: var(--pf-t--global--icon--size--lg);
|
|
27
|
-
--pf-v6-c-about-modal-box__brand-image--Height: 2.3125rem;
|
|
28
|
-
--pf-v6-c-about-modal-box__header--PaddingInlineEnd: var(--pf-t--global--spacer--xl);
|
|
29
|
-
--pf-v6-c-about-modal-box__header--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
|
|
30
|
-
--pf-v6-c-about-modal-box__header--PaddingInlineStart: var(--pf-t--global--spacer--xl);
|
|
31
|
-
--pf-v6-c-about-modal-box__header--sm--PaddingInlineEnd: var(--pf-t--global--spacer--3xl);
|
|
32
|
-
--pf-v6-c-about-modal-box__header--sm--PaddingInlineStart: var(--pf-t--global--spacer--3xl);
|
|
33
|
-
--pf-v6-c-about-modal-box__strapline--PaddingBlockStart: var(--pf-t--global--spacer--xl);
|
|
34
|
-
--pf-v6-c-about-modal-box__strapline--FontSize: var(--pf-t--global--font--size--body--sm);
|
|
35
|
-
--pf-v6-c-about-modal-box__strapline--Color: var(--pf-t--global--text--color--subtle);
|
|
36
|
-
--pf-v6-c-about-modal-box__strapline--sm--PaddingBlockStart: var(--pf-t--global--spacer--2xl);
|
|
37
|
-
--pf-v6-c-about-modal-box__content--MarginBlockStart: var(--pf-t--global--spacer--xl);
|
|
38
|
-
--pf-v6-c-about-modal-box__content--MarginInlineEnd: var(--pf-t--global--spacer--xl);
|
|
39
|
-
--pf-v6-c-about-modal-box__content--MarginBlockEnd: var(--pf-t--global--spacer--xl);
|
|
40
|
-
--pf-v6-c-about-modal-box__content--MarginInlineStart: var(--pf-t--global--spacer--xl);
|
|
41
|
-
--pf-v6-c-about-modal-box__content--sm--MarginBlockStart: var(--pf-t--global--spacer--2xl);
|
|
42
|
-
--pf-v6-c-about-modal-box__content--sm--MarginInlineEnd: var(--pf-t--global--spacer--3xl);
|
|
43
|
-
--pf-v6-c-about-modal-box__content--sm--MarginBlockEnd: var(--pf-t--global--spacer--2xl);
|
|
44
|
-
--pf-v6-c-about-modal-box__content--sm--MarginInlineStart: var(--pf-t--global--spacer--3xl);
|
|
45
20
|
}
|
|
46
21
|
@media screen and (min-width: 36rem) {
|
|
47
22
|
.pf-v6-c-about-modal-box {
|
|
@@ -50,6 +25,14 @@
|
|
|
50
25
|
--pf-v6-c-about-modal-box__brand--PaddingBlockEnd: var(--pf-v6-c-about-modal-box__brand--sm--PaddingBlockEnd);
|
|
51
26
|
}
|
|
52
27
|
}
|
|
28
|
+
.pf-v6-c-about-modal-box {
|
|
29
|
+
--pf-v6-c-about-modal-box__close--ZIndex: var(--pf-t--global--z-index--2xl);
|
|
30
|
+
--pf-v6-c-about-modal-box__close--PaddingBlockStart: var(--pf-t--global--spacer--2xl);
|
|
31
|
+
--pf-v6-c-about-modal-box__close--PaddingInlineEnd: var(--pf-t--global--spacer--xl);
|
|
32
|
+
--pf-v6-c-about-modal-box__close--PaddingBlockEnd: var(--pf-t--global--spacer--xl);
|
|
33
|
+
--pf-v6-c-about-modal-box__close--sm--PaddingBlockEnd: var(--pf-t--global--spacer--3xl);
|
|
34
|
+
--pf-v6-c-about-modal-box__close--lg--PaddingInlineEnd: var(--pf-t--global--spacer--3xl);
|
|
35
|
+
}
|
|
53
36
|
@media only screen and (min-width: 36rem) {
|
|
54
37
|
.pf-v6-c-about-modal-box {
|
|
55
38
|
--pf-v6-c-about-modal-box__close--PaddingBlockEnd: var(--pf-v6-c-about-modal-box__close--sm--PaddingBlockEnd);
|
|
@@ -60,17 +43,42 @@
|
|
|
60
43
|
--pf-v6-c-about-modal-box__close--PaddingInlineEnd: var(--pf-v6-c-about-modal-box__close--lg--PaddingInlineEnd);
|
|
61
44
|
}
|
|
62
45
|
}
|
|
46
|
+
.pf-v6-c-about-modal-box {
|
|
47
|
+
--pf-v6-c-about-modal-box__close--c-button--FontSize: var(--pf-t--global--icon--size--lg);
|
|
48
|
+
--pf-v6-c-about-modal-box__brand-image--Height: 2.3125rem;
|
|
49
|
+
--pf-v6-c-about-modal-box__header--PaddingInlineEnd: var(--pf-t--global--spacer--xl);
|
|
50
|
+
--pf-v6-c-about-modal-box__header--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
|
|
51
|
+
--pf-v6-c-about-modal-box__header--PaddingInlineStart: var(--pf-t--global--spacer--xl);
|
|
52
|
+
--pf-v6-c-about-modal-box__header--sm--PaddingInlineEnd: var(--pf-t--global--spacer--3xl);
|
|
53
|
+
--pf-v6-c-about-modal-box__header--sm--PaddingInlineStart: var(--pf-t--global--spacer--3xl);
|
|
54
|
+
}
|
|
63
55
|
@media only screen and (min-width: 36rem) {
|
|
64
56
|
.pf-v6-c-about-modal-box {
|
|
65
57
|
--pf-v6-c-about-modal-box__header--PaddingInlineEnd: var(--pf-v6-c-about-modal-box__header--sm--PaddingInlineEnd);
|
|
66
58
|
--pf-v6-c-about-modal-box__header--PaddingInlineStart: var(--pf-v6-c-about-modal-box__header--sm--PaddingInlineStart);
|
|
67
59
|
}
|
|
68
60
|
}
|
|
61
|
+
.pf-v6-c-about-modal-box {
|
|
62
|
+
--pf-v6-c-about-modal-box__strapline--PaddingBlockStart: var(--pf-t--global--spacer--xl);
|
|
63
|
+
--pf-v6-c-about-modal-box__strapline--FontSize: var(--pf-t--global--font--size--body--sm);
|
|
64
|
+
--pf-v6-c-about-modal-box__strapline--Color: var(--pf-t--global--text--color--subtle);
|
|
65
|
+
--pf-v6-c-about-modal-box__strapline--sm--PaddingBlockStart: var(--pf-t--global--spacer--2xl);
|
|
66
|
+
}
|
|
69
67
|
@media only screen and (min-width: 36rem) {
|
|
70
68
|
.pf-v6-c-about-modal-box {
|
|
71
69
|
--pf-v6-c-about-modal-box__strapline--PaddingBlockStart: var(--pf-v6-c-about-modal-box__strapline--sm--PaddingBlockStart);
|
|
72
70
|
}
|
|
73
71
|
}
|
|
72
|
+
.pf-v6-c-about-modal-box {
|
|
73
|
+
--pf-v6-c-about-modal-box__content--MarginBlockStart: var(--pf-t--global--spacer--xl);
|
|
74
|
+
--pf-v6-c-about-modal-box__content--MarginInlineEnd: var(--pf-t--global--spacer--xl);
|
|
75
|
+
--pf-v6-c-about-modal-box__content--MarginBlockEnd: var(--pf-t--global--spacer--xl);
|
|
76
|
+
--pf-v6-c-about-modal-box__content--MarginInlineStart: var(--pf-t--global--spacer--xl);
|
|
77
|
+
--pf-v6-c-about-modal-box__content--sm--MarginBlockStart: var(--pf-t--global--spacer--2xl);
|
|
78
|
+
--pf-v6-c-about-modal-box__content--sm--MarginInlineEnd: var(--pf-t--global--spacer--3xl);
|
|
79
|
+
--pf-v6-c-about-modal-box__content--sm--MarginBlockEnd: var(--pf-t--global--spacer--2xl);
|
|
80
|
+
--pf-v6-c-about-modal-box__content--sm--MarginInlineStart: var(--pf-t--global--spacer--3xl);
|
|
81
|
+
}
|
|
74
82
|
@media only screen and (min-width: 36rem) {
|
|
75
83
|
.pf-v6-c-about-modal-box {
|
|
76
84
|
--pf-v6-c-about-modal-box__content--MarginBlockStart: var(--pf-v6-c-about-modal-box__content--sm--MarginBlockStart);
|
|
@@ -94,7 +102,6 @@
|
|
|
94
102
|
background-repeat: no-repeat;
|
|
95
103
|
background-position: var(--pf-v6-c-about-modal-box--BackgroundPosition);
|
|
96
104
|
background-size: var(--pf-v6-c-about-modal-box--BackgroundSize);
|
|
97
|
-
--pf-v6-c-about-modal-box--BackgroundPosition: bottom right;
|
|
98
105
|
}
|
|
99
106
|
@media only screen and (min-width: 36rem) {
|
|
100
107
|
.pf-v6-c-about-modal-box {
|
|
@@ -110,6 +117,9 @@
|
|
|
110
117
|
grid-template-columns: var(--pf-v6-c-about-modal-box--lg--GridTemplateColumns);
|
|
111
118
|
}
|
|
112
119
|
}
|
|
120
|
+
.pf-v6-c-about-modal-box {
|
|
121
|
+
--pf-v6-c-about-modal-box--BackgroundPosition: bottom right;
|
|
122
|
+
}
|
|
113
123
|
:where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-about-modal-box {
|
|
114
124
|
--pf-v6-c-about-modal-box--BackgroundPosition: bottom left;
|
|
115
125
|
}
|
|
@@ -58,6 +58,18 @@
|
|
|
58
58
|
--pf-v6-c-accordion__item--m-expanded__expandable-content--Opacity: 1;
|
|
59
59
|
--pf-v6-c-accordion__expandable-content--TranslateY: 0;
|
|
60
60
|
--pf-v6-c-accordion__item--m-expanded__expandable-content--TranslateY: 0;
|
|
61
|
+
}
|
|
62
|
+
@media screen and (prefers-reduced-motion: no-preference) {
|
|
63
|
+
.pf-v6-c-accordion {
|
|
64
|
+
--pf-v6-c-accordion__item--before--TransitionDuration--expand--slide: var(--pf-t--global--motion--duration--fade--default);
|
|
65
|
+
--pf-v6-c-accordion__item--before--TransitionDuration--collapse--slide: var(--pf-t--global--motion--duration--fade--short);
|
|
66
|
+
--pf-v6-c-accordion__item--before--TranslateY: -.5rem;
|
|
67
|
+
--pf-v6-c-accordion__expandable-content--TransitionDuration--expand--slide: var(--pf-t--global--motion--duration--fade--default);
|
|
68
|
+
--pf-v6-c-accordion__expandable-content--TransitionDuration--collapse--slide: var(--pf-t--global--motion--duration--fade--short);
|
|
69
|
+
--pf-v6-c-accordion__expandable-content--TranslateY: -.5rem;
|
|
70
|
+
}
|
|
71
|
+
}
|
|
72
|
+
.pf-v6-c-accordion {
|
|
61
73
|
--pf-v6-c-accordion__expandable-content-body--PaddingBlockStart: var(--pf-t--global--spacer--sm);
|
|
62
74
|
--pf-v6-c-accordion__expandable-content-body--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
|
|
63
75
|
--pf-v6-c-accordion__expandable-content-body--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
|
|
@@ -83,16 +95,6 @@
|
|
|
83
95
|
--pf-v6-c-accordion__expandable-content--BorderColor: var(--pf-t--global--border--color--high-contrast);
|
|
84
96
|
--pf-v6-c-accordion__item--m-expanded__expandable-content--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
|
|
85
97
|
}
|
|
86
|
-
@media screen and (prefers-reduced-motion: no-preference) {
|
|
87
|
-
.pf-v6-c-accordion {
|
|
88
|
-
--pf-v6-c-accordion__item--before--TransitionDuration--expand--slide: var(--pf-t--global--motion--duration--fade--default);
|
|
89
|
-
--pf-v6-c-accordion__item--before--TransitionDuration--collapse--slide: var(--pf-t--global--motion--duration--fade--short);
|
|
90
|
-
--pf-v6-c-accordion__item--before--TranslateY: -.5rem;
|
|
91
|
-
--pf-v6-c-accordion__expandable-content--TransitionDuration--expand--slide: var(--pf-t--global--motion--duration--fade--default);
|
|
92
|
-
--pf-v6-c-accordion__expandable-content--TransitionDuration--collapse--slide: var(--pf-t--global--motion--duration--fade--short);
|
|
93
|
-
--pf-v6-c-accordion__expandable-content--TranslateY: -.5rem;
|
|
94
|
-
}
|
|
95
|
-
}
|
|
96
98
|
|
|
97
99
|
.pf-v6-c-accordion {
|
|
98
100
|
display: flex;
|
|
@@ -203,13 +205,14 @@
|
|
|
203
205
|
color: var(--pf-v6-c-accordion__toggle-text--Color);
|
|
204
206
|
}
|
|
205
207
|
|
|
208
|
+
:where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-accordion__toggle-icon {
|
|
209
|
+
scale: -1 1;
|
|
210
|
+
}
|
|
211
|
+
|
|
206
212
|
.pf-v6-c-accordion__toggle-icon {
|
|
207
213
|
transition: var(--pf-v6-c-accordion__toggle-icon--Transition);
|
|
208
214
|
transform: rotate(var(--pf-v6-c-accordion__toggle-icon--Rotate));
|
|
209
215
|
}
|
|
210
|
-
:where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-accordion__toggle-icon {
|
|
211
|
-
scale: -1 1;
|
|
212
|
-
}
|
|
213
216
|
|
|
214
217
|
.pf-v6-c-accordion__expandable-content:where([hidden]) {
|
|
215
218
|
display: revert;
|
|
@@ -140,14 +140,15 @@
|
|
|
140
140
|
margin-inline-end: var(--pf-v6-c-alert__toggle--MarginInlineEnd);
|
|
141
141
|
}
|
|
142
142
|
|
|
143
|
+
:where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-alert__toggle-icon {
|
|
144
|
+
scale: -1 1;
|
|
145
|
+
}
|
|
146
|
+
|
|
143
147
|
.pf-v6-c-alert__toggle-icon {
|
|
144
148
|
display: inline-block;
|
|
145
149
|
transition: transform var(--pf-v6-c-alert__toggle-icon--TransitionDuration) var(--pf-v6-c-alert__toggle-icon--TransitionTimingFunction);
|
|
146
150
|
transform: rotate(var(--pf-v6-c-alert__toggle-icon--Rotate));
|
|
147
151
|
}
|
|
148
|
-
:where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-alert__toggle-icon {
|
|
149
|
-
scale: -1 1;
|
|
150
|
-
}
|
|
151
152
|
|
|
152
153
|
.pf-v6-c-alert__icon {
|
|
153
154
|
grid-area: icon;
|
|
@@ -164,9 +165,9 @@
|
|
|
164
165
|
}
|
|
165
166
|
.pf-v6-c-alert__title.pf-m-truncate {
|
|
166
167
|
display: -webkit-box;
|
|
168
|
+
overflow: hidden;
|
|
167
169
|
-webkit-box-orient: vertical;
|
|
168
170
|
-webkit-line-clamp: var(--pf-v6-c-alert__title--max-lines);
|
|
169
|
-
overflow: hidden;
|
|
170
171
|
}
|
|
171
172
|
|
|
172
173
|
.pf-v6-c-alert__description {
|
|
@@ -28,7 +28,6 @@
|
|
|
28
28
|
}
|
|
29
29
|
.pf-v6-c-avatar.pf-m-sm {
|
|
30
30
|
--pf-v6-c-avatar--Width: var(--pf-v6-c-avatar--m-sm--Width);
|
|
31
|
-
--pf-v6-c-avatar--Height: var(--pf-v6-c-avatar--m-sm--Height);
|
|
32
31
|
}
|
|
33
32
|
@media (min-width: 36rem) {
|
|
34
33
|
.pf-v6-c-avatar.pf-m-sm {
|
|
@@ -55,6 +54,9 @@
|
|
|
55
54
|
--pf-v6-c-avatar--Width: var(--pf-v6-c-avatar--m-sm--Width-on-2xl, var(--pf-v6-c-avatar--m-sm--Width-on-xl, var(--pf-v6-c-avatar--m-sm--Width-on-lg, var(--pf-v6-c-avatar--m-sm--Width-on-md, var(--pf-v6-c-avatar--m-sm--Width-on-sm, var(--pf-v6-c-avatar--m-sm--Width))))));
|
|
56
55
|
}
|
|
57
56
|
}
|
|
57
|
+
.pf-v6-c-avatar.pf-m-sm {
|
|
58
|
+
--pf-v6-c-avatar--Height: var(--pf-v6-c-avatar--m-sm--Height);
|
|
59
|
+
}
|
|
58
60
|
@media (min-width: 36rem) {
|
|
59
61
|
.pf-v6-c-avatar.pf-m-sm {
|
|
60
62
|
--pf-v6-c-avatar--Height: var(--pf-v6-c-avatar--m-sm--Height-on-sm, var(--pf-v6-c-avatar--m-sm--Height));
|
|
@@ -82,7 +84,6 @@
|
|
|
82
84
|
}
|
|
83
85
|
.pf-v6-c-avatar.pf-m-md {
|
|
84
86
|
--pf-v6-c-avatar--Width: var(--pf-v6-c-avatar--m-md--Width);
|
|
85
|
-
--pf-v6-c-avatar--Height: var(--pf-v6-c-avatar--m-md--Height);
|
|
86
87
|
}
|
|
87
88
|
@media (min-width: 36rem) {
|
|
88
89
|
.pf-v6-c-avatar.pf-m-md {
|
|
@@ -109,6 +110,9 @@
|
|
|
109
110
|
--pf-v6-c-avatar--Width: var(--pf-v6-c-avatar--m-md--Width-on-2xl, var(--pf-v6-c-avatar--m-md--Width-on-xl, var(--pf-v6-c-avatar--m-md--Width-on-lg, var(--pf-v6-c-avatar--m-md--Width-on-md, var(--pf-v6-c-avatar--m-md--Width-on-sm, var(--pf-v6-c-avatar--m-md--Width))))));
|
|
110
111
|
}
|
|
111
112
|
}
|
|
113
|
+
.pf-v6-c-avatar.pf-m-md {
|
|
114
|
+
--pf-v6-c-avatar--Height: var(--pf-v6-c-avatar--m-md--Height);
|
|
115
|
+
}
|
|
112
116
|
@media (min-width: 36rem) {
|
|
113
117
|
.pf-v6-c-avatar.pf-m-md {
|
|
114
118
|
--pf-v6-c-avatar--Height: var(--pf-v6-c-avatar--m-md--Height-on-sm, var(--pf-v6-c-avatar--m-md--Height));
|
|
@@ -136,7 +140,6 @@
|
|
|
136
140
|
}
|
|
137
141
|
.pf-v6-c-avatar.pf-m-lg {
|
|
138
142
|
--pf-v6-c-avatar--Width: var(--pf-v6-c-avatar--m-lg--Width);
|
|
139
|
-
--pf-v6-c-avatar--Height: var(--pf-v6-c-avatar--m-lg--Height);
|
|
140
143
|
}
|
|
141
144
|
@media (min-width: 36rem) {
|
|
142
145
|
.pf-v6-c-avatar.pf-m-lg {
|
|
@@ -163,6 +166,9 @@
|
|
|
163
166
|
--pf-v6-c-avatar--Width: var(--pf-v6-c-avatar--m-lg--Width-on-2xl, var(--pf-v6-c-avatar--m-lg--Width-on-xl, var(--pf-v6-c-avatar--m-lg--Width-on-lg, var(--pf-v6-c-avatar--m-lg--Width-on-md, var(--pf-v6-c-avatar--m-lg--Width-on-sm, var(--pf-v6-c-avatar--m-lg--Width))))));
|
|
164
167
|
}
|
|
165
168
|
}
|
|
169
|
+
.pf-v6-c-avatar.pf-m-lg {
|
|
170
|
+
--pf-v6-c-avatar--Height: var(--pf-v6-c-avatar--m-lg--Height);
|
|
171
|
+
}
|
|
166
172
|
@media (min-width: 36rem) {
|
|
167
173
|
.pf-v6-c-avatar.pf-m-lg {
|
|
168
174
|
--pf-v6-c-avatar--Height: var(--pf-v6-c-avatar--m-lg--Height-on-sm, var(--pf-v6-c-avatar--m-lg--Height));
|
|
@@ -190,7 +196,6 @@
|
|
|
190
196
|
}
|
|
191
197
|
.pf-v6-c-avatar.pf-m-xl {
|
|
192
198
|
--pf-v6-c-avatar--Width: var(--pf-v6-c-avatar--m-xl--Width);
|
|
193
|
-
--pf-v6-c-avatar--Height: var(--pf-v6-c-avatar--m-xl--Height);
|
|
194
199
|
}
|
|
195
200
|
@media (min-width: 36rem) {
|
|
196
201
|
.pf-v6-c-avatar.pf-m-xl {
|
|
@@ -217,6 +222,9 @@
|
|
|
217
222
|
--pf-v6-c-avatar--Width: var(--pf-v6-c-avatar--m-xl--Width-on-2xl, var(--pf-v6-c-avatar--m-xl--Width-on-xl, var(--pf-v6-c-avatar--m-xl--Width-on-lg, var(--pf-v6-c-avatar--m-xl--Width-on-md, var(--pf-v6-c-avatar--m-xl--Width-on-sm, var(--pf-v6-c-avatar--m-xl--Width))))));
|
|
218
223
|
}
|
|
219
224
|
}
|
|
225
|
+
.pf-v6-c-avatar.pf-m-xl {
|
|
226
|
+
--pf-v6-c-avatar--Height: var(--pf-v6-c-avatar--m-xl--Height);
|
|
227
|
+
}
|
|
220
228
|
@media (min-width: 36rem) {
|
|
221
229
|
.pf-v6-c-avatar.pf-m-xl {
|
|
222
230
|
--pf-v6-c-avatar--Height: var(--pf-v6-c-avatar--m-xl--Height-on-sm, var(--pf-v6-c-avatar--m-xl--Height));
|
|
@@ -9,6 +9,12 @@
|
|
|
9
9
|
|
|
10
10
|
.pf-v6-c-background-image {
|
|
11
11
|
--pf-v6-c-background-image--BackgroundPosition: bottom right;
|
|
12
|
+
}
|
|
13
|
+
:where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-background-image {
|
|
14
|
+
--pf-v6-c-background-image--BackgroundPosition: bottom left;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
.pf-v6-c-background-image {
|
|
12
18
|
position: fixed;
|
|
13
19
|
inset-block-start: 0;
|
|
14
20
|
inset-inline-start: 0;
|
|
@@ -20,7 +26,4 @@
|
|
|
20
26
|
background-repeat: no-repeat;
|
|
21
27
|
background-position: var(--pf-v6-c-background-image--BackgroundPosition);
|
|
22
28
|
background-size: var(--pf-v6-c-background-image--BackgroundSize);
|
|
23
|
-
}
|
|
24
|
-
:where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-background-image {
|
|
25
|
-
--pf-v6-c-background-image--BackgroundPosition: bottom left;
|
|
26
29
|
}
|
|
@@ -10,6 +10,14 @@
|
|
|
10
10
|
--pf-v6-c-banner--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
|
|
11
11
|
--pf-v6-c-banner--BorderColor: var(--pf-t--global--border--color--high-contrast);
|
|
12
12
|
--pf-v6-c-banner--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
|
|
13
|
+
}
|
|
14
|
+
@media (min-width: 48rem) {
|
|
15
|
+
.pf-v6-c-banner {
|
|
16
|
+
--pf-v6-c-banner--PaddingInlineEnd: var(--pf-v6-c-banner--md--PaddingInlineEnd);
|
|
17
|
+
--pf-v6-c-banner--PaddingInlineStart: var(--pf-v6-c-banner--md--PaddingInlineStart);
|
|
18
|
+
}
|
|
19
|
+
}
|
|
20
|
+
.pf-v6-c-banner {
|
|
13
21
|
--pf-v6-c-banner--link--Color: var(--pf-v6-c-banner--Color);
|
|
14
22
|
--pf-v6-c-banner--link--TextDecoration: underline;
|
|
15
23
|
--pf-v6-c-banner--link--hover--Color: var(--pf-v6-c-banner--Color);
|
|
@@ -43,12 +51,6 @@
|
|
|
43
51
|
--pf-v6-c-banner--m-purple--BackgroundColor: var(--pf-t--global--color--nonstatus--purple--default);
|
|
44
52
|
--pf-v6-c-banner--m-purple--Color: var(--pf-t--global--text--color--nonstatus--on-purple--default);
|
|
45
53
|
}
|
|
46
|
-
@media (min-width: 48rem) {
|
|
47
|
-
.pf-v6-c-banner {
|
|
48
|
-
--pf-v6-c-banner--PaddingInlineEnd: var(--pf-v6-c-banner--md--PaddingInlineEnd);
|
|
49
|
-
--pf-v6-c-banner--PaddingInlineStart: var(--pf-v6-c-banner--md--PaddingInlineStart);
|
|
50
|
-
}
|
|
51
|
-
}
|
|
52
54
|
|
|
53
55
|
.pf-v6-c-banner {
|
|
54
56
|
flex-shrink: 0;
|
|
@@ -7,7 +7,6 @@
|
|
|
7
7
|
width: var(--pf-v6-c-brand--Width--base);
|
|
8
8
|
height: var(--pf-v6-c-brand--Height--base);
|
|
9
9
|
--pf-v6-c-brand--Width--base: var(--pf-v6-c-brand--Width);
|
|
10
|
-
--pf-v6-c-brand--Height--base: var(--pf-v6-c-brand--Height);
|
|
11
10
|
}
|
|
12
11
|
@media (min-width: 36rem) {
|
|
13
12
|
.pf-v6-c-brand {
|
|
@@ -34,6 +33,9 @@
|
|
|
34
33
|
--pf-v6-c-brand--Width--base: var(--pf-v6-c-brand--Width-on-2xl, var(--pf-v6-c-brand--Width-on-xl, var(--pf-v6-c-brand--Width-on-lg, var(--pf-v6-c-brand--Width-on-md, var(--pf-v6-c-brand--Width-on-sm, var(--pf-v6-c-brand--Width))))));
|
|
35
34
|
}
|
|
36
35
|
}
|
|
36
|
+
.pf-v6-c-brand {
|
|
37
|
+
--pf-v6-c-brand--Height--base: var(--pf-v6-c-brand--Height);
|
|
38
|
+
}
|
|
37
39
|
@media (min-width: 36rem) {
|
|
38
40
|
.pf-v6-c-brand {
|
|
39
41
|
--pf-v6-c-brand--Height--base: var(--pf-v6-c-brand--Height-on-sm, var(--pf-v6-c-brand--Height));
|
|
@@ -48,15 +48,16 @@
|
|
|
48
48
|
margin-inline-end: var(--pf-v6-c-breadcrumb__item--MarginInlineEnd);
|
|
49
49
|
}
|
|
50
50
|
|
|
51
|
+
:where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-breadcrumb__item-divider {
|
|
52
|
+
scale: -1 1;
|
|
53
|
+
}
|
|
54
|
+
|
|
51
55
|
.pf-v6-c-breadcrumb__item-divider {
|
|
52
56
|
margin-inline-end: var(--pf-v6-c-breadcrumb__item-divider--MarginInlineEnd);
|
|
53
57
|
font-size: var(--pf-v6-c-breadcrumb__item-divider--FontSize);
|
|
54
58
|
line-height: 1;
|
|
55
59
|
color: var(--pf-v6-c-breadcrumb__item-divider--Color);
|
|
56
60
|
}
|
|
57
|
-
:where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-breadcrumb__item-divider {
|
|
58
|
-
scale: -1 1;
|
|
59
|
-
}
|
|
60
61
|
|
|
61
62
|
.pf-v6-c-breadcrumb__link {
|
|
62
63
|
padding-inline-start: var(--pf-v6-c-breadcrumb__link--PaddingInlineStart);
|
|
@@ -449,6 +449,12 @@
|
|
|
449
449
|
--pf-v6-c-button--m-small--PaddingInlineEnd: var(--pf-v6-c-button--m-link--m-small--PaddingInlineEnd);
|
|
450
450
|
--pf-v6-c-button--m-small--PaddingInlineStart: var(--pf-v6-c-button--m-link--m-small--PaddingInlineStart);
|
|
451
451
|
}
|
|
452
|
+
span.pf-v6-c-button.pf-m-link.pf-m-inline {
|
|
453
|
+
--pf-v6-c-button--m-link--m-inline--Display: var(--pf-v6-c-button--span--m-link--m-inline--Display);
|
|
454
|
+
--pf-v6-c-button__icon--m-start--MarginInlineEnd: var(--pf-v6-c-button--span--m-link--m-inline__icon--m-start--MarginInlineEnd);
|
|
455
|
+
--pf-v6-c-button__icon--m-end--MarginInlineStart: var(--pf-v6-c-button--span--m-link--m-inline__icon--m-end--MarginInlineStart);
|
|
456
|
+
}
|
|
457
|
+
|
|
452
458
|
.pf-v6-c-button.pf-m-link.pf-m-inline {
|
|
453
459
|
--pf-v6-c-button--Display: var(--pf-v6-c-button--m-link--m-inline--Display);
|
|
454
460
|
--pf-v6-c-button--JustifyContent: var(--pf-v6-c-button--m-link--m-inline--JustifyContent);
|
|
@@ -488,12 +494,6 @@
|
|
|
488
494
|
background: transparent;
|
|
489
495
|
outline-offset: 0.125rem;
|
|
490
496
|
}
|
|
491
|
-
span.pf-v6-c-button.pf-m-link.pf-m-inline {
|
|
492
|
-
--pf-v6-c-button--m-link--m-inline--Display: var(--pf-v6-c-button--span--m-link--m-inline--Display);
|
|
493
|
-
--pf-v6-c-button__icon--m-start--MarginInlineEnd: var(--pf-v6-c-button--span--m-link--m-inline__icon--m-start--MarginInlineEnd);
|
|
494
|
-
--pf-v6-c-button__icon--m-end--MarginInlineStart: var(--pf-v6-c-button--span--m-link--m-inline__icon--m-end--MarginInlineStart);
|
|
495
|
-
}
|
|
496
|
-
|
|
497
497
|
.pf-v6-c-button.pf-m-link.pf-m-inline:hover, .pf-v6-c-button.pf-m-link.pf-m-inline:focus {
|
|
498
498
|
--pf-v6-c-button--m-link--m-inline--TextUnderlineOffset: var(--pf-v6-c-button--m-link--m-inline--hover--TextUnderlineOffset);
|
|
499
499
|
}
|
|
@@ -87,13 +87,14 @@
|
|
|
87
87
|
margin-block-end: var(--pf-v6-c-calendar-month__header--MarginBlockEnd);
|
|
88
88
|
}
|
|
89
89
|
|
|
90
|
+
:where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-calendar-month__header-nav-control {
|
|
91
|
+
scale: -1 1;
|
|
92
|
+
}
|
|
93
|
+
|
|
90
94
|
.pf-v6-c-calendar-month__header-nav-control {
|
|
91
95
|
margin-inline-start: var(--pf-v6-c-calendar-month__header-nav-control--MarginInlineStart);
|
|
92
96
|
margin-inline-end: var(--pf-v6-c-calendar-month__header-nav-control--MarginInlineEnd);
|
|
93
97
|
}
|
|
94
|
-
:where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-calendar-month__header-nav-control {
|
|
95
|
-
scale: -1 1;
|
|
96
|
-
}
|
|
97
98
|
|
|
98
99
|
.pf-v6-c-calendar-month__header-month {
|
|
99
100
|
flex-grow: 1;
|
|
@@ -207,12 +207,12 @@
|
|
|
207
207
|
flex-wrap: wrap;
|
|
208
208
|
row-gap: var(--pf-v6-c-card__header--m-wrap--RowGap);
|
|
209
209
|
}
|
|
210
|
-
.pf-v6-c-card__header.pf-m-wrap .pf-v6-c-card__actions {
|
|
211
|
-
margin-inline-start: 0;
|
|
212
|
-
}
|
|
213
210
|
.pf-v6-c-card__header.pf-m-wrap .pf-v6-c-card__actions + * {
|
|
214
211
|
margin-inline-end: auto;
|
|
215
212
|
}
|
|
213
|
+
.pf-v6-c-card__header.pf-m-wrap .pf-v6-c-card__actions {
|
|
214
|
+
margin-inline-start: 0;
|
|
215
|
+
}
|
|
216
216
|
|
|
217
217
|
.pf-v6-c-card__header-main {
|
|
218
218
|
flex-grow: 1;
|
|
@@ -226,15 +226,16 @@
|
|
|
226
226
|
margin-inline-end: var(--pf-v6-c-card__header-toggle--MarginInlineEnd);
|
|
227
227
|
}
|
|
228
228
|
|
|
229
|
+
:where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-card__header-toggle-icon {
|
|
230
|
+
scale: -1 1;
|
|
231
|
+
}
|
|
232
|
+
|
|
229
233
|
.pf-v6-c-card__header-toggle-icon {
|
|
230
234
|
display: inline-block;
|
|
231
235
|
transition-timing-function: var(--pf-v6-c-card__header-toggle-icon--TransitionTimingFunction);
|
|
232
236
|
transition-duration: var(--pf-v6-c-card__header-toggle-icon--TransitionDuration);
|
|
233
237
|
transition-property: transform;
|
|
234
238
|
}
|
|
235
|
-
:where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-card__header-toggle-icon {
|
|
236
|
-
scale: -1 1;
|
|
237
|
-
}
|
|
238
239
|
|
|
239
240
|
.pf-v6-c-card__title-text {
|
|
240
241
|
font-family: var(--pf-v6-c-card__title-text--FontFamily);
|
|
@@ -50,13 +50,14 @@
|
|
|
50
50
|
gap: var(--pf-v6-c-clipboard-copy__group--Gap);
|
|
51
51
|
}
|
|
52
52
|
|
|
53
|
-
.pf-v6-c-clipboard-copy__toggle-icon {
|
|
54
|
-
transition: var(--pf-v6-c-clipboard-copy__toggle-icon--Transition);
|
|
55
|
-
}
|
|
56
53
|
:where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-clipboard-copy__toggle-icon {
|
|
57
54
|
scale: -1 1;
|
|
58
55
|
}
|
|
59
56
|
|
|
57
|
+
.pf-v6-c-clipboard-copy__toggle-icon {
|
|
58
|
+
transition: var(--pf-v6-c-clipboard-copy__toggle-icon--Transition);
|
|
59
|
+
}
|
|
60
|
+
|
|
60
61
|
.pf-v6-c-clipboard-copy__expandable-content {
|
|
61
62
|
padding-block-start: var(--pf-v6-c-clipboard-copy__expandable-content--PaddingBlockStart);
|
|
62
63
|
padding-block-end: var(--pf-v6-c-clipboard-copy__expandable-content--PaddingBlockEnd);
|
|
@@ -183,23 +183,27 @@
|
|
|
183
183
|
}
|
|
184
184
|
.pf-v6-c-compass__sidebar.pf-m-start {
|
|
185
185
|
translate: calc(var(--pf-v6-c-compass--section--slide--length--sidebar) * -1);
|
|
186
|
-
grid-area: sidebar-start;
|
|
187
186
|
}
|
|
188
187
|
:where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-compass__sidebar.pf-m-start {
|
|
189
188
|
translate: var(--pf-v6-c-compass--section--slide--length--sidebar);
|
|
190
189
|
}
|
|
191
190
|
|
|
191
|
+
.pf-v6-c-compass__sidebar.pf-m-start {
|
|
192
|
+
grid-area: sidebar-start;
|
|
193
|
+
}
|
|
192
194
|
.pf-v6-c-compass__sidebar.pf-m-start.pf-m-expanded {
|
|
193
195
|
margin-inline-end: var(--pf-v6-c-compass--Gap);
|
|
194
196
|
}
|
|
195
197
|
.pf-v6-c-compass__sidebar.pf-m-end {
|
|
196
198
|
translate: var(--pf-v6-c-compass--section--slide--length--sidebar);
|
|
197
|
-
grid-area: sidebar-end;
|
|
198
199
|
}
|
|
199
200
|
:where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-compass__sidebar.pf-m-end {
|
|
200
201
|
translate: calc(var(--pf-v6-c-compass--section--slide--length--sidebar) * -1);
|
|
201
202
|
}
|
|
202
203
|
|
|
204
|
+
.pf-v6-c-compass__sidebar.pf-m-end {
|
|
205
|
+
grid-area: sidebar-end;
|
|
206
|
+
}
|
|
203
207
|
.pf-v6-c-compass__sidebar.pf-m-end.pf-m-expanded {
|
|
204
208
|
margin-inline-start: var(--pf-v6-c-compass--Gap);
|
|
205
209
|
}
|
|
@@ -412,6 +412,14 @@
|
|
|
412
412
|
--pf-v6-c-data-list--sm--BorderBlockStartWidth: var(--pf-t--global--border--width--divider--default);
|
|
413
413
|
--pf-v6-c-data-list--sm--BorderBlockStartColor: var(--pf-t--global--border--color--default);
|
|
414
414
|
--pf-v6-c-data-list--MarginInlineStart: var(--pf-t--global--spacer--md);
|
|
415
|
+
}
|
|
416
|
+
@media screen and (min-width: 36rem) {
|
|
417
|
+
.pf-v6-c-data-list {
|
|
418
|
+
--pf-v6-c-data-list--BorderBlockStartColor: var(--pf-v6-c-data-list--sm--BorderBlockStartColor);
|
|
419
|
+
--pf-v6-c-data-list--BorderBlockStartWidth: var(--pf-v6-c-data-list--sm--BorderBlockStartWidth);
|
|
420
|
+
}
|
|
421
|
+
}
|
|
422
|
+
.pf-v6-c-data-list {
|
|
415
423
|
--pf-v6-c-data-list__item--BackgroundColor: var(--pf-t--global--background--color--primary--default);
|
|
416
424
|
--pf-v6-c-data-list--pf-m-plain__item--BackgroundColor: transparent;
|
|
417
425
|
--pf-v6-c-data-list__item--hover--BackgroundColor: var(--pf-t--global--background--color--primary--hover);
|
|
@@ -421,6 +429,14 @@
|
|
|
421
429
|
--pf-v6-c-data-list__item--BorderBlockEndWidth: var(--pf-t--global--border--width--strong);
|
|
422
430
|
--pf-v6-c-data-list__item--sm--BorderBlockEndWidth: var(--pf-t--global--border--width--divider--default);
|
|
423
431
|
--pf-v6-c-data-list__item--sm--BorderBlockEndColor: var(--pf-t--global--border--color--default);
|
|
432
|
+
}
|
|
433
|
+
@media screen and (min-width: 36rem) {
|
|
434
|
+
.pf-v6-c-data-list {
|
|
435
|
+
--pf-v6-c-data-list__item--BorderBlockEndWidth: var(--pf-v6-c-data-list__item--sm--BorderBlockEndWidth);
|
|
436
|
+
--pf-v6-c-data-list__item--BorderBlockEndColor: var(--pf-v6-c-data-list__item--sm--BorderBlockEndColor);
|
|
437
|
+
}
|
|
438
|
+
}
|
|
439
|
+
.pf-v6-c-data-list {
|
|
424
440
|
--pf-v6-c-data-list__item-row--PaddingInlineEnd: var(--pf-t--global--spacer--md);
|
|
425
441
|
--pf-v6-c-data-list__item-row--PaddingInlineStart: var(--pf-t--global--spacer--md);
|
|
426
442
|
--pf-v6-c-data-list__item-row--xl--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
|
|
@@ -516,18 +532,6 @@
|
|
|
516
532
|
--pf-v6-c-data-list--m-compact__item-draggable-button--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
|
|
517
533
|
--pf-v6-c-data-list--m-compact__cell--m-icon--cell--PaddingBlockStart: var(--pf-t--global--spacer--sm);
|
|
518
534
|
}
|
|
519
|
-
@media screen and (min-width: 36rem) {
|
|
520
|
-
.pf-v6-c-data-list {
|
|
521
|
-
--pf-v6-c-data-list--BorderBlockStartColor: var(--pf-v6-c-data-list--sm--BorderBlockStartColor);
|
|
522
|
-
--pf-v6-c-data-list--BorderBlockStartWidth: var(--pf-v6-c-data-list--sm--BorderBlockStartWidth);
|
|
523
|
-
}
|
|
524
|
-
}
|
|
525
|
-
@media screen and (min-width: 36rem) {
|
|
526
|
-
.pf-v6-c-data-list {
|
|
527
|
-
--pf-v6-c-data-list__item--BorderBlockEndWidth: var(--pf-v6-c-data-list__item--sm--BorderBlockEndWidth);
|
|
528
|
-
--pf-v6-c-data-list__item--BorderBlockEndColor: var(--pf-v6-c-data-list__item--sm--BorderBlockEndColor);
|
|
529
|
-
}
|
|
530
|
-
}
|
|
531
535
|
|
|
532
536
|
.pf-v6-c-data-list {
|
|
533
537
|
font-size: var(--pf-v6-c-data-list--FontSize);
|
|
@@ -690,12 +694,6 @@
|
|
|
690
694
|
--pf-v6-hidden-visible--hidden--Display: none;
|
|
691
695
|
--pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
|
|
692
696
|
display: var(--pf-v6-hidden-visible--Display);
|
|
693
|
-
gap: var(--pf-v6-c-data-list__item-action--Gap);
|
|
694
|
-
align-content: flex-start;
|
|
695
|
-
align-items: flex-start;
|
|
696
|
-
padding-block-start: calc(var(--pf-v6-c-data-list__item-action--PaddingBlockStart) - var(--pf-v6-c-data-list__item-action--PaddingBlockStart--offset));
|
|
697
|
-
padding-block-end: calc(var(--pf-v6-c-data-list__item-action--PaddingBlockEnd) - var(--pf-v6-c-data-list__item-action--PaddingBlockEnd--offset));
|
|
698
|
-
margin-inline-start: var(--pf-v6-c-data-list__item-action--MarginInlineStart);
|
|
699
697
|
}
|
|
700
698
|
.pf-v6-c-data-list__item-action.pf-m-hidden {
|
|
701
699
|
--pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
|
|
@@ -740,6 +738,14 @@
|
|
|
740
738
|
--pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
|
|
741
739
|
}
|
|
742
740
|
}
|
|
741
|
+
.pf-v6-c-data-list__item-action {
|
|
742
|
+
gap: var(--pf-v6-c-data-list__item-action--Gap);
|
|
743
|
+
align-content: flex-start;
|
|
744
|
+
align-items: flex-start;
|
|
745
|
+
padding-block-start: calc(var(--pf-v6-c-data-list__item-action--PaddingBlockStart) - var(--pf-v6-c-data-list__item-action--PaddingBlockStart--offset));
|
|
746
|
+
padding-block-end: calc(var(--pf-v6-c-data-list__item-action--PaddingBlockEnd) - var(--pf-v6-c-data-list__item-action--PaddingBlockEnd--offset));
|
|
747
|
+
margin-inline-start: var(--pf-v6-c-data-list__item-action--MarginInlineStart);
|
|
748
|
+
}
|
|
743
749
|
|
|
744
750
|
.pf-v6-c-data-list__toggle {
|
|
745
751
|
margin-block-start: var(--pf-v6-c-data-list__toggle--MarginBlockStart);
|
|
@@ -747,15 +753,16 @@
|
|
|
747
753
|
margin-inline-start: var(--pf-v6-c-data-list__toggle--MarginInlineStart);
|
|
748
754
|
}
|
|
749
755
|
|
|
756
|
+
:where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-data-list__toggle-icon {
|
|
757
|
+
scale: -1 1;
|
|
758
|
+
}
|
|
759
|
+
|
|
750
760
|
.pf-v6-c-data-list__toggle-icon {
|
|
751
761
|
height: var(--pf-v6-c-data-list__toggle-icon--Height);
|
|
752
762
|
pointer-events: none;
|
|
753
763
|
transition: var(--pf-v6-c-data-list__toggle-icon--Transition);
|
|
754
764
|
transform: rotate(var(--pf-v6-c-data-list__toggle-icon--Rotate));
|
|
755
765
|
}
|
|
756
|
-
:where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-data-list__toggle-icon {
|
|
757
|
-
scale: -1 1;
|
|
758
|
-
}
|
|
759
766
|
|
|
760
767
|
.pf-v6-c-data-list__item-content {
|
|
761
768
|
display: grid;
|
|
@@ -16,6 +16,13 @@
|
|
|
16
16
|
--pf-v6-c-description-list__term--FontWeight: var(--pf-t--global--font--weight--body--bold);
|
|
17
17
|
--pf-v6-c-description-list__term--FontSize: var(--pf-t--global--font--size--body--default);
|
|
18
18
|
--pf-v6-c-description-list__term--LineHeight: var(--pf-t--global--font--line-height--body);
|
|
19
|
+
}
|
|
20
|
+
@media screen and (min-width: 36rem) {
|
|
21
|
+
.pf-v6-c-description-list {
|
|
22
|
+
--pf-v6-c-description-list__term--Display: var(--pf-v6-c-description-list__term--sm--Display);
|
|
23
|
+
}
|
|
24
|
+
}
|
|
25
|
+
.pf-v6-c-description-list {
|
|
19
26
|
--pf-v6-c-description-list__term-icon--MinWidth: var(--pf-t--global--font--size--body--sm);
|
|
20
27
|
--pf-v6-c-description-list__term-icon--MarginInlineEnd: var(--pf-t--global--spacer--sm);
|
|
21
28
|
--pf-v6-c-description-list__term-icon--Color: var(--pf-t--global--icon--color--subtle);
|
|
@@ -44,11 +51,6 @@
|
|
|
44
51
|
--pf-v6-c-description-list--m-horizontal__term--width-on-2xl: inherit;
|
|
45
52
|
--pf-v6-c-description-list__term--width: var(--pf-v6-c-description-list--m-horizontal__term--width);
|
|
46
53
|
}
|
|
47
|
-
@media screen and (min-width: 36rem) {
|
|
48
|
-
.pf-v6-c-description-list {
|
|
49
|
-
--pf-v6-c-description-list__term--Display: var(--pf-v6-c-description-list__term--sm--Display);
|
|
50
|
-
}
|
|
51
|
-
}
|
|
52
54
|
@media (min-width: 36rem) {
|
|
53
55
|
.pf-v6-c-description-list {
|
|
54
56
|
--pf-v6-c-description-list__term--width: var(--pf-v6-c-description-list--m-horizontal__term--width-on-sm, var(--pf-v6-c-description-list--m-horizontal__term--width));
|
|
@@ -13,11 +13,6 @@
|
|
|
13
13
|
--pf-v6-hidden-visible--hidden--Display: none;
|
|
14
14
|
--pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
|
|
15
15
|
display: var(--pf-v6-hidden-visible--Display);
|
|
16
|
-
flex-shrink: 0;
|
|
17
|
-
align-items: stretch;
|
|
18
|
-
align-self: stretch;
|
|
19
|
-
justify-content: center;
|
|
20
|
-
border: 0;
|
|
21
16
|
}
|
|
22
17
|
.pf-v6-c-divider.pf-m-hidden {
|
|
23
18
|
--pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
|
|
@@ -62,6 +57,13 @@
|
|
|
62
57
|
--pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
|
|
63
58
|
}
|
|
64
59
|
}
|
|
60
|
+
.pf-v6-c-divider {
|
|
61
|
+
flex-shrink: 0;
|
|
62
|
+
align-items: stretch;
|
|
63
|
+
align-self: stretch;
|
|
64
|
+
justify-content: center;
|
|
65
|
+
border: 0;
|
|
66
|
+
}
|
|
65
67
|
.pf-v6-c-divider::before {
|
|
66
68
|
flex-basis: var(--pf-v6-c-divider--before--FlexBasis);
|
|
67
69
|
content: "";
|