@patternfly/patternfly 5.1.0-prerelease.13 → 5.1.0-prerelease.15
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/Card/card.css +3 -0
- package/components/Card/card.scss +2 -0
- package/components/DataList/data-list.css +3 -0
- package/components/DataList/data-list.scss +2 -0
- package/components/JumpLinks/jump-links.css +3 -0
- package/components/JumpLinks/jump-links.scss +2 -0
- package/components/Popover/popover.css +56 -8
- package/components/Popover/popover.scss +96 -40
- package/components/Tabs/tabs.css +10 -0
- package/components/Tabs/tabs.scss +8 -0
- package/components/Tooltip/tooltip.css +57 -9
- package/components/Tooltip/tooltip.scss +81 -25
- 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/docs/demos/Card/examples/Card.md +21 -5
- package/package.json +2 -2
- package/patternfly-no-globals.css +132 -17
- package/patternfly-theme-dark-unversioned.css +132 -17
- package/patternfly.css +132 -17
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
package/components/Card/card.css
CHANGED
|
@@ -270,6 +270,9 @@
|
|
|
270
270
|
display: inline-block;
|
|
271
271
|
transition: var(--pf-v5-c-card__header-toggle-icon--Transition);
|
|
272
272
|
}
|
|
273
|
+
:where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-card__header-toggle-icon {
|
|
274
|
+
scale: -1 1;
|
|
275
|
+
}
|
|
273
276
|
|
|
274
277
|
.pf-v5-c-card__title-text {
|
|
275
278
|
font-family: var(--pf-v5-c-card__title-text--FontFamily);
|
|
@@ -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);
|
|
@@ -252,6 +252,9 @@
|
|
|
252
252
|
transition: var(--pf-v5-c-jump-links__toggle-icon--Transition);
|
|
253
253
|
transform: rotate(var(--pf-v5-c-jump-links__toggle-icon--Rotate));
|
|
254
254
|
}
|
|
255
|
+
:where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-jump-links__toggle-icon {
|
|
256
|
+
scale: -1 1;
|
|
257
|
+
}
|
|
255
258
|
|
|
256
259
|
.pf-v5-c-jump-links__toggle-text {
|
|
257
260
|
margin-inline-start: var(--pf-v5-c-jump-links__toggle-text--MarginLeft);
|
|
@@ -230,6 +230,8 @@ $pf-v5-c-jump-links--m-expandable--breakpoint-map: build-breakpoint-map("base",
|
|
|
230
230
|
}
|
|
231
231
|
|
|
232
232
|
.#{$jump-links}__toggle-icon {
|
|
233
|
+
@include pf-v5-mirror-inline-on-rtl;
|
|
234
|
+
|
|
233
235
|
display: inline-block;
|
|
234
236
|
color: var(--#{$jump-links}__toggle-icon--Color);
|
|
235
237
|
transition: var(--#{$jump-links}__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
|
+ * {
|
package/components/Tabs/tabs.css
CHANGED
|
@@ -417,6 +417,9 @@
|
|
|
417
417
|
transition: var(--pf-v5-c-tabs__toggle-icon--Transition);
|
|
418
418
|
transform: rotate(var(--pf-v5-c-tabs__toggle-icon--Rotate));
|
|
419
419
|
}
|
|
420
|
+
:where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-tabs__toggle-icon {
|
|
421
|
+
scale: -1 1;
|
|
422
|
+
}
|
|
420
423
|
|
|
421
424
|
.pf-v5-c-tabs__toggle-text {
|
|
422
425
|
margin-inline-start: var(--pf-v5-c-tabs__toggle-text--MarginLeft);
|
|
@@ -591,6 +594,9 @@
|
|
|
591
594
|
transition: var(--pf-v5-c-tabs__link-toggle-icon--Transition);
|
|
592
595
|
transform: rotate(var(--pf-v5-c-tabs__link-toggle-icon--Rotate));
|
|
593
596
|
}
|
|
597
|
+
:where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-tabs__link-toggle-icon {
|
|
598
|
+
scale: -1 1;
|
|
599
|
+
}
|
|
594
600
|
|
|
595
601
|
.pf-v5-c-tabs__item-action {
|
|
596
602
|
display: flex;
|
|
@@ -622,6 +628,10 @@
|
|
|
622
628
|
opacity: 0;
|
|
623
629
|
transition: margin var(--pf-v5-c-tabs__scroll-button--TransitionDuration--margin), transform var(--pf-v5-c-tabs__scroll-button--TransitionDuration--transform), opacity var(--pf-v5-c-tabs__scroll-button--TransitionDuration--opacity);
|
|
624
630
|
}
|
|
631
|
+
:where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-tabs__scroll-button > * {
|
|
632
|
+
scale: -1 1;
|
|
633
|
+
}
|
|
634
|
+
|
|
625
635
|
.pf-v5-c-tabs__scroll-button:hover, .pf-v5-c-tabs__scroll-button:active, .pf-v5-c-tabs__scroll-button:focus {
|
|
626
636
|
--pf-v5-c-tabs__scroll-button--Color: var(--pf-v5-c-tabs__scroll-button--hover--Color);
|
|
627
637
|
}
|
|
@@ -490,6 +490,8 @@ $pf-v5-c-tabs--spacer-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl
|
|
|
490
490
|
}
|
|
491
491
|
|
|
492
492
|
.#{$tabs}__toggle-icon {
|
|
493
|
+
@include pf-v5-mirror-inline-on-rtl;
|
|
494
|
+
|
|
493
495
|
display: inline-block;
|
|
494
496
|
color: var(--#{$tabs}__toggle-icon--Color);
|
|
495
497
|
transition: var(--#{$tabs}__toggle-icon--Transition);
|
|
@@ -700,6 +702,8 @@ $pf-v5-c-tabs--spacer-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl
|
|
|
700
702
|
}
|
|
701
703
|
|
|
702
704
|
.#{$tabs}__link-toggle-icon {
|
|
705
|
+
@include pf-v5-mirror-inline-on-rtl;
|
|
706
|
+
|
|
703
707
|
align-self: end;
|
|
704
708
|
font-size: var(--#{$tabs}__link-toggle-icon--FontSize);
|
|
705
709
|
color: var(--#{$tabs}__link-toggle-icon--Color);
|
|
@@ -741,6 +745,10 @@ $pf-v5-c-tabs--spacer-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl
|
|
|
741
745
|
opacity: 0;
|
|
742
746
|
transition: margin var(--#{$tabs}__scroll-button--TransitionDuration--margin), transform var(--#{$tabs}__scroll-button--TransitionDuration--transform), opacity var(--#{$tabs}__scroll-button--TransitionDuration--opacity);
|
|
743
747
|
|
|
748
|
+
> * {
|
|
749
|
+
@include pf-v5-mirror-inline-on-rtl; // in breaking change, add an icon wrapper and move this style to the wrapper
|
|
750
|
+
}
|
|
751
|
+
|
|
744
752
|
&:hover,
|
|
745
753
|
&:active,
|
|
746
754
|
&:focus {
|
|
@@ -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
|
}
|