1 |
|
2 |
|
3 |
|
4 | .vxe-table--tooltip-wrapper {
|
5 | display: none;
|
6 | position: absolute;
|
7 | top: -100%;
|
8 | left: -100%;
|
9 | font-size: 12px;
|
10 | max-width: 500px;
|
11 | border-radius: $vxe-border-radius;
|
12 | padding: 8px 12px;
|
13 | white-space: normal;
|
14 | word-break: break-word;
|
15 | box-shadow: 2px 2px 4px -2px rgba(0,0,0,.2);
|
16 | color: $vxe-font-color;
|
17 | font-family: $vxe-font-family;
|
18 | &:not(.is--enterable) {
|
19 | pointer-events: none;
|
20 | }
|
21 | &.is--visible {
|
22 | display: block;
|
23 | }
|
24 | &.is--arrow {
|
25 | .vxe-table--tooltip-arrow {
|
26 | display: block;
|
27 | }
|
28 | }
|
29 | &.is--enterable {
|
30 | &:after {
|
31 | content: "";
|
32 | position: absolute;
|
33 | left: 0;
|
34 | width: 100%;
|
35 | height: 6px;
|
36 | background-color: transparent;
|
37 | }
|
38 | }
|
39 | .vxe-table--tooltip-content {
|
40 | white-space: pre-line;
|
41 | }
|
42 | .vxe-table--tooltip-arrow {
|
43 | display: none;
|
44 | position: absolute;
|
45 | border-color: transparent;
|
46 | border-width: 6px;
|
47 | border-style: solid;
|
48 | left: 50%;
|
49 | transform: translateX(-6px);
|
50 | &:before {
|
51 | content: "";
|
52 | position: absolute;
|
53 | border-color: transparent;
|
54 | border-width: 5px;
|
55 | border-style: solid;
|
56 | left: -5px;
|
57 | }
|
58 | }
|
59 | &.placement--top {
|
60 | &.is--enterable {
|
61 | &:after {
|
62 | bottom: -6px;
|
63 | }
|
64 | }
|
65 | .vxe-table--tooltip-arrow {
|
66 | bottom: -12px;
|
67 | &:before {
|
68 | top: -7px;
|
69 | }
|
70 | }
|
71 | }
|
72 | &.placement--bottom {
|
73 | &.is--enterable {
|
74 | &:after {
|
75 | top: -6px;
|
76 | }
|
77 | }
|
78 | .vxe-table--tooltip-arrow {
|
79 | top: -12px;
|
80 | &:before {
|
81 | top: -4px;
|
82 | }
|
83 | }
|
84 | }
|
85 | }
|
86 | .vxe-table--tooltip-wrapper {
|
87 | &.theme--light {
|
88 | background-color: $vxe-tooltip-light-background-color;
|
89 | border: 1px solid $vxe-input-border-color;
|
90 | &.placement--top {
|
91 | .vxe-table--tooltip-arrow {
|
92 | border-top-color: $vxe-input-border-color;
|
93 | &:before {
|
94 | border-top-color: $vxe-tooltip-light-background-color;
|
95 | }
|
96 | }
|
97 | }
|
98 | &.placement--bottom {
|
99 | .vxe-table--tooltip-arrow {
|
100 | border-bottom-color: $vxe-input-border-color;
|
101 | &:before {
|
102 | border-bottom-color: $vxe-tooltip-light-background-color;
|
103 | }
|
104 | }
|
105 | }
|
106 | }
|
107 | &.theme--dark {
|
108 | background: $vxe-tooltip-dark-background-color;
|
109 | color: $vxe-tooltip-dark-color;
|
110 | &.placement--top {
|
111 | .vxe-table--tooltip-arrow {
|
112 | border-top-color: $vxe-tooltip-dark-background-color;
|
113 | &:before {
|
114 | border-top-color: $vxe-tooltip-dark-background-color;
|
115 | }
|
116 | }
|
117 | }
|
118 | &.placement--bottom {
|
119 | .vxe-table--tooltip-arrow {
|
120 | border-bottom-color: $vxe-tooltip-dark-background-color;
|
121 | &:before {
|
122 | border-bottom-color: $vxe-tooltip-dark-background-color;
|
123 | }
|
124 | }
|
125 | }
|
126 | }
|
127 | }
|
128 |
|
129 |
|
130 | .vxe-table--tooltip-wrapper {
|
131 | &.vxe-table--valid-error {
|
132 | background-color: $vxe-tooltip-validate-error-background-color;
|
133 | color: $vxe-tooltip-validate-error-color;
|
134 | }
|
135 | } |
\ | No newline at end of file |