@patternfly/patternfly 6.0.0-alpha.21 → 6.0.0-alpha.23

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 (12) hide show
  1. package/components/ExpandableSection/expandable-section.css +64 -55
  2. package/components/ExpandableSection/expandable-section.scss +72 -68
  3. package/components/Tooltip/tooltip.css +16 -16
  4. package/components/Tooltip/tooltip.scss +18 -22
  5. package/docs/components/ExpandableSection/examples/ExpandableSection.md +47 -24
  6. package/package.json +1 -1
  7. package/patternfly-no-globals.css +80 -75
  8. package/patternfly-theme-dark-unversioned.css +80 -75
  9. package/patternfly.css +80 -75
  10. package/patternfly.min.css +1 -1
  11. package/patternfly.min.css.map +1 -1
  12. package/components/Tooltip/themes/dark/tooltip.scss +0 -8
package/components/ExpandableSection/expandable-section.css CHANGED
@@ -1,50 +1,61 @@
1
- .pf-v5-c-expandable-section {
2
- --pf-v5-c-expandable-section__toggle--PaddingTop: var(--pf-v5-global--spacer--form-element);
3
- --pf-v5-c-expandable-section__toggle--PaddingRight: var(--pf-v5-global--spacer--md);
4
- --pf-v5-c-expandable-section__toggle--PaddingBottom: var(--pf-v5-global--spacer--form-element);
5
- --pf-v5-c-expandable-section__toggle--PaddingLeft: 0;
6
- --pf-v5-c-expandable-section__toggle--MarginTop: 0;
7
- --pf-v5-c-expandable-section__toggle--Color: var(--pf-v5-global--link--Color);
8
- --pf-v5-c-expandable-section__toggle--hover--Color: var(--pf-v5-global--link--Color--hover);
9
- --pf-v5-c-expandable-section__toggle--active--Color: var(--pf-v5-global--link--Color--hover);
10
- --pf-v5-c-expandable-section__toggle--focus--Color: var(--pf-v5-global--link--Color--hover);
11
- --pf-v5-c-expandable-section__toggle--m-expanded--Color: var(--pf-v5-global--link--Color--hover);
1
+ :root {
2
+ --pf-v5-c-expandable-section__toggle--PaddingTop: var(--pf-t--global--spacer--sm);
3
+ --pf-v5-c-expandable-section__toggle--PaddingRight: var(--pf-t--global--spacer--md);
4
+ --pf-v5-c-expandable-section__toggle--PaddingBottom: var(--pf-t--global--spacer--sm);
5
+ --pf-v5-c-expandable-section__toggle--PaddingLeft: var(--pf-t--global--spacer--sm);
6
+ --pf-v5-c-expandable-section__toggle--Color: var(--pf-t--global--color--brand--default);
7
+ --pf-v5-c-expandable-section__toggle--hover--Color: var(--pf-t--global--color--brand--hover);
8
+ --pf-v5-c-expandable-section__toggle--active--Color: var(--pf-t--global--color--brand--hover);
9
+ --pf-v5-c-expandable-section__toggle--focus--Color: var(--pf-t--global--color--brand--hover);
10
+ --pf-v5-c-expandable-section__toggle--m-expanded--Color: var(--pf-t--global--color--brand--hover);
12
11
  --pf-v5-c-expandable-section__toggle--BackgroundColor: transparent;
12
+ --pf-v5-c-expandable-section__toggle--ColumnGap: calc(var(--pf-t--global--spacer--xs) + var(--pf-t--global--spacer--sm));
13
13
  --pf-v5-c-expandable-section__toggle-icon--MinWidth: 1em;
14
- --pf-v5-c-expandable-section__toggle-icon--Color: var(--pf-v5-global--Color--100);
14
+ --pf-v5-c-expandable-section__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
15
15
  --pf-v5-c-expandable-section__toggle-icon--Transition: .2s ease-in 0s;
16
16
  --pf-v5-c-expandable-section__toggle-icon--Rotate: 0;
17
17
  --pf-v5-c-expandable-section__toggle-icon--m-expand-top--Rotate: 0;
18
18
  --pf-v5-c-expandable-section--m-expanded__toggle-icon--Rotate: 90deg;
19
19
  --pf-v5-c-expandable-section--m-expanded__toggle-icon--m-expand-top--Rotate: -90deg;
20
- --pf-v5-c-expandable-section__toggle-text--MarginLeft: calc(var(--pf-v5-global--spacer--xs) + var(--pf-v5-global--spacer--sm));
21
- --pf-v5-c-expandable-section__content--MarginTop: var(--pf-v5-global--spacer--md);
20
+ --pf-v5-c-expandable-section__content--PaddingTop: var(--pf-t--global--spacer--sm);
21
+ --pf-v5-c-expandable-section__content--PaddingRight: var(--pf-t--global--spacer--sm);
22
+ --pf-v5-c-expandable-section__content--PaddingBottom: var(--pf-t--global--spacer--sm);
23
+ --pf-v5-c-expandable-section__content--PaddingLeft: var(--pf-t--global--spacer--sm);
22
24
  --pf-v5-c-expandable-section__content--MaxWidth: auto;
23
25
  --pf-v5-c-expandable-section--m-limit-width__content--MaxWidth: 46.875rem;
24
- --pf-v5-c-expandable-section--m-display-lg--BoxShadow: var(--pf-v5-global--BoxShadow--md);
25
- --pf-v5-c-expandable-section--m-display-lg__toggle--PaddingTop: var(--pf-v5-global--spacer--md);
26
- --pf-v5-c-expandable-section--m-display-lg__toggle--PaddingRight: var(--pf-v5-global--spacer--md);
27
- --pf-v5-c-expandable-section--m-display-lg__toggle--PaddingBottom: var(--pf-v5-global--spacer--md);
28
- --pf-v5-c-expandable-section--m-display-lg__toggle--PaddingLeft: var(--pf-v5-global--spacer--md);
29
- --pf-v5-c-expandable-section--m-display-lg__content--MarginTop: 0;
30
- --pf-v5-c-expandable-section--m-display-lg__content--PaddingRight: var(--pf-v5-global--spacer--lg);
31
- --pf-v5-c-expandable-section--m-display-lg__content--PaddingBottom: var(--pf-v5-global--spacer--lg);
32
- --pf-v5-c-expandable-section--m-display-lg__content--PaddingLeft: var(--pf-v5-global--spacer--lg);
33
- --pf-v5-c-expandable-section--m-display-lg--after--BackgroundColor: transparent;
34
- --pf-v5-c-expandable-section--m-display-lg--after--Width: var(--pf-v5-global--BorderWidth--lg);
35
- --pf-v5-c-expandable-section--m-display-lg--m-expanded--after--BackgroundColor: var(--pf-v5-global--primary-color--100);
36
- --pf-v5-c-expandable-section--m-indented__content--PaddingLeft: calc(var(--pf-v5-c-expandable-section__toggle-text--MarginLeft) + var(--pf-v5-c-expandable-section__toggle-icon--MinWidth));
26
+ --pf-v5-c-expandable-section--m-display-lg--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
27
+ --pf-v5-c-expandable-section--m-display-lg--BorderColor: var(--pf-t--global--border--color--default);
28
+ --pf-v5-c-expandable-section--m-display-lg--BorderRadius: var(--pf-t--global--border--radius--medium);
29
+ --pf-v5-c-expandable-section--m-display-lg__toggle--PaddingTop: var(--pf-t--global--spacer--md);
30
+ --pf-v5-c-expandable-section--m-display-lg__toggle--PaddingRight: var(--pf-t--global--spacer--lg);
31
+ --pf-v5-c-expandable-section--m-display-lg__toggle--PaddingBottom: var(--pf-t--global--spacer--md);
32
+ --pf-v5-c-expandable-section--m-display-lg__toggle--PaddingLeft: var(--pf-t--global--spacer--lg);
33
+ --pf-v5-c-expandable-section--m-display-lg__toggle--BorderRadius: var(--pf-t--global--border--radius--medium);
34
+ --pf-v5-c-expandable-section--m-display-lg__toggle--Width: 100%;
35
+ --pf-v5-c-expandable-section--m-display-lg__toggle--hover--BackgroundColor: var(--pf-t--global--background--color--secondary--hover);
36
+ --pf-v5-c-expandable-section--m-display-lg__toggle--active--BackgroundColor: var(--pf-t--global--background--color--secondary--hover);
37
+ --pf-v5-c-expandable-section--m-display-lg__toggle--focus--BackgroundColor: var(--pf-t--global--background--color--secondary--hover);
38
+ --pf-v5-c-expandable-section--m-display-lg__content--PaddingRight: var(--pf-t--global--spacer--lg);
39
+ --pf-v5-c-expandable-section--m-display-lg__content--PaddingBottom: var(--pf-t--global--spacer--md);
40
+ --pf-v5-c-expandable-section--m-display-lg__content--PaddingLeft: var(--pf-t--global--spacer--lg);
41
+ --pf-v5-c-expandable-section--m-expanded--m-display-lg__toggle--BorderRadius: var(--pf-t--global--border--radius--medium) var(--pf-t--global--border--radius--medium) 0 0;
42
+ --pf-v5-c-expandable-section--m-indented__content--PaddingLeft--base: calc(var(--pf-v5-c-expandable-section__toggle--ColumnGap) + var(--pf-v5-c-expandable-section__toggle-icon--MinWidth));
43
+ --pf-v5-c-expandable-section--m-indented__content--PaddingLeft: calc(var(--pf-v5-c-expandable-section--m-indented__content--PaddingLeft--base) + var(--pf-v5-c-expandable-section__toggle--PaddingLeft));
44
+ --pf-v5-c-expandable-section--m-display-lg--m-indented__content--PaddingLeft: calc(var(--pf-v5-c-expandable-section--m-indented__content--PaddingLeft--base) + var(--pf-v5-c-expandable-section--m-display-lg__content--PaddingLeft));
45
+ --pf-v5-c-expandable-section--m-truncate--PaddingTop: var(--pf-t--global--spacer--sm);
46
+ --pf-v5-c-expandable-section--m-truncate--PaddingRight: var(--pf-t--global--spacer--md);
47
+ --pf-v5-c-expandable-section--m-truncate--PaddingBottom: var(--pf-t--global--spacer--sm);
48
+ --pf-v5-c-expandable-section--m-truncate--PaddingLeft: var(--pf-t--global--spacer--md);
49
+ --pf-v5-c-expandable-section--m-truncate__toggle--PaddingBottom: var(--pf-t--global--spacer--sm);
37
50
  --pf-v5-c-expandable-section--m-truncate__content--LineClamp: 3;
38
- --pf-v5-c-expandable-section--m-truncate__toggle--MarginTop: var(--pf-v5-global--spacer--xs);
39
51
  }
52
+
40
53
  .pf-v5-c-expandable-section.pf-m-expanded {
41
54
  --pf-v5-c-expandable-section__toggle--Color: var(--pf-v5-c-expandable-section__toggle--m-expanded--Color);
42
55
  --pf-v5-c-expandable-section__toggle-icon--Rotate: var(--pf-v5-c-expandable-section--m-expanded__toggle-icon--Rotate);
43
56
  --pf-v5-c-expandable-section__toggle-icon--m-expand-top--Rotate: var(--pf-v5-c-expandable-section--m-expanded__toggle-icon--m-expand-top--Rotate);
44
57
  --pf-v5-c-expandable-section--m-display-lg--after--BackgroundColor: var(--pf-v5-c-expandable-section--m-display-lg--m-expanded--after--BackgroundColor);
45
- }
46
- .pf-v5-c-expandable-section.pf-m-detached, .pf-v5-c-expandable-section.pf-m-truncate {
47
- --pf-v5-c-expandable-section__content--MarginTop: 0;
58
+ --pf-v5-c-expandable-section--m-display-lg__toggle--BorderRadius: var(--pf-v5-c-expandable-section--m-expanded--m-display-lg__toggle--BorderRadius);
48
59
  }
49
60
  .pf-v5-c-expandable-section.pf-m-limit-width {
50
61
  --pf-v5-c-expandable-section__content--MaxWidth: var(--pf-v5-c-expandable-section--m-limit-width__content--MaxWidth);
@@ -54,31 +65,31 @@
54
65
  --pf-v5-c-expandable-section__toggle--PaddingRight: var(--pf-v5-c-expandable-section--m-display-lg__toggle--PaddingRight);
55
66
  --pf-v5-c-expandable-section__toggle--PaddingBottom: var(--pf-v5-c-expandable-section--m-display-lg__toggle--PaddingBottom);
56
67
  --pf-v5-c-expandable-section__toggle--PaddingLeft: var(--pf-v5-c-expandable-section--m-display-lg__toggle--PaddingLeft);
68
+ --pf-v5-c-expandable-section__toggle--hover--BackgroundColor: var(--pf-v5-c-expandable-section--m-display-lg__toggle--hover--BackgroundColor);
69
+ --pf-v5-c-expandable-section__toggle--active--BackgroundColor: var(--pf-v5-c-expandable-section--m-display-lg__toggle--active--BackgroundColor);
70
+ --pf-v5-c-expandable-section__toggle--focus--BackgroundColor: var(--pf-v5-c-expandable-section--m-display-lg__toggle--focus--BackgroundColor);
71
+ --pf-v5-c-expandable-section__toggle--BorderRadius: var(--pf-v5-c-expandable-section--m-display-lg__toggle--BorderRadius);
72
+ --pf-v5-c-expandable-section__toggle--Width: var(--pf-v5-c-expandable-section--m-display-lg__toggle--Width);
57
73
  --pf-v5-c-expandable-section__content--PaddingRight: var(--pf-v5-c-expandable-section--m-display-lg__content--PaddingRight);
58
74
  --pf-v5-c-expandable-section__content--PaddingBottom: var(--pf-v5-c-expandable-section--m-display-lg__content--PaddingBottom);
59
75
  --pf-v5-c-expandable-section__content--PaddingLeft: var(--pf-v5-c-expandable-section--m-display-lg__content--PaddingLeft);
60
- --pf-v5-c-expandable-section__content--MarginTop: var(--pf-v5-c-expandable-section--m-display-lg__content--MarginTop);
61
- position: relative;
62
- box-shadow: var(--pf-v5-c-expandable-section--m-display-lg--BoxShadow);
63
- }
64
- .pf-v5-c-expandable-section.pf-m-display-lg::after {
65
- position: absolute;
66
- inset-block-start: 0;
67
- inset-block-end: 0;
68
- inset-inline-start: 0;
69
- width: var(--pf-v5-c-expandable-section--m-display-lg--after--Width);
70
- content: "";
71
- background-color: var(--pf-v5-c-expandable-section--m-display-lg--after--BackgroundColor);
76
+ --pf-v5-c-expandable-section--m-indented__content--PaddingLeft: var(--pf-v5-c-expandable-section--m-display-lg--m-indented__content--PaddingLeft);
77
+ background-color: var(--pf-v5-c-expandable-section--m-display-lg--BackgroundColor);
78
+ border: solid 1px var(--pf-v5-c-expandable-section--m-display-lg--BorderColor);
79
+ border-radius: var(--pf-v5-c-expandable-section--m-display-lg--BorderRadius);
72
80
  }
73
81
  .pf-v5-c-expandable-section.pf-m-indented {
74
82
  --pf-v5-c-expandable-section__content--PaddingLeft: var(--pf-v5-c-expandable-section--m-indented__content--PaddingLeft);
75
83
  }
76
84
  .pf-v5-c-expandable-section.pf-m-truncate {
77
- --pf-v5-c-expandable-section__toggle--MarginTop: var(--pf-v5-c-expandable-section--m-truncate__toggle--MarginTop);
78
85
  --pf-v5-c-expandable-section__toggle--PaddingTop: 0;
79
86
  --pf-v5-c-expandable-section__toggle--PaddingRight: 0;
80
- --pf-v5-c-expandable-section__toggle--PaddingBottom: 0;
81
- --pf-v5-c-expandable-section__toggle-text--MarginLeft: 0;
87
+ --pf-v5-c-expandable-section__toggle--PaddingBottom: var(--pf-v5-c-expandable-section--m-truncate__toggle--PaddingBottom);
88
+ --pf-v5-c-expandable-section__toggle--PaddingLeft: 0;
89
+ --pf-v5-c-expandable-section__content--PaddingTop: 0;
90
+ --pf-v5-c-expandable-section__content--PaddingRight: 0;
91
+ --pf-v5-c-expandable-section__content--PaddingBottom: 0;
92
+ --pf-v5-c-expandable-section__content--PaddingLeft: 0;
82
93
  }
83
94
  .pf-v5-c-expandable-section.pf-m-truncate:not(.pf-m-expanded) .pf-v5-c-expandable-section__content {
84
95
  display: -webkit-box;
@@ -86,29 +97,31 @@
86
97
  -webkit-line-clamp: var(--pf-v5-c-expandable-section--m-truncate__content--LineClamp);
87
98
  overflow: hidden;
88
99
  }
89
- .pf-v5-c-expandable-section.pf-m-detached {
90
- --pf-v5-c-expandable-section--m-truncate__toggle--MarginTop: 0;
91
- }
92
100
 
93
101
  .pf-v5-c-expandable-section__toggle {
94
102
  display: flex;
103
+ column-gap: var(--pf-v5-c-expandable-section__toggle--ColumnGap);
104
+ width: var(--pf-v5-c-expandable-section__toggle--Width, initial);
95
105
  padding-block-start: var(--pf-v5-c-expandable-section__toggle--PaddingTop);
96
106
  padding-block-end: var(--pf-v5-c-expandable-section__toggle--PaddingBottom);
97
107
  padding-inline-start: var(--pf-v5-c-expandable-section__toggle--PaddingLeft);
98
108
  padding-inline-end: var(--pf-v5-c-expandable-section__toggle--PaddingRight);
99
- margin-block-start: var(--pf-v5-c-expandable-section__toggle--MarginTop);
100
109
  color: var(--pf-v5-c-expandable-section__toggle--Color);
101
110
  background-color: var(--pf-v5-c-expandable-section__toggle--BackgroundColor);
102
111
  border: none;
112
+ border-radius: var(--pf-v5-c-expandable-section__toggle--BorderRadius, 0);
103
113
  }
104
114
  .pf-v5-c-expandable-section__toggle:hover {
105
115
  --pf-v5-c-expandable-section__toggle--Color: var(--pf-v5-c-expandable-section__toggle--hover--Color);
116
+ --pf-v5-c-expandable-section__toggle--BackgroundColor: var(--pf-v5-c-expandable-section__toggle--hover--BackgroundColor, initial);
106
117
  }
107
118
  .pf-v5-c-expandable-section__toggle:active, .pf-v5-c-expandable-section__toggle.pf-m-active {
108
119
  --pf-v5-c-expandable-section__toggle--Color: var(--pf-v5-c-expandable-section__toggle--active--Color);
120
+ --pf-v5-c-expandable-section__toggle--BackgroundColor: var(--pf-v5-c-expandable-section__toggle--active--BackgroundColor, initial);
109
121
  }
110
122
  .pf-v5-c-expandable-section__toggle:focus {
111
123
  --pf-v5-c-expandable-section__toggle--Color: var(--pf-v5-c-expandable-section__toggle--focus--Color);
124
+ --pf-v5-c-expandable-section__toggle--BackgroundColor: var(--pf-v5-c-expandable-section__toggle--focus--BackgroundColor, initial);
112
125
  }
113
126
 
114
127
  .pf-v5-c-expandable-section__toggle-icon {
@@ -125,14 +138,10 @@
125
138
  --pf-v5-c-expandable-section__toggle-icon--Rotate: var(--pf-v5-c-expandable-section__toggle-icon--m-expand-top--Rotate);
126
139
  }
127
140
 
128
- .pf-v5-c-expandable-section__toggle-text {
129
- margin-inline-start: var(--pf-v5-c-expandable-section__toggle-text--MarginLeft);
130
- }
131
-
132
141
  .pf-v5-c-expandable-section__content {
133
142
  max-width: var(--pf-v5-c-expandable-section__content--MaxWidth);
143
+ padding-block-start: var(--pf-v5-c-expandable-section__content--PaddingTop);
134
144
  padding-block-end: var(--pf-v5-c-expandable-section__content--PaddingBottom);
135
145
  padding-inline-start: var(--pf-v5-c-expandable-section__content--PaddingLeft);
136
146
  padding-inline-end: var(--pf-v5-c-expandable-section__content--PaddingRight);
137
- margin-block-start: var(--pf-v5-c-expandable-section__content--MarginTop);
138
147
  }
package/components/ExpandableSection/expandable-section.scss CHANGED
@@ -1,70 +1,78 @@
1
1
  // @debug $expandable-section; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
2
2
 
3
- .#{$expandable-section} {
3
+ :root {
4
4
  // Toggle
5
- --#{$expandable-section}__toggle--PaddingTop: var(--#{$pf-global}--spacer--form-element);
6
- --#{$expandable-section}__toggle--PaddingRight: var(--#{$pf-global}--spacer--md);
7
- --#{$expandable-section}__toggle--PaddingBottom: var(--#{$pf-global}--spacer--form-element);
8
- --#{$expandable-section}__toggle--PaddingLeft: 0;
9
- --#{$expandable-section}__toggle--MarginTop: 0;
10
- --#{$expandable-section}__toggle--Color: var(--#{$pf-global}--link--Color);
11
- --#{$expandable-section}__toggle--hover--Color: var(--#{$pf-global}--link--Color--hover);
12
- --#{$expandable-section}__toggle--active--Color: var(--#{$pf-global}--link--Color--hover);
13
- --#{$expandable-section}__toggle--focus--Color: var(--#{$pf-global}--link--Color--hover);
14
- --#{$expandable-section}__toggle--m-expanded--Color: var(--#{$pf-global}--link--Color--hover);
5
+ --#{$expandable-section}__toggle--PaddingTop: var(--pf-t--global--spacer--sm);
6
+ --#{$expandable-section}__toggle--PaddingRight: var(--pf-t--global--spacer--md);
7
+ --#{$expandable-section}__toggle--PaddingBottom: var(--pf-t--global--spacer--sm);
8
+ --#{$expandable-section}__toggle--PaddingLeft: var(--pf-t--global--spacer--sm);
9
+ --#{$expandable-section}__toggle--Color: var(--pf-t--global--color--brand--default);
10
+ --#{$expandable-section}__toggle--hover--Color: var(--pf-t--global--color--brand--hover);
11
+ --#{$expandable-section}__toggle--active--Color: var(--pf-t--global--color--brand--hover);
12
+ --#{$expandable-section}__toggle--focus--Color: var(--pf-t--global--color--brand--hover);
13
+ --#{$expandable-section}__toggle--m-expanded--Color: var(--pf-t--global--color--brand--hover);
15
14
  --#{$expandable-section}__toggle--BackgroundColor: transparent;
16
-
15
+ --#{$expandable-section}__toggle--ColumnGap: calc(var(--pf-t--global--spacer--xs) + var(--pf-t--global--spacer--sm));
16
+
17
17
  // Toggle icon
18
18
  --#{$expandable-section}__toggle-icon--MinWidth: 1em;
19
- --#{$expandable-section}__toggle-icon--Color: var(--#{$pf-global}--Color--100);
19
+ --#{$expandable-section}__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
20
20
  --#{$expandable-section}__toggle-icon--Transition: .2s ease-in 0s;
21
21
  --#{$expandable-section}__toggle-icon--Rotate: 0;
22
22
  --#{$expandable-section}__toggle-icon--m-expand-top--Rotate: 0;
23
23
  --#{$expandable-section}--m-expanded__toggle-icon--Rotate: 90deg;
24
24
  --#{$expandable-section}--m-expanded__toggle-icon--m-expand-top--Rotate: -90deg;
25
-
26
- // Toggle text
27
- --#{$expandable-section}__toggle-text--MarginLeft: calc(var(--#{$pf-global}--spacer--xs) + var(--#{$pf-global}--spacer--sm));
28
-
25
+
29
26
  // Content
30
- --#{$expandable-section}__content--MarginTop: var(--#{$pf-global}--spacer--md);
27
+ --#{$expandable-section}__content--PaddingTop: var(--pf-t--global--spacer--sm);
28
+ --#{$expandable-section}__content--PaddingRight: var(--pf-t--global--spacer--sm);
29
+ --#{$expandable-section}__content--PaddingBottom: var(--pf-t--global--spacer--sm);
30
+ --#{$expandable-section}__content--PaddingLeft: var(--pf-t--global--spacer--sm);
31
31
  --#{$expandable-section}__content--MaxWidth: auto;
32
-
32
+
33
33
  // Limit Width
34
34
  --#{$expandable-section}--m-limit-width__content--MaxWidth: #{pf-size-prem(750px)};
35
+
36
+ // Large / Disclosure
37
+ --#{$expandable-section}--m-display-lg--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
38
+ --#{$expandable-section}--m-display-lg--BorderColor: var(--pf-t--global--border--color--default);
39
+ --#{$expandable-section}--m-display-lg--BorderRadius: var(--pf-t--global--border--radius--medium);
40
+ --#{$expandable-section}--m-display-lg__toggle--PaddingTop: var(--pf-t--global--spacer--md);
41
+ --#{$expandable-section}--m-display-lg__toggle--PaddingRight: var(--pf-t--global--spacer--lg);
42
+ --#{$expandable-section}--m-display-lg__toggle--PaddingBottom: var(--pf-t--global--spacer--md);
43
+ --#{$expandable-section}--m-display-lg__toggle--PaddingLeft: var(--pf-t--global--spacer--lg);
44
+ --#{$expandable-section}--m-display-lg__toggle--BorderRadius: var(--pf-t--global--border--radius--medium);
45
+ --#{$expandable-section}--m-display-lg__toggle--Width: 100%;
46
+ --#{$expandable-section}--m-display-lg__toggle--hover--BackgroundColor: var(--pf-t--global--background--color--secondary--hover);
47
+ --#{$expandable-section}--m-display-lg__toggle--active--BackgroundColor: var(--pf-t--global--background--color--secondary--hover);
48
+ --#{$expandable-section}--m-display-lg__toggle--focus--BackgroundColor: var(--pf-t--global--background--color--secondary--hover);
49
+ --#{$expandable-section}--m-display-lg__content--PaddingRight: var(--pf-t--global--spacer--lg);
50
+ --#{$expandable-section}--m-display-lg__content--PaddingBottom: var(--pf-t--global--spacer--md);
51
+ --#{$expandable-section}--m-display-lg__content--PaddingLeft: var(--pf-t--global--spacer--lg);
52
+ --#{$expandable-section}--m-expanded--m-display-lg__toggle--BorderRadius: var(--pf-t--global--border--radius--medium) var(--pf-t--global--border--radius--medium) 0 0;
35
53
 
36
- // Large
37
- --#{$expandable-section}--m-display-lg--BoxShadow: var(--#{$pf-global}--BoxShadow--md);
38
- --#{$expandable-section}--m-display-lg__toggle--PaddingTop: var(--#{$pf-global}--spacer--md);
39
- --#{$expandable-section}--m-display-lg__toggle--PaddingRight: var(--#{$pf-global}--spacer--md);
40
- --#{$expandable-section}--m-display-lg__toggle--PaddingBottom: var(--#{$pf-global}--spacer--md);
41
- --#{$expandable-section}--m-display-lg__toggle--PaddingLeft: var(--#{$pf-global}--spacer--md);
42
- --#{$expandable-section}--m-display-lg__content--MarginTop: 0;
43
- --#{$expandable-section}--m-display-lg__content--PaddingRight: var(--#{$pf-global}--spacer--lg);
44
- --#{$expandable-section}--m-display-lg__content--PaddingBottom: var(--#{$pf-global}--spacer--lg);
45
- --#{$expandable-section}--m-display-lg__content--PaddingLeft: var(--#{$pf-global}--spacer--lg);
46
- --#{$expandable-section}--m-display-lg--after--BackgroundColor: transparent;
47
- --#{$expandable-section}--m-display-lg--after--Width: var(--#{$pf-global}--BorderWidth--lg);
48
- --#{$expandable-section}--m-display-lg--m-expanded--after--BackgroundColor: var(--#{$pf-global}--primary-color--100);
49
54
 
50
55
  // Indented
51
- --#{$expandable-section}--m-indented__content--PaddingLeft: calc(var(--#{$expandable-section}__toggle-text--MarginLeft) + var(--#{$expandable-section}__toggle-icon--MinWidth));
52
-
56
+ --#{$expandable-section}--m-indented__content--PaddingLeft--base: calc(var(--#{$expandable-section}__toggle--ColumnGap) + var(--#{$expandable-section}__toggle-icon--MinWidth));
57
+ --#{$expandable-section}--m-indented__content--PaddingLeft: calc(var(--#{$expandable-section}--m-indented__content--PaddingLeft--base) + var(--#{$expandable-section}__toggle--PaddingLeft));
58
+ --#{$expandable-section}--m-display-lg--m-indented__content--PaddingLeft: calc(var(--#{$expandable-section}--m-indented__content--PaddingLeft--base) + var(--#{$expandable-section}--m-display-lg__content--PaddingLeft));
59
+
53
60
  // Truncate
61
+ --#{$expandable-section}--m-truncate--PaddingTop: var(--pf-t--global--spacer--sm);
62
+ --#{$expandable-section}--m-truncate--PaddingRight: var(--pf-t--global--spacer--md);
63
+ --#{$expandable-section}--m-truncate--PaddingBottom: var(--pf-t--global--spacer--sm);
64
+ --#{$expandable-section}--m-truncate--PaddingLeft: var(--pf-t--global--spacer--md);
65
+ --#{$expandable-section}--m-truncate__toggle--PaddingBottom: var(--pf-t--global--spacer--sm);
54
66
  --#{$expandable-section}--m-truncate__content--LineClamp: 3;
55
- --#{$expandable-section}--m-truncate__toggle--MarginTop: var(--#{$pf-global}--spacer--xs);
56
-
67
+ }
57
68
 
69
+ .#{$expandable-section} {
58
70
  &.pf-m-expanded {
59
71
  --#{$expandable-section}__toggle--Color: var(--#{$expandable-section}__toggle--m-expanded--Color);
60
72
  --#{$expandable-section}__toggle-icon--Rotate: var(--#{$expandable-section}--m-expanded__toggle-icon--Rotate);
61
73
  --#{$expandable-section}__toggle-icon--m-expand-top--Rotate: var(--#{$expandable-section}--m-expanded__toggle-icon--m-expand-top--Rotate);
62
74
  --#{$expandable-section}--m-display-lg--after--BackgroundColor: var(--#{$expandable-section}--m-display-lg--m-expanded--after--BackgroundColor);
63
- }
64
-
65
- &.pf-m-detached,
66
- &.pf-m-truncate {
67
- --#{$expandable-section}__content--MarginTop: 0;
75
+ --#{$expandable-section}--m-display-lg__toggle--BorderRadius: var(--#{$expandable-section}--m-expanded--m-display-lg__toggle--BorderRadius);
68
76
  }
69
77
 
70
78
  &.pf-m-limit-width {
@@ -76,23 +84,19 @@
76
84
  --#{$expandable-section}__toggle--PaddingRight: var(--#{$expandable-section}--m-display-lg__toggle--PaddingRight);
77
85
  --#{$expandable-section}__toggle--PaddingBottom: var(--#{$expandable-section}--m-display-lg__toggle--PaddingBottom);
78
86
  --#{$expandable-section}__toggle--PaddingLeft: var(--#{$expandable-section}--m-display-lg__toggle--PaddingLeft);
87
+ --#{$expandable-section}__toggle--hover--BackgroundColor: var(--#{$expandable-section}--m-display-lg__toggle--hover--BackgroundColor);
88
+ --#{$expandable-section}__toggle--active--BackgroundColor: var(--#{$expandable-section}--m-display-lg__toggle--active--BackgroundColor);
89
+ --#{$expandable-section}__toggle--focus--BackgroundColor: var(--#{$expandable-section}--m-display-lg__toggle--focus--BackgroundColor);
90
+ --#{$expandable-section}__toggle--BorderRadius: var(--#{$expandable-section}--m-display-lg__toggle--BorderRadius);
91
+ --#{$expandable-section}__toggle--Width: var(--#{$expandable-section}--m-display-lg__toggle--Width);
79
92
  --#{$expandable-section}__content--PaddingRight: var(--#{$expandable-section}--m-display-lg__content--PaddingRight);
80
93
  --#{$expandable-section}__content--PaddingBottom: var(--#{$expandable-section}--m-display-lg__content--PaddingBottom);
81
94
  --#{$expandable-section}__content--PaddingLeft: var(--#{$expandable-section}--m-display-lg__content--PaddingLeft);
82
- --#{$expandable-section}__content--MarginTop: var(--#{$expandable-section}--m-display-lg__content--MarginTop);
83
-
84
- position: relative;
85
- box-shadow: var(--#{$expandable-section}--m-display-lg--BoxShadow);
86
-
87
- &::after {
88
- position: absolute;
89
- inset-block-start: 0;
90
- inset-block-end: 0;
91
- inset-inline-start: 0;
92
- width: var(--#{$expandable-section}--m-display-lg--after--Width);
93
- content: "";
94
- background-color: var(--#{$expandable-section}--m-display-lg--after--BackgroundColor);
95
- }
95
+ --#{$expandable-section}--m-indented__content--PaddingLeft: var(--#{$expandable-section}--m-display-lg--m-indented__content--PaddingLeft);
96
+
97
+ background-color: var(--#{$expandable-section}--m-display-lg--BackgroundColor);
98
+ border: solid 1px var(--#{$expandable-section}--m-display-lg--BorderColor);
99
+ border-radius: var(--#{$expandable-section}--m-display-lg--BorderRadius);
96
100
  }
97
101
 
98
102
  &.pf-m-indented {
@@ -100,11 +104,14 @@
100
104
  }
101
105
 
102
106
  &.pf-m-truncate {
103
- --#{$expandable-section}__toggle--MarginTop: var(--#{$expandable-section}--m-truncate__toggle--MarginTop);
104
107
  --#{$expandable-section}__toggle--PaddingTop: 0;
105
108
  --#{$expandable-section}__toggle--PaddingRight: 0;
106
- --#{$expandable-section}__toggle--PaddingBottom: 0;
107
- --#{$expandable-section}__toggle-text--MarginLeft: 0;
109
+ --#{$expandable-section}__toggle--PaddingBottom: var(--#{$expandable-section}--m-truncate__toggle--PaddingBottom);
110
+ --#{$expandable-section}__toggle--PaddingLeft: 0;
111
+ --#{$expandable-section}__content--PaddingTop: 0;
112
+ --#{$expandable-section}__content--PaddingRight: 0;
113
+ --#{$expandable-section}__content--PaddingBottom: 0;
114
+ --#{$expandable-section}__content--PaddingLeft: 0;
108
115
 
109
116
  &:not(.pf-m-expanded) .#{$expandable-section}__content {
110
117
  // stylelint-disable
@@ -115,34 +122,35 @@
115
122
  overflow: hidden;
116
123
  }
117
124
  }
118
-
119
- &.pf-m-detached {
120
- --#{$expandable-section}--m-truncate__toggle--MarginTop: 0;
121
- }
122
125
  }
123
126
 
124
127
  .#{$expandable-section}__toggle {
125
128
  display: flex;
129
+ column-gap: var(--#{$expandable-section}__toggle--ColumnGap);
130
+ width: var(--#{$expandable-section}__toggle--Width, initial);
126
131
  padding-block-start: var(--#{$expandable-section}__toggle--PaddingTop);
127
132
  padding-block-end: var(--#{$expandable-section}__toggle--PaddingBottom);
128
133
  padding-inline-start: var(--#{$expandable-section}__toggle--PaddingLeft);
129
134
  padding-inline-end: var(--#{$expandable-section}__toggle--PaddingRight);
130
- margin-block-start: var(--#{$expandable-section}__toggle--MarginTop);
131
135
  color: var(--#{$expandable-section}__toggle--Color);
132
136
  background-color: var(--#{$expandable-section}__toggle--BackgroundColor);
133
137
  border: none;
138
+ border-radius: var(--#{$expandable-section}__toggle--BorderRadius, 0);
134
139
 
135
140
  &:hover {
136
141
  --#{$expandable-section}__toggle--Color: var(--#{$expandable-section}__toggle--hover--Color);
142
+ --#{$expandable-section}__toggle--BackgroundColor: var(--#{$expandable-section}__toggle--hover--BackgroundColor, initial);
137
143
  }
138
144
 
139
145
  &:active,
140
146
  &.pf-m-active {
141
147
  --#{$expandable-section}__toggle--Color: var(--#{$expandable-section}__toggle--active--Color);
148
+ --#{$expandable-section}__toggle--BackgroundColor: var(--#{$expandable-section}__toggle--active--BackgroundColor, initial);
142
149
  }
143
150
 
144
151
  &:focus {
145
152
  --#{$expandable-section}__toggle--Color: var(--#{$expandable-section}__toggle--focus--Color);
153
+ --#{$expandable-section}__toggle--BackgroundColor: var(--#{$expandable-section}__toggle--focus--BackgroundColor, initial);
146
154
  }
147
155
  }
148
156
 
@@ -159,14 +167,10 @@
159
167
  }
160
168
  }
161
169
 
162
- .#{$expandable-section}__toggle-text {
163
- margin-inline-start: var(--#{$expandable-section}__toggle-text--MarginLeft);
164
- }
165
-
166
170
  .#{$expandable-section}__content {
167
171
  max-width: var(--#{$expandable-section}__content--MaxWidth);
172
+ padding-block-start: var(--#{$expandable-section}__content--PaddingTop);
168
173
  padding-block-end: var(--#{$expandable-section}__content--PaddingBottom);
169
174
  padding-inline-start: var(--#{$expandable-section}__content--PaddingLeft);
170
175
  padding-inline-end: var(--#{$expandable-section}__content--PaddingRight);
171
- margin-block-start: var(--#{$expandable-section}__content--MarginTop);
172
176
  }
package/components/Tooltip/tooltip.css CHANGED
@@ -1,17 +1,18 @@
1
- .pf-v5-c-tooltip {
1
+ :root {
2
2
  --pf-v5-c-tooltip--MaxWidth: 18.75rem;
3
- --pf-v5-c-tooltip--BoxShadow: var(--pf-v5-global--BoxShadow--md);
4
- --pf-v5-c-tooltip__content--PaddingTop: var(--pf-v5-global--spacer--sm);
5
- --pf-v5-c-tooltip__content--PaddingRight: var(--pf-v5-global--spacer--sm);
6
- --pf-v5-c-tooltip__content--PaddingBottom: var(--pf-v5-global--spacer--sm);
7
- --pf-v5-c-tooltip__content--PaddingLeft: var(--pf-v5-global--spacer--sm);
8
- --pf-v5-c-tooltip__content--Color: var(--pf-v5-global--Color--light-100);
9
- --pf-v5-c-tooltip__content--BackgroundColor: var(--pf-v5-global--BackgroundColor--dark-100);
10
- --pf-v5-c-tooltip__content--FontSize: var(--pf-v5-global--FontSize--sm);
3
+ --pf-v5-c-tooltip--BoxShadow: var(--pf-t--global--box-shadow--md);
4
+ --pf-v5-c-tooltip__content--PaddingTop: var(--pf-t--global--spacer--sm);
5
+ --pf-v5-c-tooltip__content--PaddingRight: var(--pf-t--global--spacer--md);
6
+ --pf-v5-c-tooltip__content--PaddingBottom: var(--pf-t--global--spacer--sm);
7
+ --pf-v5-c-tooltip__content--PaddingLeft: var(--pf-t--global--spacer--md);
8
+ --pf-v5-c-tooltip__content--Color: var(--pf-t--global--text--color--inverse);
9
+ --pf-v5-c-tooltip__content--BackgroundColor: var(--pf-t--global--background--color--inverse--default);
10
+ --pf-v5-c-tooltip__content--FontSize: var(--pf-t--global--font--size--body--sm);
11
+ --pf-v5-c-tooltip__content--BorderRadius: var(--pf-t--global--border--radius--small);
11
12
  --pf-v5-c-tooltip__arrow--Width: 0.9375rem;
12
13
  --pf-v5-c-tooltip__arrow--Height: 0.9375rem;
13
- --pf-v5-c-tooltip__arrow--BackgroundColor: var(--pf-v5-global--BackgroundColor--dark-100);
14
- --pf-v5-c-tooltip__arrow--BoxShadow: var(--pf-v5-global--BoxShadow--md);
14
+ --pf-v5-c-tooltip__arrow--BackgroundColor: var(--pf-t--global--background--color--inverse--default);
15
+ --pf-v5-c-tooltip__arrow--BoxShadow: var(--pf-t--global--box-shadow--md);
15
16
  --pf-v5-c-tooltip__arrow--m-top--TranslateX: -50%;
16
17
  --pf-v5-c-tooltip__arrow--m-top--TranslateY: 50%;
17
18
  --pf-v5-c-tooltip__arrow--m-top--Rotate: 45deg;
@@ -24,6 +25,9 @@
24
25
  --pf-v5-c-tooltip__arrow--m-left--TranslateX: 50%;
25
26
  --pf-v5-c-tooltip__arrow--m-left--TranslateY: -50%;
26
27
  --pf-v5-c-tooltip__arrow--m-left--Rotate: 45deg;
28
+ }
29
+
30
+ .pf-v5-c-tooltip {
27
31
  position: relative;
28
32
  max-width: var(--pf-v5-c-tooltip--MaxWidth);
29
33
  box-shadow: var(--pf-v5-c-tooltip--BoxShadow);
@@ -96,6 +100,7 @@
96
100
  text-align: center;
97
101
  word-break: break-word;
98
102
  background-color: var(--pf-v5-c-tooltip__content--BackgroundColor);
103
+ border-radius: var(--pf-v5-c-tooltip__content--BorderRadius);
99
104
  }
100
105
  .pf-v5-c-tooltip__content.pf-m-text-align-left {
101
106
  text-align: start;
@@ -115,9 +120,4 @@
115
120
  background-color: var(--pf-v5-c-tooltip__arrow--BackgroundColor);
116
121
  box-shadow: var(--pf-v5-c-tooltip__arrow--BoxShadow);
117
122
  transform: translateX(var(--pf-v5-c-tooltip__arrow--TranslateX, 0)) translateY(var(--pf-v5-c-tooltip__arrow--TranslateY, 0)) rotate(var(--pf-v5-c-tooltip__arrow--Rotate, 0));
118
- }
119
-
120
- :where(.pf-v5-theme-dark) .pf-v5-c-tooltip {
121
- --pf-v5-c-tooltip__content--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
122
- --pf-v5-c-tooltip__arrow--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
123
123
  }
package/components/Tooltip/tooltip.scss CHANGED
@@ -1,24 +1,24 @@
1
1
  // @debug $tooltip; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
2
-
3
- .#{$tooltip} {
2
+ :root {
4
3
  // Component variables
5
4
  --#{$tooltip}--MaxWidth: #{pf-size-prem(300px)};
6
- --#{$tooltip}--BoxShadow: var(--#{$pf-global}--BoxShadow--md);
7
-
5
+ --#{$tooltip}--BoxShadow: var(--pf-t--global--box-shadow--md);
6
+
8
7
  // Content variables
9
- --#{$tooltip}__content--PaddingTop: var(--#{$pf-global}--spacer--sm);
10
- --#{$tooltip}__content--PaddingRight: var(--#{$pf-global}--spacer--sm);
11
- --#{$tooltip}__content--PaddingBottom: var(--#{$pf-global}--spacer--sm);
12
- --#{$tooltip}__content--PaddingLeft: var(--#{$pf-global}--spacer--sm);
13
- --#{$tooltip}__content--Color: var(--#{$pf-global}--Color--light-100);
14
- --#{$tooltip}__content--BackgroundColor: var(--#{$pf-global}--BackgroundColor--dark-100);
15
- --#{$tooltip}__content--FontSize: var(--#{$pf-global}--FontSize--sm);
16
-
8
+ --#{$tooltip}__content--PaddingTop: var(--pf-t--global--spacer--sm);
9
+ --#{$tooltip}__content--PaddingRight: var(--pf-t--global--spacer--md);
10
+ --#{$tooltip}__content--PaddingBottom: var(--pf-t--global--spacer--sm);
11
+ --#{$tooltip}__content--PaddingLeft: var(--pf-t--global--spacer--md);
12
+ --#{$tooltip}__content--Color: var(--pf-t--global--text--color--inverse);
13
+ --#{$tooltip}__content--BackgroundColor: var(--pf-t--global--background--color--inverse--default);
14
+ --#{$tooltip}__content--FontSize: var(--pf-t--global--font--size--body--sm);
15
+ --#{$tooltip}__content--BorderRadius: var(--pf-t--global--border--radius--small);
16
+
17
17
  // Arrow variables
18
18
  --#{$tooltip}__arrow--Width: #{pf-size-prem(15px)};
19
19
  --#{$tooltip}__arrow--Height: #{pf-size-prem(15px)};
20
- --#{$tooltip}__arrow--BackgroundColor: var(--#{$pf-global}--BackgroundColor--dark-100);
21
- --#{$tooltip}__arrow--BoxShadow: var(--#{$pf-global}--BoxShadow--md);
20
+ --#{$tooltip}__arrow--BackgroundColor: var(--pf-t--global--background--color--inverse--default);
21
+ --#{$tooltip}__arrow--BoxShadow: var(--pf-t--global--box-shadow--md);
22
22
  --#{$tooltip}__arrow--m-top--TranslateX: -50%;
23
23
  --#{$tooltip}__arrow--m-top--TranslateY: 50%;
24
24
  --#{$tooltip}__arrow--m-top--Rotate: 45deg;
@@ -31,7 +31,9 @@
31
31
  --#{$tooltip}__arrow--m-left--TranslateX: 50%;
32
32
  --#{$tooltip}__arrow--m-left--TranslateY: -50%;
33
33
  --#{$tooltip}__arrow--m-left--Rotate: 45deg;
34
+ }
34
35
 
36
+ .#{$tooltip} {
35
37
  position: relative;
36
38
  max-width: var(--#{$tooltip}--MaxWidth);
37
39
  box-shadow: var(--#{$tooltip}--BoxShadow);
@@ -52,7 +54,7 @@
52
54
  .pf-m-bottom,
53
55
  .pf-m-bottom-left,
54
56
  .pf-m-bottom-right
55
- ) {
57
+ ) {
56
58
  --#{$tooltip}__arrow--Top: var(--#{$tooltip}--m-bottom--Top, 0);
57
59
  --#{$tooltip}__arrow--Left: var(--#{$tooltip}--m-bottom--Left, 50%);
58
60
  --#{$tooltip}__arrow--TranslateX: var(--#{$tooltip}__arrow--m-bottom--TranslateX);
@@ -128,6 +130,7 @@
128
130
  text-align: center;
129
131
  word-break: break-word;
130
132
  background-color: var(--#{$tooltip}__content--BackgroundColor);
133
+ border-radius: var(--#{$tooltip}__content--BorderRadius);
131
134
 
132
135
  &.pf-m-text-align-left {
133
136
  text-align: start;
@@ -149,10 +152,3 @@
149
152
  box-shadow: var(--#{$tooltip}__arrow--BoxShadow);
150
153
  transform: translateX(var(--#{$tooltip}__arrow--TranslateX, 0)) translateY(var(--#{$tooltip}__arrow--TranslateY, 0)) rotate(var(--#{$tooltip}__arrow--Rotate, 0));
151
154
  }
152
-
153
- // stylelint-disable no-invalid-position-at-import-rule
154
- @import "themes/dark/tooltip";
155
-
156
- @include pf-v5-theme-dark {
157
- @include pf-v5-theme-dark-tooltip;
158
- }