Skip to content

E
edx-platform
Commit a9609986 by Brian Talbot
Options

Merge pull request #486 from edx/talbs/mktg-vizsync 

edx.org Login, Register, and iframe-based button visual sync
parents 166aea62 2ee140eb
Showing with 235 additions and 106 deletions
lms/static/sass/_shame.scss
...@@ -2,70 +2,141 @@ ...@@ -2,70 +2,141 @@
// shame file - used for any bad-form/orphaned scss that knowingly violate edX FED architecture/standards (see - http://csswizardry.com/2013/04/shame-css/) // shame file - used for any bad-form/orphaned scss that knowingly violate edX FED architecture/standards (see - http://csswizardry.com/2013/04/shame-css/)
// ==================== // ====================
// marketing site - registration iframe band-aid (poor form enough to isolate out) // edx.org marketing site - 7/2013 visual button revamp
.view-partial-mktgregister {
background: transparent; // extends btn
.m-btn {
@include box-sizing(border-box);
@include transition(color 0.25s ease-in-out, background 0.25s ease-in-out, box-shadow 0.25s ease-in-out);
display: inline-block;
cursor: pointer;
text-decoration: none;
&:hover, &:active {
// dimensions needed for course about page on marketing site
.wrapper-view {
overflow: hidden;
} }
// button elements - not a better place to put these, sadly &.disabled, &[disabled] {
.btn { cursor: default;
@include box-sizing('border-box'); pointer-events: none;
display: block;
padding: $baseline/2;
text-transform: lowercase;
color: $white;
letter-spacing: 0.1rem;
cursor: pointer;
text-align: center;
border: none !important;
text-decoration: none;
text-shadow: none;
letter-spacing: 0.1rem;
font-size: 17px;
font-weight: 300;
box-shadow: 0 !important;
strong {
font-weight: 400;
text-transform: none;
}
} }
}
.btn-primary { .m-btn-pill {
@extend .btn; border-radius: ($baseline/5);
@include linear-gradient($m-blue-s1 5%, $m-blue-d1 95%); }
// no hover state conventions to follow from marketing :/ .m-btn-rounded {
&:hover, &:active { border-radius: ($baseline/2);
}
.m-btn-edged {
border-radius: ($baseline/10);
}
// primary button
.m-btn-base {
@extend .m-btn;
@extend .m-btn-edged;
border: none;
padding:($baseline/2) ($baseline);
text-align: center;
text-shadow: none;
font-weight: 500;
letter-spacing: 0;
&.disabled, &[disabled], &.is-disabled {
background: $action-primary-disabled-bg;
&:hover {
background: $action-primary-disabled-bg !important; // needed for IE currently
} }
} }
}
.btn-secondary { // primary button
@extend .btn; .m-btn-primary {
@include linear-gradient($m-gray 5%, $m-gray-d1 95%); @extend .m-btn-base;
box-shadow: 0 2px 1px 0 $action-primary-shadow;
background: $action-primary-bg;
color: $action-primary-fg;
// no hover state conventions to follow from marketing :/ &:hover, &:active {
&:hover, &:active { background: $action-primary-focused-bg;
}
&.current, &.active {
box-shadow: inset 0 2px 1px 1px $action-primary-active-shadow;
background: $action-primary-active-bg;
color: $action-primary-active-fg;
&:hover, &:active {
box-shadow: inset 0 2px 1px 1px $action-primary-active-focused-shadow;
color: $action-primary-active-focused-fg;
} }
} }
.btn-tertiary { &.disabled, &[disabled] {
@extend .btn; box-shadow: none;
background: $m-blue-l1; background: $action-primary-disabled-bg; // needed for IE currently
color: $m-blue; }
}
// no hover state conventions to follow from marketing :/ // secondary button
&:hover, &:active { .m-btn-secondary {
@extend .m-btn-base;
box-shadow: 0 2px 1px 0 $action-secondary-shadow;
background: $action-secondary-bg;
color: $action-secondary-fg;
&:hover, &:active {
background: $action-secondary-focused-bg;
}
&.current, &.active {
box-shadow: inset 0 2px 1px 1px $action-secondary-active-shadow;
background: $action-secondary-active-bg;
color: $action-secondary-active-fg;
&:hover, &:active {
box-shadow: inset 0 2px 1px 1px $action-secondary-active-focused-shadow;
color: $action-secondary-active-focused-fg;
} }
} }
&.disabled, &[disabled] {
box-shadow: none;
background: $action-secondary-disabled-bg; // needed for IE currently
}
}
// ====================
// edx.org marketing site - needed, but bad overrides with importants
.view-register, .view-login, .view-passwordreset {
.form-actions button[type="submit"] {
text-transform: none;
vertical-align: middle;
font-weight: 600 !important;
letter-spacing: 0 !important;
}
}
// ====================
// edx.org marketing site - registration iframe band-aid (poor form enough to isolate out)
.view-partial-mktgregister {
// dimensions needed for course about page on marketing site
.wrapper-view {
overflow: hidden;
}
// nav list // nav list
.list-actions { .list-actions {
list-style: none; list-style: none;
...@@ -78,31 +149,37 @@ ...@@ -78,31 +149,37 @@
} }
.action { .action {
font-size: 16px;
font-weight: 500;
// register or access courseware // register or access courseware
&.action-register, &.access-courseware { &.action-register, &.access-courseware {
@extend .btn-primary; @extend .m-btn-primary;
display: block;
} }
// already registered but course not started or registration is closed // already registered but course not started or registration is closed
&.is-registered, &.registration-closed { &.is-registered, &.registration-closed {
@extend .btn-secondary; @extend .m-btn-secondary;
pointer-events: none !important; pointer-events: none !important;
display: block;
} }
// coming soon // coming soon
&.coming-soon { &.coming-soon {
@extend .btn-tertiary; @extend .m-btn-secondary;
pointer-events: none !important; pointer-events: none !important;
outline: none; outline: none;
display: block;
} }
} }
} }
//--------------------------------------
// The Following is to enable themes to // ====================
// display H1s on login and register pages
//--------------------------------------
// The Following is to enable themes to display H1s on login and register pages
.view-login .introduction header h1, .view-login .introduction header h1,
.view-register .introduction header h1 { .view-register .introduction header h1 {
@include login_register_h1_style; @include login_register_h1_style;
...@@ -110,4 +187,4 @@ ...@@ -110,4 +187,4 @@
footer .references { footer .references {
@include footer_references_style; @include footer_references_style;
} }
\ No newline at end of file
lms/static/sass/base/_mixins.scss
@function em($pxval, $base: 16) { // mixins - font sizing
@return #{$pxval / $base}em; @mixin font-size($sizeValue: 16){
font-size: $sizeValue + px;
font-size: ($sizeValue/10) + rem;
} }
// Line-height // mixins - line height
@function lh($amount: 1) { @mixin line-height($fontSize: auto){
@return $body-line-height * $amount; line-height: ($fontSize*1.48) + px;
line-height: (($fontSize/10)*1.48) + rem;
} }
// image-replacement hidden text // image-replacement hidden text
...@@ -31,6 +34,15 @@ ...@@ -31,6 +34,15 @@
display: block; display: block;
} }
@function em($pxval, $base: 16) {
@return #{$pxval / $base}em;
}
// Line-height
@function lh($amount: 1) {
@return $body-line-height * $amount;
}
//----------------- //-----------------
// Theme Mixin Styles // Theme Mixin Styles
......
lms/static/sass/base/_variables.scss
...@@ -39,23 +39,36 @@ $outer-border-color: rgb(170, 170, 170); ...@@ -39,23 +39,36 @@ $outer-border-color: rgb(170, 170, 170);
$light-gray: #ddd; $light-gray: #ddd;
$dark-gray: #333; $dark-gray: #333;
// edx.org-related // edx.org marketing site variables
$m-gray-l1: rgb(203,203,203); $m-gray: #8A8C8F;
$m-gray-l2: rgb(246,246,246); $m-gray-l1: #97999B;
$m-gray: rgb(153,153,153); $m-gray-l2: #A4A6A8;
$m-gray-d1: rgb(102,102,102); $m-gray-l3: #B1B2B4;
$m-gray-d2: rgb(51,51,51); $m-gray-l4: #F5F5F5;
$m-gray-a1: rgb(80,80,80); $m-gray-d1: #7D7F83;
$m-blue: rgb(65, 116, 170); $m-gray-d2: #707276;
// $m-blue: rgb(85, 151, 221); (used in marketing redesign) $m-gray-d3: #646668;
$m-blue-l1: rgb(85, 151, 221); $m-gray-d4: #050505;
$m-blue-d1: shade($m-blue,15%);
$m-blue-s1: saturate($m-blue,15%); $m-blue: #1AA1DE;
$m-pink: rgb(204,51,102); $m-blue-l1: #2BACE6;
$m-blue-l2: #42B5E9;
$m-blue-l3: #59BEEC;
$m-blue-d1: #1790C7;
$m-blue-d2: #1580B0;
$m-blue-d3: #126F9A;
$m-blue-d4: #0A4A67;
$m-pink: #B52A67;
$m-pink-l1: #CA2F73;
$m-pink-l2: #D33F80;
$m-pink-l3: #D7548E;
$m-pink-d1: #A0255B;
$m-pink-d2: #8C204F;
$m-pink-d3: #771C44;
$m-base-font-size: em(15); $m-base-font-size: em(15);
$base-font-color: rgb(60,60,60); $base-font-color: rgb(60,60,60);
$baseFontColor: rgb(60,60,60); $baseFontColor: rgb(60,60,60);
$lighter-base-font-color: rgb(100,100,100); $lighter-base-font-color: rgb(100,100,100);
...@@ -74,10 +87,57 @@ $courseware-footer-border: none; ...@@ -74,10 +87,57 @@ $courseware-footer-border: none;
$courseware-footer-shadow: none; $courseware-footer-shadow: none;
$courseware-footer-margin: 0px; $courseware-footer-margin: 0px;
// actions
$button-bg-image: linear-gradient(#fff 0%, rgb(250,250,250) 50%, rgb(237,237,237) 50%, rgb(220,220,220) 100%); $button-bg-image: linear-gradient(#fff 0%, rgb(250,250,250) 50%, rgb(237,237,237) 50%, rgb(220,220,220) 100%);
$button-bg-color: transparent; $button-bg-color: transparent;
$button-bg-hover-color: #fff; $button-bg-hover-color: #fff;
// actions - primary
$action-primary-bg: $m-blue-d3;
$action-primary-fg: $white;
$action-primary-shadow: $m-blue-d4;
// focused - hover/active pseudo states
$action-primary-focused-bg: $m-blue-d1;
$action-primary-focused-fg: $white;
// current or active navigation item
$action-primary-active-bg: $m-blue;
$action-primary-active-fg: $m-blue-d3;
$action-primary-active-shadow: $m-blue-d2;
$action-primary-active-focused-fg: $m-blue-d4;
$action-primary-active-focused-shadow: $m-blue-d3;
// disabled
$action-primary-disabled-bg: $m-gray-d3;
$action-prmary-disabled-fg: $white;
// actions - secondary
$action-secondary-bg: $m-pink;
$action-secondary-fg: $white;
$action-secondary-shadow: $m-pink-d2;
// focused - hover/active pseudo states
$action-secondary-focused-bg: $m-pink-l3;
$action-secondary-focused-fg: $white;
// current or active navigation item
$action-secondary-active-bg: $m-pink-l2;
$action-secondary-active-fg: $m-pink-d1;
$action-secondary-active-shadow: $m-pink-d1;
$action-secondary-active-focused-fg: $m-pink-d3;
$action-secondary-active-focused-shadow: $m-pink-d2;
// disabled
$action-secondary-disabled-bg: $m-gray-d3;
$action-secondary-disabled-fg: $white;
$faded-hr-image-1: linear-gradient(180deg, rgba(200,200,200, 0) 0%, rgba(200,200,200, 1) 50%, rgba(200,200,200, 0)); $faded-hr-image-1: linear-gradient(180deg, rgba(200,200,200, 0) 0%, rgba(200,200,200, 1) 50%, rgba(200,200,200, 0));
$faded-hr-image-2: linear-gradient(180deg, rgba(200,200,200, 0) 0%, rgba(200,200,200, 1)); $faded-hr-image-2: linear-gradient(180deg, rgba(200,200,200, 0) 0%, rgba(200,200,200, 1));
$faded-hr-image-3: linear-gradient(180deg, rgba(200,200,200, 1) 0%, rgba(200,200,200, 0)); $faded-hr-image-3: linear-gradient(180deg, rgba(200,200,200, 1) 0%, rgba(200,200,200, 0));
...@@ -104,7 +164,7 @@ $border-color-3: rgb(100,100,100); ...@@ -104,7 +164,7 @@ $border-color-3: rgb(100,100,100);
$border-color-4: rgb(252,252,252); $border-color-4: rgb(252,252,252);
$link-color: $blue; $link-color: $blue;
$link-color-d1: $m-blue; $link-color-d1: $m-blue-d2;
$link-hover: $pink; $link-hover: $pink;
$site-status-color: $pink; $site-status-color: $pink;
......
lms/static/sass/multicourse/_account.scss
...@@ -37,7 +37,7 @@ ...@@ -37,7 +37,7 @@
font-weight: 600; font-weight: 600;
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0 !important; letter-spacing: 0 !important;
color: saturate($link-color-d1,15%); color: $m-gray-d2;
} }
.heading-5 { .heading-5 {
...@@ -390,7 +390,7 @@ ...@@ -390,7 +390,7 @@
@include clearfix(); @include clearfix();
button[type="submit"] { button[type="submit"] {
@extend .button-primary; @extend .m-btn-primary;
&:disabled, &.is-disabled { &:disabled, &.is-disabled {
opacity: 0.3; opacity: 0.3;
...@@ -431,7 +431,6 @@ ...@@ -431,7 +431,6 @@
margin: 0 0 ($baseline/4) 0; margin: 0 0 ($baseline/4) 0;
font-size: em(14); font-size: em(14);
font-weight: 600; font-weight: 600;
color: $m-gray-d2 !important;
} }
.message-copy { .message-copy {
......
lms/static/sass/shared/_header.scss
...@@ -278,26 +278,8 @@ header.global { ...@@ -278,26 +278,8 @@ header.global {
li { li {
display: inline-block; display: inline-block;
a { .cta {
border-radius: 0; @extend .m-btn-primary;
@include linear-gradient(saturate($link-color-d1,15%) 5%, shade($link-color-d1,15%) 95%);
display: inline-block;
padding: $baseline/2 $baseline*2.5;
text-transform: lowercase;
color: $very-light-text;
letter-spacing: 0.1rem;
font-weight: 300;
cursor: pointer;
text-align: center;
border: none !important;
text-shadow: none;
letter-spacing: 0.1rem;
font-size: 14px;
box-shadow: none !important;
&:hover {
text-decoration: none;
}
} }
} }
......
lms/templates/courseware/mktg_course_about.html
...@@ -53,7 +53,7 @@ ...@@ -53,7 +53,7 @@
%elif allow_registration: %elif allow_registration:
<a class="action action-register register" href="#">Register for <strong>${course.number}</strong></a> <a class="action action-register register" href="#">Register for <strong>${course.number}</strong></a>
%else: %else:
<div class="action registration-closed">Registration Is Closed</div> <div class="action registration-closed is-disabled">Registration Is Closed</div>
%endif %endif
</li> </li>
</ul> </ul>
......
lms/templates/register.html
...@@ -69,7 +69,7 @@ ...@@ -69,7 +69,7 @@
$submitButton. $submitButton.
removeClass('is-disabled'). removeClass('is-disabled').
removeProp('disabled'). removeProp('disabled').
html('Create my ${settings.PLATFORM_NAME} Account'); html('Create My ${settings.PLATFORM_NAME} Account');
} }
else { else {
$submitButton. $submitButton.
...@@ -141,32 +141,32 @@ ...@@ -141,32 +141,32 @@
</div> </div>
<ol class="list-input"> <ol class="list-input">
% if ask_for_email: % if ask_for_email:
<li class="field required text" id="field-email"> <li class="field required text" id="field-email">
<label for="email">E-mail</label> <label for="email">E-mail</label>
<input class="" id="email" type="email" name="email" value="" placeholder="example: username@domain.com" /> <input class="" id="email" type="email" name="email" value="" placeholder="example: username@domain.com" />
</li> </li>
% endif % endif
<li class="field required text" id="field-username"> <li class="field required text" id="field-username">
<label for="username">Public Username</label> <label for="username">Public Username</label>
<input id="username" type="text" name="username" value="${extauth_username}" placeholder="example: JaneDoe" required aria-required="true" /> <input id="username" type="text" name="username" value="${extauth_username}" placeholder="example: JaneDoe" required aria-required="true" />
<span class="tip tip-input">Will be shown in any discussions or forums you participate in</span> <span class="tip tip-input">Will be shown in any discussions or forums you participate in</span>
</li> </li>
% if ask_for_fullname: % if ask_for_fullname:
<li class="field required text" id="field-name"> <li class="field required text" id="field-name">
<label for="name">Full Name</label> <label for="name">Full Name</label>
<input id="name" type="text" name="name" value="" placeholder="example: Jane Doe" /> <input id="name" type="text" name="name" value="" placeholder="example: Jane Doe" />
<span class="tip tip-input">Needed for any certificates you may earn <strong>(cannot be changed later)</strong></span> <span class="tip tip-input">Needed for any certificates you may earn <strong>(cannot be changed later)</strong></span>
</li> </li>
% endif % endif
</ol> </ol>
% endif % endif
...@@ -282,7 +282,7 @@ ...@@ -282,7 +282,7 @@
</a> </a>
</p> </p>
</div> </div>
% endif % endif
## TODO: Use a %block tag or something to allow themes to ## TODO: Use a %block tag or something to allow themes to
......
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