1 | @import '../../style/themes/index';
|
2 | @import '../../style/mixins/index';
|
3 |
|
4 | @popover-prefix-cls: ~'@{ant-prefix}-popover';
|
5 |
|
6 | .@{popover-prefix-cls} {
|
7 | .reset-component();
|
8 |
|
9 | position: absolute;
|
10 | top: 0;
|
11 | left: 0;
|
12 | z-index: @zindex-popover;
|
13 | font-weight: normal;
|
14 | white-space: normal;
|
15 | text-align: left;
|
16 | cursor: auto;
|
17 | user-select: text;
|
18 |
|
19 | &::after {
|
20 | position: absolute;
|
21 | background: fade(@white, 1%);
|
22 | content: '';
|
23 | }
|
24 |
|
25 | &-hidden {
|
26 | display: none;
|
27 | }
|
28 |
|
29 |
|
30 | &-placement-top,
|
31 | &-placement-topLeft,
|
32 | &-placement-topRight {
|
33 | padding-bottom: @popover-distance;
|
34 | }
|
35 |
|
36 | &-placement-right,
|
37 | &-placement-rightTop,
|
38 | &-placement-rightBottom {
|
39 | padding-left: @popover-distance;
|
40 | }
|
41 |
|
42 | &-placement-bottom,
|
43 | &-placement-bottomLeft,
|
44 | &-placement-bottomRight {
|
45 | padding-top: @popover-distance;
|
46 | }
|
47 |
|
48 | &-placement-left,
|
49 | &-placement-leftTop,
|
50 | &-placement-leftBottom {
|
51 | padding-right: @popover-distance;
|
52 | }
|
53 |
|
54 | &-inner {
|
55 | background-color: @popover-bg;
|
56 | background-clip: padding-box;
|
57 | border-radius: @border-radius-base;
|
58 | box-shadow: @box-shadow-base;
|
59 | box-shadow: ~'0 0 8px @{shadow-color} \9';
|
60 | }
|
61 |
|
62 | @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
|
63 |
|
64 | &-inner {
|
65 | box-shadow: @box-shadow-base;
|
66 | }
|
67 | }
|
68 |
|
69 | &-title {
|
70 | min-width: @popover-min-width;
|
71 | min-height: 32px;
|
72 | margin: 0;
|
73 | padding: 5px @padding-md 4px;
|
74 | color: @heading-color;
|
75 | font-weight: 500;
|
76 | border-bottom: 1px solid @border-color-split;
|
77 | }
|
78 |
|
79 | &-inner-content {
|
80 | padding: 12px @padding-md;
|
81 | color: @popover-color;
|
82 | }
|
83 |
|
84 | &-message {
|
85 | position: relative;
|
86 | padding: 4px 0 12px;
|
87 | color: @popover-color;
|
88 | font-size: @font-size-base;
|
89 | > .@{iconfont-css-prefix} {
|
90 | position: absolute;
|
91 | top: 8px;
|
92 | color: @warning-color;
|
93 | font-size: @font-size-base;
|
94 | }
|
95 | &-title {
|
96 | padding-left: @font-size-base + 8px;
|
97 | }
|
98 | }
|
99 |
|
100 | &-buttons {
|
101 | margin-bottom: 4px;
|
102 | text-align: right;
|
103 | button {
|
104 | margin-left: 8px;
|
105 | }
|
106 | }
|
107 |
|
108 |
|
109 |
|
110 |
|
111 | &-arrow {
|
112 | position: absolute;
|
113 | display: block;
|
114 | width: sqrt(@popover-arrow-width * @popover-arrow-width * 2);
|
115 | height: sqrt(@popover-arrow-width * @popover-arrow-width * 2);
|
116 | background: transparent;
|
117 | border-style: solid;
|
118 | border-width: (sqrt(@popover-arrow-width * @popover-arrow-width * 2) / 2);
|
119 | transform: rotate(45deg);
|
120 | }
|
121 |
|
122 | &-placement-top > &-content > &-arrow,
|
123 | &-placement-topLeft > &-content > &-arrow,
|
124 | &-placement-topRight > &-content > &-arrow {
|
125 | bottom: @popover-distance - @popover-arrow-width + 2.2px;
|
126 | border-top-color: transparent;
|
127 | border-right-color: @popover-bg;
|
128 | border-bottom-color: @popover-bg;
|
129 | border-left-color: transparent;
|
130 | box-shadow: 3px 3px 7px fade(@black, 7%);
|
131 | }
|
132 | &-placement-top > &-content > &-arrow {
|
133 | left: 50%;
|
134 | transform: translateX(-50%) rotate(45deg);
|
135 | }
|
136 | &-placement-topLeft > &-content > &-arrow {
|
137 | left: 16px;
|
138 | }
|
139 | &-placement-topRight > &-content > &-arrow {
|
140 | right: 16px;
|
141 | }
|
142 |
|
143 | &-placement-right > &-content > &-arrow,
|
144 | &-placement-rightTop > &-content > &-arrow,
|
145 | &-placement-rightBottom > &-content > &-arrow {
|
146 | left: @popover-distance - @popover-arrow-width + 2px;
|
147 | border-top-color: transparent;
|
148 | border-right-color: transparent;
|
149 | border-bottom-color: @popover-bg;
|
150 | border-left-color: @popover-bg;
|
151 | box-shadow: -3px 3px 7px fade(@black, 7%);
|
152 | }
|
153 | &-placement-right > &-content > &-arrow {
|
154 | top: 50%;
|
155 | transform: translateY(-50%) rotate(45deg);
|
156 | }
|
157 | &-placement-rightTop > &-content > &-arrow {
|
158 | top: 12px;
|
159 | }
|
160 | &-placement-rightBottom > &-content > &-arrow {
|
161 | bottom: 12px;
|
162 | }
|
163 |
|
164 | &-placement-bottom > &-content > &-arrow,
|
165 | &-placement-bottomLeft > &-content > &-arrow,
|
166 | &-placement-bottomRight > &-content > &-arrow {
|
167 | top: @popover-distance - @popover-arrow-width + 2px;
|
168 | border-top-color: @popover-bg;
|
169 | border-right-color: transparent;
|
170 | border-bottom-color: transparent;
|
171 | border-left-color: @popover-bg;
|
172 | box-shadow: -2px -2px 5px fade(@black, 6%);
|
173 | }
|
174 | &-placement-bottom > &-content > &-arrow {
|
175 | left: 50%;
|
176 | transform: translateX(-50%) rotate(45deg);
|
177 | }
|
178 | &-placement-bottomLeft > &-content > &-arrow {
|
179 | left: 16px;
|
180 | }
|
181 | &-placement-bottomRight > &-content > &-arrow {
|
182 | right: 16px;
|
183 | }
|
184 |
|
185 | &-placement-left > &-content > &-arrow,
|
186 | &-placement-leftTop > &-content > &-arrow,
|
187 | &-placement-leftBottom > &-content > &-arrow {
|
188 | right: @popover-distance - @popover-arrow-width + 2px;
|
189 | border-top-color: @popover-bg;
|
190 | border-right-color: @popover-bg;
|
191 | border-bottom-color: transparent;
|
192 | border-left-color: transparent;
|
193 | box-shadow: 3px -3px 7px fade(@black, 7%);
|
194 | }
|
195 | &-placement-left > &-content > &-arrow {
|
196 | top: 50%;
|
197 | transform: translateY(-50%) rotate(45deg);
|
198 | }
|
199 | &-placement-leftTop > &-content > &-arrow {
|
200 | top: 12px;
|
201 | }
|
202 | &-placement-leftBottom > &-content > &-arrow {
|
203 | bottom: 12px;
|
204 | }
|
205 | }
|