UNPKG

plumes/features/login/css/pl-login.less

Version:

9.3 kBtext/lessView Raw

1@import "../../common/less/common-mixins.less";
2@import "../../common/less/common-variables.less";
3
4@-webkit-keyframes pl-bottom-border-show { 0% { width: 0; } 100% { width: 70rem; } }
5@-moz-keyframes pl-bottom-border-show { 0% { width: 0; } 100% { width: 70rem; } }
6@-ms-keyframes pl-bottom-border-show { 0% { width: 0; } 100% { width: 70rem; } }
7@-o-keyframes pl-bottom-border-show { 0% { width: 0; } 100% { width: 70rem; } }
8@keyframes pl-bottom-border-show { 0% { width: 0; } 100% { width: 70rem; } }
9
10@-webkit-keyframes pl-avatar-show-again { 0% { left: -14rem; } 100% { left: 0; } }
11@-moz-keyframes pl-avatar-show-again { 0% { left: -14rem; } 100% { left: 0; } }
12@-ms-keyframes pl-avatar-show-again { 0% { left: -14rem; } 100% { left: 0; } }
13@-o-keyframes pl-avatar-show-again { 0% { left: -14rem; } 100% { left: 0; } }
14@keyframes pl-avatar-show-again { 0% { left: -14rem; } 100% { left: 0; } }
15
pl-login {
z-index: 1001;
18
.pl-login-container {
  overflow: hidden;
  z-index: 1001;
  position: fixed;
  left: 2rem;
  right: 2rem;
}
26
.bottom-border-container {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
33
  .bottom-border {
    display: none;
    width: 70rem;
    height: 1px;
    margin: 0 auto;
39
    .animation(pl-bottom-border-show 0.65s @easeOutQuart);
  }
}
43
.pl-login-content {
  position: relative;
  width: 70rem;
  height: 100%;
  margin: 0 auto;
  overflow: hidden;
50
  .pl-login-form {
    opacity: 0;
    position: absolute;
    left: 37.5rem;
    right: 37.5rem;
    top: 50%;
    height: 0;
    margin-top: 0;
    overflow: hidden;
60
    .pl-login-form-content {
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 100%;
      overflow: hidden;
    }
69
    .pl-login-form-message {
      position: absolute;
      left: 0;
      bottom: -14rem;
      width: 100%;
      height: 100%;
      color: white;
      line-height: 14rem;
78
      p {
        font-size: 2rem;
        line-height: 4rem;
        vertical-align: middle;
        display: inline-block;
        line-height: normal;
        text-align: center;
        width: 100%;
      }
    }
89
    .old-avatar {
      display: none;
      position: absolute;
      top: 0;
      left: 0;
      width: 14rem;
      height: 14rem;
      background: url('avatar.png') no-repeat;
      background-size: 100%;
99
      &.show {
        display: block;
      }
    }
104
    .avatar {
      position: absolute;
      top: 50%;
      left: 50%;
      height: 14rem;
      width: 14rem;
      margin: -7rem 0 0 -7rem;
      background: url('avatar.png') no-repeat;
      background-size: 100%;
114
      &.show-again {
        .animation(pl-avatar-show-again 0.65s @easeOutQuart);
      }
    }
119
    .input {
      position: relative;
      left: 0;
      background: none;
      color: white;
      margin: 0 0 0 15rem;
      border: none;
      font-size: 2rem;
      line-height: 4rem;
      height: 7rem;
      width: 25rem;
      .transition(all 0.35s @easeOutQuart);
132
      &::-webkit-input-placeholder {
         color: white;
         opacity: 0.5;
      }
137
      &:-moz-placeholder {
         color: white;
         opacity: 0.5;
      }
142
      &::-moz-placeholder {
         color: white;
         opacity: 0.5;
      }
147
      &:-ms-input-placeholder {
         color: white;
         opacity: 0.5;
      }
152
      &.code {
        position: absolute;
        top: 0;
        left: auto;
        right: -26rem;
        .transition(all 0.7s 0.35s @easeOutQuart);
159
        &.show {
          right: 0;
        }
      }
164
      &.hide {
        left: -26rem;
      }
    }
169
    .mask-password {
      position: absolute;
      height: 7rem;
      background: white;
      bottom: 0;
      width: 0;
      right: 0;
      .transition(all 0.35s @easeOutQuart);
178
      &.show {
        width: 26rem;
      }
    }
183
    .submit {
      display: none;
    }
  }
188
  .pl-login-links {
    .noselect();
    cursor: pointer;
    position: absolute;
    opacity: 0;
    top: 50%;
    right: 15rem;
    left: 15rem;
    margin-top: 1rem;
    font-size: 1.6rem;
    text-align: right;
    height: 2rem;
    line-height: 2rem;
    overflow: hidden;
    .transition(all 0.35s @easeOutQuart);
204
    .pl-login-forgot-link {
      top: 2rem;
    }
208
    .pl-login-login-link {
      top: -2rem;
    }
212
    div {
      position: absolute;
      right: 0;
      .transition(all 0.35s @easeOutQuart);
217
      &.show {
        top: 0;
      }
    }
  }
223
  .pl-login-forgot-texts {
    position: absolute;
    left: 15rem;
    right: 15rem;
    height: 5.6rem;
    bottom: 50%;
    margin-bottom: 9rem;
    font-size: 1.8rem;
    overflow: hidden;
    .transition(all 0.35s @easeOutQuart);
234
    .pl-login-forgot-text {
      top: 5.6rem;
    }
238
    .pl-login-forgot-code-text, .pl-login-forgot-password-text {
      top: -5.6rem;
    }
242
    p {
      position: absolute;
      left: 0;
      right: 0;
      height: 5.6rem;
      margin: 0;
      .transition(all 0.35s @easeOutQuart);
250
      &.show {
        top: 0;
      }
    }
255
    .key {
      position: relative;
      top: -2px;
      background: #fff;
      font-weight: 700;
      padding: 2px .65rem;
      font-size: 1.2rem;
      margin: 0 2px;
      border-radius: .25rem;
      color: #3d3c40;
      border-bottom: 2px solid #9e9ea6;
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
      text-shadow: none;
    }
  }
271
  .help-button {
    .noselect();
    cursor: pointer;
    position: absolute;
    bottom: 50%;
    right: 15rem;
    border: none;
    background: none;
    padding: 0;
    font-size: 2.4rem;
    font-weight: 300;
    margin: 0 0 1.4rem;
    line-height: 2.4rem;
    opacity: 0;
    .transition(all 0.35s @easeOutQuart);
287
    &.show {
      right: 12rem;
      opacity: 1;
    }
  }
}
294
.help-container {
  position: absolute;
  width: 27rem;
  opacity: 0;
  right: -27rem;
  .transition(all 0.35s @easeOutQuart);
301
  ol {
    margin-top: 1.5rem;
  }
}
306
&.help {
  .help-container {
    opacity: 0.7;
    right: 0;
  }
}
313
&.help .pl-login-content, &.help.sb-show-4 .pl-login-content {
  .pl-login-forgot-texts, .pl-login-links, .pl-login-form {
    left: 0;
    right: 30rem;
  }
319
  .help-button, .help-button.show {
    right: 30rem;
    opacity: 0;
  }
}
325
&.sb-show-1, &.sb-show-2, &.sb-show-3, &.sb-show-4, &.sb-hide-1 {
  .bottom-border-container .bottom-border {
    display: block;
  }
}
331
&.sb-show-2 {
  .pl-login-container {
    .transition(all 1s @easeOutQuart);
  }
336
  .pl-login-content .pl-login-form {
    opacity: 1;
    left: 28rem;
    right: 28rem;
    height: 14rem;
    margin-top: -7rem;
    .transition(all 0.45s @easeOutQuart);
  }
}
346
&.sb-show-3, &.sb-show-4 {
  .pl-login-content .pl-login-form {
    opacity: 1;
    left: 15rem;
    right: 15rem;
    height: 14rem;
    margin-top: -7rem;
    .transition(all 0.45s @easeOutQuart);
355
    .avatar {
      left: 0;
      top: 0;
      margin: 0;
    }
  }
}
363
&.sb-show-4 {
  .pl-login-content .pl-login-links {
    opacity: 1;
    margin-top: 8rem;
    .transition(all 0.45s @easeOutQuart);
  }
}
371
&.sb-hide-1, &.sb-hide-2 {
  .pl-login-container {
    .transition(all 0.55s @easeOutQuart);
  }
376
  .pl-login-content .pl-login-form {
    opacity: 1;
    left: 15rem;
    right: 15rem;
    height: 14rem;
    margin-top: -7rem;
    .transition(all 0.55s @easeOutQuart);
384
    .avatar {
      left: 0;
      top: 0;
      margin: 0;
    }
  }
391
  .bottom-border-container {
    opacity: 0;
    .transition(all 0.55s @easeOutQuart);
  }
}
397
&.sb-hide-2 {
  .pl-login-content .pl-login-form {
    left: 28rem;
    right: 28rem;
    .transition(all 0.45s @easeOutQuart);
  }
}
405
&.sb-hide-3 {
  .pl-login-content .pl-login-form {
    opacity: 1;
    left: 37.5rem;
    right: 37.5rem;
    height: 0;
    margin-top: 0;
    .transition(all 0.15s linear);
  }
}
416
&.sb-message-1 {
  .pl-login-content .pl-login-form .pl-login-form-content {
    bottom: 14rem;
    .transition(all 0.35s @easeOutQuart);
  }
}
423
&.sb-message-2 {
  .pl-login-content .pl-login-form .pl-login-form-content {
    bottom: -14rem;
  }
428
  .pl-login-content .pl-login-form .pl-login-form-message {
    bottom: 0;
    .transition(all 0.35s @easeOutQuart);
  }
}
434
&.sb-message-3 {
  .pl-login-content .pl-login-form .pl-login-form-content {
    bottom: -14rem;
  }
439
  .pl-login-content .pl-login-form .pl-login-form-message {
    bottom: 14rem;
    .transition(all 0.35s @easeOutQuart);
  }
}
445
&.sb-message-4 {
  .pl-login-content .pl-login-form .pl-login-form-content {
    bottom: 0;
    .transition(all 0.35s @easeOutQuart);
  }
}
452}
\No newline at end of file

