From b5fda6d26df1559b10d10a9dca4fadc78a43d601 Mon Sep 17 00:00:00 2001 From: Brian Talbot Date: Wed, 24 Jul 2013 10:47:43 -0400 Subject: [PATCH 1/6] edx.org: adds in variables/mixins to support edx.org visual changes --- lms/static/sass/base/_mixins.scss | 22 +++++++++++---- lms/static/sass/base/_variables.scss | 40 +++++++++++++++++++--------- 2 files changed, 44 insertions(+), 18 deletions(-) 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..b7dd620f8a 100644 --- a/lms/static/sass/base/_variables.scss +++ b/lms/static/sass/base/_variables.scss @@ -39,19 +39,33 @@ $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); From 5f15e4227e00c66e24167a5752f1941f0623e202 Mon Sep 17 00:00:00 2001 From: Brian Talbot Date: Wed, 24 Jul 2013 10:48:22 -0400 Subject: [PATCH 2/6] edx.org: applies edx.org visual changes (with overrides/new mixins) --- lms/static/sass/_shame.scss | 200 +++++++++++++++------- lms/static/sass/multicourse/_account.scss | 9 +- lms/static/sass/shared/_header.scss | 22 +-- 3 files changed, 143 insertions(+), 88 deletions(-) diff --git a/lms/static/sass/_shame.scss b/lms/static/sass/_shame.scss index ac6ac24b41..041c42a66f 100644 --- a/lms/static/sass/_shame.scss +++ b/lms/static/sass/_shame.scss @@ -2,70 +2,134 @@ // 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-primary { + @extend .m-btn; + @extend .m-btn-edged; + border: none; + padding:($baseline/2) ($baseline); + text-align: center; + text-shadow: none; + font-weight: 500; + + &.disabled, &[disabled] { + background: $m-gray-d3; + } +} + +// blue primary button +.m-btn-primary-blue { + @extend .m-btn-primary; + box-shadow: 0 2px 1px 0 $m-blue-d4; + background: $m-blue-d3; + color: $white; + + &:hover, &:active { + background: $m-blue-d1; + } + + &.current, &.active { + box-shadow: inset 0 2px 1px 1px $m-blue-d2; + background: $m-blue; + color: $m-blue-d2; + + &:hover, &:active { + box-shadow: inset 0 2px 1px 1px $m-blue-d3; + color: $m-blue-d3; + } + } + + &.disabled, &[disabled] { + box-shadow: none; + } +} + +// pink primary button +.m-btn-primary-pink { + @extend .m-btn-primary; + box-shadow: 0 2px 1px 0 $m-pink-d2; + background: $m-pink; + color: $white; + + &:hover, &:active { + background: $m-pink-l3; + } + + &.current, &.active { + box-shadow: inset 0 2px 1px 1px $m-pink-d1; + background: $m-pink-l2; + color: $m-pink-d1; + + &:hover, &:active { + box-shadow: inset 0 2px 1px 1px $m-pink-d2; + color: $m-pink-d3; + } + } + + &.disabled, &[disabled] { + box-shadow: none; + } +} + + +// ==================== + +// 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 +142,37 @@ } .action { + @include font-size(16); + font-weight: 500; // register or access courseware &.action-register, &.access-courseware { - @extend .btn-primary; + @extend .m-btn-primary-blue; + display: block; } // already registered but course not started or registration is closed &.is-registered, &.registration-closed { - @extend .btn-secondary; + @extend .m-btn-primary-pink; pointer-events: none !important; + display: block; } // coming soon &.coming-soon { - @extend .btn-tertiary; + @extend .m-btn-primary-pink; 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 +180,4 @@ footer .references { @include footer_references_style; -} \ No newline at end of file +} diff --git a/lms/static/sass/multicourse/_account.scss b/lms/static/sass/multicourse/_account.scss index 9de0a1fca8..eeda917d46 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,11 @@ @include clearfix(); button[type="submit"] { - @extend .button-primary; + @extend .m-btn-primary-blue; + // needed, but bad overrides + text-transform: none; + vertical-align: middle; + font-weight: 600; &:disabled, &.is-disabled { opacity: 0.3; @@ -431,7 +435,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..90aa7c6fa6 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-blue; } } From cc95d004b5df0b06db35b5a4727744b1e3729f34 Mon Sep 17 00:00:00 2001 From: Brian Talbot Date: Wed, 24 Jul 2013 11:39:40 -0400 Subject: [PATCH 3/6] edx.org: handles letter-spacing on buttons --- lms/static/sass/multicourse/_account.scss | 4 ---- 1 file changed, 4 deletions(-) diff --git a/lms/static/sass/multicourse/_account.scss b/lms/static/sass/multicourse/_account.scss index eeda917d46..0daaf8c0ca 100644 --- a/lms/static/sass/multicourse/_account.scss +++ b/lms/static/sass/multicourse/_account.scss @@ -391,10 +391,6 @@ button[type="submit"] { @extend .m-btn-primary-blue; - // needed, but bad overrides - text-transform: none; - vertical-align: middle; - font-weight: 600; &:disabled, &.is-disabled { opacity: 0.3; From 3094471efc039b3a17a3ed52fe63a53cf6244656 Mon Sep 17 00:00:00 2001 From: Brian Talbot Date: Wed, 24 Jul 2013 11:40:37 -0400 Subject: [PATCH 4/6] edx.org: revises iframe-based register/status buttons to match revised styles --- lms/static/sass/_shame.scss | 11 +++++++++-- lms/templates/courseware/mktg_course_about.html | 2 +- lms/templates/mktg_iframe.html | 9 +-------- 3 files changed, 11 insertions(+), 11 deletions(-) diff --git a/lms/static/sass/_shame.scss b/lms/static/sass/_shame.scss index 041c42a66f..f67683afe4 100644 --- a/lms/static/sass/_shame.scss +++ b/lms/static/sass/_shame.scss @@ -43,9 +43,14 @@ text-align: center; text-shadow: none; font-weight: 500; + letter-spacing: 0; - &.disabled, &[disabled] { + &.disabled, &[disabled], &.is-disabled { background: $m-gray-d3; + + &:hover { + background: $m-gray-d3 !important; // needed for IE currently + } } } @@ -73,6 +78,7 @@ &.disabled, &[disabled] { box-shadow: none; + background: $m-gray-d3; // needed for IE currently } } @@ -100,6 +106,7 @@ &.disabled, &[disabled] { box-shadow: none; + background: $m-gray-d3; // needed for IE currently } } @@ -142,7 +149,7 @@ } .action { - @include font-size(16); + font-size: 16px; font-weight: 500; // register or access courseware 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..abaf466785 100644 --- a/lms/templates/mktg_iframe.html +++ b/lms/templates/mktg_iframe.html @@ -27,14 +27,7 @@ From 95478a3499c8f95d14f887f7f4007a7b326dbe31 Mon Sep 17 00:00:00 2001 From: Brian Talbot Date: Wed, 24 Jul 2013 11:52:25 -0400 Subject: [PATCH 5/6] edx.org: revising base link color variable to use darker value for accessibility --- lms/static/sass/base/_variables.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lms/static/sass/base/_variables.scss b/lms/static/sass/base/_variables.scss index b7dd620f8a..7c209705e8 100644 --- a/lms/static/sass/base/_variables.scss +++ b/lms/static/sass/base/_variables.scss @@ -118,7 +118,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; From d2eca92f93083d79d80c0c92bb2e1ccd8d4d39b4 Mon Sep 17 00:00:00 2001 From: Brian Talbot Date: Wed, 24 Jul 2013 14:56:27 -0400 Subject: [PATCH 6/6] edx.org: abstracting new edx.org button extends and colors with other themes in mind --- lms/static/sass/_shame.scss | 64 +++++++++++------------ lms/static/sass/base/_variables.scss | 48 ++++++++++++++++- lms/static/sass/multicourse/_account.scss | 2 +- lms/static/sass/shared/_header.scss | 2 +- lms/templates/mktg_iframe.html | 3 +- 5 files changed, 82 insertions(+), 37 deletions(-) diff --git a/lms/static/sass/_shame.scss b/lms/static/sass/_shame.scss index f67683afe4..8348a774d4 100644 --- a/lms/static/sass/_shame.scss +++ b/lms/static/sass/_shame.scss @@ -35,7 +35,7 @@ } // primary button -.m-btn-primary { +.m-btn-base { @extend .m-btn; @extend .m-btn-edged; border: none; @@ -46,67 +46,67 @@ letter-spacing: 0; &.disabled, &[disabled], &.is-disabled { - background: $m-gray-d3; + background: $action-primary-disabled-bg; &:hover { - background: $m-gray-d3 !important; // needed for IE currently + background: $action-primary-disabled-bg !important; // needed for IE currently } } } -// blue primary button -.m-btn-primary-blue { - @extend .m-btn-primary; - box-shadow: 0 2px 1px 0 $m-blue-d4; - background: $m-blue-d3; - color: $white; +// 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: $m-blue-d1; + background: $action-primary-focused-bg; } &.current, &.active { - box-shadow: inset 0 2px 1px 1px $m-blue-d2; - background: $m-blue; - color: $m-blue-d2; + 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 $m-blue-d3; - color: $m-blue-d3; + box-shadow: inset 0 2px 1px 1px $action-primary-active-focused-shadow; + color: $action-primary-active-focused-fg; } } &.disabled, &[disabled] { box-shadow: none; - background: $m-gray-d3; // needed for IE currently + background: $action-primary-disabled-bg; // needed for IE currently } } -// pink primary button -.m-btn-primary-pink { - @extend .m-btn-primary; - box-shadow: 0 2px 1px 0 $m-pink-d2; - background: $m-pink; - color: $white; +// 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: $m-pink-l3; + background: $action-secondary-focused-bg; } &.current, &.active { - box-shadow: inset 0 2px 1px 1px $m-pink-d1; - background: $m-pink-l2; - color: $m-pink-d1; + 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 $m-pink-d2; - color: $m-pink-d3; + box-shadow: inset 0 2px 1px 1px $action-secondary-active-focused-shadow; + color: $action-secondary-active-focused-fg; } } &.disabled, &[disabled] { box-shadow: none; - background: $m-gray-d3; // needed for IE currently + background: $action-secondary-disabled-bg; // needed for IE currently } } @@ -154,20 +154,20 @@ // register or access courseware &.action-register, &.access-courseware { - @extend .m-btn-primary-blue; + @extend .m-btn-primary; display: block; } // already registered but course not started or registration is closed &.is-registered, &.registration-closed { - @extend .m-btn-primary-pink; + @extend .m-btn-secondary; pointer-events: none !important; display: block; } // coming soon &.coming-soon { - @extend .m-btn-primary-pink; + @extend .m-btn-secondary; pointer-events: none !important; outline: none; display: block; diff --git a/lms/static/sass/base/_variables.scss b/lms/static/sass/base/_variables.scss index 7c209705e8..48c62bbb4c 100644 --- a/lms/static/sass/base/_variables.scss +++ b/lms/static/sass/base/_variables.scss @@ -69,7 +69,6 @@ $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); @@ -88,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)); diff --git a/lms/static/sass/multicourse/_account.scss b/lms/static/sass/multicourse/_account.scss index 0daaf8c0ca..2ec9f50dba 100644 --- a/lms/static/sass/multicourse/_account.scss +++ b/lms/static/sass/multicourse/_account.scss @@ -390,7 +390,7 @@ @include clearfix(); button[type="submit"] { - @extend .m-btn-primary-blue; + @extend .m-btn-primary; &:disabled, &.is-disabled { opacity: 0.3; diff --git a/lms/static/sass/shared/_header.scss b/lms/static/sass/shared/_header.scss index 90aa7c6fa6..3f2daccf52 100644 --- a/lms/static/sass/shared/_header.scss +++ b/lms/static/sass/shared/_header.scss @@ -279,7 +279,7 @@ header.global { display: inline-block; .cta { - @extend .m-btn-primary-blue; + @extend .m-btn-primary; } } diff --git a/lms/templates/mktg_iframe.html b/lms/templates/mktg_iframe.html index abaf466785..97a23d0e5f 100644 --- a/lms/templates/mktg_iframe.html +++ b/lms/templates/mktg_iframe.html @@ -27,8 +27,7 @@