Rhizi login page styling - final v before ofer touch-ups

Still needs proper applying of font styling.
I hacked some font/color in classes, where it should be defined in sass
style guide.

1 files changed, 57 insertions, 8 deletions

diff --git a/res/client/css/partials/login.scss b/res/client/css/partials/login.scss
index 0023fc41..79c315bb 100644
--- a/res/client/css/partials/login.scss
+++ b/res/client/css/partials/login.scss
@@ -18,8 +18,9 @@
   margin-left: auto;
   margin-right: auto;
   margin-top: 50px;
-  width: 600px;
-  height: 800px;
+  padding-bottom: 10px;
+  width: 445px;
+  height: auto;
   background: white;
 }
 
@@ -38,16 +39,19 @@
 }
 
 .login-text {
-  margin-left:35px;
-  margin-right:35px;
+  font-size: 14px;
+  margin-left: auto;
+  margin-right: auto;
+  padding-right: 45px;
+  padding-left: 45px;
   text-align: center;
 }
 
 .login-form {
-  margin-top: 50px;
-  margin-bottom: 50px;
-  margin-left: 150px;
-  margin-right: 150px;
+  margin-top: 10px;
+  margin-bottom: 25px;
+  margin-left: auto;
+  margin-right: auto;
   text-align: center;
   padding: 20px;
   width: 300px;
@@ -96,6 +100,7 @@
   }
   &[type="email"] {
     background: url(../img/mail-icon.png) no-repeat scroll 20px 15px;
+    background-color:$light-grey;
     border: 1px solid #dcdcdc;
     padding: 12px 10px;
     width: 100%;
@@ -105,6 +110,7 @@
 
   &[type="password"] {
     background: url(../img/password-icon.png) no-repeat scroll 20px 15px;
+    background-color:$light-grey;
     border: 1px solid #dcdcdc;
     padding: 12px 10px;
     width: 100%;
@@ -120,4 +126,47 @@
   &:hover {
     color: $dark-grey;
   }
+}
+
+.contact-us-div {
+  text-align: center;
+  &:before {
+    content: "";
+    width: 112px;
+    margin-top: 10px;
+    position: absolute;
+    height: 0;
+    margin-left: -118px;
+    border-top: 1px solid $magenta;
+  }
+  &:after {
+    content: "";
+    width: 112px;
+    margin-top: 10px;
+    position: absolute;
+    margin-left: 4px;
+    height: 0;
+    border-top: 1px solid $magenta;
+  }
+}
+
+.contact-us-icon {
+  text-align: center;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  background: url(../img/hr-email-icon.png) no-repeat;
+  margin-left: auto;
+  display: inline-block;
+  margin-right: auto;
+  height:25px;
+  width:25px;
+}
+
+.contact-us-text {
+  color: $magenta ;
+}
+
+.contact-us-link {
+  color: $magenta;
+  text-decoration: underline;
 }
\ No newline at end of file