@patternfly/patternfly 6.6.0-prerelease.22 → 6.6.0-prerelease.24

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.
Files changed (12) hide show
  1. package/components/ModalBox/modal-box.css +2 -2
  2. package/components/ModalBox/modal-box.scss +3 -3
  3. package/components/Pagination/pagination.css +12 -7
  4. package/components/Pagination/pagination.scss +15 -12
  5. package/components/_index.css +14 -9
  6. package/docs/components/Pagination/examples/Pagination.md +0 -162
  7. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +2557 -5003
  8. package/package.json +2 -2
  9. package/patternfly-no-globals.css +14 -9
  10. package/patternfly.css +14 -9
  11. package/patternfly.min.css +1 -1
  12. package/patternfly.min.css.map +1 -1
package/components/ModalBox/modal-box.css CHANGED
@@ -56,8 +56,8 @@
56
56
  --pf-v6-c-modal-box__footer--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
57
57
  --pf-v6-c-modal-box__footer--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
58
58
  --pf-v6-c-modal-box__footer--PaddingInlineStart: var(--pf-t--global--spacer--lg);
59
- --pf-v6-c-modal-box__footer--c-button--MarginInlineEnd: var(--pf-t--global--spacer--md);
60
- --pf-v6-c-modal-box__footer--c-button--sm--MarginInlineEnd: calc(var(--pf-v6-c-modal-box__footer--c-button--MarginInlineEnd) / 2);
59
+ --pf-v6-c-modal-box__footer--c-button--MarginInlineEnd: var(--pf-t--global--spacer--gap--action-to-action--default);
60
+ --pf-v6-c-modal-box__footer--c-button--sm--MarginInlineEnd: var(--pf-t--global--spacer--gap--action-to-action--default);
61
61
  }
62
62
 
63
63
  .pf-v6-c-modal-box {
package/components/ModalBox/modal-box.scss CHANGED
@@ -75,8 +75,8 @@
75
75
  --#{$modal-box}__footer--PaddingInlineStart: var(--pf-t--global--spacer--lg);
76
76
 
77
77
  // Footer buttons
78
- --#{$modal-box}__footer--c-button--MarginInlineEnd: var(--pf-t--global--spacer--md); // Button spacer is used to manipulate margin-inline-start and/or margin-right values at various breakpoints, with a single value.
79
- --#{$modal-box}__footer--c-button--sm--MarginInlineEnd: calc(var(--#{$modal-box}__footer--c-button--MarginInlineEnd) / 2);
78
+ --#{$modal-box}__footer--c-button--MarginInlineEnd: var(--pf-t--global--spacer--gap--action-to-action--default);
79
+ --#{$modal-box}__footer--c-button--sm--MarginInlineEnd: var(--pf-t--global--spacer--gap--action-to-action--default);
80
80
  }
81
81
 
82
82
  .#{$modal-box} {
@@ -249,7 +249,7 @@
249
249
  margin-inline-end: var(--#{$modal-box}__footer--c-button--MarginInlineEnd);
250
250
 
251
251
  @media screen and (min-width: $pf-v6-global--breakpoint--sm) {
252
- --#{$modal-box}__footer--c-button--MarginInlineEnd: var(--#{$modal-box}__footer--c-button--sm--MarginInlineEnd);
252
+ --#{$modal-box}__footer--c-button--MarginInlineEnd: var(--#{$modal-box}__footer--c-button--sm--MarginInlineEnd); // remove in breaking change
253
253
  }
254
254
  }
255
255
  }
package/components/Pagination/pagination.css CHANGED
@@ -33,7 +33,8 @@
33
33
  --pf-v6-c-pagination--m-sticky-stuck--BoxShadow: var(--pf-v6-c-pagination--m-sticky--BoxShadow);
34
34
  --pf-v6-c-pagination--m-sticky-stuck--BackgroundColor: var(--pf-t--global--background--color--sticky--default);
35
35
  --pf-v6-c-pagination--m-sticky--BorderRadius--glass: var(--pf-t--global--border--radius--medium);
