_thread.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%;
  }
}