@patternfly/patternfly 6.0.0-alpha.23 → 6.0.0-alpha.24
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/components/Popover/popover.css +42 -51
- package/components/Popover/popover.scss +44 -53
- package/docs/components/Popover/examples/Popover.md +1 -1
- package/package.json +1 -1
- package/patternfly-no-globals.css +42 -55
- package/patternfly-theme-dark-unversioned.css +42 -55
- package/patternfly.css +42 -55
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
- package/components/Popover/themes/dark/popover.scss +0 -11
|
@@ -1,27 +1,24 @@
|
|
|
1
1
|
.pf-v5-c-popover {
|
|
2
|
-
--pf-v5-c-popover--FontSize: var(--pf-
|
|
2
|
+
--pf-v5-c-popover--FontSize: var(--pf-t--global--font--size--body--sm);
|
|
3
3
|
--pf-v5-c-popover--MinWidth: calc(var(--pf-v5-c-popover__content--PaddingLeft) + var(--pf-v5-c-popover__content--PaddingRight) + 18.75rem);
|
|
4
4
|
--pf-v5-c-popover--MaxWidth: calc(var(--pf-v5-c-popover__content--PaddingLeft) + var(--pf-v5-c-popover__content--PaddingRight) + 18.75rem);
|
|
5
|
-
--pf-v5-c-popover--BoxShadow: var(--pf-
|
|
6
|
-
--pf-v5-c-popover--
|
|
7
|
-
--pf-v5-c-popover--m-
|
|
8
|
-
--pf-v5-c-popover--m-
|
|
9
|
-
--pf-v5-c-popover--m-
|
|
10
|
-
--pf-v5-c-popover--m-
|
|
11
|
-
--pf-v5-c-popover--m-
|
|
12
|
-
--pf-v5-c-
|
|
13
|
-
--pf-v5-c-
|
|
14
|
-
--pf-v5-c-
|
|
15
|
-
--pf-v5-c-
|
|
16
|
-
--pf-v5-c-popover__content--
|
|
17
|
-
--pf-v5-c-popover__content--
|
|
18
|
-
--pf-v5-c-
|
|
19
|
-
--pf-v5-c-
|
|
20
|
-
--pf-v5-c-
|
|
21
|
-
--pf-v5-c-popover__arrow--
|
|
22
|
-
--pf-v5-c-popover__arrow--Height: var(--pf-v5-global--arrow--width-lg);
|
|
23
|
-
--pf-v5-c-popover__arrow--BoxShadow: var(--pf-v5-global--BoxShadow--lg);
|
|
24
|
-
--pf-v5-c-popover__arrow--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
|
|
5
|
+
--pf-v5-c-popover--BoxShadow: var(--pf-t--global--box-shadow--md);
|
|
6
|
+
--pf-v5-c-popover--BorderRadius: var(--pf-t--global--border--radius--medium);
|
|
7
|
+
--pf-v5-c-popover--m-danger__title-icon--Color: var(--pf-t--global--icon--color--status--danger--default);
|
|
8
|
+
--pf-v5-c-popover--m-warning__title-icon--Color: var(--pf-t--global--icon--color--status--warning--default);
|
|
9
|
+
--pf-v5-c-popover--m-success__title-icon--Color: var(--pf-t--global--icon--color--status--success--default);
|
|
10
|
+
--pf-v5-c-popover--m-info__title-icon--Color: var(--pf-t--global--icon--color--status--info--default);
|
|
11
|
+
--pf-v5-c-popover--m-custom__title-icon--Color: var(--pf-t--global--icon--color--status--custom--default);
|
|
12
|
+
--pf-v5-c-popover__content--BackgroundColor: var(--pf-t--global--background--color--floating--default);
|
|
13
|
+
--pf-v5-c-popover__content--PaddingTop: var(--pf-t--global--spacer--md);
|
|
14
|
+
--pf-v5-c-popover__content--PaddingRight: var(--pf-t--global--spacer--md);
|
|
15
|
+
--pf-v5-c-popover__content--PaddingBottom: var(--pf-t--global--spacer--md);
|
|
16
|
+
--pf-v5-c-popover__content--PaddingLeft: var(--pf-t--global--spacer--md);
|
|
17
|
+
--pf-v5-c-popover__content--BorderRadius: var(--pf-t--global--border--radius--medium);
|
|
18
|
+
--pf-v5-c-popover__arrow--Width: 0.9375rem;
|
|
19
|
+
--pf-v5-c-popover__arrow--Height: 0.9375rem;
|
|
20
|
+
--pf-v5-c-popover__arrow--BoxShadow: var(--pf-t--global--box-shadow--md);
|
|
21
|
+
--pf-v5-c-popover__arrow--BackgroundColor: var(--pf-t--global--background--color--floating--default);
|
|
25
22
|
--pf-v5-c-popover__arrow--m-top--TranslateX: -50%;
|
|
26
23
|
--pf-v5-c-popover__arrow--m-top--TranslateY: 50%;
|
|
27
24
|
--pf-v5-c-popover__arrow--m-top--Rotate: 45deg;
|
|
@@ -34,21 +31,27 @@
|
|
|
34
31
|
--pf-v5-c-popover__arrow--m-left--TranslateX: 50%;
|
|
35
32
|
--pf-v5-c-popover__arrow--m-left--TranslateY: -50%;
|
|
36
33
|
--pf-v5-c-popover__arrow--m-left--Rotate: 45deg;
|
|
37
|
-
--pf-v5-c-
|
|
38
|
-
--pf-v5-c-
|
|
39
|
-
--pf-v5-c-
|
|
40
|
-
--pf-v5-c-
|
|
41
|
-
--pf-v5-c-
|
|
42
|
-
--pf-v5-c-
|
|
43
|
-
--pf-v5-c-
|
|
44
|
-
--pf-v5-c-
|
|
45
|
-
--pf-v5-c-popover__title-
|
|
46
|
-
--pf-v5-c-popover__title-
|
|
47
|
-
--pf-v5-c-
|
|
34
|
+
--pf-v5-c-popover__arrow--m-inline-top--Top: var(--pf-t--global--border--radius--medium);
|
|
35
|
+
--pf-v5-c-popover__arrow--m-inline-bottom--Bottom: var(--pf-t--global--border--radius--medium);
|
|
36
|
+
--pf-v5-c-popover__arrow--m-block-left--Left: var(--pf-t--global--border--radius--medium);
|
|
37
|
+
--pf-v5-c-popover__arrow--m-block-right--Right: var(--pf-t--global--border--radius--medium);
|
|
38
|
+
--pf-v5-c-popover__close--Top: calc(var(--pf-v5-c-popover__content--PaddingTop) - (var(--pf-t--global--spacer--xs) * 1.5));
|
|
39
|
+
--pf-v5-c-popover__close--Right: var(--pf-v5-c-popover__content--PaddingRight);
|
|
40
|
+
--pf-v5-c-popover__close--sibling--PaddingRight: var(--pf-t--global--spacer--2xl);
|
|
41
|
+
--pf-v5-c-popover__header--MarginBottom: var(--pf-t--global--spacer--sm);
|
|
42
|
+
--pf-v5-c-popover__title-text--Color: var(--pf-t--global--text--color--regular);
|
|
43
|
+
--pf-v5-c-popover__title-text--FontFamily: var(--pf-t--global--font--family--body);
|
|
44
|
+
--pf-v5-c-popover__title-text--FontSize: var(--pf-t--global--font--size--body--lg);
|
|
45
|
+
--pf-v5-c-popover__title-text--FontWeight: var(--pf-t--global--font--weight--body--bold);
|
|
46
|
+
--pf-v5-c-popover__title-icon--MarginRight: var(--pf-t--global--spacer--sm);
|
|
47
|
+
--pf-v5-c-popover__title-icon--Color: var(--pf-t--global--icon--color--regular);
|
|
48
|
+
--pf-v5-c-popover__title-icon--FontSize: var(--pf-t--global--font--size--heading--xs);
|
|
49
|
+
--pf-v5-c-popover__footer--MarginTop: var(--pf-t--global--spacer--md);
|
|
48
50
|
position: relative;
|
|
49
51
|
min-width: var(--pf-v5-c-popover--MinWidth);
|
|
50
52
|
max-width: var(--pf-v5-c-popover--MaxWidth);
|
|
51
53
|
font-size: var(--pf-v5-c-popover--FontSize);
|
|
54
|
+
border-radius: var(--pf-v5-c-popover--BorderRadius);
|
|
52
55
|
box-shadow: var(--pf-v5-c-popover--BoxShadow);
|
|
53
56
|
}
|
|
54
57
|
.pf-v5-c-popover.pf-m-no-padding {
|
|
@@ -99,43 +102,38 @@
|
|
|
99
102
|
}
|
|
100
103
|
.pf-v5-c-popover:is(.pf-m-left-top,
|
|
101
104
|
.pf-m-right-top) {
|
|
102
|
-
--pf-v5-c-popover__arrow--Top:
|
|
105
|
+
--pf-v5-c-popover__arrow--Top: var(--pf-v5-c-popover__arrow--m-inline-top--Top);
|
|
103
106
|
--pf-v5-c-popover__arrow--TranslateY: var(--pf-v5-c-popover__arrow--m-top--TranslateY);
|
|
104
107
|
}
|
|
105
108
|
.pf-v5-c-popover:is(.pf-m-left-bottom,
|
|
106
109
|
.pf-m-right-bottom) {
|
|
107
110
|
--pf-v5-c-popover__arrow--Top: auto;
|
|
108
|
-
--pf-v5-c-popover__arrow--Bottom:
|
|
111
|
+
--pf-v5-c-popover__arrow--Bottom: var(--pf-v5-c-popover__arrow--m-inline-bottom--Bottom);
|
|
109
112
|
}
|
|
110
113
|
.pf-v5-c-popover:is(.pf-m-top-left,
|
|
111
114
|
.pf-m-bottom-left) {
|
|
112
|
-
--pf-v5-c-popover__arrow--Left:
|
|
115
|
+
--pf-v5-c-popover__arrow--Left: var(--pf-v5-c-popover__arrow--m-block-left--Left);
|
|
113
116
|
--pf-v5-c-popover__arrow--TranslateX: var(--pf-v5-c-popover__arrow--m-left--TranslateX);
|
|
114
117
|
}
|
|
115
118
|
.pf-v5-c-popover:is(.pf-m-top-right,
|
|
116
119
|
.pf-m-bottom-right) {
|
|
117
|
-
--pf-v5-c-popover__arrow--Right:
|
|
120
|
+
--pf-v5-c-popover__arrow--Right: var(--pf-v5-c-popover__arrow--m-block-right--Right);
|
|
118
121
|
--pf-v5-c-popover__arrow--Left: auto;
|
|
119
122
|
}
|
|
120
123
|
.pf-v5-c-popover.pf-m-danger {
|
|
121
124
|
--pf-v5-c-popover__title-icon--Color: var(--pf-v5-c-popover--m-danger__title-icon--Color);
|
|
122
|
-
--pf-v5-c-popover__title-text--Color: var(--pf-v5-c-popover--m-danger__title-text--Color);
|
|
123
125
|
}
|
|
124
126
|
.pf-v5-c-popover.pf-m-warning {
|
|
125
127
|
--pf-v5-c-popover__title-icon--Color: var(--pf-v5-c-popover--m-warning__title-icon--Color);
|
|
126
|
-
--pf-v5-c-popover__title-text--Color: var(--pf-v5-c-popover--m-warning__title-text--Color);
|
|
127
128
|
}
|
|
128
129
|
.pf-v5-c-popover.pf-m-success {
|
|
129
130
|
--pf-v5-c-popover__title-icon--Color: var(--pf-v5-c-popover--m-success__title-icon--Color);
|
|
130
|
-
--pf-v5-c-popover__title-text--Color: var(--pf-v5-c-popover--m-success__title-text--Color);
|
|
131
131
|
}
|
|
132
132
|
.pf-v5-c-popover.pf-m-custom {
|
|
133
133
|
--pf-v5-c-popover__title-icon--Color: var(--pf-v5-c-popover--m-custom__title-icon--Color);
|
|
134
|
-
--pf-v5-c-popover__title-text--Color: var(--pf-v5-c-popover--m-custom__title-text--Color);
|
|
135
134
|
}
|
|
136
135
|
.pf-v5-c-popover.pf-m-info {
|
|
137
136
|
--pf-v5-c-popover__title-icon--Color: var(--pf-v5-c-popover--m-info__title-icon--Color);
|
|
138
|
-
--pf-v5-c-popover__title-text--Color: var(--pf-v5-c-popover--m-info__title-text--Color);
|
|
139
137
|
}
|
|
140
138
|
|
|
141
139
|
.pf-v5-c-popover__content {
|
|
@@ -145,6 +143,7 @@
|
|
|
145
143
|
padding-inline-start: var(--pf-v5-c-popover__content--PaddingLeft);
|
|
146
144
|
padding-inline-end: var(--pf-v5-c-popover__content--PaddingRight);
|
|
147
145
|
background-color: var(--pf-v5-c-popover__content--BackgroundColor);
|
|
146
|
+
border-radius: var(--pf-v5-c-popover__content--BorderRadius);
|
|
148
147
|
}
|
|
149
148
|
|
|
150
149
|
.pf-v5-c-popover__close {
|
|
@@ -190,8 +189,8 @@
|
|
|
190
189
|
.pf-v5-c-popover__title-text {
|
|
191
190
|
font-family: var(--pf-v5-c-popover__title-text--FontFamily);
|
|
192
191
|
font-size: var(--pf-v5-c-popover__title-text--FontSize);
|
|
193
|
-
|
|
194
|
-
color: var(--pf-v5-c-popover__title-text--Color
|
|
192
|
+
font-weight: var(--pf-v5-c-popover__title-text--FontWeight);
|
|
193
|
+
color: var(--pf-v5-c-popover__title-text--Color);
|
|
195
194
|
}
|
|
196
195
|
|
|
197
196
|
.pf-v5-c-popover__body {
|
|
@@ -200,12 +199,4 @@
|
|
|
200
199
|
|
|
201
200
|
.pf-v5-c-popover__footer {
|
|
202
201
|
margin-block-start: var(--pf-v5-c-popover__footer--MarginTop);
|
|
203
|
-
}
|
|
204
|
-
|
|
205
|
-
:where(.pf-v5-theme-dark) .pf-v5-c-popover {
|
|
206
|
-
--pf-v5-c-popover__content--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
|
|
207
|
-
--pf-v5-c-popover__arrow--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
|
|
208
|
-
--pf-v5-c-popover--m-custom__title-text--Color: var(--pf-v5-global--custom-color--200);
|
|
209
|
-
--pf-v5-c-popover--m-info__title-text--Color: var(--pf-v5-global--info-color--100);
|
|
210
|
-
--pf-v5-c-popover--m-success__title-text--Color: var(--pf-v5-global--success-color--100);
|
|
211
202
|
}
|
|
@@ -2,37 +2,33 @@
|
|
|
2
2
|
|
|
3
3
|
.#{$popover} {
|
|
4
4
|
// Component
|
|
5
|
-
--#{$popover}--FontSize: var(
|
|
5
|
+
--#{$popover}--FontSize: var(--pf-t--global--font--size--body--sm);
|
|
6
6
|
--#{$popover}--MinWidth: calc(var(--#{$popover}__content--PaddingLeft) + var(--#{$popover}__content--PaddingRight) + #{pf-size-prem(300px)});
|
|
7
7
|
--#{$popover}--MaxWidth: calc(var(--#{$popover}__content--PaddingLeft) + var(--#{$popover}__content--PaddingRight) + #{pf-size-prem(300px)});
|
|
8
|
-
--#{$popover}--BoxShadow: var(
|
|
8
|
+
--#{$popover}--BoxShadow: var(--pf-t--global--box-shadow--md);
|
|
9
|
+
--#{$popover}--BorderRadius: var(--pf-t--global--border--radius--medium);
|
|
10
|
+
|
|
9
11
|
|
|
10
12
|
// Title icon colors for states
|
|
11
|
-
--#{$popover}--m-danger__title-icon--Color: var(
|
|
12
|
-
--#{$popover}--m-warning__title-icon--Color: var(
|
|
13
|
-
--#{$popover}--m-success__title-icon--Color: var(
|
|
14
|
-
--#{$popover}--m-info__title-icon--Color: var(
|
|
15
|
-
--#{$popover}--m-custom__title-icon--Color: var(
|
|
16
|
-
|
|
17
|
-
// Title text colors for states
|
|
18
|
-
--#{$popover}--m-danger__title-text--Color: var(--#{$pf-global}--danger-color--200);
|
|
19
|
-
--#{$popover}--m-warning__title-text--Color: var(--#{$pf-global}--warning-color--200);
|
|
20
|
-
--#{$popover}--m-success__title-text--Color: var(--#{$pf-global}--success-color--200);
|
|
21
|
-
--#{$popover}--m-info__title-text--Color: var(--#{$pf-global}--info-color--200);
|
|
22
|
-
--#{$popover}--m-custom__title-text--Color: var(--#{$pf-global}--custom-color--300);
|
|
13
|
+
--#{$popover}--m-danger__title-icon--Color: var(--pf-t--global--icon--color--status--danger--default);
|
|
14
|
+
--#{$popover}--m-warning__title-icon--Color: var(--pf-t--global--icon--color--status--warning--default);
|
|
15
|
+
--#{$popover}--m-success__title-icon--Color: var(--pf-t--global--icon--color--status--success--default);
|
|
16
|
+
--#{$popover}--m-info__title-icon--Color: var(--pf-t--global--icon--color--status--info--default);
|
|
17
|
+
--#{$popover}--m-custom__title-icon--Color: var(--pf-t--global--icon--color--status--custom--default);
|
|
23
18
|
|
|
24
19
|
// Content
|
|
25
|
-
--#{$popover}__content--BackgroundColor: var(
|
|
26
|
-
--#{$popover}__content--PaddingTop: var(
|
|
27
|
-
--#{$popover}__content--PaddingRight: var(
|
|
28
|
-
--#{$popover}__content--PaddingBottom: var(
|
|
29
|
-
--#{$popover}__content--PaddingLeft: var(
|
|
20
|
+
--#{$popover}__content--BackgroundColor: var(--pf-t--global--background--color--floating--default);
|
|
21
|
+
--#{$popover}__content--PaddingTop: var(--pf-t--global--spacer--md);
|
|
22
|
+
--#{$popover}__content--PaddingRight: var(--pf-t--global--spacer--md);
|
|
23
|
+
--#{$popover}__content--PaddingBottom: var(--pf-t--global--spacer--md);
|
|
24
|
+
--#{$popover}__content--PaddingLeft: var(--pf-t--global--spacer--md);
|
|
25
|
+
--#{$popover}__content--BorderRadius: var(--pf-t--global--border--radius--medium);
|
|
30
26
|
|
|
31
27
|
// Arrow
|
|
32
|
-
--#{$popover}__arrow--Width:
|
|
33
|
-
--#{$popover}__arrow--Height:
|
|
34
|
-
--#{$popover}__arrow--BoxShadow: var(
|
|
35
|
-
--#{$popover}__arrow--BackgroundColor: var(
|
|
28
|
+
--#{$popover}__arrow--Width: #{pf-size-prem(15px)};
|
|
29
|
+
--#{$popover}__arrow--Height: #{pf-size-prem(15px)};
|
|
30
|
+
--#{$popover}__arrow--BoxShadow: var(--pf-t--global--box-shadow--md);
|
|
31
|
+
--#{$popover}__arrow--BackgroundColor: var(--pf-t--global--background--color--floating--default);
|
|
36
32
|
--#{$popover}__arrow--m-top--TranslateX: -50%;
|
|
37
33
|
--#{$popover}__arrow--m-top--TranslateY: 50%;
|
|
38
34
|
--#{$popover}__arrow--m-top--Rotate: 45deg;
|
|
@@ -45,32 +41,38 @@
|
|
|
45
41
|
--#{$popover}__arrow--m-left--TranslateX: 50%;
|
|
46
42
|
--#{$popover}__arrow--m-left--TranslateY: -50%;
|
|
47
43
|
--#{$popover}__arrow--m-left--Rotate: 45deg;
|
|
44
|
+
--#{$popover}__arrow--m-inline-top--Top: var(--pf-t--global--border--radius--medium);
|
|
45
|
+
--#{$popover}__arrow--m-inline-bottom--Bottom: var(--pf-t--global--border--radius--medium);
|
|
46
|
+
--#{$popover}__arrow--m-block-left--Left: var(--pf-t--global--border--radius--medium);
|
|
47
|
+
--#{$popover}__arrow--m-block-right--Right: var(--pf-t--global--border--radius--medium);
|
|
48
48
|
|
|
49
49
|
// Close
|
|
50
|
-
--#{$popover}__close--Top: calc(var(--#{$popover}__content--PaddingTop) - var(
|
|
51
|
-
--#{$popover}__close--Right:
|
|
52
|
-
--#{$popover}__close--sibling--PaddingRight: var(
|
|
50
|
+
--#{$popover}__close--Top: calc(var(--#{$popover}__content--PaddingTop) - (var(--pf-t--global--spacer--xs) * 1.5)); // align top of button with top of text - TODO: replace with form element token
|
|
51
|
+
--#{$popover}__close--Right: var(--#{$popover}__content--PaddingRight); // align right of content
|
|
52
|
+
--#{$popover}__close--sibling--PaddingRight: var(--pf-t--global--spacer--2xl);
|
|
53
53
|
|
|
54
54
|
// Header
|
|
55
|
-
--#{$popover}__header--MarginBottom: var(
|
|
55
|
+
--#{$popover}__header--MarginBottom: var(--pf-t--global--spacer--sm);
|
|
56
56
|
|
|
57
57
|
// Title text
|
|
58
|
-
--#{$popover}__title-text--
|
|
59
|
-
--#{$popover}__title-text--FontFamily: var(
|
|
60
|
-
--#{$popover}__title-text--FontSize: var(
|
|
58
|
+
--#{$popover}__title-text--Color: var(--pf-t--global--text--color--regular);
|
|
59
|
+
--#{$popover}__title-text--FontFamily: var(--pf-t--global--font--family--body);
|
|
60
|
+
--#{$popover}__title-text--FontSize: var(--pf-t--global--font--size--body--lg);
|
|
61
|
+
--#{$popover}__title-text--FontWeight: var(--pf-t--global--font--weight--body--bold);
|
|
61
62
|
|
|
62
63
|
// Title icon
|
|
63
|
-
--#{$popover}__title-icon--MarginRight: var(
|
|
64
|
-
--#{$popover}__title-icon--Color: var(
|
|
65
|
-
--#{$popover}__title-icon--FontSize: var(
|
|
64
|
+
--#{$popover}__title-icon--MarginRight: var(--pf-t--global--spacer--sm);
|
|
65
|
+
--#{$popover}__title-icon--Color: var(--pf-t--global--icon--color--regular);
|
|
66
|
+
--#{$popover}__title-icon--FontSize: var(--pf-t--global--font--size--heading--xs);
|
|
66
67
|
|
|
67
68
|
// Footer
|
|
68
|
-
--#{$popover}__footer--MarginTop: var(
|
|
69
|
+
--#{$popover}__footer--MarginTop: var(--pf-t--global--spacer--md);
|
|
69
70
|
|
|
70
71
|
position: relative;
|
|
71
72
|
min-width: var(--#{$popover}--MinWidth);
|
|
72
73
|
max-width: var(--#{$popover}--MaxWidth);
|
|
73
74
|
font-size: var(--#{$popover}--FontSize);
|
|
75
|
+
border-radius: var(--#{$popover}--BorderRadius);
|
|
74
76
|
box-shadow: var(--#{$popover}--BoxShadow);
|
|
75
77
|
|
|
76
78
|
&.pf-m-no-padding {
|
|
@@ -104,7 +106,7 @@
|
|
|
104
106
|
.pf-m-bottom,
|
|
105
107
|
.pf-m-bottom-left,
|
|
106
108
|
.pf-m-bottom-right
|
|
107
|
-
|
|
109
|
+
) {
|
|
108
110
|
--#{$popover}__arrow--Top: var(--#{$popover}--m-bottom--Top, 0);
|
|
109
111
|
--#{$popover}__arrow--Left: var(--#{$popover}--m-bottom--Left, 50%);
|
|
110
112
|
--#{$popover}__arrow--TranslateX: var(--#{$popover}__arrow--m-bottom--TranslateX);
|
|
@@ -140,7 +142,7 @@
|
|
|
140
142
|
.pf-m-left-top,
|
|
141
143
|
.pf-m-right-top
|
|
142
144
|
) {
|
|
143
|
-
--#{$popover}__arrow--Top:
|
|
145
|
+
--#{$popover}__arrow--Top: var(--#{$popover}__arrow--m-inline-top--Top);
|
|
144
146
|
--#{$popover}__arrow--TranslateY: var(--#{$popover}__arrow--m-top--TranslateY);
|
|
145
147
|
}
|
|
146
148
|
|
|
@@ -149,14 +151,14 @@
|
|
|
149
151
|
.pf-m-right-bottom
|
|
150
152
|
) {
|
|
151
153
|
--#{$popover}__arrow--Top: auto;
|
|
152
|
-
--#{$popover}__arrow--Bottom:
|
|
154
|
+
--#{$popover}__arrow--Bottom: var(--#{$popover}__arrow--m-inline-bottom--Bottom);
|
|
153
155
|
}
|
|
154
156
|
|
|
155
157
|
&:is(
|
|
156
158
|
.pf-m-top-left,
|
|
157
159
|
.pf-m-bottom-left
|
|
158
160
|
) {
|
|
159
|
-
--#{$popover}__arrow--Left:
|
|
161
|
+
--#{$popover}__arrow--Left: var(--#{$popover}__arrow--m-block-left--Left);
|
|
160
162
|
--#{$popover}__arrow--TranslateX: var(--#{$popover}__arrow--m-left--TranslateX);
|
|
161
163
|
}
|
|
162
164
|
|
|
@@ -164,33 +166,28 @@
|
|
|
164
166
|
.pf-m-top-right,
|
|
165
167
|
.pf-m-bottom-right
|
|
166
168
|
) {
|
|
167
|
-
--#{$popover}__arrow--Right:
|
|
169
|
+
--#{$popover}__arrow--Right: var(--#{$popover}__arrow--m-block-right--Right);
|
|
168
170
|
--#{$popover}__arrow--Left: auto;
|
|
169
171
|
}
|
|
170
172
|
|
|
171
173
|
&.pf-m-danger {
|
|
172
174
|
--#{$popover}__title-icon--Color: var(--#{$popover}--m-danger__title-icon--Color);
|
|
173
|
-
--#{$popover}__title-text--Color: var(--#{$popover}--m-danger__title-text--Color);
|
|
174
175
|
}
|
|
175
176
|
|
|
176
177
|
&.pf-m-warning {
|
|
177
178
|
--#{$popover}__title-icon--Color: var(--#{$popover}--m-warning__title-icon--Color);
|
|
178
|
-
--#{$popover}__title-text--Color: var(--#{$popover}--m-warning__title-text--Color);
|
|
179
179
|
}
|
|
180
180
|
|
|
181
181
|
&.pf-m-success {
|
|
182
182
|
--#{$popover}__title-icon--Color: var(--#{$popover}--m-success__title-icon--Color);
|
|
183
|
-
--#{$popover}__title-text--Color: var(--#{$popover}--m-success__title-text--Color);
|
|
184
183
|
}
|
|
185
184
|
|
|
186
185
|
&.pf-m-custom {
|
|
187
186
|
--#{$popover}__title-icon--Color: var(--#{$popover}--m-custom__title-icon--Color);
|
|
188
|
-
--#{$popover}__title-text--Color: var(--#{$popover}--m-custom__title-text--Color);
|
|
189
187
|
}
|
|
190
188
|
|
|
191
189
|
&.pf-m-info {
|
|
192
190
|
--#{$popover}__title-icon--Color: var(--#{$popover}--m-info__title-icon--Color);
|
|
193
|
-
--#{$popover}__title-text--Color: var(--#{$popover}--m-info__title-text--Color);
|
|
194
191
|
}
|
|
195
192
|
}
|
|
196
193
|
|
|
@@ -201,6 +198,7 @@
|
|
|
201
198
|
padding-inline-start: var(--#{$popover}__content--PaddingLeft);
|
|
202
199
|
padding-inline-end: var(--#{$popover}__content--PaddingRight);
|
|
203
200
|
background-color: var(--#{$popover}__content--BackgroundColor);
|
|
201
|
+
border-radius: var(--#{$popover}__content--BorderRadius);
|
|
204
202
|
}
|
|
205
203
|
|
|
206
204
|
// Close button
|
|
@@ -249,8 +247,8 @@
|
|
|
249
247
|
.#{$popover}__title-text {
|
|
250
248
|
font-family: var(--#{$popover}__title-text--FontFamily);
|
|
251
249
|
font-size: var(--#{$popover}__title-text--FontSize);
|
|
252
|
-
|
|
253
|
-
color: var(--#{$popover}__title-text--Color
|
|
250
|
+
font-weight: var(--#{$popover}__title-text--FontWeight);
|
|
251
|
+
color: var(--#{$popover}__title-text--Color);
|
|
254
252
|
}
|
|
255
253
|
|
|
256
254
|
// Body
|
|
@@ -261,10 +259,3 @@
|
|
|
261
259
|
.#{$popover}__footer {
|
|
262
260
|
margin-block-start: var(--#{$popover}__footer--MarginTop);
|
|
263
261
|
}
|
|
264
|
-
|
|
265
|
-
// stylelint-disable no-invalid-position-at-import-rule
|
|
266
|
-
@import "themes/dark/popover";
|
|
267
|
-
|
|
268
|
-
@include pf-v5-theme-dark {
|
|
269
|
-
@include pf-v5-theme-dark-popover;
|
|
270
|
-
}
|
|
@@ -339,7 +339,7 @@ cssPrefix: pf-v5-c-popover
|
|
|
339
339
|
<div
|
|
340
340
|
class="pf-v5-c-popover__body"
|
|
341
341
|
id="popover-no-padding-body"
|
|
342
|
-
>This popover has no padding
|
|
342
|
+
>This popover has no padding itself. Instead it is intended for use with content that has its own padding that prevents it from touching the popover container's edges.</div>
|
|
343
343
|
</div>
|
|
344
344
|
</div>
|
|
345
345
|
|
package/package.json
CHANGED
|
@@ -22977,29 +22977,26 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
|
|
|
22977
22977
|
}
|
|
22978
22978
|
|
|
22979
22979
|
.pf-v5-c-popover {
|
|
22980
|
-
--pf-v5-c-popover--FontSize: var(--pf-
|
|
22980
|
+
--pf-v5-c-popover--FontSize: var(--pf-t--global--font--size--body--sm);
|
|
22981
22981
|
--pf-v5-c-popover--MinWidth: calc(var(--pf-v5-c-popover__content--PaddingLeft) + var(--pf-v5-c-popover__content--PaddingRight) + 18.75rem);
|
|
22982
22982
|
--pf-v5-c-popover--MaxWidth: calc(var(--pf-v5-c-popover__content--PaddingLeft) + var(--pf-v5-c-popover__content--PaddingRight) + 18.75rem);
|
|
22983
|
-
--pf-v5-c-popover--BoxShadow: var(--pf-
|
|
22984
|
-
--pf-v5-c-popover--
|
|
22985
|
-
--pf-v5-c-popover--m-
|
|
22986
|
-
--pf-v5-c-popover--m-
|
|
22987
|
-
--pf-v5-c-popover--m-
|
|
22988
|
-
--pf-v5-c-popover--m-
|
|
22989
|
-
--pf-v5-c-popover--m-
|
|
22990
|
-
--pf-v5-c-
|
|
22991
|
-
--pf-v5-c-
|
|
22992
|
-
--pf-v5-c-
|
|
22993
|
-
--pf-v5-c-
|
|
22994
|
-
--pf-v5-c-popover__content--
|
|
22995
|
-
--pf-v5-c-popover__content--
|
|
22996
|
-
--pf-v5-c-
|
|
22997
|
-
--pf-v5-c-
|
|
22998
|
-
--pf-v5-c-
|
|
22999
|
-
--pf-v5-c-popover__arrow--
|
|
23000
|
-
--pf-v5-c-popover__arrow--Height: var(--pf-v5-global--arrow--width-lg);
|
|
23001
|
-
--pf-v5-c-popover__arrow--BoxShadow: var(--pf-v5-global--BoxShadow--lg);
|
|
23002
|
-
--pf-v5-c-popover__arrow--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
|
|
22983
|
+
--pf-v5-c-popover--BoxShadow: var(--pf-t--global--box-shadow--md);
|
|
22984
|
+
--pf-v5-c-popover--BorderRadius: var(--pf-t--global--border--radius--medium);
|
|
22985
|
+
--pf-v5-c-popover--m-danger__title-icon--Color: var(--pf-t--global--icon--color--status--danger--default);
|
|
22986
|
+
--pf-v5-c-popover--m-warning__title-icon--Color: var(--pf-t--global--icon--color--status--warning--default);
|
|
22987
|
+
--pf-v5-c-popover--m-success__title-icon--Color: var(--pf-t--global--icon--color--status--success--default);
|
|
22988
|
+
--pf-v5-c-popover--m-info__title-icon--Color: var(--pf-t--global--icon--color--status--info--default);
|
|
22989
|
+
--pf-v5-c-popover--m-custom__title-icon--Color: var(--pf-t--global--icon--color--status--custom--default);
|
|
22990
|
+
--pf-v5-c-popover__content--BackgroundColor: var(--pf-t--global--background--color--floating--default);
|
|
22991
|
+
--pf-v5-c-popover__content--PaddingTop: var(--pf-t--global--spacer--md);
|
|
22992
|
+
--pf-v5-c-popover__content--PaddingRight: var(--pf-t--global--spacer--md);
|
|
22993
|
+
--pf-v5-c-popover__content--PaddingBottom: var(--pf-t--global--spacer--md);
|
|
22994
|
+
--pf-v5-c-popover__content--PaddingLeft: var(--pf-t--global--spacer--md);
|
|
22995
|
+
--pf-v5-c-popover__content--BorderRadius: var(--pf-t--global--border--radius--medium);
|
|
22996
|
+
--pf-v5-c-popover__arrow--Width: 0.9375rem;
|
|
22997
|
+
--pf-v5-c-popover__arrow--Height: 0.9375rem;
|
|
22998
|
+
--pf-v5-c-popover__arrow--BoxShadow: var(--pf-t--global--box-shadow--md);
|
|
22999
|
+
--pf-v5-c-popover__arrow--BackgroundColor: var(--pf-t--global--background--color--floating--default);
|
|
23003
23000
|
--pf-v5-c-popover__arrow--m-top--TranslateX: -50%;
|
|
23004
23001
|
--pf-v5-c-popover__arrow--m-top--TranslateY: 50%;
|
|
23005
23002
|
--pf-v5-c-popover__arrow--m-top--Rotate: 45deg;
|
|
@@ -23012,21 +23009,27 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
|
|
|
23012
23009
|
--pf-v5-c-popover__arrow--m-left--TranslateX: 50%;
|
|
23013
23010
|
--pf-v5-c-popover__arrow--m-left--TranslateY: -50%;
|
|
23014
23011
|
--pf-v5-c-popover__arrow--m-left--Rotate: 45deg;
|
|
23015
|
-
--pf-v5-c-
|
|
23016
|
-
--pf-v5-c-
|
|
23017
|
-
--pf-v5-c-
|
|
23018
|
-
--pf-v5-c-
|
|
23019
|
-
--pf-v5-c-
|
|
23020
|
-
--pf-v5-c-
|
|
23021
|
-
--pf-v5-c-
|
|
23022
|
-
--pf-v5-c-
|
|
23023
|
-
--pf-v5-c-popover__title-
|
|
23024
|
-
--pf-v5-c-popover__title-
|
|
23025
|
-
--pf-v5-c-
|
|
23012
|
+
--pf-v5-c-popover__arrow--m-inline-top--Top: var(--pf-t--global--border--radius--medium);
|
|
23013
|
+
--pf-v5-c-popover__arrow--m-inline-bottom--Bottom: var(--pf-t--global--border--radius--medium);
|
|
23014
|
+
--pf-v5-c-popover__arrow--m-block-left--Left: var(--pf-t--global--border--radius--medium);
|
|
23015
|
+
--pf-v5-c-popover__arrow--m-block-right--Right: var(--pf-t--global--border--radius--medium);
|
|
23016
|
+
--pf-v5-c-popover__close--Top: calc(var(--pf-v5-c-popover__content--PaddingTop) - (var(--pf-t--global--spacer--xs) * 1.5));
|
|
23017
|
+
--pf-v5-c-popover__close--Right: var(--pf-v5-c-popover__content--PaddingRight);
|
|
23018
|
+
--pf-v5-c-popover__close--sibling--PaddingRight: var(--pf-t--global--spacer--2xl);
|
|
23019
|
+
--pf-v5-c-popover__header--MarginBottom: var(--pf-t--global--spacer--sm);
|
|
23020
|
+
--pf-v5-c-popover__title-text--Color: var(--pf-t--global--text--color--regular);
|
|
23021
|
+
--pf-v5-c-popover__title-text--FontFamily: var(--pf-t--global--font--family--body);
|
|
23022
|
+
--pf-v5-c-popover__title-text--FontSize: var(--pf-t--global--font--size--body--lg);
|
|
23023
|
+
--pf-v5-c-popover__title-text--FontWeight: var(--pf-t--global--font--weight--body--bold);
|
|
23024
|
+
--pf-v5-c-popover__title-icon--MarginRight: var(--pf-t--global--spacer--sm);
|
|
23025
|
+
--pf-v5-c-popover__title-icon--Color: var(--pf-t--global--icon--color--regular);
|
|
23026
|
+
--pf-v5-c-popover__title-icon--FontSize: var(--pf-t--global--font--size--heading--xs);
|
|
23027
|
+
--pf-v5-c-popover__footer--MarginTop: var(--pf-t--global--spacer--md);
|
|
23026
23028
|
position: relative;
|
|
23027
23029
|
min-width: var(--pf-v5-c-popover--MinWidth);
|
|
23028
23030
|
max-width: var(--pf-v5-c-popover--MaxWidth);
|
|
23029
23031
|
font-size: var(--pf-v5-c-popover--FontSize);
|
|
23032
|
+
border-radius: var(--pf-v5-c-popover--BorderRadius);
|
|
23030
23033
|
box-shadow: var(--pf-v5-c-popover--BoxShadow);
|
|
23031
23034
|
}
|
|
23032
23035
|
.pf-v5-c-popover.pf-m-no-padding {
|
|
@@ -23077,43 +23080,38 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
|
|
|
23077
23080
|
}
|
|
23078
23081
|
.pf-v5-c-popover:is(.pf-m-left-top,
|
|
23079
23082
|
.pf-m-right-top) {
|
|
23080
|
-
--pf-v5-c-popover__arrow--Top:
|
|
23083
|
+
--pf-v5-c-popover__arrow--Top: var(--pf-v5-c-popover__arrow--m-inline-top--Top);
|
|
23081
23084
|
--pf-v5-c-popover__arrow--TranslateY: var(--pf-v5-c-popover__arrow--m-top--TranslateY);
|
|
23082
23085
|
}
|
|
23083
23086
|
.pf-v5-c-popover:is(.pf-m-left-bottom,
|
|
23084
23087
|
.pf-m-right-bottom) {
|
|
23085
23088
|
--pf-v5-c-popover__arrow--Top: auto;
|
|
23086
|
-
--pf-v5-c-popover__arrow--Bottom:
|
|
23089
|
+
--pf-v5-c-popover__arrow--Bottom: var(--pf-v5-c-popover__arrow--m-inline-bottom--Bottom);
|
|
23087
23090
|
}
|
|
23088
23091
|
.pf-v5-c-popover:is(.pf-m-top-left,
|
|
23089
23092
|
.pf-m-bottom-left) {
|
|
23090
|
-
--pf-v5-c-popover__arrow--Left:
|
|
23093
|
+
--pf-v5-c-popover__arrow--Left: var(--pf-v5-c-popover__arrow--m-block-left--Left);
|
|
23091
23094
|
--pf-v5-c-popover__arrow--TranslateX: var(--pf-v5-c-popover__arrow--m-left--TranslateX);
|
|
23092
23095
|
}
|
|
23093
23096
|
.pf-v5-c-popover:is(.pf-m-top-right,
|
|
23094
23097
|
.pf-m-bottom-right) {
|
|
23095
|
-
--pf-v5-c-popover__arrow--Right:
|
|
23098
|
+
--pf-v5-c-popover__arrow--Right: var(--pf-v5-c-popover__arrow--m-block-right--Right);
|
|
23096
23099
|
--pf-v5-c-popover__arrow--Left: auto;
|
|
23097
23100
|
}
|
|
23098
23101
|
.pf-v5-c-popover.pf-m-danger {
|
|
23099
23102
|
--pf-v5-c-popover__title-icon--Color: var(--pf-v5-c-popover--m-danger__title-icon--Color);
|
|
23100
|
-
--pf-v5-c-popover__title-text--Color: var(--pf-v5-c-popover--m-danger__title-text--Color);
|
|
23101
23103
|
}
|
|
23102
23104
|
.pf-v5-c-popover.pf-m-warning {
|
|
23103
23105
|
--pf-v5-c-popover__title-icon--Color: var(--pf-v5-c-popover--m-warning__title-icon--Color);
|
|
23104
|
-
--pf-v5-c-popover__title-text--Color: var(--pf-v5-c-popover--m-warning__title-text--Color);
|
|
23105
23106
|
}
|
|
23106
23107
|
.pf-v5-c-popover.pf-m-success {
|
|
23107
23108
|
--pf-v5-c-popover__title-icon--Color: var(--pf-v5-c-popover--m-success__title-icon--Color);
|
|
23108
|
-
--pf-v5-c-popover__title-text--Color: var(--pf-v5-c-popover--m-success__title-text--Color);
|
|
23109
23109
|
}
|
|
23110
23110
|
.pf-v5-c-popover.pf-m-custom {
|
|
23111
23111
|
--pf-v5-c-popover__title-icon--Color: var(--pf-v5-c-popover--m-custom__title-icon--Color);
|
|
23112
|
-
--pf-v5-c-popover__title-text--Color: var(--pf-v5-c-popover--m-custom__title-text--Color);
|
|
23113
23112
|
}
|
|
23114
23113
|
.pf-v5-c-popover.pf-m-info {
|
|
23115
23114
|
--pf-v5-c-popover__title-icon--Color: var(--pf-v5-c-popover--m-info__title-icon--Color);
|
|
23116
|
-
--pf-v5-c-popover__title-text--Color: var(--pf-v5-c-popover--m-info__title-text--Color);
|
|
23117
23115
|
}
|
|
23118
23116
|
|
|
23119
23117
|
.pf-v5-c-popover__content {
|
|
@@ -23123,6 +23121,7 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
|
|
|
23123
23121
|
padding-inline-start: var(--pf-v5-c-popover__content--PaddingLeft);
|
|
23124
23122
|
padding-inline-end: var(--pf-v5-c-popover__content--PaddingRight);
|
|
23125
23123
|
background-color: var(--pf-v5-c-popover__content--BackgroundColor);
|
|
23124
|
+
border-radius: var(--pf-v5-c-popover__content--BorderRadius);
|
|
23126
23125
|
}
|
|
23127
23126
|
|
|
23128
23127
|
.pf-v5-c-popover__close {
|
|
@@ -23168,8 +23167,8 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
|
|
|
23168
23167
|
.pf-v5-c-popover__title-text {
|
|
23169
23168
|
font-family: var(--pf-v5-c-popover__title-text--FontFamily);
|
|
23170
23169
|
font-size: var(--pf-v5-c-popover__title-text--FontSize);
|
|
23171
|
-
|
|
23172
|
-
color: var(--pf-v5-c-popover__title-text--Color
|
|
23170
|
+
font-weight: var(--pf-v5-c-popover__title-text--FontWeight);
|
|
23171
|
+
color: var(--pf-v5-c-popover__title-text--Color);
|
|
23173
23172
|
}
|
|
23174
23173
|
|
|
23175
23174
|
.pf-v5-c-popover__body {
|
|
@@ -23180,18 +23179,6 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
|
|
|
23180
23179
|
margin-block-start: var(--pf-v5-c-popover__footer--MarginTop);
|
|
23181
23180
|
}
|
|
23182
23181
|
|
|
23183
|
-
:where(.pf-v5-theme-dark) .pf-v5-c-wizard__header .pf-v5-c-button, :where(.pf-v5-theme-dark) .pf-v5-c-banner .pf-v5-c-button, :where(.pf-v5-theme-dark) .pf-v5-c-log-viewer.pf-m-dark .pf-v5-c-log-viewer__main .pf-v5-c-button {
|
|
23184
|
-
--pf-v5-c-button--m-primary--BackgroundColor: var(--pf-v5-global--primary-color--300);
|
|
23185
|
-
}
|
|
23186
|
-
|
|
23187
|
-
:where(.pf-v5-theme-dark) .pf-v5-c-popover {
|
|
23188
|
-
--pf-v5-c-popover__content--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
|
|
23189
|
-
--pf-v5-c-popover__arrow--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
|
|
23190
|
-
--pf-v5-c-popover--m-custom__title-text--Color: var(--pf-v5-global--custom-color--200);
|
|
23191
|
-
--pf-v5-c-popover--m-info__title-text--Color: var(--pf-v5-global--info-color--100);
|
|
23192
|
-
--pf-v5-c-popover--m-success__title-text--Color: var(--pf-v5-global--success-color--100);
|
|
23193
|
-
}
|
|
23194
|
-
|
|
23195
23182
|
.pf-v5-c-progress {
|
|
23196
23183
|
--pf-v5-c-progress--GridGap: var(--pf-v5-global--spacer--md);
|
|
23197
23184
|
--pf-v5-c-progress__bar--before--BackgroundColor: var(--pf-v5-global--primary-color--100);
|