Files
edx-platform/lms/static/sass/discussion/views/_thread.scss
2016-10-14 10:54:50 -04:00

301 lines
7.0 KiB
SCSS

// discussion - thread layout
// ====================
// NOTE: thread = (post + (responses and comments))
// Table of Contents
// * +general thread layout
// * +thread - wrapper styling
// * +thread - elements - shared styles
// * +post - individual element styling
// * +post - answered question - collapsed comment area
// post layout
.discussion-post {
padding: 0 ($baseline/2);
.wrapper-post-header {
padding-bottom: 0;
}
.post-header-content {
display: inline-block;
width: flex-grid(9,12);
}
.post-header-actions {
@include float(right);
}
.post-body {
width: flex-grid(10,12);
}
}
.posted-details {
@extend %t-copy-sub2;
margin: ($baseline/5) 0;
color: $gray-d1;
.username {
@extend %t-strong;
display: inline;
}
.timeago, .top-post-status {
color: inherit;
}
}
// response layout
.discussion-response {
min-height: ($baseline*5);
.response-header-content {
display: inline-block;
vertical-align: top;
width: flex-grid(11,12);
}
.response-header-actions {
@include float(right);
@include right($baseline);
position: absolute;
top: $baseline;
}
}
// comments layout
.discussion-comment {
.response-body {
@extend %t-copy-sub2;
display: inline-block;
margin-bottom: ($baseline/2);
width: flex-grid(10,12);
p + p {
margin-top: 12px;
}
}
.comment-actions-list {
@include float(right);
@include right($baseline / 2);
position: absolute;
top: $baseline / 2;
}
}
// +thread - wrapper styling
.thread-wrapper {
.thread-main-wrapper {
padding-bottom: $baseline;
}
}
// +thread - elements - shared styles
body.discussion {
.discussion-post, .discussion-response, .discussion-comment {
@include clearfix();
// thread - images
.author-image {
@include margin-right($baseline/2);
display: inline-block;
vertical-align: top;
// STATE: No profile image
&:empty {
display: none;
}
// CASE: post image
&.level-post {
height: $post-image-dimension;
width: $post-image-dimension;
}
// CASE: response image
&.level-response {
height: $response-image-dimension;
width: $response-image-dimension;
}
// CASE: comment image
&.level-comment {
height: $comment-image-dimension;
width: $comment-image-dimension;
}
img {
border-radius: $forum-border-radius;
}
}
}
.discussion-response .response-body {
@include padding-right($baseline); //ensures content doesn't overlap on post or response actions.
}
}
// +post - individual element styling
// NOTE: discussion-article is used for inline discussion modules.
.discussion-post,
.discussion-article {
@include clearfix();
.post-header-content {
// post title
.post-title {
font-size: $forum-x-large-font-size;
margin-bottom: ($baseline/4);
}
}
// post body
.post-body {
@extend %t-copy-sub1;
// clear: both; //TO-DO: confirm that removing this is ok for all cases of discussion posts.
}
// post context
.post-context {
@extend %t-copy-sub2;
margin-top: $baseline;
color: $gray-d1;
// CASE: no courseware context or cohort visibility rules
&:empty {
display: none;
}
// post visibility - cohorts
.group-visibility-label {
margin-top: ($baseline/4);
}
}
}
// Styling for discussion threads
.discussion-thread {
padding: 0;
margin-bottom: $baseline;
@include transition(all .25s linear 0s);
p {
margin-bottom: 0;
}
.thread-main-wrapper, .thread-responses-wrapper {
padding: $baseline;
}
.discussion-article {
@include transition(all .2s linear 0s);
border: 1px solid $forum-color-border;
border-radius: $forum-border-radius;
min-height: 0;
background: $forum-color-background;
box-shadow: 0 1px 0 $shadow;
@include transition(all .2s linear 0s);
.thread-wrapper {
@include border-radius($forum-border-radius, $forum-border-radius, 0, 0);
position: relative;
overflow-x: hidden;
overflow-y: auto;
max-height: 600px;
background-color: $forum-color-background;
.discussion-post {
.inline-comment-count {
@include margin-right($baseline/2);
@extend %ui-depth2;
@include float(right);
position: relative;
display: block;
height: 27px;
margin-top: 6px;
padding: 0 8px;
border-radius: $forum-border-radius;
font-size: $forum-small-font-size;
font-weight: 400;
line-height: 25px;
color: #888;
}
}
.responses {
header {
padding-bottom: 0;
margin-bottom: ($baseline*0.75);
.posted-by {
@include margin-right($baseline/4);
@include float(left);
font-size: $forum-large-font-size;
}
}
.response-body {
margin-bottom: 0.2em;
font-size: $forum-base-font-size;
}
}
.discussion-reply-new {
.wmd-input {
height: 120px;
}
}
// Content that is hidden by default in the inline view
.post-extended-content {
display: none;
}
}
.post-tools {
box-shadow: 0 1px 1px $shadow inset;
background: $white;
&:hover {
background: $forum-color-hover-thread;
.icon {
color: $link-hover;
}
}
.btn-link {
display: block;
padding: ($baseline*0.25) $baseline;
font-size: $forum-small-font-size;
line-height: 30px;
.icon {
@include margin-right($baseline*0.25);
color: $link-color;
}
}
}
}
}
// Custom styling for the list of user threads
.discussion-user-threads {
.discussion-post {
padding: $baseline/2;
}
}
.thread-wrapper,
.forum-new-post-form {
img {
max-width: 100%;
}
}