@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
package/patternfly.css
CHANGED
|
@@ -10246,6 +10246,9 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
|
|
|
10246
10246
|
transition: var(--pf-v5-c-data-list__toggle-icon--Transition);
|
|
10247
10247
|
transform: rotate(var(--pf-v5-c-data-list__toggle-icon--Rotate));
|
|
10248
10248
|
}
|
|
10249
|
+
:where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-data-list__toggle-icon {
|
|
10250
|
+
scale: -1 1;
|
|
10251
|
+
}
|
|
10249
10252
|
|
|
10250
10253
|
.pf-v5-c-data-list__item-content {
|
|
10251
10254
|
display: grid;
|
|
@@ -22560,37 +22563,85 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
|
|
|
22560
22563
|
--pf-v5-c-popover--MinWidth: auto;
|
|
22561
22564
|
--pf-v5-c-popover--MaxWidth: none;
|
|
22562
22565
|
}
|
|
22563
|
-
.pf-v5-c-popover.pf-m-top
|
|
22566
|
+
.pf-v5-c-popover:is(.pf-m-top,
|
|
22567
|
+
.pf-m-top-left,
|
|
22568
|
+
.pf-m-top-right,
|
|
22569
|
+
.pf-m-block-start,
|
|
22570
|
+
.pf-m-block-start-inline-start,
|
|
22571
|
+
.pf-m-block-start-inline-end) .pf-v5-c-popover__arrow {
|
|
22564
22572
|
inset-block-end: 0;
|
|
22565
22573
|
inset-inline-start: 50%;
|
|
22566
22574
|
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));
|
|
22567
22575
|
}
|
|
22568
|
-
.
|
|
22576
|
+
: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 {
|
|
22577
|
+
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));
|
|
22578
|
+
}
|
|
22579
|
+
|
|
22580
|
+
.pf-v5-c-popover:is(.pf-m-bottom,
|
|
22581
|
+
.pf-m-bottom-left,
|
|
22582
|
+
.pf-m-bottom-right,
|
|
22583
|
+
.pf-m-block-end,
|
|
22584
|
+
.pf-m-block-end-inline-start,
|
|
22585
|
+
.pf-m-block-end-inline-end) .pf-v5-c-popover__arrow {
|
|
22569
22586
|
inset-block-start: 0;
|
|
22570
22587
|
inset-inline-start: 50%;
|
|
22571
22588
|
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));
|
|
22572
22589
|
}
|
|
22573
|
-
.
|
|
22590
|
+
: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 {
|
|
22591
|
+
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));
|
|
22592
|
+
}
|
|
22593
|
+
|
|
22594
|
+
.pf-v5-c-popover:is(.pf-m-left,
|
|
22595
|
+
.pf-m-left-top,
|
|
22596
|
+
.pf-m-left-bottom,
|
|
22597
|
+
.pf-m-inline-start,
|
|
22598
|
+
.pf-m-inline-start-block-start,
|
|
22599
|
+
.pf-m-inline-start-block-end) .pf-v5-c-popover__arrow {
|
|
22574
22600
|
inset-block-start: 50%;
|
|
22575
22601
|
inset-inline-end: 0;
|
|
22576
22602
|
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));
|
|
22577
22603
|
}
|
|
22578
|
-
.
|
|
22604
|
+
: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 {
|
|
22605
|
+
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));
|
|
22606
|
+
}
|
|
22607
|
+
|
|
22608
|
+
.pf-v5-c-popover:is(.pf-m-right,
|
|
22609
|
+
.pf-m-right-top,
|
|
22610
|
+
.pf-m-right-bottom,
|
|
22611
|
+
.pf-m-inline-end,
|
|
22612
|
+
.pf-m-inline-end-block-start,
|
|
22613
|
+
.pf-m-inline-end-block-end) .pf-v5-c-popover__arrow {
|
|
22579
22614
|
inset-block-start: 50%;
|
|
22580
22615
|
inset-inline-start: 0;
|
|
22581
22616
|
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));
|
|
22582
22617
|
}
|
|
22583
|
-
.pf-v5-c-popover.pf-m-
|
|
22618
|
+
: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 {
|
|
22619
|
+
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));
|
|
22620
|
+
}
|
|
22621
|
+
|
|
22622
|
+
.pf-v5-c-popover:is(.pf-m-left-top,
|
|
22623
|
+
.pf-m-right-top,
|
|
22624
|
+
.pf-m-inline-start-block-start,
|
|
22625
|
+
.pf-m-inline-end-block-start) .pf-v5-c-popover__arrow {
|
|
22584
22626
|
inset-block-start: var(--pf-v5-c-popover__arrow--Height);
|
|
22585
22627
|
}
|
|
22586
|
-
.pf-v5-c-popover.pf-m-left-bottom
|
|
22628
|
+
.pf-v5-c-popover:is(.pf-m-left-bottom,
|
|
22629
|
+
.pf-m-right-bottom,
|
|
22630
|
+
.pf-m-inline-start-block-end,
|
|
22631
|
+
.pf-m-inline-end-block-end) .pf-v5-c-popover__arrow {
|
|
22587
22632
|
inset-block-start: auto;
|
|
22588
22633
|
inset-block-end: 0;
|
|
22589
22634
|
}
|
|
22590
|
-
.pf-v5-c-popover.pf-m-top-left
|
|
22635
|
+
.pf-v5-c-popover:is(.pf-m-top-left,
|
|
22636
|
+
.pf-m-bottom-left,
|
|
22637
|
+
.pf-m-block-start-inline-start,
|
|
22638
|
+
.pf-m-block-end-inline-start) .pf-v5-c-popover__arrow {
|
|
22591
22639
|
inset-inline-start: var(--pf-v5-c-popover__arrow--Width);
|
|
22592
22640
|
}
|
|
22593
|
-
.pf-v5-c-popover.pf-m-top-right
|
|
22641
|
+
.pf-v5-c-popover:is(.pf-m-top-right,
|
|
22642
|
+
.pf-m-bottom-right,
|
|
22643
|
+
.pf-m-block-start-inline-end,
|
|
22644
|
+
.pf-m-block-end-inline-end) .pf-v5-c-popover__arrow {
|
|
22594
22645
|
inset-inline-start: auto;
|
|
22595
22646
|
inset-inline-end: 0;
|
|
22596
22647
|
}
|
|
@@ -30261,37 +30312,85 @@ svg.pf-v5-c-spinner.pf-m-xl {
|
|
|
30261
30312
|
max-width: var(--pf-v5-c-tooltip--MaxWidth);
|
|
30262
30313
|
box-shadow: var(--pf-v5-c-tooltip--BoxShadow);
|
|
30263
30314
|
}
|
|
30264
|
-
.pf-v5-c-tooltip.pf-m-top
|
|
30315
|
+
.pf-v5-c-tooltip:is(.pf-m-top,
|
|
30316
|
+
.pf-m-top-left,
|
|
30317
|
+
.pf-m-top-right,
|
|
30318
|
+
.pf-m-block-start,
|
|
30319
|
+
.pf-m-block-start-inline-start,
|
|
30320
|
+
.pf-m-block-start-inline-end) .pf-v5-c-tooltip__arrow {
|
|
30265
30321
|
inset-block-end: 0;
|
|
30266
30322
|
inset-inline-start: 50%;
|
|
30267
30323
|
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));
|
|
30268
30324
|
}
|
|
30269
|
-
.
|
|
30325
|
+
: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 {
|
|
30326
|
+
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));
|
|
30327
|
+
}
|
|
30328
|
+
|
|
30329
|
+
.pf-v5-c-tooltip:is(.pf-m-bottom,
|
|
30330
|
+
.pf-m-bottom-left,
|
|
30331
|
+
.pf-m-bottom-right,
|
|
30332
|
+
.pf-m-block-end,
|
|
30333
|
+
.pf-m-block-end-inline-start,
|
|
30334
|
+
.pf-m-block-end-inline-end) .pf-v5-c-tooltip__arrow {
|
|
30270
30335
|
inset-block-start: 0;
|
|
30271
30336
|
inset-inline-start: 50%;
|
|
30272
30337
|
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));
|
|
30273
30338
|
}
|
|
30274
|
-
.
|
|
30339
|
+
: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 {
|
|
30340
|
+
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));
|
|
30341
|
+
}
|
|
30342
|
+
|
|
30343
|
+
.pf-v5-c-tooltip:is(.pf-m-left,
|
|
30344
|
+
.pf-m-left-top,
|
|
30345
|
+
.pf-m-left-bottom,
|
|
30346
|
+
.pf-m-inline-start,
|
|
30347
|
+
.pf-m-inline-start-block-start,
|
|
30348
|
+
.pf-m-inline-start-block-end) .pf-v5-c-tooltip__arrow {
|
|
30275
30349
|
inset-block-start: 50%;
|
|
30276
30350
|
inset-inline-end: 0;
|
|
30277
30351
|
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));
|
|
30278
30352
|
}
|
|
30279
|
-
.
|
|
30353
|
+
: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 {
|
|
30354
|
+
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));
|
|
30355
|
+
}
|
|
30356
|
+
|
|
30357
|
+
.pf-v5-c-tooltip:is(.pf-m-right,
|
|
30358
|
+
.pf-m-right-top,
|
|
30359
|
+
.pf-m-right-bottom,
|
|
30360
|
+
.pf-m-inline-end,
|
|
30361
|
+
.pf-m-inline-end-block-start,
|
|
30362
|
+
.pf-m-inline-end-block-end) .pf-v5-c-tooltip__arrow {
|
|
30280
30363
|
inset-block-start: 50%;
|
|
30281
30364
|
inset-inline-start: 0;
|
|
30282
30365
|
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));
|
|
30283
30366
|
}
|
|
30284
|
-
.pf-v5-c-tooltip.pf-m-
|
|
30367
|
+
: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 {
|
|
30368
|
+
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));
|
|
30369
|
+
}
|
|
30370
|
+
|
|
30371
|
+
.pf-v5-c-tooltip:is(.pf-m-left-top,
|
|
30372
|
+
.pf-m-right-top,
|
|
30373
|
+
.pf-m-inline-start-block-start,
|
|
30374
|
+
.pf-m-inline-end-block-start) .pf-v5-c-tooltip__arrow {
|
|
30285
30375
|
inset-block-start: var(--pf-v5-c-tooltip__arrow--Height);
|
|
30286
30376
|
}
|
|
30287
|
-
.pf-v5-c-tooltip.pf-m-left-bottom
|
|
30377
|
+
.pf-v5-c-tooltip:is(.pf-m-left-bottom,
|
|
30378
|
+
.pf-m-right-bottom,
|
|
30379
|
+
.pf-m-inline-start-block-end,
|
|
30380
|
+
.pf-m-inline-end-block-end) .pf-v5-c-tooltip__arrow {
|
|
30288
30381
|
inset-block-start: auto;
|
|
30289
30382
|
inset-block-end: 0;
|
|
30290
30383
|
}
|
|
30291
|
-
.pf-v5-c-tooltip.pf-m-top-left
|
|
30384
|
+
.pf-v5-c-tooltip:is(.pf-m-top-left,
|
|
30385
|
+
.pf-m-bottom-left,
|
|
30386
|
+
.pf-m-block-start-block-start,
|
|
30387
|
+
.pf-m-block-end-block-start) .pf-v5-c-tooltip__arrow {
|
|
30292
30388
|
inset-inline-start: var(--pf-v5-c-tooltip__arrow--Width);
|
|
30293
30389
|
}
|
|
30294
|
-
.pf-v5-c-tooltip.pf-m-top-right
|
|
30390
|
+
.pf-v5-c-tooltip:is(.pf-m-top-right,
|
|
30391
|
+
.pf-m-bottom-right,
|
|
30392
|
+
.pf-m-block-start-block-end,
|
|
30393
|
+
.pf-m-block-end-block-end) .pf-v5-c-tooltip__arrow {
|
|
30295
30394
|
inset-inline-start: auto;
|
|
30296
30395
|
inset-inline-end: 0;
|
|
30297
30396
|
}
|
|
@@ -30308,7 +30407,7 @@ svg.pf-v5-c-spinner.pf-m-xl {
|
|
|
30308
30407
|
word-break: break-word;
|
|
30309
30408
|
background-color: var(--pf-v5-c-tooltip__content--BackgroundColor);
|
|
30310
30409
|
}
|
|
30311
|
-
.pf-v5-c-tooltip__content.pf-m-text-align-left {
|
|
30410
|
+
.pf-v5-c-tooltip__content:is(.pf-m-text-align-left, .pf-m-text-align-start) {
|
|
30312
30411
|
text-align: start;
|
|
30313
30412
|
}
|
|
30314
30413
|
|
|
@@ -30634,6 +30733,9 @@ svg.pf-v5-c-spinner.pf-m-xl {
|
|
|
30634
30733
|
transition: var(--pf-v5-c-tree-view__node-toggle-icon--Transition);
|
|
30635
30734
|
transform: rotate(var(--pf-v5-c-tree-view__node-toggle-icon--Rotate));
|
|
30636
30735
|
}
|
|
30736
|
+
:where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-tree-view__node-toggle-icon {
|
|
30737
|
+
scale: -1 1;
|
|
30738
|
+
}
|
|
30637
30739
|
|
|
30638
30740
|
.pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item {
|
|
30639
30741
|
--pf-v5-c-tree-view__node-toggle-icon--Rotate: var(--pf-v5-c-tree-view__node-toggle-icon--base--Rotate);
|
|
@@ -30723,6 +30825,9 @@ svg.pf-v5-c-spinner.pf-m-xl {
|
|
|
30723
30825
|
border: 0;
|
|
30724
30826
|
transform: translateX(var(--pf-v5-c-tree-view__list-item__list-item__node-toggle--TranslateX));
|
|
30725
30827
|
}
|
|
30828
|
+
:where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-tree-view__node-toggle {
|
|
30829
|
+
transform: translateX(calc(var(--pf-v5-c-tree-view__list-item__list-item__node-toggle--TranslateX) * var(--pf-v5-global--inverse--multiplier)));
|
|
30830
|
+
}
|
|
30726
30831
|
|
|
30727
30832
|
.pf-v5-c-tree-view__node-title.pf-m-truncate,
|
|
30728
30833
|
.pf-v5-c-tree-view__node-text.pf-m-truncate {
|