1 |
|
2 | @import './helpers/mixin.scss';
|
3 |
|
4 | [class*="vxe-icon--"] {
|
5 | display: inline-block;
|
6 | vertical-align: middle;
|
7 | position: relative;
|
8 | direction: ltr;
|
9 | font-family: $vxe-icon-font-family;
|
10 | font-weight: normal;
|
11 | user-select: none;
|
12 | &.rotate45 {
|
13 | transform: rotate(45deg);
|
14 | }
|
15 | &.rotate90 {
|
16 | transform: rotate(90deg);
|
17 | }
|
18 | &.rotate180 {
|
19 | transform: rotate(180deg);
|
20 | }
|
21 | }
|
22 |
|
23 | %DefaultWidthHeight {
|
24 | width: 1em;
|
25 | height: 1em;
|
26 | line-height: 1em;
|
27 | }
|
28 |
|
29 | %PseudoClass {
|
30 | content: "";
|
31 | position: absolute;
|
32 | }
|
33 |
|
34 | .vxe-icon--square {
|
35 | @extend %DefaultWidthHeight;
|
36 | &:before {
|
37 | @extend %PseudoClass;
|
38 | left: 0.05em;
|
39 | top: 0.05em;
|
40 | width: 0.9em;
|
41 | height: 0.9em;
|
42 | border-width: 0.1em;
|
43 | border-style: solid;
|
44 | border-color: inherit;
|
45 | }
|
46 | }
|
47 |
|
48 | .vxe-icon--zoomin {
|
49 | @extend %DefaultWidthHeight;
|
50 | border-width: 0.1em;
|
51 | border-style: solid;
|
52 | border-color: inherit;
|
53 | background-color: $vxe-icon-background-color;
|
54 | &:before,
|
55 | &:after {
|
56 | @extend %PseudoClass;
|
57 | background-color: inherit;
|
58 | }
|
59 | &:before {
|
60 | left: -0.1em;
|
61 | top: 0.2em;
|
62 | width: 1.1em;
|
63 | height: 0.4em;
|
64 | }
|
65 | &:after {
|
66 | top: -0.1em;
|
67 | left: 0.2em;
|
68 | width: 0.4em;
|
69 | height: 1.1em;
|
70 | }
|
71 | }
|
72 |
|
73 | .vxe-icon--zoomout {
|
74 | @extend %DefaultWidthHeight;
|
75 | position: relative;
|
76 | &:before {
|
77 | @extend %PseudoClass;
|
78 | right: 0;
|
79 | top: 0;
|
80 | width: 0.7em;
|
81 | height: 0.7em;
|
82 | border-width: 0.1em;
|
83 | border-style: solid;
|
84 | border-color: inherit;
|
85 | }
|
86 | &:after {
|
87 | @extend %PseudoClass;
|
88 | left: 0.1em;
|
89 | bottom: 0.1em;
|
90 | width: 0.7em;
|
91 | height: 0.7em;
|
92 | border-width: 0.1em;
|
93 | border-style: solid;
|
94 | border-color: inherit;
|
95 | background-color: $vxe-icon-background-color;
|
96 | }
|
97 | }
|
98 |
|
99 | .vxe-icon--menu {
|
100 | $yOffset: 0.36em;
|
101 | @extend %DefaultWidthHeight;
|
102 | &:before {
|
103 | content: "";
|
104 | display: inline-block;
|
105 | width: 0.22em;
|
106 | height: 0.22em;
|
107 | box-shadow: 0 -#{$yOffset} 0, -#{$yOffset} -#{$yOffset} 0, #{$yOffset} -#{$yOffset} 0, 0 0 0 1em inset, -#{$yOffset} 0 0, #{$yOffset} 0 0, 0 #{$yOffset} 0, -#{$yOffset} #{$yOffset} 0, #{$yOffset} #{$yOffset} 0;
|
108 | margin: 0.26em;
|
109 | }
|
110 | }
|
111 |
|
112 | %Caret {
|
113 | @extend %DefaultWidthHeight;
|
114 | &:before {
|
115 | @extend %PseudoClass;
|
116 | border-width: 0.4em;
|
117 | border-style: solid;
|
118 | border-color: transparent;
|
119 | }
|
120 | }
|
121 |
|
122 | .vxe-icon--caret-top {
|
123 | @extend %Caret;
|
124 | &:before {
|
125 | left: 0.1em;
|
126 | bottom: 0.3em;
|
127 | border-bottom-color: inherit;
|
128 | }
|
129 | }
|
130 |
|
131 | .vxe-icon--caret-bottom {
|
132 | @extend %Caret;
|
133 | &:before {
|
134 | left: 0.1em;
|
135 | top: 0.3em;
|
136 | border-top-color: inherit;
|
137 | }
|
138 | }
|
139 |
|
140 | .vxe-icon--caret-left {
|
141 | @extend %Caret;
|
142 | &:before {
|
143 | right: 0.3em;
|
144 | bottom: 0.1em;
|
145 | border-right-color: inherit;
|
146 | }
|
147 | }
|
148 |
|
149 | .vxe-icon--caret-right {
|
150 | @extend %Caret;
|
151 | &:before {
|
152 | left: 0.3em;
|
153 | bottom: 0.1em;
|
154 | border-left-color: inherit;
|
155 | }
|
156 | }
|
157 |
|
158 | %BeforeArrowTop {
|
159 | &:before {
|
160 | @extend %PseudoClass;
|
161 | top: 0.32em;
|
162 | left: 0.12em;
|
163 | width: 0.6em;
|
164 | height: 0.6em;
|
165 | border-width: 0.1em;
|
166 | border-style: solid;
|
167 | border-top-color: inherit;
|
168 | border-right-color: inherit;
|
169 | border-bottom-color: transparent;
|
170 | border-left-color: transparent;
|
171 | }
|
172 | }
|
173 |
|
174 | .vxe-icon--arrow-top {
|
175 | @extend %DefaultWidthHeight;
|
176 | &:before {
|
177 | @extend %PseudoClass;
|
178 | top: 0.4em;
|
179 | left: 0.14em;
|
180 | width: 0.7em;
|
181 | height: 0.7em;
|
182 | border-width: 0.15em;
|
183 | border-style: solid;
|
184 | border-top-color: inherit;
|
185 | border-right-color: inherit;
|
186 | border-bottom-color: transparent;
|
187 | border-left-color: transparent;
|
188 | border-radius: 0.15em;
|
189 | transform: rotate(-45deg);
|
190 | }
|
191 | }
|
192 |
|
193 | .vxe-icon--arrow-bottom {
|
194 | @extend .vxe-icon--arrow-top;
|
195 | &:before {
|
196 | top: 0;
|
197 | left: 0.14em;
|
198 | transform: rotate(135deg);
|
199 | }
|
200 | }
|
201 |
|
202 | .vxe-icon--arrow-left {
|
203 | @extend .vxe-icon--arrow-top;
|
204 | &:before {
|
205 | top: 0.18em;
|
206 | left: 0.35em;
|
207 | transform: rotate(-135deg);
|
208 | }
|
209 | }
|
210 |
|
211 | .vxe-icon--arrow-right {
|
212 | @extend .vxe-icon--arrow-top;
|
213 | &:before {
|
214 | top: 0.18em;
|
215 | left: 0;
|
216 | transform: rotate(45deg);
|
217 | }
|
218 | }
|
219 |
|
220 | .vxe-icon--d-arrow-left {
|
221 | @extend %DefaultWidthHeight;
|
222 | &:before {
|
223 | left: 0.15em;
|
224 | }
|
225 | &:after {
|
226 | left: 0.58em;
|
227 | }
|
228 | &:before,
|
229 | &:after {
|
230 | @extend %PseudoClass;
|
231 | top: 0.18em;
|
232 | width: 0.7em;
|
233 | height: 0.7em;
|
234 | border-width: 0.15em;
|
235 | border-style: solid;
|
236 | border-top-color: inherit;
|
237 | border-right-color: transparent;
|
238 | border-bottom-color: transparent;
|
239 | border-left-color: inherit;
|
240 | border-radius: 0.15em;
|
241 | transform: rotate(-45deg);
|
242 | }
|
243 | }
|
244 |
|
245 | .vxe-icon--d-arrow-right {
|
246 | @extend .vxe-icon--d-arrow-left;
|
247 | &:before,
|
248 | &:after {
|
249 | transform: rotate(135deg);
|
250 | }
|
251 | &:before {
|
252 | left: -0.25em;
|
253 | }
|
254 | &:after {
|
255 | left: 0.18em;
|
256 | }
|
257 | }
|
258 |
|
259 | .vxe-icon--funnel {
|
260 | @extend %DefaultWidthHeight;
|
261 | &:before {
|
262 | @extend %PseudoClass;
|
263 | top: 0.05em;
|
264 | left: 0;
|
265 | border-width: 0.5em;
|
266 | border-style: solid;
|
267 | border-top-color: inherit;
|
268 | border-right-color: transparent;
|
269 | border-bottom-color: transparent;
|
270 | border-left-color: transparent;
|
271 | }
|
272 | &:after {
|
273 | @extend %PseudoClass;
|
274 | left: 0.41em;
|
275 | top: 0.4em;
|
276 | width: 0;
|
277 | height: 0.5em;
|
278 | border-width: 0 0.2em 0 0;
|
279 | border-style: solid;
|
280 | border-right-color: inherit;
|
281 | }
|
282 | }
|
283 |
|
284 | .vxe-icon--edit-outline {
|
285 | @extend %DefaultWidthHeight;
|
286 | &:before {
|
287 | @extend %PseudoClass;
|
288 | height: 0.84em;
|
289 | width: 0.86em;
|
290 | top: 0.1em;
|
291 | left: 0.02em;
|
292 | border-radius: 0.2em;
|
293 | border-width: 0.1em;
|
294 | border-style: solid;
|
295 | border-color: inherit;
|
296 | }
|
297 | &:after {
|
298 | @extend %PseudoClass;
|
299 | left: 0.6em;
|
300 | bottom: 0.2em;
|
301 | width: 0;
|
302 | height: 0.8em;
|
303 | border-radius: 0 0 80% 80%;
|
304 | border-width: 0 0 0 0.22em;
|
305 | border-style: solid;
|
306 | border-color: inherit;
|
307 | transform: rotate(45deg);
|
308 | }
|
309 | }
|
310 |
|
311 | .vxe-icon--more {
|
312 | @extend %DefaultWidthHeight;
|
313 | &:before {
|
314 | @extend %PseudoClass;
|
315 | content: "...";
|
316 | top: 0;
|
317 | left: 0.1em;
|
318 | line-height: 0.5em;
|
319 | font-weight: 700;
|
320 | }
|
321 | }
|
322 |
|
323 | .vxe-icon--plus {
|
324 | @extend %DefaultWidthHeight;
|
325 | &:before {
|
326 | @extend %PseudoClass;
|
327 | content: "+";
|
328 | left: -0.05em;
|
329 | bottom: 0;
|
330 | line-height: 0.9em;
|
331 | font-size: 1.4em;
|
332 | }
|
333 | }
|
334 |
|
335 | .vxe-icon--check {
|
336 | @extend %DefaultWidthHeight;
|
337 | &:before {
|
338 | @extend %PseudoClass;
|
339 | left: 0.25em;
|
340 | bottom: 0.2em;
|
341 | width: 0.5em;
|
342 | height: 0.9em;
|
343 | border-width: 0.15em;
|
344 | border-style: solid;
|
345 | border-top-color: transparent;
|
346 | border-right-color: inherit;
|
347 | border-bottom-color: inherit;
|
348 | border-radius: 0.15em;
|
349 | border-left-color: transparent;
|
350 | transform: rotate(45deg);
|
351 | }
|
352 | }
|
353 |
|
354 | .vxe-icon--close {
|
355 | @extend %DefaultWidthHeight;
|
356 | &:before {
|
357 | @extend %PseudoClass;
|
358 | content: "\D7";
|
359 | left: -0.05em;
|
360 | bottom: 0;
|
361 | line-height: 0.8em;
|
362 | font-size: 1.4em;
|
363 | }
|
364 | }
|
365 |
|
366 | .vxe-icon--minus {
|
367 | @extend %DefaultWidthHeight;
|
368 | &:before {
|
369 | @extend %PseudoClass;
|
370 | content: "\2500";
|
371 | left: 0;
|
372 | bottom: 0;
|
373 | width: 100%;
|
374 | text-align: center;
|
375 | line-height: 0.9em;
|
376 | font-size: 1.2em;
|
377 | }
|
378 | }
|
379 |
|
380 | .vxe-icon--refresh {
|
381 | @extend %DefaultWidthHeight;
|
382 | border-width: 0.1em;
|
383 | border-style: solid;
|
384 | border-radius: 50%;
|
385 | border-right-color: transparent !important;
|
386 | border-left-color: transparent !important;
|
387 | &:before {
|
388 | left: 50%;
|
389 | top: 0;
|
390 | transform: translateX(50%) rotate(-45deg);
|
391 | }
|
392 | &:after {
|
393 | right: 50%;
|
394 | bottom: 0;
|
395 | transform: translateX(-50%) rotate(135deg);
|
396 | }
|
397 | &:before,
|
398 | &:after {
|
399 | @extend %PseudoClass;
|
400 | width: 0;
|
401 | height: 0;
|
402 | border-width: 0.25em;
|
403 | border-style: solid;
|
404 | border-right-color: transparent;
|
405 | border-bottom-color: transparent;
|
406 | border-left-color: transparent;
|
407 | }
|
408 | &.roll {
|
409 | animation: rollCircle 1s infinite linear;
|
410 | }
|
411 | }
|
412 |
|
413 | @keyframes rollCircle {
|
414 | 0% {
|
415 | transform: rotate(0deg);
|
416 | }
|
417 | 100% {
|
418 | transform: rotate(360deg);
|
419 | }
|
420 | }
|
421 |
|
422 | %BeforeSolidRadius {
|
423 | content: "";
|
424 | border-radius: 50%;
|
425 | border-width: 0.5em;
|
426 | border-style: solid;
|
427 | border-color: inherit;
|
428 | position: absolute;
|
429 | top: 0;
|
430 | left: 0;
|
431 | transform: scale(0.95);
|
432 | }
|
433 |
|
434 | %QuestionAndInfoWarning {
|
435 | &:after {
|
436 | @extend %PseudoClass;
|
437 | left: 0;
|
438 | bottom: 0;
|
439 | width: 100%;
|
440 | text-align: center;
|
441 | color: $vxe-icon-background-color;
|
442 | transform: rotate(-10deg) scale(0.75);
|
443 | }
|
444 | }
|
445 |
|
446 | .vxe-icon--question {
|
447 | @extend %DefaultWidthHeight, %QuestionAndInfoWarning;
|
448 | &:before {
|
449 | @extend %BeforeSolidRadius;
|
450 | }
|
451 | &:after {
|
452 | content: "\3F";
|
453 | }
|
454 | }
|
455 |
|
456 | .vxe-icon--info {
|
457 | @extend %DefaultWidthHeight, %QuestionAndInfoWarning;
|
458 | &:before {
|
459 | @extend %BeforeSolidRadius;
|
460 | }
|
461 | &:after {
|
462 | content: "\A1";
|
463 | }
|
464 | }
|
465 |
|
466 | .vxe-icon--warning {
|
467 | @extend %DefaultWidthHeight, %QuestionAndInfoWarning;
|
468 | &:before {
|
469 | @extend %BeforeSolidRadius;
|
470 | }
|
471 | &:after {
|
472 | content: "\21";
|
473 | }
|
474 | }
|
475 |
|
476 | .vxe-icon--success {
|
477 | @extend %DefaultWidthHeight;
|
478 | &:before {
|
479 | @extend %BeforeSolidRadius;
|
480 | }
|
481 | &:after {
|
482 | @extend %PseudoClass;
|
483 | content: "\2713";
|
484 | left: 0.25em;
|
485 | bottom: 0;
|
486 | color: $vxe-icon-background-color;
|
487 | font-size: 0.65em;
|
488 | }
|
489 | }
|
490 |
|
491 | .vxe-icon--circle-plus {
|
492 | @extend %DefaultWidthHeight;
|
493 | &:before {
|
494 | @extend %BeforeSolidRadius;
|
495 | }
|
496 | &:after {
|
497 | @extend %PseudoClass;
|
498 | content: "+";
|
499 | left: 0;
|
500 | bottom: 0;
|
501 | width: 100%;
|
502 | text-align: center;
|
503 | color: $vxe-icon-background-color;
|
504 | line-height: 1.4em;
|
505 | font-size: 0.8em;
|
506 | }
|
507 | }
|
508 |
|
509 | .vxe-icon--remove {
|
510 | @extend %DefaultWidthHeight;
|
511 | &:before {
|
512 | @extend %BeforeSolidRadius;
|
513 | }
|
514 | &:after {
|
515 | @extend %PseudoClass;
|
516 | content: "\2500";
|
517 | left: 0;
|
518 | bottom: 0;
|
519 | width: 100%;
|
520 | text-align: center;
|
521 | line-height: 1.5em;
|
522 | color: $vxe-icon-background-color;
|
523 | font-size: 0.7em;
|
524 | }
|
525 | }
|
526 |
|
527 | .vxe-icon--error {
|
528 | @extend %DefaultWidthHeight;
|
529 | &:before {
|
530 | @extend %BeforeSolidRadius;
|
531 | }
|
532 | &:after {
|
533 | @extend %PseudoClass;
|
534 | content: "\D7";
|
535 | left: 0;
|
536 | bottom: 0;
|
537 | width: 100%;
|
538 | line-height: 1.4em;
|
539 | text-align: center;
|
540 | color: $vxe-icon-background-color;
|
541 | font-size: 0.8em;
|
542 | }
|
543 | }
|
544 |
|
545 | .vxe-icon--upload,
|
546 | .vxe-icon--download {
|
547 | @extend %DefaultWidthHeight;
|
548 | overflow: hidden;
|
549 | &:before {
|
550 | @extend %PseudoClass;
|
551 | left: 0;
|
552 | width: 1em;
|
553 | border-width: 0;
|
554 | border-style: solid;
|
555 | border-color: inherit;
|
556 | }
|
557 | &:after {
|
558 | @extend %PseudoClass;
|
559 | width: 100%;
|
560 | text-align: center;
|
561 | font-size: 2em;
|
562 | }
|
563 | }
|
564 |
|
565 | .vxe-icon--upload {
|
566 | &:before {
|
567 | top: 0.1em;
|
568 | border-top-width: 0.1em;
|
569 | }
|
570 | &:after {
|
571 | content: "\2191";
|
572 | left: 0;
|
573 | top: 0.15em;
|
574 | }
|
575 | }
|
576 |
|
577 | .vxe-icon--download {
|
578 | &:before {
|
579 | bottom: 0.05em;
|
580 | border-bottom-width: 0.1em;
|
581 | }
|
582 | &:after {
|
583 | content: "\2191";
|
584 | left: 0;
|
585 | bottom: 0.15em;
|
586 | transform: rotate(180deg);
|
587 | }
|
588 | }
|
589 |
|
590 | .vxe-icon--eye,
|
591 | .vxe-icon--eye-slash {
|
592 | @extend %DefaultWidthHeight;
|
593 | &:before {
|
594 | @extend %PseudoClass;
|
595 | content: "\25CF";
|
596 | top: 0.16em;
|
597 | left: 0;
|
598 | width: 1em;
|
599 | height: 0.68em;
|
600 | line-height: 0.25em;
|
601 | border-radius: 50%;
|
602 | border-width: 0.1em;
|
603 | border-style: solid;
|
604 | border-color: inherit;
|
605 | text-align: center;
|
606 | }
|
607 | }
|
608 |
|
609 | .vxe-icon--eye-slash {
|
610 | &:after {
|
611 | @extend %PseudoClass;
|
612 | top: -0.1em;
|
613 | left: 0.45em;
|
614 | width: 0;
|
615 | height: 1.2em;
|
616 | border-width: 0;
|
617 | border-style: solid;
|
618 | border-color: inherit;
|
619 | border-left-width: 0.1em;
|
620 | transform: rotate(45deg);
|
621 | }
|
622 | }
|
623 |
|
624 | .vxe-icon--calendar {
|
625 | @extend %DefaultWidthHeight;
|
626 | &:before {
|
627 | @extend %PseudoClass;
|
628 | top: 0.15em;
|
629 | left: 0;
|
630 | width: 1em;
|
631 | height: 0.8em;
|
632 | border-width: 0.2em 0.1em 0.1em 0.1em;
|
633 | border-radius: 0.1em 0.1em 0 0;
|
634 | border-style: solid;
|
635 | border-color: inherit;
|
636 | }
|
637 | &:after {
|
638 | @extend %PseudoClass;
|
639 | left: 0.2em;
|
640 | top: 0;
|
641 | width: 0.6em;
|
642 | height: 0.3em;
|
643 | border-width: 0 0.1em;
|
644 | border-style: solid;
|
645 | border-color: inherit;
|
646 | }
|
647 | }
|
648 |
|
649 | .vxe-icon--dot {
|
650 | @extend %DefaultWidthHeight;
|
651 | &:before {
|
652 | @extend %PseudoClass;
|
653 | top: 0.25em;
|
654 | left: 0.25em;
|
655 | border-radius: 50%;
|
656 | border-width: 0.25em;
|
657 | border-style: solid;
|
658 | border-color: inherit;
|
659 | }
|
660 | }
|
661 |
|
662 | .vxe-icon--print {
|
663 | @extend %DefaultWidthHeight;
|
664 | box-shadow: inset 0 0 0 0.1em;
|
665 | border-width: 0.2em 0;
|
666 | border-style: solid;
|
667 | border-color: transparent !important;
|
668 | border-radius: 0.3em 0.3em 0 0;
|
669 | &:before {
|
670 | @extend %PseudoClass;
|
671 | width: 0.6em;
|
672 | height: 0.3em;
|
673 | top: -0.2em;
|
674 | left: 0.2em;
|
675 | box-shadow: inset 0 0 0 0.1em;
|
676 | }
|
677 | &:after {
|
678 | @extend %PseudoClass;
|
679 | width: 0.6em;
|
680 | height: 0.6em;
|
681 | left: 0.2em;
|
682 | bottom: -0.2em;
|
683 | box-shadow: inset 0 0 0 0.1em;
|
684 | background-color: $vxe-icon-background-color;
|
685 | }
|
686 | }
|
687 |
|
688 | .vxe-icon--search {
|
689 | @extend %DefaultWidthHeight;
|
690 | &:before {
|
691 | @extend %PseudoClass;
|
692 | top: 0;
|
693 | left: 0;
|
694 | width: 0.8em;
|
695 | height: 0.8em;
|
696 | border-width: 0.15em;
|
697 | border-style: solid;
|
698 | border-color: inherit;
|
699 | border-radius: 50%;
|
700 | }
|
701 | &:after {
|
702 | @extend %PseudoClass;
|
703 | top: 0.75em;
|
704 | left: 0.6em;
|
705 | width: 0.35em;
|
706 | height: 0;
|
707 | border-width: 0.15em 0 0 0;
|
708 | border-style: solid;
|
709 | border-color: inherit;
|
710 | transform: rotate(45deg);
|
711 | }
|
712 | }
|