storyboard-webclient/src/theme/base/discussion.less

/*
 * Copyright (c) 2014 Hewlett-Packard Development Company, L.P.
 *
 * Licensed under the Apache License, Version 2.0 (the "License"); you may
 * not use this file except in compliance with the License. You may obtain
 * a copy of the License at
 *
 *         http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
 * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
 * License for the specific language governing permissions and limitations
 * under the License.
 */

/**
 * Discussion styles.
 */
.discussion {
    position: relative;

    .discussion-comment-none {
        border-top: 1px solid @table-border-color;
        border-bottom: 1px solid @table-border-color;
        padding: @table-cell-padding;
        margin: 0px;
    }

    .discussion-comment {
        vertical-align: middle !important;
        margin-left: 20px;
        margin-bottom: -22px;

        .discussion-event-header {
            border-bottom: 1px solid @table-border-color;
            background-color: @gray-lighter;
            padding: @table-condensed-cell-padding;
        }

        .discussion-event {
            border: 1px solid @table-border-color;
            border-radius: 5px;
            padding: 2px 5px 2px 5px;
            display: inline-block;
            margin: 0;
            position: relative;
            left: 32px;
            width: calc(100% - 32px);
            top: -28px;

            &::before {
                content: '';
                position: absolute;
                top: 5px;
                left: -15px;
                height: 0;
                width: 0;
                border: 7px solid transparent;
                border-right: 7px solid @table-border-color;
            }
        }

        .discussion-event-important {
            .discussion-event;
            background-color: @gray-lighter;
            padding: @table-condensed-cell-padding;
            top: -35px;

            &::before {
                top: 8px;
            }
        }

        .discussion-event-complex {
            .discussion-event-important;
            padding: 0;
            left: 32px;
            top: -36px;
            width: calc(100% - 32px);
            display: block;
        }

        .discussion-comment-icon-primary {
            display: inline-block;
            position: relative;
            top: 0px;
            width: 40px;
            height: 40px;
            z-index: 999;
            vertical-align: middle !important;
            background-color: @brand-primary;
            color: @navbar-default-brand-color;
            border-radius: 20px;
            border: 3px solid @table-border-color;
            margin-left: -20px;
            & i {
                position: relative;
                left: 50%;
                width: 20px;
                height: 20px;
                margin-left: -10px;
                text-align: center;
            }
        }

        .discussion-comment-icon-warning {
            .discussion-comment-icon-primary;
            background-color: #f0ad4e;
        }

        .discussion-comment-icon {
            .discussion-comment-icon-primary;
            width: 32px;
            height: 32px;
            border: 2px solid @table-border-color;
            background-color: @white;
            margin: 0 14px 0 -16px;
            padding: 5px;
            & i {
                .text-muted;
            }
        }

        & insert-markdown > div {
            padding: 8px 10px 1px 10px;
            margin: 0;
            border-bottom-left-radius: 5px;
            border-bottom-right-radius: 5px;
            background-color: @white;

            & blockquote {
                margin: 0 0 10px;
                font-size: 14px;
                color: #555;
            }
        }

        & div.edit-footer {
            padding: @table-cell-padding;
        }

        > p {
            padding: @table-cell-padding;
            padding-bottom: 0px;
            margin: 0 10px;
        }
    }

    .discussion-comment-important {
        .discussion-comment;
        margin-bottom: -30px;

        &.discussion-comment-active {
            & .discussion-event-header {
                background-color: rgb(255, 255, 204);
                border-top-left-radius: 5px;
                border-top-right-radius: 5px;
            }
        }
     }

    &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 18px;
        height: 100%;
        width: 4px;
        background: @gray-lighter;
    }
}

.discussion-faded {
    opacity: 0.5;
}

.discussion-overlay {
    z-index: 9999;
    margin-bottom: -50px;
    height: 50px;
}

.discussion-comment-form {
    position: relative;
    z-index: 999;
    &:last-child {
        margin-top: 1em;
    }
}

.panel .discussion::before {
    height: calc(100% - 35px);
}

.discussion-comment .kanban-card {
    max-width: 300px;
}