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