From 00ff10820a91773c6ad0b9c06f5afb797c880fdd Mon Sep 17 00:00:00 2001 From: AlasdairSwan Date: Tue, 21 Oct 2014 16:03:58 -0400 Subject: [PATCH 1/4] ECOM-531 Styling the forms --- lms/static/sass/base/_grid-settings.scss | 5 +- lms/static/sass/base/_variables.scss | 7 + lms/static/sass/shared/_footer.scss | 1 + lms/static/sass/views/_login-register.scss | 130 ++++++++++++++++-- .../student_account/access.underscore | 8 +- .../student_account/form_field.underscore | 6 +- .../student_account/login_and_register.html | 12 +- .../student_account/password_reset.underscore | 2 +- 8 files changed, 142 insertions(+), 29 deletions(-) diff --git a/lms/static/sass/base/_grid-settings.scss b/lms/static/sass/base/_grid-settings.scss index 6fdfaf9174..d3c8a75802 100644 --- a/lms/static/sass/base/_grid-settings.scss +++ b/lms/static/sass/base/_grid-settings.scss @@ -1,8 +1,11 @@ -/* 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); diff --git a/lms/static/sass/base/_variables.scss b/lms/static/sass/base/_variables.scss index a54a4687c7..8b5649f825 100644 --- a/lms/static/sass/base/_variables.scss +++ b/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); diff --git a/lms/static/sass/shared/_footer.scss b/lms/static/sass/shared/_footer.scss index 1420370be9..3255716e78 100644 --- a/lms/static/sass/shared/_footer.scss +++ b/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(); diff --git a/lms/static/sass/views/_login-register.scss b/lms/static/sass/views/_login-register.scss index 2dd91b4871..bdb445bc3f 100644 --- a/lms/static/sass/views/_login-register.scss +++ b/lms/static/sass/views/_login-register.scss @@ -1,17 +1,29 @@ // 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); + } } } diff --git a/lms/templates/student_account/access.underscore b/lms/templates/student_account/access.underscore index e32f587c6b..981a1dc5fa 100644 --- a/lms/templates/student_account/access.underscore +++ b/lms/templates/student_account/access.underscore @@ -1,12 +1,12 @@
-

Welcome!

-

Please log in to continue

+

Welcome!

+

Please log in to continue

checked<% } %> > - +

@@ -14,7 +14,7 @@

checked<% } %>> - +

diff --git a/lms/templates/student_account/form_field.underscore b/lms/templates/student_account/form_field.underscore index 3d6c2b0851..8cb463ef55 100644 --- a/lms/templates/student_account/form_field.underscore +++ b/lms/templates/student_account/form_field.underscore @@ -7,7 +7,7 @@ <% } %> <% if( form === 'login' && name === 'password' ) { %> - Forgot password? + Forgot password? <% } %> <% if ( type === 'select' ) { %> @@ -23,7 +23,7 @@ <% if ( required ) { %> required<% } %> > <% } else { %> - minlength="<%= restrictions.min_length %>"<% } %> <% if ( restrictions.max_length ) { %> maxlength="<%= restrictions.max_length %>"<% } %> <% if ( required ) { %> required<% } %> @@ -31,7 +31,7 @@ <% } %> <% if ( type === 'checkbox' ) { %> - diff --git a/lms/templates/student_account/login_and_register.html b/lms/templates/student_account/login_and_register.html index 629d0d1297..fb8dcd0e8e 100644 --- a/lms/templates/student_account/login_and_register.html +++ b/lms/templates/student_account/login_and_register.html @@ -43,8 +43,10 @@ ## ## Note that this list may be empty. ## -
+
+ diff --git a/lms/templates/student_account/password_reset.underscore b/lms/templates/student_account/password_reset.underscore index 156e374405..62674d8e88 100644 --- a/lms/templates/student_account/password_reset.underscore +++ b/lms/templates/student_account/password_reset.underscore @@ -1,5 +1,5 @@
-

Password assistance

+

Password assistance

From 24a01ae37e724afc035b827b3b278baa96929a72 Mon Sep 17 00:00:00 2001 From: AlasdairSwan Date: Tue, 21 Oct 2014 16:40:58 -0400 Subject: [PATCH 2/4] ECOM-531 Styling the buttons --- lms/static/sass/views/_login-register.scss | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/lms/static/sass/views/_login-register.scss b/lms/static/sass/views/_login-register.scss index bdb445bc3f..b5b3c6e7b1 100644 --- a/lms/static/sass/views/_login-register.scss +++ b/lms/static/sass/views/_login-register.scss @@ -174,6 +174,13 @@ font-size: em(13); } + .action-primary { + @extend %m-btn-primary; + width: calc( 100% - 20px ); + margin-left: 10px; + text-transform: none; + } + @include media( $tablet ) { header h1, header p, From ab035a0ebbf64708b8aba80147f2a5ff327964fe Mon Sep 17 00:00:00 2001 From: AlasdairSwan Date: Wed, 22 Oct 2014 09:06:28 -0400 Subject: [PATCH 3/4] ECOM-531 updating grid column counts in media queries and added some more classes to style against instead of elements --- lms/static/sass/views/_login-register.scss | 56 ++++++++++++++----- .../student_account/access.underscore | 2 +- .../student_account/password_reset.underscore | 4 +- 3 files changed, 44 insertions(+), 18 deletions(-) diff --git a/lms/static/sass/views/_login-register.scss b/lms/static/sass/views/_login-register.scss index b5b3c6e7b1..5640d1fe62 100644 --- a/lms/static/sass/views/_login-register.scss +++ b/lms/static/sass/views/_login-register.scss @@ -7,6 +7,7 @@ .login-register { @include box-sizing(border-box); @include outer-container; + $grid-columns: 4; background: white; width: 100%; @@ -34,7 +35,7 @@ -webkit-text-fill-color: #333; } - header { + .header { @include outer-container; border-bottom: 1px solid $gray-l4; width: 100%; @@ -45,6 +46,7 @@ @include box-sizing(border-box); @include span-columns(4); @include font-size(35); + padding: 0 10px; font-family: $sans-serif; font-weight: $font-semibold; text-align: left; @@ -56,20 +58,20 @@ @include box-sizing(border-box); @include span-columns(4); @include font-size(24); + padding: 0 10px; font-family: $sans-serif; font-weight: $font-regular; } } .form-toggle { - margin: 0 10px; + margin: 0; } .form-type { - padding-top: 25px; - padding-bottom: 25px; @include box-sizing(border-box); @include span-columns(4); + padding: 25px 10px; &:first-of-type { border-bottom: 1px solid $gray-l4; @@ -83,7 +85,7 @@ padding-top: 25px; } - .form-label { + %bold-label { @include font-size(16); font-family: $sans-serif; font-weight: $font-semibold; @@ -91,10 +93,18 @@ text-transform: none; } + .form-label { + @extend %bold-label; + padding: 0 0 0 5px; + } + + .action-label { + @extend %bold-label; + } + .form-field { - width: calc( 100% - 20px ); + width: 100%; margin: 0 0 $baseline 0; - padding-left: 10px; /** FROM _accounts.scss - start **/ label, @@ -122,7 +132,13 @@ .field-link { position: relative; - float: right + float: right; + color: $link-color-d1; + font-weight: $font-regular; + text-decoration: none !important; // needed but nasty + font-family: $sans-serif; + font-size: 0.8em; + padding-top: 7px; } input, @@ -161,7 +177,6 @@ width: 100%; } - .input-inline { display: inline; } @@ -176,27 +191,38 @@ .action-primary { @extend %m-btn-primary; - width: calc( 100% - 20px ); - margin-left: 10px; + width: 100%; text-transform: none; } @include media( $tablet ) { - header h1, - header p, + $grid-columns: 8; + + .headline, + .tagline, .form-type { @include span-columns(6); @include shift(1); } + + .form-toggle { + margin-right: 5px; + } } @include media( $desktop ) { - header h1, - header p, + $grid-columns: 12; + + .headline, + .tagline, .form-type { @include span-columns(6); @include shift(3); } + + .form-toggle { + margin-right: 10px; + } } } diff --git a/lms/templates/student_account/access.underscore b/lms/templates/student_account/access.underscore index 981a1dc5fa..182473077a 100644 --- a/lms/templates/student_account/access.underscore +++ b/lms/templates/student_account/access.underscore @@ -1,4 +1,4 @@ -