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

.history {
    margin-bottom: 1rem;
}
.changes-title {
    display: block;
    padding: .5rem;
    &:hover {
        .icon {
            color: $primary;
            transform: rotate(90deg);
            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 {
        @include font-type(bold);
    }
    .activity-fromto {
        @include font-size(small);
        word-wrap: break-word;
    }
}
.history-tabs {
    @include font-type(light);
    border-bottom: 1px solid $whitish;
    border-top: 1px solid $whitish;
    margin-bottom: 0;
    li {
        background: $white;
        display: inline-block;
        position: relative;
        &.active {
            border-left: 1px solid $whitish;
            border-right: 1px solid $whitish;
            color: $primary;
            top: 1px;
        }
        &:hover {
            color: $grayer;
            transition: color .2s ease-in;
        }
    }
    a {
        color: $gray-light;
        display: block;
        padding: .5rem 2rem;
        transition: color .2s ease-in;
    }
    .icon {
        fill: currentColor;
        height: .75rem;
        margin-right: .5rem;
        width: .75rem;
    }
}
.add-comment {
    @include cursor-progress;
    @include clearfix;
    margin-top: 1rem;
    &.active {
        .button-green {
            display: block;
            margin-top: .5rem;
        }
        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;
        min-height: 41px;
    }
    .help-markdown {
        opacity: 0;
    }
    .save-comment {
        color: $white;
        float: right;
    }
    .button-green {
        display: none;
    }
    .edit,
    .preview-icon {
        position: absolute;
        right: 1rem;
        top: .5rem;
    }
    .edit {
        fill: $gray-light;
        &:hover {
            cursor: pointer;
            fill: $primary;
        }
    }
    .preview-icon {
        opacity: 0;
    }
}
.show-more-comments {
    @include font-size(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($primary, 60%);
        transition: background .2s ease-in;
    }
}
.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 {
        @include font-size(small);
        color: $gray-light;
        padding: .5rem;
        a {
            color: $gray-light;
            margin-left: .3rem;
            &:hover {
                color: $primary;
                transition: color .2s linear;
            }
        }
        img {
            filter: grayscale(100%);
            opacity: .5;
        }
        .comment-body {
            display: none;
            margin: .2rem 0 .5rem;
            p {
                @include font-size(medium);
            }
        }
    }
    .comment-restore {
        @include font-size(small);
        color: $gray-light;
        display: block;
        position: absolute;
        right: 0;
        top: .4rem;
        .icon {
            vertical-align: baseline;
        }
        &:hover {
            color: $primary;
            transition: color .2s linear;
        }
    }
    .username {
        color: $primary;
        margin-bottom: .5rem;
    }
    .activity-user {
        flex-basis: 60px;
        flex-shrink: 0;
        margin-right: 1rem;
        img {
            width: 100%;
        }
    }
    .activity-username {
        color: $primary;
        margin-bottom: .5rem;
    }
    .activity-content {
        flex-shrink: 0;
        width: calc(100% - 80px);
    }
    .changes {
        background: $mass-white;
        .change-entry {
            display: none;
            &.active {
                display: flex;
            }
        }
    }
    .date {
        @include font-size(small);
        color: $gray-light;
        margin-left: 1rem;
    }
    .wysiwyg {
        margin-bottom: 0;
    }
    .comment-delete {
        cursor: pointer;
        display: block;
        opacity: 0;
        position: absolute;
        right: .5rem;
        top: 2rem;
        svg {
            fill: $red-light;
            transition: all .2s linear;
        }
        &:hover {
            svg {
                fill: $red;
                transition: color .2s linear;
            }
        }
    }
    &.activity {
        .change-entry {
            display: flex;
        }
    }
}