@patternfly/react-styles 4.19.2 → 4.19.3

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,14 @@
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.19.3 (2021-11-08)
7
+
8
+ **Note:** Version bump only for package @patternfly/react-styles
9
+
10
+
11
+
12
+
13
+
6
14
  ## 4.19.2 (2021-11-08)
7
15
 
8
16
  **Note:** Version bump only for package @patternfly/react-styles
@@ -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.19.3",
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.154.1",
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": "b186647128d5712d685ba0de0eaff42b4b75cfd2"
33
33
  }