@patternfly/react-styles 5.0.0-alpha.10 → 5.0.0-alpha.12

Sign up to get free protection for your applications and to get access to all the features.
Files changed (57) hide show
  1. package/CHANGELOG.md +10 -0
  2. package/css/components/AboutModalBox/about-modal-box.css +2 -20
  3. package/css/components/AboutModalBox/about-modal-box.d.ts +0 -1
  4. package/css/components/AboutModalBox/about-modal-box.js +0 -1
  5. package/css/components/AboutModalBox/about-modal-box.mjs +0 -1
  6. package/css/components/BackgroundImage/background-image.css +1 -2
  7. package/css/components/Breadcrumb/breadcrumb.css +1 -5
  8. package/css/components/Breadcrumb/breadcrumb.d.ts +1 -2
  9. package/css/components/Breadcrumb/breadcrumb.js +1 -2
  10. package/css/components/Breadcrumb/breadcrumb.mjs +1 -2
  11. package/css/components/FormControl/form-control.css +164 -221
  12. package/css/components/FormControl/form-control.d.ts +10 -6
  13. package/css/components/FormControl/form-control.js +10 -6
  14. package/css/components/FormControl/form-control.mjs +10 -6
  15. package/css/components/Icon/icon.css +25 -24
  16. package/css/components/List/list.css +1 -1
  17. package/css/components/LogViewer/log-viewer.css +0 -3
  18. package/css/components/LogViewer/log-viewer.d.ts +0 -1
  19. package/css/components/LogViewer/log-viewer.js +0 -1
  20. package/css/components/LogViewer/log-viewer.mjs +0 -1
  21. package/css/components/MultipleFileUpload/multiple-file-upload.css +3 -3
  22. package/css/components/NotificationBadge/notification-badge.css +2 -2
  23. package/css/components/NumberInput/number-input.css +0 -1
  24. package/css/components/ProgressStepper/progress-stepper.css +1 -1
  25. package/css/components/ProgressStepper/progress-stepper.d.ts +1 -1
  26. package/css/components/ProgressStepper/progress-stepper.js +1 -1
  27. package/css/components/ProgressStepper/progress-stepper.mjs +1 -1
  28. package/css/components/TextInputGroup/text-input-group.css +1 -5
  29. package/css/components/Wizard/wizard.css +5 -5
  30. package/css/docs/components/Avatar/examples/Avatar.css +1 -1
  31. package/css/docs/components/NotificationBadge/examples/NotificationBadge.css +1 -1
  32. package/css/docs/components/TextInputGroup/examples/TextInputGroup.css +0 -13
  33. package/css/layouts/Flex/flex.css +678 -31
  34. package/css/layouts/Flex/flex.d.ts +148 -1
  35. package/css/layouts/Flex/flex.js +148 -1
  36. package/css/layouts/Flex/flex.mjs +148 -1
  37. package/package.json +3 -3
  38. package/css/components/SearchInput/search-input.css +0 -199
  39. package/css/components/SearchInput/search-input.d.ts +0 -24
  40. package/css/components/SearchInput/search-input.js +0 -25
  41. package/css/components/SearchInput/search-input.mjs +0 -23
  42. package/css/docs/components/FormControl/examples/FormControl.css +0 -5
  43. package/css/docs/components/FormControl/examples/FormControl.d.ts +0 -3
  44. package/css/docs/components/FormControl/examples/FormControl.js +0 -4
  45. package/css/docs/components/FormControl/examples/FormControl.mjs +0 -2
  46. package/css/docs/components/SearchInput/examples/SearchInput.css +0 -12
  47. package/css/docs/components/SearchInput/examples/SearchInput.d.ts +0 -3
  48. package/css/docs/components/SearchInput/examples/SearchInput.js +0 -4
  49. package/css/docs/components/SearchInput/examples/SearchInput.mjs +0 -2
  50. /package/css/components/{ChipGroup → Chip}/chip-group.css +0 -0
  51. /package/css/components/{ChipGroup → Chip}/chip-group.d.ts +0 -0
  52. /package/css/components/{ChipGroup → Chip}/chip-group.js +0 -0
  53. /package/css/components/{ChipGroup → Chip}/chip-group.mjs +0 -0
  54. /package/css/components/{LabelGroup → Label}/label-group.css +0 -0
  55. /package/css/components/{LabelGroup → Label}/label-group.d.ts +0 -0
  56. /package/css/components/{LabelGroup → Label}/label-group.js +0 -0
  57. /package/css/components/{LabelGroup → Label}/label-group.mjs +0 -0
