@patternfly/patternfly 6.2.0 → 6.2.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/README.md +1 -1
- package/components/Card/card.css +3 -0
- package/components/Card/card.scss +3 -0
- 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/FormControl/form-control.css +1 -2
- package/components/FormControl/form-control.scss +1 -5
- package/components/Page/page.css +4 -3
- package/components/Page/page.scss +4 -2
- 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 +108 -19
- package/docs/components/Divider/examples/Divider.md +1 -1
- package/docs/components/Drawer/examples/Drawer.md +4 -0
- package/docs/components/Page/examples/Page.md +1 -0
- package/docs/components/Table/examples/Table.md +4 -4
- 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/Masthead/examples/Masthead.md +1 -1
- package/docs/demos/Nav/examples/Nav.md +2 -2
- package/docs/demos/Page/examples/Page.md +355 -0
- package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +76 -0
- package/docs/demos/Table/examples/Table.md +41 -21
- package/docs/demos/Tabs/examples/Tabs.md +570 -0
- package/package.json +6 -6
- package/patternfly-no-globals.css +108 -19
- package/patternfly.css +108 -19
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
package/components/_index.css
CHANGED
|
@@ -2329,6 +2329,7 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
|
|
|
2329
2329
|
--pf-v6-c-card__title-text--FontSize: var(--pf-t--global--font--size--heading--xs);
|
|
2330
2330
|
--pf-v6-c-card__title-text--FontWeight: var(--pf-t--global--font--weight--heading--default);
|
|
2331
2331
|
--pf-v6-c-card__title-text--LineHeight: var(--pf-t--global--font--line-height--heading);
|
|
2332
|
+
--pf-v6-c-card__title-text--OverflowWrap: break-word;
|
|
2332
2333
|
--pf-v6-c-card--c-button--disabled--Color: var(--pf-t--global--text--color--on-disabled);
|
|
2333
2334
|
--pf-v6-c-card__body--FontSize: var(--pf-t--global--font--size--body--default);
|
|
2334
2335
|
--pf-v6-c-card__footer--FontSize: var(--pf-t--global--font--size--body--default);
|
|
@@ -2541,11 +2542,13 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
|
|
|
2541
2542
|
}
|
|
2542
2543
|
|
|
2543
2544
|
.pf-v6-c-card__title-text {
|
|
2545
|
+
overflow: auto;
|
|
2544
2546
|
font-family: var(--pf-v6-c-card__title-text--FontFamily);
|
|
2545
2547
|
font-size: var(--pf-v6-c-card__title-text--FontSize);
|
|
2546
2548
|
font-weight: var(--pf-v6-c-card__title-text--FontWeight);
|
|
2547
2549
|
line-height: var(--pf-v6-c-card__title-text--LineHeight);
|
|
2548
2550
|
color: var(--pf-v6-c-card__title-text--Color);
|
|
2551
|
+
overflow-wrap: var(--pf-v6-c-card__title-text--OverflowWrap);
|
|
2549
2552
|
}
|
|
2550
2553
|
|
|
2551
2554
|
.pf-v6-c-card__actions {
|
|
@@ -3048,6 +3051,9 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
|
|
|
3048
3051
|
.pf-v6-c-code-editor__main .monaco-editor {
|
|
3049
3052
|
background-color: var(--pf-v6-c-code-editor__main--BackgroundColor);
|
|
3050
3053
|
}
|
|
3054
|
+
.pf-v6-c-code-editor__main a.label-name {
|
|
3055
|
+
text-decoration-line: none;
|
|
3056
|
+
}
|
|
3051
3057
|
|
|
3052
3058
|
.pf-v6-c-code-editor__header + .pf-v6-c-code-editor__main {
|
|
3053
3059
|
border-block-start-width: 0;
|
|
@@ -5304,9 +5310,15 @@ ul) {
|
|
|
5304
5310
|
--pf-v6-c-drawer__panel--RowGap: var(--pf-t--global--spacer--sm);
|
|
5305
5311
|
--pf-v6-c-drawer__panel--PaddingBlockStart: var(--pf-t--global--spacer--sm);
|
|
5306
5312
|
--pf-v6-c-drawer__panel--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
|
|
5313
|
+
--pf-v6-c-drawer__panel--TransitionDelay: 0s, var(--pf-v6-c-drawer__panel--TransitionDelay--focus), var(--pf-v6-c-drawer__panel--TransitionDelay--focus);
|
|
5314
|
+
--pf-v6-c-drawer__panel--TransitionDelay--focus: var(--pf-v6-c-drawer__panel--TransitionDuration--fade);
|
|
5315
|
+
--pf-v6-c-drawer__panel--TransitionDelay--expand--focus: 0s;
|
|
5307
5316
|
--pf-v6-c-drawer__panel--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
|
|
5308
|
-
--pf-v6-c-drawer__panel--TransitionDuration: var(--pf-t--global--motion--duration--
|
|
5309
|
-
--pf-v6-c-drawer__panel--
|
|
5317
|
+
--pf-v6-c-drawer__panel--TransitionDuration--fade: var(--pf-t--global--motion--duration--fade--default);
|
|
5318
|
+
--pf-v6-c-drawer__panel--TransitionDuration: var(--pf-v6-c-drawer__panel--TransitionDuration--fade), 0s, 0s;
|
|
5319
|
+
--pf-v6-c-drawer__panel--TransitionProperty: opacity, visibility, transform;
|
|
5320
|
+
--pf-v6-c-drawer__panel--Opacity: 0;
|
|
5321
|
+
--pf-v6-c-drawer--m-expanded__panel--Opacity: 1;
|
|
5310
5322
|
--pf-v6-c-drawer__panel--FlexBasis: 100%;
|
|
5311
5323
|
--pf-v6-c-drawer__panel--md--FlexBasis--min: 1.5rem;
|
|
5312
5324
|
--pf-v6-c-drawer__panel--md--FlexBasis: 50%;
|
|
@@ -5396,6 +5408,17 @@ ul) {
|
|
|
5396
5408
|
--pf-v6-c-drawer--m-panel-left--m-inline__panel--PaddingInlineEnd: var(--pf-v6-c-drawer__panel--after--Width);
|
|
5397
5409
|
--pf-v6-c-drawer--m-panel-bottom--m-inline__panel--PaddingBlockStart: var(--pf-v6-c-drawer__panel--after--Width);
|
|
5398
5410
|
}
|
|
5411
|
+
@media screen and (prefers-reduced-motion: no-preference) {
|
|
5412
|
+
.pf-v6-c-drawer {
|
|
5413
|
+
--pf-v6-c-drawer__panel--TransitionDuration--slide: var(--pf-t--global--motion--duration--slide-in--short);
|
|
5414
|
+
--pf-v6-c-drawer__panel--TransitionDelay--focus: var(--pf-v6-c-drawer__panel--TransitionDuration--slide);
|
|
5415
|
+
--pf-v6-c-drawer__panel--TransitionDelay: 0s, 0s, 0s, 0s, var(--pf-v6-c-drawer__panel--TransitionDelay--focus);
|
|
5416
|
+
--pf-v6-c-drawer__panel--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
|
|
5417
|
+
--pf-v6-c-drawer__panel--TransitionDuration: 0s, var(--pf-v6-c-drawer__panel--TransitionDuration--slide), 0s, 0s, 0s;
|
|
5418
|
+
--pf-v6-c-drawer__panel--TransitionProperty: margin, transform, box-shadow, flex-basis, visibility;
|
|
5419
|
+
--pf-v6-c-drawer__panel--Opacity: 1;
|
|
5420
|
+
}
|
|
5421
|
+
}
|
|
5399
5422
|
@media screen and (min-width: 75rem) {
|
|
5400
5423
|
.pf-v6-c-drawer {
|
|
5401
5424
|
--pf-v6-c-drawer__panel--MinWidth: var(--pf-v6-c-drawer__panel--xl--MinWidth);
|
|
@@ -5443,8 +5466,13 @@ ul) {
|
|
|
5443
5466
|
.pf-v6-c-drawer.pf-m-panel-bottom > .pf-v6-c-drawer__main {
|
|
5444
5467
|
flex-direction: column;
|
|
5445
5468
|
}
|
|
5469
|
+
.pf-v6-c-drawer.pf-m-expanded {
|
|
5470
|
+
--pf-v6-c-drawer__panel--TransitionDelay--focus: var(--pf-v6-c-drawer__panel--TransitionDelay--expand--focus);
|
|
5471
|
+
}
|
|
5446
5472
|
.pf-v6-c-drawer.pf-m-expanded > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
|
|
5447
5473
|
transform: translateX(-100%);
|
|
5474
|
+
--pf-v6-c-drawer__panel--Opacity: var(--pf-v6-c-drawer--m-expanded__panel--Opacity);
|
|
5475
|
+
visibility: visible;
|
|
5448
5476
|
}
|
|
5449
5477
|
: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 {
|
|
5450
5478
|
transform: translateX(calc(-100% * var(--pf-v6-global--inverse--multiplier)));
|
|
@@ -5517,8 +5545,11 @@ ul) {
|
|
|
5517
5545
|
order: 1;
|
|
5518
5546
|
max-height: var(--pf-v6-c-drawer__panel--MaxHeight);
|
|
5519
5547
|
overflow: auto;
|
|
5548
|
+
visibility: hidden;
|
|
5520
5549
|
background-color: var(--pf-v6-c-drawer__panel--BackgroundColor);
|
|
5521
5550
|
box-shadow: var(--pf-v6-c-drawer__panel--BoxShadow);
|
|
5551
|
+
opacity: var(--pf-v6-c-drawer__panel--Opacity);
|
|
5552
|
+
transition-delay: var(--pf-v6-c-drawer__panel--TransitionDelay);
|
|
5522
5553
|
transition-timing-function: var(--pf-v6-c-drawer__panel--TransitionTimingFunction);
|
|
5523
5554
|
transition-duration: var(--pf-v6-c-drawer__panel--TransitionDuration);
|
|
5524
5555
|
transition-property: var(--pf-v6-c-drawer__panel--TransitionProperty);
|
|
@@ -5575,17 +5606,6 @@ ul) {
|
|
|
5575
5606
|
padding-block-end: var(--pf-v6-c-drawer__panel--PaddingBlockEnd);
|
|
5576
5607
|
}
|
|
5577
5608
|
|
|
5578
|
-
@keyframes pf-remove-tab-focus {
|
|
5579
|
-
to {
|
|
5580
|
-
visibility: hidden;
|
|
5581
|
-
}
|
|
5582
|
-
}
|
|
5583
|
-
.pf-v6-c-drawer__panel[hidden] {
|
|
5584
|
-
animation-name: pf-remove-tab-focus;
|
|
5585
|
-
animation-delay: var(--pf-v6-c-drawer__panel--TransitionDuration);
|
|
5586
|
-
animation-fill-mode: forwards;
|
|
5587
|
-
}
|
|
5588
|
-
|
|
5589
5609
|
.pf-v6-c-drawer__head {
|
|
5590
5610
|
display: grid;
|
|
5591
5611
|
grid-template-columns: auto;
|
|
@@ -5693,7 +5713,7 @@ ul) {
|
|
|
5693
5713
|
.pf-v6-c-drawer {
|
|
5694
5714
|
min-width: var(--pf-v6-c-drawer__panel--MinWidth);
|
|
5695
5715
|
}
|
|
5696
|
-
.pf-v6-c-drawer
|
|
5716
|
+
.pf-v6-c-drawer > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
|
|
5697
5717
|
box-shadow: var(--pf-v6-c-drawer--m-expanded__panel--BoxShadow);
|
|
5698
5718
|
}
|
|
5699
5719
|
.pf-v6-c-drawer > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel.pf-m-resizable {
|
|
@@ -7067,12 +7087,11 @@ ul) {
|
|
|
7067
7087
|
padding-inline-start: var(--pf-v6-c-form-control--PaddingInlineStart);
|
|
7068
7088
|
padding-inline-end: var(--pf-v6-c-form-control--PaddingInlineEnd);
|
|
7069
7089
|
color: var(--pf-v6-c-form-control--Color);
|
|
7090
|
+
appearance: none;
|
|
7070
7091
|
background-color: transparent;
|
|
7071
7092
|
border: none;
|
|
7072
7093
|
border-radius: var(--pf-v6-c-form-control--BorderRadius);
|
|
7073
7094
|
outline-offset: var(--pf-v6-c-form-control--OutlineOffset);
|
|
7074
|
-
-moz-appearance: none;
|
|
7075
|
-
-webkit-appearance: none;
|
|
7076
7095
|
}
|
|
7077
7096
|
.pf-v6-c-form-control > ::placeholder {
|
|
7078
7097
|
color: var(--pf-v6-c-form-control--m-placeholder--Color);
|
|
@@ -11746,8 +11765,9 @@ ul.pf-v6-c-list {
|
|
|
11746
11765
|
--pf-v6-c-page--inset: var(--pf-t--global--spacer--inset--page-chrome);
|
|
11747
11766
|
--pf-v6-c-page--c-masthead--ZIndex: var(--pf-t--global--z-index--md);
|
|
11748
11767
|
--pf-v6-c-page__sidebar--ZIndex: var(--pf-t--global--z-index--sm);
|
|
11749
|
-
--pf-v6-c-page__sidebar--Width: 18.125rem;
|
|
11750
|
-
--pf-v6-c-page__sidebar--
|
|
11768
|
+
--pf-v6-c-page__sidebar--Width--base: 18.125rem;
|
|
11769
|
+
--pf-v6-c-page__sidebar--Width: var(--pf-v6-c-page__sidebar--Width--base);
|
|
11770
|
+
--pf-v6-c-page__sidebar--xl--Width: var(--pf-v6-c-page__sidebar--Width--base);
|
|
11751
11771
|
--pf-v6-c-page__sidebar--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
|
|
11752
11772
|
--pf-v6-c-page__sidebar--BoxShadow: none;
|
|
11753
11773
|
--pf-v6-c-page__sidebar--TransitionDuration: var(--pf-t--global--motion--duration--slide-in--default);
|
|
@@ -12175,7 +12195,7 @@ ul.pf-v6-c-list {
|
|
|
12175
12195
|
-webkit-overflow-scrolling: touch;
|
|
12176
12196
|
}
|
|
12177
12197
|
@media screen and (min-width: 75rem) {
|
|
12178
|
-
.pf-v6-c-masthead + .pf-v6-c-page__main-container, .pf-v6-c-page__sidebar.pf-m-collapsed + .pf-v6-c-page__main-container,
|
|
12198
|
+
.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,
|
|
12179
12199
|
.pf-v6-c-masthead + .pf-v6-c-page__drawer,
|
|
12180
12200
|
.pf-v6-c-page__sidebar.pf-m-collapsed + .pf-v6-c-page__drawer {
|
|
12181
12201
|
--pf-v6-c-page__main-container--GridArea: var(--pf-v6-c-page--masthead--main-container--GridArea);
|
|
@@ -18315,6 +18335,16 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
|
|
|
18315
18335
|
}
|
|
18316
18336
|
}
|
|
18317
18337
|
|
|
18338
|
+
@property --pf-v6-c-tabs--link-accent--length {
|
|
18339
|
+
syntax: "<length>";
|
|
18340
|
+
inherits: true;
|
|
18341
|
+
initial-value: 0px;
|
|
18342
|
+
}
|
|
18343
|
+
@property --pf-v6-c-tabs--link-accent--start {
|
|
18344
|
+
syntax: "<length>";
|
|
18345
|
+
inherits: true;
|
|
18346
|
+
initial-value: 0px;
|
|
18347
|
+
}
|
|
18318
18348
|
.pf-v6-c-tabs {
|
|
18319
18349
|
--pf-v6-c-tabs--inset: 0;
|
|
18320
18350
|
--pf-v6-c-tabs--Width: auto;
|
|
@@ -18376,6 +18406,8 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
|
|
|
18376
18406
|
--pf-v6-c-tabs--m-box--m-secondary__link--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
|
|
18377
18407
|
--pf-v6-c-tabs--m-box--m-secondary__item--m-current__link--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
|
|
18378
18408
|
--pf-v6-c-tabs--m-subtab__link--FontSize: var(--pf-t--global--font--size--xs);
|
|
18409
|
+
--pf-v6-c-tabs__link--TransitionDuration--background-color: var(--pf-t--global--motion--duration--fade--short);
|
|
18410
|
+
--pf-v6-c-tabs__link--TransitionTimingFunction--background-color: var(--pf-t--global--motion--timing-function--default);
|
|
18379
18411
|
--pf-v6-c-tabs__link--before--border-color--base: var(--pf-t--global--border--color--default);
|
|
18380
18412
|
--pf-v6-c-tabs__link--before--border-width--base: var(--pf-t--global--border--width--regular);
|
|
18381
18413
|
--pf-v6-c-tabs__link--before--BorderBlockStartColor: var(--pf-v6-c-tabs__link--before--border-color--base);
|
|
@@ -18400,6 +18432,26 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
|
|
|
18400
18432
|
--pf-v6-c-tabs__link--after--BorderInlineStartWidth: 0;
|
|
18401
18433
|
--pf-v6-c-tabs__item--m-current__link--after--BorderColor: var(--pf-t--global--border--color--clicked);
|
|
18402
18434
|
--pf-v6-c-tabs__item--m-current__link--after--BorderWidth: var(--pf-t--global--border--width--extra-strong);
|
|
18435
|
+
--pf-v6-c-tabs--link-accent--start: 0;
|
|
18436
|
+
--pf-v6-c-tabs--link-accent--length: auto;
|
|
18437
|
+
--pf-v6-c-tabs--link-accent--color: var(--pf-v6-c-tabs__item--m-current__link--after--BorderColor);
|
|
18438
|
+
--pf-v6-c-tabs--link-accent--border-size: var(--pf-v6-c-tabs__item--m-current__link--after--BorderWidth);
|
|
18439
|
+
--pf-v6-c-tabs--link-accent--InsetBlockStart: auto;
|
|
18440
|
+
--pf-v6-c-tabs--link-accent--InsetBlockEnd: 0;
|
|
18441
|
+
--pf-v6-c-tabs--link-accent--InsetInlineStart: initial;
|
|
18442
|
+
--pf-v6-c-tabs--link-accent--Width: initial;
|
|
18443
|
+
--pf-v6-c-tabs--link-accent--Height: 0;
|
|
18444
|
+
--pf-v6-c-tabs--link-accent--BorderBlockEndWidth: var(--pf-v6-c-tabs--link-accent--border-size);
|
|
18445
|
+
--pf-v6-c-tabs--link-accent--BorderInlineStartWidth: 0;
|
|
18446
|
+
--pf-v6-c-tabs--m-vertical--link-accent--InsetBlockStart: initial;
|
|
18447
|
+
--pf-v6-c-tabs--m-vertical--link-accent--InsetBlockEnd: auto;
|
|
18448
|
+
--pf-v6-c-tabs--m-vertical--link-accent--InsetInlineStart: 0;
|
|
18449
|
+
--pf-v6-c-tabs--m-vertical--link-accent--Width: 0;
|
|
18450
|
+
--pf-v6-c-tabs--m-vertical--link-accent--Height: initial;
|
|
18451
|
+
--pf-v6-c-tabs--m-vertical--link-accent--BorderBlockEndWidth: 0;
|
|
18452
|
+
--pf-v6-c-tabs--m-vertical--link-accent--BorderInlineStartWidth: var(--pf-v6-c-tabs--link-accent--border-size);
|
|
18453
|
+
--pf-v6-c-tabs--link-accent--TransitionDuration: var(--pf-t--global--motion--duration--md);
|
|
18454
|
+
--pf-v6-c-tabs--link-accent--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
|
|
18403
18455
|
--pf-v6-c-tabs__scroll-button--PaddingBlockStart: var(--pf-t--global--spacer--sm);
|
|
18404
18456
|
--pf-v6-c-tabs__scroll-button--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
|
|
18405
18457
|
--pf-v6-c-tabs__scroll-button--PaddingInlineStart: var(--pf-t--global--spacer--sm);
|
|
@@ -18557,6 +18609,13 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
|
|
|
18557
18609
|
--pf-v6-c-tabs__link--after--InsetBlockEnd: 0;
|
|
18558
18610
|
--pf-v6-c-tabs__link--after--InsetInlineEnd: auto;
|
|
18559
18611
|
--pf-v6-c-tabs__list--ScrollSnapTypeAxis: var(--pf-v6-c-tabs--m-vertical__list--ScrollSnapTypeAxis);
|
|
18612
|
+
--pf-v6-c-tabs--link-accent--InsetBlockStart: var(--pf-v6-c-tabs--m-vertical--link-accent--InsetBlockStart);
|
|
18613
|
+
--pf-v6-c-tabs--link-accent--InsetBlockEnd: var(--pf-v6-c-tabs--m-vertical--link-accent--InsetBlockEnd);
|
|
18614
|
+
--pf-v6-c-tabs--link-accent--InsetInlineStart: var(--pf-v6-c-tabs--m-vertical--link-accent--InsetInlineStart);
|
|
18615
|
+
--pf-v6-c-tabs--link-accent--Width: var(--pf-v6-c-tabs--m-vertical--link-accent--Width);
|
|
18616
|
+
--pf-v6-c-tabs--link-accent--Height: var(--pf-v6-c-tabs--m-vertical--link-accent--Height);
|
|
18617
|
+
--pf-v6-c-tabs--link-accent--BorderBlockEndWidth: var(--pf-v6-c-tabs--m-vertical--link-accent--BorderBlockEndWidth);
|
|
18618
|
+
--pf-v6-c-tabs--link-accent--BorderInlineStartWidth: var(--pf-v6-c-tabs--m-vertical--link-accent--BorderInlineStartWidth);
|
|
18560
18619
|
display: inline-flex;
|
|
18561
18620
|
flex-direction: column;
|
|
18562
18621
|
height: 100%;
|
|
@@ -18819,6 +18878,7 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
|
|
|
18819
18878
|
text-decoration-line: none;
|
|
18820
18879
|
background-color: var(--pf-v6-c-tabs__link--BackgroundColor);
|
|
18821
18880
|
border-radius: var(--pf-v6-c-tabs__link--BorderRadius);
|
|
18881
|
+
transition: background-color var(--pf-v6-c-tabs__link--TransitionDuration--background-color) var(--pf-v6-c-tabs__link--TransitionTimingFunction--background-color);
|
|
18822
18882
|
}
|
|
18823
18883
|
.pf-v6-c-tabs__item.pf-m-action, .pf-v6-c-tabs__link {
|
|
18824
18884
|
--pf-v6-c-tabs__link--after--BorderBlockEndWidth: var(--pf-v6-c-tabs__link--after--BorderWidth);
|
|
@@ -19131,6 +19191,30 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
|
|
|
19131
19191
|
}
|
|
19132
19192
|
}
|
|
19133
19193
|
|
|
19194
|
+
@media (prefers-reduced-motion: no-preference) {
|
|
19195
|
+
.pf-v6-c-tabs:not(.pf-m-box) .pf-v6-c-tabs__link::after,
|
|
19196
|
+
.pf-v6-c-tabs:not(.pf-m-box) .pf-v6-c-tabs__item.pf-m-action::after {
|
|
19197
|
+
content: revert;
|
|
19198
|
+
}
|
|
19199
|
+
.pf-v6-c-tabs:not(.pf-m-box) .pf-v6-c-tabs__list::after {
|
|
19200
|
+
position: absolute;
|
|
19201
|
+
inset-block-start: var(--pf-v6-c-tabs--link-accent--InsetBlockStart, var(--pf-v6-c-tabs--link-accent--start));
|
|
19202
|
+
inset-block-end: var(--pf-v6-c-tabs--link-accent--InsetBlockEnd);
|
|
19203
|
+
inset-inline-start: var(--pf-v6-c-tabs--link-accent--InsetInlineStart, var(--pf-v6-c-tabs--link-accent--start));
|
|
19204
|
+
width: var(--pf-v6-c-tabs--link-accent--Width, var(--pf-v6-c-tabs--link-accent--length));
|
|
19205
|
+
height: var(--pf-v6-c-tabs--link-accent--Height, var(--pf-v6-c-tabs--link-accent--length));
|
|
19206
|
+
content: "";
|
|
19207
|
+
border: 0 solid var(--pf-v6-c-tabs--link-accent--color);
|
|
19208
|
+
border-block-end-width: var(--pf-v6-c-tabs--link-accent--BorderBlockEndWidth);
|
|
19209
|
+
border-inline-start-width: var(--pf-v6-c-tabs--link-accent--BorderInlineStartWidth);
|
|
19210
|
+
transition-timing-function: var(--pf-v6-c-tabs--link-accent--TransitionTimingFunction);
|
|
19211
|
+
transition-duration: var(--pf-v6-c-tabs--link-accent--TransitionDuration);
|
|
19212
|
+
transition-property: --pf-v6-c-tabs--link-accent--length, --pf-v6-c-tabs--link-accent--start, width;
|
|
19213
|
+
}
|
|
19214
|
+
.pf-v6-c-tabs.pf-m-initializing-accent {
|
|
19215
|
+
--pf-v6-c-tabs--link-accent--TransitionDuration: 0;
|
|
19216
|
+
}
|
|
19217
|
+
}
|
|
19134
19218
|
.pf-v6-c-text-input-group {
|
|
19135
19219
|
--pf-v6-c-text-input-group--BackgroundColor: var(--pf-t--global--background--color--control--default);
|
|
19136
19220
|
--pf-v6-c-text-input-group--BorderColor: var(--pf-t--global--border--color--default);
|
|
@@ -21742,6 +21826,11 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
|
|
|
21742
21826
|
align-items: baseline;
|
|
21743
21827
|
min-width: var(--pf-v6-c-truncate--MinWidth);
|
|
21744
21828
|
}
|
|
21829
|
+
.pf-v6-c-truncate.pf-m-fixed {
|
|
21830
|
+
display: inline;
|
|
21831
|
+
align-items: revert;
|
|
21832
|
+
min-width: revert;
|
|
21833
|
+
}
|
|
21745
21834
|
|
|
21746
21835
|
.pf-v6-c-truncate__start,
|
|
21747
21836
|
.pf-v6-c-truncate__end {
|
|
@@ -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>
|
|
@@ -412,6 +412,7 @@ This component provides the basic chrome for a page, including sidebar and main
|
|
|
412
412
|
| `.pf-v6-c-page__main-body` | `<div>` | Creates the body section for a page section. **Required** |
|
|
413
413
|
| `.pf-v6-c-page__main-group` | `<div>` | Creates the group of `.pf-v6-c-page__main-*` sections. Can be used in combination with `.pf-m-sticky-[top/bottom]` to make multiple sections sticky. |
|
|
414
414
|
| `.pf-v6-c-page__drawer` | `<div>` | Creates a container for the drawer component when placing the main page element in the drawer body. |
|
|
415
|
+
| `.pf-m-no-sidebar` | `.pf-v6-c-page` | Modifies the page grid for layouts without a sidebar. |
|
|
415
416
|
| `.pf-m-expanded` | `.pf-v6-c-page__sidebar` | Modifies the sidebar for the expanded state. |
|
|
416
417
|
| `.pf-m-collapsed` | `.pf-v6-c-page__sidebar` | Modifies the sidebar for the collapsed state. |
|
|
417
418
|
| `.pf-m-page-insets` | `.pf-v6-c-page__sidebar-body` | Modifies a sidebar body padding/inset to visually match padding of page elements. |
|
|
@@ -1150,7 +1150,7 @@ Note: Table column widths will respond automatically when toggling expanded rows
|
|
|
1150
1150
|
class="pf-v6-c-button pf-m-plain"
|
|
1151
1151
|
id="table-expandable-expandable-toggle-thead"
|
|
1152
1152
|
type="button"
|
|
1153
|
-
aria-controls="table-expandable-content-
|
|
1153
|
+
aria-controls="table-expandable-content-1 table-expandable-content-2 table-expandable-content-3 table-expandable-content-4"
|
|
1154
1154
|
aria-labelledby="table-expandable-node-thead"
|
|
1155
1155
|
aria-label="Toggle all rows"
|
|
1156
1156
|
>
|
|
@@ -1620,7 +1620,7 @@ Note: Table column widths will respond automatically when toggling expanded rows
|
|
|
1620
1620
|
id="expandable-set-width-columns-example-expandable-toggle-thead"
|
|
1621
1621
|
type="button"
|
|
1622
1622
|
aria-expanded="true"
|
|
1623
|
-
aria-controls="expandable-set-width-columns-example-content-
|
|
1623
|
+
aria-controls="expandable-set-width-columns-example-content-1 expandable-set-width-columns-example-content-2 expandable-set-width-columns-example-content-3 expandable-set-width-columns-example-content-4"
|
|
1624
1624
|
aria-labelledby="expandable-set-width-columns-example-node-thead"
|
|
1625
1625
|
aria-label="Toggle all rows"
|
|
1626
1626
|
aria-describedby="true"
|
|
@@ -2096,7 +2096,7 @@ Note: Table column widths will respond automatically when toggling expanded rows
|
|
|
2096
2096
|
class="pf-v6-c-button pf-m-plain"
|
|
2097
2097
|
id="table-expandable-nested-table-expandable-toggle-thead"
|
|
2098
2098
|
type="button"
|
|
2099
|
-
aria-controls="table-expandable-nested-table-content-
|
|
2099
|
+
aria-controls="table-expandable-nested-table-content-1 table-expandable-nested-table-content-2 table-expandable-nested-table-content-3 table-expandable-nested-table-content-4"
|
|
2100
2100
|
aria-labelledby="table-expandable-nested-table-node-thead"
|
|
2101
2101
|
aria-label="Toggle all rows"
|
|
2102
2102
|
>
|
|
@@ -5285,7 +5285,7 @@ Note: To apply padding to `.pf-v6-c-table__expandable-row`, wrap the content in
|
|
|
5285
5285
|
class="pf-v6-c-button pf-m-small pf-m-plain"
|
|
5286
5286
|
id="table-compact-expandable-expandable-toggle-thead"
|
|
5287
5287
|
type="button"
|
|
5288
|
-
aria-controls="table-compact-expandable-content-
|
|
5288
|
+
aria-controls="table-compact-expandable-content-1 table-compact-expandable-content-2 table-compact-expandable-content-3 table-compact-expandable-content-4"
|
|
5289
5289
|
aria-labelledby="table-compact-expandable-node-thead"
|
|
5290
5290
|
aria-label="Toggle all rows"
|
|
5291
5291
|
>
|