Added images and styles for desktop sign in form

This commit is contained in:
Benjamin Barth committed 2015-12-08 14:58:34 +01:00
1 parent 4f55bb019f
commit 233daf575d
4 files changed
+152 -2

No files matched your search

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30"><path fill="#fff" d="M18.5 12.7h-2.2v-1.5c.2-1.4 2.5-1.1 2.5-1.1V7.7c-.1 0-4.6-1.1-5.5 2.3-.1.4-.1 2.4-.1 2.6h-1.9v2.6h2.1v7.2h3v-7.2h2.3l.3-2.6-.5.1z"/></svg>

After

Width:  |  Height:  |  Size: 219 B

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30"><g fill="#fff"><path d="M15.4 16.1l-.7-.5c-.2-.2-.5-.4-.5-.8s.3-.7.5-1c.8-.6 1.6-1.3 1.6-2.8 0-1.5-.9-2.3-1.4-2.6h1.2l1.3-.8h-3.8c-1.1 0-2.6.2-3.7 1.2-.8.7-1.2 1.7-1.2 2.6 0 1.5 1.2 3.1 3.2 3.1h.6c-.1.2-.2.4-.2.8 0 .6.3 1 .6 1.3-.9.1-2.5.2-3.7.9-1.1.5-1.5 1.5-1.5 2.2 0 1.4 1.4 2.8 4.2 2.8 3.4 0 5.1-1.9 5.1-3.7 0-1.3-.7-2-1.6-2.7zm-2.6-2.3c-1.7 0-2.4-2.2-2.4-3.5 0-.5.1-1 .4-1.4.3-.4.9-.6 1.4-.6 1.6 0 2.5 2.2 2.5 3.6 0 .4 0 1-.5 1.4-.3.3-.9.5-1.4.5zm.1 7.9c-2.1 0-3.4-1-3.4-2.4s1.2-1.9 1.7-2c.8-.3 1.9-.3 2-.3h.4c1.5 1.1 2.1 1.6 2.1 2.6 0 1.2-1 2.1-2.8 2.1zM20.3 13.8v-2h-.9v2h-2v1h2v1.9h.9v-1.9h2v-1"/></g></svg>

After

Width:  |  Height:  |  Size: 675 B

@@ -3,7 +3,6 @@
top: 4.666667em !important;
width: 100%;
}
.flyover_content {
width: 24.8em;
float: right;
@@ -13,7 +12,6 @@
box-shadow: 0 0 .533333333333333em rgba(0,0,0,.15);
border: 1px solid rgba(0,0,0,.1);
}
.flyover_content:before {
content: '';
width: 1.333333333333333em;
@@ -31,3 +29,141 @@
border-top: 1px solid rgba(0,0,0,.1);
border-left: 1px solid rgba(0,0,0,.1);
}
.form_title {
color: #0a0a0a;
font-weight: 600;
font-size: 1.466666666666667em;
line-height: 1.363636363636364em;
margin-bottom: .909090909090909em;
}
.form_label {
display: block;
font-weight: 600;
margin-bottom: .4em;
}
.form_input, .form_errors {
margin-bottom: 1.333333333333333em;
}
.form_input {
width: 100%;
height: 2.666666666666667em;
line-height: 1.333333333333333em;
padding: .666666666666667em;
border: 1px solid #ccc;
border-radius: .2em;
}
.form_errors {
color: red;
}
.form_link {
height: 1.333333333333333em;
line-height: 1.333333333333333em;
margin-top: -1em;
display: block;
color: #0a0a0a;
text-decoration: underline;
cursor: pointer;
}
.form_actions {
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
overflow: hidden;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin: 0 -.666666666666667em;
}
.form_action_button {
float: left;
-webkit-box-flex: 1;
-webkit-flex-grow: 1;
-moz-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
cursor: pointer;
text-align: center;
text-transform: uppercase;
margin: 1.333333333333333em .666666666666667em 0;
}
.form_social_seperator {
position: relative;
width: 100%;
height: 1.333333333333333em;
line-height: 1.333333333333333em;
margin: 1.333333333333333em 0;
text-transform: uppercase;
}
.form_social_seperator:before {
position: relative;
content: '';
display: block;
top: 50%;
left: 0;
width: 100%;
border-top: 1px solid #dedede;
}
.form_social_seperator_text {
display: inline-block;
position: relative;
left: 50%;
z-index: 1;
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
text-align: center;
line-height: 1.333333333333333em;
padding: 0 .666666666666667em;
color: #dedede;
background-color: #fff;
}
a.form_social_button {
display: block;
width: 100%;
height: 2.666666666666667em;
line-height: 1.333333333333333em;
margin-top: 1.333333333333333em;
padding: .666666666666667em 1.333333333333333em .666666666666667em 2.666666666666667em;
color: #fff;
font-weight: 600;
text-align: center;
text-decoration: none;
border-radius: .2em;
cursor: pointer;
}
a.form_social_button:first-of-type {
margin-bottom: 0;
}
a.form_social_button:before {
content: '';
display: block;
float: left;
height: 2.666666666666667em;
width: 2.666666666666667em;
margin-top: -.666666666666667em;
margin-left: -2.666666666666667em;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
a.form_social_button_facebook {
background-color: #3b5998;
}
a.form_social_button_facebook:hover {
background-color: #355089
}
a.form_social_button_facebook:before {
background-image: url(images/home/facebook.svg);
}
a.form_social_button_google {
background-color: #de5342;
}
a.form_social_button_google:hover {
background-color: #da3d29
}
a.form_social_button_google:before {
background-image: url(images/home/google.svg);
}
@@ -14,6 +14,18 @@ public interface UserManagementResources extends ClientBundle {
public interface LocalCss extends CssResource {
String flyover();
String flyover_content();
String form_title();
String form_label();
String form_input();
String form_errors();
String form_link();
String form_actions();
String form_action_button();
String form_social_seperator();
String form_social_seperator_text();
String form_social_button();
String form_social_button_facebook();
String form_social_button_google();
}
}