@@ -1,199 +0,0 @@
1
- .pf-v5-c-search-input {
2
- --pf-v5-c-search-input__text--before--BorderWidth: var(--pf-v5-global--BorderWidth--sm);
3
- --pf-v5-c-search-input__text--before--BorderColor: var(--pf-v5-global--BorderColor--300);
4
- --pf-v5-c-search-input__text--after--BorderBottomWidth: var(--pf-v5-global--BorderWidth--sm);
5
- --pf-v5-c-search-input__text--after--BorderBottomColor: var(--pf-v5-global--BorderColor--200);
6
- --pf-v5-c-search-input__bar--hover__text--after--BorderBottomColor: var(--pf-v5-global--primary-color--100);
7
- --pf-v5-c-search-input__text--focus-within--after--BorderBottomWidth: var(--pf-v5-global--BorderWidth--md);
8
- --pf-v5-c-search-input__text--focus-within--after--BorderBottomColor: var(--pf-v5-global--primary-color--100);
9
- --pf-v5-c-search-input__text-input--PaddingTop: var(--pf-v5-global--spacer--form-element);
10
- --pf-v5-c-search-input__text-input--PaddingRight: var(--pf-v5-global--spacer--sm);
11
- --pf-v5-c-search-input__text-input--PaddingBottom: var(--pf-v5-global--spacer--form-element);
12
- --pf-v5-c-search-input__text-input--PaddingLeft: var(--pf-v5-global--spacer--xl);
13
- --pf-v5-c-search-input__text-input--MinWidth: 6ch;
14
- --pf-v5-c-search-input__text-input--m-hint--Color: var(--pf-v5-global--Color--dark-200);
15
- --pf-v5-c-search-input__text-input--BackgroundColor: transparent;
16
- --pf-v5-c-search-input__icon--Left: var(--pf-v5-global--spacer--sm);
17
- --pf-v5-c-search-input__icon--Color: var(--pf-v5-global--Color--200);
18
- --pf-v5-c-search-input__text--hover__icon--Color: var(--pf-v5-global--Color--100);
19
- --pf-v5-c-search-input__icon--TranslateY: -50%;
20
- --pf-v5-c-search-input__utilities--MarginRight: var(--pf-v5-global--spacer--sm);
21
- --pf-v5-c-search-input__utilities--MarginLeft: var(--pf-v5-global--spacer--xs);
22
- --pf-v5-c-search-input__utilities--child--MarginLeft: var(--pf-v5-global--spacer--xs);
23
- --pf-v5-c-search-input__utilities--c-button--PaddingRight: var(--pf-v5-global--spacer--xs);
24
- --pf-v5-c-search-input__utilities--c-button--PaddingLeft: var(--pf-v5-global--spacer--xs);
25
- --pf-v5-c-search-input__menu-body--PaddingTop: var(--pf-v5-global--spacer--md);
26
- --pf-v5-c-search-input__menu-body--PaddingRight: var(--pf-v5-global--spacer--md);
27
- --pf-v5-c-search-input__menu-body--PaddingBottom: var(--pf-v5-global--spacer--md);
28
- --pf-v5-c-search-input__menu-body--PaddingLeft: var(--pf-v5-global--spacer--md);
29
- --pf-v5-c-search-input__menu--BackgroundColor: var(--pf-v5-global--BackgroundColor--light-100);
30
- --pf-v5-c-search-input__menu--BoxShadow: var(--pf-v5-global--BoxShadow--md);
31
- --pf-v5-c-search-input__menu--Top: calc(100% + var(--pf-v5-global--spacer--xs));
32
- --pf-v5-c-search-input__menu--ZIndex: var(--pf-v5-global--ZIndex--sm);
33
- --pf-v5-c-search-input--m-top__menu--Top: 0;
34
- --pf-v5-c-search-input--m-top__menu--TranslateY: calc(-100% - var(--pf-v5-global--spacer--xs));
35
- --pf-v5-c-search-input__menu-list--PaddingTop: var(--pf-v5-global--spacer--sm);
36
- --pf-v5-c-search-input__menu-list--PaddingBottom: var(--pf-v5-global--spacer--sm);
37
- --pf-v5-c-search-input__menu-item--PaddingTop: var(--pf-v5-global--spacer--sm);
38
- --pf-v5-c-search-input__menu-item--PaddingRight: var(--pf-v5-global--spacer--md);
39
- --pf-v5-c-search-input__menu-item--PaddingBottom: var(--pf-v5-global--spacer--sm);
40
- --pf-v5-c-search-input__menu-item--PaddingLeft: var(--pf-v5-global--spacer--md);
41
- --pf-v5-c-search-input__menu-item--Color: var(--pf-v5-global--Color--100);
42
- --pf-v5-c-search-input__menu-item--BackgroundColor: transparent;
43
- --pf-v5-c-search-input__menu-item--hover--BackgroundColor: var(--pf-v5-global--BackgroundColor--200);
44
- --pf-v5-c-search-input__menu-item--focus--BackgroundColor: var(--pf-v5-global--BackgroundColor--200);
45
- position: relative;
46
- width: 100%;
47
- }
48
-
49
- .pf-v5-c-search-input__bar {
50
- position: relative;
51
- display: flex;
52
- width: 100%;
53
- }
54
- .pf-v5-c-search-input__bar:hover {
55
- --pf-v5-c-search-input__text--after--BorderBottomColor: var(--pf-v5-c-search-input__bar--hover__text--after--BorderBottomColor);
56
- }
57
-
58
- .pf-v5-c-search-input__text {
59
- display: grid;
60
- flex: 1;
61
- grid-template-areas: "text-input";
62
- grid-template-columns: 1fr;
63
- }
64
- .pf-v5-c-search-input__text::before, .pf-v5-c-search-input__text::after {
65
- position: absolute;
66
- top: 0;
67
- right: 0;
68
- bottom: 0;
69
- left: 0;
70
- pointer-events: none;
71
- content: "";
72
- }
73
- .pf-v5-c-search-input__text::before {
74
- border: var(--pf-v5-c-search-input__text--before--BorderWidth) solid var(--pf-v5-c-search-input__text--before--BorderColor);
75
- }
76
- .pf-v5-c-search-input__text::after {
77
- border-bottom: var(--pf-v5-c-search-input__text--after--BorderBottomWidth) solid var(--pf-v5-c-search-input__text--after--BorderBottomColor);
78
- }
79
- .pf-v5-c-search-input__text:hover, .pf-v5-c-search-input__text:focus-within {
80
- --pf-v5-c-search-input__icon--Color: var(--pf-v5-c-search-input__text--hover__icon--Color);
81
- }
82
- .pf-v5-c-search-input__text:focus-within {
83
- --pf-v5-c-search-input__text--after--BorderBottomWidth: var(--pf-v5-c-search-input__text--focus-within--after--BorderBottomWidth);
84
- --pf-v5-c-search-input__text--after--BorderBottomColor: var(--pf-v5-c-search-input__text--focus-within--after--BorderBottomColor);
85
- }
86
-
87
- .pf-v5-c-search-input__icon {
88
- position: absolute;
89
- top: 50%;
90
- left: var(--pf-v5-c-search-input__icon--Left);
91
- color: var(--pf-v5-c-search-input__icon--Color);
92
- transform: translateY(var(--pf-v5-c-search-input__icon--TranslateY));
93
- }
94
-
95
- .pf-v5-c-search-input__text-input {
96
- overflow: hidden;
97
- text-overflow: ellipsis;
98
- white-space: nowrap;
99
- position: relative;
100
- width: 100%;
101
- min-width: var(--pf-v5-c-search-input__text-input--MinWidth);
102
- padding: var(--pf-v5-c-search-input__text-input--PaddingTop) var(--pf-v5-c-search-input__text-input--PaddingRight) var(--pf-v5-c-search-input__text-input--PaddingBottom) var(--pf-v5-c-search-input__text-input--PaddingLeft);
103
- background-color: var(--pf-v5-c-search-input__text-input--BackgroundColor);
104
- border: 0;
105
- }
106
- .pf-v5-c-search-input__text-input, .pf-v5-c-search-input__text-input.pf-m-hint {
107
- grid-area: text-input;
108
- }
109
- .pf-v5-c-search-input__text-input.pf-m-hint {
110
- color: var(--pf-v5-c-search-input__text-input--m-hint--Color);
111
- }
112
-
113
- .pf-v5-c-search-input__utilities {
114
- display: flex;
115
- margin-right: var(--pf-v5-c-search-input__utilities--MarginRight);
116
- margin-left: var(--pf-v5-c-search-input__utilities--MarginLeft);
117
- }
118
- .pf-v5-c-search-input__utilities > * + * {
119
- margin-left: var(--pf-v5-c-search-input__utilities--child--MarginLeft);
120
- }
121
- .pf-v5-c-search-input__utilities .pf-v5-c-button {
122
- --pf-v5-c-button--PaddingRight: var(--pf-v5-c-search-input__utilities--c-button--PaddingRight);
123
- --pf-v5-c-button--PaddingLeft: var(--pf-v5-c-search-input__utilities--c-button--PaddingLeft);
124
- }
125
-
126
- .pf-v5-c-search-input__nav {
127
- display: flex;
128
- }
129
-
130
- .pf-v5-c-search-input__count {
131
- display: flex;
132
- align-items: center;
133
- }
134
-
135
- .pf-v5-c-search-input__menu {
136
- position: absolute;
137
- top: var(--pf-v5-c-search-input__menu--Top);
138
- z-index: var(--pf-v5-c-search-input__menu--ZIndex);
139
- min-width: 100%;
140
- background-color: var(--pf-v5-c-search-input__menu--BackgroundColor);
141
- background-clip: padding-box;
142
- box-shadow: var(--pf-v5-c-search-input__menu--BoxShadow);
143
- }
144
- .pf-v5-c-search-input.pf-m-top .pf-v5-c-search-input__menu {
145
- --pf-v5-c-search-input__menu--Top: var(--pf-v5-c-search-input--m-top__menu--Top);
146
- transform: translateY(var(--pf-v5-c-search-input--m-top__menu--TranslateY));
147
- }
148
- .pf-v5-c-search-input__menu.pf-m-static {
149
- --pf-v5-c-search-input--m-top__menu--TranslateY: 0;
150
- position: static;
151
- top: auto;
152
- right: auto;
153
- bottom: auto;
154
- left: auto;
155
- z-index: auto;
156
- min-width: min-content;
157
- }
158
-
159
- .pf-v5-c-search-input__menu-body {
160
- padding: var(--pf-v5-c-search-input__menu-body--PaddingTop) var(--pf-v5-c-search-input__menu-body--PaddingRight) var(--pf-v5-c-search-input__menu-body--PaddingBottom) var(--pf-v5-c-search-input__menu-body--PaddingLeft);
161
- }
162
-
163
- .pf-v5-c-search-input__menu-list {
164
- padding-top: var(--pf-v5-c-search-input__menu-list--PaddingTop);
165
- padding-bottom: var(--pf-v5-c-search-input__menu-list--PaddingBottom);
166
- }
167
-
168
- .pf-v5-c-search-input__menu-item {
169
- display: flex;
170
- width: 100%;
171
- min-width: 0;
172
- padding-top: var(--pf-v5-c-search-input__menu-item--PaddingTop);
173
- padding-right: var(--pf-v5-c-search-input__menu-item--PaddingRight);
174
- padding-bottom: var(--pf-v5-c-search-input__menu-item--PaddingBottom);
175
- padding-left: var(--pf-v5-c-search-input__menu-item--PaddingLeft);
176
- color: var(--pf-v5-c-search-input__menu-item--Color);
177
- text-align: left;
178
- background-color: var(--pf-v5-c-search-input__menu-item--BackgroundColor);
179
- border: none;
180
- }
181
- .pf-v5-c-search-input__menu-item:hover {
182
- --pf-v5-c-search-input__menu-item--BackgroundColor: var(--pf-v5-c-search-input__menu-item--hover--BackgroundColor);
183
- }
184
- .pf-v5-c-search-input__menu-item:focus {
185
- --pf-v5-c-search-input__menu-item--BackgroundColor: var(--pf-v5-c-search-input__menu-item--focus--BackgroundColor);
186
- }
187
-
188
- .pf-v5-c-search-input__menu-item-text {
189
- flex-grow: 1;
190
- }
191
-
192
- :where(.pf-v5-theme-dark) .pf-v5-c-search-input {
193
- --pf-v5-c-search-input__text--before--BorderColor: transparent;
194
- --pf-v5-c-search-input__text--after--BorderBottomColor: var(--pf-v5-global--BorderColor--400);
195
- background-color: var(--pf-v5-global--BackgroundColor--400);
196
- }
197
- :where(.pf-v5-theme-dark) .pf-v5-c-search-input__text::before {
198
- border-bottom-color: var(--pf-v5-global--BorderColor--400);
199
- }
@@ -1,24 +0,0 @@
1
- import './search-input.css';
2
- declare const _default: {
3
- "button": "pf-v5-c-button",
4
- "modifiers": {
5
- "hint": "pf-m-hint",
6
- "top": "pf-m-top",
7
- "static": "pf-m-static"
8
- },
9
- "searchInput": "pf-v5-c-search-input",
10
- "searchInputBar": "pf-v5-c-search-input__bar",
11
- "searchInputCount": "pf-v5-c-search-input__count",
12
- "searchInputIcon": "pf-v5-c-search-input__icon",
13
- "searchInputMenu": "pf-v5-c-search-input__menu",
14
- "searchInputMenuBody": "pf-v5-c-search-input__menu-body",
15
- "searchInputMenuItem": "pf-v5-c-search-input__menu-item",
16
- "searchInputMenuItemText": "pf-v5-c-search-input__menu-item-text",
17
- "searchInputMenuList": "pf-v5-c-search-input__menu-list",
18
- "searchInputNav": "pf-v5-c-search-input__nav",
19
- "searchInputText": "pf-v5-c-search-input__text",
20
- "searchInputTextInput": "pf-v5-c-search-input__text-input",
21
- "searchInputUtilities": "pf-v5-c-search-input__utilities",
22
- "themeDark": "pf-v5-theme-dark"
23
- };
24
- export default _default;
@@ -1,25 +0,0 @@
1
- "use strict";
2
- exports.__esModule = true;
3
- require('./search-input.css');
4
- exports.default = {
5
- "button": "pf-v5-c-button",
6
- "modifiers": {
7
- "hint": "pf-m-hint",
8
- "top": "pf-m-top",
9
- "static": "pf-m-static"
10
- },
11
- "searchInput": "pf-v5-c-search-input",
12
- "searchInputBar": "pf-v5-c-search-input__bar",
13
- "searchInputCount": "pf-v5-c-search-input__count",
14
- "searchInputIcon": "pf-v5-c-search-input__icon",
15
- "searchInputMenu": "pf-v5-c-search-input__menu",
16
- "searchInputMenuBody": "pf-v5-c-search-input__menu-body",
17
- "searchInputMenuItem": "pf-v5-c-search-input__menu-item",
18
- "searchInputMenuItemText": "pf-v5-c-search-input__menu-item-text",
19
- "searchInputMenuList": "pf-v5-c-search-input__menu-list",
20
- "searchInputNav": "pf-v5-c-search-input__nav",
21
- "searchInputText": "pf-v5-c-search-input__text",
22
- "searchInputTextInput": "pf-v5-c-search-input__text-input",
23
- "searchInputUtilities": "pf-v5-c-search-input__utilities",
24
- "themeDark": "pf-v5-theme-dark"
25
- };
@@ -1,23 +0,0 @@
1
- import './search-input.css';
2
- export default {
3
- "button": "pf-v5-c-button",
4
- "modifiers": {
5
- "hint": "pf-m-hint",
6
- "top": "pf-m-top",
7
- "static": "pf-m-static"
8
- },
9
- "searchInput": "pf-v5-c-search-input",
10
- "searchInputBar": "pf-v5-c-search-input__bar",
11
- "searchInputCount": "pf-v5-c-search-input__count",
12
- "searchInputIcon": "pf-v5-c-search-input__icon",
13
- "searchInputMenu": "pf-v5-c-search-input__menu",
14
- "searchInputMenuBody": "pf-v5-c-search-input__menu-body",
15
- "searchInputMenuItem": "pf-v5-c-search-input__menu-item",
16
- "searchInputMenuItemText": "pf-v5-c-search-input__menu-item-text",
17
- "searchInputMenuList": "pf-v5-c-search-input__menu-list",
18
- "searchInputNav": "pf-v5-c-search-input__nav",
19
- "searchInputText": "pf-v5-c-search-input__text",
20
- "searchInputTextInput": "pf-v5-c-search-input__text-input",
21
- "searchInputUtilities": "pf-v5-c-search-input__utilities",
22
- "themeDark": "pf-v5-theme-dark"
23
- };
@@ -1,5 +0,0 @@
1
- #ws-core-c-form-control-input #input-custom-icon {
2
- --pf-v5-c-form-control--m-icon--BackgroundSizeX: var(--pf-v5-global--icon--FontSize--lg);
3
- --pf-v5-c-form-control--m-icon--BackgroundSizeY: var(--pf-v5-global--icon--FontSize--lg);
4
- --pf-v5-c-form-control--m-icon--BackgroundUrl: url('data:image/svg+xml;charset=utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"%3E%3Cpath fill="%23a18fff" d="M158.87.15c-16.16-1.52-31.2 8.42-35.33 24.12l-14.81 56.27c187.62 5.49 314.54 130.61 322.48 317l56.94-15.78c15.72-4.36 25.49-19.68 23.62-35.9C490.89 165.08 340.78 17.32 158.87.15zm-58.47 112L.55 491.64a16.21 16.21 0 0 0 20 19.75l379-105.1c-4.27-174.89-123.08-292.14-299.15-294.1zM128 416a32 32 0 1 1 32-32 32 32 0 0 1-32 32zm48-152a32 32 0 1 1 32-32 32 32 0 0 1-32 32zm104 104a32 32 0 1 1 32-32 32 32 0 0 1-32 32z"/%3E%3C/svg%3E');
5
- }
@@ -1,3 +0,0 @@
1
- import './FormControl.css';
2
- declare const _default: {};
3
- export default _default;
@@ -1,4 +0,0 @@
1
- "use strict";
2
- exports.__esModule = true;
3
- require('./FormControl.css');
4
- exports.default = {};
@@ -1,2 +0,0 @@
1
- import './FormControl.css';
2
- export default {};
@@ -1,12 +0,0 @@
1
- #ws-core-c-search-input-advanced-search-expanded,
2
- #ws-core-c-search-input-advanced-search-expanded-with-autocomplete {
3
- height: 550px;
4
- }
5
-
6
- #ws-core-c-search-input-autocomplete {
7
- height: 250px;
8
- }
9
-
10
- #ws-core-c-search-input-autocomplete-last-option-hint {
11
- height: 150px;
12
- }
@@ -1,3 +0,0 @@
1
- import './SearchInput.css';
2
- declare const _default: {};
3
- export default _default;
@@ -1,4 +0,0 @@
1
- "use strict";
2
- exports.__esModule = true;
3
- require('./SearchInput.css');
4
- exports.default = {};
@@ -1,2 +0,0 @@
1
- import './SearchInput.css';
2
- export default {};