ECOM-531 Styling the forms

lms/static/sass/base/_grid-settings.scss

-/* Override the default global box-sizing */
 @import "neat/neat-helpers"; // or "neat-helpers" when in Rails
 
+/* Change the grid settings */
+$max-width: 1200px;
+/* Override the default global box-sizing */
 $border-box-sizing: false;
 
+
 /* Breakpoints */
 $mobile: new-breakpoint(max-width 320px 4);
 $tablet: new-breakpoint(min-width 321px max-width 768px, 8);

lms/static/sass/base/_variables.scss

@@ -22,6 +22,12 @@ $monospace: Monaco, 'Bitstream Vera Sans Mono', 'Lucida Console', monospace;
 $body-font-family: $sans-serif;
 $serif: $georgia;
 
+// FONT-WEIGHTS
+$font-light: 300;
+$font-regular: 400;
+$font-semibold: 600;
+$font-bold: 700;
+
 // ====================
 
 // MISC: base fonts/colors
@@ -172,6 +178,7 @@ $m-blue-d1: #1790C7;
 $m-blue-d2: #1580B0;
 $m-blue-d3: #126F9A;
 $m-blue-d4: #0A4A67;
+$m-blue-d5: #009EE7;
 $m-blue-t0: rgba($m-blue,0.125);
 $m-blue-t1: rgba($m-blue,0.25);
 $m-blue-t2: rgba($m-blue,0.50);

lms/static/sass/shared/_footer.scss

@@ -5,6 +5,7 @@
   border-top: 1px solid tint($m-gray,50%);
   padding: 25px ($baseline/2) ($baseline*1.5) ($baseline/2);
   background: $footer-bg;
