1 | .pl-layout-sidebars {
|
2 | position: absolute;
|
3 | top: 0;
|
4 | left: 0;
|
5 | right: 0;
|
6 | bottom: 0;
|
7 | overflow: hidden;
|
8 | }
|
9 | .pl-layout-sidebars .pl-layout-left-container,
|
10 | .pl-layout-sidebars .pl-layout-right-container {
|
11 | position: fixed;
|
12 | top: 0;
|
13 | bottom: 0;
|
14 | -webkit-transition: all 0.55s cubic-bezier(0.165, 0.84, 0.44, 1);
|
15 | -moz-transition: all 0.55s cubic-bezier(0.165, 0.84, 0.44, 1);
|
16 | -ms-transition: all 0.55s cubic-bezier(0.165, 0.84, 0.44, 1);
|
17 | -o-transition: all 0.55s cubic-bezier(0.165, 0.84, 0.44, 1);
|
18 | transition: all 0.55s cubic-bezier(0.165, 0.84, 0.44, 1);
|
19 | }
|
20 | .pl-layout-sidebars .pl-layout-left-container.no-animation,
|
21 | .pl-layout-sidebars .pl-layout-right-container.no-animation {
|
22 | -webkit-transition: none;
|
23 | -moz-transition: none;
|
24 | -ms-transition: none;
|
25 | -o-transition: none;
|
26 | transition: none;
|
27 | }
|
28 | .pl-layout-sidebars .pl-layout-left-container .pl-layout-left-content,
|
29 | .pl-layout-sidebars .pl-layout-right-container .pl-layout-left-content,
|
30 | .pl-layout-sidebars .pl-layout-left-container .pl-layout-right-content,
|
31 | .pl-layout-sidebars .pl-layout-right-container .pl-layout-right-content {
|
32 | position: absolute;
|
33 | top: 9rem;
|
34 | left: 3rem;
|
35 | right: 4rem;
|
36 | bottom: 3rem;
|
37 | overflow: auto;
|
38 | -webkit-transition: all 0.55s cubic-bezier(0.165, 0.84, 0.44, 1);
|
39 | -moz-transition: all 0.55s cubic-bezier(0.165, 0.84, 0.44, 1);
|
40 | -ms-transition: all 0.55s cubic-bezier(0.165, 0.84, 0.44, 1);
|
41 | -o-transition: all 0.55s cubic-bezier(0.165, 0.84, 0.44, 1);
|
42 | transition: all 0.55s cubic-bezier(0.165, 0.84, 0.44, 1);
|
43 | }
|
44 | .pl-layout-sidebars .pl-layout-left-container .pl-layout-right-content,
|
45 | .pl-layout-sidebars .pl-layout-right-container .pl-layout-right-content {
|
46 | left: 4rem;
|
47 | right: 3rem;
|
48 | }
|
49 | .pl-layout-sidebars .pl-layout-left-container .pl-layout-left-bar-container,
|
50 | .pl-layout-sidebars .pl-layout-right-container .pl-layout-left-bar-container,
|
51 | .pl-layout-sidebars .pl-layout-left-container .pl-layout-right-bar-container,
|
52 | .pl-layout-sidebars .pl-layout-right-container .pl-layout-right-bar-container {
|
53 | cursor: pointer;
|
54 | -webkit-touch-callout: none;
|
55 | -webkit-user-select: none;
|
56 | -khtml-user-select: none;
|
57 | -moz-user-select: none;
|
58 | -ms-user-select: none;
|
59 | user-select: none;
|
60 | -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
61 | tap-highlight-color: rgba(0, 0, 0, 0);
|
62 | position: absolute;
|
63 | top: 20%;
|
64 | bottom: 20%;
|
65 | right: 0;
|
66 | width: 3rem;
|
67 | overflow: hidden;
|
68 | }
|
69 | .pl-layout-sidebars .pl-layout-left-container .pl-layout-left-bar-container .pl-layout-left-bar,
|
70 | .pl-layout-sidebars .pl-layout-right-container .pl-layout-left-bar-container .pl-layout-left-bar,
|
71 | .pl-layout-sidebars .pl-layout-left-container .pl-layout-right-bar-container .pl-layout-left-bar,
|
72 | .pl-layout-sidebars .pl-layout-right-container .pl-layout-right-bar-container .pl-layout-left-bar,
|
73 | .pl-layout-sidebars .pl-layout-left-container .pl-layout-left-bar-container .pl-layout-right-bar,
|
74 | .pl-layout-sidebars .pl-layout-right-container .pl-layout-left-bar-container .pl-layout-right-bar,
|
75 | .pl-layout-sidebars .pl-layout-left-container .pl-layout-right-bar-container .pl-layout-right-bar,
|
76 | .pl-layout-sidebars .pl-layout-right-container .pl-layout-right-bar-container .pl-layout-right-bar {
|
77 | position: absolute;
|
78 | top: 0;
|
79 | left: 1.5rem;
|
80 | bottom: 0;
|
81 | width: 1px;
|
82 | background: #ccc;
|
83 | }
|
84 | .pl-layout-sidebars .pl-layout-left-container .pl-layout-left-bar-container span,
|
85 | .pl-layout-sidebars .pl-layout-right-container .pl-layout-left-bar-container span,
|
86 | .pl-layout-sidebars .pl-layout-left-container .pl-layout-right-bar-container span,
|
87 | .pl-layout-sidebars .pl-layout-right-container .pl-layout-right-bar-container span {
|
88 | display: block;
|
89 | position: absolute;
|
90 | top: 50%;
|
91 | left: 50%;
|
92 | opacity: 0;
|
93 | transform: translateX(-100%) translateY(-50%) rotate(-90deg);
|
94 | padding: 0.3rem 1rem;
|
95 | background: white;
|
96 | color: #666;
|
97 | white-space: nowrap;
|
98 | -webkit-transition: all 0.55s cubic-bezier(0.165, 0.84, 0.44, 1);
|
99 | -moz-transition: all 0.55s cubic-bezier(0.165, 0.84, 0.44, 1);
|
100 | -ms-transition: all 0.55s cubic-bezier(0.165, 0.84, 0.44, 1);
|
101 | -o-transition: all 0.55s cubic-bezier(0.165, 0.84, 0.44, 1);
|
102 | transition: all 0.55s cubic-bezier(0.165, 0.84, 0.44, 1);
|
103 | }
|
104 | .pl-layout-sidebars .pl-layout-left-container .pl-layout-right-bar-container,
|
105 | .pl-layout-sidebars .pl-layout-right-container .pl-layout-right-bar-container {
|
106 | left: 0;
|
107 | right: auto;
|
108 | }
|
109 | .pl-layout-sidebars .pl-layout-left-container .pl-layout-right-bar-container span,
|
110 | .pl-layout-sidebars .pl-layout-right-container .pl-layout-right-bar-container span {
|
111 | transform: translateX(100%) translateY(-50%) rotate(-90deg);
|
112 | }
|
113 | .pl-layout-sidebars .pl-layout-left-container.collapsed-after .pl-layout-left-bar-container span,
|
114 | .pl-layout-sidebars .pl-layout-right-container.collapsed-after .pl-layout-left-bar-container span,
|
115 | .pl-layout-sidebars .pl-layout-left-container.collapsed-after .pl-layout-right-bar-container span,
|
116 | .pl-layout-sidebars .pl-layout-right-container.collapsed-after .pl-layout-right-bar-container span {
|
117 | opacity: 1;
|
118 | transform: translateX(-50%) translateY(-50%) rotate(-90deg);
|
119 | }
|
120 | .pl-layout-sidebars .pl-layout-content {
|
121 | position: fixed;
|
122 | top: 9rem;
|
123 | bottom: 3rem;
|
124 | overflow: hidden;
|
125 | -webkit-transform: translateZ(0);
|
126 | -moz-transform: translateZ(0);
|
127 | -ms-transform: translateZ(0);
|
128 | -o-transform: translateZ(0);
|
129 | transform: translateZ(0);
|
130 | -webkit-transition: all 0.55s cubic-bezier(0.165, 0.84, 0.44, 1);
|
131 | -moz-transition: all 0.55s cubic-bezier(0.165, 0.84, 0.44, 1);
|
132 | -ms-transition: all 0.55s cubic-bezier(0.165, 0.84, 0.44, 1);
|
133 | -o-transition: all 0.55s cubic-bezier(0.165, 0.84, 0.44, 1);
|
134 | transition: all 0.55s cubic-bezier(0.165, 0.84, 0.44, 1);
|
135 | }
|