diff --git a/lms/static/sass/_shame.scss b/lms/static/sass/_shame.scss
index ac6ac24b41..8348a774d4 100644
--- a/lms/static/sass/_shame.scss
+++ b/lms/static/sass/_shame.scss
@@ -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;
-}
\ No newline at end of file
+}
diff --git a/lms/static/sass/base/_mixins.scss b/lms/static/sass/base/_mixins.scss
index 4060c36f5f..e2074f1976 100644
--- a/lms/static/sass/base/_mixins.scss
+++ b/lms/static/sass/base/_mixins.scss
@@ -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
diff --git a/lms/static/sass/base/_variables.scss b/lms/static/sass/base/_variables.scss
index c0bbcfb9ee..48c62bbb4c 100644
--- a/lms/static/sass/base/_variables.scss
+++ b/lms/static/sass/base/_variables.scss
@@ -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;
diff --git a/lms/static/sass/multicourse/_account.scss b/lms/static/sass/multicourse/_account.scss
index 9de0a1fca8..2ec9f50dba 100644
--- a/lms/static/sass/multicourse/_account.scss
+++ b/lms/static/sass/multicourse/_account.scss
@@ -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 {
diff --git a/lms/static/sass/shared/_header.scss b/lms/static/sass/shared/_header.scss
index 7da89ccc1c..3f2daccf52 100644
--- a/lms/static/sass/shared/_header.scss
+++ b/lms/static/sass/shared/_header.scss
@@ -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;
}
}
diff --git a/lms/templates/courseware/mktg_course_about.html b/lms/templates/courseware/mktg_course_about.html
index dc667c850c..8dedc70337 100644
--- a/lms/templates/courseware/mktg_course_about.html
+++ b/lms/templates/courseware/mktg_course_about.html
@@ -53,7 +53,7 @@
%elif allow_registration:
Register for ${course.number}
%else:
- Registration Is Closed
+ Registration Is Closed
%endif
diff --git a/lms/templates/mktg_iframe.html b/lms/templates/mktg_iframe.html
index 6d02f3fcc5..97a23d0e5f 100644
--- a/lms/templates/mktg_iframe.html
+++ b/lms/templates/mktg_iframe.html
@@ -27,15 +27,7 @@
diff --git a/lms/templates/register.html b/lms/templates/register.html
index 57a9ffa843..ec6bdd81bb 100644
--- a/lms/templates/register.html
+++ b/lms/templates/register.html
@@ -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 @@
-
+
% if ask_for_email:
-
-
+
% endif
-
+
-
Will be shown in any discussions or forums you participate in
-
+
% if ask_for_fullname:
-
+
-
Needed for any certificates you may earn (cannot be changed later)
-
+
% endif
-
+
% endif
@@ -282,7 +282,7 @@
-
+
% endif
## TODO: Use a %block tag or something to allow themes to