UNPKG

8.93 kBSCSSView Raw
1@charset "UTF-8";
2
3// balloon mixins
4// --------------------------------------------------
5
6@mixin balloon-bounding($border-style) {
7 position: absolute;
8 top: 0;
9 max-width: $balloon-size-max-width;
10 border-style: $border-style;
11 border-radius: $balloon-corner;
12}
13
14@mixin balloon-state(
15 $contentColor,
16 $colorBorder,
17 $colorBg,
18 $shadow,
19 $widthBorder
20) {
21 color: $contentColor;
22 border-color: $colorBorder;
23 background-color: $colorBg;
24 box-shadow: $shadow;
25 border-width: $widthBorder;
26}
27
28@mixin balloon-size(
29 $padding-top,
30 $padding-right,
31 $padding-bottom,
32 $padding-left
33) {
34 padding: $padding-top $padding-right $padding-bottom $padding-left;
35}
36
37@mixin balloon-arrow(
38 $width,
39 $height,
40 $colorBorder,
41 $colorBg,
42 $shadow,
43 $widthBorder,
44 $arrorExpose
45) {
46 // 小三角不需要阴影
47 $shadow-top: null;
48 $shadow-right: null;
49 $shadow-bottom: null;
50 $shadow-left: null;
51
52 &:after {
53 position: absolute;
54 width: $height;
55 height: $height;
56 content: '';
57 transform: rotate(45deg);
58 box-sizing: content-box !important;
59 border: $widthBorder $balloon-border-style $colorBorder;
60 background-color: $colorBg;
61 z-index: -1;
62 }
63 &.#{$css-prefix}balloon-top:after {
64 top: $arrorExpose;
65 left: calc(50% + #{$arrorExpose});
66 border-right: none;
67 border-bottom: none;
68 box-shadow: $shadow-top;
69 }
70 &.#{$css-prefix}balloon-right:after {
71 top: calc(50% + #{$arrorExpose});
72 right: $arrorExpose;
73 border-left: none;
74 border-bottom: none;
75 box-shadow: $shadow-right;
76 }
77 &.#{$css-prefix}balloon-bottom:after {
78 bottom: $arrorExpose;
79 left: calc(50% + #{$arrorExpose});
80 border-top: none;
81 border-left: none;
82 box-shadow: $shadow-bottom;
83 }
84 &.#{$css-prefix}balloon-left:after {
85 top: calc(50% + #{$arrorExpose});
86 left: $arrorExpose;
87 border-top: none;
88 border-right: none;
89 box-shadow: $shadow-left;
90 }
91 &.#{$css-prefix}balloon-left-top:after {
92 top: $balloon-size-arrow-margin;
93 left: $arrorExpose;
94 border-top: none;
95 border-right: none;
96 box-shadow: $shadow-left;
97 }
98 &.#{$css-prefix}balloon-left-bottom:after {
99 bottom: $balloon-size-arrow-margin;
100 left: $arrorExpose;
101 border-top: none;
102 border-right: none;
103 box-shadow: $shadow-left;
104 }
105
106 &.#{$css-prefix}balloon-right-top:after {
107 top: $balloon-size-arrow-margin;
108 right: $arrorExpose;
109 border-bottom: none;
110 border-left: none;
111 box-shadow: $shadow-right;
112 }
113
114 &.#{$css-prefix}balloon-right-bottom:after {
115 right: $arrorExpose;
116 bottom: $balloon-size-arrow-margin;
117 border-bottom: none;
118 border-left: none;
119 box-shadow: $shadow-right;
120 }
121
122 &.#{$css-prefix}balloon-top-left:after {
123 top: $arrorExpose;
124 left: $balloon-size-arrow-margin;
125 border-right: none;
126 border-bottom: none;
127 box-shadow: $shadow-top;
128 }
129
130 &.#{$css-prefix}balloon-top-right:after {
131 top: $arrorExpose;
132 right: $balloon-size-arrow-margin;
133 border-right: none;
134 border-bottom: none;
135 box-shadow: $shadow-top;
136 }
137
138 &.#{$css-prefix}balloon-bottom-left:after {
139 bottom: $arrorExpose;
140 left: $balloon-size-arrow-margin;
141 border-top: none;
142 border-left: none;
143 box-shadow: $shadow-bottom;
144 }
145
146 &.#{$css-prefix}balloon-bottom-right:after {
147 right: $balloon-size-arrow-margin;
148 bottom: $arrorExpose;
149 border-top: none;
150 border-left: none;
151 box-shadow: $shadow-bottom;
152 }
153}
154
155@mixin balloon-close(
156 $top,
157 $right,
158 $iconSize,
159 $colorClose,
160 $colorCloseHover
161) {
162 .#{$css-prefix}balloon-close {
163 position: absolute;
164 top: -1px;
165 transform: translateY(calc(#{$balloon-size-padding-top} + (#{$balloon-content-font-size} - #{$balloon-size-close}) / 2));
166 right: $right;
167 font-size: $iconSize;
168 cursor: pointer;
169
170 .#{$css-prefix}icon {
171 @include icon-square-size($iconSize);
172 }
173 color: $colorClose;
174 :hover {
175 color: $colorCloseHover;
176 }
177 }
178}
179
180@mixin show-hidden() {
181 &.visible {
182 display: block;
183 }
184 &.hidden {
185 display: none;
186 }
187}
188
189@mixin tooltip-state(
190 $contentColor,
191 $colorBorder,
192 $colorBg,
193 $shadow,
194 $widthBorder
195) {
196 color: $contentColor;
197 border-color: $colorBorder;
198 background-color: $colorBg;
199 box-shadow: $shadow;
200 border-width: $widthBorder;
201}
202
203@mixin tooltip-arrow(
204 $width,
205 $height,
206 $colorBorder,
207 $colorBg
208) {
209 & .#{$css-prefix}balloon-arrow {
210 position: absolute;
211 display: block;
212 width: calc(#{$width} * 2);
213 height: calc(#{$height} * 2);
214 overflow: hidden;
215 background: 0 0;
216 pointer-events: none;
217 .#{$css-prefix}balloon-arrow-content {
218 content: "";
219 position: absolute;
220 top: 0;
221 right: 0;
222 bottom: 0;
223 left: 0;
224 display: block;
225 width: $width;
226 height: $height;
227 margin: auto;
228 background-color: $colorBg;
229 border: $balloon-tooltip-border-width $balloon-tooltip-border-style $colorBorder;
230 pointer-events: auto;
231 }
232 }
233 &-top .#{$css-prefix}balloon-arrow {
234 top: calc(0px - (#{$width} * 2));
235 left: calc(50% - #{$width});
236 .#{$css-prefix}balloon-arrow-content {
237 transform: translateY($width) rotate(45deg);
238 }
239 }
240 &-right .#{$css-prefix}balloon-arrow {
241 top: calc(50% - #{$width});
242 right: calc(0px - (#{$width} * 2));
243 .#{$css-prefix}balloon-arrow-content {
244 transform: translateX(calc(0px - #{$width})) rotate(45deg);
245 }
246 }
247 &-bottom .#{$css-prefix}balloon-arrow {
248 left: calc(50% - #{$width});
249 bottom: calc(0px - (#{$width} * 2));
250 .#{$css-prefix}balloon-arrow-content {
251 transform: translateY(calc(0px - #{$width})) rotate(45deg);
252 }
253 }
254
255 &-left .#{$css-prefix}balloon-arrow {
256 top: calc(50% - #{$width});
257 left: calc(0px - (#{$width} * 2));
258 .#{$css-prefix}balloon-arrow-content {
259 transform: translateX($width) rotate(45deg);
260 }
261 }
262 &-left-top .#{$css-prefix}balloon-arrow {
263 top: calc(#{$balloon-size-arrow-margin} - (#{$width} / 2));
264 left: calc(0px - (#{$width} * 2));
265 .#{$css-prefix}balloon-arrow-content {
266 transform: translateX($width) rotate(45deg);
267 }
268 }
269 &-left-bottom .#{$css-prefix}balloon-arrow {
270 bottom: calc(#{$balloon-size-arrow-margin} - (#{$width} / 2));
271 left: calc(0px - (#{$width} * 2));
272 .#{$css-prefix}balloon-arrow-content {
273 transform: translateX($width) rotate(45deg);
274 }
275 }
276
277 &-right-top .#{$css-prefix}balloon-arrow {
278 top: calc(#{$balloon-size-arrow-margin} - (#{$width} / 2));
279 right: calc(0px - (#{$width} * 2));
280 .#{$css-prefix}balloon-arrow-content {
281 transform: translateX(calc(0px - #{$width})) rotate(45deg);
282 }
283 }
284
285 &-right-bottom .#{$css-prefix}balloon-arrow {
286 bottom: calc(#{$balloon-size-arrow-margin} - (#{$width} / 2));
287 right: calc(0px - (#{$width} * 2));
288 .#{$css-prefix}balloon-arrow-content {
289 transform: translateX(calc(0px - #{$width})) rotate(45deg);
290 }
291 }
292
293 &-top-left .#{$css-prefix}balloon-arrow {
294 left: calc(#{$balloon-size-arrow-margin} - (#{$width} / 2));
295 top: calc(0px - (#{$width} * 2));
296 .#{$css-prefix}balloon-arrow-content {
297 transform: translateY($width) rotate(45deg);
298 }
299 }
300
301 &-top-right .#{$css-prefix}balloon-arrow {
302 right: calc(#{$balloon-size-arrow-margin} - (#{$width} / 2));
303 top: calc(0px - (#{$width} * 2));
304 .#{$css-prefix}balloon-arrow-content {
305 transform: translateY($width) rotate(45deg);
306 }
307 }
308
309 &-bottom-left .#{$css-prefix}balloon-arrow {
310 left: calc(#{$balloon-size-arrow-margin} - (#{$width} / 2));
311 bottom: calc(0px - (#{$width} * 2));
312 .#{$css-prefix}balloon-arrow-content {
313 transform: translateY(calc(0px - #{$width})) rotate(45deg);
314 }
315 }
316
317 &-bottom-right .#{$css-prefix}balloon-arrow {
318 right: calc(#{$balloon-size-arrow-margin} - (#{$width} / 2));
319 bottom: calc(0px - (#{$width} * 2));
320 .#{$css-prefix}balloon-arrow-content {
321 transform: translateY(calc(0px - #{$width})) rotate(45deg);
322 }
323 }
324}