@patternfly/react-styles 4.15.1 → 4.18.4

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 (31) hide show
  1. package/CHANGELOG.md +126 -0
  2. package/css/components/ContextSelector/context-selector.css +68 -0
  3. package/css/components/ContextSelector/context-selector.d.ts +2 -0
  4. package/css/components/ContextSelector/context-selector.js +2 -0
  5. package/css/components/Dropdown/dropdown.css +1 -1
  6. package/css/components/Masthead/masthead.css +1 -0
  7. package/css/components/Nav/nav.css +41 -2
  8. package/css/components/Page/page.css +26 -3
  9. package/css/components/Page/page.d.ts +2 -0
  10. package/css/components/Page/page.js +2 -0
  11. package/css/components/Panel/panel.css +78 -0
  12. package/css/components/Panel/panel.d.ts +14 -0
  13. package/css/components/Panel/panel.js +15 -0
  14. package/css/components/Popover/popover.css +58 -2
  15. package/css/components/Popover/popover.d.ts +10 -1
  16. package/css/components/Popover/popover.js +10 -1
  17. package/css/components/Table/table-scrollable.css +6 -8
  18. package/css/components/Table/table-scrollable.d.ts +1 -0
  19. package/css/components/Table/table-scrollable.js +1 -0
  20. package/css/components/Table/table.css +54 -4
  21. package/css/components/Table/table.d.ts +5 -0
  22. package/css/components/Table/table.js +5 -0
  23. package/css/components/TextInputGroup/text-input-group.css +4 -4
  24. package/css/components/Toolbar/toolbar.css +5 -5
  25. package/css/components/Toolbar/toolbar.d.ts +1 -1
  26. package/css/components/Toolbar/toolbar.js +1 -1
  27. package/css/components/Tooltip/tooltip.css +4 -4
  28. package/css/docs/components/Nav/examples/Navigation.css +4 -0
  29. package/css/docs/components/Nav/examples/Navigation.d.ts +1 -0
  30. package/css/docs/components/Nav/examples/Navigation.js +1 -0
  31. package/package.json +3 -3
