From 52403420fdd4e458f7582913b51740ee93fbc18d Mon Sep 17 00:00:00 2001 From: marco Date: Wed, 5 Jun 2013 15:17:19 -0400 Subject: [PATCH] cleaned up variables styling to sync up closer to studio, incorporated fontawesome icons into discusison home with basic positioning --- lms/static/sass/_discussion.scss | 39 ++++++++- lms/static/sass/base/_variables.scss | 118 ++++++++++++++++++++++++++- lms/templates/discussion/index.html | 41 ++++++++-- 3 files changed, 181 insertions(+), 17 deletions(-) diff --git a/lms/static/sass/_discussion.scss b/lms/static/sass/_discussion.scss index d48d819b64..87cde17c10 100644 --- a/lms/static/sass/_discussion.scss +++ b/lms/static/sass/_discussion.scss @@ -1363,26 +1363,57 @@ body.discussion { .row-title { padding: $baseline; display: inline-block; - width: 20%; + width: 15%; background-color: $light-gray; + font-size: 12px; } - .row-item { + .row-item-full, .row-item { display: inline-block; font-size: 12px; - width: 20%; + width: 25%; vertical-align: middle; - i.icon { + .icon { padding: 0 $baseline/2; font-size: 24px; display: inline-block; + vertical-align: middle; } + .row-description { + display: inline-block; + width: 70%; + vertical-align: middle; + } + } + + .row-item-full { + width: 70%; + + .row-description { + width: 90%; + } } } } + .helpgrid-row-navigation { + .icon-sort-down {color: $light-gray;} + .icon-search {color: $light-gray;} + .icon-sort {color: $light-gray;} + } + + .helpgrid-row-participation { + .icon-plus {color: $green-u2;} + .icon-flag {color: $red-u2;} + .icon-star {color: $blue;} + } + + .helpgrid-row-notification { + .icon-sign-blank {color: $green;} + } + .discussion-article { position: relative; padding: 40px; diff --git a/lms/static/sass/base/_variables.scss b/lms/static/sass/base/_variables.scss index aae4b47687..e3131a68b4 100644 --- a/lms/static/sass/base/_variables.scss +++ b/lms/static/sass/base/_variables.scss @@ -1,5 +1,9 @@ +// lms - utilities - variables +// ==================== + $baseline: 20px; +// grid $gw-column: 80px; $gw-gutter: 20px; @@ -9,6 +13,9 @@ $fg-max-columns: 12; $fg-max-width: 1400px; $fg-min-width: 810px; +// ==================== + +// fonts $sans-serif: 'Open Sans', $verdana; $monospace: Monaco, 'Bitstream Vera Sans Mono', 'Lucida Console', monospace; $body-font-family: $sans-serif; @@ -22,12 +29,115 @@ $base-font-color: rgb(60,60,60); $lighter-base-font-color: rgb(100,100,100); $very-light-text: #fff; -$white: rgb(255,255,255); +// ==================== + +// colors - new reorganized colors + $black: rgb(0,0,0); -$blue: rgb(29,157,217); -$pink: rgb(182,37,104); -$yellow: rgb(255, 252, 221); +$black-t0: rgba(0,0,0,0.125); +$black-t1: rgba(0,0,0,0.25); +$black-t2: rgba(0,0,0,0.50); +$black-t3: rgba(0,0,0,0.75); + +$white: rgb(255,255,255); +$white-t0: rgba(255,255,255,0.125); +$white-t1: rgba(255,255,255,0.25); +$white-t2: rgba(255,255,255,0.50); +$white-t3: rgba(255,255,255,0.75); + +$gray: rgb(127,127,127); +$gray-l1: tint($gray,20%); +$gray-l2: tint($gray,40%); +$gray-l3: tint($gray,60%); +$gray-l4: tint($gray,80%); +$gray-l5: tint($gray,90%); +$gray-l6: tint($gray,95%); +$gray-d1: shade($gray,20%); +$gray-d2: shade($gray,40%); +$gray-d3: shade($gray,60%); +$gray-d4: shade($gray,80%); + +//new blue +$pink: rgb(183,37,103); +$pink-l1: tint($pink,20%); +$pink-l2: tint($pink,40%); +$pink-l3: tint($pink,60%); +$pink-l4: tint($pink,80%); +$pink-l5: tint($pink,90%); +$pink-d1: shade($pink,20%); +$pink-d2: shade($pink,40%); +$pink-d3: shade($pink,60%); +$pink-d4: shade($pink,80%); +$pink-s1: saturate($pink,15%); +$pink-s2: saturate($pink,30%); +$pink-s3: saturate($pink,45%); +$pink-u1: desaturate($pink,15%); +$pink-u2: desaturate($pink,30%); +$pink-u3: desaturate($pink,45%); + $red: rgb(178, 6, 16); +$red-l1: tint($red,20%); +$red-l2: tint($red,40%); +$red-l3: tint($red,60%); +$red-l4: tint($red,80%); +$red-l5: tint($red,90%); +$red-d1: shade($red,20%); +$red-d2: shade($red,40%); +$red-d3: shade($red,60%); +$red-d4: shade($red,80%); +$red-s1: saturate($red,15%); +$red-s2: saturate($red,30%); +$red-s3: saturate($red,45%); +$red-u1: desaturate($red,15%); +$red-u2: desaturate($red,30%); +$red-u3: desaturate($red,45%); + +$green: rgb(37, 184, 90); +$green-l1: tint($green,20%); +$green-l2: tint($green,40%); +$green-l3: tint($green,60%); +$green-l4: tint($green,80%); +$green-l5: tint($green,90%); +$green-d1: shade($green,20%); +$green-d2: shade($green,40%); +$green-d3: shade($green,60%); +$green-d4: shade($green,80%); +$green-s1: saturate($green,15%); +$green-s2: saturate($green,30%); +$green-s3: saturate($green,45%); +$green-u1: desaturate($green,15%); +$green-u2: desaturate($green,30%); +$green-u3: desaturate($green,45%); + +//new yellow + +$orange: rgb(237, 189, 60); +$orange-l1: tint($orange,20%); +$orange-l2: tint($orange,40%); +$orange-l3: tint($orange,60%); +$orange-l4: tint($orange,80%); +$orange-l5: tint($orange,90%); +$orange-d1: shade($orange,20%); +$orange-d2: shade($orange,40%); +$orange-d3: shade($orange,60%); +$orange-d4: shade($orange,80%); +$orange-s1: saturate($orange,15%); +$orange-s2: saturate($orange,30%); +$orange-s3: saturate($orange,45%); +$orange-u1: desaturate($orange,15%); +$orange-u2: desaturate($orange,30%); +$orange-u3: desaturate($orange,45%); + +$shadow: rgba(0,0,0,0.2); +$shadow-l1: rgba(0,0,0,0.1); +$shadow-l2: rgba(0,0,0,0.05); +$shadow-d1: rgba(0,0,0,0.4); + +// ==================== + +// colors - old variables +$blue: rgb(29,157,217); //old blue +$yellow: rgb(255, 252, 221); //old yellow $error-red: rgb(253, 87, 87); $light-gray: rgb(221, 221, 221); $dark-gray: rgb(51, 51, 51); diff --git a/lms/templates/discussion/index.html b/lms/templates/discussion/index.html index cb4583c365..eddd6dda14 100644 --- a/lms/templates/discussion/index.html +++ b/lms/templates/discussion/index.html @@ -45,21 +45,44 @@