1	`@import "../../common/less/common-mixins.less";`
2	`@import "../../common/less/common-variables.less";`
3
4	`@-webkit-keyframes pl-bottom-border-show { 0% { width: 0; } 100% { width: 70rem; } }`
5	`@-moz-keyframes pl-bottom-border-show { 0% { width: 0; } 100% { width: 70rem; } }`
6	`@-ms-keyframes pl-bottom-border-show { 0% { width: 0; } 100% { width: 70rem; } }`
7	`@-o-keyframes pl-bottom-border-show { 0% { width: 0; } 100% { width: 70rem; } }`
8	`@keyframes pl-bottom-border-show { 0% { width: 0; } 100% { width: 70rem; } }`
9
10	`@-webkit-keyframes pl-avatar-show-again { 0% { left: -14rem; } 100% { left: 0; } }`
11	`@-moz-keyframes pl-avatar-show-again { 0% { left: -14rem; } 100% { left: 0; } }`
12	`@-ms-keyframes pl-avatar-show-again { 0% { left: -14rem; } 100% { left: 0; } }`
13	`@-o-keyframes pl-avatar-show-again { 0% { left: -14rem; } 100% { left: 0; } }`
14	`@keyframes pl-avatar-show-again { 0% { left: -14rem; } 100% { left: 0; } }`
15
16	`.pl-login {`
17	`z-index: 1001;`
18
19	`.pl-login-container {`
20	`overflow: hidden;`
21	`z-index: 1001;`
22	`position: fixed;`
23	`left: 2rem;`
24	`right: 2rem;`
25	`}`
26
27	`.bottom-border-container {`
28	`position: absolute;`
29	`left: 0;`
30	`right: 0;`
31	`bottom: 0;`
32	`height: 1px;`
33
34	`.bottom-border {`
35	`display: none;`
36	`width: 70rem;`
37	`height: 1px;`
38	`margin: 0 auto;`
39
40	`.animation(pl-bottom-border-show 0.65s @easeOutQuart);`
41	`}`
42	`}`
43
44	`.pl-login-content {`
45	`position: relative;`
46	`width: 70rem;`
47	`height: 100%;`
48	`margin: 0 auto;`
49	`overflow: hidden;`
50
51	`.pl-login-form {`
52	`opacity: 0;`
53	`position: absolute;`
54	`left: 37.5rem;`
55	`right: 37.5rem;`
56	`top: 50%;`
57	`height: 0;`
58	`margin-top: 0;`
59	`overflow: hidden;`
60
61	`.pl-login-form-content {`
62	`position: absolute;`
63	`left: 0;`
64	`bottom: 0;`
65	`width: 100%;`
66	`height: 100%;`
67	`overflow: hidden;`
68	`}`
69
70	`.pl-login-form-message {`
71	`position: absolute;`
72	`left: 0;`
73	`bottom: -14rem;`
74	`width: 100%;`
75	`height: 100%;`
76	`color: white;`
77	`line-height: 14rem;`
78
79	`p {`
80	`font-size: 2rem;`
81	`line-height: 4rem;`
82	`vertical-align: middle;`
83	`display: inline-block;`
84	`line-height: normal;`
85	`text-align: center;`
86	`width: 100%;`
87	`}`
88	`}`
89
90	`.old-avatar {`
91	`display: none;`
92	`position: absolute;`
93	`top: 0;`
94	`left: 0;`
95	`width: 14rem;`
96	`height: 14rem;`
97	`background: url('avatar.png') no-repeat;`
98	`background-size: 100%;`
99
100	`&.show {`
101	`display: block;`
102	`}`
103	`}`
104
105	`.avatar {`
106	`position: absolute;`
107	`top: 50%;`
108	`left: 50%;`
109	`height: 14rem;`
110	`width: 14rem;`
111	`margin: -7rem 0 0 -7rem;`
112	`background: url('avatar.png') no-repeat;`
113	`background-size: 100%;`
114
115	`&.show-again {`
116	`.animation(pl-avatar-show-again 0.65s @easeOutQuart);`
117	`}`
118	`}`
119
120	`.input {`
121	`position: relative;`
122	`left: 0;`
123	`background: none;`
124	`color: white;`
125	`margin: 0 0 0 15rem;`
126	`border: none;`
127	`font-size: 2rem;`
128	`line-height: 4rem;`
129	`height: 7rem;`
130	`width: 25rem;`
131	`.transition(all 0.35s @easeOutQuart);`
132
133	`&::-webkit-input-placeholder {`
134	`color: white;`
135	`opacity: 0.5;`
136	`}`
137
138	`&:-moz-placeholder {`
139	`color: white;`
140	`opacity: 0.5;`
141	`}`
142
143	`&::-moz-placeholder {`
144	`color: white;`
145	`opacity: 0.5;`
146	`}`
147
148	`&:-ms-input-placeholder {`
149	`color: white;`
150	`opacity: 0.5;`
151	`}`
152
153	`&.code {`
154	`position: absolute;`
155	`top: 0;`
156	`left: auto;`
157	`right: -26rem;`
158	`.transition(all 0.7s 0.35s @easeOutQuart);`
159
160	`&.show {`
161	`right: 0;`
162	`}`
163	`}`
164
165	`&.hide {`
166	`left: -26rem;`
167	`}`
168	`}`
169
170	`.mask-password {`
171	`position: absolute;`
172	`height: 7rem;`
173	`background: white;`
174	`bottom: 0;`
175	`width: 0;`
176	`right: 0;`
177	`.transition(all 0.35s @easeOutQuart);`
178
179	`&.show {`
180	`width: 26rem;`
181	`}`
182	`}`
183
184	`.submit {`
185	`display: none;`
186	`}`
187	`}`
188
189	`.pl-login-links {`
190	`.noselect();`
191	`cursor: pointer;`
192	`position: absolute;`
193	`opacity: 0;`
194	`top: 50%;`
195	`right: 15rem;`
196	`left: 15rem;`
197	`margin-top: 1rem;`
198	`font-size: 1.6rem;`
199	`text-align: right;`
200	`height: 2rem;`
201	`line-height: 2rem;`
202	`overflow: hidden;`
203	`.transition(all 0.35s @easeOutQuart);`
204
205	`.pl-login-forgot-link {`
206	`top: 2rem;`
207	`}`
208
209	`.pl-login-login-link {`
210	`top: -2rem;`
211	`}`
212
213	`div {`
214	`position: absolute;`
215	`right: 0;`
216	`.transition(all 0.35s @easeOutQuart);`
217
218	`&.show {`
219	`top: 0;`
220	`}`
221	`}`
222	`}`
223
224	`.pl-login-forgot-texts {`
225	`position: absolute;`
226	`left: 15rem;`
227	`right: 15rem;`
228	`height: 5.6rem;`
229	`bottom: 50%;`
230	`margin-bottom: 9rem;`
231	`font-size: 1.8rem;`
232	`overflow: hidden;`
233	`.transition(all 0.35s @easeOutQuart);`
234
235	`.pl-login-forgot-text {`
236	`top: 5.6rem;`
237	`}`
238
239	`.pl-login-forgot-code-text, .pl-login-forgot-password-text {`
240	`top: -5.6rem;`
241	`}`
242
243	`p {`
244	`position: absolute;`
245	`left: 0;`
246	`right: 0;`
247	`height: 5.6rem;`
248	`margin: 0;`
249	`.transition(all 0.35s @easeOutQuart);`
250
251	`&.show {`
252	`top: 0;`
253	`}`
254	`}`
255
256	`.key {`
257	`position: relative;`
258	`top: -2px;`
259	`background: #fff;`
260	`font-weight: 700;`
261	`padding: 2px .65rem;`
262	`font-size: 1.2rem;`
263	`margin: 0 2px;`
264	`border-radius: .25rem;`
265	`color: #3d3c40;`
266	`border-bottom: 2px solid #9e9ea6;`
267	`box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);`
268	`text-shadow: none;`
269	`}`
270	`}`
271
272	`.help-button {`
273	`.noselect();`
274	`cursor: pointer;`
275	`position: absolute;`
276	`bottom: 50%;`
277	`right: 15rem;`
278	`border: none;`
279	`background: none;`
280	`padding: 0;`
281	`font-size: 2.4rem;`
282	`font-weight: 300;`
283	`margin: 0 0 1.4rem;`
284	`line-height: 2.4rem;`
285	`opacity: 0;`
286	`.transition(all 0.35s @easeOutQuart);`
287
288	`&.show {`
289	`right: 12rem;`
290	`opacity: 1;`
291	`}`
292	`}`
293	`}`
294
295	`.help-container {`
296	`position: absolute;`
297	`width: 27rem;`
298	`opacity: 0;`
299	`right: -27rem;`
300	`.transition(all 0.35s @easeOutQuart);`
301
302	`ol {`
303	`margin-top: 1.5rem;`
304	`}`
305	`}`
306
307	`&.help {`
308	`.help-container {`
309	`opacity: 0.7;`
310	`right: 0;`
311	`}`
312	`}`
313
314	`&.help .pl-login-content, &.help.sb-show-4 .pl-login-content {`
315	`.pl-login-forgot-texts, .pl-login-links, .pl-login-form {`
316	`left: 0;`
317	`right: 30rem;`
318	`}`
319
320	`.help-button, .help-button.show {`
321	`right: 30rem;`
322	`opacity: 0;`
323	`}`
324	`}`
325
326	`&.sb-show-1, &.sb-show-2, &.sb-show-3, &.sb-show-4, &.sb-hide-1 {`
327	`.bottom-border-container .bottom-border {`
328	`display: block;`
329	`}`
330	`}`
331
332	`&.sb-show-2 {`
333	`.pl-login-container {`
334	`.transition(all 1s @easeOutQuart);`
335	`}`
336
337	`.pl-login-content .pl-login-form {`
338	`opacity: 1;`
339	`left: 28rem;`
340	`right: 28rem;`
341	`height: 14rem;`
342	`margin-top: -7rem;`
343	`.transition(all 0.45s @easeOutQuart);`
344	`}`
345	`}`
346
347	`&.sb-show-3, &.sb-show-4 {`
348	`.pl-login-content .pl-login-form {`
349	`opacity: 1;`
350	`left: 15rem;`
351	`right: 15rem;`
352	`height: 14rem;`
353	`margin-top: -7rem;`
354	`.transition(all 0.45s @easeOutQuart);`
355
356	`.avatar {`
357	`left: 0;`
358	`top: 0;`
359	`margin: 0;`
360	`}`
361	`}`
362	`}`
363
364	`&.sb-show-4 {`
365	`.pl-login-content .pl-login-links {`
366	`opacity: 1;`
367	`margin-top: 8rem;`
368	`.transition(all 0.45s @easeOutQuart);`
369	`}`
370	`}`
371
372	`&.sb-hide-1, &.sb-hide-2 {`
373	`.pl-login-container {`
374	`.transition(all 0.55s @easeOutQuart);`
375	`}`
376
377	`.pl-login-content .pl-login-form {`
378	`opacity: 1;`
379	`left: 15rem;`
380	`right: 15rem;`
381	`height: 14rem;`
382	`margin-top: -7rem;`
383	`.transition(all 0.55s @easeOutQuart);`
384
385	`.avatar {`
386	`left: 0;`
387	`top: 0;`
388	`margin: 0;`
389	`}`
390	`}`
391
392	`.bottom-border-container {`
393	`opacity: 0;`
394	`.transition(all 0.55s @easeOutQuart);`
395	`}`
396	`}`
397
398	`&.sb-hide-2 {`
399	`.pl-login-content .pl-login-form {`
400	`left: 28rem;`
401	`right: 28rem;`
402	`.transition(all 0.45s @easeOutQuart);`
403	`}`
404	`}`
405
406	`&.sb-hide-3 {`
407	`.pl-login-content .pl-login-form {`
408	`opacity: 1;`
409	`left: 37.5rem;`
410	`right: 37.5rem;`
411	`height: 0;`
412	`margin-top: 0;`
413	`.transition(all 0.15s linear);`
414	`}`
415	`}`
416
417	`&.sb-message-1 {`
418	`.pl-login-content .pl-login-form .pl-login-form-content {`
419	`bottom: 14rem;`
420	`.transition(all 0.35s @easeOutQuart);`
421	`}`
422	`}`
423
424	`&.sb-message-2 {`
425	`.pl-login-content .pl-login-form .pl-login-form-content {`
426	`bottom: -14rem;`
427	`}`
428
429	`.pl-login-content .pl-login-form .pl-login-form-message {`
430	`bottom: 0;`
431	`.transition(all 0.35s @easeOutQuart);`
432	`}`
433	`}`
434
435	`&.sb-message-3 {`
436	`.pl-login-content .pl-login-form .pl-login-form-content {`
437	`bottom: -14rem;`
438	`}`
439
440	`.pl-login-content .pl-login-form .pl-login-form-message {`
441	`bottom: 14rem;`
442	`.transition(all 0.35s @easeOutQuart);`
443	`}`
444	`}`
445
446	`&.sb-message-4 {`
447	`.pl-login-content .pl-login-form .pl-login-form-content {`
448	`bottom: 0;`
449	`.transition(all 0.35s @easeOutQuart);`
450	`}`
451	`}`
452	`}`
\	No newline at end of file