adaptive-modal.css
5 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
.am-overlay{height:100%;width:100%;background:rgba(0,0,0,0.58);opacity:0;position:fixed;left:0;right:0;top:0;z-index:100;-webkit-transition:all .5s ease-in-out;-moz-transition:all .5s ease-in-out;-o-transition:all .5s ease-in-out;transition:all .5s ease-in-out;overflow:auto}
.am-close-backdrop{position:absolute;top:0;left:0;width:100%;height:100%;cursor:pointer}
.am-modal{position:absolute;z-index:101}
.am-modal-open .am-overlay{opacity:1}
.am-modal{-webkit-transition:all .5s ease-in-out;-moz-transition:all .5s ease-in-out;-o-transition:all .5s ease-in-out;transition:all .5s ease-in-out;-webkit-perspective:1000;-moz-perspective:1000;-o-perspective:1000;perspective:1000px}
.am-modal.am-flipped .am-wrapper,.am-modal.am-flipped .am-wrapper{-webkit-transform:rotateY(180deg);-moz-transform:rotateY(180deg);-o-transform:rotateY(180deg);transform:rotateY(180deg)}
.am-wrapper{-webkit-transition:.6s;-webkit-transform-style:preserve-3d;-moz-transition:.6s;-moz-transform-style:preserve-3d;-o-transition:.6s;-o-transform-style:preserve-3d;transition:.6s;transform-style:preserve-3d;position:relative}
.am-front,.am-back{-webkit-backface-visibility:hidden!important;-moz-backface-visibility:hidden!important;-o-backface-visibility:hidden!important;backface-visibility:hidden!important;position:absolute!important;top:0!important;left:0!important}
.am-front{z-index:2!important}
.am-back{background:#f1f1f2;-webkit-transform:rotateY(180deg);-moz-transform:rotateY(180deg);-o-transform:rotateY(180deg);transform:rotateY(180deg);-webkit-transition:all .5s ease-in-out;-moz-transition:all .5s ease-in-out;-o-transition:all .5s ease-in-out;transition:all .5s ease-in-out}
.am-modal-content{visibility:hidden}
.am-back > .am-modal-content > *{visibility:hidden;border:none}
.am-expanded.am-modal{width:800px;top:50px;margin-bottom:50px;left:50%;margin-left:-400px}
.am-expanded.am-back{width:800px;margin-top:50px}
.am-sample{width:100%;position:fixed;visibility:hidden;display:block}
.am-close{color:#949CB4;width:25px;height:25px;line-height:100%;text-align:center;display:block;position:absolute;top:10px;right:10px;left:auto;opacity:.7;font-size:24px}
.am-close:visited{color:#949CB4}
.am-close:hover,.am-close:active{color:#69708B;opacity:1}
.animated{visibility:visible!important;-webkit-animation-duration:.5s;-moz-animation-duration:.5s;-o-animation-duration:.5s;animation-duration:.5s;-webkit-animation-fill-mode:both;-moz-animation-fill-mode:both;-o-animation-fill-mode:both;animation-fill-mode:both}
@-webkit-keyframes scaleShow {
0%{opacity:0;-webkit-transform:scale(0.85) translateY(-5px);-moz-transform:scale(0.85) translateY(-5px);-o-transform:scale(0.85) translateY(-5px);transform:scale(0.85) translateY(-5px)}
100%{opacity:1;-webkit-transform:scale(1) translateY(0px);-moz-transform:scale(1) translateY(0px);-o-transform:scale(1) translateY(0px);transform:scale(1) translateY(0px)}
}
@-moz-keyframes scaleShow {
0%{opacity:0;-webkit-transform:scale(0.85) translateY(-5px);-moz-transform:scale(0.85) translateY(-5px);-o-transform:scale(0.85) translateY(-5px);transform:scale(0.85) translateY(-5px)}
100%{opacity:1;-webkit-transform:scale(1) translateY(0px);-moz-transform:scale(1) translateY(0px);-o-transform:scale(1) translateY(0px);transform:scale(1) translateY(0px)}
}
@keyframes scaleShow {
0%{opacity:0;-webkit-transform:scale(0.85) translateY(-5px);-moz-transform:scale(0.85) translateY(-5px);-o-transform:scale(0.85) translateY(-5px);transform:scale(0.85) translateY(-5px)}
100%{opacity:1;-webkit-transform:scale(1) translateY(0px);-moz-transform:scale(1) translateY(0px);-o-transform:scale(1) translateY(0px);transform:scale(1) translateY(0px)}
}
.scaleShow{-webkit-animation-name:scaleShow;-moz-animation-name:scaleShow;-o-animation-name:scaleShow;animation-name:scaleShow}
@-webkit-keyframes scaleHide {
0%{opacity:1;-webkit-transform:scale(1) translateY(0px);-moz-transform:scale(1) translateY(0px);-o-transform:scale(1) translateY(0px);transform:scale(1) translateY(0px)}
100%{opacity:0;-webkit-transform:scale(0.85) translateY(-5px);-moz-transform:scale(0.85) translateY(-5px);-o-transform:scale(0.85) translateY(-5px);transform:scale(0.85) translateY(-5px)}
}
@-moz-keyframes scaleHide {
0%{opacity:1;-webkit-transform:scale(1) translateY(0px);-moz-transform:scale(1) translateY(0px);-o-transform:scale(1) translateY(0px);transform:scale(1) translateY(0px)}
100%{opacity:0;-webkit-transform:scale(0.85) translateY(-5px);-moz-transform:scale(0.85) translateY(-5px);-o-transform:scale(0.85) translateY(-5px);transform:scale(0.85) translateY(-5px)}
}
@keyframes scaleHide {
0%{opacity:1;-webkit-transform:scale(1) translateY(0px);-moz-transform:scale(1) translateY(0px);-o-transform:scale(1) translateY(0px);transform:scale(1) translateY(0px)}
100%{opacity:0;-webkit-transform:scale(0.85) translateY(-5px);-moz-transform:scale(0.85) translateY(-5px);-o-transform:scale(0.85) translateY(-5px);transform:scale(0.85) translateY(-5px)}
}
.scaleHide{-webkit-animation-name:scaleHide;-moz-animation-name:scaleHide;-o-animation-name:scaleHide;animation-name:scaleHide}
.rtl .am-close {right:auto;left:10px;}