refactor(pages): restyle auth and reg

src/404.html

@@ -7,6 +7,7 @@
   <title>Blur Admin</title>
 
   <link href='http://fonts.googleapis.com/css?family=Lato:300,400' rel='stylesheet' type='text/css'>
+  <link href='https://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900italic,900&subset=latin,greek,greek-ext,vietnamese,cyrillic-ext,latin-ext,cyrillic' rel='stylesheet' type='text/css'>
 
   <link rel="icon" type="image/png" sizes="32x32" href="img/favicon-32x32.png">
   <link rel="icon" type="image/png" sizes="96x96" href="img/favicon-96x96.png">

src/auth.html

@@ -6,7 +6,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>Blur Admin</title>
 
-  <link href='http://fonts.googleapis.com/css?family=Lato:300,400' rel='stylesheet' type='text/css'>
+  <link href='https://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900italic,900&subset=latin,greek,greek-ext,vietnamese,cyrillic-ext,latin-ext,cyrillic' rel='stylesheet' type='text/css'>
 
   <link rel="icon" type="image/png" sizes="32x32" href="img/favicon-32x32.png">
   <link rel="icon" type="image/png" sizes="96x96" href="img/favicon-96x96.png">
@@ -43,12 +43,12 @@
 
         <div class="col-sm-10">
           <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
-          <a href class="forgot-pass">Forgot password?</a>
         </div>
       </div>
       <div class="form-group">
         <div class="col-sm-offset-2 col-sm-10">
           <button type="submit" class="btn btn-default btn-auth">Sign in</button>
+          <a href class="forgot-pass">Forgot password?</a>
         </div>
       </div>
     </form>

src/reg.html

@@ -6,7 +6,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>Blur Admin</title>
 
-  <link href='http://fonts.googleapis.com/css?family=Lato:300,400' rel='stylesheet' type='text/css'>
+  <link href='https://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900italic,900&subset=latin,greek,greek-ext,vietnamese,cyrillic-ext,latin-ext,cyrillic' rel='stylesheet' type='text/css'>
 
   <link rel="icon" type="image/png" sizes="32x32" href="img/favicon-32x32.png">
   <link rel="icon" type="image/png" sizes="96x96" href="img/favicon-96x96.png">

src/sass/404.scss

@@ -21,7 +21,9 @@ body {
 .page-not-found-modal {
   width: 638px;
   margin: 0 auto;
-  @include bg-translucent-dark(0.7);
+  @include bg-translucent-dark(0.5);
+  border-radius: 5px;
+  font-weight: $font-light;
   color: #ffffff;
   padding: 32px;
   text-align: center;
@@ -37,11 +39,11 @@ body {
   a {
     text-decoration: none;
     outline: none;
-    transition: all 0.5s ease;
+    transition: all 0.2s ease;
     color: $primary;
     display: inline-block;
     &:hover {
-      color: $warning;
+      color: $primary-dark;
     }
   }
 }

src/sass/auth.scss

@@ -1,6 +1,8 @@
 @import "common.scss";
 @import "theme/_socicon.scss";
 @import "theme/_layout.scss";
+@import 'theme/buttons.scss';
+@import 'app/form.scss';
 
 html, body {
   height: 100%;
@@ -10,6 +12,16 @@ html {
   min-height: 520px;
 }
 
+.form-control, .form-control:focus {
+  @include placeholderStyle($default, 0.9);
+  background-color: rgba(0, 0, 0, .4);
+  border-radius: 5px;
+  color: $default;
+}
+.form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control {
+  @include placeholderStyle($default, 0.6);
+}
+
 .auth-main {
   display: flex;
   align-items: center;
@@ -20,7 +32,8 @@ html {
 .auth-block {
   width: 540px;
   margin: 0 auto;
-  @include bg-translucent-dark(0.7);
+  border-radius: 5px;
+  @include bg-translucent-dark(0.55);
   color: #fff;
   padding: 32px;
   h1 {
@@ -34,26 +47,16 @@ html {
   a {
     text-decoration: none;
     outline: none;
-    transition: all 0.5s ease;
+    transition: all 0.2s ease;
     color: $primary;
     &:hover {
-      color: $warning;
+      color: $primary-dark;
     }
   }
 
-  input[type="text"] {
-    outline: none;
-    border-radius: 0;
-  }
-
-  .form-control {
-    border-radius: 0;
-    height: 36px;
-    outline: none;
-  }
-
   .control-label {
     padding-top: 11px;
+    color: $default;
   }
 
   .form-group {
@@ -68,8 +71,6 @@ html {
     display: block;
     width: 100%;
     border: none;
-    background: rgba(255, 255, 255, 1);;
-    color: $default-text;
     font-size: 16px;
     padding: 4px 10px;
     outline: none;
@@ -79,7 +80,6 @@ html {
 a.forgot-pass {
   display: block;
   text-align: right;
-  margin-top: 4px;
   margin-bottom: -20px;
   float: right;
   z-index: 2;
@@ -106,14 +106,14 @@ a.forgot-pass {
     width: 30%;
     white-space: nowrap;
     padding: 0 24px;
-    color: $help-text;
+    color: $default;
     & > span {
       margin-top: -12px;
       display: block;
     }
   }
   &:before, &:after {
-    border-top: solid 1px #949494;
+    border-top: solid 1px $default;
     content: "";
     height: 1px;
     width: 35%;
@@ -143,7 +143,7 @@ a.forgot-pass {
 .btn-auth {
   background: $primary;
   color: #ffffff;
-  border-radius: 0;
+  border-radius: 5px;
   border-color: $primary;
   padding: 7px 12px;
   transition: all 0.1s ease;