@patternfly/patternfly 6.6.0-prerelease.21 → 6.6.0-prerelease.23
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/Accordion/accordion.css +3 -3
- package/components/Accordion/accordion.scss +3 -3
- package/components/Alert/alert.css +5 -5
- package/components/Alert/alert.scss +5 -5
- package/components/Breadcrumb/breadcrumb.css +2 -2
- package/components/Breadcrumb/breadcrumb.scss +2 -2
- package/components/Card/card.css +4 -4
- package/components/Card/card.scss +4 -4
- package/components/DataList/data-list.css +5 -5
- package/components/DataList/data-list.scss +5 -5
- package/components/Hint/hint.css +2 -2
- package/components/Hint/hint.scss +2 -2
- package/components/ModalBox/modal-box.css +1 -1
- package/components/ModalBox/modal-box.scss +1 -1
- package/components/Nav/nav.css +2 -2
- package/components/Nav/nav.scss +2 -2
- package/components/Pagination/pagination.css +12 -7
- package/components/Pagination/pagination.scss +15 -12
- package/components/Popover/popover.css +1 -1
- package/components/Popover/popover.scss +1 -1
- package/components/Table/table.css +2 -2
- package/components/Table/table.scss +2 -2
- package/components/TreeView/tree-view.css +6 -6
- package/components/TreeView/tree-view.scss +6 -6
- package/components/_index.css +45 -40
- package/docs/components/Pagination/examples/Pagination.md +0 -162
- package/package.json +1 -1
- package/patternfly-no-globals.css +45 -40
- package/patternfly.css +45 -40
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
package/components/_index.css
CHANGED
|
@@ -206,10 +206,10 @@
|
|
|
206
206
|
--pf-v6-c-accordion__item--BorderRadius: var(--pf-t--global--border--radius--200);
|
|
207
207
|
--pf-v6-c-accordion__item--m-expanded--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
|
|
208
208
|
--pf-v6-c-accordion__toggle--ColumnGap: var(--pf-t--global--spacer--gap--text-to-element--default);
|
|
209
|
-
--pf-v6-c-accordion__toggle--PaddingBlockStart: var(--pf-t--global--spacer--
|
|
209
|
+
--pf-v6-c-accordion__toggle--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--plain);
|
|
210
210
|
--pf-v6-c-accordion__toggle--PaddingInlineEnd: var(--pf-t--global--spacer--md);
|
|
211
|
-
--pf-v6-c-accordion__toggle--PaddingBlockEnd: var(--pf-t--global--spacer--
|
|
212
|
-
--pf-v6-c-accordion__toggle--m-expanded--PaddingBlockEnd: var(--pf-t--global--spacer--
|
|
211
|
+
--pf-v6-c-accordion__toggle--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--plain);
|
|
212
|
+
--pf-v6-c-accordion__toggle--m-expanded--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--plain);
|
|
213
213
|
--pf-v6-c-accordion__toggle--PaddingInlineStart: var(--pf-t--global--spacer--md);
|
|
214
214
|
--pf-v6-c-accordion__toggle--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
|
|
215
215
|
--pf-v6-c-accordion__toggle--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
|
|
@@ -521,9 +521,9 @@
|
|
|
521
521
|
--pf-v6-c-alert--PaddingBlockEnd: var(--pf-t--global--spacer--md);
|
|
522
522
|
--pf-v6-c-alert--PaddingInlineStart: var(--pf-t--global--spacer--md);
|
|
523
523
|
--pf-v6-c-alert--FontSize: var(--pf-t--global--font--size--body--default);
|
|
524
|
-
--pf-v6-c-alert__toggle--MarginBlockStart: calc(
|
|
525
|
-
--pf-v6-c-alert__toggle--MarginBlockEnd: calc(
|
|
526
|
-
--pf-v6-c-alert__toggle--MarginInlineStart: calc(
|
|
524
|
+
--pf-v6-c-alert__toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--plain) * -1);
|
|
525
|
+
--pf-v6-c-alert__toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--plain) * -1);
|
|
526
|
+
--pf-v6-c-alert__toggle--MarginInlineStart: calc(var(--pf-t--global--spacer--action--horizontal--plain--default) * -1);
|
|
527
527
|
--pf-v6-c-alert__toggle--MarginInlineEnd: var(--pf-t--global--spacer--sm);
|
|
528
528
|
--pf-v6-c-alert__toggle-icon--Rotate: 0;
|
|
529
529
|
--pf-v6-c-alert__toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
|
|
@@ -535,8 +535,8 @@
|
|
|
535
535
|
--pf-v6-c-alert__title--FontWeight: var(--pf-t--global--font--weight--body--bold);
|
|
536
536
|
--pf-v6-c-alert__title--Color: var(--pf-t--global--text--color--regular);
|
|
537
537
|
--pf-v6-c-alert__title--max-lines: 1;
|
|
538
|
-
--pf-v6-c-alert__action--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--
|
|
539
|
-
--pf-v6-c-alert__action--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--
|
|
538
|
+
--pf-v6-c-alert__action--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--plain) * -1);
|
|
539
|
+
--pf-v6-c-alert__action--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--plain) * -1);
|
|
540
540
|
--pf-v6-c-alert__action--TranslateY: 0.125rem;
|
|
541
541
|
--pf-v6-c-alert__action--MarginInlineEnd: calc(var(--pf-t--global--spacer--sm) * -1);
|
|
542
542
|
--pf-v6-c-alert__description--PaddingBlockStart: var(--pf-t--global--spacer--xs);
|
|
@@ -1679,9 +1679,9 @@ div.pf-v6-c-avatar {
|
|
|
1679
1679
|
--pf-v6-c-breadcrumb__link--m-current--Color: var(--pf-t--global--text--color--regular);
|
|
1680
1680
|
--pf-v6-c-breadcrumb__link--BackgroundColor: transparent;
|
|
1681
1681
|
--pf-v6-c-breadcrumb__heading--FontSize: var(--pf-v6-c-breadcrumb__item--FontSize);
|
|
1682
|
-
--pf-v6-c-breadcrumb__menu-toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--
|
|
1682
|
+
--pf-v6-c-breadcrumb__menu-toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--plain) * -1);
|
|
1683
1683
|
--pf-v6-c-breadcrumb__menu-toggle--MarginInlineEnd: var(--pf-t--global--spacer--xs);
|
|
1684
|
-
--pf-v6-c-breadcrumb__menu-toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--
|
|
1684
|
+
--pf-v6-c-breadcrumb__menu-toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--plain) * -1);
|
|
1685
1685
|
--pf-v6-c-breadcrumb__menu-toggle--MarginInlineStart: var(--pf-t--global--spacer--xs);
|
|
1686
1686
|
}
|
|
1687
1687
|
|
|
@@ -3020,13 +3020,13 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
|
|
|
3020
3020
|
--pf-v6-c-card__footer--Color: var(--pf-t--global--text--color--subtle);
|
|
3021
3021
|
--pf-v6-c-card__actions--PaddingInlineStart: var(--pf-t--global--spacer--md);
|
|
3022
3022
|
--pf-v6-c-card__actions--Gap: var(--pf-t--global--spacer--gap--action-to-action--default);
|
|
3023
|
-
--pf-v6-c-card__actions--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--
|
|
3024
|
-
--pf-v6-c-card__actions--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--
|
|
3023
|
+
--pf-v6-c-card__actions--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--plain) * -1);
|
|
3024
|
+
--pf-v6-c-card__actions--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--plain) * -1);
|
|
3025
3025
|
--pf-v6-c-card__header--m-wrap--RowGap: var(--pf-t--global--spacer--sm);
|
|
3026
3026
|
--pf-v6-c-card__header--m-wrap--ColumnGap: var(--pf-t--global--spacer--md);
|
|
3027
|
-
--pf-v6-c-card__header-toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--
|
|
3027
|
+
--pf-v6-c-card__header-toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--plain) * -1);
|
|
3028
3028
|
--pf-v6-c-card__header-toggle--MarginInlineEnd: var(--pf-t--global--spacer--gap--text-to-element--default);
|
|
3029
|
-
--pf-v6-c-card__header-toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--
|
|
3029
|
+
--pf-v6-c-card__header-toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--plain) * -1);
|
|
3030
3030
|
--pf-v6-c-card__header-toggle--MarginInlineStart: calc(var(--pf-t--global--spacer--action--horizontal--plain--default) * -1);
|
|
3031
3031
|
--pf-v6-c-card__header-toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
|
|
3032
3032
|
--pf-v6-c-card__header-toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
|
|
@@ -4993,7 +4993,7 @@ ul) {
|
|
|
4993
4993
|
--pf-v6-c-data-list--pf-m-plain__item--BackgroundColor: transparent;
|
|
4994
4994
|
--pf-v6-c-data-list__item--hover--BackgroundColor: var(--pf-t--global--background--color--primary--hover);
|
|
4995
4995
|
--pf-v6-c-data-list__item--m-selected--BackgroundColor: var(--pf-t--global--background--color--primary--clicked);
|
|
4996
|
-
--pf-v6-c-data-list__item--m-clickable--OutlineOffset: calc(
|
|
4996
|
+
--pf-v6-c-data-list__item--m-clickable--OutlineOffset: calc(var(--pf-t--global--spacer--xs) * -1);
|
|
4997
4997
|
--pf-v6-c-data-list__item--BorderBlockEndColor: var(--pf-t--global--border--color--default);
|
|
4998
4998
|
--pf-v6-c-data-list__item--BorderBlockEndWidth: var(--pf-t--global--border--width--strong);
|
|
4999
4999
|
--pf-v6-c-data-list__item--sm--BorderBlockEndWidth: var(--pf-t--global--border--width--divider--default);
|
|
@@ -5026,8 +5026,8 @@ ul) {
|
|
|
5026
5026
|
--pf-v6-c-data-list--cell--WordBreak: normal;
|
|
5027
5027
|
--pf-v6-c-data-list--cell--m-truncate--MinWidth: 5ch;
|
|
5028
5028
|
--pf-v6-c-data-list__toggle--MarginInlineStart: calc(var(--pf-t--global--spacer--action--horizontal--plain--default) * -1);
|
|
5029
|
-
--pf-v6-c-data-list__toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--
|
|
5030
|
-
--pf-v6-c-data-list__toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--
|
|
5029
|
+
--pf-v6-c-data-list__toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--plain) * -1);
|
|
5030
|
+
--pf-v6-c-data-list__toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--plain) * -1);
|
|
5031
5031
|
--pf-v6-c-data-list__toggle-icon--Height: calc(var(--pf-v6-c-data-list--FontSize) * var(--pf-v6-c-data-list--LineHeight));
|
|
5032
5032
|
--pf-v6-c-data-list__toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
|
|
5033
5033
|
--pf-v6-c-data-list__toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
|
|
@@ -5058,8 +5058,8 @@ ul) {
|
|
|
5058
5058
|
--pf-v6-c-data-list__item-action--Display: flex;
|
|
5059
5059
|
--pf-v6-c-data-list__item-action--PaddingBlockStart: var(--pf-t--global--spacer--lg);
|
|
5060
5060
|
--pf-v6-c-data-list__item-action--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
|
|
5061
|
-
--pf-v6-c-data-list__item-action--PaddingBlockStart--offset: var(--pf-t--global--spacer--control--vertical--
|
|
5062
|
-
--pf-v6-c-data-list__item-action--PaddingBlockEnd--offset: var(--pf-t--global--spacer--control--vertical--
|
|
5061
|
+
--pf-v6-c-data-list__item-action--PaddingBlockStart--offset: var(--pf-t--global--spacer--control--vertical--plain);
|
|
5062
|
+
--pf-v6-c-data-list__item-action--PaddingBlockEnd--offset: var(--pf-t--global--spacer--control--vertical--plain);
|
|
5063
5063
|
--pf-v6-c-data-list__item-action--MarginInlineStart: var(--pf-t--global--spacer--md);
|
|
5064
5064
|
--pf-v6-c-data-list__item-action--md--MarginInlineStart: var(--pf-t--global--spacer--xl);
|
|
5065
5065
|
--pf-v6-c-data-list__item-action--Gap: var(--pf-t--global--spacer--gap--action-to-action--default);
|
|
@@ -9029,8 +9029,8 @@ ul) {
|
|
|
9029
9029
|
--pf-v6-c-hint__footer--MarginBlockStart: var(--pf-t--global--spacer--sm);
|
|
9030
9030
|
--pf-v6-c-hint__footer--child--MarginInlineEnd: var(--pf-t--global--spacer--md);
|
|
9031
9031
|
--pf-v6-c-hint__actions--MarginInlineStart: var(--pf-t--global--spacer--2xl);
|
|
9032
|
-
--pf-v6-c-hint__actions--c-menu-toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--
|
|
9033
|
-
--pf-v6-c-hint__actions--c-menu-toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--
|
|
9032
|
+
--pf-v6-c-hint__actions--c-menu-toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--plain) * -1);
|
|
9033
|
+
--pf-v6-c-hint__actions--c-menu-toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--plain) * -1);
|
|
9034
9034
|
}
|
|
9035
9035
|
|
|
9036
9036
|
.pf-v6-c-hint {
|
|
@@ -12707,7 +12707,7 @@ ul.pf-v6-c-list {
|
|
|
12707
12707
|
--pf-v6-c-modal-box__header--PaddingInlineStart: var(--pf-t--global--spacer--lg);
|
|
12708
12708
|
--pf-v6-c-modal-box__header--Gap: var(--pf-t--global--spacer--md);
|
|
12709
12709
|
--pf-v6-c-modal-box__header-main--Gap: var(--pf-t--global--spacer--md);
|
|
12710
|
-
--pf-v6-c-modal-box__header-main--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--
|
|
12710
|
+
--pf-v6-c-modal-box__header-main--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--plain);
|
|
12711
12711
|
--pf-v6-c-modal-box__title--LineHeight: var(--pf-t--global--font--line-height--heading);
|
|
12712
12712
|
--pf-v6-c-modal-box__title--FontFamily: var(--pf-t--global--font--family--heading);
|
|
12713
12713
|
--pf-v6-c-modal-box__title--FontWeight: var(--pf-t--global--font--weight--heading--default);
|
|
@@ -13092,8 +13092,8 @@ ul.pf-v6-c-list {
|
|
|
13092
13092
|
}
|
|
13093
13093
|
|
|
13094
13094
|
.pf-v6-c-nav {
|
|
13095
|
-
--pf-v6-c-nav__link--PaddingBlockStart: var(--pf-t--global--spacer--
|
|
13096
|
-
--pf-v6-c-nav__link--PaddingBlockEnd: var(--pf-t--global--spacer--
|
|
13095
|
+
--pf-v6-c-nav__link--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--plain);
|
|
13096
|
+
--pf-v6-c-nav__link--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--plain);
|
|
13097
13097
|
--pf-v6-c-nav__link--PaddingInlineStart: var(--pf-t--global--spacer--md);
|
|
13098
13098
|
--pf-v6-c-nav__link--PaddingInlineEnd: var(--pf-t--global--spacer--md);
|
|
13099
13099
|
--pf-v6-c-nav__list--RowGap: var(--pf-t--global--spacer--sm);
|
|
@@ -15051,7 +15051,8 @@ ul.pf-v6-c-list {
|
|
|
15051
15051
|
--pf-v6-c-pagination--m-sticky-stuck--BoxShadow: var(--pf-v6-c-pagination--m-sticky--BoxShadow);
|
|
15052
15052
|
--pf-v6-c-pagination--m-sticky-stuck--BackgroundColor: var(--pf-t--global--background--color--sticky--default);
|
|
15053
15053
|
--pf-v6-c-pagination--m-sticky--BorderRadius--glass: var(--pf-t--global--border--radius--medium);
|
|
15054
|
-
--pf-v6-c-pagination--m-bottom--BackgroundColor: var(--pf-t--global--background--color--
|
|
15054
|
+
--pf-v6-c-pagination--m-bottom--BackgroundColor: var(--pf-t--global--background--color--sticky--default);
|
|
15055
|
+
--pf-v6-c-pagination--m-bottom--BorderRadius: 0;
|
|
15055
15056
|
--pf-v6-c-pagination--m-bottom--BoxShadow: var(--pf-t--global--box-shadow--sm--top);
|
|
15056
15057
|
--pf-v6-c-pagination--m-bottom--m-sticky--BoxShadow: var(--pf-t--global--box-shadow--sm--top);
|
|
15057
15058
|
--pf-v6-c-pagination--m-bottom--InsetBlockEnd: 0;
|
|
@@ -15065,6 +15066,8 @@ ul.pf-v6-c-list {
|
|
|
15065
15066
|
--pf-v6-c-pagination--m-bottom--m-static--PaddingBlockEnd: 0;
|
|
15066
15067
|
--pf-v6-c-pagination--m-bottom--m-static--PaddingInlineStart: var(--pf-t--global--spacer--sm);
|
|
15067
15068
|
--pf-v6-c-pagination--m-bottom--m-static--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
|
|
15069
|
+
--pf-v6-c-pagination--m-bottom--m-static--BorderRadius: 0;
|
|
15070
|
+
--pf-v6-c-pagination--m-bottom--m-static--BackgroundColor: transparent;
|
|
15068
15071
|
--pf-v6-c-pagination--m-bottom--m-sticky-base--InsetBlockEnd: 0;
|
|
15069
15072
|
}
|
|
15070
15073
|
:where(:root.pf-v6-theme-glass) .pf-v6-c-pagination {
|
|
@@ -15072,6 +15075,9 @@ ul.pf-v6-c-list {
|
|
|
15072
15075
|
--pf-v6-c-pagination--m-sticky-stuck--BoxShadow: var(--pf-t--global--box-shadow--sm);
|
|
15073
15076
|
--pf-v6-c-pagination--m-sticky--BorderRadius: var(--pf-v6-c-pagination--m-sticky--BorderRadius--glass);
|
|
15074
15077
|
--pf-v6-c-pagination--m-sticky--BoxShadow: var(--pf-t--global--box-shadow--sm);
|
|
15078
|
+
--pf-v6-c-pagination--m-bottom--BoxShadow: var(--pf-t--global--box-shadow--sm);
|
|
15079
|
+
--pf-v6-c-pagination--m-bottom--m-sticky--BoxShadow: var(--pf-t--global--box-shadow--sm);
|
|
15080
|
+
--pf-v6-c-pagination--m-bottom--BorderRadius: var(--pf-v6-c-pagination--m-sticky--BorderRadius--glass);
|
|
15075
15081
|
}
|
|
15076
15082
|
.pf-v6-c-pagination {
|
|
15077
15083
|
--pf-v6-c-pagination__page-menu--Display--base: block;
|
|
@@ -15083,6 +15089,7 @@ ul.pf-v6-c-list {
|
|
|
15083
15089
|
}
|
|
15084
15090
|
@media screen and (min-width: 48rem) {
|
|
15085
15091
|
.pf-v6-c-pagination {
|
|
15092
|
+
--pf-v6-c-pagination--m-bottom--BackgroundColor: transparent;
|
|
15086
15093
|
--pf-v6-c-pagination--m-bottom--BoxShadow: none;
|
|
15087
15094
|
--pf-v6-c-pagination--m-bottom--BorderBlockStartWidth: 0;
|
|
15088
15095
|
--pf-v6-c-pagination__page-menu--Display: var(--pf-v6-c-pagination__page-menu--md--Display);
|
|
@@ -15108,9 +15115,6 @@ ul.pf-v6-c-list {
|
|
|
15108
15115
|
border-block-start-width: var(--pf-v6-c-pagination--BorderBlockStartWidth);
|
|
15109
15116
|
border-block-end-width: var(--pf-v6-c-pagination--BorderBlockEndWidth);
|
|
15110
15117
|
}
|
|
15111
|
-
:where(:root:not(.pf-v6-theme-glass)) .pf-v6-c-pagination.pf-m-plain, :where(:root.pf-v6-theme-glass) .pf-v6-c-pagination:not(.pf-m-no-plain-on-glass) {
|
|
15112
|
-
--pf-v6-c-pagination--m-bottom--BackgroundColor: transparent;
|
|
15113
|
-
}
|
|
15114
15118
|
.pf-v6-c-pagination .pf-v6-c-pagination__page-menu {
|
|
15115
15119
|
display: var(--pf-v6-c-pagination__page-menu--Display);
|
|
15116
15120
|
}
|
|
@@ -15126,11 +15130,9 @@ ul.pf-v6-c-list {
|
|
|
15126
15130
|
padding-inline-start: var(--pf-v6-c-pagination--m-bottom--m-sticky--PaddingInlineStart);
|
|
15127
15131
|
padding-inline-end: var(--pf-v6-c-pagination--m-bottom--m-sticky--PaddingInlineEnd);
|
|
15128
15132
|
background-color: var(--pf-v6-c-pagination--m-bottom--BackgroundColor);
|
|
15133
|
+
border-radius: var(--pf-v6-c-pagination--m-bottom--BorderRadius);
|
|
15129
15134
|
box-shadow: var(--pf-v6-c-pagination--m-bottom--BoxShadow);
|
|
15130
15135
|
}
|
|
15131
|
-
:where(:root.pf-v6-theme-glass) .pf-v6-c-pagination.pf-m-bottom.pf-m-sticky-base:not(.pf-m-sticky-stuck) {
|
|
15132
|
-
--pf-v6-c-pagination--m-bottom--BackgroundColor: transparent;
|
|
15133
|
-
}
|
|
15134
15136
|
.pf-v6-c-pagination.pf-m-bottom .pf-v6-c-pagination__nav-control.pf-m-first,
|
|
15135
15137
|
.pf-v6-c-pagination.pf-m-bottom .pf-v6-c-pagination__nav-control.pf-m-last,
|
|
15136
15138
|
.pf-v6-c-pagination.pf-m-bottom .pf-v6-c-pagination__nav-page-select {
|
|
@@ -15149,6 +15151,7 @@ ul.pf-v6-c-list {
|
|
|
15149
15151
|
.pf-v6-c-pagination.pf-m-bottom {
|
|
15150
15152
|
--pf-v6-c-pagination--m-bottom--MarginBlockStart: 0;
|
|
15151
15153
|
--pf-v6-c-pagination--m-bottom--InsetBlockEnd: auto;
|
|
15154
|
+
--pf-v6-c-pagination--m-bottom--BorderRadius: var(--pf-v6-c-pagination--m-bottom--m-static--BorderRadius);
|
|
15152
15155
|
position: relative;
|
|
15153
15156
|
justify-content: flex-end;
|
|
15154
15157
|
padding-block-start: var(--pf-v6-c-pagination--m-bottom--m-static--PaddingBlockStart);
|
|
@@ -15173,12 +15176,14 @@ ul.pf-v6-c-list {
|
|
|
15173
15176
|
}
|
|
15174
15177
|
}
|
|
15175
15178
|
.pf-v6-c-pagination.pf-m-static {
|
|
15179
|
+
--pf-v6-c-pagination--m-bottom--BackgroundColor: var(--pf-v6-c-pagination--m-bottom--m-static--BackgroundColor);
|
|
15176
15180
|
position: relative;
|
|
15177
15181
|
padding-block-start: var(--pf-v6-c-pagination--m-bottom--m-static--PaddingBlockStart);
|
|
15178
15182
|
padding-block-end: var(--pf-v6-c-pagination--m-bottom--m-static--PaddingBlockEnd);
|
|
15179
15183
|
padding-inline-start: var(--pf-v6-c-pagination--m-bottom--m-static--PaddingInlineStart);
|
|
15180
15184
|
padding-inline-end: var(--pf-v6-c-pagination--m-bottom--m-static--PaddingInlineEnd);
|
|
15181
15185
|
border: 0;
|
|
15186
|
+
border-radius: var(--pf-v6-c-pagination--m-bottom--m-static--BorderRadius);
|
|
15182
15187
|
box-shadow: none;
|
|
15183
15188
|
}
|
|
15184
15189
|
.pf-v6-c-pagination.pf-m-sticky {
|
|
@@ -15631,7 +15636,7 @@ ul.pf-v6-c-list {
|
|
|
15631
15636
|
--pf-v6-c-popover__arrow--m-inline-bottom--InsetBlockEnd: var(--pf-t--global--border--radius--medium);
|
|
15632
15637
|
--pf-v6-c-popover__arrow--m-block-left--InsetInlineStart: var(--pf-t--global--border--radius--medium);
|
|
15633
15638
|
--pf-v6-c-popover__arrow--m-block-right--InsetInlineEnd: var(--pf-t--global--border--radius--medium);
|
|
15634
|
-
--pf-v6-c-popover__close--InsetBlockStart: calc(var(--pf-v6-c-popover__content--PaddingBlockStart) - var(--pf-t--global--spacer--control--vertical--
|
|
15639
|
+
--pf-v6-c-popover__close--InsetBlockStart: calc(var(--pf-v6-c-popover__content--PaddingBlockStart) - var(--pf-t--global--spacer--control--vertical--plain));
|
|
15635
15640
|
--pf-v6-c-popover__close--InsetInlineEnd: var(--pf-v6-c-popover__content--PaddingInlineEnd);
|
|
15636
15641
|
--pf-v6-c-popover__close--sibling--PaddingInlineEnd: var(--pf-t--global--spacer--2xl);
|
|
15637
15642
|
--pf-v6-c-popover__header--MarginBlockEnd: var(--pf-t--global--spacer--sm);
|
|
@@ -19528,8 +19533,8 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
|
|
|
19528
19533
|
--pf-v6-c-table__toggle--c-button__toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
|
|
19529
19534
|
--pf-v6-c-table__toggle--c-button__toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
|
|
19530
19535
|
--pf-v6-c-table__toggle--c-button--m-expanded__toggle-icon--Rotate: -180deg;
|
|
19531
|
-
--pf-v6-c-table__button--PaddingBlockStart: var(--pf-t--global--spacer--
|
|
19532
|
-
--pf-v6-c-table__button--PaddingBlockEnd: var(--pf-t--global--spacer--
|
|
19536
|
+
--pf-v6-c-table__button--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--plain);
|
|
19537
|
+
--pf-v6-c-table__button--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--plain);
|
|
19533
19538
|
--pf-v6-c-table__button--PaddingInlineStart: var(--pf-t--global--spacer--md);
|
|
19534
19539
|
--pf-v6-c-table__button--PaddingInlineEnd: var(--pf-t--global--spacer--md);
|
|
19535
19540
|
--pf-v6-c-table__button--Color: var(--pf-t--global--text--color--regular);
|
|
@@ -25300,12 +25305,12 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
|
|
|
25300
25305
|
}
|
|
25301
25306
|
|
|
25302
25307
|
.pf-v6-c-tree-view {
|
|
25303
|
-
--pf-v6-c-tree-view__node--indent--base: calc(var(--pf-
|
|
25308
|
+
--pf-v6-c-tree-view__node--indent--base: calc(var(--pf-v6-c-tree-view__node-toggle--PaddingInlineStart) + var(--pf-v6-c-tree-view__node-toggle--PaddingInlineEnd) + var(--pf-v6-c-tree-view__node-toggle-icon--MinWidth));
|
|
25304
25309
|
--pf-v6-c-tree-view__node--nested-indent--base: calc(var(--pf-v6-c-tree-view__node--indent--base) - var(--pf-t--global--spacer--md));
|
|
25305
25310
|
--pf-v6-c-tree-view__content--BorderRadius: var(--pf-t--global--border--radius--small);
|
|
25306
|
-
--pf-v6-c-tree-view__node--PaddingBlockStart: var(--pf-t--global--spacer--
|
|
25307
|
-
--pf-v6-c-tree-view__node--PaddingInlineEnd: var(--pf-t--global--spacer--
|
|
25308
|
-
--pf-v6-c-tree-view__node--PaddingBlockEnd: var(--pf-t--global--spacer--
|
|
25311
|
+
--pf-v6-c-tree-view__node--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--plain);
|
|
25312
|
+
--pf-v6-c-tree-view__node--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--default);
|
|
25313
|
+
--pf-v6-c-tree-view__node--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--plain);
|
|
25309
25314
|
--pf-v6-c-tree-view__node--PaddingInlineStart: var(--pf-v6-c-tree-view__node--indent--base);
|
|
25310
25315
|
--pf-v6-c-tree-view__node--Color: var(--pf-t--global--text--color--subtle);
|
|
25311
25316
|
--pf-v6-c-tree-view__node--BackgroundColor: transparent;
|
|
@@ -25349,9 +25354,9 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
|
|
|
25349
25354
|
--pf-v6-c-tree-view__node-toggle--BackgroundColor: transparent;
|
|
25350
25355
|
--pf-v6-c-tree-view__list-item--m-expanded__node-toggle--Color: var(--pf-t--global--icon--color--regular);
|
|
25351
25356
|
--pf-v6-c-tree-view__node-toggle-icon--MinWidth: var(--pf-t--global--icon--size--font--body--default);
|
|
25352
|
-
--pf-v6-c-tree-view__node-toggle--PaddingBlockStart: var(--pf-t--global--spacer--
|
|
25357
|
+
--pf-v6-c-tree-view__node-toggle--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--plain);
|
|
25353
25358
|
--pf-v6-c-tree-view__node-toggle--PaddingInlineEnd: var(--pf-t--global--spacer--md);
|
|
25354
|
-
--pf-v6-c-tree-view__node-toggle--PaddingBlockEnd: var(--pf-t--global--spacer--
|
|
25359
|
+
--pf-v6-c-tree-view__node-toggle--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--plain);
|
|
25355
25360
|
--pf-v6-c-tree-view__node-toggle--PaddingInlineStart: var(--pf-t--global--spacer--md);
|
|
25356
25361
|
--pf-v6-c-tree-view__node-toggle--MarginBlockStart: calc(var(--pf-v6-c-tree-view__node-toggle--PaddingBlockStart) * -1);
|
|
25357
25362
|
--pf-v6-c-tree-view__node-toggle--MarginBlockEnd: calc(var(--pf-v6-c-tree-view__node-toggle--PaddingBlockStart) * -1);
|
|
@@ -635,166 +635,6 @@ cssPrefix: pf-v6-c-pagination
|
|
|
635
635
|
|
|
636
636
|
```
|
|
637
637
|
|
|
638
|
-
### Bottom plain
|
|
639
|
-
|
|
640
|
-
```html
|
|
641
|
-
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut. Morbi viverra, eros vel porttitor facilisis, eros purus aliquet erat, nec lobortis felis elit pulvinar sem. Vivamus vulputate, risus eget commodo eleifend, eros nibh porta quam, vitae lacinia leo libero at magna. Maecenas aliquam sagittis orci, et posuere nisi ultrices sit amet. Aliquam ex odio, malesuada sed posuere quis, pellentesque at mauris. Phasellus venenatis massa ex, eget pulvinar libero auctor pretium. Aliquam erat volutpat. Duis euismod justo in quam ullamcorper, in commodo massa vulputate.</div>
|
|
642
|
-
<br />
|
|
643
|
-
<br />
|
|
644
|
-
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut. Morbi viverra, eros vel porttitor facilisis, eros purus aliquet erat, nec lobortis felis elit pulvinar sem. Vivamus vulputate, risus eget commodo eleifend, eros nibh porta quam, vitae lacinia leo libero at magna. Maecenas aliquam sagittis orci, et posuere nisi ultrices sit amet. Aliquam ex odio, malesuada sed posuere quis, pellentesque at mauris. Phasellus venenatis massa ex, eget pulvinar libero auctor pretium. Aliquam erat volutpat. Duis euismod justo in quam ullamcorper, in commodo massa vulputate.</div>
|
|
645
|
-
<br />
|
|
646
|
-
<br />
|
|
647
|
-
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut. Morbi viverra, eros vel porttitor facilisis, eros purus aliquet erat, nec lobortis felis elit pulvinar sem. Vivamus vulputate, risus eget commodo eleifend, eros nibh porta quam, vitae lacinia leo libero at magna. Maecenas aliquam sagittis orci, et posuere nisi ultrices sit amet. Aliquam ex odio, malesuada sed posuere quis, pellentesque at mauris. Phasellus venenatis massa ex, eget pulvinar libero auctor pretium. Aliquam erat volutpat. Duis euismod justo in quam ullamcorper, in commodo massa vulputate.</div>
|
|
648
|
-
<br />
|
|
649
|
-
<br />
|
|
650
|
-
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut. Morbi viverra, eros vel porttitor facilisis, eros purus aliquet erat, nec lobortis felis elit pulvinar sem. Vivamus vulputate, risus eget commodo eleifend, eros nibh porta quam, vitae lacinia leo libero at magna. Maecenas aliquam sagittis orci, et posuere nisi ultrices sit amet. Aliquam ex odio, malesuada sed posuere quis, pellentesque at mauris. Phasellus venenatis massa ex, eget pulvinar libero auctor pretium. Aliquam erat volutpat. Duis euismod justo in quam ullamcorper, in commodo massa vulputate.</div>
|
|
651
|
-
<div class="pf-v6-c-pagination pf-m-plain pf-m-bottom">
|
|
652
|
-
<div class="pf-v6-c-pagination__page-menu">
|
|
653
|
-
<button
|
|
654
|
-
class="pf-v6-c-menu-toggle pf-m-top pf-m-text pf-m-plain"
|
|
655
|
-
type="button"
|
|
656
|
-
aria-expanded="false"
|
|
657
|
-
id="pagination-plain-bottom-menu-toggle"
|
|
658
|
-
>
|
|
659
|
-
<span class="pf-v6-c-menu-toggle__text">
|
|
660
|
-
<b>1 - 10</b> of
|
|
661
|
-
<b>36</b>
|
|
662
|
-
</span>
|
|
663
|
-
<span class="pf-v6-c-menu-toggle__controls">
|
|
664
|
-
<span class="pf-v6-c-menu-toggle__toggle-icon">
|
|
665
|
-
<svg
|
|
666
|
-
class="pf-v6-svg"
|
|
667
|
-
fill="currentColor"
|
|
668
|
-
viewBox="0 0 20 20"
|
|
669
|
-
aria-hidden="true"
|
|
670
|
-
role="img"
|
|
671
|
-
width="1em"
|
|
672
|
-
height="1em"
|
|
673
|
-
>
|
|
674
|
-
<path
|
|
675
|
-
d="m17.65 8.76-6.674 5.72a1.496 1.496 0 0 1-.976.365c-.347 0-.694-.122-.978-.366l-6.673-5.72A1 1 0 0 1 3 7h14a1 1 0 0 1 .65 1.76Z"
|
|
676
|
-
/>
|
|
677
|
-
</svg>
|
|
678
|
-
</span>
|
|
679
|
-
</span>
|
|
680
|
-
</button>
|
|
681
|
-
</div>
|
|
682
|
-
<nav
|
|
683
|
-
class="pf-v6-c-pagination__nav"
|
|
684
|
-
aria-label="Pagination nav - plain bottom example"
|
|
685
|
-
>
|
|
686
|
-
<div class="pf-v6-c-pagination__nav-control pf-m-first">
|
|
687
|
-
<button
|
|
688
|
-
class="pf-v6-c-button pf-m-plain"
|
|
689
|
-
type="button"
|
|
690
|
-
disabled
|
|
691
|
-
aria-label="Go to first page"
|
|
692
|
-
>
|
|
693
|
-
<span class="pf-v6-c-button__icon">
|
|
694
|
-
<svg
|
|
695
|
-
class="pf-v6-svg"
|
|
696
|
-
fill="currentColor"
|
|
697
|
-
viewBox="0 0 20 20"
|
|
698
|
-
aria-hidden="true"
|
|
699
|
-
role="img"
|
|
700
|
-
width="1em"
|
|
701
|
-
height="1em"
|
|
702
|
-
>
|
|
703
|
-
<path
|
|
704
|
-
d="M10 19a.997.997 0 0 1-.707-.293l-7.647-7.646c-.283-.284-.439-.66-.439-1.061s.156-.777.44-1.06l7.646-7.647a1 1 0 1 1 1.414 1.414L3.414 10l7.293 7.293A1 1 0 0 1 10 19Zm8.707-.293a1 1 0 0 0 0-1.414L11.414 10l7.293-7.293a1 1 0 1 0-1.414-1.414L9.646 8.939c-.283.284-.439.66-.439 1.061s.156.777.44 1.06l7.646 7.647a.997.997 0 0 0 1.414 0Z"
|
|
705
|
-
/>
|
|
706
|
-
</svg>
|
|
707
|
-
</span>
|
|
708
|
-
</button>
|
|
709
|
-
</div>
|
|
710
|
-
<div class="pf-v6-c-pagination__nav-control pf-m-prev">
|
|
711
|
-
<button
|
|
712
|
-
class="pf-v6-c-button pf-m-plain"
|
|
713
|
-
type="button"
|
|
714
|
-
disabled
|
|
715
|
-
aria-label="Go to previous page"
|
|
716
|
-
>
|
|
717
|
-
<span class="pf-v6-c-button__icon">
|
|
718
|
-
<svg
|
|
719
|
-
class="pf-v6-svg"
|
|
720
|
-
fill="currentColor"
|
|
721
|
-
viewBox="0 0 20 20"
|
|
722
|
-
aria-hidden="true"
|
|
723
|
-
role="img"
|
|
724
|
-
width="1em"
|
|
725
|
-
height="1em"
|
|
726
|
-
>
|
|
727
|
-
<path
|
|
728
|
-
d="m6.41 10 7.29-7.29.02-.02c.38-.4.37-1.03-.02-1.41-.4-.38-1.03-.37-1.41.02L4.64 8.95a1.49 1.49 0 0 0 0 2.12l7.65 7.65c.19.19.44.29.71.29.27 0 .52-.11.71-.29a.996.996 0 0 0 0-1.41l-7.29-7.29Z"
|
|
729
|
-
/>
|
|
730
|
-
</svg>
|
|
731
|
-
</span>
|
|
732
|
-
</button>
|
|
733
|
-
</div>
|
|
734
|
-
<div class="pf-v6-c-pagination__nav-page-select">
|
|
735
|
-
<span class="pf-v6-c-form-control">
|
|
736
|
-
<input
|
|
737
|
-
aria-label="Current page"
|
|
738
|
-
type="number"
|
|
739
|
-
min="1"
|
|
740
|
-
max="4"
|
|
741
|
-
value="1"
|
|
742
|
-
/>
|
|
743
|
-
</span>
|
|
744
|
-
<span aria-hidden="true">of 4</span>
|
|
745
|
-
</div>
|
|
746
|
-
<div class="pf-v6-c-pagination__nav-control pf-m-next">
|
|
747
|
-
<button
|
|
748
|
-
class="pf-v6-c-button pf-m-plain"
|
|
749
|
-
type="button"
|
|
750
|
-
aria-label="Go to next page"
|
|
751
|
-
>
|
|
752
|
-
<span class="pf-v6-c-button__icon">
|
|
753
|
-
<svg
|
|
754
|
-
class="pf-v6-svg"
|
|
755
|
-
fill="currentColor"
|
|
756
|
-
viewBox="0 0 20 20"
|
|
757
|
-
aria-hidden="true"
|
|
758
|
-
role="img"
|
|
759
|
-
width="1em"
|
|
760
|
-
height="1em"
|
|
761
|
-
>
|
|
762
|
-
<path
|
|
763
|
-
d="M14.35 8.94 6.71 1.29l-.02-.02c-.4-.38-1.03-.37-1.41.02-.38.4-.37 1.03.02 1.41l7.29 7.29-7.29 7.29a1.003 1.003 0 0 0 1.42 1.42l7.65-7.65c.59-.59.59-1.54 0-2.12Z"
|
|
764
|
-
/>
|
|
765
|
-
</svg>
|
|
766
|
-
</span>
|
|
767
|
-
</button>
|
|
768
|
-
</div>
|
|
769
|
-
<div class="pf-v6-c-pagination__nav-control pf-m-last">
|
|
770
|
-
<button
|
|
771
|
-
class="pf-v6-c-button pf-m-plain"
|
|
772
|
-
type="button"
|
|
773
|
-
disabled
|
|
774
|
-
aria-label="Go to last page"
|
|
775
|
-
>
|
|
776
|
-
<span class="pf-v6-c-button__icon">
|
|
777
|
-
<svg
|
|
778
|
-
class="pf-v6-svg"
|
|
779
|
-
fill="currentColor"
|
|
780
|
-
viewBox="0 0 20 20"
|
|
781
|
-
aria-hidden="true"
|
|
782
|
-
role="img"
|
|
783
|
-
width="1em"
|
|
784
|
-
height="1em"
|
|
785
|
-
>
|
|
786
|
-
<path
|
|
787
|
-
d="M10 19a1 1 0 0 1-.707-1.707L16.586 10 9.293 2.707a1 1 0 1 1 1.414-1.414l7.647 7.646c.283.284.439.66.439 1.061s-.156.777-.44 1.06l-7.646 7.647A.997.997 0 0 1 10 19Zm-7.293-.293 7.647-7.646c.283-.284.439-.66.439-1.061s-.156-.777-.44-1.06L2.708 1.292a1 1 0 1 0-1.414 1.414L8.586 10l-7.293 7.293a1 1 0 1 0 1.414 1.414Z"
|
|
788
|
-
/>
|
|
789
|
-
</svg>
|
|
790
|
-
</span>
|
|
791
|
-
</button>
|
|
792
|
-
</div>
|
|
793
|
-
</nav>
|
|
794
|
-
</div>
|
|
795
|
-
|
|
796
|
-
```
|
|
797
|
-
|
|
798
638
|
### Bottom sticky
|
|
799
639
|
|
|
800
640
|
```html
|
|
@@ -2439,8 +2279,6 @@ This example shows the use of `.pf-m-sticky-base` and `.pf-m-sticky-stuck` on bo
|
|
|
2439
2279
|
| `.pf-m-sticky` | `.pf-v6-c-pagination` | Modifies the pagination to be sticky to its container. It will be sticky to the top of the container by default, and sticky to the bottom of the container when applied to `.pf-v6-c-pagination.pf-m-bottom`. |
|
|
2440
2280
|
| `.pf-m-sticky-base` | `.pf-v6-c-pagination` | Makes the pagination sticky on scroll, but does not apply sticky styling. `.pf-m-sticky-stuck` must be used to apply sticky styling. |
|
|
2441
2281
|
| `.pf-m-sticky-stuck` | `.pf-v6-c-pagination.pf-m-sticky-base` | Applies sticky styling to a pagination with `.pf-m-sticky-base`. |
|
|
2442
|
-
| `.pf-m-plain` | `.pf-v6-c-pagination.pf-m-bottom` | Modifies the pagination to have a transparent background. Only applies outside of glass theme. |
|
|
2443
|
-
| `.pf-m-no-plain-on-glass` | `.pf-v6-c-pagination.pf-m-bottom` | Prevents the pagination from being transparent on glass theme. |
|
|
2444
2282
|
| `.pf-m-inset-{none, sm, md, lg, xl, 2xl}{-on-[breakpoint]}` | `.pf-v6-c-pagination` | Modifies pagination horizontal padding at optional [breakpoint](/foundations-and-styles/design-tokens/all-design-tokens). |
|
|
2445
2283
|
| `.pf-m-page-insets` | `.pf-v6-c-pagination` | Modifies the pagination component padding/inset to visually match padding of page elements. |
|
|
2446
2284
|
| `.pf-m-first` | `.pf-v6-c-pagination__nav-control` | Indicates the control is for the first page button. |
|