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