From 69c792f5e95c92ef736ce6b5109885f2314cde0c Mon Sep 17 00:00:00 2001 From: Brian Talbot Date: Wed, 24 Jul 2013 10:48:22 -0400 Subject: [PATCH] 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; } }