taiga-front/app/styles/modules/common/history.scss

.history {
    margin-bottom: 1rem;
}
.changes-title {
    display: block;
    padding: .5rem;
    &:hover {
        .icon {
            color: $green-taiga;
            transform: rotate(180deg);
            transition: all .2s linear;
        }
    }
    .icon {
        color: $grayer;
        float: right;
        transform: rotate(0);
        transition: all .2s linear;
    }
}
.change-entry {
    border-bottom: 1px solid $gray-light;
    display: flex;
    padding: .5rem;
    &:last-child {
        border-bottom: 0;
    }
    .activity-changed,
    .activity-fromto {
        flex-basis: 50px;
        flex-grow: 1;
    }
    .activity-changed {
        @extend %bold;
    }
    .activity-fromto {
        @extend %small;
    }
}
.history-tabs {
    @extend %title;
    border-bottom: 3px solid $gray-light;
    margin-bottom: 0;
    padding: .5rem 0;
    li {
        @extend %large;
        display: inline-block;
        &:first-child {
            border-right: 1px solid $gray-light;
        }
    }
    a {
        color: $gray-light;
        padding: 0 2rem;
        transition: color .2s ease-in;
        &.active {
            color: $grayer;
        }
        &:hover {
            color: $green-taiga;
            transition: color .2s ease-in;
        }
    }
    .icon {
        margin-right: .5rem;
    }
}
.add-comment {
    @include clearfix;
    &.active {
        .button-green {
            display: block;
        }
        textarea {
            height: 6rem;
            transition: height .3s ease-in;
        }
        .help-markdown {
            opacity: 1;
            transition: opacity .3s linear;
        }
        .preview-icon {
            opacity: 1;
            position: absolute;
            right: 1rem;
        }
    }
    textarea {
        background: $white;
        height: 5rem;
        margin-bottom: .5rem;
        min-height: 41px;
    }
    .help-markdown {
        opacity: 0;
    }
    .save-comment {
        color: $white;
        float: right;
    }
    .button-green {
        display: none;
    }
    .edit,
    .preview-icon {
        position: absolute;
        right: 1rem;
    }
    .preview-icon {
        opacity: 0;
    }
}
.show-more-comments {
    @extend %small;
    border-bottom: 1px solid $gray-light;
    border-top: 1px solid $gray-light;
    color: $gray-light;
    display: block;
    padding: 1rem 0 1rem 1rem;
    &:hover {
        background: lighten($green-taiga, 60%);
        transition: background .2s ease-in;
    }
}
.more-comments {
    @extend %small;
    border-bottom: 1px solid $gray-light;
    color: $gray-light;
    display: block;
    padding: 1rem;
    .prev-comments-num {
        color: $green-taiga;
        margin-left: .5rem;
    }
}
.comment-list {
    &.activeanimation {
        .comment-single.ng-enter:last-child,
        .comment-single.ng-leave:last-child {
            transition: all .3s ease-in;
        }
        .comment-single.ng-enter:last-child,
        .comment-single.ng-leave.ng-leave-active:last-child {
            opacity: 0;
        }
        .comment-single.ng-leave:last-child,
        .comment-single.ng-enter.ng-enter-active:last-child {
            opacity: 1;
        }
    }
}
.activity-single {
    border-bottom: 1px solid $gray-light;
    display: flex;
    padding: 2rem 0;
    position: relative;
    &:hover {
        .comment-delete {
            opacity: 1;
            transition: opacity .2s linear;
        }
        .comment-restore {
            opacity: 1;
            transition: opacity .2s linear;
        }
    }
    &:first-child {
        margin-top: 0;
    }
    &:last-child {
        border-bottom: 0;
    }
    &.deleted-comment,
    .deleted-comment {
        @extend %small;
        color: $gray-light;
        padding: .5rem;
        a {
            color: $gray-light;
            margin-left: .3rem;
            &:hover {
                color: $green-taiga;
                transition: color .2s linear;
            }
        }
        img {
            filter: grayscale(100%);
            opacity: .5;
        }
        .comment-body {
            display: none;
            margin: .2rem 0 .5rem;
            p {
                @extend %medium;
            }
        }
    }
    .comment-restore {
        @extend %small;
        color: $gray-light;
        position: absolute;
        right: 0;
        top: .4rem;
        .icon {
            vertical-align: baseline;
        }
        &:hover {
            color: $green-taiga;
            transition: color .2s linear;
        }
    }
    .username {
        color: $green-taiga;
        margin-bottom: .5rem;
    }
    .activity-user {
        flex-basis: 60px;
        flex-shrink: 0;
        margin-right: 1rem;
        img {
            width: 100%;
        }
    }
    .activity-username {
        color: $green-taiga;
        margin-bottom: .5rem;
    }
    .activity-content {
        flex-shrink: 0;
        width: calc(100% - 80px);
    }
    .changes {
        background: $whitish;
        .change-entry {
            display: none;
            &.active {
                display: flex;
            }
        }
    }
    .date {
        @extend %small;
        color: $gray-light;
        margin-left: 1rem;
    }
    .wysiwyg {
        margin-bottom: 0;
    }
    .comment-delete {
        color: $red;
        opacity: 0;
        position: absolute;
        right: 0;
        top: 2rem;
        transition: all .2s linear;
        &:hover {
            color: $red-light;
            transition: color .2s linear;
        }
    }
    &.activity {
        .change-entry {
            display: flex;
        }
    }
}
.more-activity {
    @extend %small;
    border-bottom: 1px solid $gray-light;
    color: $gray-light;
    display: block;
    padding: 1rem;
    .prev-activity-num {
        color: $green-taiga;
        margin-left: .5rem;
    }
}