@patternfly/patternfly 6.3.0-prerelease.56 → 6.3.0-prerelease.58
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/CalendarMonth/calendar-month.css +16 -0
- package/components/CalendarMonth/calendar-month.scss +16 -0
- package/components/Pagination/pagination.css +14 -1
- package/components/Pagination/pagination.scss +14 -1
- package/components/_index.css +30 -1
- package/docs/components/Pagination/examples/Pagination.md +111 -0
- package/package.json +1 -1
- package/patternfly-no-globals.css +30 -1
- package/patternfly.css +30 -1
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
|
@@ -31,6 +31,9 @@
|
|
|
31
31
|
--pf-v6-c-calendar-month__dates-cell--before--InsetInlineEnd: 0;
|
|
32
32
|
--pf-v6-c-calendar-month__dates-cell--before--InsetBlockEnd: var(--pf-v6-c-calendar-month__dates-cell--PaddingBlockEnd);
|
|
33
33
|
--pf-v6-c-calendar-month__dates-cell--before--InsetInlineStart: 0;
|
|
34
|
+
--pf-v6-c-calendar-month__dates-cell--after--BorderColor: var(--pf-t--global--border--color--high-contrast);
|
|
35
|
+
--pf-v6-c-calendar-month__dates-cell--after--BorderBlockStartWidth: 0;
|
|
36
|
+
--pf-v6-c-calendar-month__dates-cell--after--BorderBlockEndWidth: 0;
|
|
34
37
|
--pf-v6-c-calendar-month__dates-cell--m-in-range--before--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
|
|
35
38
|
--pf-v6-c-calendar-month__dates-cell--m-in-range--m-start-range--before--InsetInlineStart: 50%;
|
|
36
39
|
--pf-v6-c-calendar-month__dates-cell--m-in-range--m-end-range--before--InsetInlineEnd: 50%;
|
|
@@ -38,6 +41,8 @@
|
|
|
38
41
|
--pf-v6-c-calendar-month__dates-cell--m-in-range__date--hover--BorderWidth: var(--pf-t--global--border--width--regular);
|
|
39
42
|
--pf-v6-c-calendar-month__dates-cell--m-in-range__date--hover--BorderColor: var(--pf-t--global--border--color--hover);
|
|
40
43
|
--pf-v6-c-calendar-month__dates-cell--m-in-range__date--focus--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
|
|
44
|
+
--pf-v6-c-calendar-month__dates-cell--m-in-range--after--BorderBlockStartWidth: var(--pf-t--global--border--width--high-contrast--regular);
|
|
45
|
+
--pf-v6-c-calendar-month__dates-cell--m-in-range--after--BorderBlockEndWidth: var(--pf-t--global--border--width--high-contrast--regular);
|
|
41
46
|
--pf-v6-c-calendar-month__dates-cell--m-adjacent-month__date--Color: var(--pf-t--global--text--color--subtle);
|
|
42
47
|
--pf-v6-c-calendar-month__date--Width: 4ch;
|
|
43
48
|
--pf-v6-c-calendar-month__date--Height: 4ch;
|
|
@@ -56,6 +61,8 @@
|
|
|
56
61
|
--pf-v6-c-calendar-month__date--focus--BackgroundColor: var(--pf-t--global--color--brand--default);
|
|
57
62
|
--pf-v6-c-calendar-month__date--focus--after--BorderColor: var(--pf-t--global--border--color--hover);
|
|
58
63
|
--pf-v6-c-calendar-month__date--after--focus--OutlineOffset: -2px;
|
|
64
|
+
--pf-v6-c-calendar-month__dates-cell--m-current__date--after--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
|
|
65
|
+
--pf-v6-c-calendar-month__dates-cell--m-current__date--after--BorderColor: var(--pf-t--global--border--color--high-contrast);
|
|
59
66
|
}
|
|
60
67
|
|
|
61
68
|
.pf-v6-c-calendar-month {
|
|
@@ -128,13 +135,20 @@
|
|
|
128
135
|
inset-block-end: var(--pf-v6-c-calendar-month__dates-cell--before--InsetBlockEnd);
|
|
129
136
|
inset-inline-start: var(--pf-v6-c-calendar-month__dates-cell--before--InsetInlineStart);
|
|
130
137
|
inset-inline-end: var(--pf-v6-c-calendar-month__dates-cell--before--InsetInlineEnd);
|
|
138
|
+
pointer-events: none;
|
|
131
139
|
content: "";
|
|
132
140
|
background-color: var(--pf-v6-c-calendar-month__dates-cell--before--BackgroundColor);
|
|
141
|
+
border: solid var(--pf-v6-c-calendar-month__dates-cell--after--BorderColor);
|
|
142
|
+
border-width: var(--pf-v6-c-calendar-month__dates-cell--after--BorderBlockStartWidth) 0 var(--pf-v6-c-calendar-month__dates-cell--after--BorderBlockEndWidth);
|
|
133
143
|
}
|
|
134
144
|
.pf-v6-c-calendar-month__dates-cell.pf-m-current {
|
|
135
145
|
--pf-v6-c-calendar-month__date--BackgroundColor: var(--pf-v6-c-calendar-month__dates-cell--m-current__date--BackgroundColor);
|
|
146
|
+
--pf-v6-c-calendar-month__date--after--BorderWidth: var(--pf-v6-c-calendar-month__dates-cell--m-current__date--after--BorderWidth);
|
|
147
|
+
--pf-v6-c-calendar-month__date--after--BorderColor: var(--pf-v6-c-calendar-month__dates-cell--m-current__date--after--BorderColor);
|
|
136
148
|
}
|
|
137
149
|
.pf-v6-c-calendar-month__dates-cell.pf-m-in-range {
|
|
150
|
+
--pf-v6-c-calendar-month__dates-cell--after--BorderBlockStartWidth: var(--pf-v6-c-calendar-month__dates-cell--m-in-range--after--BorderBlockStartWidth);
|
|
151
|
+
--pf-v6-c-calendar-month__dates-cell--after--BorderBlockEndWidth: var(--pf-v6-c-calendar-month__dates-cell--m-in-range--after--BorderBlockEndWidth);
|
|
138
152
|
--pf-v6-c-calendar-month__dates-cell--before--BackgroundColor: var(--pf-v6-c-calendar-month__dates-cell--m-in-range--before--BackgroundColor);
|
|
139
153
|
--pf-v6-c-calendar-month__date--hover--BackgroundColor: var(--pf-v6-c-calendar-month__dates-cell--m-in-range__date--hover--BackgroundColor);
|
|
140
154
|
--pf-v6-c-calendar-month__date--hover--BorderWidth: var(--pf-v6-c-calendar-month__dates-cell--m-in-range__date--hover--BorderWidth);
|
|
@@ -161,6 +175,8 @@
|
|
|
161
175
|
}
|
|
162
176
|
.pf-v6-c-calendar-month__dates-cell.pf-m-disabled {
|
|
163
177
|
--pf-v6-c-calendar-month__dates-cell--before--BackgroundColor: transparent;
|
|
178
|
+
--pf-v6-c-calendar-month__dates-cell--after--BorderBlockStartWidth: 0;
|
|
179
|
+
--pf-v6-c-calendar-month__dates-cell--after--BorderBlockEndWidth: 0;
|
|
164
180
|
--pf-v6-c-calendar-month__date--BackgroundColor: transparent;
|
|
165
181
|
}
|
|
166
182
|
|
|
@@ -41,6 +41,9 @@
|
|
|
41
41
|
--#{$calendar-month}__dates-cell--before--InsetInlineEnd: 0;
|
|
42
42
|
--#{$calendar-month}__dates-cell--before--InsetBlockEnd: var(--#{$calendar-month}__dates-cell--PaddingBlockEnd);
|
|
43
43
|
--#{$calendar-month}__dates-cell--before--InsetInlineStart: 0;
|
|
44
|
+
--#{$calendar-month}__dates-cell--after--BorderColor: var(--pf-t--global--border--color--high-contrast);
|
|
45
|
+
--#{$calendar-month}__dates-cell--after--BorderBlockStartWidth: 0;
|
|
46
|
+
--#{$calendar-month}__dates-cell--after--BorderBlockEndWidth: 0;
|
|
44
47
|
--#{$calendar-month}__dates-cell--m-in-range--before--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
|
|
45
48
|
--#{$calendar-month}__dates-cell--m-in-range--m-start-range--before--InsetInlineStart: 50%;
|
|
46
49
|
--#{$calendar-month}__dates-cell--m-in-range--m-end-range--before--InsetInlineEnd: 50%;
|
|
@@ -48,6 +51,8 @@
|
|
|
48
51
|
--#{$calendar-month}__dates-cell--m-in-range__date--hover--BorderWidth: var(--pf-t--global--border--width--regular);
|
|
49
52
|
--#{$calendar-month}__dates-cell--m-in-range__date--hover--BorderColor: var(--pf-t--global--border--color--hover);
|
|
50
53
|
--#{$calendar-month}__dates-cell--m-in-range__date--focus--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
|
|
54
|
+
--#{$calendar-month}__dates-cell--m-in-range--after--BorderBlockStartWidth: var(--pf-t--global--border--width--high-contrast--regular);
|
|
55
|
+
--#{$calendar-month}__dates-cell--m-in-range--after--BorderBlockEndWidth: var(--pf-t--global--border--width--high-contrast--regular);
|
|
51
56
|
--#{$calendar-month}__dates-cell--m-adjacent-month__date--Color: var(--pf-t--global--text--color--subtle);
|
|
52
57
|
|
|
53
58
|
// date button
|
|
@@ -68,6 +73,8 @@
|
|
|
68
73
|
--#{$calendar-month}__date--focus--BackgroundColor: var(--pf-t--global--color--brand--default);
|
|
69
74
|
--#{$calendar-month}__date--focus--after--BorderColor: var(--pf-t--global--border--color--hover);
|
|
70
75
|
--#{$calendar-month}__date--after--focus--OutlineOffset: -2px;
|
|
76
|
+
--#{$calendar-month}__dates-cell--m-current__date--after--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
|
|
77
|
+
--#{$calendar-month}__dates-cell--m-current__date--after--BorderColor: var(--pf-t--global--border--color--high-contrast);
|
|
71
78
|
}
|
|
72
79
|
|
|
73
80
|
.#{$calendar-month} {
|
|
@@ -142,15 +149,22 @@
|
|
|
142
149
|
inset-block-end: var(--#{$calendar-month}__dates-cell--before--InsetBlockEnd);
|
|
143
150
|
inset-inline-start: var(--#{$calendar-month}__dates-cell--before--InsetInlineStart);
|
|
144
151
|
inset-inline-end: var(--#{$calendar-month}__dates-cell--before--InsetInlineEnd);
|
|
152
|
+
pointer-events: none;
|
|
145
153
|
content: "";
|
|
146
154
|
background-color: var(--#{$calendar-month}__dates-cell--before--BackgroundColor);
|
|
155
|
+
border: solid var(--#{$calendar-month}__dates-cell--after--BorderColor);
|
|
156
|
+
border-width: var(--#{$calendar-month}__dates-cell--after--BorderBlockStartWidth) 0 var(--#{$calendar-month}__dates-cell--after--BorderBlockEndWidth);
|
|
147
157
|
}
|
|
148
158
|
|
|
149
159
|
&.pf-m-current {
|
|
150
160
|
--#{$calendar-month}__date--BackgroundColor: var(--#{$calendar-month}__dates-cell--m-current__date--BackgroundColor);
|
|
161
|
+
--#{$calendar-month}__date--after--BorderWidth: var(--#{$calendar-month}__dates-cell--m-current__date--after--BorderWidth);
|
|
162
|
+
--#{$calendar-month}__date--after--BorderColor: var(--#{$calendar-month}__dates-cell--m-current__date--after--BorderColor);
|
|
151
163
|
}
|
|
152
164
|
|
|
153
165
|
&.pf-m-in-range {
|
|
166
|
+
--#{$calendar-month}__dates-cell--after--BorderBlockStartWidth: var(--#{$calendar-month}__dates-cell--m-in-range--after--BorderBlockStartWidth);
|
|
167
|
+
--#{$calendar-month}__dates-cell--after--BorderBlockEndWidth: var(--#{$calendar-month}__dates-cell--m-in-range--after--BorderBlockEndWidth);
|
|
154
168
|
--#{$calendar-month}__dates-cell--before--BackgroundColor: var(--#{$calendar-month}__dates-cell--m-in-range--before--BackgroundColor);
|
|
155
169
|
--#{$calendar-month}__date--hover--BackgroundColor: var(--#{$calendar-month}__dates-cell--m-in-range__date--hover--BackgroundColor);
|
|
156
170
|
--#{$calendar-month}__date--hover--BorderWidth: var(--#{$calendar-month}__dates-cell--m-in-range__date--hover--BorderWidth);
|
|
@@ -186,6 +200,8 @@
|
|
|
186
200
|
|
|
187
201
|
&.pf-m-disabled {
|
|
188
202
|
--#{$calendar-month}__dates-cell--before--BackgroundColor: transparent;
|
|
203
|
+
--#{$calendar-month}__dates-cell--after--BorderBlockStartWidth: 0;
|
|
204
|
+
--#{$calendar-month}__dates-cell--after--BorderBlockEndWidth: 0;
|
|
189
205
|
--#{$calendar-month}__date--BackgroundColor: transparent;
|
|
190
206
|
}
|
|
191
207
|
}
|
|
@@ -1,6 +1,9 @@
|
|
|
1
1
|
.pf-v6-c-pagination {
|
|
2
2
|
--pf-v6-c-pagination--inset: 0;
|
|
3
3
|
--pf-v6-c-pagination--ColumnGap: var(--pf-t--global--spacer--lg);
|
|
4
|
+
--pf-v6-c-pagination--BorderColor: var(--pf-t--global--border--color--high-contrast);
|
|
5
|
+
--pf-v6-c-pagination--BorderBlockStartWidth: 0;
|
|
6
|
+
--pf-v6-c-pagination--BorderBlockEndWidth: 0;
|
|
4
7
|
--pf-v6-c-pagination--m-page-insets--inset: var(--pf-t--global--spacer--lg);
|
|
5
8
|
--pf-v6-c-pagination__nav--Display: none;
|
|
6
9
|
--pf-v6-c-pagination--m-display-summary__nav--Display: none;
|
|
@@ -22,14 +25,17 @@
|
|
|
22
25
|
--pf-v6-c-pagination--m-sticky--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
|
|
23
26
|
--pf-v6-c-pagination--m-sticky--ZIndex: var(--pf-t--global--z-index--xs);
|
|
24
27
|
--pf-v6-c-pagination--m-sticky--InsetBlockStart: 0;
|
|
28
|
+
--pf-v6-c-pagination--m-sticky--BorderBlockEndWidth: var(--pf-t--global--border--width--high-contrast--regular);
|
|
25
29
|
--pf-v6-c-pagination--m-bottom--BackgroundColor: var(--pf-t--global--background--color--primary--default);
|
|
26
30
|
--pf-v6-c-pagination--m-bottom--BoxShadow: var(--pf-t--global--box-shadow--sm--top);
|
|
27
31
|
--pf-v6-c-pagination--m-bottom--m-sticky--BoxShadow: var(--pf-t--global--box-shadow--sm--top);
|
|
28
32
|
--pf-v6-c-pagination--m-bottom--InsetBlockEnd: 0;
|
|
33
|
+
--pf-v6-c-pagination--m-bottom--BorderBlockStartWidth: var(--pf-t--global--border--width--high-contrast--regular);
|
|
29
34
|
--pf-v6-c-pagination--m-bottom--m-sticky--PaddingBlockStart: var(--pf-t--global--spacer--sm);
|
|
30
35
|
--pf-v6-c-pagination--m-bottom--m-sticky--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
|
|
31
36
|
--pf-v6-c-pagination--m-bottom--m-sticky--PaddingInlineStart: var(--pf-t--global--spacer--sm);
|
|
32
37
|
--pf-v6-c-pagination--m-bottom--m-sticky--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
|
|
38
|
+
--pf-v6-c-pagination--m-bottom--m-sticky--BorderBlockStartWidth: var(--pf-t--global--border--width--high-contrast--regular);
|
|
33
39
|
--pf-v6-c-pagination--m-bottom--m-static--PaddingBlockStart: var(--pf-t--global--spacer--gap--group--vertical);
|
|
34
40
|
--pf-v6-c-pagination--m-bottom--m-static--PaddingBlockEnd: 0;
|
|
35
41
|
--pf-v6-c-pagination--m-bottom--m-static--PaddingInlineStart: var(--pf-t--global--spacer--sm);
|
|
@@ -44,6 +50,7 @@
|
|
|
44
50
|
@media screen and (min-width: 48rem) {
|
|
45
51
|
.pf-v6-c-pagination {
|
|
46
52
|
--pf-v6-c-pagination--m-bottom--BoxShadow: none;
|
|
53
|
+
--pf-v6-c-pagination--m-bottom--BorderBlockStartWidth: 0;
|
|
47
54
|
--pf-v6-c-pagination__page-menu--Display: var(--pf-v6-c-pagination__page-menu--md--Display);
|
|
48
55
|
--pf-v6-c-pagination__nav--Display: inline-flex;
|
|
49
56
|
--pf-v6-c-pagination__total-items--Display: none;
|
|
@@ -63,6 +70,9 @@
|
|
|
63
70
|
justify-content: flex-end;
|
|
64
71
|
padding-inline-start: var(--pf-v6-c-pagination--inset);
|
|
65
72
|
padding-inline-end: var(--pf-v6-c-pagination--inset);
|
|
73
|
+
border: 0 solid var(--pf-v6-c-pagination--BorderColor);
|
|
74
|
+
border-block-start-width: var(--pf-v6-c-pagination--BorderBlockStartWidth);
|
|
75
|
+
border-block-end-width: var(--pf-v6-c-pagination--BorderBlockEndWidth);
|
|
66
76
|
}
|
|
67
77
|
.pf-v6-c-pagination .pf-v6-c-pagination__page-menu {
|
|
68
78
|
display: var(--pf-v6-c-pagination__page-menu--Display);
|
|
@@ -70,6 +80,7 @@
|
|
|
70
80
|
.pf-v6-c-pagination.pf-m-bottom {
|
|
71
81
|
--pf-v6-c-pagination--m-sticky--BoxShadow: var(--pf-v6-c-pagination--m-bottom--m-sticky--BoxShadow);
|
|
72
82
|
--pf-v6-c-pagination--m-sticky--InsetBlockStart: auto;
|
|
83
|
+
--pf-v6-c-pagination--BorderBlockStartWidth: var(--pf-v6-c-pagination--m-bottom--BorderBlockStartWidth);
|
|
73
84
|
position: sticky;
|
|
74
85
|
inset-block-end: var(--pf-v6-c-pagination--m-bottom--InsetBlockEnd);
|
|
75
86
|
justify-content: center;
|
|
@@ -96,7 +107,6 @@
|
|
|
96
107
|
}
|
|
97
108
|
@media screen and (min-width: 48rem) {
|
|
98
109
|
.pf-v6-c-pagination.pf-m-bottom {
|
|
99
|
-
--pf-v6-c-pagination--m-bottom--BorderBlockStartWidth: 0;
|
|
100
110
|
--pf-v6-c-pagination--m-bottom--MarginBlockStart: 0;
|
|
101
111
|
--pf-v6-c-pagination--m-bottom--InsetBlockEnd: auto;
|
|
102
112
|
position: relative;
|
|
@@ -128,10 +138,13 @@
|
|
|
128
138
|
padding-block-end: var(--pf-v6-c-pagination--m-bottom--m-static--PaddingBlockEnd);
|
|
129
139
|
padding-inline-start: var(--pf-v6-c-pagination--m-bottom--m-static--PaddingInlineStart);
|
|
130
140
|
padding-inline-end: var(--pf-v6-c-pagination--m-bottom--m-static--PaddingInlineEnd);
|
|
141
|
+
border: 0;
|
|
131
142
|
box-shadow: none;
|
|
132
143
|
}
|
|
133
144
|
.pf-v6-c-pagination.pf-m-sticky {
|
|
134
145
|
--pf-v6-c-pagination--m-bottom--InsetBlockEnd: 0;
|
|
146
|
+
--pf-v6-c-pagination--BorderBlockEndWidth: var(--pf-v6-c-pagination--m-sticky--BorderBlockEndWidth);
|
|
147
|
+
--pf-v6-c-pagination--m-bottom--BorderBlockStartWidth: var(--pf-v6-c-pagination--m-bottom--m-sticky--BorderBlockStartWidth);
|
|
135
148
|
position: sticky;
|
|
136
149
|
inset-block-start: var(--pf-v6-c-pagination--m-sticky--InsetBlockStart);
|
|
137
150
|
z-index: var(--pf-v6-c-pagination--m-sticky--ZIndex);
|
|
@@ -6,6 +6,9 @@ $pf-v6-c-pagination--variable-map: build-spacer-map("none", "sm", "md", "lg", "x
|
|
|
6
6
|
@include pf-root($pagination) {
|
|
7
7
|
--#{$pagination}--inset: 0;
|
|
8
8
|
--#{$pagination}--ColumnGap: var(--pf-t--global--spacer--lg);
|
|
9
|
+
--#{$pagination}--BorderColor: var(--pf-t--global--border--color--high-contrast);
|
|
10
|
+
--#{$pagination}--BorderBlockStartWidth: 0;
|
|
11
|
+
--#{$pagination}--BorderBlockEndWidth: 0;
|
|
9
12
|
|
|
10
13
|
// Page insets
|
|
11
14
|
--#{$pagination}--m-page-insets--inset: var(--pf-t--global--spacer--lg);
|
|
@@ -37,16 +40,19 @@ $pf-v6-c-pagination--variable-map: build-spacer-map("none", "sm", "md", "lg", "x
|
|
|
37
40
|
--#{$pagination}--m-sticky--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
|
|
38
41
|
--#{$pagination}--m-sticky--ZIndex: var(--pf-t--global--z-index--xs);
|
|
39
42
|
--#{$pagination}--m-sticky--InsetBlockStart: 0;
|
|
43
|
+
--#{$pagination}--m-sticky--BorderBlockEndWidth: var(--pf-t--global--border--width--high-contrast--regular);
|
|
40
44
|
|
|
41
45
|
// bottom
|
|
42
46
|
--#{$pagination}--m-bottom--BackgroundColor: var(--pf-t--global--background--color--primary--default);
|
|
43
47
|
--#{$pagination}--m-bottom--BoxShadow: var(--pf-t--global--box-shadow--sm--top);
|
|
44
48
|
--#{$pagination}--m-bottom--m-sticky--BoxShadow: var(--pf-t--global--box-shadow--sm--top);
|
|
45
49
|
--#{$pagination}--m-bottom--InsetBlockEnd: 0;
|
|
50
|
+
--#{$pagination}--m-bottom--BorderBlockStartWidth: var(--pf-t--global--border--width--high-contrast--regular);
|
|
46
51
|
--#{$pagination}--m-bottom--m-sticky--PaddingBlockStart: var(--pf-t--global--spacer--sm);
|
|
47
52
|
--#{$pagination}--m-bottom--m-sticky--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
|
|
48
53
|
--#{$pagination}--m-bottom--m-sticky--PaddingInlineStart: var(--pf-t--global--spacer--sm);
|
|
49
54
|
--#{$pagination}--m-bottom--m-sticky--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
|
|
55
|
+
--#{$pagination}--m-bottom--m-sticky--BorderBlockStartWidth: var(--pf-t--global--border--width--high-contrast--regular);
|
|
50
56
|
--#{$pagination}--m-bottom--m-static--PaddingBlockStart: var(--pf-t--global--spacer--gap--group--vertical);
|
|
51
57
|
--#{$pagination}--m-bottom--m-static--PaddingBlockEnd: 0;
|
|
52
58
|
--#{$pagination}--m-bottom--m-static--PaddingInlineStart: var(--pf-t--global--spacer--sm);
|
|
@@ -62,6 +68,7 @@ $pf-v6-c-pagination--variable-map: build-spacer-map("none", "sm", "md", "lg", "x
|
|
|
62
68
|
|
|
63
69
|
@media screen and (min-width: $pf-v6-global--breakpoint--md) {
|
|
64
70
|
--#{$pagination}--m-bottom--BoxShadow: none;
|
|
71
|
+
--#{$pagination}--m-bottom--BorderBlockStartWidth: 0;
|
|
65
72
|
--#{$pagination}__page-menu--Display: var(--#{$pagination}__page-menu--md--Display);
|
|
66
73
|
--#{$pagination}__nav--Display: inline-flex;
|
|
67
74
|
--#{$pagination}__total-items--Display: none;
|
|
@@ -80,6 +87,9 @@ $pf-v6-c-pagination--variable-map: build-spacer-map("none", "sm", "md", "lg", "x
|
|
|
80
87
|
justify-content: flex-end;
|
|
81
88
|
padding-inline-start: var(--#{$pagination}--inset);
|
|
82
89
|
padding-inline-end: var(--#{$pagination}--inset);
|
|
90
|
+
border: 0 solid var(--#{$pagination}--BorderColor);
|
|
91
|
+
border-block-start-width: var(--#{$pagination}--BorderBlockStartWidth);
|
|
92
|
+
border-block-end-width: var(--#{$pagination}--BorderBlockEndWidth);
|
|
83
93
|
|
|
84
94
|
.#{$pagination}__page-menu {
|
|
85
95
|
display: var(--#{$pagination}__page-menu--Display);
|
|
@@ -88,6 +98,7 @@ $pf-v6-c-pagination--variable-map: build-spacer-map("none", "sm", "md", "lg", "x
|
|
|
88
98
|
&.pf-m-bottom {
|
|
89
99
|
--#{$pagination}--m-sticky--BoxShadow: var(--#{$pagination}--m-bottom--m-sticky--BoxShadow);
|
|
90
100
|
--#{$pagination}--m-sticky--InsetBlockStart: auto;
|
|
101
|
+
--#{$pagination}--BorderBlockStartWidth: var(--#{$pagination}--m-bottom--BorderBlockStartWidth);
|
|
91
102
|
|
|
92
103
|
position: sticky;
|
|
93
104
|
inset-block-end: var(--#{$pagination}--m-bottom--InsetBlockEnd);
|
|
@@ -117,7 +128,6 @@ $pf-v6-c-pagination--variable-map: build-spacer-map("none", "sm", "md", "lg", "x
|
|
|
117
128
|
}
|
|
118
129
|
|
|
119
130
|
@media screen and (min-width: $pf-v6-global--breakpoint--md) {
|
|
120
|
-
--#{$pagination}--m-bottom--BorderBlockStartWidth: 0;
|
|
121
131
|
--#{$pagination}--m-bottom--MarginBlockStart: 0;
|
|
122
132
|
--#{$pagination}--m-bottom--InsetBlockEnd: auto;
|
|
123
133
|
|
|
@@ -155,11 +165,14 @@ $pf-v6-c-pagination--variable-map: build-spacer-map("none", "sm", "md", "lg", "x
|
|
|
155
165
|
padding-block-end: var(--#{$pagination}--m-bottom--m-static--PaddingBlockEnd);
|
|
156
166
|
padding-inline-start: var(--#{$pagination}--m-bottom--m-static--PaddingInlineStart);
|
|
157
167
|
padding-inline-end: var(--#{$pagination}--m-bottom--m-static--PaddingInlineEnd);
|
|
168
|
+
border: 0;
|
|
158
169
|
box-shadow: none;
|
|
159
170
|
}
|
|
160
171
|
|
|
161
172
|
&.pf-m-sticky {
|
|
162
173
|
--#{$pagination}--m-bottom--InsetBlockEnd: 0;
|
|
174
|
+
--#{$pagination}--BorderBlockEndWidth: var(--#{$pagination}--m-sticky--BorderBlockEndWidth);
|
|
175
|
+
--#{$pagination}--m-bottom--BorderBlockStartWidth: var(--#{$pagination}--m-bottom--m-sticky--BorderBlockStartWidth);
|
|
163
176
|
|
|
164
177
|
position: sticky;
|
|
165
178
|
inset-block-start: var(--#{$pagination}--m-sticky--InsetBlockStart);
|
package/components/_index.css
CHANGED
|
@@ -2452,6 +2452,9 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
|
|
|
2452
2452
|
--pf-v6-c-calendar-month__dates-cell--before--InsetInlineEnd: 0;
|
|
2453
2453
|
--pf-v6-c-calendar-month__dates-cell--before--InsetBlockEnd: var(--pf-v6-c-calendar-month__dates-cell--PaddingBlockEnd);
|
|
2454
2454
|
--pf-v6-c-calendar-month__dates-cell--before--InsetInlineStart: 0;
|
|
2455
|
+
--pf-v6-c-calendar-month__dates-cell--after--BorderColor: var(--pf-t--global--border--color--high-contrast);
|
|
2456
|
+
--pf-v6-c-calendar-month__dates-cell--after--BorderBlockStartWidth: 0;
|
|
2457
|
+
--pf-v6-c-calendar-month__dates-cell--after--BorderBlockEndWidth: 0;
|
|
2455
2458
|
--pf-v6-c-calendar-month__dates-cell--m-in-range--before--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
|
|
2456
2459
|
--pf-v6-c-calendar-month__dates-cell--m-in-range--m-start-range--before--InsetInlineStart: 50%;
|
|
2457
2460
|
--pf-v6-c-calendar-month__dates-cell--m-in-range--m-end-range--before--InsetInlineEnd: 50%;
|
|
@@ -2459,6 +2462,8 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
|
|
|
2459
2462
|
--pf-v6-c-calendar-month__dates-cell--m-in-range__date--hover--BorderWidth: var(--pf-t--global--border--width--regular);
|
|
2460
2463
|
--pf-v6-c-calendar-month__dates-cell--m-in-range__date--hover--BorderColor: var(--pf-t--global--border--color--hover);
|
|
2461
2464
|
--pf-v6-c-calendar-month__dates-cell--m-in-range__date--focus--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
|
|
2465
|
+
--pf-v6-c-calendar-month__dates-cell--m-in-range--after--BorderBlockStartWidth: var(--pf-t--global--border--width--high-contrast--regular);
|
|
2466
|
+
--pf-v6-c-calendar-month__dates-cell--m-in-range--after--BorderBlockEndWidth: var(--pf-t--global--border--width--high-contrast--regular);
|
|
2462
2467
|
--pf-v6-c-calendar-month__dates-cell--m-adjacent-month__date--Color: var(--pf-t--global--text--color--subtle);
|
|
2463
2468
|
--pf-v6-c-calendar-month__date--Width: 4ch;
|
|
2464
2469
|
--pf-v6-c-calendar-month__date--Height: 4ch;
|
|
@@ -2477,6 +2482,8 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
|
|
|
2477
2482
|
--pf-v6-c-calendar-month__date--focus--BackgroundColor: var(--pf-t--global--color--brand--default);
|
|
2478
2483
|
--pf-v6-c-calendar-month__date--focus--after--BorderColor: var(--pf-t--global--border--color--hover);
|
|
2479
2484
|
--pf-v6-c-calendar-month__date--after--focus--OutlineOffset: -2px;
|
|
2485
|
+
--pf-v6-c-calendar-month__dates-cell--m-current__date--after--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
|
|
2486
|
+
--pf-v6-c-calendar-month__dates-cell--m-current__date--after--BorderColor: var(--pf-t--global--border--color--high-contrast);
|
|
2480
2487
|
}
|
|
2481
2488
|
|
|
2482
2489
|
.pf-v6-c-calendar-month {
|
|
@@ -2549,13 +2556,20 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
|
|
|
2549
2556
|
inset-block-end: var(--pf-v6-c-calendar-month__dates-cell--before--InsetBlockEnd);
|
|
2550
2557
|
inset-inline-start: var(--pf-v6-c-calendar-month__dates-cell--before--InsetInlineStart);
|
|
2551
2558
|
inset-inline-end: var(--pf-v6-c-calendar-month__dates-cell--before--InsetInlineEnd);
|
|
2559
|
+
pointer-events: none;
|
|
2552
2560
|
content: "";
|
|
2553
2561
|
background-color: var(--pf-v6-c-calendar-month__dates-cell--before--BackgroundColor);
|
|
2562
|
+
border: solid var(--pf-v6-c-calendar-month__dates-cell--after--BorderColor);
|
|
2563
|
+
border-width: var(--pf-v6-c-calendar-month__dates-cell--after--BorderBlockStartWidth) 0 var(--pf-v6-c-calendar-month__dates-cell--after--BorderBlockEndWidth);
|
|
2554
2564
|
}
|
|
2555
2565
|
.pf-v6-c-calendar-month__dates-cell.pf-m-current {
|
|
2556
2566
|
--pf-v6-c-calendar-month__date--BackgroundColor: var(--pf-v6-c-calendar-month__dates-cell--m-current__date--BackgroundColor);
|
|
2567
|
+
--pf-v6-c-calendar-month__date--after--BorderWidth: var(--pf-v6-c-calendar-month__dates-cell--m-current__date--after--BorderWidth);
|
|
2568
|
+
--pf-v6-c-calendar-month__date--after--BorderColor: var(--pf-v6-c-calendar-month__dates-cell--m-current__date--after--BorderColor);
|
|
2557
2569
|
}
|
|
2558
2570
|
.pf-v6-c-calendar-month__dates-cell.pf-m-in-range {
|
|
2571
|
+
--pf-v6-c-calendar-month__dates-cell--after--BorderBlockStartWidth: var(--pf-v6-c-calendar-month__dates-cell--m-in-range--after--BorderBlockStartWidth);
|
|
2572
|
+
--pf-v6-c-calendar-month__dates-cell--after--BorderBlockEndWidth: var(--pf-v6-c-calendar-month__dates-cell--m-in-range--after--BorderBlockEndWidth);
|
|
2559
2573
|
--pf-v6-c-calendar-month__dates-cell--before--BackgroundColor: var(--pf-v6-c-calendar-month__dates-cell--m-in-range--before--BackgroundColor);
|
|
2560
2574
|
--pf-v6-c-calendar-month__date--hover--BackgroundColor: var(--pf-v6-c-calendar-month__dates-cell--m-in-range__date--hover--BackgroundColor);
|
|
2561
2575
|
--pf-v6-c-calendar-month__date--hover--BorderWidth: var(--pf-v6-c-calendar-month__dates-cell--m-in-range__date--hover--BorderWidth);
|
|
@@ -2582,6 +2596,8 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
|
|
|
2582
2596
|
}
|
|
2583
2597
|
.pf-v6-c-calendar-month__dates-cell.pf-m-disabled {
|
|
2584
2598
|
--pf-v6-c-calendar-month__dates-cell--before--BackgroundColor: transparent;
|
|
2599
|
+
--pf-v6-c-calendar-month__dates-cell--after--BorderBlockStartWidth: 0;
|
|
2600
|
+
--pf-v6-c-calendar-month__dates-cell--after--BorderBlockEndWidth: 0;
|
|
2585
2601
|
--pf-v6-c-calendar-month__date--BackgroundColor: transparent;
|
|
2586
2602
|
}
|
|
2587
2603
|
|
|
@@ -13197,6 +13213,9 @@ ul.pf-v6-c-list {
|
|
|
13197
13213
|
.pf-v6-c-pagination {
|
|
13198
13214
|
--pf-v6-c-pagination--inset: 0;
|
|
13199
13215
|
--pf-v6-c-pagination--ColumnGap: var(--pf-t--global--spacer--lg);
|
|
13216
|
+
--pf-v6-c-pagination--BorderColor: var(--pf-t--global--border--color--high-contrast);
|
|
13217
|
+
--pf-v6-c-pagination--BorderBlockStartWidth: 0;
|
|
13218
|
+
--pf-v6-c-pagination--BorderBlockEndWidth: 0;
|
|
13200
13219
|
--pf-v6-c-pagination--m-page-insets--inset: var(--pf-t--global--spacer--lg);
|
|
13201
13220
|
--pf-v6-c-pagination__nav--Display: none;
|
|
13202
13221
|
--pf-v6-c-pagination--m-display-summary__nav--Display: none;
|
|
@@ -13218,14 +13237,17 @@ ul.pf-v6-c-list {
|
|
|
13218
13237
|
--pf-v6-c-pagination--m-sticky--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
|
|
13219
13238
|
--pf-v6-c-pagination--m-sticky--ZIndex: var(--pf-t--global--z-index--xs);
|
|
13220
13239
|
--pf-v6-c-pagination--m-sticky--InsetBlockStart: 0;
|
|
13240
|
+
--pf-v6-c-pagination--m-sticky--BorderBlockEndWidth: var(--pf-t--global--border--width--high-contrast--regular);
|
|
13221
13241
|
--pf-v6-c-pagination--m-bottom--BackgroundColor: var(--pf-t--global--background--color--primary--default);
|
|
13222
13242
|
--pf-v6-c-pagination--m-bottom--BoxShadow: var(--pf-t--global--box-shadow--sm--top);
|
|
13223
13243
|
--pf-v6-c-pagination--m-bottom--m-sticky--BoxShadow: var(--pf-t--global--box-shadow--sm--top);
|
|
13224
13244
|
--pf-v6-c-pagination--m-bottom--InsetBlockEnd: 0;
|
|
13245
|
+
--pf-v6-c-pagination--m-bottom--BorderBlockStartWidth: var(--pf-t--global--border--width--high-contrast--regular);
|
|
13225
13246
|
--pf-v6-c-pagination--m-bottom--m-sticky--PaddingBlockStart: var(--pf-t--global--spacer--sm);
|
|
13226
13247
|
--pf-v6-c-pagination--m-bottom--m-sticky--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
|
|
13227
13248
|
--pf-v6-c-pagination--m-bottom--m-sticky--PaddingInlineStart: var(--pf-t--global--spacer--sm);
|
|
13228
13249
|
--pf-v6-c-pagination--m-bottom--m-sticky--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
|
|
13250
|
+
--pf-v6-c-pagination--m-bottom--m-sticky--BorderBlockStartWidth: var(--pf-t--global--border--width--high-contrast--regular);
|
|
13229
13251
|
--pf-v6-c-pagination--m-bottom--m-static--PaddingBlockStart: var(--pf-t--global--spacer--gap--group--vertical);
|
|
13230
13252
|
--pf-v6-c-pagination--m-bottom--m-static--PaddingBlockEnd: 0;
|
|
13231
13253
|
--pf-v6-c-pagination--m-bottom--m-static--PaddingInlineStart: var(--pf-t--global--spacer--sm);
|
|
@@ -13240,6 +13262,7 @@ ul.pf-v6-c-list {
|
|
|
13240
13262
|
@media screen and (min-width: 48rem) {
|
|
13241
13263
|
.pf-v6-c-pagination {
|
|
13242
13264
|
--pf-v6-c-pagination--m-bottom--BoxShadow: none;
|
|
13265
|
+
--pf-v6-c-pagination--m-bottom--BorderBlockStartWidth: 0;
|
|
13243
13266
|
--pf-v6-c-pagination__page-menu--Display: var(--pf-v6-c-pagination__page-menu--md--Display);
|
|
13244
13267
|
--pf-v6-c-pagination__nav--Display: inline-flex;
|
|
13245
13268
|
--pf-v6-c-pagination__total-items--Display: none;
|
|
@@ -13259,6 +13282,9 @@ ul.pf-v6-c-list {
|
|
|
13259
13282
|
justify-content: flex-end;
|
|
13260
13283
|
padding-inline-start: var(--pf-v6-c-pagination--inset);
|
|
13261
13284
|
padding-inline-end: var(--pf-v6-c-pagination--inset);
|
|
13285
|
+
border: 0 solid var(--pf-v6-c-pagination--BorderColor);
|
|
13286
|
+
border-block-start-width: var(--pf-v6-c-pagination--BorderBlockStartWidth);
|
|
13287
|
+
border-block-end-width: var(--pf-v6-c-pagination--BorderBlockEndWidth);
|
|
13262
13288
|
}
|
|
13263
13289
|
.pf-v6-c-pagination .pf-v6-c-pagination__page-menu {
|
|
13264
13290
|
display: var(--pf-v6-c-pagination__page-menu--Display);
|
|
@@ -13266,6 +13292,7 @@ ul.pf-v6-c-list {
|
|
|
13266
13292
|
.pf-v6-c-pagination.pf-m-bottom {
|
|
13267
13293
|
--pf-v6-c-pagination--m-sticky--BoxShadow: var(--pf-v6-c-pagination--m-bottom--m-sticky--BoxShadow);
|
|
13268
13294
|
--pf-v6-c-pagination--m-sticky--InsetBlockStart: auto;
|
|
13295
|
+
--pf-v6-c-pagination--BorderBlockStartWidth: var(--pf-v6-c-pagination--m-bottom--BorderBlockStartWidth);
|
|
13269
13296
|
position: sticky;
|
|
13270
13297
|
inset-block-end: var(--pf-v6-c-pagination--m-bottom--InsetBlockEnd);
|
|
13271
13298
|
justify-content: center;
|
|
@@ -13292,7 +13319,6 @@ ul.pf-v6-c-list {
|
|
|
13292
13319
|
}
|
|
13293
13320
|
@media screen and (min-width: 48rem) {
|
|
13294
13321
|
.pf-v6-c-pagination.pf-m-bottom {
|
|
13295
|
-
--pf-v6-c-pagination--m-bottom--BorderBlockStartWidth: 0;
|
|
13296
13322
|
--pf-v6-c-pagination--m-bottom--MarginBlockStart: 0;
|
|
13297
13323
|
--pf-v6-c-pagination--m-bottom--InsetBlockEnd: auto;
|
|
13298
13324
|
position: relative;
|
|
@@ -13324,10 +13350,13 @@ ul.pf-v6-c-list {
|
|
|
13324
13350
|
padding-block-end: var(--pf-v6-c-pagination--m-bottom--m-static--PaddingBlockEnd);
|
|
13325
13351
|
padding-inline-start: var(--pf-v6-c-pagination--m-bottom--m-static--PaddingInlineStart);
|
|
13326
13352
|
padding-inline-end: var(--pf-v6-c-pagination--m-bottom--m-static--PaddingInlineEnd);
|
|
13353
|
+
border: 0;
|
|
13327
13354
|
box-shadow: none;
|
|
13328
13355
|
}
|
|
13329
13356
|
.pf-v6-c-pagination.pf-m-sticky {
|
|
13330
13357
|
--pf-v6-c-pagination--m-bottom--InsetBlockEnd: 0;
|
|
13358
|
+
--pf-v6-c-pagination--BorderBlockEndWidth: var(--pf-v6-c-pagination--m-sticky--BorderBlockEndWidth);
|
|
13359
|
+
--pf-v6-c-pagination--m-bottom--BorderBlockStartWidth: var(--pf-v6-c-pagination--m-bottom--m-sticky--BorderBlockStartWidth);
|
|
13331
13360
|
position: sticky;
|
|
13332
13361
|
inset-block-start: var(--pf-v6-c-pagination--m-sticky--InsetBlockStart);
|
|
13333
13362
|
z-index: var(--pf-v6-c-pagination--m-sticky--ZIndex);
|
|
@@ -301,6 +301,16 @@ cssPrefix: pf-v6-c-pagination
|
|
|
301
301
|
### Bottom
|
|
302
302
|
|
|
303
303
|
```html
|
|
304
|
+
<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>
|
|
305
|
+
<br />
|
|
306
|
+
<br />
|
|
307
|
+
<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>
|
|
308
|
+
<br />
|
|
309
|
+
<br />
|
|
310
|
+
<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>
|
|
311
|
+
<br />
|
|
312
|
+
<br />
|
|
313
|
+
<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>
|
|
304
314
|
<div class="pf-v6-c-pagination pf-m-bottom">
|
|
305
315
|
<div class="pf-v6-c-pagination__page-menu">
|
|
306
316
|
<button
|
|
@@ -490,6 +500,107 @@ cssPrefix: pf-v6-c-pagination
|
|
|
490
500
|
|
|
491
501
|
```
|
|
492
502
|
|
|
503
|
+
### Bottom static
|
|
504
|
+
|
|
505
|
+
```html
|
|
506
|
+
<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>
|
|
507
|
+
<br />
|
|
508
|
+
<br />
|
|
509
|
+
<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>
|
|
510
|
+
<br />
|
|
511
|
+
<br />
|
|
512
|
+
<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>
|
|
513
|
+
<br />
|
|
514
|
+
<br />
|
|
515
|
+
<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>
|
|
516
|
+
<div class="pf-v6-c-pagination pf-m-bottom pf-m-static">
|
|
517
|
+
<div class="pf-v6-c-pagination__page-menu">
|
|
518
|
+
<button
|
|
519
|
+
class="pf-v6-c-menu-toggle pf-m-top pf-m-text pf-m-plain"
|
|
520
|
+
type="button"
|
|
521
|
+
aria-expanded="false"
|
|
522
|
+
aria-label="Menu toggle"
|
|
523
|
+
id="pagination-menu-toggle-bottom-sticky-example"
|
|
524
|
+
>
|
|
525
|
+
<span class="pf-v6-c-menu-toggle__text">
|
|
526
|
+
<b>1 - 10</b> of
|
|
527
|
+
<b>36</b>
|
|
528
|
+
</span>
|
|
529
|
+
<span class="pf-v6-c-menu-toggle__controls">
|
|
530
|
+
<span class="pf-v6-c-menu-toggle__toggle-icon">
|
|
531
|
+
<i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
|
|
532
|
+
</span>
|
|
533
|
+
</span>
|
|
534
|
+
</button>
|
|
535
|
+
</div>
|
|
536
|
+
<nav
|
|
537
|
+
class="pf-v6-c-pagination__nav"
|
|
538
|
+
aria-label="Pagination nav - bottom sticky example"
|
|
539
|
+
>
|
|
540
|
+
<div class="pf-v6-c-pagination__nav-control pf-m-first">
|
|
541
|
+
<button
|
|
542
|
+
class="pf-v6-c-button pf-m-plain"
|
|
543
|
+
type="button"
|
|
544
|
+
disabled
|
|
545
|
+
aria-label="Go to first page"
|
|
546
|
+
>
|
|
547
|
+
<span class="pf-v6-c-button__icon">
|
|
548
|
+
<i class="fas fa-angle-double-left" aria-hidden="true"></i>
|
|
549
|
+
</span>
|
|
550
|
+
</button>
|
|
551
|
+
</div>
|
|
552
|
+
<div class="pf-v6-c-pagination__nav-control pf-m-prev">
|
|
553
|
+
<button
|
|
554
|
+
class="pf-v6-c-button pf-m-plain"
|
|
555
|
+
type="button"
|
|
556
|
+
disabled
|
|
557
|
+
aria-label="Go to previous page"
|
|
558
|
+
>
|
|
559
|
+
<span class="pf-v6-c-button__icon">
|
|
560
|
+
<i class="fas fa-angle-left" aria-hidden="true"></i>
|
|
561
|
+
</span>
|
|
562
|
+
</button>
|
|
563
|
+
</div>
|
|
564
|
+
<div class="pf-v6-c-pagination__nav-page-select">
|
|
565
|
+
<span class="pf-v6-c-form-control">
|
|
566
|
+
<input
|
|
567
|
+
aria-label="Current page"
|
|
568
|
+
type="number"
|
|
569
|
+
min="1"
|
|
570
|
+
max="4"
|
|
571
|
+
value="1"
|
|
572
|
+
/>
|
|
573
|
+
</span>
|
|
574
|
+
<span aria-hidden="true">of 4</span>
|
|
575
|
+
</div>
|
|
576
|
+
<div class="pf-v6-c-pagination__nav-control pf-m-next">
|
|
577
|
+
<button
|
|
578
|
+
class="pf-v6-c-button pf-m-plain"
|
|
579
|
+
type="button"
|
|
580
|
+
aria-label="Go to next page"
|
|
581
|
+
>
|
|
582
|
+
<span class="pf-v6-c-button__icon">
|
|
583
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
584
|
+
</span>
|
|
585
|
+
</button>
|
|
586
|
+
</div>
|
|
587
|
+
<div class="pf-v6-c-pagination__nav-control pf-m-last">
|
|
588
|
+
<button
|
|
589
|
+
class="pf-v6-c-button pf-m-plain"
|
|
590
|
+
type="button"
|
|
591
|
+
disabled
|
|
592
|
+
aria-label="Go to last page"
|
|
593
|
+
>
|
|
594
|
+
<span class="pf-v6-c-button__icon">
|
|
595
|
+
<i class="fas fa-angle-double-right" aria-hidden="true"></i>
|
|
596
|
+
</span>
|
|
597
|
+
</button>
|
|
598
|
+
</div>
|
|
599
|
+
</nav>
|
|
600
|
+
</div>
|
|
601
|
+
|
|
602
|
+
```
|
|
603
|
+
|
|
493
604
|
### Top disabled
|
|
494
605
|
|
|
495
606
|
```html
|