36
- --pf-v6-c-pagination--m-bottom--BackgroundColor: var(--pf-t--global--background--color--primary--default);
36
+ --pf-v6-c-pagination--m-bottom--BackgroundColor: var(--pf-t--global--background--color--sticky--default);
37
+ --pf-v6-c-pagination--m-bottom--BorderRadius: 0;
37
38
  --pf-v6-c-pagination--m-bottom--BoxShadow: var(--pf-t--global--box-shadow--sm--top);
38
39
  --pf-v6-c-pagination--m-bottom--m-sticky--BoxShadow: var(--pf-t--global--box-shadow--sm--top);
39
40
  --pf-v6-c-pagination--m-bottom--InsetBlockEnd: 0;
@@ -47,6 +48,8 @@
47
48
  --pf-v6-c-pagination--m-bottom--m-static--PaddingBlockEnd: 0;
48
49
  --pf-v6-c-pagination--m-bottom--m-static--PaddingInlineStart: var(--pf-t--global--spacer--sm);
49
50
  --pf-v6-c-pagination--m-bottom--m-static--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
51
+ --pf-v6-c-pagination--m-bottom--m-static--BorderRadius: 0;
52
+ --pf-v6-c-pagination--m-bottom--m-static--BackgroundColor: transparent;
50
53
  --pf-v6-c-pagination--m-bottom--m-sticky-base--InsetBlockEnd: 0;
51
54
  }
52
55
  :where(:root.pf-v6-theme-glass) .pf-v6-c-pagination {
@@ -54,6 +57,9 @@
54
57
  --pf-v6-c-pagination--m-sticky-stuck--BoxShadow: var(--pf-t--global--box-shadow--sm);
55
58
  --pf-v6-c-pagination--m-sticky--BorderRadius: var(--pf-v6-c-pagination--m-sticky--BorderRadius--glass);
56
59
  --pf-v6-c-pagination--m-sticky--BoxShadow: var(--pf-t--global--box-shadow--sm);
60
+ --pf-v6-c-pagination--m-bottom--BoxShadow: var(--pf-t--global--box-shadow--sm);
61
+ --pf-v6-c-pagination--m-bottom--m-sticky--BoxShadow: var(--pf-t--global--box-shadow--sm);
62
+ --pf-v6-c-pagination--m-bottom--BorderRadius: var(--pf-v6-c-pagination--m-sticky--BorderRadius--glass);
57
63
  }
58
64
  .pf-v6-c-pagination {
59
65
  --pf-v6-c-pagination__page-menu--Display--base: block;
@@ -65,6 +71,7 @@
65
71
  }
66
72
  @media screen and (min-width: 48rem) {
67
73
  .pf-v6-c-pagination {
74
+ --pf-v6-c-pagination--m-bottom--BackgroundColor: transparent;
68
75
  --pf-v6-c-pagination--m-bottom--BoxShadow: none;
69
76
  --pf-v6-c-pagination--m-bottom--BorderBlockStartWidth: 0;
70
77
  --pf-v6-c-pagination__page-menu--Display: var(--pf-v6-c-pagination__page-menu--md--Display);
@@ -90,9 +97,6 @@
90
97
  border-block-start-width: var(--pf-v6-c-pagination--BorderBlockStartWidth);
91
98
  border-block-end-width: var(--pf-v6-c-pagination--BorderBlockEndWidth);
92
99
  }
93
- :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) {
94
- --pf-v6-c-pagination--m-bottom--BackgroundColor: transparent;
95
- }
96
100
  .pf-v6-c-pagination .pf-v6-c-pagination__page-menu {
97
101
  display: var(--pf-v6-c-pagination__page-menu--Display);
98
102
  }
@@ -108,11 +112,9 @@
108
112
  padding-inline-start: var(--pf-v6-c-pagination--m-bottom--m-sticky--PaddingInlineStart);
109
113
  padding-inline-end: var(--pf-v6-c-pagination--m-bottom--m-sticky--PaddingInlineEnd);
