@patternfly/patternfly 6.0.0-alpha.30 → 6.0.0-alpha.32

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.
@@ -1,27 +1,28 @@
1
+ :root {
2
+ --pf-v5-c-helper-text--Gap: var(--pf-t--global--spacer--xs);
3
+ --pf-v5-c-helper-text--FontSize: var(--pf-t--global--font--size--body--sm);
4
+ --pf-v5-c-helper-text__item-icon--Color: var(--pf-t--global--icon--color--regular);
5
+ --pf-v5-c-helper-text__item-text--Color: var(--pf-t--global--text--color--regular);
6
+ --pf-v5-c-helper-text__item-text--FontWeight: var(--pf-t--global--font--weight--body);
7
+ --pf-v5-c-helper-text__item-icon--m-indeterminate--Color: var(--pf-t--global--icon--color--subtle);
8
+ --pf-v5-c-helper-text__item-text--m-indeterminate--Color: var(--pf-t--global--text--color--subtle);
9
+ --pf-v5-c-helper-text__item-icon--m-warning--Color: var(--pf-t--global--icon--color--status--warning--default);
10
+ --pf-v5-c-helper-text__item-text--m-warning--FontWeight: var(--pf-t--global--font--weight--body--bold);
11
+ --pf-v5-c-helper-text__item-icon--m-success--Color: var(--pf-t--global--icon--color--status--success--default);
12
+ --pf-v5-c-helper-text__item-text--m-success--FontWeight: var(--pf-t--global--font--weight--body--bold);
13
+ --pf-v5-c-helper-text__item-icon--m-error--Color: var(--pf-t--global--icon--color--status--danger--default);
14
+ --pf-v5-c-helper-text__item-text--m-error--FontWeight: var(--pf-t--global--font--weight--body--bold);
15
+ --pf-v5-c-helper-text--m-dynamic__item-icon--Color: var(--pf-t--global--icon--color--regular);
16
+ --pf-v5-c-helper-text--m-dynamic--m-indeterminate__item-icon--Color: var(--pf-t--global--icon--color--subtle);
17
+ --pf-v5-c-helper-text--m-dynamic--m-indeterminate__item-text--Color: var(--pf-t--global--text--color--subtle);
18
+ --pf-v5-c-helper-text--m-dynamic--m-warning__item-icon--Color: var(--pf-t--global--icon--color--status--warning--default);
19
+ --pf-v5-c-helper-text--m-dynamic--m-warning__item-text--FontWeight: var(--pf-t--global--font--weight--body--bold);
20
+ --pf-v5-c-helper-text--m-dynamic--m-success__item-icon--Color: var(--pf-t--global--icon--color--status--success--default);
21
+ --pf-v5-c-helper-text--m-dynamic--m-error__item-icon--Color: var(--pf-t--global--icon--color--status--danger--default);
22
+ --pf-v5-c-helper-text__item-icon--MarginRight: var(--pf-t--global--spacer--xs);
23
+ }
24
+
1
25
  .pf-v5-c-helper-text {
2
- --pf-v5-c-helper-text--Gap: var(--pf-v5-global--spacer--xs);
3
- --pf-v5-c-helper-text--FontSize: var(--pf-v5-global--FontSize--sm);
4
- --pf-v5-c-helper-text__item-icon--Color: var(--pf-v5-global--Color--100);
5
- --pf-v5-c-helper-text__item-text--Color: var(--pf-v5-global--Color--100);
6
- --pf-v5-c-helper-text__item-icon--m-indeterminate--Color: var(--pf-v5-global--Color--200);
7
- --pf-v5-c-helper-text__item-text--m-indeterminate--Color: var(--pf-v5-global--Color--200);
8
- --pf-v5-c-helper-text__item-icon--m-warning--Color: var(--pf-v5-global--warning-color--100);
9
- --pf-v5-c-helper-text__item-text--m-warning--Color: var(--pf-v5-global--warning-color--200);
10
- --pf-v5-c-helper-text__item-icon--m-success--Color: var(--pf-v5-global--success-color--100);
11
- --pf-v5-c-helper-text__item-text--m-success--Color: var(--pf-v5-global--success-color--200);
12
- --pf-v5-c-helper-text__item-icon--m-error--Color: var(--pf-v5-global--danger-color--100);
13
- --pf-v5-c-helper-text__item-text--m-error--Color: var(--pf-v5-global--danger-color--200);
14
- --pf-v5-c-helper-text--m-dynamic__item-icon--Color: var(--pf-v5-global--Color--100);
15
- --pf-v5-c-helper-text--m-dynamic__item-text--Color: var(--pf-v5-global--Color--100);
16
- --pf-v5-c-helper-text--m-dynamic--m-indeterminate__item-icon--Color: var(--pf-v5-global--Color--200);
17
- --pf-v5-c-helper-text--m-dynamic--m-indeterminate__item-text--Color: var(--pf-v5-global--Color--200);
18
- --pf-v5-c-helper-text--m-dynamic--m-warning__item-icon--Color: var(--pf-v5-global--warning-color--100);
19
- --pf-v5-c-helper-text--m-dynamic--m-warning__item-text--Color: var(--pf-v5-global--Color--200);
20
- --pf-v5-c-helper-text--m-dynamic--m-success__item-icon--Color: var(--pf-v5-global--success-color--100);
21
- --pf-v5-c-helper-text--m-dynamic--m-success__item-text--Color: var(--pf-v5-global--Color--200);
22
- --pf-v5-c-helper-text--m-dynamic--m-error__item-icon--Color: var(--pf-v5-global--danger-color--100);
23
- --pf-v5-c-helper-text--m-dynamic--m-error__item-text--Color: var(--pf-v5-global--Color--100);
24
- --pf-v5-c-helper-text__item-icon--MarginRight: var(--pf-v5-global--spacer--xs);
25
26
  display: grid;
26
27
  gap: var(--pf-v5-c-helper-text--Gap);
27
28
  font-size: var(--pf-v5-c-helper-text--FontSize);
@@ -33,6 +34,7 @@
33
34
 
34
35
  .pf-v5-c-helper-text__item {
35
36
  display: flex;
37
+ font-weight: var(--pf-v5-c-helper-text__item-text--FontWeight);
36
38
  }
37
39
  .pf-v5-c-helper-text__item.pf-m-indeterminate {
38
40
  --pf-v5-c-helper-text__item-icon--Color: var(--pf-v5-c-helper-text__item-icon--m-indeterminate--Color);
@@ -41,25 +43,21 @@
41
43
  --pf-v5-c-helper-text--m-dynamic__item-text--Color: var(--pf-v5-c-helper-text--m-dynamic--m-indeterminate__item-text--Color);
42
44
  }
43
45
  .pf-v5-c-helper-text__item.pf-m-warning {
46
+ --pf-v5-c-helper-text__item-text--FontWeight: var(--pf-v5-c-helper-text__item-text--m-warning--FontWeight);
44
47
  --pf-v5-c-helper-text__item-icon--Color: var(--pf-v5-c-helper-text__item-icon--m-warning--Color);
45
- --pf-v5-c-helper-text__item-text--Color: var(--pf-v5-c-helper-text__item-text--m-warning--Color);
46
48
  --pf-v5-c-helper-text--m-dynamic__item-icon--Color: var(--pf-v5-c-helper-text--m-dynamic--m-warning__item-icon--Color);
47
- --pf-v5-c-helper-text--m-dynamic__item-text--Color: var(--pf-v5-c-helper-text--m-dynamic--m-warning__item-text--Color);
48
49
  }
49
50
  .pf-v5-c-helper-text__item.pf-m-success {
51
+ --pf-v5-c-helper-text__item-text--FontWeight: var(--pf-v5-c-helper-text__item-text--m-success--FontWeight);
50
52
  --pf-v5-c-helper-text__item-icon--Color: var(--pf-v5-c-helper-text__item-icon--m-success--Color);
51
- --pf-v5-c-helper-text__item-text--Color: var(--pf-v5-c-helper-text__item-text--m-success--Color);
52
53
  --pf-v5-c-helper-text--m-dynamic__item-icon--Color: var(--pf-v5-c-helper-text--m-dynamic--m-success__item-icon--Color);
53
- --pf-v5-c-helper-text--m-dynamic__item-text--Color: var(--pf-v5-c-helper-text--m-dynamic--m-success__item-text--Color);
54
54
  }
55
55
  .pf-v5-c-helper-text__item.pf-m-error {
56
+ --pf-v5-c-helper-text__item-text--FontWeight: var(--pf-v5-c-helper-text__item-text--m-error--FontWeight);
56
57
  --pf-v5-c-helper-text__item-icon--Color: var(--pf-v5-c-helper-text__item-icon--m-error--Color);
57
- --pf-v5-c-helper-text__item-text--Color: var(--pf-v5-c-helper-text__item-text--m-error--Color);
58
58
  --pf-v5-c-helper-text--m-dynamic__item-icon--Color: var(--pf-v5-c-helper-text--m-dynamic--m-error__item-icon--Color);
59
- --pf-v5-c-helper-text--m-dynamic__item-text--Color: var(--pf-v5-c-helper-text--m-dynamic--m-error__item-text--Color);
60
59
  }
61
60
  .pf-v5-c-helper-text__item.pf-m-dynamic {
62
- --pf-v5-c-helper-text__item-text--Color: var(--pf-v5-c-helper-text--m-dynamic__item-text--Color);
63
61
  --pf-v5-c-helper-text__item-icon--Color: var(--pf-v5-c-helper-text--m-dynamic__item-icon--Color);
64
62
  }
65
63
 
@@ -70,8 +68,4 @@
70
68
 
71
69
  .pf-v5-c-helper-text__item-text {
72
70
  color: var(--pf-v5-c-helper-text__item-text--Color);
73
- }
74
-
75
- :where(.pf-v5-theme-dark) .pf-v5-c-helper-text {
76
- --pf-v5-c-helper-text__item-text--m-success--Color: var(--pf-v5-global--success-color--100);
77
71
  }
@@ -1,36 +1,34 @@
1
1
  // @debug $helper-text; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
2
-
3
- .#{$helper-text} {
4
- --#{$helper-text}--Gap: var(--#{$pf-global}--spacer--xs);
5
- --#{$helper-text}--FontSize: var(--#{$pf-global}--FontSize--sm);
2
+ :root {
3
+ --#{$helper-text}--Gap: var(--pf-t--global--spacer--xs);
4
+ --#{$helper-text}--FontSize: var(--pf-t--global--font--size--body--sm);
6
5
 
7
6
  // item
8
- --#{$helper-text}__item-icon--Color: var(--#{$pf-global}--Color--100);
9
- --#{$helper-text}__item-text--Color: var(--#{$pf-global}--Color--100);
10
- --#{$helper-text}__item-icon--m-indeterminate--Color: var(--#{$pf-global}--Color--200);
11
- --#{$helper-text}__item-text--m-indeterminate--Color: var(--#{$pf-global}--Color--200);
12
- --#{$helper-text}__item-icon--m-warning--Color: var(--#{$pf-global}--warning-color--100);
13
- --#{$helper-text}__item-text--m-warning--Color: var(--#{$pf-global}--warning-color--200);
14
- --#{$helper-text}__item-icon--m-success--Color: var(--#{$pf-global}--success-color--100);
15
- --#{$helper-text}__item-text--m-success--Color: var(--#{$pf-global}--success-color--200);
16
- --#{$helper-text}__item-icon--m-error--Color: var(--#{$pf-global}--danger-color--100);
17
- --#{$helper-text}__item-text--m-error--Color: var(--#{$pf-global}--danger-color--200);
7
+ --#{$helper-text}__item-icon--Color: var(--pf-t--global--icon--color--regular);
8
+ --#{$helper-text}__item-text--Color: var(--pf-t--global--text--color--regular);
9
+ --#{$helper-text}__item-text--FontWeight: var(--pf-t--global--font--weight--body);
10
+ --#{$helper-text}__item-icon--m-indeterminate--Color: var(--pf-t--global--icon--color--subtle);
11
+ --#{$helper-text}__item-text--m-indeterminate--Color: var(--pf-t--global--text--color--subtle);
12
+ --#{$helper-text}__item-icon--m-warning--Color: var(--pf-t--global--icon--color--status--warning--default);
13
+ --#{$helper-text}__item-text--m-warning--FontWeight: var(--pf-t--global--font--weight--body--bold);
14
+ --#{$helper-text}__item-icon--m-success--Color: var(--pf-t--global--icon--color--status--success--default);
15
+ --#{$helper-text}__item-text--m-success--FontWeight: var(--pf-t--global--font--weight--body--bold);
16
+ --#{$helper-text}__item-icon--m-error--Color: var(--pf-t--global--icon--color--status--danger--default);
17
+ --#{$helper-text}__item-text--m-error--FontWeight: var(--pf-t--global--font--weight--body--bold);
18
18
 
19
19
  // dynamic
20
- --#{$helper-text}--m-dynamic__item-icon--Color: var(--#{$pf-global}--Color--100);
21
- --#{$helper-text}--m-dynamic__item-text--Color: var(--#{$pf-global}--Color--100);
22
- --#{$helper-text}--m-dynamic--m-indeterminate__item-icon--Color: var(--#{$pf-global}--Color--200);
23
- --#{$helper-text}--m-dynamic--m-indeterminate__item-text--Color: var(--#{$pf-global}--Color--200);
24
- --#{$helper-text}--m-dynamic--m-warning__item-icon--Color: var(--#{$pf-global}--warning-color--100);
25
- --#{$helper-text}--m-dynamic--m-warning__item-text--Color: var(--#{$pf-global}--Color--200);
26
- --#{$helper-text}--m-dynamic--m-success__item-icon--Color: var(--#{$pf-global}--success-color--100);
27
- --#{$helper-text}--m-dynamic--m-success__item-text--Color: var(--#{$pf-global}--Color--200);
28
- --#{$helper-text}--m-dynamic--m-error__item-icon--Color: var(--#{$pf-global}--danger-color--100);
29
- --#{$helper-text}--m-dynamic--m-error__item-text--Color: var(--#{$pf-global}--Color--100);
20
+ --#{$helper-text}--m-dynamic__item-icon--Color: var(--pf-t--global--icon--color--regular);
21
+ --#{$helper-text}--m-dynamic--m-indeterminate__item-icon--Color: var(--pf-t--global--icon--color--subtle);
22
+ --#{$helper-text}--m-dynamic--m-indeterminate__item-text--Color: var(--pf-t--global--text--color--subtle);
23
+ --#{$helper-text}--m-dynamic--m-warning__item-icon--Color: var(--pf-t--global--icon--color--status--warning--default);
24
+ --#{$helper-text}--m-dynamic--m-warning__item-text--FontWeight: var(--pf-t--global--font--weight--body--bold);
25
+ --#{$helper-text}--m-dynamic--m-success__item-icon--Color: var(--pf-t--global--icon--color--status--success--default);
26
+ --#{$helper-text}--m-dynamic--m-error__item-icon--Color: var(--pf-t--global--icon--color--status--danger--default);
30
27
 
31
28
  // icon
32
- --#{$helper-text}__item-icon--MarginRight: var(--#{$pf-global}--spacer--xs);
33
-
29
+ --#{$helper-text}__item-icon--MarginRight: var(--pf-t--global--spacer--xs);
30
+ }
31
+ .#{$helper-text} {
34
32
  // text
35
33
 
36
34
  display: grid;
@@ -45,6 +43,8 @@
45
43
 
46
44
  .#{$helper-text}__item {
47
45
  display: flex;
46
+ font-weight: var(--#{$helper-text}__item-text--FontWeight);
47
+
48
48
 
49
49
  &.pf-m-indeterminate {
50
50
  --#{$helper-text}__item-icon--Color: var(--#{$helper-text}__item-icon--m-indeterminate--Color);
@@ -54,28 +54,24 @@
54
54
  }
55
55
 
56
56
  &.pf-m-warning {
57
+ --#{$helper-text}__item-text--FontWeight: var(--#{$helper-text}__item-text--m-warning--FontWeight);
57
58
  --#{$helper-text}__item-icon--Color: var(--#{$helper-text}__item-icon--m-warning--Color);
58
- --#{$helper-text}__item-text--Color: var(--#{$helper-text}__item-text--m-warning--Color);
59
59
  --#{$helper-text}--m-dynamic__item-icon--Color: var(--#{$helper-text}--m-dynamic--m-warning__item-icon--Color);
60
- --#{$helper-text}--m-dynamic__item-text--Color: var(--#{$helper-text}--m-dynamic--m-warning__item-text--Color);
61
60
  }
62
61
 
63
62
  &.pf-m-success {
63
+ --#{$helper-text}__item-text--FontWeight: var(--#{$helper-text}__item-text--m-success--FontWeight);
64
64
  --#{$helper-text}__item-icon--Color: var(--#{$helper-text}__item-icon--m-success--Color);
65
- --#{$helper-text}__item-text--Color: var(--#{$helper-text}__item-text--m-success--Color);
66
- --#{$helper-text}--m-dynamic__item-icon--Color: var(--#{$helper-text}--m-dynamic--m-success__item-icon--Color);
67
- --#{$helper-text}--m-dynamic__item-text--Color: var(--#{$helper-text}--m-dynamic--m-success__item-text--Color);
65
+ --#{$helper-text}--m-dynamic__item-icon--Color: var(--#{$helper-text}--m-dynamic--m-success__item-icon--Color);
68
66
  }
69
67
 
70
68
  &.pf-m-error {
69
+ --#{$helper-text}__item-text--FontWeight: var(--#{$helper-text}__item-text--m-error--FontWeight);
71
70
  --#{$helper-text}__item-icon--Color: var(--#{$helper-text}__item-icon--m-error--Color);
72
- --#{$helper-text}__item-text--Color: var(--#{$helper-text}__item-text--m-error--Color);
73
71
  --#{$helper-text}--m-dynamic__item-icon--Color: var(--#{$helper-text}--m-dynamic--m-error__item-icon--Color);
74
- --#{$helper-text}--m-dynamic__item-text--Color: var(--#{$helper-text}--m-dynamic--m-error__item-text--Color);
75
72
  }
76
73
 
77
74
  &.pf-m-dynamic {
78
- --#{$helper-text}__item-text--Color: var(--#{$helper-text}--m-dynamic__item-text--Color);
79
75
  --#{$helper-text}__item-icon--Color: var(--#{$helper-text}--m-dynamic__item-icon--Color);
80
76
  }
81
77
  }
@@ -89,9 +85,3 @@
89
85
  color: var(--#{$helper-text}__item-text--Color);
90
86
  }
91
87
 
92
- // stylelint-disable no-invalid-position-at-import-rule
93
- @import "themes/dark/helper-text";
94
-
95
- @include pf-v5-theme-dark {
96
- @include pf-v5-theme-dark-helper-text;
97
- }
@@ -6,116 +6,85 @@
6
6
  appearance: none;
7
7
  }
