@patternfly-java/core 0.6.16 → 0.7.1
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/core.css +153 -45
- package/package.json +1 -1
package/core.css
CHANGED
|
@@ -22,82 +22,193 @@
|
|
|
22
22
|
}
|
|
23
23
|
|
|
24
24
|
/* ===================================================================
|
|
25
|
-
|
|
25
|
+
Shared styles for components using the popover API
|
|
26
26
|
=================================================================== */
|
|
27
|
-
|
|
28
|
-
|
|
27
|
+
|
|
28
|
+
/* Reset [popover] UA styles */
|
|
29
|
+
.pf-v6-c-tooltip[popover],
|
|
30
|
+
.pf-v6-c-popover[popover],
|
|
31
|
+
.pf-v6-c-overlay {
|
|
29
32
|
border: none;
|
|
30
33
|
padding: 0;
|
|
31
34
|
background: none;
|
|
32
35
|
overflow: visible;
|
|
33
36
|
width: max-content;
|
|
34
|
-
max-width: var(--pf-v6-c-tooltip--MaxWidth);
|
|
35
37
|
position: fixed;
|
|
36
38
|
}
|
|
37
39
|
|
|
38
|
-
/*
|
|
39
|
-
|
|
40
|
+
/* ===================================================================
|
|
41
|
+
CSS anchor positioning rules in clockwise order
|
|
42
|
+
|
|
43
|
+
top-left top top-right
|
|
44
|
+
\ | /
|
|
45
|
+
\ | /
|
|
46
|
+
left-- ( ) --right
|
|
47
|
+
/ | \
|
|
48
|
+
/ | \
|
|
49
|
+
bottom-left bottom bottom-right
|
|
50
|
+
=================================================================== */
|
|
51
|
+
|
|
52
|
+
.pf-v6-c-tooltip[popover].pf-m-top,
|
|
53
|
+
.pf-v6-c-popover[popover].pf-m-top,
|
|
54
|
+
.pf-v6-c-overlay.pf-m-top {
|
|
40
55
|
position-area: block-start;
|
|
41
56
|
}
|
|
42
57
|
|
|
43
|
-
.pf-v6-c-
|
|
58
|
+
.pf-v6-c-overlay.pf-m-top-right {
|
|
59
|
+
bottom: anchor(top);
|
|
60
|
+
right: anchor(right);
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
.pf-v6-c-tooltip[popover].pf-m-right,
|
|
64
|
+
.pf-v6-c-popover[popover].pf-m-right,
|
|
65
|
+
.pf-v6-c-overlay.pf-m-right {
|
|
66
|
+
position-area: inline-end;
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
.pf-v6-c-overlay.pf-m-bottom-right {
|
|
70
|
+
top: anchor(bottom);
|
|
71
|
+
right: anchor(right);
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
.pf-v6-c-tooltip[popover].pf-m-bottom,
|
|
75
|
+
.pf-v6-c-popover[popover].pf-m-bottom,
|
|
76
|
+
.pf-v6-c-overlay.pf-m-bottom {
|
|
44
77
|
position-area: block-end;
|
|
45
78
|
}
|
|
46
79
|
|
|
47
|
-
.pf-v6-c-
|
|
80
|
+
.pf-v6-c-overlay.pf-m-bottom-left {
|
|
81
|
+
top: anchor(bottom);
|
|
82
|
+
left: anchor(left);
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
.pf-v6-c-tooltip[popover].pf-m-left,
|
|
86
|
+
.pf-v6-c-popover[popover].pf-m-left,
|
|
87
|
+
.pf-v6-c-overlay.pf-m-left {
|
|
48
88
|
position-area: inline-start;
|
|
49
89
|
}
|
|
50
90
|
|
|
51
|
-
.pf-v6-c-
|
|
52
|
-
|
|
91
|
+
.pf-v6-c-overlay.pf-m-top-left {
|
|
92
|
+
bottom: anchor(top);
|
|
93
|
+
left: anchor(left);
|
|
53
94
|
}
|
|
54
95
|
|
|
55
96
|
/* ===================================================================
|
|
56
|
-
|
|
97
|
+
CSS-native positioning
|
|
98
|
+
|
|
99
|
+
Activated by the pf-m-css-positioning modifier, which is added
|
|
100
|
+
by Overlay.attach() when the browser supports CSS Anchor Positioning.
|
|
57
101
|
=================================================================== */
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
background: none;
|
|
63
|
-
overflow: visible;
|
|
64
|
-
inset: auto;
|
|
65
|
-
width: max-content;
|
|
66
|
-
max-width: var(--pf-v6-c-popover--MaxWidth);
|
|
67
|
-
position: fixed;
|
|
102
|
+
|
|
103
|
+
/* container-type for @container anchored() queries */
|
|
104
|
+
.pf-v6-c-tooltip[popover].pf-m-css-positioning,
|
|
105
|
+
.pf-v6-c-popover[popover].pf-m-css-positioning {
|
|
68
106
|
container-type: anchored;
|
|
69
107
|
}
|
|
70
108
|
|
|
71
|
-
/*
|
|
72
|
-
.pf-v6-c-popover[popover].pf-m-
|
|
73
|
-
|
|
109
|
+
/* position-try-fallbacks for tooltip and popover */
|
|
110
|
+
.pf-v6-c-popover[popover].pf-m-css-positioning.pf-m-bottom,
|
|
111
|
+
.pf-v6-c-popover[popover].pf-m-css-positioning.pf-m-top,
|
|
112
|
+
.pf-v6-c-tooltip[popover].pf-m-css-positioning.pf-m-bottom,
|
|
113
|
+
.pf-v6-c-tooltip[popover].pf-m-css-positioning.pf-m-top,
|
|
114
|
+
.pf-v6-c-overlay.pf-m-css-positioning.pf-m-bottom,
|
|
115
|
+
.pf-v6-c-overlay.pf-m-css-positioning.pf-m-bottom-left,
|
|
116
|
+
.pf-v6-c-overlay.pf-m-css-positioning.pf-m-bottom-right,
|
|
117
|
+
.pf-v6-c-overlay.pf-m-css-positioning.pf-m-top,
|
|
118
|
+
.pf-v6-c-overlay.pf-m-css-positioning.pf-m-top-left,
|
|
119
|
+
.pf-v6-c-overlay.pf-m-css-positioning.pf-m-top-right {
|
|
74
120
|
position-try-fallbacks: flip-block;
|
|
75
121
|
}
|
|
76
122
|
|
|
77
|
-
.pf-v6-c-popover[popover].pf-m-
|
|
78
|
-
|
|
79
|
-
|
|
123
|
+
.pf-v6-c-popover[popover].pf-m-css-positioning.pf-m-left,
|
|
124
|
+
.pf-v6-c-popover[popover].pf-m-css-positioning.pf-m-right,
|
|
125
|
+
.pf-v6-c-tooltip[popover].pf-m-css-positioning.pf-m-left,
|
|
126
|
+
.pf-v6-c-tooltip[popover].pf-m-css-positioning.pf-m-right,
|
|
127
|
+
.pf-v6-c-overlay.pf-m-css-positioning.pf-m-left,
|
|
128
|
+
.pf-v6-c-overlay.pf-m-css-positioning.pf-m-right {
|
|
129
|
+
position-try-fallbacks: flip-inline;
|
|
80
130
|
}
|
|
81
131
|
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
132
|
+
/* ===================================================================
|
|
133
|
+
Tooltip-specific styles
|
|
134
|
+
=================================================================== */
|
|
135
|
+
|
|
136
|
+
.pf-v6-c-tooltip[popover] {
|
|
137
|
+
max-width: var(--pf-v6-c-tooltip--MaxWidth);
|
|
85
138
|
}
|
|
86
139
|
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
140
|
+
/* ===================================================================
|
|
141
|
+
Popover-specific styles
|
|
142
|
+
=================================================================== */
|
|
143
|
+
|
|
144
|
+
.pf-v6-c-popover[popover] {
|
|
145
|
+
inset: auto;
|
|
146
|
+
max-width: var(--pf-v6-c-popover--MaxWidth);
|
|
147
|
+
/* Reset font-weight for popovers nested inside bold containers (e.g. description list terms) */
|
|
148
|
+
font-weight: var(--pf-t--global--font--weight--body--default, 400);
|
|
90
149
|
}
|
|
91
150
|
|
|
92
|
-
/*
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
151
|
+
/* ===================================================================
|
|
152
|
+
Overlay-specific styles
|
|
153
|
+
=================================================================== */
|
|
154
|
+
|
|
155
|
+
.pf-v6-c-overlay {
|
|
156
|
+
inset: auto;
|
|
157
|
+
}
|
|
96
158
|
|
|
97
159
|
/*
|
|
98
|
-
|
|
160
|
+
Arrow correction after CSS flip (requires @container anchored() support).
|
|
161
|
+
LightningCSS can't parse these yet (parcel-bundler/lightningcss#1176) — the
|
|
162
|
+
packager/optimizer also fails, not just the transformer. So these rules must be
|
|
163
|
+
injected at runtime via adoptedStyleSheets (see showcase/src/web/main.js).
|
|
164
|
+
Uncomment once lightningcss supports @container anchored().
|
|
165
|
+
|
|
166
|
+
@container anchored(fallback: flip-block) {
|
|
167
|
+
.pf-v6-c-tooltip[popover].pf-m-css-positioning.pf-m-top .pf-v6-c-tooltip__arrow {
|
|
168
|
+
--pf-v6-c-tooltip__arrow--InsetBlockStart: var(--pf-v6-c-tooltip--m-bottom--InsetBlockStart, 0);
|
|
169
|
+
--pf-v6-c-tooltip__arrow--InsetBlockEnd: auto;
|
|
170
|
+
--pf-v6-c-tooltip__arrow--InsetInlineStart: var(--pf-v6-c-tooltip--m-bottom--InsetInlineStart, 50%);
|
|
171
|
+
--pf-v6-c-tooltip__arrow--TranslateX: var(--pf-v6-c-tooltip__arrow--m-bottom--TranslateX);
|
|
172
|
+
--pf-v6-c-tooltip__arrow--TranslateY: var(--pf-v6-c-tooltip__arrow--m-bottom--TranslateY);
|
|
173
|
+
--pf-v6-c-tooltip__arrow--Rotate: var(--pf-v6-c-tooltip__arrow--m-bottom--Rotate);
|
|
174
|
+
}
|
|
175
|
+
}
|
|
176
|
+
|
|
177
|
+
@container anchored(fallback: flip-block) {
|
|
178
|
+
.pf-v6-c-tooltip[popover].pf-m-css-positioning.pf-m-bottom .pf-v6-c-tooltip__arrow {
|
|
179
|
+
--pf-v6-c-tooltip__arrow--InsetBlockStart: auto;
|
|
180
|
+
--pf-v6-c-tooltip__arrow--InsetBlockEnd: var(--pf-v6-c-tooltip--m-top--InsetBlockEnd, 0);
|
|
181
|
+
--pf-v6-c-tooltip__arrow--InsetInlineStart: var(--pf-v6-c-tooltip--m-top--InsetInlineStart, 50%);
|
|
182
|
+
--pf-v6-c-tooltip__arrow--TranslateX: var(--pf-v6-c-tooltip__arrow--m-top--TranslateX);
|
|
183
|
+
--pf-v6-c-tooltip__arrow--TranslateY: var(--pf-v6-c-tooltip__arrow--m-top--TranslateY);
|
|
184
|
+
--pf-v6-c-tooltip__arrow--Rotate: var(--pf-v6-c-tooltip__arrow--m-top--Rotate);
|
|
185
|
+
}
|
|
186
|
+
}
|
|
187
|
+
|
|
188
|
+
@container anchored(fallback: flip-inline) {
|
|
189
|
+
.pf-v6-c-tooltip[popover].pf-m-css-positioning.pf-m-left .pf-v6-c-tooltip__arrow {
|
|
190
|
+
--pf-v6-c-tooltip__arrow--InsetBlockStart: var(--pf-v6-c-tooltip--m-right--InsetBlockStart, 50%);
|
|
191
|
+
--pf-v6-c-tooltip__arrow--InsetInlineStart: var(--pf-v6-c-tooltip--m-right--InsetInlineStart, 0);
|
|
192
|
+
--pf-v6-c-tooltip__arrow--InsetInlineEnd: auto;
|
|
193
|
+
--pf-v6-c-tooltip__arrow--TranslateX: var(--pf-v6-c-tooltip__arrow--m-right--TranslateX);
|
|
194
|
+
--pf-v6-c-tooltip__arrow--TranslateY: var(--pf-v6-c-tooltip__arrow--m-right--TranslateY);
|
|
195
|
+
--pf-v6-c-tooltip__arrow--Rotate: var(--pf-v6-c-tooltip__arrow--m-right--Rotate);
|
|
196
|
+
}
|
|
197
|
+
}
|
|
198
|
+
|
|
199
|
+
@container anchored(fallback: flip-inline) {
|
|
200
|
+
.pf-v6-c-tooltip[popover].pf-m-css-positioning.pf-m-right .pf-v6-c-tooltip__arrow {
|
|
201
|
+
--pf-v6-c-tooltip__arrow--InsetBlockStart: var(--pf-v6-c-tooltip--m-left--InsetBlockStart, 50%);
|
|
202
|
+
--pf-v6-c-tooltip__arrow--InsetInlineStart: auto;
|
|
203
|
+
--pf-v6-c-tooltip__arrow--InsetInlineEnd: var(--pf-v6-c-tooltip--m-left--InsetInlineEnd, 0);
|
|
204
|
+
--pf-v6-c-tooltip__arrow--TranslateX: var(--pf-v6-c-tooltip__arrow--m-left--TranslateX);
|
|
205
|
+
--pf-v6-c-tooltip__arrow--TranslateY: var(--pf-v6-c-tooltip__arrow--m-left--TranslateY);
|
|
206
|
+
--pf-v6-c-tooltip__arrow--Rotate: var(--pf-v6-c-tooltip__arrow--m-left--Rotate);
|
|
207
|
+
}
|
|
208
|
+
}
|
|
209
|
+
|
|
99
210
|
@container anchored(fallback: flip-block) {
|
|
100
|
-
.pf-v6-c-popover[popover].pf-m-top .pf-v6-c-popover__arrow {
|
|
211
|
+
.pf-v6-c-popover[popover].pf-m-css-positioning.pf-m-top .pf-v6-c-popover__arrow {
|
|
101
212
|
--pf-v6-c-popover__arrow--InsetBlockStart: var(--pf-v6-c-popover--m-bottom--InsetBlockStart, 0);
|
|
102
213
|
--pf-v6-c-popover__arrow--InsetBlockEnd: auto;
|
|
103
214
|
--pf-v6-c-popover__arrow--InsetInlineStart: var(--pf-v6-c-popover--m-bottom--InsetInlineStart, 50%);
|
|
@@ -107,9 +218,8 @@ Then remove the hack in showcase/src/web/main.js
|
|
|
107
218
|
}
|
|
108
219
|
}
|
|
109
220
|
|
|
110
|
-
!* Was bottom, flipped to top *!
|
|
111
221
|
@container anchored(fallback: flip-block) {
|
|
112
|
-
.pf-v6-c-popover[popover].pf-m-bottom .pf-v6-c-popover__arrow {
|
|
222
|
+
.pf-v6-c-popover[popover].pf-m-css-positioning.pf-m-bottom .pf-v6-c-popover__arrow {
|
|
113
223
|
--pf-v6-c-popover__arrow--InsetBlockStart: auto;
|
|
114
224
|
--pf-v6-c-popover__arrow--InsetBlockEnd: var(--pf-v6-c-popover--m-top--InsetBlockEnd, 0);
|
|
115
225
|
--pf-v6-c-popover__arrow--InsetInlineStart: var(--pf-v6-c-popover--m-top--InsetInlineStart, 50%);
|
|
@@ -119,9 +229,8 @@ Then remove the hack in showcase/src/web/main.js
|
|
|
119
229
|
}
|
|
120
230
|
}
|
|
121
231
|
|
|
122
|
-
!* Was left, flipped to right *!
|
|
123
232
|
@container anchored(fallback: flip-inline) {
|
|
124
|
-
.pf-v6-c-popover[popover].pf-m-left .pf-v6-c-popover__arrow {
|
|
233
|
+
.pf-v6-c-popover[popover].pf-m-css-positioning.pf-m-left .pf-v6-c-popover__arrow {
|
|
125
234
|
--pf-v6-c-popover__arrow--InsetBlockStart: var(--pf-v6-c-popover--m-right--InsetBlockStart, 50%);
|
|
126
235
|
--pf-v6-c-popover__arrow--InsetInlineStart: var(--pf-v6-c-popover--m-right--InsetInlineStart, 0);
|
|
127
236
|
--pf-v6-c-popover__arrow--InsetInlineEnd: auto;
|
|
@@ -131,9 +240,8 @@ Then remove the hack in showcase/src/web/main.js
|
|
|
131
240
|
}
|
|
132
241
|
}
|
|
133
242
|
|
|
134
|
-
!* Was right, flipped to left *!
|
|
135
243
|
@container anchored(fallback: flip-inline) {
|
|
136
|
-
.pf-v6-c-popover[popover].pf-m-right .pf-v6-c-popover__arrow {
|
|
244
|
+
.pf-v6-c-popover[popover].pf-m-css-positioning.pf-m-right .pf-v6-c-popover__arrow {
|
|
137
245
|
--pf-v6-c-popover__arrow--InsetBlockStart: var(--pf-v6-c-popover--m-left--InsetBlockStart, 50%);
|
|
138
246
|
--pf-v6-c-popover__arrow--InsetInlineStart: auto;
|
|
139
247
|
--pf-v6-c-popover__arrow--InsetInlineEnd: var(--pf-v6-c-popover--m-left--InsetInlineEnd, 0);
|