Skip to content

E
edx-platform
Commit 52403420 by marco
Options

cleaned up variables styling to sync up closer to studio, incorporated… 

cleaned up variables styling to sync up closer to studio, incorporated fontawesome icons into discusison home with basic positioning
parent 23f19423
Showing with 181 additions and 17 deletions
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;
......
lms/static/sass/base/_variables.scss
// 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);
......
lms/templates/discussion/index.html
......@@ -45,21 +45,44 @@
<section class="home-helpgrid">
<ul class="helpgrid-list">
<li class="helpgrid-row helpgrid-row-navigation">
<span class="row-title">Navigation</span>
<span class="row-title">Find discussions</span>
<div class="row-item">
<i class="icon icon-sort-down"></i>Focus in on specific topics
<i class="icon icon-sort-down"></i>
<span class="row-description">Focus in on specific topics</span>
</div>
<div class="row-item"><i class="icon icon-search"></i>Search for specific posts</div>
<div class="row-item"><i class="icon icon-sort"></i>Sort by date, vote, or comments</div>
<div class="row-item">
<i class="icon icon-search"></i>
<span class="row-description">Search for specific posts </span>
</div>
<div class="row-item">
<i class="icon icon-sort"></i>
<span class="row-description">Sort by date, vote, or comments </span>
</div>
</li>
<li class="helpgrid-row helpgrid-row-participation">
<span class="row-title">Participation</span>
<div class="row-item"><i class="icon icon-plus"></i>Upvote posts and good responses</div>
<div class="row-item"><i class="icon icon-flag"></i>Report Forum Misuse</div>
<div class="row-item"><i class="icon icon-star"></i>Follow posts for updates</div>
<span class="row-title">Engage with posts</span>
<div class="row-item">
<i class="icon icon-plus"></i>
<span class="row-description">Upvote posts and good responses</span>
</div>
<div class="row-item">
<i class="icon icon-flag"></i>
<span class="row-description">Report Forum Misuse</span>
</div>
<div class="row-item">
<i class="icon icon-star"></i>
<span class="row-description">Follow posts for updates</span>
</div>
</li>
<li class="helpgrid-row helpgrid-row-notification">
<span class="row-title">Notification</span>
<span class="row-title">Reconnect through email</span>
<div class="row-item-full">
<span class="icon-stack">
<i class="icon-sign-blank icon-stack-base"></i>
<i class="icon-envelope icon-light"></i>
</span>
<span class="row-description">If enabled, you will receive an email digest of all the posts you are following which have new content you haven&#39;t seen or already been emailed about. </span>
</div>
</li>
</ul>
</section>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment