]>
Commit | Line | Data |
---|---|---|
1 | .backdrop { | |
2 | position: fixed; | |
3 | top: 0; | |
4 | left: 0; | |
5 | width: 100%; | |
6 | height: 100%; | |
7 | background-color: #000; | |
8 | z-index: 1; | |
9 | } | |
10 | ||
11 | .modal { | |
12 | position: absolute; | |
13 | width: 60%; | |
14 | top: 10%; | |
15 | left: 20%; | |
16 | background-color: #272B30; | |
17 | color: #C8C8C8; | |
18 | padding: 0.7em; | |
19 | ||
20 | transform: scale(1.5); | |
21 | -webkit-transform: scale(1.5); | |
22 | z-index: 2; | |
23 | } | |
24 | ||
25 | .modal:after { | |
26 | position: absolute; | |
27 | content: ""; | |
28 | bottom: -10%; | |
29 | height: 10%; | |
30 | width: 1px; | |
31 | } | |
32 | ||
33 | .modal,.backdrop { | |
34 | transition: transform 0.6s, opacity 0.6s; | |
35 | -webkit-transition: transform 0.6s, opacity 0.6s; | |
36 | pointer-events: none; | |
37 | opacity: 0; | |
38 | } | |
39 | ||
40 | .modal-open .modal { | |
41 | transform: scale(1); | |
42 | -webkit-transform: scale(1); | |
43 | opacity: 1; | |
44 | pointer-events: auto; | |
45 | } | |
46 | ||
47 | .modal-open .backdrop { | |
48 | opacity: 0.7; | |
49 | pointer-events: auto; | |
50 | } |