New login screen UI

This commit is contained in:
Joseph Schorr 2016-04-06 15:57:40 -04:00
parent 2d4337ef82
commit f97b8e2304
24 changed files with 394 additions and 212 deletions

View file

@ -0,0 +1,8 @@
.recovery-form-element h4 {
text-align: center;
margin-bottom: 20px;
}
.recovery-form-element input {
margin-bottom: 10px;
}

View file

@ -0,0 +1,80 @@
.signin-form-element h4 {
text-align: center;
margin-bottom: 30px;
font-size: 25px;
}
.signin-form-element input {
font-size: 14px;
padding: 18px;
padding-top: 4px;
padding-bottom: 4px;
margin-bottom: 10px;
}
.signin-form-element .or-bar {
overflow: hidden;
text-align: center;
font-size: 16px;
color: #CCC8C8;
text-transform: uppercase;
margin-top: 10px;
margin-bottom: 20px;
}
/* Based on: http://jsfiddle.net/Puigcerber/vLwDf/1/ */
.signin-form-element .or-bar:before,
.signin-form-element .or-bar:after {
background-color: #ccc;
content: "";
display: inline-block;
height: 1px;
position: relative;
vertical-align: middle;
width: 50%;
}
.signin-form-element .or-bar:before {
right: 0.5em;
margin-left: -50%;
}
.signin-form-element .or-bar:after {
left: 0.5em;
margin-right: -50%;
}
.signin-form-element .external-logins {
text-align: center;
}
.signin-form-element .external-login-button {
display: inline-block;
padding: 6px;
margin-left: 15px;
margin-right: 15px;
}
.signin-form-element .external-login-button a {
color: #40B4E5;
}
.signin-form-element .external-login-button .login-text {
margin-top: 6px;
display: block;
font-size: 14px;
}
.signin-form-element .external-logins.smaller .external-login-button .login-text .prefix {
display: none;
}
.signin-form-element .external-logins.larger .external-login-button .login-text .suffix {
font-weight: 700;
}
.signin-form-element .external-login-button i.fa {
font-size: 46px;
width: auto !important;
}

View file

@ -1,17 +1,13 @@
.signup-form-element {
position: relative;
.signup-form-element h4 {
text-align: center;
margin-bottom: 20px;
}
.signup-form-element .co-alert {
color: black;
.signup-form-element label {
font-weight: 600;
}
.signup-form-element .single-sign-on a {
font-size: 24px;
}
.signup-form-element .single-sign-on .external-login-button i.fa,
.signup-form-element .single-sign-on .external-login-button img {
width: 30px;
font-size: 24px;
.signup-form-element input {
margin-bottom: 10px;
}

View file

@ -0,0 +1,97 @@
.user-setup-element {
text-align: center;
}
.user-setup-element .user-setup-element-view {
max-width: 420px;
width: 100%;
text-align: left;
display: inline-block;
}
.user-setup-element .setup-logo-container {
background-color: white;
display: block;
padding: 10px;
margin-bottom: 20px;
text-align: center;
}
.user-setup-element .user-setup-content {
background-color: rgba(247, 247, 247, 0.27);
padding: 34px;
padding-top: 20px;
padding-bottom: 20px;
border: 1px solid #eee;
}
.modal-body .user-setup-element .setup-logo-container {
margin-top: 20px;
margin-bottom: 0px;
}
.modal-body .user-setup-element .user-setup-content {
background: transparent;
border: 0px;
padding: 0px;
}
.user-setup-element .user-setup-content .pane-container-container {
overflow: hidden;
}
.user-setup-element .user-setup-content .pane-container {
white-space: nowrap;
width: 100%;
position: relative;
left: -100%;
transition: left 350ms ease-in-out;
}
.user-setup-element .user-setup-content .pane-container.signin {
left: -100%;
}
.user-setup-element .user-setup-content .pane-container.createAccount {
left: 0%;
}
.user-setup-element .user-setup-content .pane-container.forgotPassword {
left: -200%;
}
.user-setup-element .user-setup-content .pane-container .content-pane {
white-space: normal;
display: inline-block;
width: 100%;
vertical-align: middle;
padding: 6px;
}
.user-setup-element .setup-logo-container img {
max-height: 50px;
}
.user-setup-element .user-footer-links {
margin-top: 18px;
margin-bottom: 10px;
font-size: 16px;
text-align: center;
}
.user-setup-element .user-footer-links a {
display: inline-block;
text-decoration: none !important;
}
.user-setup-element .user-footer-links a:after {
content: "\2022";
color: #ccc;
padding: 0 5px 0 9px;
text-decoration: none !important;
}
.user-setup-element .user-footer-links a:last-child:after {
content: "";
}