From 27fce3e473dcf58ea7e1c3f947ad3c68206b5e63 Mon Sep 17 00:00:00 2001 From: Giulio Gratta Date: Fri, 31 May 2013 16:32:51 -0700 Subject: [PATCH] SASS diff from stanford themed branch for master --- lms/static/sass/base/_variables.scss | 25 ++++++- .../course/layout/_courseware_header.scss | 2 +- lms/static/sass/course/layout/_footer.scss | 1 - lms/static/sass/multicourse/_account.scss | 65 +++++++++++-------- .../sass/multicourse/_course_about.scss | 2 +- lms/static/sass/multicourse/_courses.scss | 2 +- lms/static/sass/multicourse/_home.scss | 2 +- lms/static/sass/shared/_footer.scss | 16 ++--- lms/static/sass/shared/_header.scss | 14 ++-- 9 files changed, 79 insertions(+), 50 deletions(-) diff --git a/lms/static/sass/base/_variables.scss b/lms/static/sass/base/_variables.scss index 2d0021c642..35629afbf9 100644 --- a/lms/static/sass/base/_variables.scss +++ b/lms/static/sass/base/_variables.scss @@ -63,10 +63,10 @@ $text-color: $dark-gray; $body-bg: rgb(250,250,250); $header-image: linear-gradient(-90deg, rgba(255,255,255, 1), rgba(230,230,230, 0.9)); -$header-bg: transparent; +$header-bg: $white; $courseware-header-image: linear-gradient(top, #fff, #eee); $courseware-header-bg: transparent; -$footer-bg: transparent; +$footer-bg: $white; $courseware-footer-border: none; $courseware-footer-shadow: none; $courseware-footer-margin: 0px; @@ -118,9 +118,30 @@ $sidebar-active-image: linear-gradient(top, #e6e6e6, #d6d6d6); $form-bg-color: #fff; $modal-bg-color: rgb(245,245,245); +//TOP HEADER IMAGE MARGIN +$header_image_margin: -69px; + +//FOOTER MARGIN +$footer_margin: ($baseline/4) 0 ($baseline*1.5) 0; + //----------------- // CSS BG Images //----------------- $homepage-bg-image: '../images/homepage-bg.jpg'; +$login-banner-image: 'transparent url("../images/bg-banner-login.png") 0 0 no-repeat'; +$register-banner-image: 'transparent url("../images/bg-banner-register.png") 0 0 no-repeat'; + $video-thumb-url: '../images/courses/video-thumb.jpg'; + +//----------------- +// Mixin Styles +// +// THIS MIGHT BE A GOOD WAY TO DEAL WITH LARGE CHUNKS OF SASS THAT WE WANT TO ALLOW THEMING ON... +// WE MAY WANT TO SEPERATE THEM OUT INTO ITS OWN "MIXINS" SCSS FILE +//----------------- +@mixin login_register_h1_style {} + +@mixin footer_references_style { + margin: -10px 0 0 0; +} diff --git a/lms/static/sass/course/layout/_courseware_header.scss b/lms/static/sass/course/layout/_courseware_header.scss index 9650dabc95..b1c14f930a 100644 --- a/lms/static/sass/course/layout/_courseware_header.scss +++ b/lms/static/sass/course/layout/_courseware_header.scss @@ -65,7 +65,7 @@ header.global.slim { height: auto; padding: 5px 0 10px 0; border-bottom: 1px solid $outer-border-color; - background: $white; + background: $header-bg; .guest .secondary { margin-right: 0; diff --git a/lms/static/sass/course/layout/_footer.scss b/lms/static/sass/course/layout/_footer.scss index 699846e781..8dc0ae540d 100644 --- a/lms/static/sass/course/layout/_footer.scss +++ b/lms/static/sass/course/layout/_footer.scss @@ -1,5 +1,4 @@ footer { - border: $courseware-footer-border; box-shadow: $courseware-footer-shadow; margin-top: $courseware-footer-margin; } \ No newline at end of file diff --git a/lms/static/sass/multicourse/_account.scss b/lms/static/sass/multicourse/_account.scss index 5147b6a09b..7d3a3c5696 100644 --- a/lms/static/sass/multicourse/_account.scss +++ b/lms/static/sass/multicourse/_account.scss @@ -6,7 +6,7 @@ // page-level .view-register, .view-login, .view-passwordreset { - background: $white; + background: $body-bg; @@ -20,16 +20,16 @@ .heading-2 { font-size: 25px; margin: 0 0 $baseline 0; - font-weight: 300; + font-weight: bold; text-transform: uppercase; - color: $m-blue; + color: $link-color; } .heading-3 { font-size: 21px; margin: 0 0 $baseline 0; font-weight: 300; - color: $m-gray-d2; + color: $base-font-color; } .heading-4 { @@ -37,7 +37,7 @@ font-weight: 600; text-transform: uppercase; letter-spacing: 0 !important; - color: $m-blue-s1; + color: saturate($link-color,15%); } .heading-5 { @@ -48,7 +48,7 @@ font-size: 18px; margin: 0 0 $baseline 0; font-weight: 300; - color: $m-gray-a1; + color: $base-font-color; font-family: 'Open Sans', sans-serif; line-height: lh(1.1); } @@ -56,18 +56,18 @@ .body-text { font-size: 15px; margin: 0 0 $baseline 0; - color: $m-gray-a1; + color: $base-font-color; line-height: lh(1); } // specific examples - buttons .button-primary { @include border-radius(0); - @include linear-gradient($m-blue-s1 5%, $m-blue-d1 95%); + @include linear-gradient(saturate($link-color,15%) 5%, shade($link-color,15%) 95%); display: inline-block; padding: $baseline/2 $baseline*2.5; text-transform: lowercase; - color: $white; + color: $very-light-text; letter-spacing: 0.1rem; font-weight: 500; cursor: pointer; @@ -80,11 +80,11 @@ } .button-secondary { - @include linear-gradient($m-gray 5%, $m-gray-d1 95%); + @include linear-gradient($outer-border-color 5%, $lighter-base-font-color 95%); display: inline-block; padding: $baseline/2 $baseline*2.5; text-transform: lowercase; - color: $white; + color: $very-light-text; letter-spacing: 0.1rem; font-weight: 600; cursor: pointer; @@ -98,7 +98,7 @@ // layout .content-wrapper { - background: $m-gray-l2; + background: $content-wrapper-bg; padding-bottom: 0; } @@ -107,7 +107,7 @@ @include clearfix; margin: 0 auto; width: 960px; - background: $white; + background: $body-bg; } .container { @@ -139,17 +139,18 @@ } a { - @include transition(color 0.15s ease-in-out, border 0.15s ease-in-out); + @include transition($link-color 0.15s ease-in-out, border 0.15s ease-in-out); &:link, &:visited, &:hover, &:active { - color: $m-blue; + color: $link-color; + font-weight: bold; text-decoration: none !important; font-family: $sans-serif; } &:hover, &:active { - border-bottom: 1px dotted $m-blue-l1; - color: $m-blue-l1; + border-bottom: 1px solid saturate($link-color,15%); + color: saturate($link-color,15%); } } @@ -254,20 +255,20 @@ font-family: $sans-serif; font-style: normal; font-weight: 500; - color: $m-gray-d2; + color: $base-font-color; } label { - @include transition(color 0.15s ease-in-out); + @include transition($link-color 0.15s ease-in-out); margin: 0 0 ($baseline/4) 0; color: tint($black, 20%); } .tip { - @include transition(color 0.15s ease-in-out); + @include transition($link-color 0.15s ease-in-out); display: block; margin-top: ($baseline/4); - color: tint($m-gray, 50%); + color: tint($outer-border-color, 50%); font-size: em(13); } @@ -330,7 +331,7 @@ } textarea, input { - background: $white; + background: $body-bg; color: rgba(0,0,0,.25); } } @@ -339,11 +340,11 @@ &.is-focused { label { - color: $m-blue-l1; + color: saturate($link-color,15%); } .tip { - color: $m-blue-l1; + color: saturate($link-color,15%); } } @@ -461,7 +462,7 @@ // misc .orn-plus { - color: $white; + color: $very-light-text; padding: 0 $baseline/4; } @@ -492,7 +493,11 @@ header { height: 120px; border-bottom: 1px solid $m-gray; - background: transparent url("../images/bg-banner-login.png") 0 0 no-repeat; + background: $login-banner-image; + + h1 { + @include login_register_h1_style; + } } } } @@ -507,13 +512,17 @@ height: 120px; border-bottom: 1px solid $m-gray; background: transparent url("../images/bg-banner-register.png") 0 0 no-repeat; + + h1 { + @include login_register_h1_style; + } } } } // password reset .view-passwordreset { - background: $m-gray-l2; + background: $sidebar-color; header.global { @@ -543,7 +552,7 @@ .inner-wrapper { @include border-radius(2px); - background: $white; + background: $body-bg; padding-bottom: 0 !important; } diff --git a/lms/static/sass/multicourse/_course_about.scss b/lms/static/sass/multicourse/_course_about.scss index 0008bf1efe..096ecd6db2 100644 --- a/lms/static/sass/multicourse/_course_about.scss +++ b/lms/static/sass/multicourse/_course_about.scss @@ -11,7 +11,7 @@ border-bottom: 1px solid $border-color-3; @include box-shadow(inset 0 1px 5px 0 rgba(0,0,0, 0.1)); height: 280px; - margin-top: -69px; + margin-top: $header_image_margin; padding-top: 150px; overflow: hidden; position: relative; diff --git a/lms/static/sass/multicourse/_courses.scss b/lms/static/sass/multicourse/_courses.scss index ac31da4d2a..83680c06a0 100644 --- a/lms/static/sass/multicourse/_courses.scss +++ b/lms/static/sass/multicourse/_courses.scss @@ -10,7 +10,7 @@ border-bottom: 1px solid $border-color-3; @include box-shadow(inset 0 -1px 8px 0 rgba(0,0,0, 0.2), inset 0 1px 12px 0 rgba(0,0,0, 0.3)); height: 430px; - margin-top: -69px; + margin-top: $header_image_margin; width: 100%; .inner-wrapper { diff --git a/lms/static/sass/multicourse/_home.scss b/lms/static/sass/multicourse/_home.scss index d4def21f5c..05285262f5 100644 --- a/lms/static/sass/multicourse/_home.scss +++ b/lms/static/sass/multicourse/_home.scss @@ -15,7 +15,7 @@ @include clearfix; height: 460px; overflow: hidden; - margin-top: -69px; + margin-top: $header_image_margin; padding: 0px; width: flex-grid(12); diff --git a/lms/static/sass/shared/_footer.scss b/lms/static/sass/shared/_footer.scss index 864cf57d03..55d9d07fd7 100644 --- a/lms/static/sass/shared/_footer.scss +++ b/lms/static/sass/shared/_footer.scss @@ -2,7 +2,7 @@ @include box-shadow(0 -1px 5px 0 rgba(0,0,0, 0.1)); border-top: 1px solid tint($m-gray,50%); padding: 25px ($baseline/2) ($baseline*1.5) ($baseline/2); - background: $white; + background: $footer-bg; footer { @include clearfix(); @@ -16,18 +16,18 @@ } a { - @include transition(color 0.15s ease-in-out, border 0.15s ease-in-out); + @include transition(link-color 0.15s ease-in-out, border 0.15s ease-in-out); &:link, &:visited, &:hover, &:active { border-bottom: none; - color: $m-blue; + color: $link-color; text-decoration: none !important; font-family: $sans-serif; } &:hover, &:active { - border-bottom: 1px dotted $m-blue-s1; - color: $m-blue-s1; + border-bottom: 1px dotted $link-color; + color: $link-color; } } @@ -39,7 +39,7 @@ .nav-colophon { @include clearfix(); - margin: ($baseline/4) 0 ($baseline*1.5) 0; + margin: $footer_margin; li { float: left; @@ -49,7 +49,7 @@ color: tint($black, 20%); &:hover, &:active { - color: $m-blue-s1; + color: $link-color; } } @@ -82,7 +82,7 @@ // references .references { - margin: -10px 0 0 0; + @include footer_references_style; width: flex-grid(4,12); float: right; diff --git a/lms/static/sass/shared/_header.scss b/lms/static/sass/shared/_header.scss index e49accf904..d791a0cc09 100644 --- a/lms/static/sass/shared/_header.scss +++ b/lms/static/sass/shared/_header.scss @@ -1,7 +1,7 @@ header.global { border-bottom: 1px solid $m-gray; @include box-shadow(0 1px 5px 0 rgba(0,0,0, 0.1)); - background: $white; + background: $header-bg; height: 76px; position: relative; width: 100%; @@ -246,12 +246,12 @@ header.global { a { display:block; padding: ($baseline/4); - color: $m-gray-d1; + color: $lighter-base-font-color; font-weight: 600; &:hover, &:active { text-decoration: none; - color: $m-blue-s1; + color: $link-color; } } @@ -259,7 +259,7 @@ header.global { a { text-decoration: none; - color: $m-blue-s1; + color: $link-color; } } } @@ -280,11 +280,11 @@ header.global { a { @include border-radius(0); - @include linear-gradient($m-blue-s1 5%, $m-blue-d1 95%); + @include linear-gradient(shade($link-color,15%) 5%, saturate($link-color,15%) 95%); display: inline-block; padding: $baseline/2 $baseline*2.5; text-transform: lowercase; - color: $white; + color: $very-light-text; letter-spacing: 0.1rem; font-weight: 300; cursor: pointer; @@ -324,6 +324,6 @@ header.global { a { text-decoration: none; - color: $m-blue-s1 !important; + color: $link-color !important; } }