1 |
|
2 |
|
3 |
|
4 |
|
5 | .c7n-modal {
|
6 | -webkit-box-sizing: border-box;
|
7 | box-sizing: border-box;
|
8 | margin: 0;
|
9 | padding: 0;
|
10 | list-style: none;
|
11 | position: relative;
|
12 | top: 1rem;
|
13 | width: auto;
|
14 | margin: 0 auto;
|
15 | padding-bottom: 0.24rem;
|
16 | }
|
17 | .c7n-modal-wrap {
|
18 | position: fixed;
|
19 | top: 0;
|
20 | right: 0;
|
21 | bottom: 0;
|
22 | left: 0;
|
23 | z-index: 1000;
|
24 | overflow: auto;
|
25 | outline: 0;
|
26 | -webkit-overflow-scrolling: touch;
|
27 | }
|
28 | .c7n-modal-title {
|
29 | margin: 0;
|
30 | color: rgba(0, 0, 0, 0.85);
|
31 | font-weight: 500;
|
32 | font-size: 0.18rem;
|
33 | line-height: 0.24rem;
|
34 | letter-spacing: 0;
|
35 | }
|
36 | .c7n-modal-content {
|
37 | position: relative;
|
38 | padding: 0.24rem;
|
39 | background-color: #fff;
|
40 | background-clip: padding-box;
|
41 | border: 0;
|
42 | border-radius: 0.02rem;
|
43 | -webkit-box-shadow: 0 0.04rem 0.12rem rgba(0, 0, 0, 0.12);
|
44 | box-shadow: 0 0.04rem 0.12rem rgba(0, 0, 0, 0.12);
|
45 | }
|
46 | .c7n-modal-close {
|
47 | position: absolute;
|
48 | top: 0;
|
49 | right: 0;
|
50 | z-index: 10;
|
51 | padding: 0;
|
52 | color: rgba(0, 0, 0, 0.45);
|
53 | font-weight: 700;
|
54 | line-height: 1;
|
55 | text-decoration: none;
|
56 | background: transparent;
|
57 | border: 0;
|
58 | outline: 0;
|
59 | cursor: pointer;
|
60 | -webkit-transition: color 0.3s;
|
61 | transition: color 0.3s;
|
62 | }
|
63 | .c7n-modal-close-x.icon {
|
64 | display: block;
|
65 | width: 0.56rem;
|
66 | height: 0.56rem;
|
67 | font-style: normal;
|
68 | line-height: 0.56rem;
|
69 | text-align: center;
|
70 | text-transform: none;
|
71 | vertical-align: baseline;
|
72 | text-rendering: auto;
|
73 | }
|
74 | .c7n-modal-close:focus,
|
75 | .c7n-modal-close:hover {
|
76 | color: #444;
|
77 | text-decoration: none;
|
78 | }
|
79 | .c7n-modal-header {
|
80 | color: #000000;
|
81 | background: #fff;
|
82 | }
|
83 | .c7n-modal-body {
|
84 | font-size: 0.13rem;
|
85 | line-height: 1.5;
|
86 | word-wrap: break-word;
|
87 | }
|
88 | .c7n-modal-footer {
|
89 | margin-bottom: -0.24rem;
|
90 | padding: 0.12rem 0;
|
91 | text-align: right;
|
92 | border-radius: 0 0 0.02rem 0.02rem;
|
93 | }
|
94 | .c7n-modal-footer button + button {
|
95 | margin-bottom: 0;
|
96 | margin-left: 0.08rem;
|
97 | }
|
98 | .c7n-modal.zoom-enter,
|
99 | .c7n-modal.zoom-appear {
|
100 | -webkit-transform: none;
|
101 | -ms-transform: none;
|
102 | transform: none;
|
103 | opacity: 0;
|
104 | -webkit-animation-duration: 0.3s;
|
105 | animation-duration: 0.3s;
|
106 | }
|
107 | .c7n-modal-mask {
|
108 | position: fixed;
|
109 | top: 0;
|
110 | right: 0;
|
111 | bottom: 0;
|
112 | left: 0;
|
113 | z-index: 1000;
|
114 | height: 100%;
|
115 | background-color: #373737;
|
116 | background-color: rgba(0, 0, 0, 0.288);
|
117 | filter: alpha(opacity=50);
|
118 | }
|
119 | .c7n-modal-mask-hidden {
|
120 | display: none;
|
121 | }
|
122 | .c7n-modal-open {
|
123 | overflow: hidden;
|
124 | }
|
125 | @media (max-width: 768px) {
|
126 | .c7n-modal {
|
127 | width: auto !important;
|
128 | margin: 0.1rem;
|
129 | }
|
130 | .vertical-center-modal .c7n-modal {
|
131 | -webkit-box-flex: 1;
|
132 | -ms-flex: 1;
|
133 | flex: 1;
|
134 | }
|
135 | }
|
136 | .c7n-confirm .c7n-modal-header {
|
137 | display: none;
|
138 | }
|
139 | .c7n-confirm .c7n-modal-close {
|
140 | display: none;
|
141 | }
|
142 | .c7n-confirm .c7n-modal-body {
|
143 | padding: 0.24rem;
|
144 | }
|
145 | .c7n-confirm .c7n-modal-content {
|
146 | padding: 0;
|
147 | }
|
148 | .c7n-confirm-body-wrapper {
|
149 | zoom: 1;
|
150 | }
|
151 | .c7n-confirm-body-wrapper::before,
|
152 | .c7n-confirm-body-wrapper::after {
|
153 | display: table;
|
154 | content: ' ';
|
155 | }
|
156 | .c7n-confirm-body-wrapper::after {
|
157 | clear: both;
|
158 | height: 0;
|
159 | font-size: 0;
|
160 | visibility: hidden;
|
161 | }
|
162 | .c7n-confirm-body .c7n-confirm-title {
|
163 | display: block;
|
164 | overflow: auto;
|
165 | color: rgba(0, 0, 0, 0.85);
|
166 | font-weight: 500;
|
167 | font-size: 0.2rem;
|
168 | line-height: 0.32rem;
|
169 | }
|
170 | .c7n-confirm-body .c7n-confirm-content {
|
171 | margin-top: 0.08rem;
|
172 | color: #000000;
|
173 | font-size: 0.13rem;
|
174 | }
|
175 | .c7n-confirm-body i + span + .c7n-confirm-content {
|
176 | margin-left: 0.4rem;
|
177 | }
|
178 | .c7n-confirm-body > .icon {
|
179 | float: left;
|
180 | margin-right: 0.16rem;
|
181 | font-size: 0.24rem;
|
182 | line-height: 0.32rem;
|
183 | }
|
184 | .c7n-confirm .c7n-confirm-btns {
|
185 | margin-bottom: -0.24rem;
|
186 | padding: 0.12rem 0;
|
187 | text-align: right;
|
188 | }
|
189 | .c7n-confirm .c7n-confirm-btns button + button {
|
190 | margin-bottom: 0;
|
191 | margin-left: 0.08rem;
|
192 | }
|
193 | .c7n-confirm-error .c7n-confirm-body > .icon {
|
194 | color: #d50000;
|
195 | }
|
196 | .c7n-confirm-warning .c7n-confirm-body > .icon,
|
197 | .c7n-confirm-confirm .c7n-confirm-body > .icon {
|
198 | color: #faad14;
|
199 | }
|
200 | .c7n-confirm-info .c7n-confirm-body > .icon {
|
201 | color: #3f51b5;
|
202 | }
|
203 | .c7n-confirm-success .c7n-confirm-body > .icon {
|
204 | color: #00bf96;
|
205 | }
|
206 | .c7n-modal-sidebar {
|
207 | position: absolute;
|
208 | top: 0;
|
209 | bottom: 0;
|
210 | width: 100%;
|
211 | height: 100%;
|
212 | padding-bottom: 0;
|
213 | outline: 0;
|
214 | -webkit-transform-origin: 100% 0% !important;
|
215 | -ms-transform-origin: 100% 0% !important;
|
216 | transform-origin: 100% 0% !important;
|
217 | opacity: 0;
|
218 | }
|
219 | .c7n-modal-sidebar.c7n-modal-sidebar-open {
|
220 | opacity: 1;
|
221 | }
|
222 | .c7n-modal-sidebar .c7n-modal-content {
|
223 | position: absolute;
|
224 | left: 3.52rem;
|
225 | width: calc(100% - 3.52rem);
|
226 | height: 100%;
|
227 | padding: 0;
|
228 | overflow: auto;
|
229 | }
|
230 | .c7n-modal-sidebar-fixed-width {
|
231 | right: 0;
|
232 | }
|
233 | .c7n-modal-sidebar-fixed-width .c7n-modal-content {
|
234 | left: auto;
|
235 | width: 100%;
|
236 | }
|
237 | .c7n-modal-sidebar .c7n-modal-header {
|
238 | display: -webkit-box;
|
239 | display: -ms-flexbox;
|
240 | display: flex;
|
241 | -webkit-box-orient: horizontal;
|
242 | -webkit-box-direction: normal;
|
243 | -ms-flex-direction: row;
|
244 | flex-direction: row;
|
245 | -webkit-box-align: center;
|
246 | -ms-flex-align: center;
|
247 | align-items: center;
|
248 | width: 100%;
|
249 | height: 0.65rem;
|
250 | min-height: 0.65rem;
|
251 | padding: 0 0.08rem;
|
252 | white-space: nowrap;
|
253 | border-bottom: 0.01rem solid #e0e0e0;
|
254 | }
|
255 | .c7n-modal-sidebar .c7n-modal-header .c7n-modal-title {
|
256 | margin: 0 0.56rem 0 0.16rem;
|
257 | font-size: 0.18rem;
|
258 | line-height: 0.24rem;
|
259 | letter-spacing: 0.005em;
|
260 | }
|
261 | .c7n-modal-sidebar .c7n-modal-body {
|
262 | position: relative;
|
263 | max-height: calc(100% - 1.21rem) !important;
|
264 | padding: 0.24rem;
|
265 | overflow: auto;
|
266 | font-size: 100%;
|
267 | }
|
268 | .c7n-modal-sidebar .c7n-modal-footer {
|
269 | display: -webkit-box;
|
270 | display: -ms-flexbox;
|
271 | display: flex;
|
272 | -webkit-box-orient: horizontal;
|
273 | -webkit-box-direction: normal;
|
274 | -ms-flex-direction: row;
|
275 | flex-direction: row;
|
276 | -webkit-box-align: center;
|
277 | -ms-flex-align: center;
|
278 | align-items: center;
|
279 | -webkit-box-sizing: border-box;
|
280 | box-sizing: border-box;
|
281 | height: 0.56rem;
|
282 | padding: 0 0.24rem;
|
283 | white-space: nowrap;
|
284 | border-top: 0.01rem solid #e0e0e0;
|
285 | }
|
286 | .c7n-modal-sidebar .c7n-modal-footer button + button {
|
287 | margin-bottom: 0;
|
288 | margin-left: 0.12rem;
|
289 | }
|
290 | .c7n-modal-sidebar .c7n-modal-footer button.cancel {
|
291 | color: #3f51b5;
|
292 | }
|
293 | .c7n-modal-sidebar .c7n-modal-footer .c7n-modal-btn-cancel {
|
294 | color: #3f51b5;
|
295 | }
|