Clearinput: visual tweaks

css/ebi-global.css

@@ -722,12 +722,10 @@ h6 a span.link-pdf { display:none; }
    Also need JS, via: http://stackoverflow.com/questions/6258521/clear-icon-inside-input-text */
 input.clearable {
   background: #fff url('data:image/gif;base64,R0lGODlhBwAHAIAAAP///5KSkiH5BAAAAAAALAAAAAAHAAcAAAIMTICmsGrIXnLxuDMLADs=') no-repeat right -10px center;
-  border: 1px solid #999;
-  padding: 3px 18px 3px 4px;
-  border-radius: 3px;
+  padding: 3px 25px 3px 4px;
   transition: background 0.4s;
 }
-input.clearable.x  { background-position: right 5px center; } /* (jQ) Show icon */
+input.clearable.x  { background-position: right 12px center; } /* (jQ) Show icon */
 input.clearable.onX{ cursor: pointer; } /* (jQ) hover cursor style */
 input.clearable::-ms-clear {display: none; width:0; height:0;} /* Remove IE default X */
 

js/foundationExtendEBI.js

@@ -16,7 +16,7 @@
   $(document).on('input', '.clearable', function(){
     $(this)[tog(this.value)]('x');
   }).on('mousemove', '.x', function( e ){
-    $(this)[tog(this.offsetWidth-18 < e.clientX-this.getBoundingClientRect().left)]('onX');
+    $(this)[tog(this.offsetWidth-25 < e.clientX-this.getBoundingClientRect().left)]('onX');
   }).on('touchstart click', '.onX', function( ev ){
     ev.preventDefault();
     $(this).removeClass('x onX').val('').change().keyup();