1 | .am-drawer {
|
2 | position: absolute;
|
3 | top: 0;
|
4 | left: 0;
|
5 | right: 0;
|
6 | bottom: 0;
|
7 | overflow: hidden;
|
8 | }
|
9 | .am-drawer-sidebar {
|
10 | z-index: 4;
|
11 | position: absolute;
|
12 | -webkit-transition: -webkit-transform 0.3s ease-out;
|
13 | transition: -webkit-transform 0.3s ease-out;
|
14 | transition: transform 0.3s ease-out;
|
15 | transition: transform 0.3s ease-out, -webkit-transform 0.3s ease-out;
|
16 | will-change: transform;
|
17 | overflow-y: auto;
|
18 | }
|
19 | .am-drawer-draghandle {
|
20 | z-index: 1;
|
21 | position: absolute;
|
22 | background-color: rgba(50, 50, 50, 0.1);
|
23 | }
|
24 | .am-drawer-overlay {
|
25 | z-index: 3;
|
26 | position: absolute;
|
27 | top: 0;
|
28 | left: 0;
|
29 | right: 0;
|
30 | bottom: 0;
|
31 | opacity: 0;
|
32 | visibility: hidden;
|
33 | -webkit-transition: opacity 0.5s ease-out;
|
34 | transition: opacity 0.5s ease-out;
|
35 | background-color: rgba(0, 0, 0, 0.4);
|
36 | }
|
37 | .am-drawer-content {
|
38 | position: absolute;
|
39 | top: 0;
|
40 | left: 0;
|
41 | right: 0;
|
42 | bottom: 0;
|
43 | overflow: auto;
|
44 | -webkit-transition: left 0.3s ease-out, right 0.3s ease-out;
|
45 | transition: left 0.3s ease-out, right 0.3s ease-out;
|
46 | }
|
47 | .am-drawer.am-drawer-left .am-drawer-sidebar,
|
48 | .am-drawer.am-drawer-right .am-drawer-sidebar,
|
49 | .am-drawer.am-drawer-left .am-drawer-draghandle,
|
50 | .am-drawer.am-drawer-right .am-drawer-draghandle {
|
51 | top: 0;
|
52 | bottom: 0;
|
53 | }
|
54 | .am-drawer.am-drawer-left .am-drawer-draghandle,
|
55 | .am-drawer.am-drawer-right .am-drawer-draghandle {
|
56 | width: 10px;
|
57 | height: 100%;
|
58 | }
|
59 | .am-drawer.am-drawer-top .am-drawer-sidebar,
|
60 | .am-drawer.am-drawer-bottom .am-drawer-sidebar,
|
61 | .am-drawer.am-drawer-top .am-drawer-draghandle,
|
62 | .am-drawer.am-drawer-bottom .am-drawer-draghandle {
|
63 | left: 0;
|
64 | right: 0;
|
65 | }
|
66 | .am-drawer.am-drawer-top .am-drawer-draghandle,
|
67 | .am-drawer.am-drawer-bottom .am-drawer-draghandle {
|
68 | width: 100%;
|
69 | height: 10px;
|
70 | }
|
71 | .am-drawer.am-drawer-left .am-drawer-sidebar {
|
72 | left: 0;
|
73 | -webkit-transform: translateX(-100%);
|
74 | -ms-transform: translateX(-100%);
|
75 | transform: translateX(-100%);
|
76 | }
|
77 | .am-drawer-open.am-drawer.am-drawer-left .am-drawer-sidebar {
|
78 | -webkit-box-shadow: 1PX 1PX 2px rgba(0, 0, 0, 0.15);
|
79 | box-shadow: 1PX 1PX 2px rgba(0, 0, 0, 0.15);
|
80 | }
|
81 | .am-drawer.am-drawer-left .am-drawer-draghandle {
|
82 | left: 0;
|
83 | }
|
84 | .am-drawer.am-drawer-right .am-drawer-sidebar {
|
85 | right: 0;
|
86 | -webkit-transform: translateX(100%);
|
87 | -ms-transform: translateX(100%);
|
88 | transform: translateX(100%);
|
89 | }
|
90 | .am-drawer-open.am-drawer.am-drawer-right .am-drawer-sidebar {
|
91 | -webkit-box-shadow: -1PX 1PX 2px rgba(0, 0, 0, 0.15);
|
92 | box-shadow: -1PX 1PX 2px rgba(0, 0, 0, 0.15);
|
93 | }
|
94 | .am-drawer.am-drawer-right .am-drawer-draghandle {
|
95 | right: 0;
|
96 | }
|
97 | .am-drawer.am-drawer-top .am-drawer-sidebar {
|
98 | top: 0;
|
99 | -webkit-transform: translateY(-100%);
|
100 | -ms-transform: translateY(-100%);
|
101 | transform: translateY(-100%);
|
102 | }
|
103 | .am-drawer-open.am-drawer.am-drawer-top .am-drawer-sidebar {
|
104 | -webkit-box-shadow: 1PX 1PX 2px rgba(0, 0, 0, 0.15);
|
105 | box-shadow: 1PX 1PX 2px rgba(0, 0, 0, 0.15);
|
106 | }
|
107 | .am-drawer.am-drawer-top .am-drawer-draghandle {
|
108 | top: 0;
|
109 | }
|
110 | .am-drawer.am-drawer-bottom .am-drawer-sidebar {
|
111 | bottom: 0;
|
112 | -webkit-transform: translateY(100%);
|
113 | -ms-transform: translateY(100%);
|
114 | transform: translateY(100%);
|
115 | }
|
116 | .am-drawer-open.am-drawer.am-drawer-bottom .am-drawer-sidebar {
|
117 | -webkit-box-shadow: 1PX -1PX 2px rgba(0, 0, 0, 0.15);
|
118 | box-shadow: 1PX -1PX 2px rgba(0, 0, 0, 0.15);
|
119 | }
|
120 | .am-drawer.am-drawer-bottom .am-drawer-draghandle {
|
121 | bottom: 0;
|
122 | }
|