New login screen UI
This commit is contained in:
parent
2d4337ef82
commit
f97b8e2304
24 changed files with 394 additions and 212 deletions
8
static/css/directives/ui/recovery-form.css
Normal file
8
static/css/directives/ui/recovery-form.css
Normal file
|
@ -0,0 +1,8 @@
|
|||
.recovery-form-element h4 {
|
||||
text-align: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.recovery-form-element input {
|
||||
margin-bottom: 10px;
|
||||
}
|
80
static/css/directives/ui/signin-form.css
Normal file
80
static/css/directives/ui/signin-form.css
Normal 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;
|
||||
}
|
|
@ -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;
|
||||
}
|
97
static/css/directives/ui/user-setup.css
Normal file
97
static/css/directives/ui/user-setup.css
Normal 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: "";
|
||||
}
|
Reference in a new issue