Showing
4 changed files
with
72 additions
and
72 deletions
@@ -7,7 +7,7 @@ | @@ -7,7 +7,7 @@ | ||
7 | @import "layout/header"; | 7 | @import "layout/header"; |
8 | @import "layout/footer"; | 8 | @import "layout/footer"; |
9 | @import "layout/utils"; | 9 | @import "layout/utils"; |
10 | - | 10 | +@import "common/dialog"; |
11 | @import "common/data-bind"; | 11 | @import "common/data-bind"; |
12 | @import "common/suspend-cart"; | 12 | @import "common/suspend-cart"; |
13 | 13 |
public/scss/common/_dialog.css
0 → 100644
1 | +/* dialog */ | ||
2 | +.dialog-wrapper { | ||
3 | + background: hsla(0, 0%, 0%, 0.5); | ||
4 | + position: fixed; | ||
5 | + top: 0; | ||
6 | + right: 0; | ||
7 | + bottom: 0; | ||
8 | + left: 0; | ||
9 | + display: none; | ||
10 | + | ||
11 | + .dialog-box { | ||
12 | + width: 540px; | ||
13 | + border-radius: 20px; | ||
14 | + background: hsla(100, 100%, 100%, 0.8); | ||
15 | + position: absolute; | ||
16 | + left: 50%; | ||
17 | + margin-left: -270px; | ||
18 | + font-size: 30px; | ||
19 | + text-align: center; | ||
20 | + color: #000; | ||
21 | + } | ||
22 | + | ||
23 | + .dialog-content { | ||
24 | + padding: 60px 30px; | ||
25 | + } | ||
26 | + | ||
27 | + .dialog-header { | ||
28 | + padding: 50px 0 40px; | ||
29 | + font-size: 34px; | ||
30 | + text-align: center; | ||
31 | + font-weight: bold; | ||
32 | + } | ||
33 | + | ||
34 | + .dialog-footer { | ||
35 | + height: 88px; | ||
36 | + line-height: 88px; | ||
37 | + | ||
38 | + > span { | ||
39 | + display: block; | ||
40 | + width: 50%; | ||
41 | + height: 100%; | ||
42 | + float: left; | ||
43 | + box-sizing: border-box; | ||
44 | + | ||
45 | + &:nth-last-of-type(1) { | ||
46 | + border-left: 1px solid #ccc; | ||
47 | + border-radius: 0 0 10px 10px; | ||
48 | + color: #e01; | ||
49 | + } | ||
50 | + } | ||
51 | + | ||
52 | + > span:active { | ||
53 | + background-color: #ccc; | ||
54 | + } | ||
55 | + } | ||
56 | + | ||
57 | + /*边框在物理机上1px变粗*/ | ||
58 | + .dialog-footer::before { | ||
59 | + content: ""; | ||
60 | + position: absolute; | ||
61 | + left: 0; | ||
62 | + width: 200%; | ||
63 | + height: 0; | ||
64 | + border-top: 1px solid #cccccc; | ||
65 | + transform-origin: left top; | ||
66 | + transform: scale3d(0.5,0.5,0.5); | ||
67 | + -webkit-transform: scale3d(0.5,0.5,0.5); /* Chrome, Safari, Opera */ | ||
68 | + -ms-transform: scale3d(0.5,0.5,0.5); /* IE 9 */ | ||
69 | + } | ||
70 | +} |
@@ -256,74 +256,3 @@ | @@ -256,74 +256,3 @@ | ||
256 | } | 256 | } |
257 | } | 257 | } |
258 | } | 258 | } |
259 | - | ||
260 | -/* dialog */ | ||
261 | -.dialog-wrapper { | ||
262 | - background: hsla(0, 0%, 0%, 0.5); | ||
263 | - position: fixed; | ||
264 | - top: 0; | ||
265 | - right: 0; | ||
266 | - bottom: 0; | ||
267 | - left: 0; | ||
268 | - display: none; | ||
269 | - | ||
270 | - .dialog-box { | ||
271 | - width: 540px; | ||
272 | - border-radius: 20px; | ||
273 | - background: hsla(100, 100%, 100%, 0.8); | ||
274 | - position: absolute; | ||
275 | - left: 50%; | ||
276 | - margin-left: -270px; | ||
277 | - font-size: 30px; | ||
278 | - text-align: center; | ||
279 | - color: #000; | ||
280 | - } | ||
281 | - | ||
282 | - .dialog-content { | ||
283 | - padding: 60px 30px; | ||
284 | - } | ||
285 | - | ||
286 | - .dialog-header { | ||
287 | - padding: 50px 0 40px; | ||
288 | - font-size: 34px; | ||
289 | - text-align: center; | ||
290 | - font-weight: bold; | ||
291 | - } | ||
292 | - | ||
293 | - .dialog-footer { | ||
294 | - height: 88px; | ||
295 | - line-height: 88px; | ||
296 | - | ||
297 | - > span { | ||
298 | - display: block; | ||
299 | - width: 50%; | ||
300 | - height: 100%; | ||
301 | - float: left; | ||
302 | - box-sizing: border-box; | ||
303 | - | ||
304 | - &:nth-last-of-type(1) { | ||
305 | - border-left: 1px solid #ccc; | ||
306 | - border-radius: 0 0 10px 10px; | ||
307 | - color: #e01; | ||
308 | - } | ||
309 | - } | ||
310 | - | ||
311 | - > span:active { | ||
312 | - background-color: #ccc; | ||
313 | - } | ||
314 | - } | ||
315 | - | ||
316 | - /*边框在物理机上1px变粗*/ | ||
317 | - .dialog-footer::before { | ||
318 | - content: ""; | ||
319 | - position: absolute; | ||
320 | - left: 0; | ||
321 | - width: 200%; | ||
322 | - height: 0; | ||
323 | - border-top: 1px solid #cccccc; | ||
324 | - transform-origin: left top; | ||
325 | - transform: scale3d(0.5,0.5,0.5); | ||
326 | - -webkit-transform: scale3d(0.5,0.5,0.5); /* Chrome, Safari, Opera */ | ||
327 | - -ms-transform: scale3d(0.5,0.5,0.5); /* IE 9 */ | ||
328 | - } | ||
329 | -} |
-
Please register or login to post a comment