Diff: STRATO-apps/wordpress_03/app/wp-content/plugins/code-snippets/css/common/_tooltips.scss
Keine Baseline-Datei – Diff nur gegen leer.
1
-
1
+
$bg-color: hsl(0deg 0% 20% / 90%);
2
+
3
+
.help-tooltip {
4
+
display: inline-flex;
5
+
flex-direction: column;
6
+
justify-content: center;
7
+
border-block-end: 1px dotted;
8
+
position: relative;
9
+
vertical-align: middle;
10
+
}
11
+
12
+
.help-tooltip-anchor {
13
+
cursor: help;
14
+
padding-block: 0.3em 0;
15
+
padding-inline: 0.3em;
16
+
display: inline-block;
17
+
font-size: 10px;
18
+
background: transparent !important;
19
+
}
20
+
21
+
.tooltip {
22
+
cursor: help !important;
23
+
position: relative;
24
+
display: inline-block;
25
+
26
+
.dashicons {
27
+
color: lightslategrey;
28
+
}
29
+
30
+
&.badge {
31
+
display: inline-flex;
32
+
33
+
.dashicons {
34
+
color: inherit;
35
+
}
36
+
}
37
+
}
38
+
39
+
.tooltip::before,
40
+
.tooltip-content {
41
+
position: absolute;
42
+
visibility: hidden;
43
+
opacity: 0;
44
+
transition: opacity 0.2s ease-in-out,
45
+
visibility 0.2s ease-in-out,
46
+
transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
47
+
transform: translate3d(0, 0, 0);
48
+
pointer-events: none;
49
+
}
50
+
51
+
.tooltip::before {
52
+
z-index: 1001;
53
+
border: 6px solid transparent;
54
+
background: transparent;
55
+
content: "";
56
+
}
57
+
58
+
.tooltip-inline::before {
59
+
inset-block-start: 4px;
60
+
}
61
+
62
+
.tooltip-content {
63
+
z-index: 1000;
64
+
padding: 8px;
65
+
background-color: $bg-color;
66
+
color: #fff;
67
+
border-radius: 6px;
68
+
position: absolute;
69
+
font-size: small;
70
+
font-weight: normal;
71
+
text-transform: none;
72
+
min-inline-size: 200px;
73
+
backdrop-filter: blur(3px);
74
+
75
+
.tooltip-block & {
76
+
margin-inline-start: -80px;
77
+
}
78
+
79
+
.tooltip-inline & {
80
+
margin-inline-start: 0;
81
+
margin-block-end: -16px;
82
+
}
83
+
84
+
.tooltip-inline.tooltip-start & {
85
+
inset-block-start: -50%;
86
+
}
87
+
}
88
+
89
+
.tooltip-block.tooltip-start {
90
+
&::before {
91
+
margin-inline-start: -6px;
92
+
margin-block-end: -12px;
93
+
border-block-start-color: $bg-color;
94
+
}
95
+
96
+
&::before, .tooltip-content {
97
+
inset-block-end: 100%;
98
+
inset-inline-start: 50%;
99
+
}
100
+
}
101
+
102
+
.tooltip-block.tooltip-end {
103
+
&::before {
104
+
margin-block: -12px 0;
105
+
border-block-start-color: transparent;
106
+
border-block-end-color: $bg-color;
107
+
}
108
+
109
+
&::before, .tooltip-content {
110
+
inset-block: 100% auto;
111
+
margin-inline-start: 25%;
112
+
}
113
+
114
+
.tooltip-content {
115
+
inset-inline-end: -70%;
116
+
}
117
+
}
118
+
119
+
.tooltip-inline.tooltip-start {
120
+
&::before {
121
+
inset-block-end: 50%;
122
+
margin-inline: 0 -12px;
123
+
margin-block-end: 0;
124
+
border-block-start-color: transparent;
125
+
border-inline-start-color: $bg-color;
126
+
}
127
+
128
+
&::before, .tooltip-content {
129
+
inset-inline: auto 100%;
130
+
}
131
+
}
132
+
133
+
.tooltip-inline.tooltip-end {
134
+
&::before {
135
+
margin-block-end: 0;
136
+
margin-inline-start: -12px;
137
+
border-block-start-color: transparent;
138
+
border-inline-end-color: $bg-color;
139
+
}
140
+
141
+
&::before, .tooltip-content {
142
+
inset-inline-start: 100%;
143
+
}
144
+
145
+
.tooltip-content {
146
+
inset-block-start: -50%;
147
+
}
148
+
}
149
+
150
+
.tooltip:hover,
151
+
.tooltip:focus {
152
+
&::before, .tooltip-content {
153
+
visibility: visible;
154
+
opacity: 1;
155
+
}
156
+
}
157
+
158
+
.tooltip-block.tooltip-start:hover,
159
+
.tooltip-block.tooltip-start:focus {
160
+
&::before, .tooltip-content {
161
+
transform: translateY(-10px);
162
+
}
163
+
}
164
+
165
+
.tooltip-block.tooltip-end:hover,
166
+
.tooltip-block.tooltip-end:focus {
167
+
&::before, .tooltip-content {
168
+
transform: translateY(10px);
169
+
}
170
+
}
171
+
172
+
.tooltip-inline.tooltip-end:hover,
173
+
.tooltip-inline.tooltip-end:focus {
174
+
&::before, .tooltip-content {
175
+
transform: translateX(calc(10px * var(--cs-direction-multiplier)));
176
+
}
177
+
}
178
+
179
+
.tooltip-inline.tooltip-start:hover,
180
+
.tooltip-inline.tooltip-start:focus {
181
+
&::before, .tooltip-content {
182
+
transform: translateX(calc(-10px * var(--cs-direction-multiplier)));
183
+
}
184
+
}
185
+