@patternfly-java/core 0.6.15 → 0.7.0
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 +234 -1
- package/package.json +1 -1
package/core.css
CHANGED
|
@@ -13,8 +13,241 @@
|
|
|
13
13
|
* See the License for the specific language governing permissions and
|
|
14
14
|
* limitations under the License.
|
|
15
15
|
*/
|
|
16
|
-
/*
|
|
16
|
+
/* ===================================================================
|
|
17
|
+
Core modifiers
|
|
18
|
+
=================================================================== */
|
|
17
19
|
|
|
18
20
|
.pf-m-filtered {
|
|
19
21
|
display: none !important;
|
|
20
22
|
}
|
|
23
|
+
|
|
24
|
+
/* ===================================================================
|
|
25
|
+
Shared styles for components using the popover API
|
|
26
|
+
=================================================================== */
|
|
27
|
+
|
|
28
|
+
/* Reset [popover] UA styles */
|
|
29
|
+
.pf-v6-c-tooltip[popover],
|
|
30
|
+
.pf-v6-c-popover[popover],
|
|
31
|
+
.pf-v6-c-overlay {
|
|
32
|
+
border: none;
|
|
33
|
+
padding: 0;
|
|
34
|
+
background: none;
|
|
35
|
+
overflow: visible;
|
|
36
|
+
width: max-content;
|
|
37
|
+
position: fixed;
|
|
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 {
|
|
55
|
+
position-area: block-start;
|
|
56
|
+
}
|
|
57
|
+
|
|
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 {
|
|
77
|
+
position-area: block-end;
|
|
78
|
+
}
|
|
79
|
+
|
|
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 {
|
|
88
|
+
position-area: inline-start;
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
.pf-v6-c-overlay.pf-m-top-left {
|
|
92
|
+
bottom: anchor(top);
|
|
93
|
+
left: anchor(left);
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
/* ===================================================================
|
|
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.
|
|
101
|
+
=================================================================== */
|
|
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 {
|
|
106
|
+
container-type: anchored;
|
|
107
|
+
}
|
|
108
|
+
|
|
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 {
|
|
120
|
+
position-try-fallbacks: flip-block;
|
|
121
|
+
}
|
|
122
|
+
|
|
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;
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
/* ===================================================================
|
|
133
|
+
Tooltip-specific styles
|
|
134
|
+
=================================================================== */
|
|
135
|
+
|
|
136
|
+
.pf-v6-c-tooltip[popover] {
|
|
137
|
+
max-width: var(--pf-v6-c-tooltip--MaxWidth);
|
|
138
|
+
}
|
|
139
|
+
|
|
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);
|
|
149
|
+
}
|
|
150
|
+
|
|
151
|
+
/* ===================================================================
|
|
152
|
+
Overlay-specific styles
|
|
153
|
+
=================================================================== */
|
|
154
|
+
|
|
155
|
+
.pf-v6-c-overlay {
|
|
156
|
+
inset: auto;
|
|
157
|
+
}
|
|
158
|
+
|
|
159
|
+
/*
|
|
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
|
+
|
|
210
|
+
@container anchored(fallback: flip-block) {
|
|
211
|
+
.pf-v6-c-popover[popover].pf-m-css-positioning.pf-m-top .pf-v6-c-popover__arrow {
|
|
212
|
+
--pf-v6-c-popover__arrow--InsetBlockStart: var(--pf-v6-c-popover--m-bottom--InsetBlockStart, 0);
|
|
213
|
+
--pf-v6-c-popover__arrow--InsetBlockEnd: auto;
|
|
214
|
+
--pf-v6-c-popover__arrow--InsetInlineStart: var(--pf-v6-c-popover--m-bottom--InsetInlineStart, 50%);
|
|
215
|
+
--pf-v6-c-popover__arrow--TranslateX: var(--pf-v6-c-popover__arrow--m-bottom--TranslateX);
|
|
216
|
+
--pf-v6-c-popover__arrow--TranslateY: var(--pf-v6-c-popover__arrow--m-bottom--TranslateY);
|
|
217
|
+
--pf-v6-c-popover__arrow--Rotate: var(--pf-v6-c-popover__arrow--m-bottom--Rotate);
|
|
218
|
+
}
|
|
219
|
+
}
|
|
220
|
+
|
|
221
|
+
@container anchored(fallback: flip-block) {
|
|
222
|
+
.pf-v6-c-popover[popover].pf-m-css-positioning.pf-m-bottom .pf-v6-c-popover__arrow {
|
|
223
|
+
--pf-v6-c-popover__arrow--InsetBlockStart: auto;
|
|
224
|
+
--pf-v6-c-popover__arrow--InsetBlockEnd: var(--pf-v6-c-popover--m-top--InsetBlockEnd, 0);
|
|
225
|
+
--pf-v6-c-popover__arrow--InsetInlineStart: var(--pf-v6-c-popover--m-top--InsetInlineStart, 50%);
|
|
226
|
+
--pf-v6-c-popover__arrow--TranslateX: var(--pf-v6-c-popover__arrow--m-top--TranslateX);
|
|
227
|
+
--pf-v6-c-popover__arrow--TranslateY: var(--pf-v6-c-popover__arrow--m-top--TranslateY);
|
|
228
|
+
--pf-v6-c-popover__arrow--Rotate: var(--pf-v6-c-popover__arrow--m-top--Rotate);
|
|
229
|
+
}
|
|
230
|
+
}
|
|
231
|
+
|
|
232
|
+
@container anchored(fallback: flip-inline) {
|
|
233
|
+
.pf-v6-c-popover[popover].pf-m-css-positioning.pf-m-left .pf-v6-c-popover__arrow {
|
|
234
|
+
--pf-v6-c-popover__arrow--InsetBlockStart: var(--pf-v6-c-popover--m-right--InsetBlockStart, 50%);
|
|
235
|
+
--pf-v6-c-popover__arrow--InsetInlineStart: var(--pf-v6-c-popover--m-right--InsetInlineStart, 0);
|
|
236
|
+
--pf-v6-c-popover__arrow--InsetInlineEnd: auto;
|
|
237
|
+
--pf-v6-c-popover__arrow--TranslateX: var(--pf-v6-c-popover__arrow--m-right--TranslateX);
|
|
238
|
+
--pf-v6-c-popover__arrow--TranslateY: var(--pf-v6-c-popover__arrow--m-right--TranslateY);
|
|
239
|
+
--pf-v6-c-popover__arrow--Rotate: var(--pf-v6-c-popover__arrow--m-right--Rotate);
|
|
240
|
+
}
|
|
241
|
+
}
|
|
242
|
+
|
|
243
|
+
@container anchored(fallback: flip-inline) {
|
|
244
|
+
.pf-v6-c-popover[popover].pf-m-css-positioning.pf-m-right .pf-v6-c-popover__arrow {
|
|
245
|
+
--pf-v6-c-popover__arrow--InsetBlockStart: var(--pf-v6-c-popover--m-left--InsetBlockStart, 50%);
|
|
246
|
+
--pf-v6-c-popover__arrow--InsetInlineStart: auto;
|
|
247
|
+
--pf-v6-c-popover__arrow--InsetInlineEnd: var(--pf-v6-c-popover--m-left--InsetInlineEnd, 0);
|
|
248
|
+
--pf-v6-c-popover__arrow--TranslateX: var(--pf-v6-c-popover__arrow--m-left--TranslateX);
|
|
249
|
+
--pf-v6-c-popover__arrow--TranslateY: var(--pf-v6-c-popover__arrow--m-left--TranslateY);
|
|
250
|
+
--pf-v6-c-popover__arrow--Rotate: var(--pf-v6-c-popover__arrow--m-left--Rotate);
|
|
251
|
+
}
|
|
252
|
+
}
|
|
253
|
+
*/
|