Merge pull request #648 from appirio-tech/feature/sup-2930-toggle-with-pwd-style

SUP-2930, Register--> 'Create Password' text fileld showing one line at beginning.

Author: vikasrohit

assets/css/account/account.scss

@@ -81,15 +81,6 @@
   input:not([type='checkbox']) {
     width: 300px;
   }
-  toggle-password {
-    input#current-password-input {
-      border: none;
-      box-shadow: none;
-      height: 20px;
-      width: 300px;
-      outline: none;
-    }
-  }
   .tips,
   .email-tips,
   .password-tips {
@@ -117,11 +108,6 @@
   toggle-password {
     width: 380px;
   }
-  toggle-password {
-    input#current-password-input {
-      width: 300px;
-    }
-  }
   // Social section
   .networks {
     display: block;

assets/css/account/login.scss

@@ -9,12 +9,8 @@
     input[type='text'],
     toggle-password {
       width: 380px;
-      padding-right: 10px;
     }
     toggle-password {
-      input#current-password-input {
-        width: 300px;
-      }
     }
 
     p + button {

assets/css/account/register.scss

@@ -14,13 +14,6 @@
     toggle-password-with-tips {
       width: 380px;
     }
-    toggle-password,
-    toggle-password-with-tips {
-      input#password-input,
-      input#current-password-input {
-        width: 300px;
-      }
-    }
     input[name='firstname'],
     input[name='lastname'] {
       width: 185px;
@@ -86,9 +79,3 @@
     position: initial;
   }
 }
-
-toggle-password-with-tips label {
-  display: flex !important;
-  line-height: 20px !important;
-  padding-right: 10px !important;
-}

assets/css/directives/toggle-password-with-tips.scss

@@ -6,12 +6,24 @@ toggle-password-with-tips {
   flex-direction: row;
   align-items: center;
   justify-content: space-between;
+  position: relative;
+  padding: 0px;
 
 
   input#password-input {
-    width: 155px;
     margin-bottom: 0;
-    padding-left: 0;
     outline: 0;
+    padding-left: 10px;
+    padding-right: 64px;
+    height: 100%;
+    border: none;
+  }
+
+  label {
+    display: flex !important;
+    line-height: 20px !important;
+    position: absolute;
+    top: 10px;
+    right: 0px;
   }
 }

assets/css/directives/toggle-password.scss

@@ -6,11 +6,24 @@ toggle-password {
   flex-direction: row;
   align-items: center;
   justify-content: space-between;
+  position: relative;
+  padding: 0px;
 
   input#current-password-input {
-    width: 155px;
     margin-bottom: 0;
-    padding-left: 0;
     outline: 0;
+    width: 100%;
+    padding-left: 10px;
+    padding-right: 64px;
+    height: 100%;
+    border: none;
+  }
+
+  label {
+    display: flex !important;
+    line-height: 20px !important;
+    position: absolute;
+    top: 10px;
+    right: 0px;
   }
 }

assets/css/settings/settings.scss

@@ -360,10 +360,7 @@
   @media only screen and (min-width: 768px) {
   }
   .password {
-    padding-left: 30px;
-    height: 40px;
-    padding-left: 15px;
-    padding-right: 5px;
+    padding-left: 0px;/* to override the padding set by topcoder.scss for forms */
     &:hover {
       cursor: text;
     }