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

.history {
    margin-bottom: 1rem;
}
.changes-title {
    display: block;
    padding: .5rem;
    &:hover {
        .icon {
            @include transform(rotate(180deg));
            @include transition(all .2s linear);
            color: $green-taiga;
        }
    }
    .icon {
        @include transform(rotate(0));
        @include transition(all .2s linear);
        color: $grayer;
        float: right;
    }
}
.change-entry {
    @include table-flex;
    border-bottom: 1px solid $gray-light;
    padding: .5rem;
    &:last-child {
        border-bottom: 0;
    }
    .activity-changed,
    .activity-fromto {
        @include table-flex-child(1, 50px, 0);
    }
    .activity-changed {
        @extend %bold;
    }
    .activity-fromto {
        @extend %small;
    }
}
.history-tabs {
    @extend %title;
    border-bottom: 3px solid $gray-light;
    padding: .5rem 0;
    li {
        @extend %large;
        display: inline-block;
        &:first-child {
            border-right: 1px solid $gray-light;
        }
    }
    a {
        @include transition(color .2s ease-in);
        color: $gray-light;
        padding: 0 2rem;
        &.active {
            color: $grayer;
        }
        &:hover {
            @include transition(color .2s ease-in);
            color: $green-taiga;
        }
    }
    .icon {
        margin-right: .5rem;
    }
}
.add-comment {
    @include clearfix;
    &.active {
        .button-green {
            display: block;
        }
        textarea {
            @include transition(height .3s ease-in);
            height: 6rem;
        }
        .help-markdown {
            @include transition(opacity .3s linear);
            opacity: 1;
        }
        .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;
    }
}
a.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 {
        @include transition (background .2s ease-in);
        background: lighten($green-taiga, 60%);
    }
}
.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 {
            @include 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 {
    @include table-flex;
    border-bottom: 1px solid $gray-light;
    padding: 2rem 0;
    position: relative;
    &:hover {
        .comment-delete {
            @include transition(opacity .2s linear);
            opacity: 1;
        }
        .comment-restore {
            @include transition(opacity .2s linear);
            opacity: 1;
        }
    }
    &: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 {
                @include transition(color .2s linear);
                color: $green-taiga;
            }
        }
        img {
            @include 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 {
            @include transition(color .2s linear);
            color: $green-taiga;
        }
    }
    .username {
        color: $green-taiga;
        margin-bottom: .5rem;
    }
    .activity-user {
        @include table-flex-child(1, 50px, 0);
        img {
            max-width: 70px;
            width: 100%;
        }
    }
    .activity-username {
        color: $green-taiga;
        margin-bottom: .5rem;
    }

    .activity-content {
        @include table-flex-child(20, 150px, 0);
    }
    .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 {
        @include transition(all .2s linear);
        color: $red;
        opacity: 0;
        position: absolute;
        right: 0;
        top: 2rem;
        &:hover {
            @include transition(color .2s linear);
            color: $red-light;
        }
    }
    &.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;
    }
}