Skip to content

E
edx-platform
Commit 83defda7 by marco
Options

visual styling adjustments to discussion listing metadata, simplifying the… 

visual styling adjustments to discussion listing metadata, simplifying the visual representation of votes, increasing the line height of each post while also increasing the size of the icons for following and comments. visual styling adjustments also included for the discussion itself, pushing comments to be full width within a response, and small typography adjustments to the post count metadata and the add response button
parent dead7801
Showing with 295 additions and 222 deletions
lms/static/sass/_discussion.scss
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
@mixin blue-button { @mixin blue-button {
display: block; display: block;
height: 35px; height: 35px;
padding: 0 15px; padding: 0 ($baseline*.75);
border-radius: 3px; border-radius: 3px;
border: 1px solid #2d81ad; border: 1px solid #2d81ad;
@include linear-gradient(top, #6dccf1, #38a8e5); @include linear-gradient(top, #6dccf1, #38a8e5);
...@@ -23,18 +23,18 @@ ...@@ -23,18 +23,18 @@
} }
@mixin white-button { @mixin white-button {
@include linear-gradient(top, #eee, #ccc);
display: block; display: block;
height: 35px;
padding: 0 15px;
border-radius: 3px;
border: 1px solid #aaa; border: 1px solid #aaa;
@include linear-gradient(top, #eee, #ccc); border-radius: 3px;
font-size: 13px; padding: 0 ($baseline*.75);
height: 35px;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) inset, 0 1px 1px rgba(0, 0, 0, .15);
color: $dark-gray;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
font-weight: 700; font-weight: 700;
font-size: 13px;
line-height: 32px; line-height: 32px;
color: #333;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) inset, 0 1px 1px rgba(0, 0, 0, .15);
&:hover, &:focus { &:hover, &:focus {
@include linear-gradient(top, $white, #ddd); @include linear-gradient(top, $white, #ddd);
...@@ -44,14 +44,14 @@ ...@@ -44,14 +44,14 @@
@mixin dark-grey-button { @mixin dark-grey-button {
display: block; display: block;
height: 35px; height: 35px;
padding: 0 15px; padding: 0 ($baseline*.75);
border-radius: 3px; border-radius: 3px;
border: 1px solid #222; border: 1px solid #222;
background: -webkit-linear-gradient(top, #777, #555); background: -webkit-linear-gradient(top, #777, #555);
font-size: 13px; font-size: 13px;
font-weight: 700; font-weight: 700;
line-height: 32px; line-height: 32px;
color: #fff; color: $white;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.6); text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.6);
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) inset, 0 1px 1px rgba(0, 0, 0, .15); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) inset, 0 1px 1px rgba(0, 0, 0, .15);
...@@ -64,11 +64,11 @@ ...@@ -64,11 +64,11 @@
width: 100%; width: 100%;
height: 240px; height: 240px;
margin-top: 0; margin-top: 0;
padding: 10px; padding: ($baseline/2);
@include box-sizing(border-box); @include box-sizing(border-box);
border: 1px solid #aaa; border: 1px solid #aaa;
border-radius: 3px 3px 0 0; border-radius: 3px 3px 0 0;
background: #fff; background: $white;
font-family: 'Monaco', monospace; font-family: 'Monaco', monospace;
font-size: 13px; font-size: 13px;
line-height: 1.6; line-height: 1.6;
...@@ -116,11 +116,12 @@ ...@@ -116,11 +116,12 @@
// main styling // main styling
body.discussion { body.discussion {
// new post creation
.new-post-form-errors { .new-post-form-errors {
display: none; display: none;
background: $error-red; background: $error-red;
padding: 0; padding: 0;
border: 1px solid #333; border: 1px solid $dark-gray;
list-style: none; list-style: none;
color: $white; color: $white;
line-height: 1.6; line-height: 1.6;
...@@ -128,7 +129,7 @@ body.discussion { ...@@ -128,7 +129,7 @@ body.discussion {
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) inset, 0 1px 0 rgba(255, 255, 255, .2); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) inset, 0 1px 0 rgba(255, 255, 255, .2);
li { li {
padding: $baseline/2 $baseline 12px 45px; padding: ($baseline/2) $baseline 12px 45px;
border-bottom: 1px solid #dc4949; border-bottom: 1px solid #dc4949;
background: url(../images/white-error-icon.png) no-repeat 15px 14px; background: url(../images/white-error-icon.png) no-repeat 15px 14px;
...@@ -143,15 +144,10 @@ body.discussion { ...@@ -143,15 +144,10 @@ body.discussion {
.new-post-btn { .new-post-btn {
@include blue-button; @include blue-button;
font-size: 13px;
margin-right: 4px; margin-right: 4px;
} }
.new-post-icon { .new-post-icon {
display: block;
float: left;
width: 16px;
height: 17px;
margin: 8px 7px 0 0; margin: 8px 7px 0 0;
font-size: 16px; font-size: 16px;
vertical-align: middle; vertical-align: middle;
...@@ -170,10 +166,10 @@ body.discussion { ...@@ -170,10 +166,10 @@ body.discussion {
} }
.left-column { .left-column {
@include box-sizing(border-box);
float: left; float: left;
padding: ($baseline*2);
width: 32%; width: 32%;
padding: $baseline*2;
@include box-sizing(border-box);
.topic-dropdown-label { .topic-dropdown-label {
font-size: 22px; font-size: 22px;
...@@ -194,17 +190,17 @@ body.discussion { ...@@ -194,17 +190,17 @@ body.discussion {
.form-group-label { .form-group-label {
display: block; display: block;
padding-top: $baseline/4; padding-top: ($baseline/4);
color: $white; color: $white;
} }
.topic_dropdown_button { .topic_dropdown_button {
@include white-button;
position: relative; position: relative;
z-index: 1000; z-index: 1000;
@include white-button;
height: 40px;
margin-top: 15px; margin-top: 15px;
border-color: #444; border-color: #444;
height: 40px;
line-height: 36px; line-height: 36px;
.drop-arrow { .drop-arrow {
...@@ -223,7 +219,7 @@ body.discussion { ...@@ -223,7 +219,7 @@ body.discussion {
width: 100%; width: 100%;
@include box-sizing(border-box); @include box-sizing(border-box);
background: #797979; background: #797979;
border: 1px solid #333; border: 1px solid $dark-gray;
box-shadow: 0 2px 50px rgba(0, 0, 0, .4); box-shadow: 0 2px 50px rgba(0, 0, 0, .4);
} }
...@@ -233,7 +229,7 @@ body.discussion { ...@@ -233,7 +229,7 @@ body.discussion {
a { a {
display: block; display: block;
padding: $baseline/2 15px; padding: ($baseline/2) 15px;
border-top: 1px solid #5f5f5f; border-top: 1px solid #5f5f5f;
font-size: 14px; font-size: 14px;
font-weight: 700; font-weight: 700;
...@@ -276,7 +272,7 @@ body.discussion { ...@@ -276,7 +272,7 @@ body.discussion {
padding: 0 15px; padding: 0 15px;
@include box-sizing(border-box); @include box-sizing(border-box);
border-radius: 30px; border-radius: 30px;
border: 1px solid #333; border: 1px solid $dark-gray;
box-shadow: 0 1px 3px rgba(0, 0, 0, .25) inset; box-shadow: 0 1px 3px rgba(0, 0, 0, .25) inset;
background: -webkit-linear-gradient(top, #eee, $white); background: -webkit-linear-gradient(top, #eee, $white);
font-size: 11px; font-size: 11px;
...@@ -288,7 +284,7 @@ body.discussion { ...@@ -288,7 +284,7 @@ body.discussion {
.right-column { .right-column {
float: left; float: left;
width: 68%; width: 68%;
padding: $baseline*2; padding: ($baseline*2);
@include box-sizing(border-box); @include box-sizing(border-box);
} }
...@@ -303,7 +299,7 @@ body.discussion { ...@@ -303,7 +299,7 @@ body.discussion {
.edit-post-form { .edit-post-form {
@include clearfix; @include clearfix;
margin-bottom: $baseline*2; margin-bottom: ($baseline*2);
width: 100%; width: 100%;
@include box-sizing(border-box); @include box-sizing(border-box);
...@@ -318,14 +314,14 @@ body.discussion { ...@@ -318,14 +314,14 @@ body.discussion {
.post-cancel { .post-cancel {
@include white-button; @include white-button;
float: left; float: left;
margin: $baseline/2 0 0 15px; margin: ($baseline/2) 0 0 ($baseline*.75);
} }
.post-update { .post-update {
@include blue-button; @include blue-button;
float: left; float: left;
margin-top: $baseline/2; margin-top: ($baseline/2);
padding-bottom: 2px; padding-bottom: ($baseline/10);
height: 37px; height: 37px;
&:hover, &:focus { &:hover, &:focus {
...@@ -334,16 +330,16 @@ body.discussion { ...@@ -334,16 +330,16 @@ body.discussion {
} }
.edit-post-title { .edit-post-title {
width: 100%;
height: 40px;
padding: 0 10px;
@include box-sizing(border-box); @include box-sizing(border-box);
border-radius: 3px;
border: 1px solid #aaa; border: 1px solid #aaa;
border-radius: 3px;
padding: 0 ($baseline/2);
width: 100%;
height: 40px;
box-shadow: 0 1px 3px $shadow-l1 inset;
color: $dark-gray;
font-size: 16px; font-size: 16px;
font-family: $sans-serif; font-family: $sans-serif;
color: #333;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
} }
} }
...@@ -353,13 +349,12 @@ body.discussion { ...@@ -353,13 +349,12 @@ body.discussion {
} }
.new-post-form { .new-post-form {
width: 100%;
margin-bottom: 20px;
border-radius: 3px;
background: rgba(0, 0, 0, .55);
color: #fff;
box-shadow: 0 1px 2px rgba(0, 0, 0, .5) inset, 0 1px 0 rgba(255, 255, 255, .5);
@include clearfix; @include clearfix;
border-radius: 3px;
width: 100%;
background: $shadow-d2;
box-shadow: 0 1px 2px $shadow-d2 inset, 0 1px 0 rgba(255, 255, 255, .5);
color: $white;
.form-row { .form-row {
margin-bottom: $baseline; margin-bottom: $baseline;
...@@ -367,19 +362,12 @@ body.discussion { ...@@ -367,19 +362,12 @@ body.discussion {
.new-post-body .wmd-input { .new-post-body .wmd-input {
@include discussion-wmd-input; @include discussion-wmd-input;
@include box-sizing(border-box);
position: relative; position: relative;
width: 100%;
height: 200px;
z-index: 1; z-index: 1;
padding: 10px; width: 100%;
@include box-sizing(border-box); height: 150px;
border: 1px solid #333; background: $white;
border-radius: 3px 3px 0 0;
background: #fff;
font-family: 'Monaco', monospace;
font-size: 13px;
line-height: 1.6;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) inset;
} }
.new-post-body .wmd-preview-container { .new-post-body .wmd-preview-container {
...@@ -395,26 +383,24 @@ body.discussion { ...@@ -395,26 +383,24 @@ body.discussion {
} }
.new-post-title { .new-post-title {
width: 100%;
height: 40px;
padding: 0 10px;
@include box-sizing(border-box); @include box-sizing(border-box);
border: 1px solid $dark-gray;
border-radius: 3px; border-radius: 3px;
border: 1px solid #333; padding: 0 ($baseline/2);
font-size: 16px; width: 100%;
height: 40px;
box-shadow: 0 1px 3px $shadow inset;
color: $dark-gray;
font-weight: 700; font-weight: 700;
font-family: 'Open Sans', sans-serif;
color: #333;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) inset;
} }
.submit { .submit {
@include blue-button; @include blue-button;
float: left; float: left;
margin-top: $baseline/2; margin-top: ($baseline/2);
padding-bottom: 2px; border-color: $dark-gray;
padding-bottom: ($baseline/10);
height: 37px; height: 37px;
border-color: #333;
&:hover, &:focus { &:hover, &:focus {
border-color: #222; border-color: #222;
...@@ -424,16 +410,16 @@ body.discussion { ...@@ -424,16 +410,16 @@ body.discussion {
.new-post-cancel { .new-post-cancel {
@include white-button; @include white-button;
float: left; float: left;
margin: $baseline/2 0 0 15px; margin: ($baseline/2) 0 0 ($baseline*.75);
border-color: #444; border-color: #444;
} }
.options { .options {
margin-top: $baseline*2; margin-top: ($baseline*2);
label { label {
display: inline; display: inline;
margin-left: 8px; margin-left: ($baseline/2);
color: $white; color: $white;
text-shadow: none; text-shadow: none;
font-size: 15px; font-size: 15px;
...@@ -441,8 +427,6 @@ body.discussion { ...@@ -441,8 +427,6 @@ body.discussion {
} }
} }
.thread-title { .thread-title {
display: block; display: block;
margin-bottom: $baseline; margin-bottom: $baseline;
...@@ -451,17 +435,13 @@ body.discussion { ...@@ -451,17 +435,13 @@ body.discussion {
font-size: 21px; font-size: 21px;
} }
section.user-profile { section.user-profile {
@extend .sidebar; @extend .sidebar;
display: table-cell; display: table-cell;
border-radius: 3px 0 0 3px;
border-right: 1px solid #ddd; border-right: 1px solid #ddd;
box-shadow: none; border-radius: 3px 0 0 3px;
background-color: $sidebar-color; background-color: $sidebar-color;
box-shadow: none;
.user-profile { .user-profile {
padding: 32px 36px; padding: 32px 36px;
...@@ -502,10 +482,10 @@ body.discussion { ...@@ -502,10 +482,10 @@ body.discussion {
} }
.wmd-input { .wmd-input {
width: 100%;
height: 150px;
border: 1px solid #c8c8c8; border: 1px solid #c8c8c8;
border-radius: 3px 3px 0 0; border-radius: 3px 3px 0 0;
width: 100%;
height: 150px;
background-color: #e9e9e9; background-color: #e9e9e9;
font-style: normal; font-style: normal;
font-size: 0.8em; font-size: 0.8em;
...@@ -521,11 +501,8 @@ body.discussion { ...@@ -521,11 +501,8 @@ body.discussion {
@include transition(all .2s ease-out 0s); @include transition(all .2s ease-out 0s);
position: relative; position: relative;
overflow: hidden; overflow: hidden;
margin-top: $baseline/2; margin: ($baseline/2) ($baseline/4) ($baseline/4) ($baseline/4);
margin-right: 5px; padding: 0;
margin-bottom: 5px;
margin-left: 5px;
padding: 0px;
height: 20px; height: 20px;
} }
...@@ -547,9 +524,9 @@ body.discussion { ...@@ -547,9 +524,9 @@ body.discussion {
padding-left: 2px; padding-left: 2px;
width: 20px; width: 20px;
height: 20px; height: 20px;
background: none;
list-style: none; list-style: none;
cursor: pointer; cursor: pointer;
background: none;
} }
.wmd-button > span { .wmd-button > span {
...@@ -611,21 +588,21 @@ body.discussion { ...@@ -611,21 +588,21 @@ body.discussion {
} }
.container .discussion-body { .container .discussion-body {
@include clearfix;
display: block; display: block;
line-height: 1.4; border: none;
background: transparent; background: transparent;
box-shadow: none; box-shadow: none;
border: none; line-height: 1.4;
@include clearfix;
.sidebar { .sidebar {
@include box-sizing(border-box); @include box-sizing(border-box);
float: left; float: left;
width: 31%;
height: 550px;
border: 1px solid #aaa; border: 1px solid #aaa;
border-right: 1px solid #bcbcbc; border-right: 1px solid #bcbcbc;
border-radius: 3px; border-radius: 3px;
width: 31%;
height: 550px;
background: #f6f6f6; background: #f6f6f6;
box-shadow: 0 1px 2px rgba(0, 0, 0, .05); box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
} }
...@@ -633,9 +610,9 @@ body.discussion { ...@@ -633,9 +610,9 @@ body.discussion {
.browse-search { .browse-search {
position: relative; position: relative;
display: block; display: block;
height: 60px;
border-bottom: 1px solid #a3a3a3; border-bottom: 1px solid #a3a3a3;
border-radius: 3px 0 0 0; border-radius: 3px 0 0 0;
height: 60px;
.home, .browse, .home, .browse,
...@@ -986,8 +963,8 @@ body.discussion { ...@@ -986,8 +963,8 @@ body.discussion {
background-color: #ddd; background-color: #ddd;
.loading { .loading {
padding: 15px 0; padding: ($baseline*.75) 0;
background: #f6f6f6; background: $gray-l6;
.loading-animation { .loading-animation {
background-image: url(../images/spinner-on-grey.gif); background-image: url(../images/spinner-on-grey.gif);
...@@ -1012,7 +989,7 @@ body.discussion { ...@@ -1012,7 +989,7 @@ body.discussion {
float: left; float: left;
clear: both; clear: both;
width: 100%; width: 100%;
padding: 0 $baseline/2 0 18px; padding: 0 ($baseline/2) 0 18px;
margin-bottom: 1px; margin-bottom: 1px;
margin-right: -1px; margin-right: -1px;
@include linear-gradient(top, rgba(255, 255, 255, .7), rgba(255, 255, 255, 0)); @include linear-gradient(top, rgba(255, 255, 255, .7), rgba(255, 255, 255, 0));
...@@ -1057,11 +1034,11 @@ body.discussion { ...@@ -1057,11 +1034,11 @@ body.discussion {
display: block; display: block;
float: left; float: left;
width: 70%; width: 70%;
margin: 8px 0 $baseline/2; margin: ($baseline/2) 0 ($baseline/2);
font-size: 13px; font-size: 13px;
font-weight: 700; font-weight: 700;
line-height: 1.4; line-height: 1.4;
color: #333; color: $dark-gray;
} }
&.read { &.read {
...@@ -1088,7 +1065,7 @@ body.discussion { ...@@ -1088,7 +1065,7 @@ body.discussion {
position: absolute; position: absolute;
top: 0; top: 0;
right: 0; right: 0;
width: 10px; width: 12px;
height: 12px; height: 12px;
background: url(../images/following-flag.png) no-repeat; background: url(../images/following-flag.png) no-repeat;
} }
...@@ -1110,7 +1087,6 @@ body.discussion { ...@@ -1110,7 +1087,6 @@ body.discussion {
background-position: -13px -13px; background-position: -13px -13px;
} }
.votes-count,
.comments-count { .comments-count {
@include linear-gradient(top, #3994c7, #4da7d3); @include linear-gradient(top, #3994c7, #4da7d3);
color: $white; color: $white;
...@@ -1134,28 +1110,29 @@ body.discussion { ...@@ -1134,28 +1110,29 @@ body.discussion {
.comments-count { .comments-count {
display: block; display: block;
float: right; float: right;
width: 32px;
height: 16px;
margin-top: 8px; margin-top: 8px;
border-radius: 2px; border-radius: 2px;
@include linear-gradient(top, #d4d4d4, #dfdfdf); width: 36px;
font-size: 11px; height: 20px;
font-weight: 700;
line-height: 16px;
text-align: center;
color: #767676; color: #767676;
text-align: center;
font-size: 11px;
line-height: 20px;
} }
.comments-count { .comments-count {
@include linear-gradient(top, #d4d4d4, #dfdfdf);
position: relative; position: relative;
width: 25px; margin-left: ($baseline/4);
margin-left: 4px; margin-right:($baseline/4);
width: 28px;
font-weight: 700;
&:after { &:after {
content: ''; content: '';
display: block; display: block;
position: absolute; position: absolute;
top: 16px; top: 20px;
right: 3px; right: 3px;
width: 5px; width: 5px;
height: 5px; height: 5px;
...@@ -1358,6 +1335,7 @@ body.discussion { ...@@ -1358,6 +1335,7 @@ body.discussion {
.discussion-article { .discussion-article {
position: relative; position: relative;
min-height: 468px; min-height: 468px;
background-image: url(../images/bg-texture.png);
a { a {
word-wrap: break-word; word-wrap: break-word;
...@@ -1417,18 +1395,18 @@ body.discussion { ...@@ -1417,18 +1395,18 @@ body.discussion {
} }
.discussion-post { .discussion-post {
padding: $baseline*2 $baseline*2 $baseline $baseline*2; padding: ($baseline*2) ($baseline*2) $baseline ($baseline*2);
box-shadow: 0 2px 2px $shadow; box-shadow: 0 1px 3px $shadow;
background-color: $white;
border-radius: 3px 3px 0 0;
> header .vote-btn { > header .vote-btn {
position: relative; position: relative;
z-index: 100; z-index: 100;
margin-top: 5px; margin-top: ($baseline/4);
margin-left: $baseline*2; margin-left: ($baseline*2);
} }
.post-tools { .post-tools {
@include clearfix; @include clearfix;
margin-top: 15px; margin-top: 15px;
...@@ -1445,16 +1423,15 @@ body.discussion { ...@@ -1445,16 +1423,15 @@ body.discussion {
.responses { .responses {
list-style: none; list-style: none;
margin-top: $baseline; margin-top: $baseline;
padding: 0px $baseline*2; padding: 0px ($baseline*2);
> li { > li {
@include animation(fadeIn .3s);
position: relative; position: relative;
margin: 0 -10px 30px; margin: 0 -10px 30px;
padding: 26px 30px $baseline;
border-radius: 3px;
border: 1px solid #b2b2b2; border: 1px solid #b2b2b2;
box-shadow: 0 1px 3px rgba(0, 0, 0, .15); border-radius: 3px;
@include animation(fadeIn .3s); box-shadow: 0 0 1px $shadow;
&.staff { &.staff {
padding-top: 38px; padding-top: 38px;
...@@ -1508,28 +1485,34 @@ body.discussion { ...@@ -1508,28 +1485,34 @@ body.discussion {
} }
} }
.discussion-response {
@include box-sizing(border-box);
border-radius: 3px 3px 0 0;
padding: $baseline $baseline 0;
background-color: $white;
}
.posted-by { .posted-by {
font-weight: 700; font-weight: 700;
} }
} }
div.add-response { .add-response {
margin-top: $baseline; margin-top: $baseline;
padding: 0px 30px; padding: 0 ($baseline*1.5);
button.add-response-btn { .add-response-btn {
@include white-button; @include white-button;
@include linear-gradient(top, $white 35%, #ebebeb);
position: relative; position: relative;
padding: 0px 30px;
border: 1px solid #b2b2b2; border: 1px solid #b2b2b2;
box-shadow: 0 1px 3px rgba(0, 0, 0, .15); padding: 0 18px;
font-size: 13px;
text-align: left;
@include animation(fadeIn .3s);
width: 100%; width: 100%;
box-shadow: 0 1px 1px $shadow-l1;
text-align: left;
font-size: 13px;
span.add-response-btn-text { span.add-response-btn-text {
padding-left: 4px; padding-left: ($baseline/5);
} }
} }
} }
...@@ -1567,7 +1550,7 @@ body.discussion { ...@@ -1567,7 +1550,7 @@ body.discussion {
@include linear-gradient(top, #50cc5e, #3db84b); @include linear-gradient(top, #50cc5e, #3db84b);
color: $white; color: $white;
text-shadow: 0 1px 0 rgba(0, 0, 0, .3); text-shadow: 0 1px 0 rgba(0, 0, 0, .3);
box-shadow: 0 1px 0 rgba(255, 255, 255, .4) inset, 0 1px 2px rgba(0, 0, 0, .2); box-shadow: 0 1px 0 rgba(255, 255, 255, .4) inset, 0 1px 2px $shadow;
.plus-icon { .plus-icon {
background-position: 0 -10px; background-position: 0 -10px;
...@@ -1582,11 +1565,11 @@ body.discussion { ...@@ -1582,11 +1565,11 @@ body.discussion {
float: right; float: right;
width: 27px; width: 27px;
height: 27px; height: 27px;
margin-right: $baseline/2; margin-right: ($baseline/2);
border-radius: 27px; border-radius: 27px;
border: 1px solid #a0a0a0; border: 1px solid #a0a0a0;
@include linear-gradient(top, $white 35%, #ebebeb); @include linear-gradient(top, $white 35%, $gray-l4);
box-shadow: 0 1px 1px rgba(0, 0, 0, .1); box-shadow: 0 1px 1px $shadow-l1;
.check-icon { .check-icon {
display: block; display: block;
...@@ -1599,7 +1582,7 @@ body.discussion { ...@@ -1599,7 +1582,7 @@ body.discussion {
&.is-endorsed { &.is-endorsed {
border: 1px solid #4697c1; border: 1px solid #4697c1;
@include linear-gradient(top, #6dccf1, #38a8e5); @include linear-gradient(top, #6dccf1, #38a8e5);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1), 0 1px 0 rgba(255, 255, 255, .4) inset; box-shadow: 0 1px 1px $shadow-l1, 0 1px 0 rgba(255, 255, 255, .4) inset;
.check-icon { .check-icon {
background-position: 0 -12px; background-position: 0 -12px;
...@@ -1608,37 +1591,38 @@ body.discussion { ...@@ -1608,37 +1591,38 @@ body.discussion {
} }
blockquote { blockquote {
background: #f6f6f6; background: $gray-l5;
border-radius: 3px; border-radius: 3px;
padding: 5px $baseline/2; padding: ($baseline/4) ($baseline/2);
font-size: 14px; font-size: 14px;
} }
.comments { .comments {
list-style: none; margin: 0;
margin-top: $baseline; border-radius: 0 0 3px 3px;
padding: 0; padding: 0;
border-top: 1px solid #ddd; background: $gray-l6;
box-shadow: 0 1px 3px -1px $shadow inset;
list-style: none;
> li { > li {
background: #f6f6f6; border-top: 1px solid $gray-l4;
border-bottom: 1px solid #ddd;
padding: ($baseline/2) $baseline; padding: ($baseline/2) $baseline;
} }
blockquote { blockquote {
background: #e6e6e6; background: $gray-l4;
border-radius: 3px; border-radius: 3px;
padding: 5px $baseline/2; padding: ($baseline/4) ($baseline/2);
font-size: 14px; font-size: 14px;
} }
.comment-form { .comment-form {
background: #eee;
@include clearfix; @include clearfix;
.comment-form-input { .comment-form-input {
padding: 5px $baseline/2; padding: ($baseline/4) ($baseline/2);
background-color: $white; background-color: $white;
font-size: 14px; font-size: 14px;
} }
...@@ -1654,13 +1638,13 @@ body.discussion { ...@@ -1654,13 +1638,13 @@ body.discussion {
} }
.discussion-errors { .discussion-errors {
margin: 0px; margin: 0;
} }
} }
.response-body { .response-body {
font-size: 13px; font-size: 13px;
margin-bottom: $baseline/2; margin-bottom: ($baseline/2);
p + p { p + p {
margin-top: 12px; margin-top: 12px;
...@@ -1672,8 +1656,8 @@ body.discussion { ...@@ -1672,8 +1656,8 @@ body.discussion {
} }
.staff-label { .staff-label {
margin-left: 2px; margin-left: ($baseline/10);
padding: 0 4px; padding: 0 ($baseline/5);
border-radius: 2px; border-radius: 2px;
background: #009FE2; background: #009FE2;
font-size: 9px; font-size: 9px;
...@@ -1685,8 +1669,8 @@ body.discussion { ...@@ -1685,8 +1669,8 @@ body.discussion {
} }
.community-ta-label{ .community-ta-label{
margin-left: 2px; margin-left: ($baseline/10);
padding: 0 4px; padding: 0 ($baseline/5);
border-radius: 2px; border-radius: 2px;
background: #449944; background: #449944;
font-size: 9px; font-size: 9px;
...@@ -1697,7 +1681,7 @@ body.discussion { ...@@ -1697,7 +1681,7 @@ body.discussion {
} }
.comment-form { .comment-form {
padding: 8px $baseline; padding: ($baseline/2) 0;
.wmd-input { .wmd-input {
@include transition(all .2s linear 0s); @include transition(all .2s linear 0s);
...@@ -1715,11 +1699,11 @@ body.discussion { ...@@ -1715,11 +1699,11 @@ body.discussion {
.comment-form-input { .comment-form-input {
width: 100%; width: 100%;
height: 31px; height: 31px;
padding: 0 $baseline/2; padding: 0 ($baseline/2);
@include box-sizing(border-box); @include box-sizing(border-box);
border: 1px solid #b2b2b2; border: 1px solid #b2b2b2;
border-radius: 3px; border-radius: 3px;
box-shadow: 0 1px 3px rgba(0, 0, 0, .1) inset; box-shadow: 0 1px 3px $shadow-l1 inset;
@include transition(border-color .1s linear 0s); @include transition(border-color .1s linear 0s);
&:focus { &:focus {
...@@ -1729,27 +1713,28 @@ body.discussion { ...@@ -1729,27 +1713,28 @@ body.discussion {
.moderator-actions { .moderator-actions {
margin: 0; margin: 0;
margin-top: $baseline; padding: $baseline 0;
padding: 0;
@include clearfix; @include clearfix;
li { li {
float: left; float: left;
margin-right: 8px; margin-right: ($baseline/2);
list-style: none; list-style: none;
} }
a { a {
display: block; @include white-button;
height: 26px; height: 26px;
padding: 0 12px;
border-radius: 3px;
border: 1px solid #b2b2b2;
@include linear-gradient(top, $white 35%, #ebebeb); @include linear-gradient(top, $white 35%, #ebebeb);
font-size: 13px; font-size: 13px;
line-height: 24px; line-height: 24px;
color: #737373; color: #737373;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); font-weight: normal;
box-shadow: 0 1px 1px $shadow-l1;
&:hover, &:focus {
@include linear-gradient(top, $white 35%, #ddd);
}
.delete-icon { .delete-icon {
display: block; display: block;
...@@ -1776,7 +1761,7 @@ body.discussion { ...@@ -1776,7 +1761,7 @@ body.discussion {
.main-article.new { .main-article.new {
display: none; display: none;
padding: 50px; padding: ($baseline*2.5);
} }
.new-post-form { .new-post-form {
...@@ -1787,8 +1772,8 @@ body.discussion { ...@@ -1787,8 +1772,8 @@ body.discussion {
.new-post-form .submit { .new-post-form .submit {
@include blue-button; @include blue-button;
float: left; float: left;
margin-top: $baseline/2; margin-top: ($baseline/2);
padding-bottom: 2px; padding-bottom: ($baseline/10);
} }
.new-post-form .options { .new-post-form .options {
...@@ -1797,7 +1782,7 @@ body.discussion { ...@@ -1797,7 +1782,7 @@ body.discussion {
font-size: 14px; font-size: 14px;
label { label {
margin-left: 4px; margin-left: ($baseline/5);
} }
} }
...@@ -1806,7 +1791,7 @@ body.discussion { ...@@ -1806,7 +1791,7 @@ body.discussion {
.discussion-reply-new { .discussion-reply-new {
padding: 0.5*$baseline 30px $baseline; padding: $baseline ($baseline*1.5);
@include clearfix; @include clearfix;
@include transition(opacity .2s linear 0s); @include transition(opacity .2s linear 0s);
...@@ -1850,8 +1835,9 @@ body.discussion { ...@@ -1850,8 +1835,9 @@ body.discussion {
} }
} }
// ====================
// post actions -global
.global-discussion-actions { .global-discussion-actions {
height: 60px; height: 60px;
@include linear-gradient(top, #ebebeb, #d9d9d9); @include linear-gradient(top, #ebebeb, #d9d9d9);
...@@ -1859,8 +1845,9 @@ body.discussion { ...@@ -1859,8 +1845,9 @@ body.discussion {
border-bottom: 1px solid #bcbcbc; border-bottom: 1px solid #bcbcbc;
} }
// ====================
// inline discussion module and profile thread styling
.discussion-module { .discussion-module {
@extend .discussion-body; @extend .discussion-body;
position: relative; position: relative;
...@@ -1876,16 +1863,21 @@ body.discussion { ...@@ -1876,16 +1863,21 @@ body.discussion {
} }
div.add-response.post-extended-content { div.add-response.post-extended-content {
margin-top: $baseline;
margin-bottom: $baseline;
button.add-response-btn { button.add-response-btn {
@include white-button; @include white-button;
@include linear-gradient(top, $white 35%, #ebebeb);
position: relative; position: relative;
border: 1px solid #b2b2b2; padding-left: ($baseline*1.5);
box-shadow: 0 1px 3px rgba(0, 0, 0, .15);
font-size: 13px;
text-align: left;
@include animation(fadeIn .3s);
width: 100%; width: 100%;
padding-left: 30px; box-shadow: 0 1px 1px $shadow-l1;
text-align: left;
&:hover, &:focus {
@include linear-gradient(top, $white 35%, #ddd);
}
span.add-response-btn-text { span.add-response-btn-text {
padding-left: 4px; padding-left: 4px;
...@@ -1927,7 +1919,7 @@ body.discussion { ...@@ -1927,7 +1919,7 @@ body.discussion {
} }
section.discussion { section.discussion {
margin-top: 30px; margin-top: ($baseline*1.5);
.threads { .threads {
margin-top: $baseline; margin-top: $baseline;
...@@ -1949,7 +1941,7 @@ body.discussion { ...@@ -1949,7 +1941,7 @@ body.discussion {
} }
p { p {
margin-bottom: 0em; margin-bottom: 0;
} }
.discussion-article { .discussion-article {
...@@ -1958,6 +1950,9 @@ body.discussion { ...@@ -1958,6 +1950,9 @@ body.discussion {
border-radius: 3px; border-radius: 3px;
min-height: 0; min-height: 0;
background: $white; background: $white;
padding: 0;
box-shadow: 0 1px 0 $shadow;
@include transition(all .2s linear 0s);
.thread-wrapper { .thread-wrapper {
position: relative; position: relative;
...@@ -1970,8 +1965,6 @@ body.discussion { ...@@ -1970,8 +1965,6 @@ body.discussion {
} }
.discussion-post { .discussion-post {
margin: $baseline 0 0;
padding: 0 ($baseline*1.5) $baseline;
@include clearfix; @include clearfix;
.inline-comment-count { .inline-comment-count {
...@@ -1992,10 +1985,10 @@ body.discussion { ...@@ -1992,10 +1985,10 @@ body.discussion {
header { header {
padding-bottom: 0; padding-bottom: 0;
margin-bottom: 15px; margin-bottom: ($baseline*.75);
.posted-details { .posted-details {
margin-top: 4px; margin-top: ($baseline/5);
.username { .username {
display: inline; display: inline;
...@@ -2271,12 +2264,9 @@ body.discussion { ...@@ -2271,12 +2264,9 @@ body.discussion {
.wmd-button-row { .wmd-button-row {
position: relative; position: relative;
margin-left: 5px; margin: ($baseline/2) ($baseline/4) ($baseline/4) ($baseline/4);
margin-right: 5px; padding: 0;
margin-bottom: 5px; height: 30px;
margin-top: $baseline/2;
padding: 0px;
height: 20px;
overflow: hidden; overflow: hidden;
@include transition(all .2s ease-out 0s); @include transition(all .2s ease-out 0s);
} }
...@@ -2435,13 +2425,9 @@ body.discussion { ...@@ -2435,13 +2425,9 @@ body.discussion {
@extend .discussion-module @extend .discussion-module
} }
.group-visibility-label { // ====================
font-size: 12px;
color:#000;
font-style: italic;
background-color: $white;
}
// post actions - pinning
.discussion-pin { .discussion-pin {
font-size: 12px; font-size: 12px;
float:right; float:right;
...@@ -2470,7 +2456,7 @@ body.discussion { ...@@ -2470,7 +2456,7 @@ body.discussion {
margin-right:35px; margin-right:35px;
margin-top:13px; margin-top:13px;
opacity: 1.0; opacity: 1.0;
} }
.notpinned .icon { .notpinned .icon {
display: block; display: block;
...@@ -2507,10 +2493,13 @@ body.discussion { ...@@ -2507,10 +2493,13 @@ body.discussion {
display:none; display:none;
} }
// ====================
// post actions - flagging
.discussion-flag-abuse, .discussion-delete-comment, .discussion-edit-comment { .discussion-flag-abuse, .discussion-delete-comment, .discussion-edit-comment {
font-size: 12px; font-size: 12px;
float:right; float:right;
margin-left: $baseline/2; margin-left: ($baseline/2);
font-style: italic; font-style: italic;
cursor:pointer; cursor:pointer;
color: $dark-gray; color: $dark-gray;
...@@ -2523,7 +2512,7 @@ display:none; ...@@ -2523,7 +2512,7 @@ display:none;
.flag-label { .flag-label {
font-style: italic; font-style: italic;
margin-left: $baseline/4; margin-left: ($baseline/4);
} }
} }
...@@ -2531,31 +2520,56 @@ display:none; ...@@ -2531,31 +2520,56 @@ display:none;
color: $pink; color: $pink;
} }
// ====================
// post pagination
.response-count { .response-count {
margin-top: $baseline; margin-top: $baseline;
padding: 0px 3*$baseline; padding: 0 ($baseline*1.5);
color: $gray;
font-size: 14px;
} }
.response-pagination { .response-pagination {
padding: 0px 1.5*$baseline; visibility: visible;
padding: ($baseline/2) ($baseline*1.5);
background-color: $gray-l6;
box-shadow: 0 1px 1px $gray-l4 inset, 0 -1px 1px $gray-l4 inset;
&:empty {
visibility: hidden;
}
.response-display-count { .response-display-count {
display: block; display: block;
padding: 0.5*$baseline 1.5*$baseline; padding: ($baseline/2) 0;
color: $gray;
font-size: 14px;
} }
.load-response-button { .load-response-button {
display: block;
@include white-button; @include white-button;
font: normal 1em/1.6em $sans-serif; @include linear-gradient(top, $white 35%, #ebebeb);
position: relative; position: relative;
padding: 0px 1.5*$baseline; margin: ($baseline/2) 0;
margin: $baseline/2 0px;
border: 1px solid #b2b2b2; border: 1px solid #b2b2b2;
box-shadow: 0 1px 3px rgba(0, 0, 0, .15);
font-size: 13px;
text-align: left;
@include animation(fadeIn .3s);
width: 100%; width: 100%;
box-shadow: 0 1px 1px $shadow-l1;
text-align: left;
font-weight: normal;
span.add-response-btn-text {
padding-left: 4px;
}
} }
} }
// ====================
// post metadata - cohorts
.group-visibility-label {
font-size: 12px;
color:#000;
font-style: italic;
background-color: $white;
}
lms/static/sass/base/_variables.scss
...@@ -33,23 +33,88 @@ $very-light-text: #fff; ...@@ -33,23 +33,88 @@ $very-light-text: #fff;
// ==================== // ====================
// COLORS: misc. // COLORS
$black: rgb(0,0,0);
$black-t0: rgba($black, 0.125);
$black-t1: rgba($black, 0.25);
$black-t2: rgba($black, 0.5);
$black-t3: rgba($black, 0.75);
$white: rgb(255,255,255); $white: rgb(255,255,255);
$white-t0: rgba($white, 0.125); $white-t0: rgba($white, 0.125);
$white-t1: rgba($white, 0.25); $white-t1: rgba($white, 0.25);
$white-t2: rgba($white, 0.5); $white-t2: rgba($white, 0.5);
$white-t3: rgba($white, 0.75); $white-t3: rgba($white, 0.75);
$black: rgb(0,0,0); $gray: rgb(127,127,127);
$black-t0: rgba($black, 0.125); $gray-l1: tint($gray,20%);
$black-t1: rgba($black, 0.25); $gray-l2: tint($gray,40%);
$black-t2: rgba($black, 0.5); $gray-l3: tint($gray,60%); // #cbcbcb;
$black-t3: rgba($black, 0.75); $gray-l4: tint($gray,80%); // #e5e5e5;
$gray-l5: tint($gray,90%); // #f2f2f2;
$gray-l6: tint($gray,95%); // #f8f8f8;
$gray-l7: tint($gray,99%);
$gray-d1: shade($gray,20%);
$gray-d2: shade($gray,40%);
$gray-d3: shade($gray,60%);
$gray-d4: shade($gray,80%);
$pink: rgb(182,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%);
// TODO: both blue and yellow variables differ from CMS rgb value, need to confirm change to CMS variable is ok in current platform uses before switching.
$blue: rgb(29,157,217); $blue: rgb(29,157,217);
$pink: rgb(182,37,104);
$yellow: rgb(255, 252, 221); $yellow: rgb(255, 252, 221);
$red: rgb(178, 6, 16);
// COLORS: old variables
$error-red: rgb(253, 87, 87); $error-red: rgb(253, 87, 87);
$danger-red: rgb(212, 64, 64); $danger-red: rgb(212, 64, 64);
$light-gray: rgb(221, 221, 221); $light-gray: rgb(221, 221, 221);
...@@ -57,12 +122,7 @@ $dark-gray: rgb(51, 51, 51); ...@@ -57,12 +122,7 @@ $dark-gray: rgb(51, 51, 51);
$border-color: rgb(200, 200, 200); $border-color: rgb(200, 200, 200);
$sidebar-color: rgb(246, 246, 246); $sidebar-color: rgb(246, 246, 246);
$outer-border-color: rgb(170, 170, 170); $outer-border-color: rgb(170, 170, 170);
$green: rgb(37, 184, 90);
// COLORS: old variables
$light-gray: #ddd; $light-gray: #ddd;
$dark-gray: #333;
// used by descriptor css // used by descriptor css
$lightGrey: #edf1f5; $lightGrey: #edf1f5;
...@@ -70,8 +130,6 @@ $darkGrey: #8891a1; ...@@ -70,8 +130,6 @@ $darkGrey: #8891a1;
$blue-d1: shade($blue,20%); $blue-d1: shade($blue,20%);
$blue-d2: shade($blue,40%); $blue-d2: shade($blue,40%);
$blue-d4: shade($blue,80%); $blue-d4: shade($blue,80%);
$shadow: rgba($black, 0.2);
$shadow-l1: rgba($black, 0.1);
// edx.org marketing site variables // edx.org marketing site variables
$m-gray: #8A8C8F; $m-gray: #8A8C8F;
...@@ -136,6 +194,7 @@ $shadow: rgba(0,0,0,0.2); ...@@ -136,6 +194,7 @@ $shadow: rgba(0,0,0,0.2);
$shadow-l1: rgba(0,0,0,0.1); $shadow-l1: rgba(0,0,0,0.1);
$shadow-l2: rgba(0,0,0,0.05); $shadow-l2: rgba(0,0,0,0.05);
$shadow-d1: rgba(0,0,0,0.4); $shadow-d1: rgba(0,0,0,0.4);
$shadow-d2: rgba($black, 0.6);
// ==================== // ====================
......
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