+  clear: both;
 
   footer {
     @include clearfix();

lms/static/sass/views/_login-register.scss

 // lms - views - login/register view
 // ====================
+.section-bkg-wrapper {
+    background: $m-gray-l4;
+}
 
 .login-register {
     @include box-sizing(border-box);
-    @include span-columns(4);
+    @include outer-container;
+    background: white;
+
     width: 100%;
-    max-width: 1200px;
+
+    h2 {
+        line-height: 16px;
+        margin: 0;
+        font-family: $sans-serif;
+    }
 
     /* Temp. fix until applied globally */
-    & > {
+    > {
         @include box-sizing(border-box);
     }
 
+
+    /* Remove autocomplete yellow background */
     input:-webkit-autofill {
         -webkit-box-shadow:0 0 0 50px white inset;
         -webkit-text-fill-color: #333;
@@ -22,14 +34,73 @@
         -webkit-text-fill-color: #333;
     }
 
-    .form-field {
+    header {
+        @include outer-container;
+        border-bottom: 1px solid $gray-l4;
         width: 100%;
+        padding-top: 35px;
+        padding-bottom: 35px;
+
+        .headline {
+            @include box-sizing(border-box);
+            @include span-columns(4);
+            @include font-size(35);
+            font-family: $sans-serif;
+            font-weight: $font-semibold;
+            text-align: left;
+            margin-bottom: 0;
+            color: $m-blue-d5;
+        }
+
+        .tagline {
+            @include box-sizing(border-box);
+            @include span-columns(4);
+            @include font-size(24);
+            font-family: $sans-serif;
+            font-weight: $font-regular;
+        }
+    }
+
+    .form-toggle {
+        margin: 0 10px;
+    }
+
+    .form-type {
+        padding-top: 25px;
+        padding-bottom: 25px;
+        @include box-sizing(border-box);
+        @include span-columns(4);
+
+        &:first-of-type {
+            border-bottom: 1px solid $gray-l4;
+        }
+    }
+
+
+
+    /** The forms **/
+    .form-wrapper {
+        padding-top: 25px;
+    }
+
+    .form-label {
+        @include font-size(16);
+        font-family: $sans-serif;
+        font-weight: $font-semibold;
+        font-style: normal;
+        text-transform: none;
+    }
+
+    .form-field {
+        width: calc( 100% - 20px );
         margin: 0 0 $baseline 0;
+        padding-left: 10px;
 
         /** FROM _accounts.scss - start **/
-        label, input, textarea {
+        label,
+        input,
+        textarea {
             border-radius: 0;
-            display: block;
             height: auto;
             font-family: $sans-serif;
             font-style: normal;
@@ -41,10 +112,22 @@
             @include transition(color 0.15s ease-in-out 0s);
             margin: 0 0 ($baseline/4) 0;
             color: tint($black, 20%);
+            font-weight: $font-semibold;
+
+            &.inline {
+                display: inline;
+            }
+
+        }
+
+        .field-link {
+            position: relative;
+            float: right
         }
 
         input,
         textarea {
+            display: block;
             width: 100%;
             margin: 0;
             padding: ($baseline/2) ($baseline*.75);
@@ -56,6 +139,12 @@
             &.short {
                 width: 25%;
             }
+
+            &.checkbox {
+                display: inline;
+                width: auto;
+                margin-right: 5px;
+            }
         }
 
         textarea.long {
@@ -72,24 +161,35 @@
         width: 100%;
     }
 
-    .desc {
-        display: block;
-        /*@extend %body-text-emphasized;*/
-        margin-bottom: $baseline;
-    }
 
     .input-inline {
         display: inline;
     }
 
+    .desc {
+        @include transition(color 0.15s ease-in-out 0s);
+        display: block;
+        margin-top: ($baseline/4);
+        color: $lighter-base-font-color;
+        font-size: em(13);
+    }
+
     @include media( $tablet ) {
-        @include span-columns(6);
-        @include shift(1);
+        header h1,
+        header p,
+        .form-type {
+            @include span-columns(6);
+            @include shift(1);
+        }
     }
 
     @include media( $desktop ) {
-        @include span-columns(6);
-        @include shift(3);
+        header h1,
+        header p,
+        .form-type {
+            @include span-columns(6);
+            @include shift(3);
+        }
     }
 }
 

lms/templates/student_account/access.underscore

 <header class="js-login-register-header">
-    <h1>Welcome!</h1>
-    <p>Please log in to continue</p>
+    <h1 class="headline">Welcome!</h1>
+    <p class="tagline">Please log in to continue</p>
 </header>
 
 <section class="form-type">
     <h2>
         <input type="radio" name="form" id="register-option" value="register" class="form-toggle" <% if ( mode === 'register' ) { %>checked<% } %> >
-        <label for"register-option">I am a new user</label>
+        <label for"register-option" class="form-label">I am a new user</label>
     </h2>
     <div id="register-form" class="form-wrapper <% if ( mode !== 'register' ) { %>hidden<% } %>"></div>
 </section>
@@ -14,7 +14,7 @@
 <section class="form-type">
     <h2>
         <input type="radio" name="form" id="login-option" value="login" class="form-toggle" <% if ( mode === 'login' ) { %>checked<% } %>>
-        <label for="login-option">I am a returning user with an edX account</label>
+        <label for="login-option" class="form-label">I am a returning user with an edX account</label>
     </h2>
     <div id="login-form" class="form-wrapper <% if ( mode !== 'login' ) { %>hidden<% } %>"></div>
 </section>

lms/templates/student_account/form_field.underscore

@@ -7,7 +7,7 @@
     <% } %>
 
     <% if( form === 'login' && name === 'password' ) { %>
-        <a href="#" class="forgot-password">Forgot password?</a>
+        <a href="#" class="forgot-password field-link">Forgot password?</a>
     <% } %>
 
     <% if ( type === 'select' ) { %>
@@ -23,7 +23,7 @@
             <% if ( required ) { %> required<% } %> >
         </textarea>
     <% } else { %>
-        <input id="<%= form %>-<%= name %>" type="<%= type %>" name="<%= name %>" class="input-block" aria-describedby="<%= form %>-<%= name %>-desc"
+        <input id="<%= form %>-<%= name %>" type="<%= type %>" name="<%= name %>" class="input-block <% if ( type === 'checkbox' ) { %>checkbox<% } %>" aria-describedby="<%= form %>-<%= name %>-desc"
             <% if ( restrictions.min_length ) { %> minlength="<%= restrictions.min_length %>"<% } %>
             <% if ( restrictions.max_length ) { %> maxlength="<%= restrictions.max_length %>"<% } %>
             <% if ( required ) { %> required<% } %>
@@ -31,7 +31,7 @@
     <% } %>
 
     <% if ( type === 'checkbox' ) { %>
-        <label for="<%= form %>-<%= name %>">
+        <label for="<%= form %>-<%= name %>" class="inline">
             <%= label %>
             <% if ( required ) { %> *</label><% } %>
         </label>

lms/templates/student_account/login_and_register.html

@@ -43,8 +43,10 @@
 ##
 ## Note that this list may be empty.
 ##
-<div id="login-and-registration-container"
-    class="login-register"
-    data-initial-mode="${initial_mode}"
-    data-third-party-auth-providers="${third_party_auth_providers}"
-/>
+<div class="section-bkg-wrapper">
+    <div id="login-and-registration-container"
+        class="login-register"
+        data-initial-mode="${initial_mode}"
+        data-third-party-auth-providers="${third_party_auth_providers}"
+    />
+</div>

lms/templates/student_account/password_reset.underscore

 <header>
-    <h1>Password assistance</h1>
+    <h1 class="headline">Password assistance</h1>
 </header>
 
 <section class="form-type">