@patternfly/patternfly 6.3.0-prerelease.1 → 6.3.0-prerelease.11
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/README.md +1 -1
- package/assets/images/icon-help.hbs +3 -0
- package/components/Alert/alert-group.css +52 -31
- package/components/Alert/alert-group.scss +77 -46
- package/components/CodeEditor/code-editor.css +3 -0
- package/components/CodeEditor/code-editor.scss +3 -1
- package/components/Drawer/drawer.css +28 -14
- package/components/Drawer/drawer.scss +28 -9
- package/components/ExpandableSection/expandable-section.css +30 -0
- package/components/ExpandableSection/expandable-section.scss +30 -0
- package/components/MenuToggle/menu-toggle.css +8 -4
- package/components/MenuToggle/menu-toggle.scss +15 -3
- package/components/Page/page.css +4 -3
- package/components/Page/page.scss +4 -2
- package/components/Skeleton/skeleton.css +22 -2
- package/components/Skeleton/skeleton.scss +25 -3
- package/components/Tabs/tabs.css +65 -0
- package/components/Tabs/tabs.scss +77 -0
- package/components/Truncate/truncate.css +5 -0
- package/components/Truncate/truncate.scss +6 -0
- package/components/_index.css +216 -54
- package/docs/components/Button/examples/Button.md +13 -1
- package/docs/components/CodeEditor/examples/CodeEditor.md +26 -2
- package/docs/components/Divider/examples/Divider.md +1 -1
- package/docs/components/Drawer/examples/Drawer.md +4 -0
- package/docs/components/Form/examples/Form.md +156 -12
- package/docs/components/MenuToggle/examples/MenuToggle.md +3 -4
- package/docs/components/ModalBox/examples/ModalBox.md +13 -1
- package/docs/components/Page/examples/Page.md +1 -0
- package/docs/components/Table/examples/Table.md +30 -6
- package/docs/components/Tabs/examples/Tabs.md +6741 -12
- package/docs/components/Truncate/examples/Truncate.md +53 -10
- package/docs/demos/Card/examples/Card.md +57 -0
- package/docs/demos/DescriptionList/examples/DescriptionList.md +38 -0
- package/docs/demos/Drawer/examples/Drawer.md +38 -0
- package/docs/demos/Form/examples/BasicForms.md +130 -10
- package/docs/demos/Masthead/examples/Masthead.md +1 -1
- package/docs/demos/Modal/examples/Modal.md +39 -3
- package/docs/demos/Nav/examples/Nav.md +2 -2
- package/docs/demos/Page/examples/Page.md +355 -0
- package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +13 -1
- package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +76 -0
- package/docs/demos/Table/examples/Table.md +67 -23
- package/docs/demos/Tabs/examples/Tabs.md +570 -0
- package/package.json +6 -6
- package/patternfly-no-globals.css +216 -54
- package/patternfly.css +216 -54
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
package/components/_index.css
CHANGED
|
@@ -597,27 +597,45 @@
|
|
|
597
597
|
var(--pf-v6-c-alert-group--m-toast__item--c-alert--TransitionDuration)
|
|
598
598
|
var(--pf-v6-c-alert-group--m-toast__item--c-alert--TransitionTimingFunction)
|
|
599
599
|
0s;
|
|
600
|
-
--pf-v6-c-alert-group--m-toast__item--m-
|
|
601
|
-
--pf-v6-c-alert-group--m-toast__item--m-
|
|
602
|
-
--pf-v6-c-alert-group--m-toast__item--m-
|
|
603
|
-
--pf-v6-c-alert-group--m-toast__item--m-
|
|
604
|
-
--pf-v6-c-alert-group--m-toast__item--m-
|
|
605
|
-
--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDuration--
|
|
606
|
-
--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionTimingFunction--
|
|
607
|
-
--pf-v6-c-alert-group--m-toast__item--m-offstage-right--
|
|
608
|
-
--pf-v6-c-alert-group--m-toast__item--m-offstage-right--
|
|
609
|
-
--pf-v6-c-alert-group--m-toast__item--m-offstage-right--
|
|
610
|
-
--pf-v6-c-alert-group--m-toast__item--m-
|
|
611
|
-
--pf-v6-c-alert-group--m-toast__item--m-
|
|
612
|
-
--pf-v6-c-alert-group--m-toast__item--m-
|
|
613
|
-
--pf-v6-c-alert-group--m-toast__item--m-
|
|
614
|
-
--pf-v6-c-alert-group--m-toast__item--m-
|
|
615
|
-
--pf-v6-c-alert-group--m-toast__item--m-
|
|
616
|
-
--pf-v6-c-alert-group--m-toast__item--m-
|
|
617
|
-
--pf-v6-c-alert-group--m-toast__item--m-
|
|
618
|
-
|
|
619
|
-
|
|
620
|
-
|
|
600
|
+
--pf-v6-c-alert-group--m-toast__item--m-outgoing--TransitionDuration--opacity--default: var(--pf-t--global--motion--duration--fade--default);
|
|
601
|
+
--pf-v6-c-alert-group--m-toast__item--m-outgoing--TransitionTimingFunction--opacity--default: var(--pf-t--global--motion--timing-function--accelerate);
|
|
602
|
+
--pf-v6-c-alert-group--m-toast__item--m-outgoing--TransitionDelay--grid-template-rows--default: var(--pf-t--global--motion--duration--fade--default);
|
|
603
|
+
--pf-v6-c-alert-group--m-toast__item--m-outgoing--TransitionDelay--margin-block--default: var(--pf-t--global--motion--duration--fade--default);
|
|
604
|
+
--pf-v6-c-alert-group--m-toast__item--m-outgoing--c-alert--TransitionDelay--default: var(--pf-t--global--motion--duration--fade--default);
|
|
605
|
+
--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDuration--opacity--default: initial;
|
|
606
|
+
--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionTimingFunction--opacity--default: initial;
|
|
607
|
+
--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDelay--grid-template-rows--default: initial;
|
|
608
|
+
--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDelay--margin-block--default: initial;
|
|
609
|
+
--pf-v6-c-alert-group--m-toast__item--m-offstage-right--c-alert--TransitionDelay--default: initial;
|
|
610
|
+
--pf-v6-c-alert-group--m-toast__item--m-outgoing--TransitionDuration--transform: var(--pf-t--global--motion--duration--slide-out--short);
|
|
611
|
+
--pf-v6-c-alert-group--m-toast__item--m-outgoing--TransitionTimingFunction--transform: var(--pf-t--global--motion--timing-function--accelerate);
|
|
612
|
+
--pf-v6-c-alert-group--m-toast__item--m-outgoing--TransitionDuration--opacity: var(--pf-t--global--motion--duration--slide-out--short);
|
|
613
|
+
--pf-v6-c-alert-group--m-toast__item--m-outgoing--TransitionTimingFunction--opacity: var(--pf-t--global--motion--timing-function--accelerate);
|
|
614
|
+
--pf-v6-c-alert-group--m-toast__item--m-outgoing--TransitionDuration--margin-block: var(--pf-t--global--motion--duration--fade--short);
|
|
615
|
+
--pf-v6-c-alert-group--m-toast__item--m-outgoing--TransitionTimingFunction--margin-block: var(--pf-t--global--motion--timing-function--accelerate);
|
|
616
|
+
--pf-v6-c-alert-group--m-toast__item--m-outgoing--TransitionDelay--margin-block: var(--pf-t--global--motion--duration--slide-out--short);
|
|
617
|
+
--pf-v6-c-alert-group--m-toast__item--m-outgoing--TransitionDuration--grid-template-rows: var(--pf-t--global--motion--duration--slide-in--short);
|
|
618
|
+
--pf-v6-c-alert-group--m-toast__item--m-outgoing--TransitionTimingFunction--grid-template-rows: var(--pf-t--global--motion--timing-function--accelerate);
|
|
619
|
+
--pf-v6-c-alert-group--m-toast__item--m-outgoing--TransitionDelay--grid-template-rows: var(--pf-t--global--motion--duration--slide-out--short);
|
|
620
|
+
--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDuration--transform: initial;
|
|
621
|
+
--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionTimingFunction--transform: initial;
|
|
622
|
+
--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDuration--opacity: initial;
|
|
623
|
+
--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionTimingFunction--opacity: initial;
|
|
624
|
+
--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDuration--margin-block: initial;
|
|
625
|
+
--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionTimingFunction--margin-block: initial;
|
|
626
|
+
--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDelay--margin-block: initial;
|
|
627
|
+
--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDuration--grid-template-rows: initial;
|
|
628
|
+
--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionTimingFunction--grid-template-rows: initial;
|
|
629
|
+
--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDelay--grid-template-rows: initial;
|
|
630
|
+
--pf-v6-c-alert-group--m-toast__item--m-outgoing--c-alert--TransitionDuration: var(--pf-t--global--motion--duration--slide-out--short);
|
|
631
|
+
--pf-v6-c-alert-group--m-toast__item--m-outgoing--c-alert--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--accelerate);
|
|
632
|
+
--pf-v6-c-alert-group--m-toast__item--m-outgoing--c-alert--Transition: all
|
|
633
|
+
var(--pf-v6-c-alert-group--m-toast__item--m-outgoing--c-alert--TransitionDuration)
|
|
634
|
+
var(--pf-v6-c-alert-group--m-toast__item--m-outgoing--c-alert--TransitionTimingFunction)
|
|
635
|
+
var(--pf-v6-c-alert-group--m-toast__item--m-outgoing--c-alert--TransitionDuration);
|
|
636
|
+
--pf-v6-c-alert-group--m-toast__item--m-offstage-right--c-alert--TransitionDuration: initial;
|
|
637
|
+
--pf-v6-c-alert-group--m-toast__item--m-offstage-right--c-alert--TransitionTimingFunction: initial;
|
|
638
|
+
--pf-v6-c-alert-group--m-toast__item--m-offstage-right--c-alert--Transition: initial;
|
|
621
639
|
--pf-v6-c-alert-group__overflow-button--BorderWidth: 0;
|
|
622
640
|
--pf-v6-c-alert-group__overflow-button--BorderRadius: var(--pf-t--global--border--radius--medium);
|
|
623
641
|
--pf-v6-c-alert-group__overflow-button--PaddingBlockStart: var(--pf-t--global--spacer--md);
|
|
@@ -677,40 +695,43 @@
|
|
|
677
695
|
transition: var(--pf-v6-c-alert-group--m-toast__item--c-alert--Transition);
|
|
678
696
|
}
|
|
679
697
|
}
|
|
680
|
-
.pf-v6-c-alert-group__item.pf-m-offstage-top:first-child {
|
|
698
|
+
.pf-v6-c-alert-group__item.pf-m-offstage-top:first-child, .pf-v6-c-alert-group__item.pf-m-incoming:first-child {
|
|
681
699
|
grid-template-rows: 0fr;
|
|
682
700
|
margin-block: 0;
|
|
683
701
|
overflow: hidden;
|
|
684
702
|
opacity: 0;
|
|
685
703
|
transform: translateY(-100%);
|
|
686
704
|
}
|
|
687
|
-
.pf-v6-c-alert-group__item.pf-m-offstage-top:first-child .pf-v6-c-alert {
|
|
705
|
+
.pf-v6-c-alert-group__item.pf-m-offstage-top:first-child .pf-v6-c-alert, .pf-v6-c-alert-group__item.pf-m-incoming:first-child .pf-v6-c-alert {
|
|
688
706
|
min-height: 0;
|
|
689
707
|
padding-block-start: 0;
|
|
690
708
|
padding-block-end: 0;
|
|
691
709
|
border-width: 0;
|
|
692
710
|
}
|
|
693
|
-
.pf-v6-c-alert-group__item.pf-m-offstage-right {
|
|
711
|
+
.pf-v6-c-alert-group__item.pf-m-offstage-right, .pf-v6-c-alert-group__item.pf-m-outgoing {
|
|
694
712
|
grid-template-rows: 0fr;
|
|
695
713
|
margin-block: 0;
|
|
696
714
|
overflow: hidden;
|
|
697
715
|
opacity: 0;
|
|
698
|
-
transition: grid-template-rows 0s var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDelay--grid-template-rows--default), margin-block 0s var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDelay--margin-block--default), opacity var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDuration--opacity--default) var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionTimingFunction--opacity--default);
|
|
716
|
+
transition: grid-template-rows 0s var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDelay--grid-template-rows--default, var(--pf-v6-c-alert-group--m-toast__item--m-outgoing--TransitionDelay--grid-template-rows--default)), margin-block 0s var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDelay--margin-block--default, var(--pf-v6-c-alert-group--m-toast__item--m-outgoing--TransitionDelay--margin-block--default)), opacity var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDuration--opacity--default, var(--pf-v6-c-alert-group--m-toast__item--m-outgoing--TransitionDuration--opacity--default)) var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionTimingFunction--opacity--default, var(--pf-v6-c-alert-group--m-toast__item--m-outgoing--TransitionTimingFunction--opacity--default));
|
|
699
717
|
}
|
|
700
|
-
.pf-v6-c-alert-group__item.pf-m-offstage-right .pf-v6-c-alert {
|
|
718
|
+
.pf-v6-c-alert-group__item.pf-m-offstage-right .pf-v6-c-alert, .pf-v6-c-alert-group__item.pf-m-outgoing .pf-v6-c-alert {
|
|
701
719
|
min-height: 0;
|
|
702
720
|
padding-block-start: 0;
|
|
703
721
|
padding-block-end: 0;
|
|
704
722
|
border-width: 0;
|
|
705
|
-
transition: all 0s var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--c-alert--TransitionDelay--default);
|
|
723
|
+
transition: all 0s var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--c-alert--TransitionDelay--default, var(--pf-v6-c-alert-group--m-toast__item--m-outgoing--c-alert--TransitionDelay--default));
|
|
706
724
|
}
|
|
707
725
|
@media screen and (prefers-reduced-motion: no-preference) {
|
|
708
|
-
.pf-v6-c-alert-group__item.pf-m-offstage-right {
|
|
709
|
-
transition: transform var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDuration--transform) var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionTimingFunction--transform), opacity var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDuration--opacity) var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionTimingFunction--opacity), margin-block var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDuration--margin-block) var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionTimingFunction--margin-block) var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDelay--margin-block), grid-template-rows var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDuration--grid-template-rows) var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionTimingFunction--grid-template-rows) var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDelay--grid-template-rows);
|
|
726
|
+
.pf-v6-c-alert-group__item.pf-m-offstage-right, .pf-v6-c-alert-group__item.pf-m-outgoing {
|
|
727
|
+
transition: transform var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDuration--transform, var(--pf-v6-c-alert-group--m-toast__item--m-outgoing--TransitionDuration--transform)) var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionTimingFunction--transform, var(--pf-v6-c-alert-group--m-toast__item--m-outgoing--TransitionTimingFunction--transform)), opacity var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDuration--opacity, var(--pf-v6-c-alert-group--m-toast__item--m-outgoing--TransitionDuration--opacity)) var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionTimingFunction--opacity, var(--pf-v6-c-alert-group--m-toast__item--m-outgoing--TransitionTimingFunction--opacity)), margin-block var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDuration--margin-block, var(--pf-v6-c-alert-group--m-toast__item--m-outgoing--TransitionDuration--margin-block)) var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionTimingFunction--margin-block, var(--pf-v6-c-alert-group--m-toast__item--m-outgoing--TransitionTimingFunction--margin-block)) var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDelay--margin-block, var(--pf-v6-c-alert-group--m-toast__item--m-outgoing--TransitionDelay--margin-block)), grid-template-rows var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDuration--grid-template-rows, var(--pf-v6-c-alert-group--m-toast__item--m-outgoing--TransitionDuration--grid-template-rows)) var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionTimingFunction--grid-template-rows, var(--pf-v6-c-alert-group--m-toast__item--m-outgoing--TransitionTimingFunction--grid-template-rows)) var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDelay--grid-template-rows, var(--pf-v6-c-alert-group--m-toast__item--m-outgoing--TransitionDelay--grid-template-rows));
|
|
710
728
|
transform: translateX(100%);
|
|
711
729
|
}
|
|
712
|
-
.pf-v6-c-alert-group__item.pf-m-offstage-right .pf-v6-c-alert {
|
|
713
|
-
|
|
730
|
+
:where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-alert-group__item.pf-m-offstage-right, .pf-v6-c-alert-group__item.pf-m-outgoing {
|
|
731
|
+
transform: translateX(calc(100% * var(--pf-v6-global--inverse--multiplier)));
|
|
732
|
+
}
|
|
733
|
+
.pf-v6-c-alert-group__item.pf-m-offstage-right .pf-v6-c-alert, .pf-v6-c-alert-group__item.pf-m-outgoing .pf-v6-c-alert {
|
|
734
|
+
transition: var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--c-alert--Transition, var(--pf-v6-c-alert-group--m-toast__item--m-outgoing--c-alert--Transition));
|
|
714
735
|
}
|
|
715
736
|
}
|
|
716
737
|
.pf-v6-c-alert-group__item:hover {
|
|
@@ -3051,6 +3072,9 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
|
|
|
3051
3072
|
.pf-v6-c-code-editor__main .monaco-editor {
|
|
3052
3073
|
background-color: var(--pf-v6-c-code-editor__main--BackgroundColor);
|
|
3053
3074
|
}
|
|
3075
|
+
.pf-v6-c-code-editor__main a.label-name {
|
|
3076
|
+
text-decoration-line: none;
|
|
3077
|
+
}
|
|
3054
3078
|
|
|
3055
3079
|
.pf-v6-c-code-editor__header + .pf-v6-c-code-editor__main {
|
|
3056
3080
|
border-block-start-width: 0;
|
|
@@ -5307,9 +5331,15 @@ ul) {
|
|
|
5307
5331
|
--pf-v6-c-drawer__panel--RowGap: var(--pf-t--global--spacer--sm);
|
|
5308
5332
|
--pf-v6-c-drawer__panel--PaddingBlockStart: var(--pf-t--global--spacer--sm);
|
|
5309
5333
|
--pf-v6-c-drawer__panel--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
|
|
5334
|
+
--pf-v6-c-drawer__panel--TransitionDelay: 0s, var(--pf-v6-c-drawer__panel--TransitionDelay--focus), var(--pf-v6-c-drawer__panel--TransitionDelay--focus);
|
|
5335
|
+
--pf-v6-c-drawer__panel--TransitionDelay--focus: var(--pf-v6-c-drawer__panel--TransitionDuration--fade);
|
|
5336
|
+
--pf-v6-c-drawer__panel--TransitionDelay--expand--focus: 0s;
|
|
5310
5337
|
--pf-v6-c-drawer__panel--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
|
|
5311
|
-
--pf-v6-c-drawer__panel--TransitionDuration: var(--pf-t--global--motion--duration--
|
|
5312
|
-
--pf-v6-c-drawer__panel--
|
|
5338
|
+
--pf-v6-c-drawer__panel--TransitionDuration--fade: var(--pf-t--global--motion--duration--fade--default);
|
|
5339
|
+
--pf-v6-c-drawer__panel--TransitionDuration: var(--pf-v6-c-drawer__panel--TransitionDuration--fade), 0s, 0s;
|
|
5340
|
+
--pf-v6-c-drawer__panel--TransitionProperty: opacity, visibility, transform;
|
|
5341
|
+
--pf-v6-c-drawer__panel--Opacity: 0;
|
|
5342
|
+
--pf-v6-c-drawer--m-expanded__panel--Opacity: 1;
|
|
5313
5343
|
--pf-v6-c-drawer__panel--FlexBasis: 100%;
|
|
5314
5344
|
--pf-v6-c-drawer__panel--md--FlexBasis--min: 1.5rem;
|
|
5315
5345
|
--pf-v6-c-drawer__panel--md--FlexBasis: 50%;
|
|
@@ -5399,6 +5429,17 @@ ul) {
|
|
|
5399
5429
|
--pf-v6-c-drawer--m-panel-left--m-inline__panel--PaddingInlineEnd: var(--pf-v6-c-drawer__panel--after--Width);
|
|
5400
5430
|
--pf-v6-c-drawer--m-panel-bottom--m-inline__panel--PaddingBlockStart: var(--pf-v6-c-drawer__panel--after--Width);
|
|
5401
5431
|
}
|
|
5432
|
+
@media screen and (prefers-reduced-motion: no-preference) {
|
|
5433
|
+
.pf-v6-c-drawer {
|
|
5434
|
+
--pf-v6-c-drawer__panel--TransitionDuration--slide: var(--pf-t--global--motion--duration--slide-in--short);
|
|
5435
|
+
--pf-v6-c-drawer__panel--TransitionDelay--focus: var(--pf-v6-c-drawer__panel--TransitionDuration--slide);
|
|
5436
|
+
--pf-v6-c-drawer__panel--TransitionDelay: 0s, 0s, 0s, 0s, var(--pf-v6-c-drawer__panel--TransitionDelay--focus);
|
|
5437
|
+
--pf-v6-c-drawer__panel--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
|
|
5438
|
+
--pf-v6-c-drawer__panel--TransitionDuration: 0s, var(--pf-v6-c-drawer__panel--TransitionDuration--slide), 0s, 0s, 0s;
|
|
5439
|
+
--pf-v6-c-drawer__panel--TransitionProperty: margin, transform, box-shadow, flex-basis, visibility;
|
|
5440
|
+
--pf-v6-c-drawer__panel--Opacity: 1;
|
|
5441
|
+
}
|
|
5442
|
+
}
|
|
5402
5443
|
@media screen and (min-width: 75rem) {
|
|
5403
5444
|
.pf-v6-c-drawer {
|
|
5404
5445
|
--pf-v6-c-drawer__panel--MinWidth: var(--pf-v6-c-drawer__panel--xl--MinWidth);
|
|
@@ -5446,8 +5487,13 @@ ul) {
|
|
|
5446
5487
|
.pf-v6-c-drawer.pf-m-panel-bottom > .pf-v6-c-drawer__main {
|
|
5447
5488
|
flex-direction: column;
|
|
5448
5489
|
}
|
|
5490
|
+
.pf-v6-c-drawer.pf-m-expanded {
|
|
5491
|
+
--pf-v6-c-drawer__panel--TransitionDelay--focus: var(--pf-v6-c-drawer__panel--TransitionDelay--expand--focus);
|
|
5492
|
+
}
|
|
5449
5493
|
.pf-v6-c-drawer.pf-m-expanded > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
|
|
5450
5494
|
transform: translateX(-100%);
|
|
5495
|
+
--pf-v6-c-drawer__panel--Opacity: var(--pf-v6-c-drawer--m-expanded__panel--Opacity);
|
|
5496
|
+
visibility: visible;
|
|
5451
5497
|
}
|
|
5452
5498
|
:where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-drawer.pf-m-expanded > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
|
|
5453
5499
|
transform: translateX(calc(-100% * var(--pf-v6-global--inverse--multiplier)));
|
|
@@ -5520,8 +5566,11 @@ ul) {
|
|
|
5520
5566
|
order: 1;
|
|
5521
5567
|
max-height: var(--pf-v6-c-drawer__panel--MaxHeight);
|
|
5522
5568
|
overflow: auto;
|
|
5569
|
+
visibility: hidden;
|
|
5523
5570
|
background-color: var(--pf-v6-c-drawer__panel--BackgroundColor);
|
|
5524
5571
|
box-shadow: var(--pf-v6-c-drawer__panel--BoxShadow);
|
|
5572
|
+
opacity: var(--pf-v6-c-drawer__panel--Opacity);
|
|
5573
|
+
transition-delay: var(--pf-v6-c-drawer__panel--TransitionDelay);
|
|
5525
5574
|
transition-timing-function: var(--pf-v6-c-drawer__panel--TransitionTimingFunction);
|
|
5526
5575
|
transition-duration: var(--pf-v6-c-drawer__panel--TransitionDuration);
|
|
5527
5576
|
transition-property: var(--pf-v6-c-drawer__panel--TransitionProperty);
|
|
@@ -5578,17 +5627,6 @@ ul) {
|
|
|
5578
5627
|
padding-block-end: var(--pf-v6-c-drawer__panel--PaddingBlockEnd);
|
|
5579
5628
|
}
|
|
5580
5629
|
|
|
5581
|
-
@keyframes pf-remove-tab-focus {
|
|
5582
|
-
to {
|
|
5583
|
-
visibility: hidden;
|
|
5584
|
-
}
|
|
5585
|
-
}
|
|
5586
|
-
.pf-v6-c-drawer__panel[hidden] {
|
|
5587
|
-
animation-name: pf-remove-tab-focus;
|
|
5588
|
-
animation-delay: var(--pf-v6-c-drawer__panel--TransitionDuration);
|
|
5589
|
-
animation-fill-mode: forwards;
|
|
5590
|
-
}
|
|
5591
|
-
|
|
5592
5630
|
.pf-v6-c-drawer__head {
|
|
5593
5631
|
display: grid;
|
|
5594
5632
|
grid-template-columns: auto;
|
|
@@ -5696,7 +5734,7 @@ ul) {
|
|
|
5696
5734
|
.pf-v6-c-drawer {
|
|
5697
5735
|
min-width: var(--pf-v6-c-drawer__panel--MinWidth);
|
|
5698
5736
|
}
|
|
5699
|
-
.pf-v6-c-drawer
|
|
5737
|
+
.pf-v6-c-drawer > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
|
|
5700
5738
|
box-shadow: var(--pf-v6-c-drawer--m-expanded__panel--BoxShadow);
|
|
5701
5739
|
}
|
|
5702
5740
|
.pf-v6-c-drawer > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel.pf-m-resizable {
|
|
@@ -6280,6 +6318,17 @@ ul) {
|
|
|
6280
6318
|
--pf-v6-c-expandable-section__toggle-icon--m-expand-top--Rotate: 0;
|
|
6281
6319
|
--pf-v6-c-expandable-section--m-expanded__toggle-icon--Rotate: 90deg;
|
|
6282
6320
|
--pf-v6-c-expandable-section--m-expanded__toggle-icon--m-expand-top--Rotate: -90deg;
|
|
6321
|
+
--pf-v6-c-expandable-section__content--TransitionDuration--collapse--slide: 0s;
|
|
6322
|
+
--pf-v6-c-expandable-section__content--TransitionDuration--collapse--fade: var(--pf-t--global--motion--duration--fade--short);
|
|
6323
|
+
--pf-v6-c-expandable-section__content--TransitionDuration--expand--slide: 0s;
|
|
6324
|
+
--pf-v6-c-expandable-section__content--TransitionDuration--expand--fade: var(--pf-t--global--motion--duration--fade--default);
|
|
6325
|
+
--pf-v6-c-expandable-section__content--TransitionDuration--slide: var(--pf-v6-c-expandable-section__content--TransitionDuration--collapse--slide);
|
|
6326
|
+
--pf-v6-c-expandable-section__content--TransitionDuration--fade: var(--pf-v6-c-expandable-section__content--TransitionDuration--collapse--fade);
|
|
6327
|
+
--pf-v6-c-expandable-section__content--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
|
|
6328
|
+
--pf-v6-c-expandable-section__content--Opacity: 0;
|
|
6329
|
+
--pf-v6-c-expandable-section--m-expanded__content--Opacity: 1;
|
|
6330
|
+
--pf-v6-c-expandable-section__content--TranslateY: 0;
|
|
6331
|
+
--pf-v6-c-expandable-section--m-expanded__content--TranslateY: 0;
|
|
6283
6332
|
--pf-v6-c-expandable-section__content--MaxWidth: auto;
|
|
6284
6333
|
--pf-v6-c-expandable-section--m-limit-width__content--MaxWidth: 46.875rem;
|
|
6285
6334
|
--pf-v6-c-expandable-section--m-display-lg--PaddingBlockStart: var(--pf-t--global--spacer--sm);
|
|
@@ -6291,10 +6340,18 @@ ul) {
|
|
|
6291
6340
|
--pf-v6-c-expandable-section--m-display-lg--BorderWidth: var(--pf-t--global--border--width--box--default);
|
|
6292
6341
|
--pf-v6-c-expandable-section--m-display-lg--BorderColor: var(--pf-t--global--border--color--default);
|
|
6293
6342
|
--pf-v6-c-expandable-section--m-display-lg--BorderRadius: var(--pf-t--global--border--radius--medium);
|
|
6343
|
+
--pf-v6-c-expandable-section--m-display-lg--TransitionDelay: var(--pf-v6-c-expandable-section__content--TransitionDuration--fade);
|
|
6294
6344
|
--pf-v6-c-expandable-section--m-indented__content--PaddingInlineStart: calc(var(--pf-t--global--spacer--action--horizontal--plain--default) + var(--pf-t--global--spacer--gap--text-to-element--default) + var(--pf-v6-c-expandable-section__toggle-icon--MinWidth));
|
|
6295
6345
|
--pf-v6-c-expandable-section--m-truncate__content--LineClamp: 3;
|
|
6296
6346
|
--pf-v6-c-expandable-section--m-truncate--Gap: var(--pf-t--global--spacer--xs);
|
|
6297
6347
|
}
|
|
6348
|
+
@media screen and (prefers-reduced-motion: no-preference) {
|
|
6349
|
+
.pf-v6-c-expandable-section {
|
|
6350
|
+
--pf-v6-c-expandable-section__content--TransitionDuration--collapse--slide: var(--pf-t--global--motion--duration--fade--short);
|
|
6351
|
+
--pf-v6-c-expandable-section__content--TransitionDuration--expand--slide: var(--pf-t--global--motion--duration--fade--default);
|
|
6352
|
+
--pf-v6-c-expandable-section__content--TranslateY: -.5rem;
|
|
6353
|
+
}
|
|
6354
|
+
}
|
|
6298
6355
|
|
|
6299
6356
|
.pf-v6-c-expandable-section {
|
|
6300
6357
|
display: flex;
|
|
@@ -6305,6 +6362,11 @@ ul) {
|
|
|
6305
6362
|
--pf-v6-c-expandable-section__toggle-icon--Rotate: var(--pf-v6-c-expandable-section--m-expanded__toggle-icon--Rotate);
|
|
6306
6363
|
--pf-v6-c-expandable-section__toggle-icon--m-expand-top--Rotate: var(--pf-v6-c-expandable-section--m-expanded__toggle-icon--m-expand-top--Rotate);
|
|
6307
6364
|
--pf-v6-c-expandable-section--m-display-lg--PaddingBlockEnd: var(--pf-v6-c-expandable-section--m-display-lg--m-expanded--PaddingBlockEnd);
|
|
6365
|
+
--pf-v6-c-expandable-section__content--TransitionDuration--slide: var(--pf-v6-c-expandable-section__content--TransitionDuration--expand--slide);
|
|
6366
|
+
--pf-v6-c-expandable-section__content--TransitionDuration--fade: var(--pf-v6-c-expandable-section__content--TransitionDuration--expand--fade);
|
|
6367
|
+
--pf-v6-c-expandable-section__content--Opacity: var(--pf-v6-c-expandable-section--m-expanded__content--Opacity);
|
|
6368
|
+
--pf-v6-c-expandable-section__content--TranslateY: var(--pf-v6-c-expandable-section--m-expanded__content--TranslateY);
|
|
6369
|
+
--pf-v6-c-expandable-section--m-display-lg--TransitionDelay: 0s;
|
|
6308
6370
|
}
|
|
6309
6371
|
.pf-v6-c-expandable-section.pf-m-limit-width {
|
|
6310
6372
|
--pf-v6-c-expandable-section__content--MaxWidth: var(--pf-v6-c-expandable-section--m-limit-width__content--MaxWidth);
|
|
@@ -6317,6 +6379,7 @@ ul) {
|
|
|
6317
6379
|
background-color: var(--pf-v6-c-expandable-section--m-display-lg--BackgroundColor);
|
|
6318
6380
|
border: var(--pf-v6-c-expandable-section--m-display-lg--BorderWidth) solid var(--pf-v6-c-expandable-section--m-display-lg--BorderColor);
|
|
6319
6381
|
border-radius: var(--pf-v6-c-expandable-section--m-display-lg--BorderRadius);
|
|
6382
|
+
transition: padding-block-end 0s var(--pf-v6-c-expandable-section--m-display-lg--TransitionDelay, 0s);
|
|
6320
6383
|
}
|
|
6321
6384
|
.pf-v6-c-expandable-section.pf-m-indented {
|
|
6322
6385
|
--pf-v6-c-expandable-section__content--PaddingInlineStart: var(--pf-v6-c-expandable-section--m-indented__content--PaddingInlineStart);
|
|
@@ -6350,6 +6413,11 @@ ul) {
|
|
|
6350
6413
|
max-width: var(--pf-v6-c-expandable-section__content--MaxWidth);
|
|
6351
6414
|
padding-block-end: var(--pf-v6-c-expandable-section__content--PaddingBlockEnd, 0);
|
|
6352
6415
|
padding-inline-start: var(--pf-v6-c-expandable-section__content--PaddingInlineStart, 0);
|
|
6416
|
+
opacity: var(--pf-v6-c-expandable-section__content--Opacity);
|
|
6417
|
+
transition-timing-function: var(--pf-v6-c-expandable-section__content--TransitionTimingFunction);
|
|
6418
|
+
transition-duration: var(--pf-v6-c-expandable-section__content--TransitionDuration--fade), var(--pf-v6-c-expandable-section__content--TransitionDuration--slide);
|
|
6419
|
+
transition-property: opacity, translate;
|
|
6420
|
+
translate: 0 var(--pf-v6-c-expandable-section__content--TranslateY);
|
|
6353
6421
|
}
|
|
6354
6422
|
|
|
6355
6423
|
.pf-v6-c-file-upload {
|
|
@@ -10649,16 +10717,20 @@ ul.pf-v6-c-list {
|
|
|
10649
10717
|
flex-wrap: nowrap;
|
|
10650
10718
|
}
|
|
10651
10719
|
|
|
10652
|
-
.pf-v6-c-menu-toggle__icon {
|
|
10653
|
-
flex-shrink: 0;
|
|
10654
|
-
}
|
|
10655
10720
|
.pf-v6-c-menu-toggle__icon.pf-m-avatar .pf-v6-c-avatar,
|
|
10656
10721
|
.pf-v6-c-menu-toggle__icon.pf-m-avatar img,
|
|
10657
|
-
.pf-v6-c-menu-toggle__icon.pf-m-avatar svg {
|
|
10722
|
+
.pf-v6-c-menu-toggle__icon.pf-m-avatar svg, .pf-v6-c-menu-toggle:not(.pf-m-plain) .pf-v6-c-menu-toggle__icon {
|
|
10658
10723
|
margin-block-start: calc(var(--pf-v6-c-menu-toggle--PaddingBlockStart) * -1);
|
|
10659
10724
|
margin-block-end: calc(var(--pf-v6-c-menu-toggle--PaddingBlockEnd) * -1);
|
|
10660
10725
|
}
|
|
10661
10726
|
|
|
10727
|
+
.pf-v6-c-menu-toggle__icon {
|
|
10728
|
+
flex-shrink: 0;
|
|
10729
|
+
}
|
|
10730
|
+
.pf-v6-c-menu-toggle__icon :where(picture, img) {
|
|
10731
|
+
vertical-align: middle;
|
|
10732
|
+
}
|
|
10733
|
+
|
|
10662
10734
|
.pf-v6-c-menu-toggle__controls {
|
|
10663
10735
|
display: flex;
|
|
10664
10736
|
gap: var(--pf-v6-c-menu-toggle__controls--Gap);
|
|
@@ -11748,8 +11820,9 @@ ul.pf-v6-c-list {
|
|
|
11748
11820
|
--pf-v6-c-page--inset: var(--pf-t--global--spacer--inset--page-chrome);
|
|
11749
11821
|
--pf-v6-c-page--c-masthead--ZIndex: var(--pf-t--global--z-index--md);
|
|
11750
11822
|
--pf-v6-c-page__sidebar--ZIndex: var(--pf-t--global--z-index--sm);
|
|
11751
|
-
--pf-v6-c-page__sidebar--Width: 18.125rem;
|
|
11752
|
-
--pf-v6-c-page__sidebar--
|
|
11823
|
+
--pf-v6-c-page__sidebar--Width--base: 18.125rem;
|
|
11824
|
+
--pf-v6-c-page__sidebar--Width: var(--pf-v6-c-page__sidebar--Width--base);
|
|
11825
|
+
--pf-v6-c-page__sidebar--xl--Width: var(--pf-v6-c-page__sidebar--Width--base);
|
|
11753
11826
|
--pf-v6-c-page__sidebar--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
|
|
11754
11827
|
--pf-v6-c-page__sidebar--BoxShadow: none;
|
|
11755
11828
|
--pf-v6-c-page__sidebar--TransitionDuration: var(--pf-t--global--motion--duration--slide-in--default);
|
|
@@ -12177,7 +12250,7 @@ ul.pf-v6-c-list {
|
|
|
12177
12250
|
-webkit-overflow-scrolling: touch;
|
|
12178
12251
|
}
|
|
12179
12252
|
@media screen and (min-width: 75rem) {
|
|
12180
|
-
.pf-v6-c-masthead + .pf-v6-c-page__main-container, .pf-v6-c-page__sidebar.pf-m-collapsed + .pf-v6-c-page__main-container,
|
|
12253
|
+
.pf-v6-c-page.pf-m-no-sidebar, .pf-v6-c-masthead + .pf-v6-c-page__main-container, .pf-v6-c-page__sidebar.pf-m-collapsed + .pf-v6-c-page__main-container,
|
|
12181
12254
|
.pf-v6-c-masthead + .pf-v6-c-page__drawer,
|
|
12182
12255
|
.pf-v6-c-page__sidebar.pf-m-collapsed + .pf-v6-c-page__drawer {
|
|
12183
12256
|
--pf-v6-c-page__main-container--GridArea: var(--pf-v6-c-page--masthead--main-container--GridArea);
|
|
@@ -14329,8 +14402,8 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
|
|
|
14329
14402
|
--pf-v6-c-skeleton--after--LinearGradientColorStop1: var(--pf-t--global--background--color--secondary--default);
|
|
14330
14403
|
--pf-v6-c-skeleton--after--LinearGradientColorStop2: var(--pf-t--global--background--color--secondary--hover);
|
|
14331
14404
|
--pf-v6-c-skeleton--after--LinearGradientColorStop3: var(--pf-t--global--background--color--secondary--default);
|
|
14332
|
-
--pf-v6-c-skeleton--after--TranslateX:
|
|
14333
|
-
--pf-v6-c-skeleton--after--AnimationName: pf-v6-c-skeleton-loading;
|
|
14405
|
+
--pf-v6-c-skeleton--after--TranslateX: 0;
|
|
14406
|
+
--pf-v6-c-skeleton--after--AnimationName: pf-v6-c-skeleton-loading-reduced-motion;
|
|
14334
14407
|
--pf-v6-c-skeleton--after--AnimationDuration: 3s;
|
|
14335
14408
|
--pf-v6-c-skeleton--after--AnimationIterationCount: infinite;
|
|
14336
14409
|
--pf-v6-c-skeleton--after--AnimationTimingFunction: linear;
|
|
@@ -14362,6 +14435,15 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
|
|
|
14362
14435
|
--pf-v6-c-skeleton--m-height-75--Height: 75%;
|
|
14363
14436
|
--pf-v6-c-skeleton--m-height-100--Height: 100%;
|
|
14364
14437
|
}
|
|
14438
|
+
@media screen and (prefers-reduced-motion: no-preference) {
|
|
14439
|
+
.pf-v6-c-skeleton {
|
|
14440
|
+
--pf-v6-c-skeleton--after--LinearGradientColorStop1: var(--pf-t--global--background--color--secondary--default);
|
|
14441
|
+
--pf-v6-c-skeleton--after--LinearGradientColorStop2: var(--pf-t--global--background--color--secondary--hover);
|
|
14442
|
+
--pf-v6-c-skeleton--after--LinearGradientColorStop3: var(--pf-t--global--background--color--secondary--default);
|
|
14443
|
+
--pf-v6-c-skeleton--after--TranslateX: -100%;
|
|
14444
|
+
--pf-v6-c-skeleton--after--AnimationName: pf-v6-c-skeleton-loading;
|
|
14445
|
+
}
|
|
14446
|
+
}
|
|
14365
14447
|
|
|
14366
14448
|
.pf-v6-c-skeleton {
|
|
14367
14449
|
position: relative;
|
|
@@ -14482,6 +14564,17 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
|
|
|
14482
14564
|
transform: translateX(100%);
|
|
14483
14565
|
}
|
|
14484
14566
|
}
|
|
14567
|
+
@keyframes pf-v6-c-skeleton-loading-reduced-motion {
|
|
14568
|
+
0% {
|
|
14569
|
+
opacity: 0.25;
|
|
14570
|
+
}
|
|
14571
|
+
60% {
|
|
14572
|
+
opacity: 1;
|
|
14573
|
+
}
|
|
14574
|
+
100% {
|
|
14575
|
+
opacity: 0.25;
|
|
14576
|
+
}
|
|
14577
|
+
}
|
|
14485
14578
|
.pf-v6-c-skip-to-content {
|
|
14486
14579
|
--pf-v6-c-skip-to-content--InsetBlockStart: var(--pf-t--global--spacer--md);
|
|
14487
14580
|
--pf-v6-c-skip-to-content--ZIndex: var(--pf-t--global--z-index--2xl);
|
|
@@ -18317,6 +18410,16 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
|
|
|
18317
18410
|
}
|
|
18318
18411
|
}
|
|
18319
18412
|
|
|
18413
|
+
@property --pf-v6-c-tabs--link-accent--length {
|
|
18414
|
+
syntax: "<length>";
|
|
18415
|
+
inherits: true;
|
|
18416
|
+
initial-value: 0px;
|
|
18417
|
+
}
|
|
18418
|
+
@property --pf-v6-c-tabs--link-accent--start {
|
|
18419
|
+
syntax: "<length>";
|
|
18420
|
+
inherits: true;
|
|
18421
|
+
initial-value: 0px;
|
|
18422
|
+
}
|
|
18320
18423
|
.pf-v6-c-tabs {
|
|
18321
18424
|
--pf-v6-c-tabs--inset: 0;
|
|
18322
18425
|
--pf-v6-c-tabs--Width: auto;
|
|
@@ -18378,6 +18481,8 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
|
|
|
18378
18481
|
--pf-v6-c-tabs--m-box--m-secondary__link--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
|
|
18379
18482
|
--pf-v6-c-tabs--m-box--m-secondary__item--m-current__link--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
|
|
18380
18483
|
--pf-v6-c-tabs--m-subtab__link--FontSize: var(--pf-t--global--font--size--xs);
|
|
18484
|
+
--pf-v6-c-tabs__link--TransitionDuration--background-color: var(--pf-t--global--motion--duration--fade--short);
|
|
18485
|
+
--pf-v6-c-tabs__link--TransitionTimingFunction--background-color: var(--pf-t--global--motion--timing-function--default);
|
|
18381
18486
|
--pf-v6-c-tabs__link--before--border-color--base: var(--pf-t--global--border--color--default);
|
|
18382
18487
|
--pf-v6-c-tabs__link--before--border-width--base: var(--pf-t--global--border--width--regular);
|
|
18383
18488
|
--pf-v6-c-tabs__link--before--BorderBlockStartColor: var(--pf-v6-c-tabs__link--before--border-color--base);
|
|
@@ -18402,6 +18507,26 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
|
|
|
18402
18507
|
--pf-v6-c-tabs__link--after--BorderInlineStartWidth: 0;
|
|
18403
18508
|
--pf-v6-c-tabs__item--m-current__link--after--BorderColor: var(--pf-t--global--border--color--clicked);
|
|
18404
18509
|
--pf-v6-c-tabs__item--m-current__link--after--BorderWidth: var(--pf-t--global--border--width--extra-strong);
|
|
18510
|
+
--pf-v6-c-tabs--link-accent--start: 0;
|
|
18511
|
+
--pf-v6-c-tabs--link-accent--length: auto;
|
|
18512
|
+
--pf-v6-c-tabs--link-accent--color: var(--pf-v6-c-tabs__item--m-current__link--after--BorderColor);
|
|
18513
|
+
--pf-v6-c-tabs--link-accent--border-size: var(--pf-v6-c-tabs__item--m-current__link--after--BorderWidth);
|
|
18514
|
+
--pf-v6-c-tabs--link-accent--InsetBlockStart: auto;
|
|
18515
|
+
--pf-v6-c-tabs--link-accent--InsetBlockEnd: 0;
|
|
18516
|
+
--pf-v6-c-tabs--link-accent--InsetInlineStart: initial;
|
|
18517
|
+
--pf-v6-c-tabs--link-accent--Width: initial;
|
|
18518
|
+
--pf-v6-c-tabs--link-accent--Height: 0;
|
|
18519
|
+
--pf-v6-c-tabs--link-accent--BorderBlockEndWidth: var(--pf-v6-c-tabs--link-accent--border-size);
|
|
18520
|
+
--pf-v6-c-tabs--link-accent--BorderInlineStartWidth: 0;
|
|
18521
|
+
--pf-v6-c-tabs--m-vertical--link-accent--InsetBlockStart: initial;
|
|
18522
|
+
--pf-v6-c-tabs--m-vertical--link-accent--InsetBlockEnd: auto;
|
|
18523
|
+
--pf-v6-c-tabs--m-vertical--link-accent--InsetInlineStart: 0;
|
|
18524
|
+
--pf-v6-c-tabs--m-vertical--link-accent--Width: 0;
|
|
18525
|
+
--pf-v6-c-tabs--m-vertical--link-accent--Height: initial;
|
|
18526
|
+
--pf-v6-c-tabs--m-vertical--link-accent--BorderBlockEndWidth: 0;
|
|
18527
|
+
--pf-v6-c-tabs--m-vertical--link-accent--BorderInlineStartWidth: var(--pf-v6-c-tabs--link-accent--border-size);
|
|
18528
|
+
--pf-v6-c-tabs--link-accent--TransitionDuration: var(--pf-t--global--motion--duration--md);
|
|
18529
|
+
--pf-v6-c-tabs--link-accent--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
|
|
18405
18530
|
--pf-v6-c-tabs__scroll-button--PaddingBlockStart: var(--pf-t--global--spacer--sm);
|
|
18406
18531
|
--pf-v6-c-tabs__scroll-button--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
|
|
18407
18532
|
--pf-v6-c-tabs__scroll-button--PaddingInlineStart: var(--pf-t--global--spacer--sm);
|
|
@@ -18559,6 +18684,13 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
|
|
|
18559
18684
|
--pf-v6-c-tabs__link--after--InsetBlockEnd: 0;
|
|
18560
18685
|
--pf-v6-c-tabs__link--after--InsetInlineEnd: auto;
|
|
18561
18686
|
--pf-v6-c-tabs__list--ScrollSnapTypeAxis: var(--pf-v6-c-tabs--m-vertical__list--ScrollSnapTypeAxis);
|
|
18687
|
+
--pf-v6-c-tabs--link-accent--InsetBlockStart: var(--pf-v6-c-tabs--m-vertical--link-accent--InsetBlockStart);
|
|
18688
|
+
--pf-v6-c-tabs--link-accent--InsetBlockEnd: var(--pf-v6-c-tabs--m-vertical--link-accent--InsetBlockEnd);
|
|
18689
|
+
--pf-v6-c-tabs--link-accent--InsetInlineStart: var(--pf-v6-c-tabs--m-vertical--link-accent--InsetInlineStart);
|
|
18690
|
+
--pf-v6-c-tabs--link-accent--Width: var(--pf-v6-c-tabs--m-vertical--link-accent--Width);
|
|
18691
|
+
--pf-v6-c-tabs--link-accent--Height: var(--pf-v6-c-tabs--m-vertical--link-accent--Height);
|
|
18692
|
+
--pf-v6-c-tabs--link-accent--BorderBlockEndWidth: var(--pf-v6-c-tabs--m-vertical--link-accent--BorderBlockEndWidth);
|
|
18693
|
+
--pf-v6-c-tabs--link-accent--BorderInlineStartWidth: var(--pf-v6-c-tabs--m-vertical--link-accent--BorderInlineStartWidth);
|
|
18562
18694
|
display: inline-flex;
|
|
18563
18695
|
flex-direction: column;
|
|
18564
18696
|
height: 100%;
|
|
@@ -18821,6 +18953,7 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
|
|
|
18821
18953
|
text-decoration-line: none;
|
|
18822
18954
|
background-color: var(--pf-v6-c-tabs__link--BackgroundColor);
|
|
18823
18955
|
border-radius: var(--pf-v6-c-tabs__link--BorderRadius);
|
|
18956
|
+
transition: background-color var(--pf-v6-c-tabs__link--TransitionDuration--background-color) var(--pf-v6-c-tabs__link--TransitionTimingFunction--background-color);
|
|
18824
18957
|
}
|
|
18825
18958
|
.pf-v6-c-tabs__item.pf-m-action, .pf-v6-c-tabs__link {
|
|
18826
18959
|
--pf-v6-c-tabs__link--after--BorderBlockEndWidth: var(--pf-v6-c-tabs__link--after--BorderWidth);
|
|
@@ -19133,6 +19266,30 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
|
|
|
19133
19266
|
}
|
|
19134
19267
|
}
|
|
19135
19268
|
|
|
19269
|
+
@media (prefers-reduced-motion: no-preference) {
|
|
19270
|
+
.pf-v6-c-tabs:not(.pf-m-box) .pf-v6-c-tabs__link::after,
|
|
19271
|
+
.pf-v6-c-tabs:not(.pf-m-box) .pf-v6-c-tabs__item.pf-m-action::after {
|
|
19272
|
+
content: revert;
|
|
19273
|
+
}
|
|
19274
|
+
.pf-v6-c-tabs:not(.pf-m-box) .pf-v6-c-tabs__list::after {
|
|
19275
|
+
position: absolute;
|
|
19276
|
+
inset-block-start: var(--pf-v6-c-tabs--link-accent--InsetBlockStart, var(--pf-v6-c-tabs--link-accent--start));
|
|
19277
|
+
inset-block-end: var(--pf-v6-c-tabs--link-accent--InsetBlockEnd);
|
|
19278
|
+
inset-inline-start: var(--pf-v6-c-tabs--link-accent--InsetInlineStart, var(--pf-v6-c-tabs--link-accent--start));
|
|
19279
|
+
width: var(--pf-v6-c-tabs--link-accent--Width, var(--pf-v6-c-tabs--link-accent--length));
|
|
19280
|
+
height: var(--pf-v6-c-tabs--link-accent--Height, var(--pf-v6-c-tabs--link-accent--length));
|
|
19281
|
+
content: "";
|
|
19282
|
+
border: 0 solid var(--pf-v6-c-tabs--link-accent--color);
|
|
19283
|
+
border-block-end-width: var(--pf-v6-c-tabs--link-accent--BorderBlockEndWidth);
|
|
19284
|
+
border-inline-start-width: var(--pf-v6-c-tabs--link-accent--BorderInlineStartWidth);
|
|
19285
|
+
transition-timing-function: var(--pf-v6-c-tabs--link-accent--TransitionTimingFunction);
|
|
19286
|
+
transition-duration: var(--pf-v6-c-tabs--link-accent--TransitionDuration);
|
|
19287
|
+
transition-property: --pf-v6-c-tabs--link-accent--length, --pf-v6-c-tabs--link-accent--start, width;
|
|
19288
|
+
}
|
|
19289
|
+
.pf-v6-c-tabs.pf-m-initializing-accent {
|
|
19290
|
+
--pf-v6-c-tabs--link-accent--TransitionDuration: 0;
|
|
19291
|
+
}
|
|
19292
|
+
}
|
|
19136
19293
|
.pf-v6-c-text-input-group {
|
|
19137
19294
|
--pf-v6-c-text-input-group--BackgroundColor: var(--pf-t--global--background--color--control--default);
|
|
19138
19295
|
--pf-v6-c-text-input-group--BorderColor: var(--pf-t--global--border--color--default);
|
|
@@ -21744,6 +21901,11 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
|
|
|
21744
21901
|
align-items: baseline;
|
|
21745
21902
|
min-width: var(--pf-v6-c-truncate--MinWidth);
|
|
21746
21903
|
}
|
|
21904
|
+
.pf-v6-c-truncate.pf-m-fixed {
|
|
21905
|
+
display: inline;
|
|
21906
|
+
align-items: revert;
|
|
21907
|
+
min-width: revert;
|
|
21908
|
+
}
|
|
21747
21909
|
|
|
21748
21910
|
.pf-v6-c-truncate__start,
|
|
21749
21911
|
.pf-v6-c-truncate__end {
|
|
@@ -1906,7 +1906,19 @@ For when a plain/icon button is placed inline with text
|
|
|
1906
1906
|
aria-label="More info"
|
|
1907
1907
|
>
|
|
1908
1908
|
<span class="pf-v6-c-button__icon">
|
|
1909
|
-
<
|
|
1909
|
+
<svg
|
|
1910
|
+
class="pf-v6-svg"
|
|
1911
|
+
viewBox="0 0 1024 1024"
|
|
1912
|
+
fill="currentColor"
|
|
1913
|
+
aria-hidden="true"
|
|
1914
|
+
role="img"
|
|
1915
|
+
width="1em"
|
|
1916
|
+
height="1em"
|
|
1917
|
+
>
|
|
1918
|
+
<path
|
|
1919
|
+
d="M521.3,576 C627.5,576 713.7,502 713.7,413.7 C713.7,325.4 627.6,253.6 521.3,253.6 C366,253.6 334.5,337.7 329.2,407.2 C329.2,414.3 335.2,416 343.5,416 L445,416 C450.5,416 458,415.5 460.8,406.5 C460.8,362.6 582.9,357.1 582.9,413.6 C582.9,441.9 556.2,470.9 521.3,473 C486.4,475.1 447.3,479.8 447.3,521.7 L447.3,553.8 C447.3,570.8 456.1,576 472,576 C487.9,576 521.3,576 521.3,576 M575.3,751.3 L575.3,655.3 C575.313862,651.055109 573.620137,646.982962 570.6,644 C567.638831,640.947672 563.552355,639.247987 559.3,639.29884 L463.3,639.29884 C459.055109,639.286138 454.982962,640.979863 452,644 C448.947672,646.961169 447.247987,651.047645 447.29884,655.3 L447.29884,751.3 C447.286138,755.544891 448.979863,759.617038 452,762.6 C454.961169,765.652328 459.047645,767.352013 463.3,767.30116 L559.3,767.30116 C563.544891,767.313862 567.617038,765.620137 570.6,762.6 C573.659349,759.643612 575.360354,755.553963 575.3,751.3 M512,896 C300.2,896 128,723.9 128,512 C128,300.3 300.2,128 512,128 C723.8,128 896,300.2 896,512 C896,723.8 723.7,896 512,896 M512.1,0 C229.7,0 0,229.8 0,512 C0,794.2 229.8,1024 512.1,1024 C794.4,1024 1024,794.3 1024,512 C1024,229.7 794.4,0 512.1,0"
|
|
1920
|
+
/>
|
|
1921
|
+
</svg>
|
|
1910
1922
|
</span>
|
|
1911
1923
|
</button>
|
|
1912
1924
|
.
|
|
@@ -255,7 +255,19 @@ cssPrefix: pf-v6-c-code-editor
|
|
|
255
255
|
<div class="pf-v6-c-code-editor__keyboard-shortcuts">
|
|
256
256
|
<button class="pf-v6-c-button pf-m-link" type="button">
|
|
257
257
|
<span class="pf-v6-c-button__icon pf-m-start">
|
|
258
|
-
<
|
|
258
|
+
<svg
|
|
259
|
+
class="pf-v6-svg"
|
|
260
|
+
viewBox="0 0 1024 1024"
|
|
261
|
+
fill="currentColor"
|
|
262
|
+
aria-hidden="true"
|
|
263
|
+
role="img"
|
|
264
|
+
width="1em"
|
|
265
|
+
height="1em"
|
|
266
|
+
>
|
|
267
|
+
<path
|
|
268
|
+
d="M521.3,576 C627.5,576 713.7,502 713.7,413.7 C713.7,325.4 627.6,253.6 521.3,253.6 C366,253.6 334.5,337.7 329.2,407.2 C329.2,414.3 335.2,416 343.5,416 L445,416 C450.5,416 458,415.5 460.8,406.5 C460.8,362.6 582.9,357.1 582.9,413.6 C582.9,441.9 556.2,470.9 521.3,473 C486.4,475.1 447.3,479.8 447.3,521.7 L447.3,553.8 C447.3,570.8 456.1,576 472,576 C487.9,576 521.3,576 521.3,576 M575.3,751.3 L575.3,655.3 C575.313862,651.055109 573.620137,646.982962 570.6,644 C567.638831,640.947672 563.552355,639.247987 559.3,639.29884 L463.3,639.29884 C459.055109,639.286138 454.982962,640.979863 452,644 C448.947672,646.961169 447.247987,651.047645 447.29884,655.3 L447.29884,751.3 C447.286138,755.544891 448.979863,759.617038 452,762.6 C454.961169,765.652328 459.047645,767.352013 463.3,767.30116 L559.3,767.30116 C563.544891,767.313862 567.617038,765.620137 570.6,762.6 C573.659349,759.643612 575.360354,755.553963 575.3,751.3 M512,896 C300.2,896 128,723.9 128,512 C128,300.3 300.2,128 512,128 C723.8,128 896,300.2 896,512 C896,723.8 723.7,896 512,896 M512.1,0 C229.7,0 0,229.8 0,512 C0,794.2 229.8,1024 512.1,1024 C794.4,1024 1024,794.3 1024,512 C1024,229.7 794.4,0 512.1,0"
|
|
269
|
+
/>
|
|
270
|
+
</svg>
|
|
259
271
|
</span>
|
|
260
272
|
<span class="pf-v6-c-button__text">View shortcuts</span>
|
|
261
273
|
</button>
|
|
@@ -402,7 +414,19 @@ This is an extra container used in React to prevent event propagation if upload
|
|
|
402
414
|
<div class="pf-v6-c-code-editor__keyboard-shortcuts">
|
|
403
415
|
<button class="pf-v6-c-button pf-m-link" type="button">
|
|
404
416
|
<span class="pf-v6-c-button__icon pf-m-start">
|
|
405
|
-
<
|
|
417
|
+
<svg
|
|
418
|
+
class="pf-v6-svg"
|
|
419
|
+
viewBox="0 0 1024 1024"
|
|
420
|
+
fill="currentColor"
|
|
421
|
+
aria-hidden="true"
|
|
422
|
+
role="img"
|
|
423
|
+
width="1em"
|
|
424
|
+
height="1em"
|
|
425
|
+
>
|
|
426
|
+
<path
|
|
427
|
+
d="M521.3,576 C627.5,576 713.7,502 713.7,413.7 C713.7,325.4 627.6,253.6 521.3,253.6 C366,253.6 334.5,337.7 329.2,407.2 C329.2,414.3 335.2,416 343.5,416 L445,416 C450.5,416 458,415.5 460.8,406.5 C460.8,362.6 582.9,357.1 582.9,413.6 C582.9,441.9 556.2,470.9 521.3,473 C486.4,475.1 447.3,479.8 447.3,521.7 L447.3,553.8 C447.3,570.8 456.1,576 472,576 C487.9,576 521.3,576 521.3,576 M575.3,751.3 L575.3,655.3 C575.313862,651.055109 573.620137,646.982962 570.6,644 C567.638831,640.947672 563.552355,639.247987 559.3,639.29884 L463.3,639.29884 C459.055109,639.286138 454.982962,640.979863 452,644 C448.947672,646.961169 447.247987,651.047645 447.29884,655.3 L447.29884,751.3 C447.286138,755.544891 448.979863,759.617038 452,762.6 C454.961169,765.652328 459.047645,767.352013 463.3,767.30116 L559.3,767.30116 C563.544891,767.313862 567.617038,765.620137 570.6,762.6 C573.659349,759.643612 575.360354,755.553963 575.3,751.3 M512,896 C300.2,896 128,723.9 128,512 C128,300.3 300.2,128 512,128 C723.8,128 896,300.2 896,512 C896,723.8 723.7,896 512,896 M512.1,0 C229.7,0 0,229.8 0,512 C0,794.2 229.8,1024 512.1,1024 C794.4,1024 1024,794.3 1024,512 C1024,229.7 794.4,0 512.1,0"
|
|
428
|
+
/>
|
|
429
|
+
</svg>
|
|
406
430
|
</span>
|
|
407
431
|
<span class="pf-v6-c-button__text">View shortcuts</span>
|
|
408
432
|
</button>
|
|
@@ -550,6 +550,7 @@ cssPrefix: pf-v6-c-drawer
|
|
|
550
550
|
class="pf-v6-c-drawer__splitter pf-m-vertical"
|
|
551
551
|
role="separator"
|
|
552
552
|
tabindex="0"
|
|
553
|
+
aria-valuenow="50"
|
|
553
554
|
aria-orientation="vertical"
|
|
554
555
|
>
|
|
555
556
|
<div class="pf-v6-c-drawer__splitter-handle"></div>
|
|
@@ -597,6 +598,7 @@ cssPrefix: pf-v6-c-drawer
|
|
|
597
598
|
class="pf-v6-c-drawer__splitter pf-m-vertical"
|
|
598
599
|
role="separator"
|
|
599
600
|
tabindex="0"
|
|
601
|
+
aria-valuenow="50"
|
|
600
602
|
aria-orientation="vertical"
|
|
601
603
|
>
|
|
602
604
|
<div class="pf-v6-c-drawer__splitter-handle"></div>
|
|
@@ -647,6 +649,7 @@ cssPrefix: pf-v6-c-drawer
|
|
|
647
649
|
class="pf-v6-c-drawer__splitter"
|
|
648
650
|
role="separator"
|
|
649
651
|
tabindex="0"
|
|
652
|
+
aria-valuenow="50"
|
|
650
653
|
aria-orientation="horizontal"
|
|
651
654
|
>
|
|
652
655
|
<div class="pf-v6-c-drawer__splitter-handle"></div>
|
|
@@ -694,6 +697,7 @@ cssPrefix: pf-v6-c-drawer
|
|
|
694
697
|
class="pf-v6-c-drawer__splitter pf-m-vertical"
|
|
695
698
|
role="separator"
|
|
696
699
|
tabindex="0"
|
|
700
|
+
aria-valuenow="50"
|
|
697
701
|
aria-orientation="vertical"
|
|
698
702
|
>
|
|
699
703
|
<div class="pf-v6-c-drawer__splitter-handle"></div>
|