playbook_ui 16.7.0.pre.alpha.play2924tooltipmisalignment16289 → 16.7.0.pre.alpha.play2924tooltipmisalignment16298
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 +47 -114
- data/dist/playbook.css +1 -1
- data/lib/playbook/version.rb +1 -1
- metadata +1 -1
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 3e33b44c25c0ba6a0d5fd1892e0472a1386b6be151356b70c1e4216ba2822267
|
|
4
|
+
data.tar.gz: b8a0e8f1f004f86029489370a42f1b76015103e98e09a98284cfa3a5e9e56c4e
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 6e8ae8b9fec0dd0c10a0a9a64e8d9a39a7b0fb705f89ddddbb575c90b7c18b4024b43a470e23a537581f2688e5c03b7fd281d94a25dc2ca9978501e447b81d50
|
|
7
|
+
data.tar.gz: 6005ef5a5e9d4466efbab580803cbc4b1f025321d87b1997dee9a3b8aab073f92c27580f0fdbc68e3e5dce8f244db748b3f40ef443f1fa3a8fb96b54c6ad6757
|
|
@@ -24,111 +24,7 @@ $tooltip_shadow: rgba(60, 106, 172, 0.18);
|
|
|
24
24
|
|
|
25
25
|
$arrow_vertical_offset: calc(50% - #{$space_xs * 1.2});
|
|
26
26
|
|
|
27
|
-
|
|
28
|
-
~ .tooltip_tooltip,
|
|
29
|
-
.tooltip_tooltip {
|
|
30
|
-
display: block;
|
|
31
|
-
opacity: 0;
|
|
32
|
-
position: absolute;
|
|
33
|
-
left: $offscreen;
|
|
34
|
-
top: 0;
|
|
35
|
-
animation-name: fadeIn;
|
|
36
|
-
animation-duration: 150ms;
|
|
37
|
-
animation-timing-function: linear;
|
|
38
|
-
animation-fill-mode: forwards;
|
|
39
|
-
|
|
40
|
-
&.flipped {
|
|
41
|
-
margin-top: 15px;
|
|
42
|
-
.arrow {
|
|
43
|
-
border-color: transparent transparent $white transparent;
|
|
44
|
-
transform: rotate(180deg);
|
|
45
|
-
}
|
|
46
|
-
}
|
|
47
|
-
|
|
48
|
-
.arrow {
|
|
49
|
-
content: " ";
|
|
50
|
-
position: absolute;
|
|
51
|
-
top: 100%;
|
|
52
|
-
left: calc(50% - 10px);
|
|
53
|
-
border-color: $white transparent transparent transparent;
|
|
54
|
-
border-style: solid;
|
|
55
|
-
border-width: 10px;
|
|
56
|
-
margin-bottom: 50px;
|
|
57
|
-
}
|
|
58
|
-
|
|
59
|
-
&.visible,
|
|
60
|
-
&.show {
|
|
61
|
-
z-index: $z_max;
|
|
62
|
-
padding: $space_xs $space_sm;
|
|
63
|
-
box-shadow: $shadow_deeper;
|
|
64
|
-
border-radius: $border_rad_light;
|
|
65
|
-
}
|
|
66
|
-
|
|
67
|
-
// react only
|
|
68
|
-
&.visible {
|
|
69
|
-
color: $white;
|
|
70
|
-
background-color: rgba($black, $opacity_9);
|
|
71
|
-
// react arrow
|
|
72
|
-
.arrow_bg {
|
|
73
|
-
width: 10px;
|
|
74
|
-
height: 10px;
|
|
75
|
-
background-color: rgba($black, $opacity_9);
|
|
76
|
-
transform: rotate(45deg);
|
|
77
|
-
}
|
|
78
|
-
}
|
|
79
|
-
|
|
80
|
-
//rails only
|
|
81
|
-
&.show {
|
|
82
|
-
opacity: 1;
|
|
83
|
-
margin-bottom: $space_sm;
|
|
84
|
-
color: $white;
|
|
85
|
-
background-color: rgba($black, $opacity_9);
|
|
86
|
-
&.fade_out {
|
|
87
|
-
animation-name: fadeOut;
|
|
88
|
-
animation-duration: 150ms;
|
|
89
|
-
animation-timing-function: linear;
|
|
90
|
-
animation-fill-mode: forwards;
|
|
91
|
-
}
|
|
92
|
-
.arrow {
|
|
93
|
-
border-color: $black transparent transparent transparent;
|
|
94
|
-
opacity: $opacity_9;
|
|
95
|
-
}
|
|
96
|
-
}
|
|
97
|
-
}
|
|
98
|
-
|
|
99
|
-
&.dark {
|
|
100
|
-
&.tooltip_tooltip,
|
|
101
|
-
~ .tooltip_tooltip,
|
|
102
|
-
.tooltip_tooltip {
|
|
103
|
-
//react
|
|
104
|
-
&.visible {
|
|
105
|
-
color: $charcoal;
|
|
106
|
-
background-color: $white;
|
|
107
|
-
}
|
|
108
|
-
//rails
|
|
109
|
-
&.show {
|
|
110
|
-
color: $charcoal;
|
|
111
|
-
background-color: $white;
|
|
112
|
-
}
|
|
113
|
-
.arrow {
|
|
114
|
-
border-color: $white transparent transparent transparent;
|
|
115
|
-
opacity: $opacity_10;
|
|
116
|
-
}
|
|
117
|
-
// react arrow
|
|
118
|
-
.arrow_bg {
|
|
119
|
-
background-color: $white;
|
|
120
|
-
}
|
|
121
|
-
&.flipped {
|
|
122
|
-
.arrow {
|
|
123
|
-
border-color: transparent transparent $black transparent;
|
|
124
|
-
opacity: $opacity_9;
|
|
125
|
-
}
|
|
126
|
-
}
|
|
127
|
-
}
|
|
128
|
-
}
|
|
129
|
-
}
|
|
130
|
-
|
|
131
|
-
.tooltip_tooltip {
|
|
27
|
+
@mixin tooltip-base-styles {
|
|
132
28
|
display: block;
|
|
133
29
|
opacity: 0;
|
|
134
30
|
position: absolute;
|
|
@@ -158,6 +54,10 @@ $arrow_vertical_offset: calc(50% - #{$space_xs * 1.2});
|
|
|
158
54
|
margin-bottom: 50px;
|
|
159
55
|
}
|
|
160
56
|
|
|
57
|
+
&.visible {
|
|
58
|
+
z-index: $z_max !important;
|
|
59
|
+
}
|
|
60
|
+
|
|
161
61
|
&.visible,
|
|
162
62
|
&.show {
|
|
163
63
|
z-index: $z_max;
|
|
@@ -198,27 +98,26 @@ $arrow_vertical_offset: calc(50% - #{$space_xs * 1.2});
|
|
|
198
98
|
}
|
|
199
99
|
}
|
|
200
100
|
|
|
201
|
-
|
|
202
|
-
.pb_tooltip_kit.dark ~ .tooltip_tooltip,
|
|
203
|
-
.pb_tooltip_kit.dark .tooltip_tooltip {
|
|
204
|
-
//react
|
|
101
|
+
@mixin tooltip-dark-styles {
|
|
205
102
|
&.visible {
|
|
206
103
|
color: $charcoal;
|
|
207
104
|
background-color: $white;
|
|
208
105
|
}
|
|
209
|
-
|
|
106
|
+
|
|
210
107
|
&.show {
|
|
211
108
|
color: $charcoal;
|
|
212
109
|
background-color: $white;
|
|
213
110
|
}
|
|
111
|
+
|
|
214
112
|
.arrow {
|
|
215
113
|
border-color: $white transparent transparent transparent;
|
|
216
114
|
opacity: $opacity_10;
|
|
217
115
|
}
|
|
218
|
-
|
|
116
|
+
|
|
219
117
|
.arrow_bg {
|
|
220
118
|
background-color: $white;
|
|
221
119
|
}
|
|
120
|
+
|
|
222
121
|
&.flipped {
|
|
223
122
|
.arrow {
|
|
224
123
|
border-color: transparent transparent $black transparent;
|
|
@@ -227,12 +126,40 @@ $arrow_vertical_offset: calc(50% - #{$space_xs * 1.2});
|
|
|
227
126
|
}
|
|
228
127
|
}
|
|
229
128
|
|
|
129
|
+
.pb_tooltip_kit {
|
|
130
|
+
~ .tooltip_tooltip,
|
|
131
|
+
.tooltip_tooltip {
|
|
132
|
+
@include tooltip-base-styles;
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
&.dark {
|
|
136
|
+
&.tooltip_tooltip,
|
|
137
|
+
~ .tooltip_tooltip,
|
|
138
|
+
.tooltip_tooltip {
|
|
139
|
+
@include tooltip-dark-styles;
|
|
140
|
+
}
|
|
141
|
+
}
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
.tooltip_tooltip {
|
|
145
|
+
@include tooltip-base-styles;
|
|
146
|
+
}
|
|
147
|
+
|
|
148
|
+
.tooltip_tooltip.dark,
|
|
149
|
+
.pb_tooltip_kit.dark ~ .tooltip_tooltip,
|
|
150
|
+
.pb_tooltip_kit.dark .tooltip_tooltip {
|
|
151
|
+
@include tooltip-dark-styles;
|
|
152
|
+
}
|
|
153
|
+
|
|
230
154
|
.tooltip_tooltip,
|
|
231
155
|
.pb_tooltip_kit ~ .tooltip_tooltip,
|
|
232
156
|
.pb_tooltip_kit .tooltip_tooltip {
|
|
233
157
|
&[data-placement="right"],
|
|
234
158
|
&[data-placement="right-start"],
|
|
235
|
-
&[data-placement="right-end"]
|
|
159
|
+
&[data-placement="right-end"],
|
|
160
|
+
&[data-popper-placement="right"],
|
|
161
|
+
&[data-popper-placement="right-start"],
|
|
162
|
+
&[data-popper-placement="right-end"] {
|
|
236
163
|
box-shadow: -8px 0 28px 0 $tooltip_shadow;
|
|
237
164
|
.arrow {
|
|
238
165
|
left: -18px;
|
|
@@ -248,7 +175,10 @@ $arrow_vertical_offset: calc(50% - #{$space_xs * 1.2});
|
|
|
248
175
|
|
|
249
176
|
&[data-placement="bottom"],
|
|
250
177
|
&[data-placement="bottom-start"],
|
|
251
|
-
&[data-placement="bottom-end"]
|
|
178
|
+
&[data-placement="bottom-end"],
|
|
179
|
+
&[data-popper-placement="bottom"],
|
|
180
|
+
&[data-popper-placement="bottom-start"],
|
|
181
|
+
&[data-popper-placement="bottom-end"] {
|
|
252
182
|
box-shadow: 0 -12px 28px 0 $tooltip_shadow;
|
|
253
183
|
.arrow {
|
|
254
184
|
top: -18px;
|
|
@@ -262,7 +192,10 @@ $arrow_vertical_offset: calc(50% - #{$space_xs * 1.2});
|
|
|
262
192
|
|
|
263
193
|
&[data-placement="left"],
|
|
264
194
|
&[data-placement="left-start"],
|
|
265
|
-
&[data-placement="left-end"]
|
|
195
|
+
&[data-placement="left-end"],
|
|
196
|
+
&[data-popper-placement="left"],
|
|
197
|
+
&[data-popper-placement="left-start"],
|
|
198
|
+
&[data-popper-placement="left-end"] {
|
|
266
199
|
box-shadow: 8px 0 28px 0 $tooltip_shadow;
|
|
267
200
|
.arrow {
|
|
268
201
|
margin-bottom: 0;
|