liz/wikijs-fork
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: login page UI

Browse Source
This commit is contained in:
NGPixel
2017-09-10 01:41:22 -04:00
parent dd73b036d2
commit 52630127cd
21 changed files with 940 additions and 869 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
client/scss/app.scss
View File

@@ -42,6 +42,7 @@ $primary: 'indigo';
@import 'layout/_header';
@import 'layout/_loader';
@import 'pages/_welcome';
@import 'pages/login';
@import 'pages/welcome';
@import 'base/print';

10
client/scss/components/button.scss
View File

@@ -4,7 +4,7 @@
border: 1px solid mc('orange','700');
border-radius: 3px;
display: inline-flex;
height: 30px;
height: 40px;
align-items: center;
padding: 0 15px;
font-size: 13px;
@@ -74,7 +74,13 @@
&.is-featured {
animation: btnInvertedPulse .6s ease alternate infinite;
}
}
&.is-fullwidth {
width: 100%;
text-align: center;
justify-content: center;
}
&.is-disabled, &:disabled {
background-color: mc('grey', '300');

463
client/scss/pages/_login.scss
View File

@@ -1,306 +1,161 @@
.login {
background-size: cover;
background-position: center center;
background-image: url('../images/bg.jpg');
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
body {
padding: 0;
margin: 0;
font-family: $core-font-standard;
font-size: 14px;
}
a {
color: #FFF;
transition: color 0.4s ease;
text-decoration: none;
&:hover {
color: mc('orange','600');
text-decoration: underline;
}
}
#bg {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
background-color: #000;
> div {
background-size: cover;
background-position: center center;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
opacity: 0;
visibility: hidden;
transition: opacity 3s ease, visibility 3s;
animation: bg 30s linear infinite;
&:nth-child(1) {
animation-delay: 10s;
}
&:nth-child(2) {
animation-delay: 20s;
}
}
}
#root {
position: fixed;
top: 15vh;
left: 10vw;
z-index: 2;
color: #FFF;
display: flex;
flex-direction: column;
h1 {
font-size: 4rem;
font-weight: bold;
color: #FFF;
padding: 0;
margin: 0;
animation: headerIntro 3s ease;
}
h2 {
font-size: 1.5rem;
font-weight: normal;
color: rgba(255,255,255,0.7);
padding: 0;
margin: 0 0 25px 0;
animation: headerIntro 3s ease;
}
h3 {
font-size: 1.25rem;
font-weight: normal;
color: #FB8C00;
padding: 0;
margin: 0;
animation: shake 1s ease;
> .fa {
margin-right: 7px;
}
}
h4 {
font-size: 0.8rem;
font-weight: normal;
color: rgba(255,255,255,0.7);
padding: 0;
margin: 0 0 15px 0;
animation: fadeIn 3s ease;
}
form {
display: flex;
flex-direction: column;
}
input[type=text], input[type=password] {
width: 350px;
max-width: 80vw;
border: 1px solid rgba(255,255,255,0.3);
border-radius: 3px;
background-color: rgba(0,0,0,0.2);
padding: 0 15px;
height: 40px;
margin: 0 0 10px 0;
color: #FFF;
font-weight: bold;
font-size: 14px;
transition: all 0.4s ease;
&:focus {
outline: none;
border-color: mc('orange','600');
}
}
button {
background-color: mc('orange','600');
color: #FFF;
border: 1px solid lighten(mc('orange','600'), 10%);
border-radius: 3px;
height: 40px;
width: 125px;
padding: 0;
font-weight: bold;
margin: 15px 0 0 0;
transition: all 0.4s ease;
cursor: pointer;
span {
font-weight: bold;
}
&:focus {
outline: none;
border-color: #FFF;
}
&:hover {
background-color: darken(mc('orange','600'), 10%);
}
}
#social {
margin-top: 25px;
> span {
display: block;
font-weight: bold;
color: rgba(255,255,255,0.7);
}
button {
margin-right: 5px;
width: auto;
padding: 0 15px;
> i {
margin-right: 10px;
font-size: 16px;
}
&.ms {
background-color: mc('blue','600');
border-color: lighten(mc('blue','600'), 10%);
&:focus {
border-color: #FFF;
}
&:hover {
background-color: darken(mc('blue','600'), 10%);
}
}
&.google {
background-color: mc('light-blue','600');
border-color: lighten(mc('light-blue','600'), 10%);
&:focus {
border-color: #FFF;
}
&:hover {
background-color: darken(mc('light-blue','600'), 10%);
}
}
&.facebook {
background-color: mc('indigo','600');
border-color: lighten(mc('indigo','600'), 10%);
&:focus {
border-color: #FFF;
}
&:hover {
background-color: darken(mc('indigo','600'), 10%);
}
}
&.github {
background-color: mc('blue-grey','700');
border-color: lighten(mc('blue-grey','700'), 10%);
&:focus {
border-color: #FFF;
}
&:hover {
background-color: darken(mc('blue-grey','700'), 10%);
}
}
&.slack {
background-color: mc('purple','700');
border-color: lighten(mc('purple','700'), 10%);
&:focus {
border-color: #FFF;
}
&:hover {
background-color: darken(mc('purple','700'), 10%);
}
}
}
}
}
#copyright {
display: flex;
align-items: center;
justify-content: flex-start;
position: absolute;
left: 10vw;
bottom: 10vh;
z-index: 2;
color: rgba(255,255,255,0.5);
font-weight: bold;
.icon {
font-size: 1.2rem;
margin: 0 8px;
}
a {
opacity: 0.75;
}
}
@include keyframes(bg) {
0% {
@include prefix(transform, scale(1,1));
visibility: visible;
opacity: 0;
},
5% {
opacity: 0.5;
},
33% {
opacity: 0.5;
},
38% {
@include prefix(transform, scale(1.2, 1.2));
opacity: 0;
},
39% {
visibility: hidden;
}
100% {
visibility: hidden;
opacity: 0;
}
}
@include keyframes(headerIntro) {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
&-container {
display: flex;
width: 650px;
align-items: stretch;
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}
&-providers {
display: flex;
flex-direction: column;
width: 200px;
border: 1px solid #FFF;
background-color: mc('grey', '900');
z-index: 1;
button {
flex: 1 1;
padding: 0 15px;
border: none;
color: #FFF;
background-color: mc('grey', '800');
border-top: 1px solid mc('grey', '900');
font-family: $core-font-standard;
font-weight: 600;
text-align: left;
min-height: 40px;
&:first-child {
border-top: none;
}
&.is-active {
background-color: mc('grey', '100');
background-image: radial-gradient(circle at top left, rgba(mc('grey', '200'),1) 0%,rgba(255,255,255,1) 100%);
color: mc('grey', '700');
}
i {
margin-right: 10px;
font-size: 16px;
}
span {
font-weight: 600;
}
}
}
&-frame {
background-image: radial-gradient(circle at top left, rgba(255,255,255,1) 0%,rgba(240,240,240,.6) 100%);
border: 1px solid #FFF;
width: 450px;
padding: 1rem;
color: mc('grey', '700');
display: flex;
justify-content: center;
flex-direction: column;
text-align: center;
h1 {
font-size: 2rem;
font-weight: 600;
color: mc('grey', '700');
padding: 0;
margin: 0;
}
h2 {
font-size: 1.5rem;
font-weight: 300;
color: mc('grey', '700');
padding: 0;
margin: 0 0 25px 0;
}
h3 {
font-size: 1.25rem;
font-weight: normal;
color: #FB8C00;
padding: 0;
margin: 0;
animation: shake 1s ease;
> .fa {
margin-right: 7px;
}
}
h4 {
font-size: .8rem;
font-weight: normal;
color: rgba(255,255,255,0.7);
padding: 0;
margin: 0 0 15px 0;
animation: fadeIn 3s ease;
}
form {
display: flex;
flex-direction: column;
}
input[type=text], input[type=password] {
width: 100%;
border: 1px solid #FFF;
border-radius: 3px;
background-color: rgba(255,255,255,.7);
padding: 0 15px;
height: 40px;
margin: 0 0 10px 0;
color: mc('grey', '700');
font-weight: 600;
font-size: .8rem;
transition: all 0.4s ease;
text-align: center;
&:focus {
outline: none;
border-color: mc('grey','400');
}
}
}
&-copyright {
display: flex;
align-items: center;
justify-content: center;
position: absolute;
left: 0;
bottom: 10vh;
width: 100%;
z-index: 2;
color: #FFF;
font-weight: 400;
text-shadow: 1px 1px 0 #000;
.icon {
font-size: 1.2rem;
margin: 0 8px;
}
a {
font-weight: 600;
color: #FFF;
}
}
}