taiga-front/app/styles/modules/common/ticket-data.scss

.ticket-header {
    margin: 1.5rem 0 2rem;
    .ticket-title {
        @extend %larger;
        @extend %light;
        text-transform: uppercase;
        vertical-align: sub;
    }
    .detail-status {
        @extend %small;
        display: inline-block;
        margin-left: .25rem;
        position: relative;
        .icon-arrow-bottom {
            margin-left: .25rem;
        }
    }
    .detail-status-inner {
        color: $white;
        display: flex;
        justify-content: center;
        padding: .15rem .25rem;
        text-transform: uppercase;
    }
    .pop-status {
        @include popover(150px, 1.25rem, 0, '', '');
        padding: 0;
        text-transform: none;
        a {
            @extend %text;
            padding: .5rem 1rem;
        }
        a:hover {
            background: rgba($primary-light, .2);
        }
    }
}

.ticket-data-container {
    @extend %small;
    @extend %normal;
    margin-bottom: 1rem;
    .icon {
        margin-left: .25rem;
    }
}

.ticket-status {
    &:last-child {
        margin: 0;
    }
    .level {
        display: inline-block;
        margin-right: .5rem;
        vertical-align: top;
    }
    .level-name {
        color: darken($whitish, 20%);
        float: right;
        text-transform: lowercase;
    }
    .clickable {
        &:hover {
            background: darken($whitish, 10%);
            transition: background .2s ease-in;
        }
    }
    .type-data {
        background: darken($whitish, 5%);
        margin-bottom: .5rem;
        padding: .5rem;
        padding-right: 1rem;
        position: relative;
        transition: background .2s ease-in;
        .pop-type {
            @include popover(150px, '', 30px, '', '');
        }
    }
    .severity-data {
        background: darken($whitish, 5%);
        margin-bottom: .5rem;
        padding: .5rem;
        padding-right: 1rem;
        position: relative;
        transition: background .2s ease-in;
        .pop-severity {
            @include popover(150px, '', 30px, '', '');
        }
    }
    .priority-data {
        background: darken($whitish, 5%);
        margin-bottom: .5rem;
        padding: .5rem;
        padding-right: 1rem;
        position: relative;
        transition: background .2s ease-in;
        .pop-priority {
            @include popover(150px, '', 30px, '', '');
        }
    }
}

.ticket-watch {
    .ticket-watch-title {
        @extend %bold;
        margin-bottom: .5rem;
    }
    .ticket-watch-inner {
        display: flex;
    }
    .track-icon {
        position: relative;
        top: 2px;
    }
    .ticket-watch-button,
    .add-watcher {
        @extend %light;
        @extend %small;
        background: $gray-light;
        color: $white;
        flex: 1;
        padding: .25rem;
        text-align: center;
        text-transform: uppercase;
        transition: background .25s;
        path {
            fill: $white;
        }
        &:hover {
            background: $primary-light;
        }
        &.is-hover {
            background: $red;
            color: $whitish;
            transition: background .3s;
            svg {
                fill: $red-light;
            }
        }
        &.active {
            background: $primary-light;
            &:hover {
                background: $red-light;
            }
            svg {
                fill: $white;
            }
        }

    }
    .ticket-watch-button {
        margin-right: .25rem;
    }
}

.ticket-detail-settings {
    display: flex;
    justify-content: center;
    margin-top: 2rem;
    label,
    .item-block,
    .item-unblock,
    .promote-button,
    .button-delete {
        background: $gray-light;
        display: inline-block;
        margin-right: .5rem;
        padding: 1rem;
        transition: background .2s linear;
        transition-delay: .1s;
        &:hover {
            background: $gray-light;
            cursor: default;
        }
        &.is-editable {
            background: $gray-light;
            cursor: pointer;
            &:hover {
                background: $gray;
            }
        }
        &.active {
            background: $primary-light;
        }
        +input {
            display: none;
        }
    }
    .item-block,
    .item-unblock {
        display: none;
        &.is-active {
            display: inline-block;
        }
    }
    .item-unblock {
        background: $red;
    }
    .button-delete {
        background: $red-light;
        &:hover {
            background: $red;
            cursor: pointer;
        }
    }
    img {
        max-height: 1.25rem;
        max-width: 1.25rem;
        width: 100%;
    }
    svg {
        fill: $white;
        height: 100%;
        max-height: 1.25rem;
        max-width: 1.25rem;
        width: 100%;
    }
}