Ticket #2150

inc/js/jquery.webForms.js

@@ -116,9 +116,17 @@
         });
 
         if (!$(".bx-form-input-wrapper-password").hasClass("bx-inited")) {
-            $(".bx-form-input-wrapper-password A").on("click", function () {
-                var oIcon = $(this).find("I");
-                var oFld = $(this).parents(".bx-form-input-wrapper-password").find("INPUT");
+            var sClassFocus = "bx-form-input-focus";
+
+            $(".bx-form-input-wrapper-password input").bind('focus', function() {
+                $(this).parents(".bx-form-input-wrapper-password:first").addClass(sClassFocus);
+            }).bind('blur', function() {
+                $(this).parents(".bx-form-input-wrapper-password:first").removeClass(sClassFocus);
+            });
+
+            $(".bx-form-input-wrapper-password a").on("click", function () {
+                var oIcon = $(this).find("i");
+                var oFld = $(this).parents(".bx-form-input-wrapper-password").find("input");
                 if (oIcon.hasClass("eye")) {
                     oIcon.removeClass("eye").addClass("eye-slash");
                     oFld.attr("type", "text");

modules/boonex/decorous/data/template/system/css/default.less

@@ -735,8 +735,8 @@ a.bx-def-font-h3:hover {
 .bx-form-value .bx-form-input-datepicker,
 .bx-form-value .bx-form-input-datetime,
 .bx-form-value .bx-form-input-textarea,
-.bx-form-value .bx-form-input-password,
-.bx-form-value .bx-form-input-text {
+.bx-form-value .bx-form-input-text,
+.bx-form-value .bx-form-input-wrapper-password {
     .box-sizing(@base-input-box-sizing);
 
     border-color: @bx-color-border-form-input;
@@ -755,15 +755,15 @@ a.bx-def-font-h3:hover {
 .bx-form-value .bx-form-input-time,
 .bx-form-value .bx-form-input-datepicker,
 .bx-form-value .bx-form-input-datetime,
-.bx-form-value .bx-form-input-password,
-.bx-form-value .bx-form-input-text {
-	height: @bx-height-form-input;
+.bx-form-value .bx-form-input-text, 
+.bx-form-value .bx-form-input-wrapper-password {
+    height: @bx-height-form-input;
 }
 .bx-form-value .bx-form-input-text.bx-form-input-autotoken b {
     line-height: @bx-height-form-input;
 }
 .bx-form-value .bx-form-input-text.bx-form-input-autotoken b .bx-def-thumb-size {
-	width: @bx-height-form-input;
+    width: @bx-height-form-input;
     height: @bx-height-form-input;
     line-height: @bx-height-form-input;
 }
@@ -774,20 +774,20 @@ a.bx-def-font-h3:hover {
 .bx-form-value .bx-form-input-datepicker:focus,
 .bx-form-value .bx-form-input-datetime:focus,
 .bx-form-value .bx-form-input-textarea:focus,
-.bx-form-value .bx-form-input-password:focus,
-.bx-form-value .bx-form-input-text:focus {
-	border-color: @bx-color-border-form-input-active;
-	background-color: @bx-color-form-input-active;
+.bx-form-value .bx-form-input-text:focus,
+.bx-form-value .bx-form-input-wrapper-password.bx-form-input-focus {
+    border-color: @bx-color-border-form-input-active;
+    background-color: @bx-color-form-input-active;
 }
 .bx-form-value .bx-switcher-cont {
-	border-color: @bx-color-border-form-input;
-	border-width: @bx-border-width-form-input;
+    border-color: @bx-color-border-form-input;
+    border-width: @bx-border-width-form-input;
 
-	background-color: @bx-color-form-input;
+    background-color: @bx-color-form-input;
 
-	-webkit-box-shadow: @bx-shadow-form-input;
-	-moz-box-shadow: @bx-shadow-form-input;
-	box-shadow: @bx-shadow-form-input;
+    -webkit-box-shadow: @bx-shadow-form-input;
+    -moz-box-shadow: @bx-shadow-form-input;
+    box-shadow: @bx-shadow-form-input;
 }
 
 /* button large */

modules/boonex/lucid/data/template/system/css/default.less

@@ -780,7 +780,7 @@ a.bx-def-font-h3:hover {
 .bx-form-value .bx-form-input-datetime,
 .bx-form-value .bx-form-input-wrapper-textarea.bx-form-input-wrapper-html,
 .bx-form-value .bx-form-input-textarea,
-.bx-form-value .bx-form-input-password,
+.bx-form-value .bx-form-input-wrapper-password,
 .bx-form-value .bx-form-input-text {
     .box-sizing(@base-input-box-sizing);
 
@@ -803,27 +803,27 @@ a.bx-def-font-h3:hover {
 .bx-form-value .bx-form-input-time,
 .bx-form-value .bx-form-input-datepicker,
 .bx-form-value .bx-form-input-datetime,
-.bx-form-value .bx-form-input-password,
-.bx-form-value .bx-form-input-text {
-	height: @bx-height-form-input;
+.bx-form-value .bx-form-input-text,
+.bx-form-value .bx-form-input-wrapper-password {
+    height: @bx-height-form-input;
 }
 .bx-form-value .bx-form-input-wrapper-textarea.bx-form-input-wrapper-html {
-	border-style: solid;
+    border-style: solid;
 }
 .bx-form-value .bx-form-input-textarea {
-	-webkit-box-shadow: none;
-	-moz-box-shadow: none;
-	box-shadow: none;
+    -webkit-box-shadow: none;
+    -moz-box-shadow: none;
+    box-shadow: none;
 }
 .bx-form-value .bx-form-input-textarea.bx-form-input-html 
 {
-	border-width: 0;
+    border-width: 0;
 }
 .bx-form-value .bx-form-input-text.bx-form-input-autotoken b {
     line-height: @bx-height-form-input;
 }
 .bx-form-value .bx-form-input-text.bx-form-input-autotoken b .bx-def-thumb-size {
-	width: @bx-height-form-input;
+    width: @bx-height-form-input;
     height: @bx-height-form-input;
     line-height: @bx-height-form-input;
 }
@@ -834,20 +834,20 @@ a.bx-def-font-h3:hover {
 .bx-form-value .bx-form-input-datepicker:focus,
 .bx-form-value .bx-form-input-datetime:focus,
 .bx-form-value .bx-form-input-textarea:focus,
-.bx-form-value .bx-form-input-password:focus,
-.bx-form-value .bx-form-input-text:focus {
-	border-color: @bx-color-border-form-input-active;
-	background-color: @bx-color-form-input-active;
+.bx-form-value .bx-form-input-text:focus,
+.bx-form-value .bx-form-input-wrapper-password.bx-form-input-focus {
+    border-color: @bx-color-border-form-input-active;
+    background-color: @bx-color-form-input-active;
 }
 .bx-form-value .bx-switcher-cont {
-	border-color: @bx-color-border-form-input;
-	border-width: @bx-border-width-form-input;
+    border-color: @bx-color-border-form-input;
+    border-width: @bx-border-width-form-input;
 
-	background-color: @bx-color-form-input;
+    background-color: @bx-color-form-input;
 
-	-webkit-box-shadow: @bx-shadow-form-input;
-	-moz-box-shadow: @bx-shadow-form-input;
-	box-shadow: @bx-shadow-form-input;
+    -webkit-box-shadow: @bx-shadow-form-input;
+    -moz-box-shadow: @bx-shadow-form-input;
+    box-shadow: @bx-shadow-form-input;
 }
 
 

modules/boonex/ocean/data/template/studio/css/forms.css

@@ -1,7 +1,6 @@
 @import url(../../../../../../../studio/template/css/forms.css);
 
 /* form inputs */
-
 .bx-form-input-slider,
 .bx-form-input-doublerange,
 .bx-form-input-select_multiple,
@@ -13,8 +12,8 @@
 .bx-form-input-datepicker,
 .bx-form-input-datetime,
 .bx-form-input-textarea,
-.bx-form-input-password,
-.bx-form-input-text {
+.bx-form-input-text,
+.bx-form-input-wrapper-password {
     border-color:#6097b0;
 }
 
@@ -25,12 +24,12 @@
 .bx-form-input-datepicker:focus,
 .bx-form-input-datetime:focus,
 .bx-form-input-textarea:focus,
-.bx-form-input-password:focus,
-.bx-form-input-text:focus {
-	border-color:#57889e;
+.bx-form-input-text:focus,
+.bx-form-input-wrapper-password.bx-form-input-focus {
+    border-color:#57889e;
 }
 
 /* switcher */
 .bx-switcher-cont {
-	border-color: #6097b0;
+    border-color: #6097b0;
 }

modules/boonex/ocean/data/template/system/css/forms.css

@@ -1,7 +1,6 @@
 @import url(../../../../../../../template/css/forms.css);
 
 /* form inputs */
-
 .bx-form-input-slider,
 .bx-form-input-doublerange,
 .bx-form-input-select_multiple,
@@ -13,8 +12,8 @@
 .bx-form-input-datepicker,
 .bx-form-input-datetime,
 .bx-form-input-textarea,
-.bx-form-input-password,
-.bx-form-input-text {
+.bx-form-input-text,
+.bx-form-input-wrapper-password {
     border-color:#6097b0;
 }
 
@@ -25,12 +24,12 @@
 .bx-form-input-datepicker:focus,
 .bx-form-input-datetime:focus,
 .bx-form-input-textarea:focus,
-.bx-form-input-password:focus,
-.bx-form-input-text:focus {
-	border-color:#57889e;
+.bx-form-input-text:focus,
+.bx-form-input-wrapper-password.bx-form-input-focus {
+    border-color:#57889e;
 }
 
 /* switcher */
 .bx-switcher-cont {
-	border-color: #6097b0;
+    border-color: #6097b0;
 }

modules/boonex/protean/data/template/system/css/default.less

@@ -689,8 +689,8 @@ a.bx-def-font-h3:hover {
 .bx-form-value .bx-form-input-datepicker,
 .bx-form-value .bx-form-input-datetime,
 .bx-form-value .bx-form-input-textarea,
-.bx-form-value .bx-form-input-password,
-.bx-form-value .bx-form-input-text {
+.bx-form-value .bx-form-input-text,
+.bx-form-value .bx-form-input-wrapper-password {
     .box-sizing(@base-input-box-sizing);
 
     border-color: @bx-color-border-form-input;
@@ -709,8 +709,8 @@ a.bx-def-font-h3:hover {
 .bx-form-value .bx-form-input-time,
 .bx-form-value .bx-form-input-datepicker,
 .bx-form-value .bx-form-input-datetime,
-.bx-form-value .bx-form-input-password,
-.bx-form-value .bx-form-input-text {
+.bx-form-value .bx-form-input-text,
+.bx-form-value .bx-form-input-wrapper-password {
     height: @bx-height-form-input;
 }
 .bx-form-value .bx-form-input-text.bx-form-input-autotoken b {
@@ -728,11 +728,12 @@ a.bx-def-font-h3:hover {
 .bx-form-value .bx-form-input-datepicker:focus,
 .bx-form-value .bx-form-input-datetime:focus,
 .bx-form-value .bx-form-input-textarea:focus,
-.bx-form-value .bx-form-input-password:focus,
-.bx-form-value .bx-form-input-text:focus {
+.bx-form-value .bx-form-input-text:focus,
+.bx-form-value .bx-form-input-wrapper-password.bx-form-input-focus {
     border-color: @bx-color-border-form-input-active;
     background-color: @bx-color-form-input-active;
 }
+
 .bx-form-value .bx-switcher-cont,
 .bx-grid-table .bx-switcher-cont {
     border-color: @bx-color-border-form-input;

studio/template/css/forms.css

@@ -14,7 +14,7 @@
 .bx-form-value .bx-form-input-datepicker,
 .bx-form-value .bx-form-input-datetime,
 .bx-form-value .bx-form-input-textarea,
-.bx-form-value .bx-form-input-password,
+.bx-form-value .bx-form-input-wrapper-password,
 .bx-form-value .bx-form-input-text {
     height: 36px;
     height: 2.4rem;
@@ -49,8 +49,8 @@
 .bx-form-value .bx-form-input-datepicker:focus,
 .bx-form-value .bx-form-input-datetime:focus,
 .bx-form-value .bx-form-input-textarea:focus,
-.bx-form-value .bx-form-input-password:focus,
-.bx-form-value .bx-form-input-text:focus {
+.bx-form-value .bx-form-input-text:focus,
+.bx-form-value .bx-form-input-wrapper-password.bx-form-input-focus {
     border-color: rgba(136, 143, 153, 1);
     background-color: rgba(255, 255, 255, 1);
 }

template/css/forms.css

@@ -130,7 +130,7 @@
 .bx-form-input-datepicker,
 .bx-form-input-datetime,
 .bx-form-input-textarea,
-.bx-form-input-password,
+.bx-form-input-wrapper-password,
 .bx-form-input-text {
 
     height:40px;
@@ -172,9 +172,9 @@
 .bx-form-input-datepicker:focus,
 .bx-form-input-datetime:focus,
 .bx-form-input-textarea:focus,
-.bx-form-input-password:focus,
-.bx-form-input-text:focus {
-	border-color:#6caa8a;
+.bx-form-input-text:focus,
+.bx-form-input-wrapper-password.bx-form-input-focus {
+    border-color:#6caa8a;
 
     -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; 
     filter: alpha(opacity=100); 
@@ -187,21 +187,43 @@
     -o-transition: all 0.2s linear;
     transition: all 0.2s linear;
 }
+.bx-form-input-wrapper-password {
+    padding: 0 2.125rem 0 0;
+}
 .bx-form-input-wrapper-password > a {
     position: absolute;
+    z-index: 1000;
+    
     display: -webkit-flex;
     display: flex;
     -webkit-align-items: center;
     align-items: center;
     -webkit-justify-content: center;
     justify-content: center;
-    right:0px;
-    z-index: 1000;
+
+    top: 0;
+    right: 0;    
     height: 100%;
-    margin: 0px 1rem;
+
+    margin: 0 0.5rem;
 }
-.bx-form-input-wrapper-password input {
-    padding-right: 3rem;
+.bx-form-input-password {
+    position: relative;
+
+    -moz-box-sizing: border-box;
+    -ms-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+
+    width: 100%;
+    height: 100%;
+
+    margin: 0;
+    padding: 7px 3px 7px 3px;
+    padding: 0.2rem 0.4rem;
+    
+    border: 0;
+    background-color: transparent;
 }
 
 .bx-form-input-select_multiple,