Authored by ccbikai(👎🏻🍜)

dialog

@@ -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
  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 +}
@@ -5,3 +5,4 @@ @@ -5,3 +5,4 @@
5 @import "error"; 5 @import "error";
6 @import "loading"; 6 @import "loading";
7 @import "data-bind"; 7 @import "data-bind";
  8 +@import "dialog";
@@ -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 -}