110
114
  background-color: var(--pf-v6-c-pagination--m-bottom--BackgroundColor);
115
+ border-radius: var(--pf-v6-c-pagination--m-bottom--BorderRadius);
111
116
  box-shadow: var(--pf-v6-c-pagination--m-bottom--BoxShadow);
112
117
  }
113
- :where(:root.pf-v6-theme-glass) .pf-v6-c-pagination.pf-m-bottom.pf-m-sticky-base:not(.pf-m-sticky-stuck) {
114
- --pf-v6-c-pagination--m-bottom--BackgroundColor: transparent;
115
- }
116
118
  .pf-v6-c-pagination.pf-m-bottom .pf-v6-c-pagination__nav-control.pf-m-first,
117
119
  .pf-v6-c-pagination.pf-m-bottom .pf-v6-c-pagination__nav-control.pf-m-last,
118
120
  .pf-v6-c-pagination.pf-m-bottom .pf-v6-c-pagination__nav-page-select {
@@ -131,6 +133,7 @@
131
133
  .pf-v6-c-pagination.pf-m-bottom {
132
134
  --pf-v6-c-pagination--m-bottom--MarginBlockStart: 0;
133
135
  --pf-v6-c-pagination--m-bottom--InsetBlockEnd: auto;
136
+ --pf-v6-c-pagination--m-bottom--BorderRadius: var(--pf-v6-c-pagination--m-bottom--m-static--BorderRadius);
134
137
  position: relative;
135
138
  justify-content: flex-end;
136
139
  padding-block-start: var(--pf-v6-c-pagination--m-bottom--m-static--PaddingBlockStart);
@@ -155,12 +158,14 @@
155
158
  }
156
159
  }
157
160
  .pf-v6-c-pagination.pf-m-static {
161
+ --pf-v6-c-pagination--m-bottom--BackgroundColor: var(--pf-v6-c-pagination--m-bottom--m-static--BackgroundColor);
158
162
  position: relative;
159
163
  padding-block-start: var(--pf-v6-c-pagination--m-bottom--m-static--PaddingBlockStart);
160
164
  padding-block-end: var(--pf-v6-c-pagination--m-bottom--m-static--PaddingBlockEnd);
161
165
  padding-inline-start: var(--pf-v6-c-pagination--m-bottom--m-static--PaddingInlineStart);
162
166
  padding-inline-end: var(--pf-v6-c-pagination--m-bottom--m-static--PaddingInlineEnd);
163
167
  border: 0;
168
+ border-radius: var(--pf-v6-c-pagination--m-bottom--m-static--BorderRadius);
164
169
  box-shadow: none;
165
170
  }
