fix auto-suggest in webkit, fixes: #6448

we had to disable the browser's
built in auto-completion for
our fancy inputs on the login
screen because it would force an ugly
yellow background like this:
http://screencast.com/t/jrit5OiiGeuE

this fixes the styling to use some css3 tricks in
webkit browsers so we don't have to disable
the functionality any more

test plan:
 go to login screen in chrome or safari
 type your username and password
 it should prompt if you want it to remember it
 say yes
 log out and go back to login screen you should
 see something like:
 http://screencast.com/t/IZL4bfsmQM
 go to it in ie8, it should still look like how
 it used to.

Change-Id: If724698dfea0860e3929f515b36850624c970a51
Reviewed-on: https://gerrit.instructure.com/7128
Reviewed-by: Jacob Fugal <jacob@instructure.com>
Reviewed-by: Brian Palmer <brianp@instructure.com>
Tested-by: Hudson <hudson@instructure.com>

app/stylesheets/login.sass

@@ -12,7 +12,7 @@ body.modal
     border: 0 none
     margin: 0
     padding: 0
-    
+
   #modal-box-top
     background: url(/images/login-bg.jpg) no-repeat
     width: $modal_box_width
@@ -72,11 +72,21 @@ body.modal
       width: 204px
       color: #303030
       margin: 0 6px 6px 0
-
     .radio_spacer
       width: 25px
       display: inline-block
 
+// weird specificity here is to match the input.text above
+body.webkit #modal-box input.text,
+body.webkit #modal-box-arbitrary-size input.text
+  background: #F6F6F6 none
+  border: 6px solid rgba(255, 255, 255, 0.25)
+  border-radius: 7px
+  padding: 12px 9px 12px 17px
+  box-shadow: inset 2px 2px 5px rgba(0,0,0,0.4)
+  background-clip: padding-box
+  width: 197px
+
 #login_form
   margin: 200px auto 0
   width: 487px
@@ -85,7 +95,7 @@ body.modal
   width: 435px
   button.button
     margin: 7px
-  
+
 span.field-with-fancyplaceholder
   display: block
   display: inline-block
@@ -108,7 +118,7 @@ span.field-with-fancyplaceholder
 
     &.focus
       color: #ccc
-      
+
   // gets rid of yello autofill bg for safari but doesnt work in chrome :(
   input:-webkit-autofill
     background-color: transparent !important
@@ -123,7 +133,7 @@ span.field-with-fancyplaceholder
       color: #000
       background: none repeat scroll 0 0 transparent
       overflow: hidden
-      
+
 #register_link
   position: absolute
   display: block
@@ -136,4 +146,3 @@ span.field-with-fancyplaceholder
   font-size: 11px
   font-weight: bold
   line-height: 27px
-  

public/javascripts/jquery.fancyplaceholder.js

@@ -18,7 +18,7 @@
 
 // markup required:
 // <span class=" field-with-fancyplaceholder"><label for="email">Email Address</span></label><input type="text" id="login_apple_id"></span>
-// 
+//
 // css required:
 // span.field-with-fancyplaceholder{display:block;display:inline-block;position:relative;vertical-align:top;}
 // span.field-with-fancyplaceholder label.placeholder{color:#999;cursor:text;pointer-events:none;}
@@ -27,7 +27,7 @@
 // span.field-with-fancyplaceholder label.hidden{color:#fff;}
 // span.field-with-fancyplaceholder input.invalid{background:#ffffc5;color:#F30;}
 // span.field-with-fancyplaceholder input.editing{color:#000;background:none repeat scroll 0 0 transparent;overflow:hidden;}
-// 
+//
 // then: $(".field-with-fancyplaceholder input").fancyPlaceholder();
 
 (function($) {
@@ -49,7 +49,7 @@
 	      'font-family'   : $input.css('font-family'),
         'font-size'     : $input.css('font-size')
 	    });
-	    
+
 	    $input
         .focus(function(){
           $label.addClass('focus', 300);
@@ -58,23 +58,17 @@
           $label.removeClass('focus', 300);
         })
         .bind('keyup', hideOrShowLabels);
-      
-      // because webkit is lame and forces a yello background on things it autofills
-      // see: http://code.google.com/p/chromium/issues/detail?id=1334
-      if (window.devicePixelRatio) { //this is to detect if it is a webkit browser
-        $input.attr('autocomplete', 'off');
-      }
-      
+
       // if this was already focused before we got here, make it light gray now. sorry, ie7 cant do :focus selector, it doesn't get this.
       try {
         if ($("input:focus").get(0) == this) {
           $input.triggerHandler('focus');
-        }  
+        }
       } catch(e) {}
-      
+
 
       foundInputsAndLables.push([$input, $label]);
-      
+
       if (!pollingInterval) {
         window.setInterval(hideOrShowLabels, 100);
       }