@patternfly/patternfly 5.1.0-prerelease.14 → 5.1.0-prerelease.16
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/components/DataList/data-list.css +3 -0
- package/components/DataList/data-list.scss +2 -0
- package/components/Popover/popover.css +56 -8
- package/components/Popover/popover.scss +96 -40
- package/components/Tooltip/tooltip.css +57 -9
- package/components/Tooltip/tooltip.scss +81 -25
- package/components/TreeView/tree-view.css +6 -0
- package/components/TreeView/tree-view.scss +10 -3
- package/docs/components/Popover/examples/Popover.css +3 -9
- package/docs/components/Popover/examples/Popover.md +4 -4
- package/docs/components/Tooltip/examples/Tooltip.css +4 -0
- package/docs/components/Tooltip/examples/Tooltip.md +8 -6
- package/package.json +2 -2
- package/patternfly-no-globals.css +122 -17
- package/patternfly-theme-dark-unversioned.css +122 -17
- package/patternfly.css +122 -17
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
|
@@ -812,6 +812,9 @@
|
|
|
812
812
|
transition: var(--pf-v5-c-data-list__toggle-icon--Transition);
|
|
813
813
|
transform: rotate(var(--pf-v5-c-data-list__toggle-icon--Rotate));
|
|
814
814
|
}
|
|
815
|
+
:where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-data-list__toggle-icon {
|
|
816
|
+
scale: -1 1;
|
|
817
|
+
}
|
|
815
818
|
|
|
816
819
|
.pf-v5-c-data-list__item-content {
|
|
817
820
|
display: grid;
|
|
@@ -405,6 +405,8 @@
|
|
|
405
405
|
|
|
406
406
|
// toggle icon rotate
|
|
407
407
|
.#{$data-list}__toggle-icon {
|
|
408
|
+
@include pf-v5-mirror-inline-on-rtl;
|
|
409
|
+
|
|
408
410
|
height: var(--#{$data-list}__toggle-icon--Height);
|
|
409
411
|
pointer-events: none;
|
|
410
412
|
transition: var(--#{$data-list}__toggle-icon--Transition);
|
|
@@ -61,37 +61,85 @@
|
|
|
61
61
|
--pf-v5-c-popover--MinWidth: auto;
|
|
62
62
|
--pf-v5-c-popover--MaxWidth: none;
|
|
63
63
|
}
|
|
64
|
-
.pf-v5-c-popover.pf-m-top
|
|
64
|
+
.pf-v5-c-popover:is(.pf-m-top,
|
|
65
|
+
.pf-m-top-left,
|
|
66
|
+
.pf-m-top-right,
|
|
67
|
+
.pf-m-block-start,
|
|
68
|
+
.pf-m-block-start-inline-start,
|
|
69
|
+
.pf-m-block-start-inline-end) .pf-v5-c-popover__arrow {
|
|
65
70
|
inset-block-end: 0;
|
|
66
71
|
inset-inline-start: 50%;
|
|
67
72
|
transform: translateX(var(--pf-v5-c-popover__arrow--m-top--TranslateX)) translateY(var(--pf-v5-c-popover__arrow--m-top--TranslateY)) rotate(var(--pf-v5-c-popover__arrow--m-top--Rotate));
|
|
68
73
|
}
|
|
69
|
-
.
|
|
74
|
+
:where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-popover:is(.pf-m-top, .pf-m-top-left, .pf-m-top-right, .pf-m-block-start, .pf-m-block-start-inline-start, .pf-m-block-start-inline-end) .pf-v5-c-popover__arrow {
|
|
75
|
+
transform: translateX(calc(var(--pf-v5-c-popover__arrow--m-top--TranslateX) * var(--pf-v5-global--inverse--multiplier))) translateY(var(--pf-v5-c-popover__arrow--m-top--TranslateY)) rotate(var(--pf-v5-c-popover__arrow--m-top--Rotate));
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
.pf-v5-c-popover:is(.pf-m-bottom,
|
|
79
|
+
.pf-m-bottom-left,
|
|
80
|
+
.pf-m-bottom-right,
|
|
81
|
+
.pf-m-block-end,
|
|
82
|
+
.pf-m-block-end-inline-start,
|
|
83
|
+
.pf-m-block-end-inline-end) .pf-v5-c-popover__arrow {
|
|
70
84
|
inset-block-start: 0;
|
|
71
85
|
inset-inline-start: 50%;
|
|
72
86
|
transform: translateX(var(--pf-v5-c-popover__arrow--m-bottom--TranslateX)) translateY(var(--pf-v5-c-popover__arrow--m-bottom--TranslateY)) rotate(var(--pf-v5-c-popover__arrow--m-bottom--Rotate));
|
|
73
87
|
}
|
|
74
|
-
.
|
|
88
|
+
:where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-popover:is(.pf-m-bottom, .pf-m-bottom-left, .pf-m-bottom-right, .pf-m-block-end, .pf-m-block-end-inline-start, .pf-m-block-end-inline-end) .pf-v5-c-popover__arrow {
|
|
89
|
+
transform: translateX(calc(var(--pf-v5-c-popover__arrow--m-bottom--TranslateX) * var(--pf-v5-global--inverse--multiplier))) translateY(var(--pf-v5-c-popover__arrow--m-bottom--TranslateY)) rotate(var(--pf-v5-c-popover__arrow--m-bottom--Rotate));
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
.pf-v5-c-popover:is(.pf-m-left,
|
|
93
|
+
.pf-m-left-top,
|
|
94
|
+
.pf-m-left-bottom,
|
|
95
|
+
.pf-m-inline-start,
|
|
96
|
+
.pf-m-inline-start-block-start,
|
|
97
|
+
.pf-m-inline-start-block-end) .pf-v5-c-popover__arrow {
|
|
75
98
|
inset-block-start: 50%;
|
|
76
99
|
inset-inline-end: 0;
|
|
77
100
|
transform: translateX(var(--pf-v5-c-popover__arrow--m-left--TranslateX)) translateY(var(--pf-v5-c-popover__arrow--m-left--TranslateY)) rotate(var(--pf-v5-c-popover__arrow--m-left--Rotate));
|
|
78
101
|
}
|
|
79
|
-
.
|
|
102
|
+
:where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-popover:is(.pf-m-left, .pf-m-left-top, .pf-m-left-bottom, .pf-m-inline-start, .pf-m-inline-start-block-start, .pf-m-inline-start-block-end) .pf-v5-c-popover__arrow {
|
|
103
|
+
transform: translateX(calc(var(--pf-v5-c-popover__arrow--m-left--TranslateX) * var(--pf-v5-global--inverse--multiplier))) translateY(var(--pf-v5-c-popover__arrow--m-left--TranslateY)) rotate(var(--pf-v5-c-popover__arrow--m-left--Rotate));
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
.pf-v5-c-popover:is(.pf-m-right,
|
|
107
|
+
.pf-m-right-top,
|
|
108
|
+
.pf-m-right-bottom,
|
|
109
|
+
.pf-m-inline-end,
|
|
110
|
+
.pf-m-inline-end-block-start,
|
|
111
|
+
.pf-m-inline-end-block-end) .pf-v5-c-popover__arrow {
|
|
80
112
|
inset-block-start: 50%;
|
|
81
113
|
inset-inline-start: 0;
|
|
82
114
|
transform: translateX(var(--pf-v5-c-popover__arrow--m-right--TranslateX)) translateY(var(--pf-v5-c-popover__arrow--m-right--TranslateY)) rotate(var(--pf-v5-c-popover__arrow--m-right--Rotate));
|
|
83
115
|
}
|
|
84
|
-
.pf-v5-c-popover.pf-m-
|
|
116
|
+
:where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-popover:is(.pf-m-right, .pf-m-right-top, .pf-m-right-bottom, .pf-m-inline-end, .pf-m-inline-end-block-start, .pf-m-inline-end-block-end) .pf-v5-c-popover__arrow {
|
|
117
|
+
transform: translateX(calc(var(--pf-v5-c-popover__arrow--m-right--TranslateX) * var(--pf-v5-global--inverse--multiplier))) translateY(var(--pf-v5-c-popover__arrow--m-right--TranslateY)) rotate(var(--pf-v5-c-popover__arrow--m-right--Rotate));
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
.pf-v5-c-popover:is(.pf-m-left-top,
|
|
121
|
+
.pf-m-right-top,
|
|
122
|
+
.pf-m-inline-start-block-start,
|
|
123
|
+
.pf-m-inline-end-block-start) .pf-v5-c-popover__arrow {
|
|
85
124
|
inset-block-start: var(--pf-v5-c-popover__arrow--Height);
|
|
86
125
|
}
|
|
87
|
-
.pf-v5-c-popover.pf-m-left-bottom
|
|
126
|
+
.pf-v5-c-popover:is(.pf-m-left-bottom,
|
|
127
|
+
.pf-m-right-bottom,
|
|
128
|
+
.pf-m-inline-start-block-end,
|
|
129
|
+
.pf-m-inline-end-block-end) .pf-v5-c-popover__arrow {
|
|
88
130
|
inset-block-start: auto;
|
|
89
131
|
inset-block-end: 0;
|
|
90
132
|
}
|
|
91
|
-
.pf-v5-c-popover.pf-m-top-left
|
|
133
|
+
.pf-v5-c-popover:is(.pf-m-top-left,
|
|
134
|
+
.pf-m-bottom-left,
|
|
135
|
+
.pf-m-block-start-inline-start,
|
|
136
|
+
.pf-m-block-end-inline-start) .pf-v5-c-popover__arrow {
|
|
92
137
|
inset-inline-start: var(--pf-v5-c-popover__arrow--Width);
|
|
93
138
|
}
|
|
94
|
-
.pf-v5-c-popover.pf-m-top-right
|
|
139
|
+
.pf-v5-c-popover:is(.pf-m-top-right,
|
|
140
|
+
.pf-m-bottom-right,
|
|
141
|
+
.pf-m-block-start-inline-end,
|
|
142
|
+
.pf-m-block-end-inline-end) .pf-v5-c-popover__arrow {
|
|
95
143
|
inset-inline-start: auto;
|
|
96
144
|
inset-inline-end: 0;
|
|
97
145
|
}
|
|
@@ -88,73 +88,129 @@
|
|
|
88
88
|
--#{$popover}--MaxWidth: none;
|
|
89
89
|
}
|
|
90
90
|
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
91
|
+
&:is(
|
|
92
|
+
.pf-m-top,
|
|
93
|
+
.pf-m-top-left,
|
|
94
|
+
.pf-m-top-right,
|
|
95
|
+
.pf-m-block-start,
|
|
96
|
+
.pf-m-block-start-inline-start,
|
|
97
|
+
.pf-m-block-start-inline-end
|
|
98
|
+
) {
|
|
94
99
|
.#{$popover}__arrow {
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
100
|
+
inset-block-end: 0;
|
|
101
|
+
inset-inline-start: 50%;
|
|
102
|
+
|
|
103
|
+
@include pf-v5-bidirectional-style(
|
|
104
|
+
$prop: transform,
|
|
105
|
+
$ltr-val: translateX(var(--#{$popover}__arrow--m-top--TranslateX)) translateY(var(--#{$popover}__arrow--m-top--TranslateY)) rotate(var(--#{$popover}__arrow--m-top--Rotate)),
|
|
106
|
+
$rtl-val: translateX(#{pf-v5-calc-inverse(var(--#{$popover}__arrow--m-top--TranslateX))}) translateY(var(--#{$popover}__arrow--m-top--TranslateY)) rotate(var(--#{$popover}__arrow--m-top--Rotate))
|
|
107
|
+
);
|
|
98
108
|
}
|
|
99
109
|
}
|
|
100
110
|
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
111
|
+
&:is(
|
|
112
|
+
.pf-m-bottom,
|
|
113
|
+
.pf-m-bottom-left,
|
|
114
|
+
.pf-m-bottom-right,
|
|
115
|
+
.pf-m-block-end,
|
|
116
|
+
.pf-m-block-end-inline-start,
|
|
117
|
+
.pf-m-block-end-inline-end
|
|
118
|
+
) {
|
|
104
119
|
.#{$popover}__arrow {
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
120
|
+
inset-block-start: 0;
|
|
121
|
+
inset-inline-start: 50%;
|
|
122
|
+
|
|
123
|
+
@include pf-v5-bidirectional-style(
|
|
124
|
+
$prop: transform,
|
|
125
|
+
$ltr-val: translateX(var(--#{$popover}__arrow--m-bottom--TranslateX)) translateY(var(--#{$popover}__arrow--m-bottom--TranslateY)) rotate(var(--#{$popover}__arrow--m-bottom--Rotate)),
|
|
126
|
+
$rtl-val: translateX(#{pf-v5-calc-inverse(var(--#{$popover}__arrow--m-bottom--TranslateX))}) translateY(var(--#{$popover}__arrow--m-bottom--TranslateY)) rotate(var(--#{$popover}__arrow--m-bottom--Rotate))
|
|
127
|
+
);
|
|
108
128
|
}
|
|
109
129
|
}
|
|
110
130
|
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
131
|
+
&:is(
|
|
132
|
+
.pf-m-left,
|
|
133
|
+
.pf-m-left-top,
|
|
134
|
+
.pf-m-left-bottom,
|
|
135
|
+
.pf-m-inline-start,
|
|
136
|
+
.pf-m-inline-start-block-start,
|
|
137
|
+
.pf-m-inline-start-block-end
|
|
138
|
+
) {
|
|
114
139
|
.#{$popover}__arrow {
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
140
|
+
inset-block-start: 50%;
|
|
141
|
+
inset-inline-end: 0;
|
|
142
|
+
|
|
143
|
+
@include pf-v5-bidirectional-style(
|
|
144
|
+
$prop: transform,
|
|
145
|
+
$ltr-val: translateX(var(--#{$popover}__arrow--m-left--TranslateX)) translateY(var(--#{$popover}__arrow--m-left--TranslateY)) rotate(var(--#{$popover}__arrow--m-left--Rotate)),
|
|
146
|
+
$rtl-val: translateX(#{pf-v5-calc-inverse(var(--#{$popover}__arrow--m-left--TranslateX))}) translateY(var(--#{$popover}__arrow--m-left--TranslateY)) rotate(var(--#{$popover}__arrow--m-left--Rotate))
|
|
147
|
+
);
|
|
118
148
|
}
|
|
119
149
|
}
|
|
120
150
|
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
151
|
+
&:is(
|
|
152
|
+
.pf-m-right,
|
|
153
|
+
.pf-m-right-top,
|
|
154
|
+
.pf-m-right-bottom,
|
|
155
|
+
.pf-m-inline-end,
|
|
156
|
+
.pf-m-inline-end-block-start,
|
|
157
|
+
.pf-m-inline-end-block-end
|
|
158
|
+
) {
|
|
124
159
|
.#{$popover}__arrow {
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
160
|
+
inset-block-start: 50%;
|
|
161
|
+
inset-inline-start: 0;
|
|
162
|
+
|
|
163
|
+
@include pf-v5-bidirectional-style(
|
|
164
|
+
$prop: transform,
|
|
165
|
+
$ltr-val: translateX(var(--#{$popover}__arrow--m-right--TranslateX)) translateY(var(--#{$popover}__arrow--m-right--TranslateY)) rotate(var(--#{$popover}__arrow--m-right--Rotate)),
|
|
166
|
+
$rtl-val: translateX(#{pf-v5-calc-inverse(var(--#{$popover}__arrow--m-right--TranslateX))}) translateY(var(--#{$popover}__arrow--m-right--TranslateY)) rotate(var(--#{$popover}__arrow--m-right--Rotate))
|
|
167
|
+
);
|
|
128
168
|
}
|
|
129
169
|
}
|
|
130
170
|
|
|
131
|
-
|
|
132
|
-
|
|
171
|
+
&:is(
|
|
172
|
+
.pf-m-left-top,
|
|
173
|
+
.pf-m-right-top,
|
|
174
|
+
.pf-m-inline-start-block-start,
|
|
175
|
+
.pf-m-inline-end-block-start
|
|
176
|
+
) {
|
|
133
177
|
.#{$popover}__arrow {
|
|
134
|
-
|
|
178
|
+
inset-block-start: var(--#{$popover}__arrow--Height);
|
|
135
179
|
}
|
|
136
180
|
}
|
|
137
181
|
|
|
138
|
-
|
|
139
|
-
|
|
182
|
+
&:is(
|
|
183
|
+
.pf-m-left-bottom,
|
|
184
|
+
.pf-m-right-bottom,
|
|
185
|
+
.pf-m-inline-start-block-end,
|
|
186
|
+
.pf-m-inline-end-block-end
|
|
187
|
+
) {
|
|
140
188
|
.#{$popover}__arrow {
|
|
141
|
-
|
|
142
|
-
|
|
189
|
+
inset-block-start: auto;
|
|
190
|
+
inset-block-end: 0;
|
|
143
191
|
}
|
|
144
192
|
}
|
|
145
193
|
|
|
146
|
-
|
|
147
|
-
|
|
194
|
+
&:is(
|
|
195
|
+
.pf-m-top-left,
|
|
196
|
+
.pf-m-bottom-left,
|
|
197
|
+
.pf-m-block-start-inline-start,
|
|
198
|
+
.pf-m-block-end-inline-start
|
|
199
|
+
) {
|
|
148
200
|
.#{$popover}__arrow {
|
|
149
|
-
|
|
201
|
+
inset-inline-start: var(--#{$popover}__arrow--Width);
|
|
150
202
|
}
|
|
151
203
|
}
|
|
152
204
|
|
|
153
|
-
|
|
154
|
-
|
|
205
|
+
&:is(
|
|
206
|
+
.pf-m-top-right,
|
|
207
|
+
.pf-m-bottom-right,
|
|
208
|
+
.pf-m-block-start-inline-end,
|
|
209
|
+
.pf-m-block-end-inline-end
|
|
210
|
+
) {
|
|
155
211
|
.#{$popover}__arrow {
|
|
156
|
-
|
|
157
|
-
|
|
212
|
+
inset-inline-start: auto;
|
|
213
|
+
inset-inline-end: 0;
|
|
158
214
|
}
|
|
159
215
|
}
|
|
160
216
|
|
|
@@ -196,8 +252,8 @@
|
|
|
196
252
|
// Close button
|
|
197
253
|
.#{$popover}__close {
|
|
198
254
|
position: absolute;
|
|
199
|
-
|
|
200
|
-
|
|
255
|
+
inset-block-start: var(--#{$popover}__close--Top);
|
|
256
|
+
inset-inline-end: var(--#{$popover}__close--Right);
|
|
201
257
|
|
|
202
258
|
// Create room for the close button
|
|
203
259
|
+ * {
|
|
@@ -28,37 +28,85 @@
|
|
|
28
28
|
max-width: var(--pf-v5-c-tooltip--MaxWidth);
|
|
29
29
|
box-shadow: var(--pf-v5-c-tooltip--BoxShadow);
|
|
30
30
|
}
|
|
31
|
-
.pf-v5-c-tooltip.pf-m-top
|
|
31
|
+
.pf-v5-c-tooltip:is(.pf-m-top,
|
|
32
|
+
.pf-m-top-left,
|
|
33
|
+
.pf-m-top-right,
|
|
34
|
+
.pf-m-block-start,
|
|
35
|
+
.pf-m-block-start-inline-start,
|
|
36
|
+
.pf-m-block-start-inline-end) .pf-v5-c-tooltip__arrow {
|
|
32
37
|
inset-block-end: 0;
|
|
33
38
|
inset-inline-start: 50%;
|
|
34
39
|
transform: translateX(var(--pf-v5-c-tooltip__arrow--m-top--TranslateX)) translateY(var(--pf-v5-c-tooltip__arrow--m-top--TranslateY)) rotate(var(--pf-v5-c-tooltip__arrow--m-top--Rotate));
|
|
35
40
|
}
|
|
36
|
-
.
|
|
41
|
+
:where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-tooltip:is(.pf-m-top, .pf-m-top-left, .pf-m-top-right, .pf-m-block-start, .pf-m-block-start-inline-start, .pf-m-block-start-inline-end) .pf-v5-c-tooltip__arrow {
|
|
42
|
+
transform: translateX(calc(var(--pf-v5-c-tooltip__arrow--m-top--TranslateX) * var(--pf-v5-global--inverse--multiplier))) translateY(var(--pf-v5-c-tooltip__arrow--m-top--TranslateY)) rotate(var(--pf-v5-c-tooltip__arrow--m-top--Rotate));
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
.pf-v5-c-tooltip:is(.pf-m-bottom,
|
|
46
|
+
.pf-m-bottom-left,
|
|
47
|
+
.pf-m-bottom-right,
|
|
48
|
+
.pf-m-block-end,
|
|
49
|
+
.pf-m-block-end-inline-start,
|
|
50
|
+
.pf-m-block-end-inline-end) .pf-v5-c-tooltip__arrow {
|
|
37
51
|
inset-block-start: 0;
|
|
38
52
|
inset-inline-start: 50%;
|
|
39
53
|
transform: translateX(var(--pf-v5-c-tooltip__arrow--m-bottom--TranslateX)) translateY(var(--pf-v5-c-tooltip__arrow--m-bottom--TranslateY)) rotate(var(--pf-v5-c-tooltip__arrow--m-bottom--Rotate));
|
|
40
54
|
}
|
|
41
|
-
.
|
|
55
|
+
:where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-tooltip:is(.pf-m-bottom, .pf-m-bottom-left, .pf-m-bottom-right, .pf-m-block-end, .pf-m-block-end-inline-start, .pf-m-block-end-inline-end) .pf-v5-c-tooltip__arrow {
|
|
56
|
+
transform: translateX(calc(var(--pf-v5-c-tooltip__arrow--m-bottom--TranslateX) * var(--pf-v5-global--inverse--multiplier))) translateY(var(--pf-v5-c-tooltip__arrow--m-bottom--TranslateY)) rotate(var(--pf-v5-c-tooltip__arrow--m-bottom--Rotate));
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
.pf-v5-c-tooltip:is(.pf-m-left,
|
|
60
|
+
.pf-m-left-top,
|
|
61
|
+
.pf-m-left-bottom,
|
|
62
|
+
.pf-m-inline-start,
|
|
63
|
+
.pf-m-inline-start-block-start,
|
|
64
|
+
.pf-m-inline-start-block-end) .pf-v5-c-tooltip__arrow {
|
|
42
65
|
inset-block-start: 50%;
|
|
43
66
|
inset-inline-end: 0;
|
|
44
67
|
transform: translateX(var(--pf-v5-c-tooltip__arrow--m-left--TranslateX)) translateY(var(--pf-v5-c-tooltip__arrow--m-left--TranslateY)) rotate(var(--pf-v5-c-tooltip__arrow--m-left--Rotate));
|
|
45
68
|
}
|
|
46
|
-
.
|
|
69
|
+
:where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-tooltip:is(.pf-m-left, .pf-m-left-top, .pf-m-left-bottom, .pf-m-inline-start, .pf-m-inline-start-block-start, .pf-m-inline-start-block-end) .pf-v5-c-tooltip__arrow {
|
|
70
|
+
transform: translateX(calc(var(--pf-v5-c-tooltip__arrow--m-left--TranslateX) * var(--pf-v5-global--inverse--multiplier))) translateY(var(--pf-v5-c-tooltip__arrow--m-left--TranslateY)) rotate(var(--pf-v5-c-tooltip__arrow--m-left--Rotate));
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
.pf-v5-c-tooltip:is(.pf-m-right,
|
|
74
|
+
.pf-m-right-top,
|
|
75
|
+
.pf-m-right-bottom,
|
|
76
|
+
.pf-m-inline-end,
|
|
77
|
+
.pf-m-inline-end-block-start,
|
|
78
|
+
.pf-m-inline-end-block-end) .pf-v5-c-tooltip__arrow {
|
|
47
79
|
inset-block-start: 50%;
|
|
48
80
|
inset-inline-start: 0;
|
|
49
81
|
transform: translateX(var(--pf-v5-c-tooltip__arrow--m-right--TranslateX)) translateY(var(--pf-v5-c-tooltip__arrow--m-right--TranslateY)) rotate(var(--pf-v5-c-tooltip__arrow--m-right--Rotate));
|
|
50
82
|
}
|
|
51
|
-
.pf-v5-c-tooltip.pf-m-
|
|
83
|
+
:where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-tooltip:is(.pf-m-right, .pf-m-right-top, .pf-m-right-bottom, .pf-m-inline-end, .pf-m-inline-end-block-start, .pf-m-inline-end-block-end) .pf-v5-c-tooltip__arrow {
|
|
84
|
+
transform: translateX(calc(var(--pf-v5-c-tooltip__arrow--m-right--TranslateX) * var(--pf-v5-global--inverse--multiplier))) translateY(var(--pf-v5-c-tooltip__arrow--m-right--TranslateY)) rotate(var(--pf-v5-c-tooltip__arrow--m-right--Rotate));
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
.pf-v5-c-tooltip:is(.pf-m-left-top,
|
|
88
|
+
.pf-m-right-top,
|
|
89
|
+
.pf-m-inline-start-block-start,
|
|
90
|
+
.pf-m-inline-end-block-start) .pf-v5-c-tooltip__arrow {
|
|
52
91
|
inset-block-start: var(--pf-v5-c-tooltip__arrow--Height);
|
|
53
92
|
}
|
|
54
|
-
.pf-v5-c-tooltip.pf-m-left-bottom
|
|
93
|
+
.pf-v5-c-tooltip:is(.pf-m-left-bottom,
|
|
94
|
+
.pf-m-right-bottom,
|
|
95
|
+
.pf-m-inline-start-block-end,
|
|
96
|
+
.pf-m-inline-end-block-end) .pf-v5-c-tooltip__arrow {
|
|
55
97
|
inset-block-start: auto;
|
|
56
98
|
inset-block-end: 0;
|
|
57
99
|
}
|
|
58
|
-
.pf-v5-c-tooltip.pf-m-top-left
|
|
100
|
+
.pf-v5-c-tooltip:is(.pf-m-top-left,
|
|
101
|
+
.pf-m-bottom-left,
|
|
102
|
+
.pf-m-block-start-block-start,
|
|
103
|
+
.pf-m-block-end-block-start) .pf-v5-c-tooltip__arrow {
|
|
59
104
|
inset-inline-start: var(--pf-v5-c-tooltip__arrow--Width);
|
|
60
105
|
}
|
|
61
|
-
.pf-v5-c-tooltip.pf-m-top-right
|
|
106
|
+
.pf-v5-c-tooltip:is(.pf-m-top-right,
|
|
107
|
+
.pf-m-bottom-right,
|
|
108
|
+
.pf-m-block-start-block-end,
|
|
109
|
+
.pf-m-block-end-block-end) .pf-v5-c-tooltip__arrow {
|
|
62
110
|
inset-inline-start: auto;
|
|
63
111
|
inset-inline-end: 0;
|
|
64
112
|
}
|
|
@@ -75,7 +123,7 @@
|
|
|
75
123
|
word-break: break-word;
|
|
76
124
|
background-color: var(--pf-v5-c-tooltip__content--BackgroundColor);
|
|
77
125
|
}
|
|
78
|
-
.pf-v5-c-tooltip__content.pf-m-text-align-left {
|
|
126
|
+
.pf-v5-c-tooltip__content:is(.pf-m-text-align-left, .pf-m-text-align-start) {
|
|
79
127
|
text-align: start;
|
|
80
128
|
}
|
|
81
129
|
|
|
@@ -36,70 +36,126 @@
|
|
|
36
36
|
max-width: var(--#{$tooltip}--MaxWidth);
|
|
37
37
|
box-shadow: var(--#{$tooltip}--BoxShadow);
|
|
38
38
|
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
39
|
+
&:is(
|
|
40
|
+
.pf-m-top,
|
|
41
|
+
.pf-m-top-left,
|
|
42
|
+
.pf-m-top-right,
|
|
43
|
+
.pf-m-block-start,
|
|
44
|
+
.pf-m-block-start-inline-start,
|
|
45
|
+
.pf-m-block-start-inline-end
|
|
46
|
+
) {
|
|
42
47
|
.#{$tooltip}__arrow {
|
|
43
48
|
inset-block-end: 0;
|
|
44
49
|
inset-inline-start: 50%;
|
|
45
|
-
|
|
50
|
+
|
|
51
|
+
@include pf-v5-bidirectional-style(
|
|
52
|
+
$prop: transform,
|
|
53
|
+
$ltr-val: translateX(var(--#{$tooltip}__arrow--m-top--TranslateX)) translateY(var(--#{$tooltip}__arrow--m-top--TranslateY)) rotate(var(--#{$tooltip}__arrow--m-top--Rotate)),
|
|
54
|
+
$rtl-val: translateX(#{pf-v5-calc-inverse(var(--#{$tooltip}__arrow--m-top--TranslateX))}) translateY(var(--#{$tooltip}__arrow--m-top--TranslateY)) rotate(var(--#{$tooltip}__arrow--m-top--Rotate))
|
|
55
|
+
);
|
|
46
56
|
}
|
|
47
57
|
}
|
|
48
58
|
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
59
|
+
&:is(
|
|
60
|
+
.pf-m-bottom,
|
|
61
|
+
.pf-m-bottom-left,
|
|
62
|
+
.pf-m-bottom-right,
|
|
63
|
+
.pf-m-block-end,
|
|
64
|
+
.pf-m-block-end-inline-start,
|
|
65
|
+
.pf-m-block-end-inline-end
|
|
66
|
+
) {
|
|
52
67
|
.#{$tooltip}__arrow {
|
|
53
68
|
inset-block-start: 0;
|
|
54
69
|
inset-inline-start: 50%;
|
|
55
|
-
|
|
70
|
+
|
|
71
|
+
@include pf-v5-bidirectional-style(
|
|
72
|
+
$prop: transform,
|
|
73
|
+
$ltr-val: translateX(var(--#{$tooltip}__arrow--m-bottom--TranslateX)) translateY(var(--#{$tooltip}__arrow--m-bottom--TranslateY)) rotate(var(--#{$tooltip}__arrow--m-bottom--Rotate)),
|
|
74
|
+
$rtl-val: translateX(#{pf-v5-calc-inverse(var(--#{$tooltip}__arrow--m-bottom--TranslateX))}) translateY(var(--#{$tooltip}__arrow--m-bottom--TranslateY)) rotate(var(--#{$tooltip}__arrow--m-bottom--Rotate))
|
|
75
|
+
);
|
|
56
76
|
}
|
|
57
77
|
}
|
|
58
78
|
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
79
|
+
&:is(
|
|
80
|
+
.pf-m-left,
|
|
81
|
+
.pf-m-left-top,
|
|
82
|
+
.pf-m-left-bottom,
|
|
83
|
+
.pf-m-inline-start,
|
|
84
|
+
.pf-m-inline-start-block-start,
|
|
85
|
+
.pf-m-inline-start-block-end
|
|
86
|
+
) {
|
|
62
87
|
.#{$tooltip}__arrow {
|
|
63
88
|
inset-block-start: 50%;
|
|
64
89
|
inset-inline-end: 0;
|
|
65
|
-
|
|
90
|
+
|
|
91
|
+
@include pf-v5-bidirectional-style(
|
|
92
|
+
$prop: transform,
|
|
93
|
+
$ltr-val: translateX(var(--#{$tooltip}__arrow--m-left--TranslateX)) translateY(var(--#{$tooltip}__arrow--m-left--TranslateY)) rotate(var(--#{$tooltip}__arrow--m-left--Rotate)),
|
|
94
|
+
$rtl-val: translateX(#{pf-v5-calc-inverse(var(--#{$tooltip}__arrow--m-left--TranslateX))}) translateY(var(--#{$tooltip}__arrow--m-left--TranslateY)) rotate(var(--#{$tooltip}__arrow--m-left--Rotate))
|
|
95
|
+
);
|
|
66
96
|
}
|
|
67
97
|
}
|
|
68
98
|
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
99
|
+
&:is(
|
|
100
|
+
.pf-m-right,
|
|
101
|
+
.pf-m-right-top,
|
|
102
|
+
.pf-m-right-bottom,
|
|
103
|
+
.pf-m-inline-end,
|
|
104
|
+
.pf-m-inline-end-block-start,
|
|
105
|
+
.pf-m-inline-end-block-end
|
|
106
|
+
) {
|
|
72
107
|
.#{$tooltip}__arrow {
|
|
73
108
|
inset-block-start: 50%;
|
|
74
109
|
inset-inline-start: 0;
|
|
75
|
-
|
|
110
|
+
|
|
111
|
+
@include pf-v5-bidirectional-style(
|
|
112
|
+
$prop: transform,
|
|
113
|
+
$ltr-val: translateX(var(--#{$tooltip}__arrow--m-right--TranslateX)) translateY(var(--#{$tooltip}__arrow--m-right--TranslateY)) rotate(var(--#{$tooltip}__arrow--m-right--Rotate)),
|
|
114
|
+
$rtl-val: translateX(#{pf-v5-calc-inverse(var(--#{$tooltip}__arrow--m-right--TranslateX))}) translateY(var(--#{$tooltip}__arrow--m-right--TranslateY)) rotate(var(--#{$tooltip}__arrow--m-right--Rotate))
|
|
115
|
+
);
|
|
76
116
|
}
|
|
77
117
|
}
|
|
78
118
|
|
|
79
|
-
|
|
80
|
-
|
|
119
|
+
&:is(
|
|
120
|
+
.pf-m-left-top,
|
|
121
|
+
.pf-m-right-top,
|
|
122
|
+
.pf-m-inline-start-block-start,
|
|
123
|
+
.pf-m-inline-end-block-start
|
|
124
|
+
) {
|
|
81
125
|
.#{$tooltip}__arrow {
|
|
82
126
|
inset-block-start: var(--#{$tooltip}__arrow--Height);
|
|
83
127
|
}
|
|
84
128
|
}
|
|
85
129
|
|
|
86
|
-
|
|
87
|
-
|
|
130
|
+
&:is(
|
|
131
|
+
.pf-m-left-bottom,
|
|
132
|
+
.pf-m-right-bottom,
|
|
133
|
+
.pf-m-inline-start-block-end,
|
|
134
|
+
.pf-m-inline-end-block-end
|
|
135
|
+
) {
|
|
88
136
|
.#{$tooltip}__arrow {
|
|
89
137
|
inset-block-start: auto;
|
|
90
138
|
inset-block-end: 0;
|
|
91
139
|
}
|
|
92
140
|
}
|
|
93
141
|
|
|
94
|
-
|
|
95
|
-
|
|
142
|
+
&:is(
|
|
143
|
+
.pf-m-top-left,
|
|
144
|
+
.pf-m-bottom-left,
|
|
145
|
+
.pf-m-block-start-block-start,
|
|
146
|
+
.pf-m-block-end-block-start
|
|
147
|
+
) {
|
|
96
148
|
.#{$tooltip}__arrow {
|
|
97
149
|
inset-inline-start: var(--#{$tooltip}__arrow--Width);
|
|
98
150
|
}
|
|
99
151
|
}
|
|
100
152
|
|
|
101
|
-
|
|
102
|
-
|
|
153
|
+
&:is(
|
|
154
|
+
.pf-m-top-right,
|
|
155
|
+
.pf-m-bottom-right,
|
|
156
|
+
.pf-m-block-start-block-end,
|
|
157
|
+
.pf-m-block-end-block-end
|
|
158
|
+
) {
|
|
103
159
|
.#{$tooltip}__arrow {
|
|
104
160
|
inset-inline-start: auto;
|
|
105
161
|
inset-inline-end: 0;
|
|
@@ -119,7 +175,7 @@
|
|
|
119
175
|
word-break: break-word;
|
|
120
176
|
background-color: var(--#{$tooltip}__content--BackgroundColor);
|
|
121
177
|
|
|
122
|
-
|
|
178
|
+
&:is(.pf-m-text-align-left, .pf-m-text-align-start) {
|
|
123
179
|
text-align: start;
|
|
124
180
|
}
|
|
125
181
|
}
|
|
@@ -229,6 +229,9 @@
|
|
|
229
229
|
transition: var(--pf-v5-c-tree-view__node-toggle-icon--Transition);
|
|
230
230
|
transform: rotate(var(--pf-v5-c-tree-view__node-toggle-icon--Rotate));
|
|
231
231
|
}
|
|
232
|
+
:where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-tree-view__node-toggle-icon {
|
|
233
|
+
scale: -1 1;
|
|
234
|
+
}
|
|
232
235
|
|
|
233
236
|
.pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item {
|
|
234
237
|
--pf-v5-c-tree-view__node-toggle-icon--Rotate: var(--pf-v5-c-tree-view__node-toggle-icon--base--Rotate);
|
|
@@ -318,6 +321,9 @@
|
|
|
318
321
|
border: 0;
|
|
319
322
|
transform: translateX(var(--pf-v5-c-tree-view__list-item__list-item__node-toggle--TranslateX));
|
|
320
323
|
}
|
|
324
|
+
:where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-tree-view__node-toggle {
|
|
325
|
+
transform: translateX(calc(var(--pf-v5-c-tree-view__list-item__list-item__node-toggle--TranslateX) * var(--pf-v5-global--inverse--multiplier)));
|
|
326
|
+
}
|
|
321
327
|
|
|
322
328
|
.pf-v5-c-tree-view__node-title.pf-m-truncate,
|
|
323
329
|
.pf-v5-c-tree-view__node-text.pf-m-truncate {
|
|
@@ -332,6 +332,8 @@ $pf-v5-c-tree-view--MaxNesting: 10 !default;
|
|
|
332
332
|
}
|
|
333
333
|
|
|
334
334
|
.#{$tree-view}__node-toggle-icon {
|
|
335
|
+
@include pf-v5-mirror-inline-on-rtl;
|
|
336
|
+
|
|
335
337
|
display: inline-block;
|
|
336
338
|
min-width: var(--#{$tree-view}__node-toggle-icon--MinWidth);
|
|
337
339
|
text-align: center;
|
|
@@ -429,8 +431,8 @@ $pf-v5-c-tree-view--MaxNesting: 10 !default;
|
|
|
429
431
|
|
|
430
432
|
.#{$tree-view}__node-toggle {
|
|
431
433
|
position: var(--#{$tree-view}__node-toggle--Position);
|
|
432
|
-
|
|
433
|
-
|
|
434
|
+
inset-block-start: var(--#{$tree-view}__list-item__list-item__node-toggle--Top);
|
|
435
|
+
inset-inline-start: var(--#{$tree-view}__list-item__list-item__node-toggle--Left);
|
|
434
436
|
display: inline-flex;
|
|
435
437
|
align-items: center;
|
|
436
438
|
justify-content: center;
|
|
@@ -443,7 +445,12 @@ $pf-v5-c-tree-view--MaxNesting: 10 !default;
|
|
|
443
445
|
color: var(--#{$tree-view}__node-toggle--Color);
|
|
444
446
|
background-color: var(--#{$tree-view}__node-toggle--BackgroundColor);
|
|
445
447
|
border: 0;
|
|
446
|
-
|
|
448
|
+
|
|
449
|
+
@include pf-v5-bidirectional-style(
|
|
450
|
+
$prop: transform,
|
|
451
|
+
$ltr-val: translateX(var(--#{$tree-view}__list-item__list-item__node-toggle--TranslateX)),
|
|
452
|
+
$rtl-val: translateX(#{pf-v5-calc-inverse(var(--#{$tree-view}__list-item__list-item__node-toggle--TranslateX))})
|
|
453
|
+
);
|
|
447
454
|
}
|
|
448
455
|
|
|
449
456
|
.#{$tree-view}__node-title,
|
|
@@ -1,10 +1,4 @@
|
|
|
1
1
|
.ws-core-c-popover .ws-preview-html {
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
.ws-core-c-popover .pf-v5-c-popover {
|
|
6
|
-
position: absolute;
|
|
7
|
-
inset-block-start: 50%;
|
|
8
|
-
inset-inline-start: 50%;
|
|
9
|
-
transform: translate(-50%, -50%);
|
|
10
|
-
}
|
|
2
|
+
display: grid;
|
|
3
|
+
place-items: center;
|
|
4
|
+
}
|
|
@@ -669,10 +669,10 @@ A popover is used to provide contextual information for another component on cli
|
|
|
669
669
|
| `.pf-v5-c-popover__title-text` | `<h1>`,`<h2>`,`<h3>`,`<h4>`,`<h5>`,`<h6>`,`<span>` | Creates the popover title text. |
|
|
670
670
|
| `.pf-v5-c-popover__body` | `<div>` | The popover's body text. **Required** |
|
|
671
671
|
| `.pf-v5-c-popover__footer` | `<footer>` | Initiates a popover footer. |
|
|
672
|
-
| `.pf-m-left{-top/bottom}` | `.pf-v5-c-popover` | Positions the popover to the left (or left top/left bottom) of the element. |
|
|
673
|
-
| `.pf-m-right{-top/bottom}` | `.pf-v5-c-popover` | Positions the popover to the right (or right top/right bottom) of the element. |
|
|
674
|
-
| `.pf-m-top{-left/right}` | `.pf-v5-c-popover` | Positions the popover to the top (or top left/top right) of the element. |
|
|
675
|
-
| `.pf-m-bottom{-left/right}` | `.pf-v5-c-popover` | Positions the popover to the bottom (or bottom left/bottom right) of the element. |
|
|
672
|
+
| `.pf-m-left{-top/bottom}`, `.pf-m-inline-start{-block-start/block-end}` | `.pf-v5-c-popover` | Positions the popover to the left (or left top/left bottom) of the element. |
|
|
673
|
+
| `.pf-m-right{-top/bottom}`, `.pf-m-inline-end{-block-start/block-end}` | `.pf-v5-c-popover` | Positions the popover to the right (or right top/right bottom) of the element. |
|
|
674
|
+
| `.pf-m-top{-left/right}`, `.pf-m-block-start{-inline-start/inline-end}` | `.pf-v5-c-popover` | Positions the popover to the top (or top left/top right) of the element. |
|
|
675
|
+
| `.pf-m-bottom{-left/right}`, `.pf-m-block-end{-inline-start/inline-end}` | `.pf-v5-c-popover` | Positions the popover to the bottom (or bottom left/bottom right) of the element. |
|
|
676
676
|
| `.pf-m-no-padding` | `.pf-v5-c-popover` | Removes the outer padding from the popover content. |
|
|
677
677
|
| `.pf-m-width-auto` | `.pf-v5-c-popover` | Allows popover width to be defined by the popover content. |
|
|
678
678
|
| `.pf-m-custom` | `.pf-v5-c-popover` | Modifies for the custom alert state. |
|