@patternfly/react-styles 4.19.2 → 4.20.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md CHANGED
@@ -3,6 +3,41 @@
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.20.1 (2021-11-10)
7
+
8
+ **Note:** Version bump only for package @patternfly/react-styles
9
+
10
+
11
+
12
+
13
+
14
+ # 4.20.0 (2021-11-09)
15
+
16
+
17
+ ### Features
18
+
19
+ * **Table:** set default sort direction ([#6544](https://github.com/patternfly/patternfly-react/issues/6544)) ([9ee4942](https://github.com/patternfly/patternfly-react/commit/9ee49428c8e1041721f2a09f8176a5aba3335049))
20
+
21
+
22
+
23
+
24
+
25
+ ## 4.19.4 (2021-11-09)
26
+
27
+ **Note:** Version bump only for package @patternfly/react-styles
28
+
29
+
30
+
31
+
32
+
33
+ ## 4.19.3 (2021-11-08)
34
+
35
+ **Note:** Version bump only for package @patternfly/react-styles
36
+
37
+
38
+
39
+
40
+
6
41
  ## 4.19.2 (2021-11-08)
7
42
 
8
43
  **Note:** Version bump only for package @patternfly/react-styles
@@ -55,6 +55,10 @@
55
55
  --pf-c-card--m-selectable-raised--m-selected-raised--before--Transition: transform .25s linear;
56
56
  --pf-c-card--m-selectable-raised--m-selected-raised--before--TranslateY: calc(var(--pf-c-card--m-selectable-raised--m-selected-raised--TranslateY) * -1);
57
57
  --pf-c-card--m-selectable-raised--m-selected-raised--before--ScaleY: 2;
58
+ --pf-c-card--m-non-selectable-raised--BackgroundColor: var(--pf-global--BackgroundColor--light-200);
59
+ --pf-c-card--m-non-selectable-raised--before--BackgroundColor: var(--pf-global--disabled-color--200);
60
+ --pf-c-card--m-non-selectable-raised--before--ScaleY: 2;
61
+ --pf-c-card--m-flat--m-non-selectable-raised--before--BorderColor: var(--pf-global--disabled-color--200);
58
62
  --pf-c-card--m-compact__body--FontSize: var(--pf-global--FontSize--sm);
59
63
  --pf-c-card--m-compact__footer--FontSize: var(--pf-global--FontSize--sm);
60
64
  --pf-c-card--m-compact--first-child--PaddingTop: var(--pf-global--spacer--md);
@@ -112,10 +116,10 @@
112
116
  content: "";
113
117
  background-color: var(--pf-c-card--m-selectable--m-selected--before--BackgroundColor);
114
118
  }
115
- .pf-c-card.pf-m-hoverable-raised, .pf-c-card.pf-m-selectable-raised {
119
+ .pf-c-card.pf-m-hoverable-raised, .pf-c-card.pf-m-selectable-raised, .pf-c-card.pf-m-non-selectable-raised {
116
120
  position: relative;
117
121
  }
118
- .pf-c-card.pf-m-hoverable-raised::before, .pf-c-card.pf-m-selectable-raised::before {
122
+ .pf-c-card.pf-m-hoverable-raised::before, .pf-c-card.pf-m-selectable-raised::before, .pf-c-card.pf-m-non-selectable-raised::before {
119
123
  position: absolute;
120
124
  right: var(--pf-c-card--m-selectable-raised--before--Right);
121
125
  bottom: var(--pf-c-card--m-selectable-raised--before--Bottom);
@@ -133,12 +137,6 @@
133
137
  }
134
138
  .pf-c-card.pf-m-selectable-raised {
135
139
  cursor: pointer;
136
- /*
137
- &:active {
138
- --pf-c-card--BoxShadow: var(--pf-c-card--m-selectable-raised--active--BoxShadow);
139
- --pf-c-card--m-selectable-raised--before--BackgroundColor: var(--pf-c-card--m-selectable-raised--active--before--BackgroundColor);
140
- }
141
- */
142
140
  }
143
141
  .pf-c-card.pf-m-selectable-raised:hover {
144
142
  --pf-c-card--BoxShadow: var(--pf-c-card--m-selectable-raised--hover--BoxShadow);
@@ -148,7 +146,11 @@
148
146
  --pf-c-card--BoxShadow: var(--pf-c-card--m-selectable-raised--focus--BoxShadow);
149
147
  --pf-c-card--m-selectable-raised--before--BackgroundColor: var(--pf-c-card--m-selectable-raised--focus--before--BackgroundColor);
150
148
  }
151
- .pf-c-card.pf-m-selectable-raised.pf-m-selected-raised, .pf-c-card.pf-m-selectable-raised:active {
149
+ .pf-c-card.pf-m-selectable-raised:active {
150
+ --pf-c-card--BoxShadow: var(--pf-c-card--m-selectable-raised--active--BoxShadow);
151
+ --pf-c-card--m-selectable-raised--before--BackgroundColor: var(--pf-c-card--m-selectable-raised--active--before--BackgroundColor);
152
+ }
153
+ .pf-c-card.pf-m-selectable-raised.pf-m-selected-raised {
152
154
  --pf-c-card--m-selectable-raised--before--BackgroundColor: var(--pf-c-card--m-selectable-raised--m-selected-raised--before--BackgroundColor);
153
155
  --pf-c-card--m-selectable-raised--before--Transition: var(--pf-c-card--m-selectable-raised--m-selected-raised--before--Transition);
154
156
  --pf-c-card--m-selectable-raised--before--TranslateY: var(--pf-c-card--m-selectable-raised--m-selected-raised--before--TranslateY);
@@ -157,6 +159,13 @@
157
159
  transition: var(--pf-c-card--m-selectable-raised--m-selected-raised--Transition);
158
160
  transform: translateY(var(--pf-c-card--m-selectable-raised--m-selected-raised--TranslateY));
159
161
  }
162
+ .pf-c-card.pf-m-non-selectable-raised {
163
+ --pf-c-card--BackgroundColor: var(--pf-c-card--m-non-selectable-raised--BackgroundColor);
164
+ --pf-c-card--BoxShadow: none;
165
+ --pf-c-card--m-flat--BorderColor: var(--pf-c-card--m-flat--m-non-selectable-raised--before--BorderColor);
166
+ --pf-c-card--m-selectable-raised--before--BackgroundColor: var(--pf-c-card--m-non-selectable-raised--before--BackgroundColor);
167
+ --pf-c-card--m-selectable-raised--before--ScaleY: var(--pf-c-card--m-non-selectable-raised--before--ScaleY);
168
+ }
160
169
  .pf-c-card.pf-m-compact {
161
170
  --pf-c-card__body--FontSize: var(--pf-c-card--m-compact__body--FontSize);
162
171
  --pf-c-card__footer--FontSize: var(--pf-c-card--m-compact__footer--FontSize);
@@ -16,6 +16,7 @@ declare const _default: {
16
16
  "selected": "pf-m-selected",
17
17
  "hoverableRaised": "pf-m-hoverable-raised",
18
18
  "selectableRaised": "pf-m-selectable-raised",
19
+ "nonSelectableRaised": "pf-m-non-selectable-raised",
19
20
  "selectedRaised": "pf-m-selected-raised",
20
21
  "compact": "pf-m-compact",
21
22
  "displayLg": "pf-m-display-lg",
@@ -18,6 +18,7 @@ exports.default = {
18
18
  "selected": "pf-m-selected",
19
19
  "hoverableRaised": "pf-m-hoverable-raised",
20
20
  "selectableRaised": "pf-m-selectable-raised",
21
+ "nonSelectableRaised": "pf-m-non-selectable-raised",
21
22
  "selectedRaised": "pf-m-selected-raised",
22
23
  "compact": "pf-m-compact",
23
24
  "displayLg": "pf-m-display-lg",
@@ -1,4 +1,14 @@
1
- .pf-c-log-viewer.pf-m-dark .pf-c-log-viewer__main {
1
+ .pf-c-log-viewer__header {
2
+ --pf-global--Color--100: var(--pf-global--Color--dark-100);
3
+ --pf-global--Color--200: var(--pf-global--Color--dark-200);
4
+ --pf-global--BorderColor--100: var(--pf-global--BorderColor--dark-100);
5
+ --pf-global--primary-color--100: var(--pf-global--primary-color--dark-100);
6
+ --pf-global--link--Color: var(--pf-global--link--Color--dark);
7
+ --pf-global--link--Color--hover: var(--pf-global--link--Color--dark--hover);
8
+ --pf-global--BackgroundColor--100: var(--pf-global--BackgroundColor--light-100);
9
+ }
10
+
11
+ .pf-c-log-viewer.pf-m-dark {
2
12
  --pf-global--Color--100: var(--pf-global--Color--light-100);
3
13
  --pf-global--Color--200: var(--pf-global--Color--light-200);
4
14
  --pf-global--BorderColor--100: var(--pf-global--BorderColor--light-100);
@@ -7,10 +17,10 @@
7
17
  --pf-global--link--Color--hover: var(--pf-global--link--Color--light);
8
18
  --pf-global--BackgroundColor--100: var(--pf-global--BackgroundColor--dark-100);
9
19
  }
10
- .pf-c-log-viewer.pf-m-dark .pf-c-log-viewer__main .pf-c-card {
20
+ .pf-c-log-viewer.pf-m-dark .pf-c-card {
11
21
  --pf-c-card--BackgroundColor: var(--pf-global--BackgroundColor--dark-transparent-200);
12
22
  }
13
- .pf-c-log-viewer.pf-m-dark .pf-c-log-viewer__main .pf-c-button {
23
+ .pf-c-log-viewer.pf-m-dark .pf-c-button {
14
24
  --pf-c-button--m-primary--Color: var(--pf-global--primary-color--dark-100);
15
25
  --pf-c-button--m-primary--hover--Color: var(--pf-global--primary-color--dark-100);
16
26
  --pf-c-button--m-primary--focus--Color: var(--pf-global--primary-color--dark-100);
@@ -38,12 +48,14 @@
38
48
  --pf-c-log-viewer__main--BorderWidth: var(--pf-global--BorderWidth--sm);
39
49
  --pf-c-log-viewer__main--BorderColor: var(--pf-global--BorderColor--100);
40
50
  --pf-c-log-viewer__scroll-container--Height: 37.5rem;
51
+ --pf-c-log-viewer__scroll-container--PaddingTop: var(--pf-global--spacer--sm);
52
+ --pf-c-log-viewer__scroll-container--PaddingBottom: var(--pf-global--spacer--sm);
41
53
  --pf-c-log-viewer--m-line-numbers__main--before--Top: var(--pf-global--spacer--sm);
42
54
  --pf-c-log-viewer--m-line-numbers__main--before--Bottom: var(--pf-global--spacer--sm);
43
55
  --pf-c-log-viewer--m-line-numbers__main--before--Width: var(--pf-global--BorderWidth--sm);
44
56
  --pf-c-log-viewer--m-line-numbers__main--before--BackgroundColor: var(--pf-global--BorderColor--100);
45
- --pf-c-log-viewer__scroll-container--PaddingTop: var(--pf-global--spacer--md);
46
- --pf-c-log-viewer__scroll-container--PaddingBottom: var(--pf-global--spacer--md);
57
+ --pf-c-log-viewer__list--Height: auto;
58
+ --pf-c-log-viewer--m-line-numbers__list--Left: var(--pf-c-log-viewer__index--Width);
47
59
  --pf-c-log-viewer__index--Display: none;
48
60
  --pf-c-log-viewer__index--Width: 4.0625rem;
49
61
  --pf-c-log-viewer__index--PaddingRight: var(--pf-global--spacer--xl);
@@ -51,11 +63,16 @@
51
63
  --pf-c-log-viewer__index--FontFamily: var(--pf-global--FontFamily--monospace);
52
64
  --pf-c-log-viewer__index--FontSize: var(--pf-global--FontSize--sm);
53
65
  --pf-c-log-viewer__index--Color: var(--pf-global--Color--200);
66
+ --pf-c-log-viewer__index--BackgroundColor: var(--pf-global--BackgroundColor--100);
54
67
  --pf-c-log-viewer__text--PaddingRight: var(--pf-global--spacer--md);
55
68
  --pf-c-log-viewer__text--PaddingLeft: var(--pf-global--spacer--md);
56
69
  --pf-c-log-viewer__text--FontFamily: var(--pf-global--FontFamily--monospace);
57
70
  --pf-c-log-viewer__text--FontSize: var(--pf-global--FontSize--sm);
58
71
  --pf-c-log-viewer__text--Color: var(--pf-global--Color--100);
72
+ --pf-c-log-viewer__text--WordBreak: break-all;
73
+ --pf-c-log-viewer__text--WhiteSpace: break-spaces;
74
+ --pf-c-log-viewer__text--LineBreak: anywhere;
75
+ --pf-c-log-viewer--m-nowrap__text--WhiteSpace: nowrap;
59
76
  --pf-c-log-viewer__string--m-match--Color: var(--pf-global--palette--gold-700);
60
77
  --pf-c-log-viewer__string--m-match--BackgroundColor: var(--pf-global--palette--gold-100);
61
78
  --pf-c-log-viewer__string--m-current--Color: var(--pf-global--palette--gold-700);
@@ -74,22 +91,24 @@
74
91
  max-height: var(--pf-c-log-viewer--MaxHeight);
75
92
  }
76
93
  .pf-c-log-viewer.pf-m-dark {
77
- --pf-c-log-viewer__main--BorderWidth: var(--pf-c-log-viewer--m-dark__main--BorderWidth);
78
- }
79
- .pf-c-log-viewer.pf-m-dark .pf-c-log-viewer__main {
80
- --pf-c-log-viewer__main--BackgroundColor: var(--pf-global--BackgroundColor--100);
81
- --pf-c-log-viewer__main--BorderColor: var(--pf-global--BorderColor--100);
82
- --pf-c-log-viewer__text--Color: var(--pf-global--Color--100);
83
- --pf-c-log-viewer__index--Color: var(--pf-global--Color--200);
84
- --pf-c-log-viewer--m-line-numbers__main--before--BackgroundColor: var(--pf-global--BorderColor--100);
85
94
  color: var(--pf-global--Color--100);
95
+ --pf-c-log-viewer__main--BorderWidth: var(--pf-c-log-viewer--m-dark__main--BorderWidth);
86
96
  }
87
97
  .pf-c-log-viewer.pf-m-wrap-text {
88
98
  word-break: break-all;
89
99
  }
100
+ .pf-c-log-viewer.pf-m-nowrap {
101
+ --pf-c-log-viewer__text--WhiteSpace: var(--pf-c-log-viewer--m-nowrap__text--WhiteSpace);
102
+ }
90
103
  .pf-c-log-viewer.pf-m-line-numbers {
91
104
  --pf-c-log-viewer__index--Display: var(--pf-c-log-viewer--m-line-numbers__index--Display);
92
105
  }
106
+ .pf-c-log-viewer.pf-m-line-numbers .pf-c-log-viewer__list {
107
+ position: absolute;
108
+ right: 0;
109
+ left: var(--pf-c-log-viewer--m-line-numbers__list--Left);
110
+ overflow: auto;
111
+ }
93
112
  .pf-c-log-viewer .pf-c-toolbar {
94
113
  --pf-c-toolbar--PaddingTop: var(--pf-c-log-viewer--c-toolbar--PaddingTop);
95
114
  --pf-c-toolbar--PaddingBottom: var(--pf-c-log-viewer--c-toolbar--PaddingBottom);
@@ -106,6 +125,7 @@
106
125
  }
107
126
 
108
127
  .pf-c-log-viewer__header {
128
+ color: var(--pf-global--Color--100);
109
129
  margin-bottom: var(--pf-c-log-viewer__header--MarginBottom);
110
130
  }
111
131
 
@@ -130,19 +150,23 @@
130
150
  }
131
151
 
132
152
  .pf-c-log-viewer__scroll-container {
153
+ position: relative;
133
154
  height: var(--pf-c-log-viewer__scroll-container--Height);
134
155
  padding-top: var(--pf-c-log-viewer__scroll-container--PaddingTop);
135
156
  padding-bottom: var(--pf-c-log-viewer__scroll-container--PaddingBottom);
136
157
  overflow: auto;
158
+ will-change: transform;
159
+ direction: ltr;
137
160
  }
138
161
 
139
162
  .pf-c-log-viewer__list {
140
163
  position: relative;
164
+ height: var(--pf-c-log-viewer__list--Height);
141
165
  }
142
166
 
143
- .pf-m-line-numbers .pf-c-log-viewer__list-item {
144
- display: grid;
145
- grid-template-columns: max-content 1fr;
167
+ .pf-c-log-viewer__list-item {
168
+ left: 0;
169
+ width: 100%;
146
170
  }
147
171
 
148
172
  .pf-c-log-viewer__string.pf-m-match {
@@ -155,6 +179,8 @@
155
179
  }
156
180
 
157
181
  .pf-c-log-viewer__index {
182
+ position: fixed;
183
+ left: 0;
158
184
  display: var(--pf-c-log-viewer__index--Display);
159
185
  width: var(--pf-c-log-viewer__index--Width);
160
186
  padding-right: var(--pf-c-log-viewer__index--PaddingRight);
@@ -162,6 +188,7 @@
162
188
  font-family: var(--pf-c-log-viewer__index--FontFamily);
163
189
  font-size: var(--pf-c-log-viewer__index--FontSize);
164
190
  color: var(--pf-c-log-viewer__index--Color);
191
+ background-color: var(--pf-c-log-viewer__index--BackgroundColor);
165
192
  }
166
193
 
167
194
  .pf-c-log-viewer__text {
@@ -171,9 +198,9 @@
171
198
  font-family: var(--pf-c-log-viewer__text--FontFamily);
172
199
  font-size: var(--pf-c-log-viewer__text--FontSize);
173
200
  color: var(--pf-c-log-viewer__text--Color);
174
- word-break: break-all;
175
- white-space: break-spaces;
176
- line-break: anywhere;
201
+ word-break: var(--pf-c-log-viewer__text--WordBreak);
202
+ white-space: var(--pf-c-log-viewer__text--WhiteSpace);
203
+ line-break: var(--pf-c-log-viewer__text--LineBreak);
177
204
  }
178
205
 
179
206
  .pf-c-log-viewer__timestamp {
@@ -15,6 +15,7 @@ declare const _default: {
15
15
  "modifiers": {
16
16
  "dark": "pf-m-dark",
17
17
  "wrapText": "pf-m-wrap-text",
18
+ "nowrap": "pf-m-nowrap",
18
19
  "lineNumbers": "pf-m-line-numbers",
19
20
  "match": "pf-m-match",
20
21
  "current": "pf-m-current"
@@ -17,6 +17,7 @@ exports.default = {
17
17
  "modifiers": {
18
18
  "dark": "pf-m-dark",
19
19
  "wrapText": "pf-m-wrap-text",
20
+ "nowrap": "pf-m-nowrap",
20
21
  "lineNumbers": "pf-m-line-numbers",
21
22
  "match": "pf-m-match",
22
23
  "current": "pf-m-current"
@@ -96,7 +96,7 @@
96
96
  --pf-c-menu-toggle--m-expanded--Color: var(--pf-c-menu-toggle--m-primary--m-expanded--Color);
97
97
  --pf-c-menu-toggle--m-expanded--BackgroundColor: var(--pf-c-menu-toggle--m-primary--m-expanded--BackgroundColor);
98
98
  }
99
- .pf-c-menu-toggle.pf-m-plain {
99
+ .pf-c-menu-toggle.pf-m-plain:not(.pf-m-text) {
100
100
  --pf-c-menu-toggle--Color: var(--pf-c-menu-toggle--m-plain--Color);
101
101
  --pf-c-menu-toggle--hover--Color: var(--pf-c-menu-toggle--m-plain--hover--Color);
102
102
  --pf-c-menu-toggle--focus--Color: var(--pf-c-menu-toggle--m-plain--hover--Color);
@@ -9,6 +9,7 @@ declare const _default: {
9
9
  "modifiers": {
10
10
  "primary": "pf-m-primary",
11
11
  "plain": "pf-m-plain",
12
+ "text": "pf-m-text",
12
13
  "expanded": "pf-m-expanded",
13
14
  "fullHeight": "pf-m-full-height"
14
15
  }
@@ -11,6 +11,7 @@ exports.default = {
11
11
  "modifiers": {
12
12
  "primary": "pf-m-primary",
13
13
  "plain": "pf-m-plain",
14
+ "text": "pf-m-text",
14
15
  "expanded": "pf-m-expanded",
15
16
  "fullHeight": "pf-m-full-height"
16
17
  }
@@ -477,13 +477,11 @@
477
477
  }
478
478
 
479
479
  .pf-c-nav__item {
480
- --pf-c-nav__item__toggle-icon--Rotate: 0;
481
480
  position: relative;
482
481
  margin-top: var(--pf-c-nav__item--MarginTop);
483
482
  }
484
483
  .pf-c-nav__item.pf-m-expandable {
485
484
  --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);
487
485
  }
488
486
  .pf-c-nav__item.pf-m-expandable::before {
489
487
  position: absolute;
@@ -493,6 +491,9 @@
493
491
  content: "";
494
492
  border-bottom: var(--pf-c-nav__item--before--BorderWidth) solid var(--pf-c-nav__item--before--BorderColor);
495
493
  }
494
+ .pf-c-nav__item .pf-c-nav__item:not(.pf-m-expanded) .pf-c-nav__toggle-icon {
495
+ transform: rotate(0);
496
+ }
496
497
  .pf-c-nav__item .pf-c-nav__item.pf-m-expandable {
497
498
  --pf-c-nav__toggle--FontSize: var(--pf-c-nav__item__item__toggle--FontSize);
498
499
  --pf-c-nav__link--PaddingRight: var(--pf-c-nav__item__item__link--PaddingRight);
@@ -742,10 +743,7 @@
742
743
  display: inline-block;
743
744
  transition: var(--pf-c-nav__toggle-icon--Transition);
744
745
  }
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 {
746
+ .pf-c-nav__item.pf-m-expanded .pf-c-nav__toggle-icon {
749
747
  transform: rotate(var(--pf-c-nav__item--m-expanded__toggle-icon--Rotate));
750
748
  }
751
749
 
@@ -12,11 +12,11 @@ declare const _default: {
12
12
  "scrollable": "pf-m-scrollable",
13
13
  "overflowHidden": "pf-m-overflow-hidden",
14
14
  "expandable": "pf-m-expandable",
15
+ "expanded": "pf-m-expanded",
15
16
  "flyout": "pf-m-flyout",
16
17
  "top": "pf-m-top",
17
18
  "left": "pf-m-left",
18
19
  "drilldown": "pf-m-drilldown",
19
- "expanded": "pf-m-expanded",
20
20
  "current": "pf-m-current",
21
21
  "start": "pf-m-start"
22
22
  },
@@ -14,11 +14,11 @@ exports.default = {
14
14
  "scrollable": "pf-m-scrollable",
15
15
  "overflowHidden": "pf-m-overflow-hidden",
16
16
  "expandable": "pf-m-expandable",
17
+ "expanded": "pf-m-expanded",
17
18
  "flyout": "pf-m-flyout",
18
19
  "top": "pf-m-top",
19
20
  "left": "pf-m-left",
20
21
  "drilldown": "pf-m-drilldown",
21
- "expanded": "pf-m-expanded",
22
22
  "current": "pf-m-current",
23
23
  "start": "pf-m-start"
24
24
  },
@@ -110,37 +110,29 @@
110
110
  justify-content: space-between;
111
111
  min-width: var(--pf-c-options-menu__toggle--MinWidth);
112
112
  max-width: 100%;
113
- padding-left: var(--pf-c-options-menu__toggle--PaddingLeft);
113
+ padding: var(--pf-c-options-menu__toggle--PaddingTop) var(--pf-c-options-menu__toggle--PaddingRight) var(--pf-c-options-menu__toggle--PaddingBottom) var(--pf-c-options-menu__toggle--PaddingLeft);
114
114
  line-height: var(--pf-c-options-menu__toggle--LineHeight);
115
115
  color: var(--pf-c-options-menu__toggle--Color);
116
116
  background-color: var(--pf-c-options-menu__toggle--BackgroundColor);
117
117
  border: none;
118
118
  }
119
- .pf-c-options-menu__toggle:not(.pf-m-text) {
120
- padding-top: var(--pf-c-options-menu__toggle--PaddingTop);
121
- padding-right: var(--pf-c-options-menu__toggle--PaddingRight);
122
- padding-bottom: var(--pf-c-options-menu__toggle--PaddingBottom);
123
- }
124
119
  .pf-c-options-menu.pf-m-expanded > .pf-c-options-menu__toggle::before {
125
120
  --pf-c-options-menu__toggle--BorderBottomColor: var(--pf-c-options-menu__toggle--expanded--BorderBottomColor);
126
121
  border-bottom-width: var(--pf-c-options-menu__toggle--expanded--BorderBottomWidth);
127
122
  }
128
- .pf-c-options-menu__toggle.pf-m-plain {
123
+ .pf-c-options-menu__toggle.pf-m-plain:not(.pf-m-text) {
129
124
  --pf-c-options-menu__toggle--PaddingRight: var(--pf-c-options-menu__toggle--m-plain--PaddingRight);
130
125
  --pf-c-options-menu__toggle--PaddingLeft: var(--pf-c-options-menu__toggle--m-plain--PaddingLeft);
131
126
  display: inline-block;
132
- }
133
- .pf-c-options-menu__toggle.pf-m-plain:not(.pf-m-text) {
134
- justify-content: center;
135
127
  color: var(--pf-c-options-menu__toggle--m-plain--Color);
136
128
  }
137
- .pf-c-options-menu__toggle.pf-m-plain .pf-c-options-menu__toggle-button-icon {
129
+ .pf-c-options-menu__toggle.pf-m-plain:not(.pf-m-text) .pf-c-options-menu__toggle-button-icon {
138
130
  line-height: var(--pf-c-options-menu__toggle--LineHeight);
139
131
  }
140
- .pf-c-options-menu__toggle.pf-m-plain:hover, .pf-c-options-menu__toggle.pf-m-plain:active, .pf-c-options-menu__toggle.pf-m-plain.pf-m-active, .pf-c-options-menu__toggle.pf-m-plain:focus, .pf-c-options-menu.pf-m-expanded > .pf-c-options-menu__toggle.pf-m-plain {
132
+ .pf-c-options-menu__toggle.pf-m-plain:not(.pf-m-text):hover, .pf-c-options-menu__toggle.pf-m-plain:not(.pf-m-text):active, .pf-c-options-menu__toggle.pf-m-plain:not(.pf-m-text).pf-m-active, .pf-c-options-menu__toggle.pf-m-plain:not(.pf-m-text):focus, .pf-c-options-menu.pf-m-expanded > .pf-c-options-menu__toggle.pf-m-plain:not(.pf-m-text) {
141
133
  --pf-c-options-menu__toggle--m-plain--Color: var(--pf-c-options-menu__toggle--m-plain--hover--Color);
142
134
  }
143
- .pf-c-options-menu__toggle.pf-m-plain.pf-m-disabled, .pf-c-options-menu__toggle.pf-m-plain:disabled {
135
+ .pf-c-options-menu__toggle.pf-m-plain:not(.pf-m-text).pf-m-disabled, .pf-c-options-menu__toggle.pf-m-plain:not(.pf-m-text):disabled {
144
136
  --pf-c-options-menu__toggle--m-plain--Color: var(--pf-c-options-menu__toggle--m-plain--disabled--Color);
145
137
  }
146
138
  .pf-c-options-menu__toggle.pf-m-disabled, .pf-c-options-menu__toggle:disabled {
@@ -1,4 +1,5 @@
1
1
  .pf-c-text-input-group {
2
+ --pf-c-text-input-group--BackgroundColor: var(--pf-global--BackgroundColor--100);
2
3
  --pf-c-text-input-group__text--before--BorderWidth: var(--pf-global--BorderWidth--sm);
3
4
  --pf-c-text-input-group__text--before--BorderColor: var(--pf-global--BorderColor--300);
4
5
  --pf-c-text-input-group__text--after--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
@@ -23,12 +24,24 @@
23
24
  --pf-c-text-input-group__utilities--child--MarginLeft: var(--pf-global--spacer--xs);
24
25
  --pf-c-text-input-group__utilities--c-button--PaddingRight: var(--pf-global--spacer--xs);
25
26
  --pf-c-text-input-group__utilities--c-button--PaddingLeft: var(--pf-global--spacer--xs);
27
+ --pf-c-text-input-group--m-disabled--Color: var(--pf-global--disabled-color--100);
28
+ --pf-c-text-input-group--m-disabled--BackgroundColor: var(--pf-global--disabled-color--300);
26
29
  position: relative;
27
30
  display: flex;
31
+ color: var(--pf-c-text-input-group--Color, inherit);
32
+ background-color: var(--pf-c-text-input-group--BackgroundColor);
28
33
  }
29
34
  .pf-c-text-input-group:hover {
30
35
  --pf-c-text-input-group__text--after--BorderBottomColor: var(--pf-c-text-input-group--hover__text--after--BorderBottomColor);
31
36
  }
37
+ .pf-c-text-input-group.pf-m-disabled {
38
+ --pf-c-text-input-group__text--before--BorderWidth: 0;
39
+ --pf-c-text-input-group__text--after--BorderBottomWidth: 0;
40
+ --pf-c-text-input-group--Color: var(--pf-c-text-input-group--m-disabled--Color);
41
+ --pf-c-text-input-group__icon--Color: var(--pf-c-text-input-group--m-disabled--Color);
42
+ --pf-c-text-input-group--BackgroundColor: var(--pf-c-text-input-group--m-disabled--BackgroundColor);
43
+ pointer-events: none;
44
+ }
32
45
 
33
46
  .pf-c-text-input-group__main {
34
47
  display: flex;
@@ -4,6 +4,7 @@ declare const _default: {
4
4
  "chipGroup": "pf-c-chip-group",
5
5
  "chipGroupList": "pf-c-chip-group__list",
6
6
  "modifiers": {
7
+ "disabled": "pf-m-disabled",
7
8
  "icon": "pf-m-icon",
8
9
  "hint": "pf-m-hint"
9
10
  },
@@ -6,6 +6,7 @@ exports.default = {
6
6
  "chipGroup": "pf-c-chip-group",
7
7
  "chipGroupList": "pf-c-chip-group__list",
8
8
  "modifiers": {
9
+ "disabled": "pf-m-disabled",
9
10
  "icon": "pf-m-icon",
10
11
  "hint": "pf-m-hint"
11
12
  },
@@ -26,26 +26,40 @@
26
26
  max-width: var(--pf-c-tooltip--MaxWidth);
27
27
  box-shadow: var(--pf-c-tooltip--BoxShadow);
28
28
  }
29
- .pf-c-tooltip.pf-m-top .pf-c-tooltip__arrow {
29
+ .pf-c-tooltip.pf-m-top .pf-c-tooltip__arrow, .pf-c-tooltip.pf-m-top-left .pf-c-tooltip__arrow, .pf-c-tooltip.pf-m-top-right .pf-c-tooltip__arrow {
30
30
  bottom: 0;
31
31
  left: 50%;
32
32
  transform: translateX(var(--pf-c-tooltip__arrow--m-top--TranslateX)) translateY(var(--pf-c-tooltip__arrow--m-top--TranslateY)) rotate(var(--pf-c-tooltip__arrow--m-top--Rotate));
33
33
  }
34
- .pf-c-tooltip.pf-m-bottom .pf-c-tooltip__arrow {
34
+ .pf-c-tooltip.pf-m-bottom .pf-c-tooltip__arrow, .pf-c-tooltip.pf-m-bottom-left .pf-c-tooltip__arrow, .pf-c-tooltip.pf-m-bottom-right .pf-c-tooltip__arrow {
35
35
  top: 0;
36
36
  left: 50%;
37
37
  transform: translateX(var(--pf-c-tooltip__arrow--m-bottom--TranslateX)) translateY(var(--pf-c-tooltip__arrow--m-bottom--TranslateY)) rotate(var(--pf-c-tooltip__arrow--m-bottom--Rotate));
38
38
  }
39
- .pf-c-tooltip.pf-m-left .pf-c-tooltip__arrow {
39
+ .pf-c-tooltip.pf-m-left .pf-c-tooltip__arrow, .pf-c-tooltip.pf-m-left-top .pf-c-tooltip__arrow, .pf-c-tooltip.pf-m-left-bottom .pf-c-tooltip__arrow {
40
40
  top: 50%;
41
41
  right: 0;
42
42
  transform: translateX(var(--pf-c-tooltip__arrow--m-left--TranslateX)) translateY(var(--pf-c-tooltip__arrow--m-left--TranslateY)) rotate(var(--pf-c-tooltip__arrow--m-left--Rotate));
43
43
  }
44
- .pf-c-tooltip.pf-m-right .pf-c-tooltip__arrow {
44
+ .pf-c-tooltip.pf-m-right .pf-c-tooltip__arrow, .pf-c-tooltip.pf-m-right-top .pf-c-tooltip__arrow, .pf-c-tooltip.pf-m-right-bottom .pf-c-tooltip__arrow {
45
45
  top: 50%;
46
46
  left: 0;
47
47
  transform: translateX(var(--pf-c-tooltip__arrow--m-right--TranslateX)) translateY(var(--pf-c-tooltip__arrow--m-right--TranslateY)) rotate(var(--pf-c-tooltip__arrow--m-right--Rotate));
48
48
  }
49
+ .pf-c-tooltip.pf-m-left-top .pf-c-tooltip__arrow, .pf-c-tooltip.pf-m-right-top .pf-c-tooltip__arrow {
50
+ top: var(--pf-c-tooltip__arrow--Height);
51
+ }
52
+ .pf-c-tooltip.pf-m-left-bottom .pf-c-tooltip__arrow, .pf-c-tooltip.pf-m-right-bottom .pf-c-tooltip__arrow {
53
+ top: auto;
54
+ bottom: 0;
55
+ }
56
+ .pf-c-tooltip.pf-m-top-left .pf-c-tooltip__arrow, .pf-c-tooltip.pf-m-bottom-left .pf-c-tooltip__arrow {
57
+ left: var(--pf-c-tooltip__arrow--Width);
58
+ }
59
+ .pf-c-tooltip.pf-m-top-right .pf-c-tooltip__arrow, .pf-c-tooltip.pf-m-bottom-right .pf-c-tooltip__arrow {
60
+ right: 0;
61
+ left: auto;
62
+ }
49
63
 
50
64
  .pf-c-tooltip__content {
51
65
  position: relative;
@@ -2,9 +2,17 @@ import './tooltip.css';
2
2
  declare const _default: {
3
3
  "modifiers": {
4
4
  "top": "pf-m-top",
5
+ "topLeft": "pf-m-top-left",
6
+ "topRight": "pf-m-top-right",
5
7
  "bottom": "pf-m-bottom",
8
+ "bottomLeft": "pf-m-bottom-left",
9
+ "bottomRight": "pf-m-bottom-right",
6
10
  "left": "pf-m-left",
11
+ "leftTop": "pf-m-left-top",
12
+ "leftBottom": "pf-m-left-bottom",
7
13
  "right": "pf-m-right",
14
+ "rightTop": "pf-m-right-top",
15
+ "rightBottom": "pf-m-right-bottom",
8
16
  "textAlignLeft": "pf-m-text-align-left"
9
17
  },
10
18
  "tooltip": "pf-c-tooltip",
@@ -4,9 +4,17 @@ require('./tooltip.css');
4
4
  exports.default = {
5
5
  "modifiers": {
6
6
  "top": "pf-m-top",
7
+ "topLeft": "pf-m-top-left",
8
+ "topRight": "pf-m-top-right",
7
9
  "bottom": "pf-m-bottom",
10
+ "bottomLeft": "pf-m-bottom-left",
11
+ "bottomRight": "pf-m-bottom-right",
8
12
  "left": "pf-m-left",
13
+ "leftTop": "pf-m-left-top",
14
+ "leftBottom": "pf-m-left-bottom",
9
15
  "right": "pf-m-right",
16
+ "rightTop": "pf-m-right-top",
17
+ "rightBottom": "pf-m-right-bottom",
10
18
  "textAlignLeft": "pf-m-text-align-left"
11
19
  },
12
20
  "tooltip": "pf-c-tooltip",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@patternfly/react-styles",
3
- "version": "4.19.2",
3
+ "version": "4.20.1",
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.151.4",
22
+ "@patternfly/patternfly": "4.156.0",
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": "fef8a9f3a2a4a522fba27c683d298fd817b95f57"
32
+ "gitHead": "da37ad257c8bbc6dd946e36089dfbf054841d527"
33
33
  }