Skip to content

E
edx-platform
Commit 5671392a by AlasdairSwan
Options

Merge pull request #5681 from edx/alasdair/logistration-styling 

Alasdair/logistration styling - merge approved by Will
parents b69035f3 3a030472
Showing with 175 additions and 121 deletions
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;
$grid-columns: 4;
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 +35,82 @@
-webkit-text-fill-color: #333;
}
.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);
padding: 0 10px;
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);
padding: 0 10px;
font-family: $sans-serif;
font-weight: $font-regular;
}
}
.form-toggle {
margin: 0;
}
.form-type {
@include box-sizing(border-box);
@include span-columns(4);
padding: 25px 10px;
&:first-of-type {
border-bottom: 1px solid $gray-l4;
}
}
/** The forms **/
.form-wrapper {
padding-top: 25px;
}
%bold-label {
@include font-size(16);
font-family: $sans-serif;
font-weight: $font-semibold;
font-style: normal;
text-transform: none;
}
.form-label {
@extend %bold-label;
padding: 0 0 0 5px;
}
.action-label {
@extend %bold-label;
}
.form-field {
width: 100%;
margin: 0 0 $baseline 0;
/** 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 +122,28 @@
@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;
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,
textarea {
display: block;
width: 100%;
margin: 0;
padding: ($baseline/2) ($baseline*.75);
......@@ -56,6 +155,16 @@
&.short {
width: 25%;
}
&.checkbox {
display: inline;
width: auto;
margin-right: 5px;
}
&.error {
border-color: tint($red,50%);
}
}
textarea.long {
......@@ -72,119 +181,51 @@
width: 100%;
}
.desc {
display: block;
/*@extend %body-text-emphasized;*/
margin-bottom: $baseline;
}
.input-inline {
display: inline;
}
@include media( $tablet ) {
@include span-columns(6);
@include shift(1);
.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( $desktop ) {
@include span-columns(6);
@include shift(3);
.action-primary {
@extend %m-btn-primary;
width: 100%;
text-transform: none;
}
}
/*// individual fields
.field {
&:last-child {
margin-bottom: 0;
}
// types - password
// types - select
// types - checkboxes/radio buttons
&.checkbox {
input[type="checkbox"] {
display: inline-block;
width: auto;
@include margin-right($baseline/4);
}
label {
display: inline-block;
}
}
// states - all
&.disabled,
&.submitted {
color: rgba(0,0,0,.25);
label {
cursor: text;
&:after {
margin-left: ($baseline/4);
}
}
textarea, input {
background: $container-bg;
color: rgba(0,0,0,.25);
}
}
// states - focused
&.is-focused {
label {
color: saturate($link-color-d1,15%);
}
.tip {
color: saturate($link-color-d1,15%);
}
}
// states - disabled
&.disabled {
label:after {
color: rgba(0,0,0,.35);
content: "(Disabled Currently)";
}
}
&.error {
@include media( $tablet ) {
$grid-columns: 8;
label {
color: $red;
.headline,
.tagline,
.form-type {
@include span-columns(6);
@include shift(1);
}
input, textarea {
border-color: tint($red,50%);
.form-toggle {
margin-right: 5px;
}
}
&.required {
}
label {
font-weight: 600;
@include media( $desktop ) {
$grid-columns: 12;
a {
font-weight: 600 !important;
}
.headline,
.tagline,
.form-type {
@include span-columns(6);
@include shift(3);
}
label:after {
margin-left: ($baseline/4);
content: "*";
.form-toggle {
margin-right: 10px;
}
}
}*/
}
}
lms/templates/student_account/access.underscore
<header class="js-login-register-header">
<h1>Welcome!</h1>
<p>Please log in to continue</p>
<header class="js-login-register-header header">
<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>
<header class="header">
<h1 class="headline">Password assistance</h1>
</header>
<section class="form-type">
<p class="action-label">Please enter your email address below and we will send you instructions for setting a new password.</p>
<div id="password-reset-form" class="form-wrapper">
<p>Please enter your email address below and we will send you instructions for setting a new password.</p>
<form id="password-reset-form">
<div class="error-msg hidden">
<h4>An error occured.</h4>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment