Andal.LND/edx-platform
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
edx.org Login, Register, and iframe-based button visual sync
This commit is contained in:
Brian Talbot
2013-07-29 07:22:22 -07:00
parent 166aea62bb 2ee140eb79
commit a96099868d
8 changed files with 249 additions and 127 deletions
Download Patch File Download Diff File Expand all files Collapse all files

207
lms/static/sass/_shame.scss
View File

@@ -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/)
// ====================
// marketing site - registration iframe band-aid (poor form enough to isolate out)
// edx.org marketing site - 7/2013 visual button revamp
// 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 {
}
&.disabled, &[disabled] {
cursor: default;
pointer-events: none;
}
}
.m-btn-pill {
border-radius: ($baseline/5);
}
.m-btn-rounded {
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
}
}
}
// primary button
.m-btn-primary {
@extend .m-btn-base;
box-shadow: 0 2px 1px 0 $action-primary-shadow;
background: $action-primary-bg;
color: $action-primary-fg;
&: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;
}
}
&.disabled, &[disabled] {
box-shadow: none;
background: $action-primary-disabled-bg; // needed for IE currently
}
}
// secondary button
.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 {
background: transparent;
// dimensions needed for course about page on marketing site
.wrapper-view {
overflow: hidden;
}
// button elements - not a better place to put these, sadly
.btn {
@include box-sizing('border-box');
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 {
@extend .btn;
@include linear-gradient($m-blue-s1 5%, $m-blue-d1 95%);
// no hover state conventions to follow from marketing :/
&:hover, &:active {
}
}
.btn-secondary {
@extend .btn;
@include linear-gradient($m-gray 5%, $m-gray-d1 95%);
// no hover state conventions to follow from marketing :/
&:hover, &:active {
}
}
.btn-tertiary {
@extend .btn;
background: $m-blue-l1;
color: $m-blue;
// no hover state conventions to follow from marketing :/
&:hover, &:active {
}
}
// nav list
.list-actions {
list-style: none;
@@ -78,31 +149,37 @@
}
.action {
font-size: 16px;
font-weight: 500;
// register or 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
&.is-registered, &.registration-closed {
@extend .btn-secondary;
@extend .m-btn-secondary;
pointer-events: none !important;
display: block;
}
// coming soon
&.coming-soon {
@extend .btn-tertiary;
@extend .m-btn-secondary;
pointer-events: none !important;
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-register .introduction header h1 {
@include login_register_h1_style;
@@ -110,4 +187,4 @@
footer .references {
@include footer_references_style;
}
}

22
lms/static/sass/base/_mixins.scss
View File

@@ -1,10 +1,13 @@
@function em($pxval, $base: 16) {
@return #{$pxval / $base}em;
// mixins - font sizing
@mixin font-size($sizeValue: 16){
font-size: $sizeValue + px;
font-size: ($sizeValue/10) + rem;
}
// Line-height
@function lh($amount: 1) {
@return $body-line-height * $amount;
// mixins - line height
@mixin line-height($fontSize: auto){
line-height: ($fontSize*1.48) + px;
line-height: (($fontSize/10)*1.48) + rem;
}
// image-replacement hidden text
@@ -31,6 +34,15 @@
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

90
lms/static/sass/base/_variables.scss
View File

@@ -39,23 +39,36 @@ $outer-border-color: rgb(170, 170, 170);
$light-gray: #ddd;
$dark-gray: #333;
// edx.org-related
$m-gray-l1: rgb(203,203,203);
$m-gray-l2: rgb(246,246,246);
$m-gray: rgb(153,153,153);
$m-gray-d1: rgb(102,102,102);
$m-gray-d2: rgb(51,51,51);
$m-gray-a1: rgb(80,80,80);
$m-blue: rgb(65, 116, 170);
// $m-blue: rgb(85, 151, 221); (used in marketing redesign)
$m-blue-l1: rgb(85, 151, 221);
$m-blue-d1: shade($m-blue,15%);
$m-blue-s1: saturate($m-blue,15%);
$m-pink: rgb(204,51,102);
// edx.org marketing site variables
$m-gray: #8A8C8F;
$m-gray-l1: #97999B;
$m-gray-l2: #A4A6A8;
$m-gray-l3: #B1B2B4;
$m-gray-l4: #F5F5F5;
$m-gray-d1: #7D7F83;
$m-gray-d2: #707276;
$m-gray-d3: #646668;
$m-gray-d4: #050505;
$m-blue: #1AA1DE;
$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);
$base-font-color: rgb(60,60,60);
$baseFontColor: rgb(60,60,60);
$lighter-base-font-color: rgb(100,100,100);
@@ -74,10 +87,57 @@ $courseware-footer-border: none;
$courseware-footer-shadow: none;
$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-color: transparent;
$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-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));
@@ -104,7 +164,7 @@ $border-color-3: rgb(100,100,100);
$border-color-4: rgb(252,252,252);
$link-color: $blue;
$link-color-d1: $m-blue;
$link-color-d1: $m-blue-d2;
$link-hover: $pink;
$site-status-color: $pink;

5
lms/static/sass/multicourse/_account.scss
View File

@@ -37,7 +37,7 @@
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0 !important;
color: saturate($link-color-d1,15%);
color: $m-gray-d2;
}
.heading-5 {
@@ -390,7 +390,7 @@
@include clearfix();
button[type="submit"] {
@extend .button-primary;
@extend .m-btn-primary;
&:disabled, &.is-disabled {
opacity: 0.3;
@@ -431,7 +431,6 @@
margin: 0 0 ($baseline/4) 0;
font-size: em(14);
font-weight: 600;
color: $m-gray-d2 !important;
}
.message-copy {

22
lms/static/sass/shared/_header.scss
View File

@@ -278,26 +278,8 @@ header.global {
li {
display: inline-block;
a {
border-radius: 0;
@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;
}
.cta {
@extend .m-btn-primary;
}
}

2
lms/templates/courseware/mktg_course_about.html
View File

@@ -53,7 +53,7 @@
%elif allow_registration:
<a class="action action-register register" href="#">Register for <strong>${course.number}</strong></a>
%else:
<div class="action registration-closed">Registration Is Closed</div>
<div class="action registration-closed is-disabled">Registration Is Closed</div>
%endif
</li>
</ul>

10
lms/templates/mktg_iframe.html
View File

File diff suppressed because one or more lines are too long

18
lms/templates/register.html
View File

@@ -69,7 +69,7 @@
$submitButton.
removeClass('is-disabled').
removeProp('disabled').
html('Create my ${settings.PLATFORM_NAME} Account');
html('Create My ${settings.PLATFORM_NAME} Account');
}
else {
$submitButton.
@@ -141,32 +141,32 @@
</div>
<ol class="list-input">
% if ask_for_email:
<li class="field required text" id="field-email">
<label for="email">E-mail</label>
<input class="" id="email" type="email" name="email" value="" placeholder="example: username@domain.com" />
</li>
% endif
<li class="field required text" id="field-username">
<label for="username">Public Username</label>
<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>
</li>
% if ask_for_fullname:
<li class="field required text" id="field-name">
<label for="name">Full Name</label>
<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>
</li>
% endif
</ol>
% endif
@@ -282,7 +282,7 @@
</a>
</p>
</div>
% endif
## TODO: Use a %block tag or something to allow themes to