8
8
 
9
- .pf-v5-c-pagination {
9
+ :root {
10
10
  --pf-v5-c-pagination--inset: 0;
11
- --pf-v5-c-pagination--PaddingRight: var(--pf-v5-c-pagination--inset);
12
- --pf-v5-c-pagination--PaddingLeft: var(--pf-v5-c-pagination--inset);
13
- --pf-v5-c-pagination--m-page-insets--inset: var(--pf-v5-global--spacer--md);
14
- --pf-v5-c-pagination--m-page-insets--xl--inset: var(--pf-v5-global--spacer--lg);
15
- --pf-v5-c-pagination--child--MarginRight: var(--pf-v5-global--spacer--lg);
16
- --pf-v5-c-pagination--m-bottom--child--MarginRight: 0;
17
- --pf-v5-c-pagination--m-bottom--child--md--MarginRight: var(--pf-v5-global--spacer--lg);
18
- --pf-v5-c-pagination--m-compact--child--MarginRight: var(--pf-v5-global--spacer--sm);
19
- --pf-v5-c-pagination--c-menu-toggle--FontSize: var(--pf-v5-global--FontSize--sm);
11
+ --pf-v5-c-pagination--ColumnGap: var(--pf-t--global--spacer--lg);
12
+ --pf-v5-c-pagination--m-page-insets--inset: var(--pf-t--global--spacer--md);
13
+ --pf-v5-c-pagination--m-page-insets--xl--inset: var(--pf-t--global--spacer--lg);
20
14
  --pf-v5-c-pagination__nav--Display: none;
21
15
  --pf-v5-c-pagination--m-display-summary__nav--Display: none;
22
16
  --pf-v5-c-pagination--m-display-full__nav--Display: inline-flex;
23
- --pf-v5-c-pagination__nav-control--c-button--PaddingRight: var(--pf-v5-global--spacer--sm);
24
- --pf-v5-c-pagination__nav-control--c-button--PaddingLeft: var(--pf-v5-global--spacer--sm);
25
- --pf-v5-c-pagination__nav-control--c-button--FontSize: var(--pf-v5-global--FontSize--md);
26
- --pf-v5-c-pagination--m-bottom__nav-control--c-button--OutlineOffset: calc(var(--pf-v5-global--spacer--xs) * -1);
27
- --pf-v5-c-pagination--m-bottom__nav-control--c-button--PaddingTop: var(--pf-v5-global--spacer--md);
28
- --pf-v5-c-pagination--m-bottom__nav-control--c-button--PaddingBottom: var(--pf-v5-global--spacer--md);
29
- --pf-v5-c-pagination--m-bottom__nav-control--c-button--PaddingRight: var(--pf-v5-global--spacer--md);
30
- --pf-v5-c-pagination--m-bottom__nav-control--c-button--md--PaddingTop: var(--pf-v5-global--spacer--form-element);
31
- --pf-v5-c-pagination--m-bottom__nav-control--c-button--md--PaddingRight: var(--pf-v5-global--spacer--sm);
32
- --pf-v5-c-pagination--m-bottom__nav-control--c-button--md--PaddingBottom: var(--pf-v5-global--spacer--form-element);
33
- --pf-v5-c-pagination--m-bottom__nav-control--c-button--md--PaddingLeft: var(--pf-v5-global--spacer--sm);
34
- --pf-v5-c-pagination--m-compact__nav-control--nav-control--MarginLeft: var(--pf-v5-global--spacer--md);
35
- --pf-v5-c-pagination__nav-page-select--FontSize: var(--pf-v5-global--FontSize--sm);
36
- --pf-v5-c-pagination__nav-page-select--PaddingLeft: var(--pf-v5-global--spacer--md);
37
- --pf-v5-c-pagination__nav-page-select--PaddingRight: var(--pf-v5-global--spacer--md);
38
- --pf-v5-c-pagination__nav-page-select--child--MarginRight: var(--pf-v5-global--spacer--xs);
39
- --pf-v5-c-pagination__nav-page-select--c-form-control--width-base: calc(var(--pf-v5-global--spacer--sm) * 2 + var(--pf-v5-global--BorderWidth--sm) * 2);
17
+ --pf-v5-c-pagination__nav--ColumnGap: var(--pf-t--global--spacer--sm);
18
+ --pf-v5-c-pagination__nav-page-select--FontSize: var(--pf-t--global--font--size--body--md);
19
+ --pf-v5-c-pagination__nav-page-select--ColumnGap: var(--pf-t--global--spacer--sm);
20
+ --pf-v5-c-pagination__nav-page-select--c-form-control--width-base: calc(var(--pf-t--global--spacer--sm) * 2 + var(--pf-t--global--border--width--100) * 2);
40
21
  --pf-v5-c-pagination__nav-page-select--c-form-control--width-chars: 2;
41
22
  --pf-v5-c-pagination__nav-page-select--c-form-control--Width: calc(var(--pf-v5-c-pagination__nav-page-select--c-form-control--width-base) + (var(--pf-v5-c-pagination__nav-page-select--c-form-control--width-chars) * 1ch));
42
23
  --pf-v5-c-pagination__total-items--Display: block;
43
24
  --pf-v5-c-pagination--m-display-summary__total-items--Display: block;
44
25
  --pf-v5-c-pagination--m-display-full__total-items--Display: none;
45
- --pf-v5-c-pagination--m-sticky--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
46
- --pf-v5-c-pagination--m-sticky--BoxShadow: var(--pf-v5-global--BoxShadow--sm-bottom);
47
- --pf-v5-c-pagination--m-sticky--md--PaddingTop: var(--pf-v5-global--spacer--md);
48
- --pf-v5-c-pagination--m-sticky--md--PaddingRight: var(--pf-v5-global--spacer--md);
49
- --pf-v5-c-pagination--m-sticky--md--PaddingBottom: var(--pf-v5-global--spacer--md);
50
- --pf-v5-c-pagination--m-sticky--md--PaddingLeft: var(--pf-v5-global--spacer--md);
51
- --pf-v5-c-pagination--m-sticky--ZIndex: var(--pf-v5-global--ZIndex--xs);
26
+ --pf-v5-c-pagination--m-sticky--BackgroundColor: var(--pf-t--global--background--color--primary--default);
27
+ --pf-v5-c-pagination--m-sticky--BoxShadow: var(--pf-t--global--box-shadow--sm--bottom);
28
+ --pf-v5-c-pagination--m-sticky--PaddingTop: var(--pf-t--global--spacer--md);
29
+ --pf-v5-c-pagination--m-sticky--PaddingRight: var(--pf-t--global--spacer--lg);
30
+ --pf-v5-c-pagination--m-sticky--PaddingBottom: var(--pf-t--global--spacer--md);
31
+ --pf-v5-c-pagination--m-sticky--PaddingLeft: var(--pf-t--global--spacer--lg);
32
+ --pf-v5-c-pagination--m-sticky--ZIndex: 100;
52
33
  --pf-v5-c-pagination--m-sticky--Top: 0;
53
- --pf-v5-c-pagination--m-bottom--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
54
- --pf-v5-c-pagination--m-bottom--BoxShadow: var(--pf-v5-global--BoxShadow--sm-top);
34
+ --pf-v5-c-pagination--m-bottom--BackgroundColor: var(--pf-t--global--background--color--primary--default);
35
+ --pf-v5-c-pagination--m-bottom--BoxShadow: var(--pf-t--global--box-shadow--sm--top);
55
36
  --pf-v5-c-pagination--m-bottom--Bottom: 0;
56
- --pf-v5-c-pagination--m-bottom--md--PaddingTop: var(--pf-v5-global--spacer--md);
57
- --pf-v5-c-pagination--m-bottom--md--PaddingRight: var(--pf-v5-global--spacer--md);
58
- --pf-v5-c-pagination--m-bottom--md--PaddingBottom: var(--pf-v5-global--spacer--md);
59
- --pf-v5-c-pagination--m-bottom--md--PaddingLeft: var(--pf-v5-global--spacer--md);
60
- --pf-v5-c-pagination--m-bottom--xl--PaddingRight: var(--pf-v5-global--spacer--lg);
61
- --pf-v5-c-pagination--m-bottom--xl--PaddingLeft: var(--pf-v5-global--spacer--lg);
62
- --pf-v5-c-pagination--m-bottom--m-sticky--BoxShadow: var(--pf-v5-global--BoxShadow--sm-top);
63
- --pf-v5-c-pagination--c-menu-toggle--Display: none;
64
- --pf-v5-c-pagination--m-display-summary--c-menu-toggle--Display: none;
65
- --pf-v5-c-pagination--m-display-full--c-menu-toggle--Display: inline-flex;
66
- display: flex;
67
- flex-wrap: wrap;
68
- align-items: center;
69
- justify-content: flex-end;
70
- padding-inline-start: var(--pf-v5-c-pagination--PaddingLeft);
71
- padding-inline-end: var(--pf-v5-c-pagination--PaddingRight);
37
+ --pf-v5-c-pagination--m-bottom--PaddingRight: var(--pf-t--global--spacer--lg);
38
+ --pf-v5-c-pagination--m-bottom--PaddingLeft: var(--pf-t--global--spacer--lg);
39
+ --pf-v5-c-pagination--m-bottom--md--PaddingTop: var(--pf-t--global--spacer--md);
40
+ --pf-v5-c-pagination--m-bottom--md--PaddingBottom: var(--pf-t--global--spacer--md);
41
+ --pf-v5-c-pagination--m-bottom--xl--PaddingRight: var(--pf-t--global--spacer--lg);
42
+ --pf-v5-c-pagination--m-bottom--xl--PaddingLeft: var(--pf-t--global--spacer--lg);
43
+ --pf-v5-c-pagination--m-bottom--m-sticky--BoxShadow: var(--pf-t--global--box-shadow--sm--top);
44
+ --pf-v5-c-pagination__page-menu--Display: none;
45
+ --pf-v5-c-pagination--m-display-summary__page-menu--Display: none;
46
+ --pf-v5-c-pagination--m-display-full__page-menu--Display: inline-flex;
72
47
  }
73
48
  @media screen and (min-width: 768px) {
74
- .pf-v5-c-pagination {
75
- --pf-v5-c-pagination--m-bottom__nav-control--c-button--PaddingTop: var(--pf-v5-c-pagination--m-bottom__nav-control--c-button--md--PaddingTop);
76
- --pf-v5-c-pagination--m-bottom__nav-control--c-button--PaddingRight: var(--pf-v5-c-pagination--m-bottom__nav-control--c-button--md--PaddingRight);
77
- --pf-v5-c-pagination--m-bottom__nav-control--c-button--PaddingBottom: var(--pf-v5-c-pagination--m-bottom__nav-control--c-button--md--PaddingBottom);
78
- --pf-v5-c-pagination--m-bottom__nav-control--c-button--PaddingLeft: var(--pf-v5-c-pagination--m-bottom__nav-control--c-button--md--PaddingLeft);
79
- --pf-v5-c-pagination--m-bottom--child--MarginRight: var(--pf-v5-c-pagination--m-bottom--child--md--MarginRight);
80
- --pf-v5-c-pagination--m-bottom__nav-control--c-button--OutlineOffset: 0;
49
+ :root {
81
50
  --pf-v5-c-pagination--m-bottom--BoxShadow: none;
82
- --pf-v5-c-pagination--c-menu-toggle--Display: inline-flex;
51
+ --pf-v5-c-pagination__page-menu--Display: inline-flex;
83
52
  --pf-v5-c-pagination__nav--Display: inline-flex;
84
53
  --pf-v5-c-pagination__total-items--Display: none;
85
54
  }
86
55
  }
87
56
  @media screen and (min-width: 1200px) {
88
- .pf-v5-c-pagination {
89
- --pf-v5-c-pagination--m-bottom--md--PaddingRight: var(--pf-v5-c-pagination--m-bottom--xl--PaddingRight);
90
- --pf-v5-c-pagination--m-bottom--md--PaddingLeft: var(--pf-v5-c-pagination--m-bottom--xl--PaddingLeft);
57
+ :root {
58
+ --pf-v5-c-pagination--m-bottom--PaddingRight: var(--pf-v5-c-pagination--m-bottom--xl--PaddingRight);
59
+ --pf-v5-c-pagination--m-bottom--PaddingLeft: var(--pf-v5-c-pagination--m-bottom--xl--PaddingLeft);
91
60
  --pf-v5-c-pagination__scroll-button--Width: var(--pf-v5-c-pagination__scroll-button--xl--Width);
92
61
  --pf-v5-c-pagination--m-page-insets--inset: var(--pf-v5-c-pagination--m-page-insets--xl--inset);
93
62
  }
94
63
  }
95
- .pf-v5-c-pagination > *:not(:last-child):not(.pf-v5-c-pagination__total-items) {
96
- margin-inline-end: var(--pf-v5-c-pagination--child--MarginRight);
64
+
65
+ .pf-v5-c-pagination {
66
+ display: flex;
67
+ flex-wrap: wrap;
68
+ column-gap: var(--pf-v5-c-pagination--ColumnGap);
69
+ align-items: center;
70
+ justify-content: flex-end;
71
+ padding-inline-start: var(--pf-v5-c-pagination--inset);
72
+ padding-inline-end: var(--pf-v5-c-pagination--inset);
97
73
  }
98
- .pf-v5-c-pagination .pf-v5-c-menu-toggle {
99
- display: var(--pf-v5-c-pagination--c-menu-toggle--Display);
100
- font-size: var(--pf-v5-c-pagination--c-menu-toggle--FontSize);
74
+ .pf-v5-c-pagination .pf-v5-c-pagination__page-menu {
75
+ display: var(--pf-v5-c-pagination__page-menu--Display);
101
76
  }
102
77
  .pf-v5-c-pagination.pf-m-bottom {
103
- --pf-v5-c-pagination--child--MarginRight: var(--pf-v5-c-pagination--m-bottom--child--MarginRight);
104
- --pf-v5-c-pagination__nav-control--c-button--PaddingRight: var(--pf-v5-c-pagination--m-bottom__nav-control--c-button--PaddingRight);
105
- --pf-v5-c-pagination__nav-control--c-button--PaddingLeft: var(--pf-v5-c-pagination--m-bottom__nav-control--c-button--PaddingRight);
106
78
  --pf-v5-c-pagination--m-sticky--BoxShadow: var(--pf-v5-c-pagination--m-bottom--m-sticky--BoxShadow);
107
79
  --pf-v5-c-pagination--m-sticky--Top: auto;
108
80
  position: sticky;
109
81
  inset-block-end: var(--pf-v5-c-pagination--m-bottom--Bottom);
110
82
  justify-content: center;
83
+ padding-inline-start: var(--pf-v5-c-pagination--m-bottom--PaddingLeft);
84
+ padding-inline-end: var(--pf-v5-c-pagination--m-bottom--PaddingRight);
111
85
  background-color: var(--pf-v5-c-pagination--m-bottom--BackgroundColor);
112
86
  box-shadow: var(--pf-v5-c-pagination--m-bottom--BoxShadow);
113
87
  }
114
- .pf-v5-c-pagination.pf-m-bottom .pf-v5-c-pagination__nav-control .pf-v5-c-button {
115
- --pf-v5-c-button--PaddingTop: var(--pf-v5-c-pagination--m-bottom__nav-control--c-button--PaddingTop);
116
- --pf-v5-c-button--PaddingBottom: var(--pf-v5-c-pagination--m-bottom__nav-control--c-button--PaddingBottom);
117
- outline-offset: var(--pf-v5-c-pagination--m-bottom__nav-control--c-button--OutlineOffset);
118
- }
119
88
  .pf-v5-c-pagination.pf-m-bottom.pf-m-static {
120
89
  --pf-v5-c-pagination--m-bottom--MarginTop: 0;
121
90
  --pf-v5-c-pagination--m-bottom--BorderTopWidth: 0;
@@ -127,7 +96,7 @@
127
96
  .pf-v5-c-pagination.pf-m-bottom .pf-v5-c-pagination__nav-page-select {
128
97
  display: none;
129
98
  }
130
- .pf-v5-c-pagination.pf-m-bottom .pf-v5-c-menu-toggle {
99
+ .pf-v5-c-pagination.pf-m-bottom .pf-v5-c-pagination__page-menu {
131
100
  position: absolute;
132
101
  display: block;
133
102
  }
@@ -145,8 +114,6 @@
145
114
  justify-content: flex-end;
146
115
  padding-block-start: var(--pf-v5-c-pagination--m-bottom--md--PaddingTop);
147
116
  padding-block-end: var(--pf-v5-c-pagination--m-bottom--md--PaddingBottom);
148
- padding-inline-start: var(--pf-v5-c-pagination--m-bottom--md--PaddingLeft);
149
- padding-inline-end: var(--pf-v5-c-pagination--m-bottom--md--PaddingRight);
150
117
  }
151
118
  .pf-v5-c-pagination.pf-m-bottom .pf-v5-c-pagination__nav-control.pf-m-first,
152
119
  .pf-v5-c-pagination.pf-m-bottom .pf-v5-c-pagination__nav-control.pf-m-last,
@@ -156,7 +123,7 @@
156
123
  .pf-v5-c-pagination.pf-m-bottom .pf-v5-c-pagination__nav-page-select {
157
124
  display: inline-flex;
158
125
  }
159
- .pf-v5-c-pagination.pf-m-bottom .pf-v5-c-menu-toggle {
126
+ .pf-v5-c-pagination.pf-m-bottom .pf-v5-c-pagination__page-menu {
160
127
  position: relative;
161
128
  }
162
129
  .pf-v5-c-pagination.pf-m-bottom .pf-v5-c-pagination__nav {
@@ -176,23 +143,13 @@
176
143
  background-color: var(--pf-v5-c-pagination--m-sticky--BackgroundColor);
177
144
  box-shadow: var(--pf-v5-c-pagination--m-sticky--BoxShadow);
178
145
  }
179
- @media screen and (min-width: 768px) {
180
- .pf-v5-c-pagination.pf-m-sticky {
181
- padding-block-start: var(--pf-v5-c-pagination--m-sticky--md--PaddingTop);
182
- padding-block-end: var(--pf-v5-c-pagination--m-sticky--md--PaddingBottom);
183
- padding-inline-start: var(--pf-v5-c-pagination--m-sticky--md--PaddingLeft);
184
- padding-inline-end: var(--pf-v5-c-pagination--m-sticky--md--PaddingRight);
185
- }
186
- }
187
- .pf-v5-c-pagination.pf-m-compact {
188
- --pf-v5-c-pagination--child--MarginRight: var(--pf-v5-c-pagination--m-compact--child--MarginRight);
189
- }
190
146
  .pf-v5-c-pagination.pf-m-page-insets {
191
147
  --pf-v5-c-pagination--inset: var(--pf-v5-c-pagination--m-page-insets--inset);
192
148
  }
193
149
 
194
150
  .pf-v5-c-pagination__nav {
195
151
  display: var(--pf-v5-c-pagination__nav--Display);
152
+ column-gap: var(--pf-v5-c-pagination__nav--ColumnGap);
196
153
  justify-content: flex-end;
197
154
  }
198
155
 
@@ -200,28 +157,15 @@
200
157
  scale: -1 1;
201
158
  }
202
159
 
203
- .pf-v5-c-pagination__nav-control .pf-v5-c-button {
204
- padding-inline-start: var(--pf-v5-c-pagination__nav-control--c-button--PaddingLeft);
205
- padding-inline-end: var(--pf-v5-c-pagination__nav-control--c-button--PaddingRight);
206
- font-size: var(--pf-v5-c-pagination__nav-control--c-button--FontSize);
207
- }
208
- .pf-v5-c-pagination.pf-m-compact .pf-v5-c-pagination__nav-control + .pf-v5-c-pagination__nav-control {
209
- margin-inline-start: var(--pf-v5-c-pagination--m-compact__nav-control--nav-control--MarginLeft);
210
- }
211
-
212
160
  .pf-v5-c-pagination__nav-page-select {
213
161
  display: flex;
162
+ column-gap: var(--pf-v5-c-pagination__nav-page-select--ColumnGap);
214
163
  align-items: center;
215
- padding-inline-start: var(--pf-v5-c-pagination__nav-page-select--PaddingLeft);
216
- padding-inline-end: var(--pf-v5-c-pagination__nav-page-select--PaddingRight);
217
164
  }
218
165
  .pf-v5-c-pagination__nav-page-select > * {
219
166
  font-size: var(--pf-v5-c-pagination__nav-page-select--FontSize);
220
167
  white-space: nowrap;
221
168
  }
222
- .pf-v5-c-pagination__nav-page-select > *:not(:last-child) {
223
- margin-inline-end: var(--pf-v5-c-pagination__nav-page-select--child--MarginRight);
224
- }
225
169
  .pf-v5-c-pagination__nav-page-select .pf-v5-c-form-control {
226
170
  width: var(--pf-v5-c-pagination__nav-page-select--c-form-control--Width);
227
171
  }
@@ -231,12 +175,12 @@
231
175
 
232
176
  .pf-v5-c-pagination.pf-m-display-summary {
233
177
  --pf-v5-c-pagination__nav--Display: var(--pf-v5-c-pagination--m-display-summary__nav--Display);
234
- --pf-v5-c-pagination--c-menu-toggle--Display: var(--pf-v5-c-pagination--m-display-summary--c-menu-toggle--Display);
178
+ --pf-v5-c-pagination__page-menu--Display: var(--pf-v5-c-pagination--m-display-summary__page-menu--Display);
235
179
  --pf-v5-c-pagination__total-items--Display: var(--pf-v5-c-pagination--m-display-summary__total-items--Display);
236
180
  }
237
181
  .pf-v5-c-pagination.pf-m-display-full {
238
182
  --pf-v5-c-pagination__nav--Display: var(--pf-v5-c-pagination--m-display-full__nav--Display);
239
- --pf-v5-c-pagination--c-menu-toggle--Display: var(--pf-v5-c-pagination--m-display-full--c-menu-toggle--Display);
183
+ --pf-v5-c-pagination__page-menu--Display: var(--pf-v5-c-pagination--m-display-full__page-menu--Display);
240
184
  --pf-v5-c-pagination__total-items--Display: var(--pf-v5-c-pagination--m-display-full__total-items--Display);
241
185
  }
242
186
  .pf-v5-c-pagination.pf-m-inset-none {
@@ -260,12 +204,12 @@
260
204
  @media (min-width: 576px) {
261
205
  .pf-v5-c-pagination.pf-m-display-summary-on-sm {
262
206
  --pf-v5-c-pagination__nav--Display: var(--pf-v5-c-pagination--m-display-summary__nav--Display);
263
- --pf-v5-c-pagination--c-menu-toggle--Display: var(--pf-v5-c-pagination--m-display-summary--c-menu-toggle--Display);
207
+ --pf-v5-c-pagination__page-menu--Display: var(--pf-v5-c-pagination--m-display-summary__page-menu--Display);
264
208
  --pf-v5-c-pagination__total-items--Display: var(--pf-v5-c-pagination--m-display-summary__total-items--Display);
265
209
  }
266
210
  .pf-v5-c-pagination.pf-m-display-full-on-sm {
267
211
  --pf-v5-c-pagination__nav--Display: var(--pf-v5-c-pagination--m-display-full__nav--Display);
268
- --pf-v5-c-pagination--c-menu-toggle--Display: var(--pf-v5-c-pagination--m-display-full--c-menu-toggle--Display);
212
+ --pf-v5-c-pagination__page-menu--Display: var(--pf-v5-c-pagination--m-display-full__page-menu--Display);
269
213
  --pf-v5-c-pagination__total-items--Display: var(--pf-v5-c-pagination--m-display-full__total-items--Display);
270
214
  }
271
215
  .pf-v5-c-pagination.pf-m-inset-none-on-sm {
@@ -290,12 +234,12 @@
290
234
  @media (min-width: 768px) {
291
235
  .pf-v5-c-pagination.pf-m-display-summary-on-md {
292
236
  --pf-v5-c-pagination__nav--Display: var(--pf-v5-c-pagination--m-display-summary__nav--Display);
293
- --pf-v5-c-pagination--c-menu-toggle--Display: var(--pf-v5-c-pagination--m-display-summary--c-menu-toggle--Display);
237
+ --pf-v5-c-pagination__page-menu--Display: var(--pf-v5-c-pagination--m-display-summary__page-menu--Display);
294
238
  --pf-v5-c-pagination__total-items--Display: var(--pf-v5-c-pagination--m-display-summary__total-items--Display);
295
239
  }
296
240
  .pf-v5-c-pagination.pf-m-display-full-on-md {
297
241
  --pf-v5-c-pagination__nav--Display: var(--pf-v5-c-pagination--m-display-full__nav--Display);
298
- --pf-v5-c-pagination--c-menu-toggle--Display: var(--pf-v5-c-pagination--m-display-full--c-menu-toggle--Display);
242
+ --pf-v5-c-pagination__page-menu--Display: var(--pf-v5-c-pagination--m-display-full__page-menu--Display);
299
243
  --pf-v5-c-pagination__total-items--Display: var(--pf-v5-c-pagination--m-display-full__total-items--Display);
300
244
  }
301
245
  .pf-v5-c-pagination.pf-m-inset-none-on-md {
@@ -320,12 +264,12 @@
320
264
  @media (min-width: 992px) {
321
265
  .pf-v5-c-pagination.pf-m-display-summary-on-lg {
322
266
  --pf-v5-c-pagination__nav--Display: var(--pf-v5-c-pagination--m-display-summary__nav--Display);
323
- --pf-v5-c-pagination--c-menu-toggle--Display: var(--pf-v5-c-pagination--m-display-summary--c-menu-toggle--Display);
267
+ --pf-v5-c-pagination__page-menu--Display: var(--pf-v5-c-pagination--m-display-summary__page-menu--Display);
324
268
  --pf-v5-c-pagination__total-items--Display: var(--pf-v5-c-pagination--m-display-summary__total-items--Display);
325
269
  }
326
270
  .pf-v5-c-pagination.pf-m-display-full-on-lg {
327
271
  --pf-v5-c-pagination__nav--Display: var(--pf-v5-c-pagination--m-display-full__nav--Display);
328
- --pf-v5-c-pagination--c-menu-toggle--Display: var(--pf-v5-c-pagination--m-display-full--c-menu-toggle--Display);
272
+ --pf-v5-c-pagination__page-menu--Display: var(--pf-v5-c-pagination--m-display-full__page-menu--Display);
329
273
  --pf-v5-c-pagination__total-items--Display: var(--pf-v5-c-pagination--m-display-full__total-items--Display);
330
274
  }
331
275
  .pf-v5-c-pagination.pf-m-inset-none-on-lg {
@@ -350,12 +294,12 @@
350
294
  @media (min-width: 1200px) {
351
295
  .pf-v5-c-pagination.pf-m-display-summary-on-xl {
352
296
  --pf-v5-c-pagination__nav--Display: var(--pf-v5-c-pagination--m-display-summary__nav--Display);
353
- --pf-v5-c-pagination--c-menu-toggle--Display: var(--pf-v5-c-pagination--m-display-summary--c-menu-toggle--Display);
297
+ --pf-v5-c-pagination__page-menu--Display: var(--pf-v5-c-pagination--m-display-summary__page-menu--Display);
354
298
  --pf-v5-c-pagination__total-items--Display: var(--pf-v5-c-pagination--m-display-summary__total-items--Display);
355
299
  }
356
300
  .pf-v5-c-pagination.pf-m-display-full-on-xl {
357
301
  --pf-v5-c-pagination__nav--Display: var(--pf-v5-c-pagination--m-display-full__nav--Display);
358
- --pf-v5-c-pagination--c-menu-toggle--Display: var(--pf-v5-c-pagination--m-display-full--c-menu-toggle--Display);
302
+ --pf-v5-c-pagination__page-menu--Display: var(--pf-v5-c-pagination--m-display-full__page-menu--Display);
359
303
  --pf-v5-c-pagination__total-items--Display: var(--pf-v5-c-pagination--m-display-full__total-items--Display);
360
304
  }
361
305
  .pf-v5-c-pagination.pf-m-inset-none-on-xl {
@@ -380,12 +324,12 @@
380
324
  @media (min-width: 1450px) {
381
325
  .pf-v5-c-pagination.pf-m-display-summary-on-2xl {
382
326
  --pf-v5-c-pagination__nav--Display: var(--pf-v5-c-pagination--m-display-summary__nav--Display);
383
- --pf-v5-c-pagination--c-menu-toggle--Display: var(--pf-v5-c-pagination--m-display-summary--c-menu-toggle--Display);
327
+ --pf-v5-c-pagination__page-menu--Display: var(--pf-v5-c-pagination--m-display-summary__page-menu--Display);
384
328
  --pf-v5-c-pagination__total-items--Display: var(--pf-v5-c-pagination--m-display-summary__total-items--Display);
385
329
  }
386
330
  .pf-v5-c-pagination.pf-m-display-full-on-2xl {
387
331
  --pf-v5-c-pagination__nav--Display: var(--pf-v5-c-pagination--m-display-full__nav--Display);
388
- --pf-v5-c-pagination--c-menu-toggle--Display: var(--pf-v5-c-pagination--m-display-full--c-menu-toggle--Display);
332
+ --pf-v5-c-pagination__page-menu--Display: var(--pf-v5-c-pagination--m-display-full__page-menu--Display);
389
333
  --pf-v5-c-pagination__total-items--Display: var(--pf-v5-c-pagination--m-display-full__total-items--Display);
390
334
  }
391
335
  .pf-v5-c-pagination.pf-m-inset-none-on-2xl {
@@ -406,8 +350,4 @@
406
350
  .pf-v5-c-pagination.pf-m-inset-2xl-on-2xl {
407
351
  --pf-v5-c-pagination--inset: var(--pf-v5-global--spacer--2xl);
408
352
  }
409
- }
410
-
411
- :where(.pf-v5-theme-dark) .pf-v5-c-pagination {
412
- --pf-v5-c-pagination--m-sticky--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
413
353
  }