1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
|
@use '../../sass-utilities' as *;
@include pf-root($tooltip) {
// Component variables
--#{$tooltip}--MaxWidth: #{pf-size-prem(300px)};
--#{$tooltip}--BoxShadow: var(--pf-t--global--box-shadow--md);
// Content variables
--#{$tooltip}__content--PaddingBlockStart: var(--pf-t--global--spacer--sm);
--#{$tooltip}__content--PaddingInlineEnd: var(--pf-t--global--spacer--md);
--#{$tooltip}__content--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
--#{$tooltip}__content--PaddingInlineStart: var(--pf-t--global--spacer--md);
--#{$tooltip}__content--Color: var(--pf-t--global--text--color--inverse);
--#{$tooltip}__content--BackgroundColor: var(--pf-t--global--background--color--inverse--default);
--#{$tooltip}__content--FontSize: var(--pf-t--global--font--size--body--sm);
--#{$tooltip}__content--BorderRadius: var(--pf-t--global--border--radius--small);
// Arrow variables
--#{$tooltip}__arrow--Width: #{pf-size-prem(15px)};
--#{$tooltip}__arrow--Height: #{pf-size-prem(15px)};
--#{$tooltip}__arrow--BackgroundColor: var(--pf-t--global--background--color--inverse--default);
--#{$tooltip}__arrow--BoxShadow: var(--pf-t--global--box-shadow--md);
--#{$tooltip}__arrow--m-top--TranslateX: -50%;
--#{$tooltip}__arrow--m-top--TranslateY: 50%;
--#{$tooltip}__arrow--m-top--Rotate: 45deg;
--#{$tooltip}__arrow--m-right--TranslateX: -50%;
--#{$tooltip}__arrow--m-right--TranslateY: -50%;
--#{$tooltip}__arrow--m-right--Rotate: 45deg;
--#{$tooltip}__arrow--m-bottom--TranslateX: -50%;
--#{$tooltip}__arrow--m-bottom--TranslateY: -50%;
--#{$tooltip}__arrow--m-bottom--Rotate: 45deg;
--#{$tooltip}__arrow--m-left--TranslateX: 50%;
--#{$tooltip}__arrow--m-left--TranslateY: -50%;
--#{$tooltip}__arrow--m-left--Rotate: 45deg;
}
.#{$tooltip} {
position: relative;
max-width: var(--#{$tooltip}--MaxWidth);
box-shadow: var(--#{$tooltip}--BoxShadow);
&:is(
.pf-m-top,
.pf-m-top-left,
.pf-m-top-right
) {
--#{$tooltip}__arrow--InsetBlockEnd: var(--#{$tooltip}--m-top--InsetBlockEnd, 0);
--#{$tooltip}__arrow--InsetInlineStart: var(--#{$tooltip}--m-top--InsetInlineStart, 50%);
--#{$tooltip}__arrow--TranslateX: var(--#{$tooltip}__arrow--m-top--TranslateX);
--#{$tooltip}__arrow--TranslateY: var(--#{$tooltip}__arrow--m-top--TranslateY);
--#{$tooltip}__arrow--Rotate: var(--#{$tooltip}__arrow--m-top--Rotate);
}
&:is(
.pf-m-bottom,
.pf-m-bottom-left,
.pf-m-bottom-right
) {
--#{$tooltip}__arrow--InsetBlockStart: var(--#{$tooltip}--m-bottom--InsetBlockStart, 0);
--#{$tooltip}__arrow--InsetInlineStart: var(--#{$tooltip}--m-bottom--InsetInlineStart, 50%);
--#{$tooltip}__arrow--TranslateX: var(--#{$tooltip}__arrow--m-bottom--TranslateX);
--#{$tooltip}__arrow--TranslateY: var(--#{$tooltip}__arrow--m-bottom--TranslateY);
--#{$tooltip}__arrow--Rotate: var(--#{$tooltip}__arrow--m-bottom--Rotate);
}
&:is(
.pf-m-left,
.pf-m-left-top,
.pf-m-left-bottom
) {
--#{$tooltip}__arrow--InsetBlockStart: var(--#{$tooltip}--m-left--InsetBlockStart, 50%);
--#{$tooltip}__arrow--InsetInlineEnd: var(--#{$tooltip}--m-left--InsetInlineEnd, 0);
--#{$tooltip}__arrow--TranslateX: var(--#{$tooltip}__arrow--m-left--TranslateX);
--#{$tooltip}__arrow--TranslateY: var(--#{$tooltip}__arrow--m-left--TranslateY);
--#{$tooltip}__arrow--Rotate: var(--#{$tooltip}__arrow--m-left--Rotate);
}
&:is(
.pf-m-right,
.pf-m-right-top,
.pf-m-right-bottom
) {
--#{$tooltip}__arrow--InsetBlockStart: var(--#{$tooltip}--m-right--InsetBlockStart, 50%);
--#{$tooltip}__arrow--InsetInlineStart: var(--#{$tooltip}--m-right--InsetInlineStart, 0);
--#{$tooltip}__arrow--TranslateX: var(--#{$tooltip}__arrow--m-right--TranslateX);
--#{$tooltip}__arrow--TranslateY: var(--#{$tooltip}__arrow--m-right--TranslateY);
--#{$tooltip}__arrow--Rotate: var(--#{$tooltip}__arrow--m-right--Rotate);
}
&:is(
.pf-m-left-top,
.pf-m-right-top
) {
--#{$tooltip}__arrow--InsetBlockStart: 0;
--#{$tooltip}__arrow--TranslateY: var(--#{$tooltip}__arrow--m-top--TranslateY);
}
&:is(
.pf-m-left-bottom,
.pf-m-right-bottom
) {
--#{$tooltip}__arrow--InsetBlockStart: auto;
--#{$tooltip}__arrow--InsetBlockEnd: 0;
}
&:is(
.pf-m-top-left,
.pf-m-bottom-left
) {
--#{$tooltip}__arrow--InsetInlineStart: 0;
--#{$tooltip}__arrow--TranslateX: var(--#{$tooltip}__arrow--m-left--TranslateX);
}
&:is(
.pf-m-top-right,
.pf-m-bottom-right
) {
--#{$tooltip}__arrow--InsetInlineEnd: 0;
--#{$tooltip}__arrow--InsetInlineStart: auto;
}
}
.#{$tooltip}__content {
position: relative;
padding-block-start: var(--#{$tooltip}__content--PaddingBlockStart);
padding-block-end: var(--#{$tooltip}__content--PaddingBlockEnd);
padding-inline-start: var(--#{$tooltip}__content--PaddingInlineStart);
padding-inline-end: var(--#{$tooltip}__content--PaddingInlineEnd);
font-size: var(--#{$tooltip}__content--FontSize);
color: var(--#{$tooltip}__content--Color);
text-align: center;
word-break: break-word;
background-color: var(--#{$tooltip}__content--BackgroundColor);
border-radius: var(--#{$tooltip}__content--BorderRadius);
&.pf-m-text-align-left {
text-align: start;
}
}
.#{$tooltip}__arrow {
position: absolute;
// stylelint-disable liberty/use-logical-spec
top: var(--#{$tooltip}__arrow--InsetBlockStart, auto);
right: var(--#{$tooltip}__arrow--InsetInlineEnd, auto);
bottom: var(--#{$tooltip}__arrow--InsetBlockEnd, auto);
left: var(--#{$tooltip}__arrow--InsetInlineStart, auto);
// stylelint-enable
width: var(--#{$tooltip}__arrow--Width);
height: var(--#{$tooltip}__arrow--Height);
pointer-events: none;
background-color: var(--#{$tooltip}__arrow--BackgroundColor);
box-shadow: var(--#{$tooltip}__arrow--BoxShadow);
transform: translateX(var(--#{$tooltip}__arrow--TranslateX, 0)) translateY(var(--#{$tooltip}__arrow--TranslateY, 0)) rotate(var(--#{$tooltip}__arrow--Rotate, 0));
}
|
