@patternfly/patternfly 6.0.0-alpha.22 → 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/components/Tooltip/tooltip.css +16 -16
- package/components/Tooltip/tooltip.scss +18 -22
- package/docs/components/Popover/examples/Popover.md +1 -1
- package/package.json +1 -1
- package/patternfly-no-globals.css +58 -75
- package/patternfly-theme-dark-unversioned.css +58 -75
- package/patternfly.css +58 -75
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
- package/components/Popover/themes/dark/popover.scss +0 -11
- package/components/Tooltip/themes/dark/tooltip.scss +0 -8
|
@@ -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
|
-
}
|
|
@@ -1,17 +1,18 @@
|
|
|
1
|
-
|
|
1
|
+
:root {
|
|
2
2
|
--pf-v5-c-tooltip--MaxWidth: 18.75rem;
|
|
3
|
-
--pf-v5-c-tooltip--BoxShadow: var(--pf-
|
|
4
|
-
--pf-v5-c-tooltip__content--PaddingTop: var(--pf-
|
|
5
|
-
--pf-v5-c-tooltip__content--PaddingRight: var(--pf-
|
|
6
|
-
--pf-v5-c-tooltip__content--PaddingBottom: var(--pf-
|
|
7
|
-
--pf-v5-c-tooltip__content--PaddingLeft: var(--pf-
|
|
8
|
-
--pf-v5-c-tooltip__content--Color: var(--pf-
|
|
9
|
-
--pf-v5-c-tooltip__content--BackgroundColor: var(--pf-
|
|
10
|
-
--pf-v5-c-tooltip__content--FontSize: var(--pf-
|
|
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-
|
|
14
|
-
--pf-v5-c-tooltip__arrow--BoxShadow: var(--pf-
|
|
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
|
}
|
|
@@ -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(
|
|
7
|
-
|
|
5
|
+
--#{$tooltip}--BoxShadow: var(--pf-t--global--box-shadow--md);
|
|
6
|
+
|
|
8
7
|
// Content variables
|
|
9
|
-
--#{$tooltip}__content--PaddingTop: var(
|
|
10
|
-
--#{$tooltip}__content--PaddingRight: var(
|
|
11
|
-
--#{$tooltip}__content--PaddingBottom: var(
|
|
12
|
-
--#{$tooltip}__content--PaddingLeft: var(
|
|
13
|
-
--#{$tooltip}__content--Color: var(
|
|
14
|
-
--#{$tooltip}__content--BackgroundColor: var(
|
|
15
|
-
--#{$tooltip}__content--FontSize: var(
|
|
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(
|
|
21
|
-
--#{$tooltip}__arrow--BoxShadow: var(
|
|
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
|
-
}
|
|
@@ -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
|
|