166
171
  .pf-v6-c-pagination.pf-m-sticky {
package/components/Pagination/pagination.scss CHANGED
@@ -50,7 +50,8 @@ $pf-v6-c-pagination--variable-map: build-spacer-map("none", "sm", "md", "lg", "x
50
50
  --#{$pagination}--m-sticky--BorderRadius--glass: var(--pf-t--global--border--radius--medium);
51
51
 
52
52
  // bottom
53
- --#{$pagination}--m-bottom--BackgroundColor: var(--pf-t--global--background--color--primary--default);
53
+ --#{$pagination}--m-bottom--BackgroundColor: var(--pf-t--global--background--color--sticky--default);
54
+ --#{$pagination}--m-bottom--BorderRadius: 0;
54
55
  --#{$pagination}--m-bottom--BoxShadow: var(--pf-t--global--box-shadow--sm--top);
55
56
  --#{$pagination}--m-bottom--m-sticky--BoxShadow: var(--pf-t--global--box-shadow--sm--top);
56
57
  --#{$pagination}--m-bottom--InsetBlockEnd: 0;
@@ -64,6 +65,8 @@ $pf-v6-c-pagination--variable-map: build-spacer-map("none", "sm", "md", "lg", "x
64
65
  --#{$pagination}--m-bottom--m-static--PaddingBlockEnd: 0;
65
66
  --#{$pagination}--m-bottom--m-static--PaddingInlineStart: var(--pf-t--global--spacer--sm);
66
67
  --#{$pagination}--m-bottom--m-static--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
68
+ --#{$pagination}--m-bottom--m-static--BorderRadius: 0;
69
+ --#{$pagination}--m-bottom--m-static--BackgroundColor: transparent;
67
70
  --#{$pagination}--m-bottom--m-sticky-base--InsetBlockEnd: 0;
68
71
 
69
72
  :where(:root.pf-v6-theme-glass) & {
@@ -71,6 +74,9 @@ $pf-v6-c-pagination--variable-map: build-spacer-map("none", "sm", "md", "lg", "x
71
74
  --#{$pagination}--m-sticky-stuck--BoxShadow: var(--pf-t--global--box-shadow--sm);
72
75
  --#{$pagination}--m-sticky--BorderRadius: var(--#{$pagination}--m-sticky--BorderRadius--glass);
73
76
  --#{$pagination}--m-sticky--BoxShadow: var(--pf-t--global--box-shadow--sm);
77
+ --#{$pagination}--m-bottom--BoxShadow: var(--pf-t--global--box-shadow--sm);
78
+ --#{$pagination}--m-bottom--m-sticky--BoxShadow: var(--pf-t--global--box-shadow--sm);
79
+ --#{$pagination}--m-bottom--BorderRadius: var(--#{$pagination}--m-sticky--BorderRadius--glass);
74
80
  }
75
81
 
76
82
  // page menu
@@ -82,6 +88,7 @@ $pf-v6-c-pagination--variable-map: build-spacer-map("none", "sm", "md", "lg", "x
82
88
  --#{$pagination}__page-menu--md--Display: var(--#{$pagination}__page-menu--Display--base);
83
89
 
84
90
  @media screen and (min-width: $pf-v6-global--breakpoint--md) {
91
+ --#{$pagination}--m-bottom--BackgroundColor: transparent;
85
92
  --#{$pagination}--m-bottom--BoxShadow: none;
86
93
  --#{$pagination}--m-bottom--BorderBlockStartWidth: 0;
87
94
  --#{$pagination}__page-menu--Display: var(--#{$pagination}__page-menu--md--Display);
@@ -106,11 +113,6 @@ $pf-v6-c-pagination--variable-map: build-spacer-map("none", "sm", "md", "lg", "x
106
113
  border-block-start-width: var(--#{$pagination}--BorderBlockStartWidth);
107
114
  border-block-end-width: var(--#{$pagination}--BorderBlockEndWidth);
108
115
 
109
- :where(:root:not(.pf-v6-theme-glass)) &.pf-m-plain,
110
- :where(:root.pf-v6-theme-glass) &:not(.pf-m-no-plain-on-glass) {
111
- --#{$pagination}--m-bottom--BackgroundColor: transparent;
112
- }
113
-
114
116
  .#{$pagination}__page-menu {
115
117
  display: var(--#{$pagination}__page-menu--Display);
116
118
  }
@@ -128,12 +130,9 @@ $pf-v6-c-pagination--variable-map: build-spacer-map("none", "sm", "md", "lg", "x
128
130
  padding-inline-start: var(--#{$pagination}--m-bottom--m-sticky--PaddingInlineStart);
129
131
  padding-inline-end: var(--#{$pagination}--m-bottom--m-sticky--PaddingInlineEnd);
130
132
  background-color: var(--#{$pagination}--m-bottom--BackgroundColor);
133
+ border-radius: var(--#{$pagination}--m-bottom--BorderRadius);
131
134
  box-shadow: var(--#{$pagination}--m-bottom--BoxShadow);
132
135
 
133
- :where(:root.pf-v6-theme-glass) &.pf-m-sticky-base:not(.pf-m-sticky-stuck) {
134
- --#{$pagination}--m-bottom--BackgroundColor: transparent;
135
- }
136
-
137
136
  .#{$pagination}__nav-control.pf-m-first,
138
137
  .#{$pagination}__nav-control.pf-m-last,
139
138
  .#{$pagination}__nav-page-select {
@@ -154,6 +153,7 @@ $pf-v6-c-pagination--variable-map: build-spacer-map("none", "sm", "md", "lg", "x
154
153
  @media screen and (min-width: $pf-v6-global--breakpoint--md) {
155
154
  --#{$pagination}--m-bottom--MarginBlockStart: 0;
156
155
  --#{$pagination}--m-bottom--InsetBlockEnd: auto;
156
+ --#{$pagination}--m-bottom--BorderRadius: var(--#{$pagination}--m-bottom--m-static--BorderRadius);
157
157
 
158
158
  position: relative;
159
159
  justify-content: flex-end;
@@ -161,7 +161,7 @@ $pf-v6-c-pagination--variable-map: build-spacer-map("none", "sm", "md", "lg", "x
161
161
  padding-block-end: var(--#{$pagination}--m-bottom--m-static--PaddingBlockEnd);
162
162
  padding-inline-start: var(--#{$pagination}--m-bottom--m-static--PaddingInlineStart);
163
163
  padding-inline-end: var(--#{$pagination}--m-bottom--m-static--PaddingInlineEnd);
164
-
164
+
165
165
  .#{$pagination}__nav-control.pf-m-first,
166
166
  .#{$pagination}__nav-control.pf-m-last,
167
167
  .#{$pagination}__nav-page-select {
@@ -184,15 +184,18 @@ $pf-v6-c-pagination--variable-map: build-spacer-map("none", "sm", "md", "lg", "x
184
184
  }
185
185
 
186
186
  &.pf-m-static {
187
+ --#{$pagination}--m-bottom--BackgroundColor: var(--#{$pagination}--m-bottom--m-static--BackgroundColor);
188
+
187
189
  position: relative;
188
190
  padding-block-start: var(--#{$pagination}--m-bottom--m-static--PaddingBlockStart);
189
191
  padding-block-end: var(--#{$pagination}--m-bottom--m-static--PaddingBlockEnd);
190
192
  padding-inline-start: var(--#{$pagination}--m-bottom--m-static--PaddingInlineStart);
191
193
  padding-inline-end: var(--#{$pagination}--m-bottom--m-static--PaddingInlineEnd);
192
194
  border: 0;
195
+ border-radius: var(--#{$pagination}--m-bottom--m-static--BorderRadius);
193
196
  box-shadow: none;
194
197
  }
195
-
198
+
196
199
  &.pf-m-sticky {
197
200
  --#{$pagination}--m-bottom--InsetBlockEnd: 0;
198
201
  --#{$pagination}--BorderBlockEndWidth: var(--#{$pagination}--m-sticky--BorderBlockEndWidth);
package/components/_index.css CHANGED
@@ -12729,8 +12729,8 @@ ul.pf-v6-c-list {
12729
12729
  --pf-v6-c-modal-box__footer--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
12730
12730
  --pf-v6-c-modal-box__footer--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
12731
12731
  --pf-v6-c-modal-box__footer--PaddingInlineStart: var(--pf-t--global--spacer--lg);
12732
- --pf-v6-c-modal-box__footer--c-button--MarginInlineEnd: var(--pf-t--global--spacer--md);
12733
- --pf-v6-c-modal-box__footer--c-button--sm--MarginInlineEnd: calc(var(--pf-v6-c-modal-box__footer--c-button--MarginInlineEnd) / 2);
12732
+ --pf-v6-c-modal-box__footer--c-button--MarginInlineEnd: var(--pf-t--global--spacer--gap--action-to-action--default);
12733
+ --pf-v6-c-modal-box__footer--c-button--sm--MarginInlineEnd: var(--pf-t--global--spacer--gap--action-to-action--default);
12734
12734
  }
12735
12735
 
12736
12736
  .pf-v6-c-modal-box {
@@ -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--primary--default);
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 {
package/docs/components/Pagination/examples/Pagination.md CHANGED
@@ -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>&nbsp;of&nbsp;
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. |