playbook_ui 16.7.0.pre.alpha.play2924tooltipmisalignment16200 → 16.7.0.pre.alpha.play2924tooltipmisalignment16242
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.
- checksums.yaml +4 -4
- data/app/pb_kits/playbook/pb_tooltip/_tooltip.scss +72 -3
- data/app/pb_kits/playbook/pb_tooltip/_tooltip.tsx +1 -1
- data/dist/chunks/_typeahead-D2TWdJTn.js +5 -0
- data/dist/chunks/vendor.js +1 -1
- data/dist/playbook-rails-react-bindings.js +1 -1
- data/dist/playbook-rails.js +1 -1
- data/dist/playbook.css +1 -1
- data/lib/playbook/version.rb +1 -1
- metadata +3 -3
- data/dist/chunks/_typeahead-BS6zjptk.js +0 -5
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 3992fdab5906608c6118a8ce2ba3c4fea08b25c565d0978c524905c4d6954f64
|
|
4
|
+
data.tar.gz: cc07250a9142d0344314a823c2f0b01eba76f0277daa1a33b10066a844228c7d
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 99ea73cdfd8b0b0b73a46d3cee50b20f24d2dc5b11a39d6730b7eb0dd147dce3d774c5c7270d3c9ce060a6ec4d06d752ad870033dfcc766a7d8bc795ebd0e883
|
|
7
|
+
data.tar.gz: 4cd63b0368a8f3746e8555485cf4236066a3ac4828b60d49c888a6e0f5d6e7cc38909b34a5469ddf4fd906258909774fe17976bca4e8838e03eadc6af638e94c
|
|
@@ -25,7 +25,6 @@ $tooltip_shadow: rgba(60, 106, 172, 0.18);
|
|
|
25
25
|
$arrow_vertical_offset: calc(50% - #{$space_xs * 1.2});
|
|
26
26
|
|
|
27
27
|
.pb_tooltip_kit {
|
|
28
|
-
&.tooltip_tooltip,
|
|
29
28
|
~ .tooltip_tooltip,
|
|
30
29
|
.tooltip_tooltip {
|
|
31
30
|
display: block;
|
|
@@ -129,7 +128,77 @@ $arrow_vertical_offset: calc(50% - #{$space_xs * 1.2});
|
|
|
129
128
|
}
|
|
130
129
|
}
|
|
131
130
|
|
|
132
|
-
.
|
|
131
|
+
.tooltip_tooltip {
|
|
132
|
+
display: block;
|
|
133
|
+
opacity: 0;
|
|
134
|
+
position: absolute;
|
|
135
|
+
left: $offscreen;
|
|
136
|
+
top: 0;
|
|
137
|
+
animation-name: fadeIn;
|
|
138
|
+
animation-duration: 150ms;
|
|
139
|
+
animation-timing-function: linear;
|
|
140
|
+
animation-fill-mode: forwards;
|
|
141
|
+
|
|
142
|
+
&.flipped {
|
|
143
|
+
margin-top: 15px;
|
|
144
|
+
.arrow {
|
|
145
|
+
border-color: transparent transparent $white transparent;
|
|
146
|
+
transform: rotate(180deg);
|
|
147
|
+
}
|
|
148
|
+
}
|
|
149
|
+
|
|
150
|
+
.arrow {
|
|
151
|
+
content: " ";
|
|
152
|
+
position: absolute;
|
|
153
|
+
top: 100%;
|
|
154
|
+
left: calc(50% - 10px);
|
|
155
|
+
border-color: $white transparent transparent transparent;
|
|
156
|
+
border-style: solid;
|
|
157
|
+
border-width: 10px;
|
|
158
|
+
margin-bottom: 50px;
|
|
159
|
+
}
|
|
160
|
+
|
|
161
|
+
&.visible,
|
|
162
|
+
&.show {
|
|
163
|
+
z-index: $z_9;
|
|
164
|
+
padding: $space_xs $space_sm;
|
|
165
|
+
box-shadow: $shadow_deeper;
|
|
166
|
+
border-radius: $border_rad_light;
|
|
167
|
+
}
|
|
168
|
+
|
|
169
|
+
&.visible {
|
|
170
|
+
color: $white;
|
|
171
|
+
background-color: rgba($black, $opacity_9);
|
|
172
|
+
|
|
173
|
+
.arrow_bg {
|
|
174
|
+
width: 10px;
|
|
175
|
+
height: 10px;
|
|
176
|
+
background-color: rgba($black, $opacity_9);
|
|
177
|
+
transform: rotate(45deg);
|
|
178
|
+
}
|
|
179
|
+
}
|
|
180
|
+
|
|
181
|
+
&.show {
|
|
182
|
+
opacity: 1;
|
|
183
|
+
margin-bottom: $space_sm;
|
|
184
|
+
color: $white;
|
|
185
|
+
background-color: rgba($black, $opacity_9);
|
|
186
|
+
|
|
187
|
+
&.fade_out {
|
|
188
|
+
animation-name: fadeOut;
|
|
189
|
+
animation-duration: 150ms;
|
|
190
|
+
animation-timing-function: linear;
|
|
191
|
+
animation-fill-mode: forwards;
|
|
192
|
+
}
|
|
193
|
+
|
|
194
|
+
.arrow {
|
|
195
|
+
border-color: $black transparent transparent transparent;
|
|
196
|
+
opacity: $opacity_9;
|
|
197
|
+
}
|
|
198
|
+
}
|
|
199
|
+
}
|
|
200
|
+
|
|
201
|
+
.tooltip_tooltip.dark,
|
|
133
202
|
.pb_tooltip_kit.dark ~ .tooltip_tooltip,
|
|
134
203
|
.pb_tooltip_kit.dark .tooltip_tooltip {
|
|
135
204
|
//react
|
|
@@ -158,7 +227,7 @@ $arrow_vertical_offset: calc(50% - #{$space_xs * 1.2});
|
|
|
158
227
|
}
|
|
159
228
|
}
|
|
160
229
|
|
|
161
|
-
.
|
|
230
|
+
.tooltip_tooltip,
|
|
162
231
|
.pb_tooltip_kit ~ .tooltip_tooltip,
|
|
163
232
|
.pb_tooltip_kit .tooltip_tooltip {
|
|
164
233
|
&[data-placement="right"],
|
|
@@ -186,7 +186,7 @@ const Tooltip = forwardRef((props: TooltipProps, ref: ForwardedRef<unknown>): Re
|
|
|
186
186
|
<div
|
|
187
187
|
data-placement={placement}
|
|
188
188
|
{...getFloatingProps({
|
|
189
|
-
className: classnames(
|
|
189
|
+
className: classnames(`tooltip_tooltip ${placement} visible`, {
|
|
190
190
|
dark: rest.dark,
|
|
191
191
|
}),
|
|
192
192
|
ref: refs.setFloating,
|