package/CHANGELOG.md CHANGED
@@ -3,6 +3,132 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ## 4.18.4 (2021-10-26)
7
+
8
+
9
+ ### Bug Fixes
10
+
11
+ * add transformer package ([#6507](https://github.com/patternfly/patternfly-react/issues/6507)) ([daffd28](https://github.com/patternfly/patternfly-react/commit/daffd2864388abe63e625f962a8b38c2b7056209))
12
+
13
+
14
+
15
+
16
+
17
+ ## 4.18.3 (2021-10-26)
18
+
19
+
20
+ ### Bug Fixes
21
+
22
+ * **transformer:** publish transformer in patternfly org ([#6506](https://github.com/patternfly/patternfly-react/issues/6506)) ([b739af3](https://github.com/patternfly/patternfly-react/commit/b739af318400b41d4e9a53bdff6232ecc176916e))
23
+
24
+
25
+
26
+
27
+
28
+ ## 4.18.2 (2021-10-26)
29
+
30
+
31
+ ### Bug Fixes
32
+
33
+ * **readme:** update react-core readme ([#6505](https://github.com/patternfly/patternfly-react/issues/6505)) ([d4f9a11](https://github.com/patternfly/patternfly-react/commit/d4f9a114584eea7ab67873f199e80b348886e14b))
34
+
35
+
36
+
37
+
38
+
39
+ ## 4.18.1 (2021-10-26)
40
+
41
+
42
+ ### Bug Fixes
43
+
44
+ * **DualListSelector:** account for duplicate folders ([#6499](https://github.com/patternfly/patternfly-react/issues/6499)) ([e531e68](https://github.com/patternfly/patternfly-react/commit/e531e68e7adc58459b3630f5c915ed69e3021012))
45
+
46
+
47
+
48
+
49
+
50
+ # 4.18.0 (2021-10-26)
51
+
52
+
53
+ ### Features
54
+
55
+ * **toolbar:** add sticky top modifier to toolbar ([#6447](https://github.com/patternfly/patternfly-react/issues/6447)) ([fe7605a](https://github.com/patternfly/patternfly-react/commit/fe7605a67428b43ec00b3cb2117270296576737c))
56
+
57
+
58
+
59
+
60
+
61
+ ## 4.17.1 (2021-10-26)
62
+
63
+
64
+ ### Bug Fixes
65
+
66
+ * **types:** SelectOptionProp made optional ([#6503](https://github.com/patternfly/patternfly-react/issues/6503)) ([716ac80](https://github.com/patternfly/patternfly-react/commit/716ac80e2414507d589ee3002fc0cea0068ae59c))
67
+
68
+
69
+
70
+
71
+
72
+ # 4.17.0 (2021-10-26)
73
+
74
+
75
+ ### Features
76
+
77
+ * **TextInputGroup:** add text input group ([#6482](https://github.com/patternfly/patternfly-react/issues/6482)) ([a02fd4f](https://github.com/patternfly/patternfly-react/commit/a02fd4fe3345245b2252ee5a261f5b1460490642)), closes [patternfly/patternfly-react#6409](https://github.com/patternfly/patternfly-react/issues/6409)
78
+
79
+
80
+
81
+
82
+
83
+ ## 4.16.4 (2021-10-26)
84
+
85
+
86
+ ### Bug Fixes
87
+
88
+ * **KebabToggle:** adds event to onToggle definition ([#6490](https://github.com/patternfly/patternfly-react/issues/6490)) ([0441575](https://github.com/patternfly/patternfly-react/commit/04415757917062aa13c06b34bd94ef38c2334088))
89
+
90
+
91
+
92
+
93
+
94
+ ## 4.16.3 (2021-10-26)
95
+
96
+
97
+ ### Bug Fixes
98
+
99
+ * **Modal:** test clean up ([#6489](https://github.com/patternfly/patternfly-react/issues/6489)) ([c8eaa7c](https://github.com/patternfly/patternfly-react/commit/c8eaa7c838fbedb98ea0f38e4f535488040a72e2))
100
+
101
+
102
+
103
+
104
+
105
+ ## 4.16.2 (2021-10-25)
106
+
107
+ **Note:** Version bump only for package @patternfly/react-styles
108
+
109
+
110
+
111
+
112
+
113
+ ## 4.16.1 (2021-10-25)
114
+
115
+ **Note:** Version bump only for package @patternfly/react-styles
116
+
117
+
118
+
119
+
120
+
121
+ # 4.16.0 (2021-10-25)
122
+
123
+
124
+ ### Features
125
+
126
+ * **Tabs:** Added support for tab content body with padding, added tabs open and tab secondary tabs demos ([#6484](https://github.com/patternfly/patternfly-react/issues/6484)) ([0ccbe9d](https://github.com/patternfly/patternfly-react/commit/0ccbe9d1e6e0dac0730466c92a90fe2cd9f6560d))
127
+
128
+
129
+
130
+
131
+
6
132
  ## 4.15.1 (2021-10-21)
7
133
 
8
134
  **Note:** Version bump only for package @patternfly/react-styles
@@ -20,6 +20,7 @@
20
20
  --pf-c-context-selector__toggle--BorderBottomColor: var(--pf-global--BorderColor--200);
21
21
  --pf-c-context-selector__toggle--BorderLeftColor: var(--pf-global--BorderColor--300);
22
22
  --pf-c-context-selector__toggle--Color: var(--pf-global--Color--100);
23
+ --pf-c-context-selector__toggle--hover--BorderBottomWidth: var(--pf-c-context-selector__toggle--BorderWidth);
23
24
  --pf-c-context-selector__toggle--hover--BorderBottomColor: var(--pf-global--active-color--100);
24
25
  --pf-c-context-selector__toggle--active--BorderBottomWidth: var(--pf-global--BorderWidth--md);
25
26
  --pf-c-context-selector__toggle--active--BorderBottomColor: var(--pf-global--active-color--100);
@@ -72,11 +73,56 @@
72
73
  --pf-c-context-selector--m-full-height__toggle--hover--BorderBottomWidth: var(--pf-global--BorderWidth--xl);
73
74
  --pf-c-context-selector--m-full-height__toggle--active--BorderBottomWidth: var(--pf-global--BorderWidth--xl);
74
75
  --pf-c-context-selector--m-full-height__toggle--expanded--BorderBottomWidth: var(--pf-global--BorderWidth--xl);
76
+ --pf-c-context-selector--m-large__toggle--PaddingTop: var(--pf-global--spacer--md);
77
+ --pf-c-context-selector--m-large__toggle--PaddingBottom: var(--pf-global--spacer--md);
78
+ --pf-c-context-selector--m-large__toggle--hover--BorderBottomWidth: var(--pf-global--BorderWidth--xl);
79
+ --pf-c-context-selector--m-large__toggle--active--BorderBottomWidth: var(--pf-global--BorderWidth--xl);
80
+ --pf-c-context-selector--m-large__toggle--expanded--BorderBottomWidth: var(--pf-global--BorderWidth--xl);
81
+ --pf-c-context-selector--m-page-insets__toggle--PaddingRight: var(--pf-global--spacer--md);
82
+ --pf-c-context-selector--m-page-insets__toggle--PaddingLeft: var(--pf-global--spacer--md);
83
+ --pf-c-context-selector--m-page-insets__toggle--xl--PaddingRight: var(--pf-global--spacer--lg);
84
+ --pf-c-context-selector--m-page-insets__toggle--xl--PaddingLeft: var(--pf-global--spacer--lg);
85
+ --pf-c-context-selector--m-page-insets__menu-list-item--PaddingRight: var(--pf-global--spacer--md);
86
+ --pf-c-context-selector--m-page-insets__menu-list-item--PaddingLeft: var(--pf-global--spacer--md);
87
+ --pf-c-context-selector--m-page-insets__menu-list-item--xl--PaddingRight: var(--pf-global--spacer--lg);
88
+ --pf-c-context-selector--m-page-insets__menu-list-item--xl--PaddingLeft: var(--pf-global--spacer--lg);
89
+ --pf-c-context-selector--m-page-insets__menu-search--PaddingRight: var(--pf-global--spacer--md);
90
+ --pf-c-context-selector--m-page-insets__menu-search--PaddingLeft: var(--pf-global--spacer--md);
91
+ --pf-c-context-selector--m-page-insets__menu-search--xl--PaddingRight: var(--pf-global--spacer--lg);
92
+ --pf-c-context-selector--m-page-insets__menu-search--xl--PaddingLeft: var(--pf-global--spacer--lg);
93
+ --pf-c-context-selector--m-page-insets__menu-footer--PaddingRight: var(--pf-global--spacer--md);
94
+ --pf-c-context-selector--m-page-insets__menu-footer--PaddingLeft: var(--pf-global--spacer--md);
95
+ --pf-c-context-selector--m-page-insets__menu-footer--xl--PaddingRight: var(--pf-global--spacer--lg);
96
+ --pf-c-context-selector--m-page-insets__menu-footer--xl--PaddingLeft: var(--pf-global--spacer--lg);
97
+ --pf-c-context-selector--m-page-insets__toggle--m-plain--PaddingRight: var(--pf-global--spacer--md);
98
+ --pf-c-context-selector--m-page-insets__toggle--m-plain--PaddingLeft: var(--pf-global--spacer--md);
99
+ --pf-c-context-selector--m-page-insets__toggle--m-plain--xl--PaddingRight: var(--pf-global--spacer--lg);
100
+ --pf-c-context-selector--m-page-insets__toggle--m-plain--xl--PaddingLeft: var(--pf-global--spacer--lg);
101
+ --pf-c-context-selector--m-page-insets__toggle--m-plain--m-text--PaddingRight: var(--pf-global--spacer--md);
102
+ --pf-c-context-selector--m-page-insets__toggle--m-plain--m-text--PaddingLeft: var(--pf-global--spacer--md);
103
+ --pf-c-context-selector--m-page-insets__toggle--m-plain--m-text--xl--PaddingRight: var(--pf-global--spacer--lg);
104
+ --pf-c-context-selector--m-page-insets__toggle--m-plain--m-text--xl--PaddingLeft: var(--pf-global--spacer--lg);
75
105
  position: relative;
76
106
  display: inline-block;
77
107
  width: var(--pf-c-context-selector--Width);
78
108
  max-width: 100%;
79
109
  }
110
+ @media screen and (min-width: 1200px) {
111
+ .pf-c-context-selector {
112
+ --pf-c-context-selector--m-page-insets__toggle--PaddingRight: var(--pf-c-context-selector--m-page-insets__toggle--xl--PaddingRight);
113
+ --pf-c-context-selector--m-page-insets__toggle--PaddingLeft: var(--pf-c-context-selector--m-page-insets__toggle--xl--PaddingLeft);
114
+ --pf-c-context-selector--m-page-insets__menu-list-item--PaddingRight: var(--pf-c-context-selector--m-page-insets__menu-list-item--xl--PaddingRight);
115
+ --pf-c-context-selector--m-page-insets__menu-list-item--PaddingLeft: var(--pf-c-context-selector--m-page-insets__menu-list-item--xl--PaddingLeft);
116
+ --pf-c-context-selector--m-page-insets__menu-search--PaddingRight: var(--pf-c-context-selector--m-page-insets__menu-search--xl--PaddingRight);
117
+ --pf-c-context-selector--m-page-insets__menu-search--PaddingLeft: var(--pf-c-context-selector--m-page-insets__menu-search--xl--PaddingLeft);
118
+ --pf-c-context-selector--m-page-insets__menu-footer--PaddingRight: var(--pf-c-context-selector--m-page-insets__menu-footer--xl--PaddingRight);
119
+ --pf-c-context-selector--m-page-insets__menu-footer--PaddingLeft: var(--pf-c-context-selector--m-page-insets__menu-footer--xl--PaddingLeft);
120
+ --pf-c-context-selector--m-page-insets__toggle--m-plain--PaddingRight: var(--pf-c-context-selector--m-page-insets__toggle--m-plain--xl--PaddingRight);
121
+ --pf-c-context-selector--m-page-insets__toggle--m-plain--PaddingLeft: var(--pf-c-context-selector--m-page-insets__toggle--m-plain--xl--PaddingLeft);
122
+ --pf-c-context-selector--m-page-insets__toggle--m-plain--m-text--PaddingRight: var(--pf-c-context-selector--m-page-insets__toggle--m-plain--m-text--xl--PaddingRight);
123
+ --pf-c-context-selector--m-page-insets__toggle--m-plain--m-text--PaddingLeft: var(--pf-c-context-selector--m-page-insets__toggle--m-plain--m-text--xl--PaddingLeft);
124
+ }
125
+ }
80
126
  .pf-c-context-selector.pf-m-full-height {
81
127
  --pf-c-context-selector__toggle--active--BorderBottomWidth: var(--pf-c-context-selector--m-full-height__toggle--active--BorderBottomWidth);
82
128
  --pf-c-context-selector__toggle--expanded--BorderBottomWidth: var(--pf-c-context-selector--m-full-height__toggle--expanded--BorderBottomWidth);
@@ -95,6 +141,27 @@
95
141
  .pf-c-context-selector.pf-m-full-height:hover .pf-c-context-selector__toggle::before {
96
142
  border-bottom-width: var(--pf-c-context-selector--m-full-height__toggle--hover--BorderBottomWidth);
97
143
  }
144
+ .pf-c-context-selector.pf-m-large {
145
+ --pf-c-context-selector__toggle--PaddingTop: var(--pf-c-context-selector--m-large__toggle--PaddingTop);
146
+ --pf-c-context-selector__toggle--PaddingBottom: var(--pf-c-context-selector--m-large__toggle--PaddingBottom);
147
+ --pf-c-context-selector__toggle--hover--BorderBottomWidth: var(--pf-c-context-selector--m-large__toggle--hover--BorderBottomWidth);
148
+ --pf-c-context-selector__toggle--active--BorderBottomWidth: var(--pf-c-context-selector--m-large__toggle--active--BorderBottomWidth);
149
+ --pf-c-context-selector__toggle--expanded--BorderBottomWidth: var(--pf-c-context-selector--m-large__toggle--expanded--BorderBottomWidth);
150
+ }
151
+ .pf-c-context-selector.pf-m-page-insets {
152
+ --pf-c-context-selector__toggle--PaddingRight: var(--pf-c-context-selector--m-page-insets__toggle--PaddingRight);
153
+ --pf-c-context-selector__toggle--PaddingLeft: var(--pf-c-context-selector--m-page-insets__toggle--PaddingLeft);
154
+ --pf-c-context-selector__menu-list-item--PaddingRight: var(--pf-c-context-selector--m-page-insets__menu-list-item--PaddingRight);
155
+ --pf-c-context-selector__menu-list-item--PaddingLeft: var(--pf-c-context-selector--m-page-insets__menu-list-item--PaddingLeft);
156
+ --pf-c-context-selector__menu-search--PaddingRight: var(--pf-c-context-selector--m-page-insets__menu-search--PaddingRight);
157
+ --pf-c-context-selector__menu-search--PaddingLeft: var(--pf-c-context-selector--m-page-insets__menu-search--PaddingLeft);
158
+ --pf-c-context-selector__menu-footer--PaddingRight: var(--pf-c-context-selector--m-page-insets__menu-footer--PaddingRight);
159
+ --pf-c-context-selector__menu-footer--PaddingLeft: var(--pf-c-context-selector--m-page-insets__menu-footer--PaddingLeft);
160
+ --pf-c-context-selector__toggle--m-plain--PaddingRight: var(--pf-c-context-selector--m-page-insets__toggle--m-plain--PaddingRight);
161
+ --pf-c-context-selector__toggle--m-plain--PaddingLeft: var(--pf-c-context-selector--m-page-insets__toggle--m-plain--PaddingLeft);
162
+ --pf-c-context-selector__toggle--m-plain--m-text--PaddingRight: var(--pf-c-context-selector--m-page-insets__toggle--m-plain--m-text--PaddingRight);
163
+ --pf-c-context-selector__toggle--m-plain--m-text--PaddingLeft: var(--pf-c-context-selector--m-page-insets__toggle--m-plain--m-text--PaddingLeft);
164
+ }
98
165
 
99
166
  .pf-c-context-selector__toggle {
100
167
  position: relative;
@@ -120,6 +187,7 @@
120
187
  }
121
188
  .pf-c-context-selector__toggle:hover::before {
122
189
  --pf-c-context-selector__toggle--BorderBottomColor: var(--pf-c-context-selector__toggle--hover--BorderBottomColor);
190
+ border-bottom-width: var(--pf-c-context-selector__toggle--hover--BorderBottomWidth);
123
191
  }
124
192
  .pf-c-context-selector__toggle:active::before, .pf-c-context-selector__toggle.pf-m-active::before, .pf-c-context-selector__toggle:focus-within::before {
125
193
  --pf-c-context-selector__toggle--BorderBottomColor: var(--pf-c-context-selector__toggle--active--BorderBottomColor);
@@ -11,6 +11,8 @@ declare const _default: {
11
11
  "contextSelectorToggleText": "pf-c-context-selector__toggle-text",
12
12
  "modifiers": {
13
13
  "fullHeight": "pf-m-full-height",
14
+ "large": "pf-m-large",
15
+ "pageInsets": "pf-m-page-insets",
14
16
  "active": "pf-m-active",
15
17
  "expanded": "pf-m-expanded",
16
18
  "plain": "pf-m-plain",
@@ -13,6 +13,8 @@ exports.default = {
13
13
  "contextSelectorToggleText": "pf-c-context-selector__toggle-text",
14
14
  "modifiers": {
15
15
  "fullHeight": "pf-m-full-height",
16
+ "large": "pf-m-large",
17
+ "pageInsets": "pf-m-page-insets",
16
18
  "active": "pf-m-active",
17
19
  "expanded": "pf-m-expanded",
18
20
  "plain": "pf-m-plain",
@@ -138,7 +138,7 @@
138
138
  border-top-width: var(--pf-c-dropdown--m-full-height__toggle--before--BorderTopWidth);
139
139
  }
140
140
  .pf-c-dropdown.pf-m-full-height:hover .pf-c-dropdown__toggle::before {
141
- border-bottom-width: var(--pf-c-context-selector--m-full-height__toggle--hover--before--BorderBottomWidth);
141
+ border-bottom-width: var(--pf-c-dropdown--m-full-height__toggle--hover--before--BorderBottomWidth);
142
142
  }
143
143
 
144
144
  .pf-c-dropdown__toggle {
@@ -213,6 +213,7 @@
213
213
  --pf-c-context-selector--Width: var(--pf-c-masthead--c-context-selector--Width);
214
214
  --pf-c-context-selector__toggle--BorderTopColor: var(--pf-c-masthead--c-context-selector__toggle--BorderTopColor);
215
215
  --pf-c-context-selector__toggle--BorderRightColor: var(--pf-c-masthead--c-context-selector__toggle--BorderRightColor);
216
+ --pf-c-context-selector__toggle--BorderBottomColor: var(--pf-c-masthead--c-context-selector__toggle--BorderBottomColor);
216
217
  --pf-c-context-selector__toggle--BorderLeftColor: var(--pf-c-masthead--c-context-selector__toggle--BorderLeftColor);
217
218
  }
218
219
  .pf-c-masthead .pf-c-context-selector.pf-m-full-height {
@@ -1,6 +1,5 @@
1
1
  .pf-c-nav {
2
2
  --pf-c-nav--Transition: var(--pf-global--Transition);
3
- --pf-c-nav__item--m-expanded__toggle-icon--Rotate: 90deg;
4
3
  --pf-c-nav--m-light__item--before--BorderColor: var(--pf-global--BorderColor--300);
5
4
  --pf-c-nav--m-light__item--m-current--not--m-expanded__link--BackgroundColor: var(--pf-global--BackgroundColor--light-300);
6
5
  --pf-c-nav--m-light__link--Color: var(--pf-global--Color--dark-100);
@@ -25,6 +24,10 @@
25
24
  --pf-c-nav__item--MarginTop: 0;
26
25
  --pf-c-nav__item--m-current--not--m-expanded__link--BackgroundColor: var(--pf-global--BackgroundColor--dark-400);
27
26
  --pf-c-nav__link--m-current--not--m-expanded__link--after--BorderWidth: var(--pf-global--BorderWidth--xl);
27
+ --pf-c-nav__item__item__link--PaddingRight: var(--pf-global--spacer--xl);
28
+ --pf-c-nav__item__item__toggle--FontSize: var(--pf-global--FontSize--sm);
29
+ --pf-c-nav__item__toggle-icon--Rotate: 0;
30
+ --pf-c-nav__item--m-expanded__toggle-icon--Rotate: 90deg;
28
31
  --pf-c-nav__item--before--BorderColor: var(--pf-global--BackgroundColor--dark-200);
29
32
  --pf-c-nav__item--before--BorderWidth: var(--pf-global--BorderWidth--sm);
30
33
  --pf-c-nav__link--FontSize: var(--pf-global--FontSize--md);
@@ -160,6 +163,9 @@
160
163
  --pf-c-nav__subnav__link--active--after--BorderWidth: var(--pf-global--BorderWidth--sm);
161
164
  --pf-c-nav__subnav__link--m-current--after--BorderWidth: var(--pf-global--BorderWidth--xl);
162
165
  --pf-c-nav__subnav--MaxHeight: 0;
166
+ --pf-c-nav__subnav__subnav--PaddingLeft: var(--pf-global--spacer--lg);
167
+ --pf-c-nav__subnav__subnav__link--PaddingLeft: var(--pf-global--spacer--md);
168
+ --pf-c-nav__subnav__subnav__link--FontSize: var(--pf-global--FontSize--xs);
163
169
  --pf-c-nav__item--m-expanded__subnav--MaxHeight: 100%;
164
170
  --pf-c-nav__subnav--c-divider--PaddingRight: var(--pf-global--spacer--lg);
165
171
  --pf-c-nav__subnav--c-divider--PaddingLeft: var(--pf-global--spacer--lg);
@@ -466,15 +472,18 @@
466
472
  }
467
473
 
468
474
  .pf-c-nav__list {
475
+ position: relative;
469
476
  display: block;
470
477
  }
471
478
 
472
479
  .pf-c-nav__item {
480
+ --pf-c-nav__item__toggle-icon--Rotate: 0;
473
481
  position: relative;
474
482
  margin-top: var(--pf-c-nav__item--MarginTop);
475
483
  }
476
484
  .pf-c-nav__item.pf-m-expandable {
477
485
  --pf-c-nav__link--before--BorderBottomWidth: 0;
486
+ --pf-c-nav__item__toggle-icon--Rotate: var(--pf-c-nav__item--m-expanded__toggle-icon--Rotate);
478
487
  }
479
488
  .pf-c-nav__item.pf-m-expandable::before {
480
489
  position: absolute;
@@ -484,6 +493,28 @@
484
493
  content: "";
485
494
  border-bottom: var(--pf-c-nav__item--before--BorderWidth) solid var(--pf-c-nav__item--before--BorderColor);
486
495
  }
496
+ .pf-c-nav__item .pf-c-nav__item.pf-m-expandable {
497
+ --pf-c-nav__toggle--FontSize: var(--pf-c-nav__item__item__toggle--FontSize);
498
+ --pf-c-nav__link--PaddingRight: var(--pf-c-nav__item__item__link--PaddingRight);
499
+ }
500
+ @media screen and (min-width: 1200px) {
501
+ .pf-c-nav__item .pf-c-nav__item.pf-m-expandable::before {
502
+ border-bottom: none;
503
+ }
504
+ }
505
+ .pf-c-nav__item .pf-c-nav__item.pf-m-expandable .pf-c-nav__list::before {
506
+ position: absolute;
507
+ top: 0;
508
+ right: 0;
509
+ bottom: 0;
510
+ left: 0;
511
+ pointer-events: none;
512
+ content: "";
513
+ border-left: var(--pf-c-nav__item--before--BorderWidth) solid var(--pf-c-nav__item--before--BorderColor);
514
+ }
515
+ .pf-c-nav__item .pf-c-nav__toggle-icon {
516
+ transform: rotate(var(--pf-c-nav__item__toggle-icon--Rotate));
517
+ }
487
518
  .pf-c-nav__item.pf-m-flyout:hover {
488
519
  --pf-c-nav__link--BackgroundColor: var(--pf-c-nav__item--m-flyout--hover__link--BackgroundColor);
489
520
  --pf-c-nav__link--before--BorderBottomWidth: var(--pf-c-nav__item--m-flyout--hover__link--before--BorderWidth);
@@ -677,6 +708,11 @@
677
708
  scrollbar-width: none;
678
709
  -ms-overflow-style: -ms-autohiding-scrollbar;
679
710
  }
711
+ .pf-c-nav__subnav .pf-c-nav__subnav {
712
+ --pf-c-nav__link--FontSize: var(--pf-c-nav__subnav__subnav__link--FontSize);
713
+ --pf-c-nav__link--PaddingLeft: var(--pf-c-nav__subnav__subnav__link--PaddingLeft);
714
+ --pf-c-nav__subnav--PaddingLeft: var(--pf-c-nav__subnav__subnav--PaddingLeft);
715
+ }
680
716
  .pf-c-nav__subnav.pf-m-flyout {
681
717
  width: 100%;
682
718
  }
@@ -706,7 +742,10 @@
706
742
  display: inline-block;
707
743
  transition: var(--pf-c-nav__toggle-icon--Transition);
708
744
  }
709
- .pf-c-nav__item.pf-m-expanded .pf-c-nav__toggle-icon {
745
+ .pf-c-nav__item.pf-m-expanded .pf-c-nav__item .pf-c-nav__toggle-icon {
746
+ transform: rotate(0deg);
747
+ }
748
+ .pf-c-nav__item.pf-m-expanded .pf-c-nav__toggle-icon, .pf-c-nav__item .pf-c-nav__item.pf-m-expanded .pf-c-nav__toggle-icon {
710
749
  transform: rotate(var(--pf-c-nav__item--m-expanded__toggle-icon--Rotate));
711
750
  }
712
751
 
@@ -8,7 +8,7 @@
8
8
  --pf-global--BackgroundColor--100: var(--pf-global--BackgroundColor--light-100);
9
9
  }
10
10
 
11
- .pf-c-page__main-section[class*=pf-m-dark-], .pf-c-page__header {
11
+ .pf-c-page__main-section[class*=pf-m-dark-], .pf-c-page__sidebar-body.pf-m-menu .pf-c-context-selector, .pf-c-page__header {
12
12
  --pf-global--Color--100: var(--pf-global--Color--light-100);
13
13
  --pf-global--Color--200: var(--pf-global--Color--light-200);
14
14
  --pf-global--BorderColor--100: var(--pf-global--BorderColor--light-100);
@@ -17,10 +17,10 @@
17
17
  --pf-global--link--Color--hover: var(--pf-global--link--Color--light);
18
18
  --pf-global--BackgroundColor--100: var(--pf-global--BackgroundColor--dark-100);
19
19
  }
20
- .pf-c-page__main-section[class*=pf-m-dark-] .pf-c-card, .pf-c-page__header .pf-c-card {
20
+ .pf-c-page__main-section[class*=pf-m-dark-] .pf-c-card, .pf-c-page__sidebar-body.pf-m-menu .pf-c-context-selector .pf-c-card, .pf-c-page__header .pf-c-card {
21
21
  --pf-c-card--BackgroundColor: var(--pf-global--BackgroundColor--dark-transparent-200);
22
22
  }
23
- .pf-c-page__main-section[class*=pf-m-dark-] .pf-c-button, .pf-c-page__header .pf-c-button {
23
+ .pf-c-page__main-section[class*=pf-m-dark-] .pf-c-button, .pf-c-page__sidebar-body.pf-m-menu .pf-c-context-selector .pf-c-button, .pf-c-page__header .pf-c-button {
24
24
  --pf-c-button--m-primary--Color: var(--pf-global--primary-color--dark-100);
25
25
  --pf-c-button--m-primary--hover--Color: var(--pf-global--primary-color--dark-100);
26
26
  --pf-c-button--m-primary--focus--Color: var(--pf-global--primary-color--dark-100);
@@ -151,6 +151,11 @@
151
151
  --pf-c-page__sidebar--xl--TranslateX: 0;
152
152
  --pf-c-page__sidebar-body--PaddingTop: var(--pf-global--spacer--sm);
153
153
  --pf-c-page__sidebar-body--PaddingBottom: var(--pf-global--spacer--md);
154
+ --pf-c-page__sidebar-body--m-menu--PaddingTop: 0;
155
+ --pf-c-page__sidebar-body--m-menu--PaddingBottom: 0;
156
+ --pf-c-page__sidebar-body--m-menu--BorderTopColor: var(--pf-global--BackgroundColor--dark-200);
157
+ --pf-c-page__sidebar-body--m-menu--BorderTopWidth: var(--pf-global--BorderWidth--sm);
158
+ --pf-c-page__sidebar-body--m-menu--c-context-selector--BorderBottomColor: var(--pf-global--BackgroundColor--dark-200);
154
159
  --pf-c-page__main--ZIndex: var(--pf-global--ZIndex--xs);
155
160
  --pf-c-page__main-section--PaddingTop: var(--pf-global--spacer--md);
156
161
  --pf-c-page__main-section--PaddingRight: var(--pf-global--spacer--md);
@@ -430,6 +435,24 @@
430
435
  padding-top: var(--pf-c-page__sidebar-body--PaddingTop);
431
436
  padding-bottom: var(--pf-c-page__sidebar-body--PaddingBottom);
432
437
  }
438
+ .pf-c-page__sidebar-body.pf-m-menu {
439
+ --pf-c-page__sidebar-body--PaddingTop: var(--pf-c-page__sidebar-body--m-menu--PaddingTop);
440
+ --pf-c-page__sidebar-body--PaddingBottom: var(--pf-c-page__sidebar-body--m-menu--PaddingBottom);
441
+ background-color: var(--pf-global--palette--black-900);
442
+ border-top: var(--pf-c-page__sidebar-body--m-menu--BorderTopWidth) solid var(--pf-c-page__sidebar-body--m-menu--BorderTopColor);
443
+ }
444
+ .pf-c-page__sidebar-body.pf-m-menu + .pf-c-page__sidebar-body.pf-m-menu {
445
+ --pf-c-page__sidebar-body--m-menu--BorderTopWidth: 0;
446
+ }
447
+ .pf-c-page__sidebar-body.pf-m-menu .pf-c-context-selector {
448
+ --pf-c-context-selector__toggle--BorderTopColor: transparent;
449
+ --pf-c-context-selector__toggle--BorderRightColor: transparent;
450
+ --pf-c-context-selector__toggle--BorderBottomColor: var(--pf-c-page__sidebar-body--m-menu--c-context-selector--BorderBottomColor);
451
+ --pf-c-context-selector__toggle--BorderLeftColor: transparent;
452
+ --pf-c-context-selector__menu--Top: 100%;
453
+ color: var(--pf-global--Color--100);
454
+ width: 100%;
455
+ }
433
456
 
434
457
  .pf-c-page__main-nav.pf-m-limit-width,
435
458
  .pf-c-page__main-breadcrumb.pf-m-limit-width,
@@ -4,10 +4,12 @@ declare const _default: {
4
4
  "brand": "pf-c-brand",
5
5
  "button": "pf-c-button",
6
6
  "card": "pf-c-card",
7
+ "contextSelector": "pf-c-context-selector",
7
8
  "drawer": "pf-c-drawer",
8
9
  "masthead": "pf-c-masthead",
9
10
  "modifiers": {
10
11
  "light": "pf-m-light",
12
+ "menu": "pf-m-menu",
11
13
  "hidden": "pf-m-hidden",
12
14
  "hiddenOnSm": "pf-m-hidden-on-sm",
13
15
  "visibleOnSm": "pf-m-visible-on-sm",
@@ -6,10 +6,12 @@ exports.default = {
6
6
  "brand": "pf-c-brand",
7
7
  "button": "pf-c-button",
8
8
  "card": "pf-c-card",
9
+ "contextSelector": "pf-c-context-selector",
9
10
  "drawer": "pf-c-drawer",
10
11
  "masthead": "pf-c-masthead",
11
12
  "modifiers": {
12
13
  "light": "pf-m-light",
14
+ "menu": "pf-m-menu",
13
15
  "hidden": "pf-m-hidden",
14
16
  "hiddenOnSm": "pf-m-hidden-on-sm",
15
17
  "visibleOnSm": "pf-m-visible-on-sm",
@@ -0,0 +1,78 @@
1
+ .pf-c-panel {
2
+ --pf-c-panel--Width: auto;
3
+ --pf-c-panel--MinWidth: auto;
4
+ --pf-c-panel--MaxWidth: none;
5
+ --pf-c-panel--ZIndex: auto;
6
+ --pf-c-panel--BackgroundColor: var(--pf-global--BackgroundColor--100);
7
+ --pf-c-panel--BoxShadow: none;
8
+ --pf-c-panel--before--BorderWidth: 0;
9
+ --pf-c-panel--before--BorderColor: var(--pf-global--BorderColor--100);
10
+ --pf-c-panel--m-bordered--before--BorderWidth: var(--pf-global--BorderWidth--sm);
11
+ --pf-c-panel--m-raised--BoxShadow: var(--pf-global--BoxShadow--md);
12
+ --pf-c-panel--m-raised--ZIndex: var(--pf-global--ZIndex--sm);
13
+ --pf-c-panel__header--PaddingTop: var(--pf-global--spacer--md);
14
+ --pf-c-panel__header--PaddingRight: var(--pf-global--spacer--md);
15
+ --pf-c-panel__header--PaddingBottom: var(--pf-global--spacer--md);
16
+ --pf-c-panel__header--PaddingLeft: var(--pf-global--spacer--md);
17
+ --pf-c-panel__main--MaxHeight: none;
18
+ --pf-c-panel__main--Overflow: visible;
19
+ --pf-c-panel__main-body--PaddingTop: var(--pf-global--spacer--md);
20
+ --pf-c-panel__main-body--PaddingRight: var(--pf-global--spacer--md);
21
+ --pf-c-panel__main-body--PaddingBottom: var(--pf-global--spacer--md);
22
+ --pf-c-panel__main-body--PaddingLeft: var(--pf-global--spacer--md);
23
+ --pf-c-panel__footer--PaddingTop: var(--pf-global--spacer--md);
24
+ --pf-c-panel__footer--PaddingRight: var(--pf-global--spacer--md);
25
+ --pf-c-panel__footer--PaddingBottom: var(--pf-global--spacer--md);
26
+ --pf-c-panel__footer--PaddingLeft: var(--pf-global--spacer--md);
27
+ --pf-c-panel__footer--BoxShadow: none;
28
+ --pf-c-panel--m-scrollable__main--MaxHeight: 18.75rem;
29
+ --pf-c-panel--m-scrollable__main--Overflow: auto;
30
+ --pf-c-panel--m-scrollable__footer--BoxShadow: 0 -0.3125rem 0.25rem -0.25rem rgba(3, 3, 3, 0.16);
31
+ position: relative;
32
+ z-index: var(--pf-c-panel--ZIndex);
33
+ width: var(--pf-c-panel--Width);
34
+ min-width: var(--pf-c-panel--MinWidth);
35
+ max-width: var(--pf-c-panel--MaxWidth);
36
+ background-color: var(--pf-c-panel--BackgroundColor);
37
+ box-shadow: var(--pf-c-panel--BoxShadow);
38
+ }
39
+ .pf-c-panel::before {
40
+ position: absolute;
41
+ top: 0;
42
+ right: 0;
43
+ bottom: 0;
44
+ left: 0;
45
+ pointer-events: none;
46
+ content: "";
47
+ border: var(--pf-c-panel--before--BorderWidth) solid var(--pf-c-panel--before--BorderColor);
48
+ }
49
+ .pf-c-panel.pf-m-bordered {
50
+ --pf-c-panel--before--BorderWidth: var(--pf-c-panel--m-bordered--before--BorderWidth);
51
+ }
52
+ .pf-c-panel.pf-m-raised {
53
+ --pf-c-panel--BoxShadow: var(--pf-c-panel--m-raised--BoxShadow);
54
+ --pf-c-panel--ZIndex: var(--pf-c-panel--m-raised--ZIndex);
55
+ }
56
+ .pf-c-panel.pf-m-scrollable {
57
+ --pf-c-panel__main--MaxHeight: var(--pf-c-panel--m-scrollable__main--MaxHeight);
58
+ --pf-c-panel__main--Overflow: var(--pf-c-panel--m-scrollable__main--Overflow);
59
+ --pf-c-panel__footer--BoxShadow: var(--pf-c-panel--m-scrollable__footer--BoxShadow);
60
+ }
61
+
62
+ .pf-c-panel__header {
63
+ padding: var(--pf-c-panel__header--PaddingTop) var(--pf-c-panel__header--PaddingRight) var(--pf-c-panel__header--PaddingBottom) var(--pf-c-panel__header--PaddingLeft);
64
+ }
65
+
66
+ .pf-c-panel__main {
67
+ max-height: var(--pf-c-panel__main--MaxHeight);
68
+ overflow: var(--pf-c-panel__main--Overflow);
69
+ }
70
+
71
+ .pf-c-panel__main-body {
72
+ padding: var(--pf-c-panel__main-body--PaddingTop) var(--pf-c-panel__main-body--PaddingRight) var(--pf-c-panel__main-body--PaddingBottom) var(--pf-c-panel__main-body--PaddingLeft);
73
+ }
74
+
75
+ .pf-c-panel__footer {
76
+ padding: var(--pf-c-panel__footer--PaddingTop) var(--pf-c-panel__footer--PaddingRight) var(--pf-c-panel__footer--PaddingBottom) var(--pf-c-panel__footer--PaddingLeft);
77
+ box-shadow: var(--pf-c-panel__footer--BoxShadow);
78
+ }
@@ -0,0 +1,14 @@
1
+ import './panel.css';
2
+ declare const _default: {
3
+ "modifiers": {
4
+ "bordered": "pf-m-bordered",
5
+ "raised": "pf-m-raised",
6
+ "scrollable": "pf-m-scrollable"
7
+ },
8
+ "panel": "pf-c-panel",
9
+ "panelFooter": "pf-c-panel__footer",
10
+ "panelHeader": "pf-c-panel__header",
11
+ "panelMain": "pf-c-panel__main",
12
+ "panelMainBody": "pf-c-panel__main-body"
13
+ };
14
+ export default _default;
@@ -0,0 +1,15 @@
1
+ "use strict";
2
+ exports.__esModule = true;
3
+ require('./panel.css');
4
+ exports.default = {
5
+ "modifiers": {
6
+ "bordered": "pf-m-bordered",
7
+ "raised": "pf-m-raised",
8
+ "scrollable": "pf-m-scrollable"
9
+ },
10
+ "panel": "pf-c-panel",
11
+ "panelFooter": "pf-c-panel__footer",
12
+ "panelHeader": "pf-c-panel__header",
13
+ "panelMain": "pf-c-panel__main",
14
+ "panelMainBody": "pf-c-panel__main-body"
15
+ };
@@ -2,7 +2,17 @@
2
2
  --pf-c-popover--FontSize: var(--pf-global--FontSize--sm);
3
3
  --pf-c-popover--MinWidth: calc(var(--pf-c-popover__content--PaddingLeft) + var(--pf-c-popover__content--PaddingRight) + 18.75rem);
4
4
  --pf-c-popover--MaxWidth: calc(var(--pf-c-popover__content--PaddingLeft) + var(--pf-c-popover__content--PaddingRight) + 18.75rem);
5
- --pf-c-popover--BoxShadow: var(--pf-global--BoxShadow--md);
5
+ --pf-c-popover--BoxShadow: var(--pf-global--BoxShadow--lg);
6
+ --pf-c-popover--m-danger__title-icon--Color: var(--pf-global--danger-color--100);
7
+ --pf-c-popover--m-warning__title-icon--Color: var(--pf-global--warning-color--100);
8
+ --pf-c-popover--m-success__title-icon--Color: var(--pf-global--success-color--100);
9
+ --pf-c-popover--m-info__title-icon--Color: var(--pf-global--info-color--100);
10
+ --pf-c-popover--m-default__title-icon--Color: var(--pf-global--default-color--200);
11
+ --pf-c-popover--m-danger__title-text--Color: var(--pf-global--danger-color--200);
12
+ --pf-c-popover--m-warning__title-text--Color: var(--pf-global--warning-color--200);
13
+ --pf-c-popover--m-success__title-text--Color: var(--pf-global--success-color--200);
14
+ --pf-c-popover--m-info__title-text--Color: var(--pf-global--info-color--200);
15
+ --pf-c-popover--m-default__title-text--Color: var(--pf-global--default-color--300);
6
16
  --pf-c-popover__content--BackgroundColor: var(--pf-global--BackgroundColor--100);
7
17
  --pf-c-popover__content--PaddingTop: var(--pf-global--spacer--md);
8
18
  --pf-c-popover__content--PaddingRight: var(--pf-global--spacer--md);
@@ -10,7 +20,7 @@
10
20
  --pf-c-popover__content--PaddingLeft: var(--pf-global--spacer--md);
11
21
  --pf-c-popover__arrow--Width: var(--pf-global--arrow--width-lg);
12
22
  --pf-c-popover__arrow--Height: var(--pf-global--arrow--width-lg);
13
- --pf-c-popover__arrow--BoxShadow: var(--pf-global--BoxShadow--md);
23
+ --pf-c-popover__arrow--BoxShadow: var(--pf-global--BoxShadow--lg);
14
24
  --pf-c-popover__arrow--BackgroundColor: var(--pf-global--BackgroundColor--100);
15
25
  --pf-c-popover__arrow--m-top--TranslateX: -50%;
16
26
  --pf-c-popover__arrow--m-top--TranslateY: 50%;
@@ -29,6 +39,12 @@
29
39
  --pf-c-popover--c-button--Right: var(--pf-global--spacer--md);
30
40
  --pf-c-popover--c-button--sibling--PaddingRight: var(--pf-global--spacer--2xl);
31
41
  --pf-c-popover--c-title--MarginBottom: var(--pf-global--spacer--sm);
42
+ --pf-c-popover__title--MarginBottom: var(--pf-global--spacer--sm);
43
+ --pf-c-popover__title--LineHeight: var(--pf-global--LineHeight--md);
44
+ --pf-c-popover__title--FontFamily: var(--pf-global--FontFamily--heading--sans-serif);
45
+ --pf-c-popover__title--FontSize: var(--pf-global--FontSize--md);
46
+ --pf-c-popover__title-icon--MarginRight: var(--pf-global--spacer--sm);
47
+ --pf-c-popover__title-icon--Color: var(--pf-global--Color--100);
32
48
  --pf-c-popover__footer--MarginTop: var(--pf-global--spacer--md);
33
49
  position: relative;
34
50
  min-width: var(--pf-c-popover--MinWidth);
@@ -80,6 +96,26 @@
80
96
  right: 0;
81
97
  left: auto;
82
98
  }
99
+ .pf-c-popover.pf-m-danger {
100
+ --pf-c-popover__title-icon--Color: var(--pf-c-popover--m-danger__title-icon--Color);
101
+ --pf-c-popover__title-text--Color: var(--pf-c-popover--m-danger__title-text--Color);
102
+ }
103
+ .pf-c-popover.pf-m-warning {
104
+ --pf-c-popover__title-icon--Color: var(--pf-c-popover--m-warning__title-icon--Color);
105
+ --pf-c-popover__title-text--Color: var(--pf-c-popover--m-warning__title-text--Color);
106
+ }
107
+ .pf-c-popover.pf-m-success {
108
+ --pf-c-popover__title-icon--Color: var(--pf-c-popover--m-success__title-icon--Color);
109
+ --pf-c-popover__title-text--Color: var(--pf-c-popover--m-success__title-text--Color);
110
+ }
111
+ .pf-c-popover.pf-m-default {
112
+ --pf-c-popover__title-icon--Color: var(--pf-c-popover--m-default__title-icon--Color);
113
+ --pf-c-popover__title-text--Color: var(--pf-c-popover--m-default__title-text--Color);
114
+ }
115
+ .pf-c-popover.pf-m-info {
116
+ --pf-c-popover__title-icon--Color: var(--pf-c-popover--m-info__title-icon--Color);
117
+ --pf-c-popover__title-text--Color: var(--pf-c-popover--m-info__title-text--Color);
118
+ }
83
119
 
84
120
  .pf-c-popover__content {
85
121
  position: relative;
@@ -107,6 +143,26 @@
107
143
  box-shadow: var(--pf-c-popover__arrow--BoxShadow);
108
144
  }
109
145
 
146
+ .pf-c-popover__title {
147
+ flex: 0 0 auto;
148
+ margin-bottom: var(--pf-c-popover__title--MarginBottom);
149
+ font-family: var(--pf-c-popover__title--FontFamily);
150
+ font-size: var(--pf-c-popover__title--FontSize);
151
+ line-height: var(--pf-c-popover__title--LineHeight);
152
+ }
153
+ .pf-c-popover__title.pf-m-icon {
154
+ display: flex;
155
+ }
156
+
157
+ .pf-c-popover__title-icon {
158
+ margin-right: var(--pf-c-popover__title-icon--MarginRight);
159
+ color: var(--pf-c-popover__title-icon--Color);
160
+ }
161
+
162
+ .pf-c-popover__title-text {
163
+ color: var(--pf-c-popover__title-text--Color, inherit);
164
+ }
165
+
110
166
  .pf-c-popover__body {
111
167
  word-wrap: break-word;
112
168
  }
@@ -15,13 +15,22 @@ declare const _default: {
15
15
  "leftBottom": "pf-m-left-bottom",
16
16
  "right": "pf-m-right",
17
17
  "rightTop": "pf-m-right-top",
18
- "rightBottom": "pf-m-right-bottom"
18
+ "rightBottom": "pf-m-right-bottom",
19
+ "danger": "pf-m-danger",
20
+ "warning": "pf-m-warning",
21
+ "success": "pf-m-success",
22
+ "default": "pf-m-default",
23
+ "info": "pf-m-info",
24
+ "icon": "pf-m-icon"
19
25
  },
20
26
  "popover": "pf-c-popover",
21
27
  "popoverArrow": "pf-c-popover__arrow",
22
28
  "popoverBody": "pf-c-popover__body",
23
29
  "popoverContent": "pf-c-popover__content",
24
30
  "popoverFooter": "pf-c-popover__footer",
31
+ "popoverTitle": "pf-c-popover__title",
32
+ "popoverTitleIcon": "pf-c-popover__title-icon",
33
+ "popoverTitleText": "pf-c-popover__title-text",
25
34
  "title": "pf-c-title"
26
35
  };
27
36
  export default _default;
@@ -17,12 +17,21 @@ exports.default = {
17
17
  "leftBottom": "pf-m-left-bottom",
18
18
  "right": "pf-m-right",
19
19
  "rightTop": "pf-m-right-top",
20
- "rightBottom": "pf-m-right-bottom"
20
+ "rightBottom": "pf-m-right-bottom",
21
+ "danger": "pf-m-danger",
22
+ "warning": "pf-m-warning",
23
+ "success": "pf-m-success",
24
+ "default": "pf-m-default",
25
+ "info": "pf-m-info",
26
+ "icon": "pf-m-icon"
21
27
  },
22
28
  "popover": "pf-c-popover",
23
29
  "popoverArrow": "pf-c-popover__arrow",
24
30
  "popoverBody": "pf-c-popover__body",
25
31
  "popoverContent": "pf-c-popover__content",
26
32
  "popoverFooter": "pf-c-popover__footer",
33
+ "popoverTitle": "pf-c-popover__title",
34
+ "popoverTitleIcon": "pf-c-popover__title-icon",
35
+ "popoverTitleText": "pf-c-popover__title-text",
27
36
  "title": "pf-c-title"
28
37
  };
@@ -18,14 +18,12 @@
18
18
  background-clip: padding-box;
19
19
  }
20
20
  .pf-c-table .pf-c-table__sticky-column.pf-m-border-right::before {
21
- position: absolute;
22
- top: 0;
23
- right: 0;
24
- bottom: 0;
25
- left: 0;
26
- pointer-events: none;
27
- content: "";
28
- border-right: var(--pf-c-table__sticky-column--m-border-right--before--BorderRightWidth) solid var(--pf-c-table__sticky-column--m-border-right--before--BorderRightColor);
21
+ --pf-c-table--cell--m-border-right--before--BorderRightWidth: var(--pf-c-table__sticky-column--m-border-right--before--BorderRightWidth);
22
+ --pf-c-table--cell--m-border-right--before--BorderRightColor: var(--pf-c-table__sticky-column--m-border-right--before--BorderRightColor);
23
+ }
24
+ .pf-c-table .pf-c-table__sticky-column.pf-m-border-left::before {
25
+ --pf-c-table--cell--m-border-left--before--BorderLeftWidth: var(--pf-c-table__sticky-column--m-border-left--before--BorderLeftWidth);
26
+ --pf-c-table--cell--m-border-left--before--BorderLeftColor: var(--pf-c-table__sticky-column--m-border-left--before--BorderLeftColor);
29
27
  }
30
28
  .pf-c-table.pf-m-sticky-header {
31
29
  --pf-c-table--cell--Overflow: visible;
@@ -2,6 +2,7 @@ import './table-scrollable.css';
2
2
  declare const _default: {
3
3
  "modifiers": {
4
4
  "borderRight": "pf-m-border-right",
5
+ "borderLeft": "pf-m-border-left",
5
6
  "stickyHeader": "pf-m-sticky-header"
6
7
  },
7
8
  "scrollInnerWrapper": "pf-c-scroll-inner-wrapper",
@@ -4,6 +4,7 @@ require('./table-scrollable.css');
4
4
  exports.default = {
5
5
  "modifiers": {
6
6
  "borderRight": "pf-m-border-right",
7
+ "borderLeft": "pf-m-border-left",
7
8
  "stickyHeader": "pf-m-sticky-header"
8
9
  },
9
10
  "scrollInnerWrapper": "pf-c-scroll-inner-wrapper",
@@ -89,17 +89,19 @@
89
89
  --pf-c-table--tbody--cell--PaddingTop: var(--pf-global--spacer--lg);
90
90
  --pf-c-table--tbody--cell--PaddingBottom: var(--pf-global--spacer--lg);
91
91
  --pf-c-table--tr--BoxShadow--top--base: 0 -0.1875rem 0.25rem -0.125rem rgba(3,3,3,.08);
92
+ --pf-c-table--cell--Padding--base: var(--pf-global--spacer--md);
92
93
  --pf-c-table--cell--FontSize: var(--pf-global--FontSize--md);
93
94
  --pf-c-table--cell--FontWeight: var(--pf-global--FontWeight--normal);
94
95
  --pf-c-table--cell--Color: var(--pf-global--Color--100);
95
- --pf-c-table--cell--PaddingTop: var(--pf-global--spacer--md);
96
- --pf-c-table--cell--PaddingRight: var(--pf-global--spacer--md);
97
- --pf-c-table--cell--PaddingBottom: var(--pf-global--spacer--md);
98
- --pf-c-table--cell--PaddingLeft: var(--pf-global--spacer--md);
96
+ --pf-c-table--cell--PaddingTop: var(--pf-c-table--cell--Padding--base);
97
+ --pf-c-table--cell--PaddingRight: var(--pf-c-table--cell--Padding--base);
98
+ --pf-c-table--cell--PaddingBottom: var(--pf-c-table--cell--Padding--base);
99
+ --pf-c-table--cell--PaddingLeft: var(--pf-c-table--cell--Padding--base);
99
100
  --pf-c-table--cell--first-last-child--PaddingLeft: var(--pf-global--spacer--md);
100
101
  --pf-c-table--cell--first-last-child--PaddingRight: var(--pf-global--spacer--md);
101
102
  --pf-c-table--cell--first-last-child--xl--PaddingLeft: var(--pf-global--spacer--lg);
102
103
  --pf-c-table--cell--first-last-child--xl--PaddingRight: var(--pf-global--spacer--lg);
104
+ --pf-c-table--tr--m-first-cell-offset-reset--cell--PaddingLeft: var(--pf-c-table--cell--Padding--base);
103
105
  --pf-c-table--cell--MinWidth: 0;
104
106
  --pf-c-table--cell--MaxWidth: none;
105
107
  --pf-c-table--cell--Width: auto;
@@ -107,6 +109,10 @@
107
109
  --pf-c-table--cell--TextOverflow: clip;
108
110
  --pf-c-table--cell--WhiteSpace: normal;
109
111
  --pf-c-table--cell--WordBreak: normal;
112
+ --pf-c-table--cell--m-border-right--before--BorderRightWidth: var(--pf-global--BorderWidth--sm);
113
+ --pf-c-table--cell--m-border-right--before--BorderRightColor: var(--pf-global--BorderColor--100);
114
+ --pf-c-table--cell--m-border-left--before--BorderLeftWidth: var(--pf-global--BorderWidth--sm);
115
+ --pf-c-table--cell--m-border-left--before--BorderLeftColor: var(--pf-global--BorderColor--100);
110
116
  --pf-c-table--cell--m-help--MinWidth: 11ch;
111
117
  --pf-c-table--m-truncate--cell--MaxWidth: 1px;
112
118
  --pf-c-table--m-truncate--cell--MinWidth: calc(5ch + var(--pf-c-table--cell--PaddingRight) + var(--pf-c-table--cell--PaddingLeft));
@@ -265,6 +271,10 @@
265
271
  --pf-c-table--tbody--m-selected--m-selected--BoxShadow: var(--pf-global--BoxShadow--sm-bottom);
266
272
  --pf-c-table--tbody--m-selected--hover--tbody--m-selected--BoxShadow: var(--pf-global--BoxShadow--sm-bottom) inset, var(--pf-global--BoxShadow--sm-bottom);
267
273
  --pf-c-table--tbody--m-selected--tbody--m-selected--hover--BoxShadow: var(--pf-c-table--tr--m-selected--BoxShadow--top), var(--pf-global--BoxShadow--sm-bottom);
274
+ --pf-c-table--thead--m-nested-column-header--button--OutlineOffset: -0.1875rem;
275
+ --pf-c-table--thead--m-nested-column-header--tr--PaddingTop: var(--pf-global--spacer--xs);
276
+ --pf-c-table--thead--m-nested-column-header--tr--PaddingBottom: var(--pf-global--spacer--xs);
277
+ --pf-c-table__subhead--Color: var(--pf-global--Color--200);
268
278
  color: var(--pf-global--Color--100);
269
279
  width: 100%;
270
280
  background-color: var(--pf-c-table--BackgroundColor);
@@ -351,6 +361,21 @@
351
361
  --pf-c-table--cell--MaxWidth: fit-content;
352
362
  --pf-c-table--cell--Overflow: visible;
353
363
  }
364
+ .pf-c-table tr > *.pf-m-border-right::before, .pf-c-table tr > *.pf-m-border-left::before {
365
+ position: absolute;
366
+ top: 0;
367
+ right: 0;
368
+ bottom: 0;
369
+ left: 0;
370
+ pointer-events: none;
371
+ content: "";
372
+ }
373
+ .pf-c-table tr > *.pf-m-border-right::before {
374
+ border-right: var(--pf-c-table--cell--m-border-right--before--BorderRightWidth) solid var(--pf-c-table--cell--m-border-right--before--BorderRightColor);
375
+ }
376
+ .pf-c-table tr > *.pf-m-border-left::before {
377
+ border-left: var(--pf-c-table--cell--m-border-right--before--BorderLeftWidth) solid var(--pf-c-table--cell--m-border-left--before--BorderLeftColor);
378
+ }
354
379
  .pf-c-table caption {
355
380
  padding-top: var(--pf-c-table-caption--PaddingTop);
356
381
  padding-bottom: var(--pf-c-table-caption--PaddingBottom);
@@ -365,6 +390,28 @@
365
390
  --pf-c-table--cell--FontWeight: var(--pf-c-table--thead--cell--FontWeight);
366
391
  vertical-align: bottom;
367
392
  }
393
+ .pf-c-table thead.pf-m-nested-column-header button {
394
+ outline-offset: var(--pf-c-table--thead--m-nested-column-header--button--OutlineOffset);
395
+ }
396
+ .pf-c-table thead.pf-m-nested-column-header th,
397
+ .pf-c-table thead.pf-m-nested-column-header td {
398
+ vertical-align: middle;
399
+ }
400
+ .pf-c-table thead.pf-m-nested-column-header tr:not(:first-child) th:not([rowspan]),
401
+ .pf-c-table thead.pf-m-nested-column-header tr:not(:first-child) td:not([rowspan]) {
402
+ --pf-c-table--cell--PaddingTop: var(--pf-c-table--thead--m-nested-column-header--tr--PaddingTop);
403
+ }
404
+ .pf-c-table thead.pf-m-nested-column-header tr:not(:last-child) {
405
+ --pf-c-table--border-width--base: 0;
406
+ }
407
+ .pf-c-table thead.pf-m-nested-column-header tr:not(:last-child) th:not([rowspan]),
408
+ .pf-c-table thead.pf-m-nested-column-header tr:not(:last-child) td:not([rowspan]) {
409
+ --pf-c-table--cell--PaddingBottom: var(--pf-c-table--thead--m-nested-column-header--tr--PaddingBottom);
410
+ }
411
+ .pf-c-table thead .pf-c-table__subhead {
412
+ --pf-c-table__sort__button__text--Color: var(--pf-c-table__subhead--Color);
413
+ color: var(--pf-c-table__subhead--Color);
414
+ }
368
415
  .pf-c-table tbody {
369
416
  --pf-c-table--cell--PaddingTop: var(--pf-c-table--tbody--cell--PaddingTop);
370
417
  --pf-c-table--cell--PaddingBottom: var(--pf-c-table--tbody--cell--PaddingBottom);
@@ -483,6 +530,9 @@
483
530
  .pf-c-table tr.pf-m-selected:hover + tr.pf-m-selected {
484
531
  box-shadow: var(--pf-c-table--tr--m-selected--hover--m-selected--BoxShadow);
485
532
  }
533
+ .pf-c-table tr.pf-m-first-cell-offset-reset {
534
+ --pf-c-table--cell--first-last-child--PaddingLeft: var(--pf-c-table--tr--m-first-cell-offset-reset--cell--PaddingLeft);
535
+ }
486
536
  .pf-c-table tbody.pf-m-hoverable {
487
537
  cursor: pointer;
488
538
  background-color: var(--pf-c-table--tbody--m-hoverable--BackgroundColor);
@@ -19,6 +19,9 @@ declare const _default: {
19
19
  "center": "pf-m-center",
20
20
  "help": "pf-m-help",
21
21
  "favorite": "pf-m-favorite",
22
+ "borderRight": "pf-m-border-right",
23
+ "borderLeft": "pf-m-border-left",
24
+ "nestedColumnHeader": "pf-m-nested-column-header",
22
25
  "truncate": "pf-m-truncate",
23
26
  "wrap": "pf-m-wrap",
24
27
  "nowrap": "pf-m-nowrap",
@@ -28,6 +31,7 @@ declare const _default: {
28
31
  "expanded": "pf-m-expanded",
29
32
  "hoverable": "pf-m-hoverable",
30
33
  "selected": "pf-m-selected",
34
+ "firstCellOffsetReset": "pf-m-first-cell-offset-reset",
31
35
  "dragOver": "pf-m-drag-over",
32
36
  "favorited": "pf-m-favorited",
33
37
  "noPadding": "pf-m-no-padding",
@@ -65,6 +69,7 @@ declare const _default: {
65
69
  "tableInlineEditAction": "pf-c-table__inline-edit-action",
66
70
  "tableSort": "pf-c-table__sort",
67
71
  "tableSortIndicator": "pf-c-table__sort-indicator",
72
+ "tableSubhead": "pf-c-table__subhead",
68
73
  "tableText": "pf-c-table__text",
69
74
  "tableToggle": "pf-c-table__toggle",
70
75
  "tableToggleIcon": "pf-c-table__toggle-icon"
@@ -21,6 +21,9 @@ exports.default = {
21
21
  "center": "pf-m-center",
22
22
  "help": "pf-m-help",
23
23
  "favorite": "pf-m-favorite",
24
+ "borderRight": "pf-m-border-right",
25
+ "borderLeft": "pf-m-border-left",
26
+ "nestedColumnHeader": "pf-m-nested-column-header",
24
27
  "truncate": "pf-m-truncate",
25
28
  "wrap": "pf-m-wrap",
26
29
  "nowrap": "pf-m-nowrap",
@@ -30,6 +33,7 @@ exports.default = {
30
33
  "expanded": "pf-m-expanded",
31
34
  "hoverable": "pf-m-hoverable",
32
35
  "selected": "pf-m-selected",
36
+ "firstCellOffsetReset": "pf-m-first-cell-offset-reset",
33
37
  "dragOver": "pf-m-drag-over",
34
38
  "favorited": "pf-m-favorited",
35
39
  "noPadding": "pf-m-no-padding",
@@ -67,6 +71,7 @@ exports.default = {
67
71
  "tableInlineEditAction": "pf-c-table__inline-edit-action",
68
72
  "tableSort": "pf-c-table__sort",
69
73
  "tableSortIndicator": "pf-c-table__sort-indicator",
74
+ "tableSubhead": "pf-c-table__subhead",
70
75
  "tableText": "pf-c-table__text",
71
76
  "tableToggle": "pf-c-table__toggle",
72
77
  "tableToggleIcon": "pf-c-table__toggle-icon"
@@ -7,11 +7,11 @@
7
7
  --pf-c-text-input-group__text--focus-within--after--BorderBottomWidth: var(--pf-global--BorderWidth--md);
8
8
  --pf-c-text-input-group__text--focus-within--after--BorderBottomColor: var(--pf-global--primary-color--100);
9
9
  --pf-c-text-input-group__main--first-child--not--text-input--MarginLeft: var(--pf-global--spacer--sm);
10
+ --pf-c-text-input-group__main--m-icon__text-input--PaddingLeft: var(--pf-global--spacer--xl);
10
11
  --pf-c-text-input-group__text-input--PaddingTop: var(--pf-global--spacer--form-element);
11
12
  --pf-c-text-input-group__text-input--PaddingRight: var(--pf-global--spacer--sm);
12
13
  --pf-c-text-input-group__text-input--PaddingBottom: var(--pf-global--spacer--form-element);
13
14
  --pf-c-text-input-group__text-input--PaddingLeft: var(--pf-global--spacer--sm);
14
- --pf-c-text-input-group--m-icon__text-input--PaddingLeft: var(--pf-global--spacer--xl);
15
15
  --pf-c-text-input-group__text-input--MinWidth: 12ch;
16
16
  --pf-c-text-input-group__text-input--m-hint--Color: var(--pf-global--Color--dark-200);
17
17
  --pf-c-text-input-group__icon--Left: var(--pf-global--spacer--sm);
@@ -29,9 +29,6 @@
29
29
  .pf-c-text-input-group:hover {
30
30
  --pf-c-text-input-group__text--after--BorderBottomColor: var(--pf-c-text-input-group--hover__text--after--BorderBottomColor);
31
31
  }
32
- .pf-c-text-input-group.pf-m-icon {
33
- --pf-c-text-input-group__text-input--PaddingLeft: var(--pf-c-text-input-group--m-icon__text-input--PaddingLeft);
34
- }
35
32
 
36
33
  .pf-c-text-input-group__main {
37
34
  display: flex;
@@ -39,6 +36,9 @@
39
36
  gap: var(--pf-global--spacer--sm);
40
37
  min-width: 0;
41
38
  }
39
+ .pf-c-text-input-group__main.pf-m-icon {
40
+ --pf-c-text-input-group__text-input--PaddingLeft: var(--pf-c-text-input-group__main--m-icon__text-input--PaddingLeft);
41
+ }
42
42
  .pf-c-text-input-group__main > :first-child:not(.pf-c-text-input-group__text) {
43
43
  margin-left: var(--pf-c-text-input-group__main--first-child--not--text-input--MarginLeft);
44
44
  }
@@ -69,8 +69,8 @@
69
69
  --pf-c-toolbar--PaddingBottom: var(--pf-global--spacer--md);
70
70
  --pf-c-toolbar__item--Display: block;
71
71
  --pf-c-toolbar__group--Display: flex;
72
- --pf-c-toolbar--m-sticky-top--ZIndex: var(--pf-global--ZIndex--xs);
73
- --pf-c-toolbar--m-sticky-top--BoxShadow: var(--pf-global--BoxShadow--sm-bottom);
72
+ --pf-c-toolbar--m-sticky--ZIndex: var(--pf-global--ZIndex--xs);
73
+ --pf-c-toolbar--m-sticky--BoxShadow: var(--pf-global--BoxShadow--sm-bottom);
74
74
  --pf-c-toolbar__content--Display: flex;
75
75
  --pf-c-toolbar__content--PaddingRight: var(--pf-global--spacer--md);
76
76
  --pf-c-toolbar__content--PaddingLeft: var(--pf-global--spacer--md);
@@ -141,11 +141,11 @@
141
141
  --pf-c-toolbar__content--PaddingRight: var(--pf-c-toolbar--m-page-insets--inset);
142
142
  --pf-c-toolbar__content--PaddingLeft: var(--pf-c-toolbar--m-page-insets--inset);
143
143
  }
144
- .pf-c-toolbar.pf-m-sticky-top {
144
+ .pf-c-toolbar.pf-m-sticky {
145
145
  position: sticky;
146
146
  top: 0;
147
- z-index: var(--pf-c-toolbar--m-sticky-top--ZIndex);
148
- box-shadow: var(--pf-c-toolbar--m-sticky-top--BoxShadow);
147
+ z-index: var(--pf-c-toolbar--m-sticky--ZIndex);
148
+ box-shadow: var(--pf-c-toolbar--m-sticky--BoxShadow);
149
149
  }
150
150
  .pf-c-toolbar.pf-m-full-height {
151
151
  --pf-c-toolbar--PaddingTop: var(--pf-c-toolbar--m-full-height--PaddingTop);
@@ -16,7 +16,7 @@ declare const _default: {
16
16
  "hiddenOn_2xl": "pf-m-hidden-on-2xl",
17
17
  "visibleOn_2xl": "pf-m-visible-on-2xl",
18
18
  "pageInsets": "pf-m-page-insets",
19
- "stickyTop": "pf-m-sticky-top",
19
+ "sticky": "pf-m-sticky",
20
20
  "fullHeight": "pf-m-full-height",
21
21
  "static": "pf-m-static",
22
22
  "vertical": "pf-m-vertical",
@@ -18,7 +18,7 @@ exports.default = {
18
18
  "hiddenOn_2xl": "pf-m-hidden-on-2xl",
19
19
  "visibleOn_2xl": "pf-m-visible-on-2xl",
20
20
  "pageInsets": "pf-m-page-insets",
21
- "stickyTop": "pf-m-sticky-top",
21
+ "sticky": "pf-m-sticky",
22
22
  "fullHeight": "pf-m-full-height",
23
23
  "static": "pf-m-static",
24
24
  "vertical": "pf-m-vertical",
@@ -2,14 +2,14 @@
2
2
  --pf-c-tooltip--MaxWidth: 18.75rem;
3
3
  --pf-c-tooltip--BoxShadow: var(--pf-global--BoxShadow--md);
4
4
  --pf-c-tooltip__content--PaddingTop: var(--pf-global--spacer--sm);
5
- --pf-c-tooltip__content--PaddingRight: var(--pf-global--spacer--md);
5
+ --pf-c-tooltip__content--PaddingRight: var(--pf-global--spacer--sm);
6
6
  --pf-c-tooltip__content--PaddingBottom: var(--pf-global--spacer--sm);
7
- --pf-c-tooltip__content--PaddingLeft: var(--pf-global--spacer--md);
7
+ --pf-c-tooltip__content--PaddingLeft: var(--pf-global--spacer--sm);
8
8
  --pf-c-tooltip__content--Color: var(--pf-global--Color--light-100);
9
9
  --pf-c-tooltip__content--BackgroundColor: var(--pf-global--BackgroundColor--dark-100);
10
10
  --pf-c-tooltip__content--FontSize: var(--pf-global--FontSize--sm);
11
- --pf-c-tooltip__arrow--Width: var(--pf-global--arrow--width);
12
- --pf-c-tooltip__arrow--Height: var(--pf-global--arrow--width);
11
+ --pf-c-tooltip__arrow--Width: 0.5rem;
12
+ --pf-c-tooltip__arrow--Height: 0.5rem;
13
13
  --pf-c-tooltip__arrow--m-top--TranslateX: -50%;
14
14
  --pf-c-tooltip__arrow--m-top--TranslateY: 50%;
15
15
  --pf-c-tooltip__arrow--m-top--Rotate: 45deg;
@@ -17,6 +17,10 @@
17
17
  background-color: var(--pf-global--BackgroundColor--dark-300);
18
18
  }
19
19
 
20
+ #ws-core-c-navigation-expandable-third-level .pf-c-nav {
21
+ background-color: var(--pf-global--BackgroundColor--dark-300);
22
+ }
23
+
20
24
  #ws-core-c-navigation-horizontal-in-masthead,
21
25
  #ws-core-c-navigation-horizontal-in-masthead-overflow {
22
26
  padding: 0;
@@ -1,5 +1,6 @@
1
1
  import './Navigation.css';
2
2
  declare const _default: {
3
+ "nav": "pf-c-nav",
3
4
  "pageHeader": "pf-c-page__header",
4
5
  "pageHeaderNav": "pf-c-page__header-nav"
5
6
  };
@@ -2,6 +2,7 @@
2
2
  exports.__esModule = true;
3
3
  require('./Navigation.css');
4
4
  exports.default = {
5
+ "nav": "pf-c-nav",
5
6
  "pageHeader": "pf-c-page__header",
6
7
  "pageHeaderNav": "pf-c-page__header-nav"
7
8
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@patternfly/react-styles",
3
- "version": "4.15.1",
3
+ "version": "4.18.4",
4
4
  "main": "dist/js/index.js",
5
5
  "module": "dist/esm/index.js",
6
6
  "types": "dist/esm/index.d.ts",
@@ -19,7 +19,7 @@
19
19
  "clean": "rimraf dist css"
20
20
  },
21
21
  "devDependencies": {
22
- "@patternfly/patternfly": "4.147.1",
22
+ "@patternfly/patternfly": "4.151.3",
23
23
  "camel-case": "^3.0.0",
24
24
  "css": "^2.2.3",
25
25
  "fs-extra": "^6.0.1",
@@ -29,5 +29,5 @@
29
29
  "typescript": "^4.0.0"
30
30
  },
31
31
  "license": "MIT",
32
- "gitHead": "977d6ac719802b9d0fb0d1cc5c6688dd9ff336a3"
32
+ "gitHead": "84c2450e8f45e7807dc1e35a09dbb399d2aa282e"
33
33
  }