1 | @import "../../common/less/common-mixins.less";
|
2 |
|
3 | .pl-layout-platform {
|
4 | position: absolute;
|
5 | top: 0;
|
6 | left: 0;
|
7 | right: 0;
|
8 | bottom: 0;
|
9 | overflow: hidden;
|
10 |
|
11 | .pl-layout-platform-header {
|
12 | z-index: 1000;
|
13 | position: fixed;
|
14 | top: -5rem;
|
15 | left: 50%;
|
16 | color: #333;
|
17 | margin-left: -8rem;
|
18 | .transition(all 0.35s @easeOutQuart);
|
19 |
|
20 | &.empty {
|
21 | opacity: 0;
|
22 | }
|
23 |
|
24 | &.show {
|
25 | top: 1rem;
|
26 | }
|
27 |
|
28 | .pl-layout-platform-title-bg {
|
29 | position: absolute;
|
30 | top: -1rem;
|
31 | left: 50%;
|
32 | width: 0;
|
33 | height: 0;
|
34 | background: #333;
|
35 |
|
36 | .transition(width 0.15s @easeOutQuart, margin-left 0.35s @easeOutQuart, opacity 0.35s @easeOutQuart);
|
37 |
|
38 | &.opened {
|
39 | .transition(width 0.25s @easeOutQuart, margin-left 0.35s @easeOutQuart, opacity 0.35s @easeOutQuart);
|
40 | }
|
41 | }
|
42 |
|
43 | .pl-layout-title {
|
44 | cursor: default;
|
45 | display: block;
|
46 |
|
47 | &.opened {
|
48 | color: white;
|
49 |
|
50 | h2 {
|
51 | text-shadow: none;
|
52 | color: white;
|
53 | }
|
54 | }
|
55 |
|
56 | h2 {
|
57 | text-shadow: 1px 0 1px white;
|
58 | color: rgba(0, 0, 0, 0.75);
|
59 | }
|
60 | }
|
61 | }
|
62 |
|
63 | .pl-layout-platform-context-left, .pl-layout-platform-context-right {
|
64 | z-index: 1;
|
65 | position: fixed;
|
66 | top: 0;
|
67 | width: 0;
|
68 | bottom: 0;
|
69 | overflow: hidden;
|
70 |
|
71 | .pl-context-panel-require {
|
72 | position: absolute;
|
73 | top: 0;
|
74 | left: 0;
|
75 | right: 0;
|
76 | bottom: 0;
|
77 |
|
78 | .pl-context-panel {
|
79 | &.use-title {
|
80 | .pl-context-panel-content {
|
81 | top: 11rem;
|
82 | }
|
83 | }
|
84 | }
|
85 |
|
86 | .pl-context-panel-title {
|
87 | padding-top: 5rem;
|
88 |
|
89 | &::before, &::after {
|
90 | top: 8rem;
|
91 | }
|
92 | }
|
93 |
|
94 | .pl-context-panel-title-cross {
|
95 | top: 6rem;
|
96 | }
|
97 | }
|
98 | }
|
99 |
|
100 | .pl-layout-platform-context-left {
|
101 | left: 0;
|
102 | }
|
103 |
|
104 | .pl-layout-platform-context-right {
|
105 | right: 0;
|
106 | }
|
107 |
|
108 | .pl-layout-platform-flyout-left, .pl-layout-platform-flyout-right {
|
109 | z-index: 1001;
|
110 | cursor: default;
|
111 | position: fixed;
|
112 | top: 1rem;
|
113 | height: 4rem;
|
114 |
|
115 | rv-require {
|
116 | height: 100%;
|
117 | }
|
118 | }
|
119 |
|
120 | .pl-layout-platform-flyout-left {
|
121 | left: 1.5rem;
|
122 | }
|
123 |
|
124 | .pl-layout-platform-flyout-right {
|
125 | right: 2rem;
|
126 | }
|
127 |
|
128 | .pl-layout-platform-content-template {
|
129 | z-index: -1;
|
130 | position: fixed;
|
131 | top: 0;
|
132 | bottom: 0;
|
133 | left: 0;
|
134 | right: 0;
|
135 | }
|
136 |
|
137 | .pl-layout-platform-content {
|
138 | position: fixed;
|
139 | top: 0;
|
140 | bottom: 0;
|
141 | left: 0;
|
142 | right: 0;
|
143 | background: white;
|
144 | .transform(translateZ(0));
|
145 | .transition(left 0.25s @easeOutQuart, right 0.25s @easeOutQuart);
|
146 | }
|
147 |
|
148 | .pl-layout-mask {
|
149 | .noselect();
|
150 | z-index: 99999;
|
151 | position: fixed;
|
152 | top: 0;
|
153 | left: 0;
|
154 | right: 0;
|
155 | bottom: 0;
|
156 | background: #fff;
|
157 | }
|
158 | }
|