public/components/content-list-item/_content-list-item.scss

// Styles for Individual content item rows

@import "layouts/global/mixins";

.content-list-item {
    border-bottom: 1px solid $c-grey-200;
    cursor: pointer;
    vertical-align: baseline;
    background: white; //default, will be overridden for various reasons e.g. --embargoed

    .content-list-item__icon--inactive {
      cursor: default;
    }

    &--selected {
        background-color: $c-grey-200;
    }

    &--trashed {
        .content-list-item__field--working-title,
        .content-list-item__field--headline {
            text-decoration: line-through;
        }
    }

    &:hover {
        background-color: $c-grey-150;
    }

    &__notifier {
        width: 5px;
        max-width: 5px;
        min-width: 5px;
        padding: 0;
    }

    &--published {
        background: $c-light-green;
        .content-list-item__notifier {
            background: $c-green;
        }
    }
    &--takendown {
        background: $c-grey-300;
        .content-list-item__notifier {
            background: repeating-linear-gradient( 45deg, $c-grey-300, $c-grey-300 3px, $c-grey-600 3px, $c-grey-600 6px)
        }
    }
    &--scheduled {
        .content-list-item__notifier {
            background: repeating-linear-gradient( 0deg, $c-light-orange, $c-light-orange 3px, $c-orange 3px, $c-orange 6px)
        }
    }
    &--embargoed {
        background:$c-light-orange;
        .content-list-item__notifier {
            background: repeating-linear-gradient( 135deg, $c-grey-300, $c-grey-300 3px, $c-red 3px, $c-red 6px)
        }
    }

    &__icon {
        &--priority,
        &--comments,
        &--main-image,
        &--content-type,
        &--composer,
        &--preview,
        &--live,
        &--media,
        &--ophan,
        &--incopy,
        &--needs-legal,
        &--needs-picture-desk,
        &--optimisedForWeb,
        &--sensitive,
        &--legally-sensitive {
            display: inline-block;
            width: $content-list-icon-size;
            height: $content-list-icon-size;
        }

        &--assignee,
        &--presence {
            display: inline-block;
            border-radius: 50%;
            width: $textualIconSize;
            height: $textualIconSize;
            line-height: $textualIconSize;
            text-align: center;
            text-transform: uppercase;
        }

        &--assignee {
            background-color: $c-grey-300;
        }

        &--presence {
            border: 1px solid $c-white;
            color: #fff;

            &:hover {
                color: #fff;
                text-decoration: none;
            }
        }

        // Production office icons
        &--office {
            &-au,
            &-us,
            &-uk {
                line-height: 16px;
                display: inline-block;
                text-align: center;
                width: $textualIconSize;
            }

            &-au {
                background-color: #FCD116;
                color: #008751;
            }

            &-us {
                background-color: #B22234;
                color: #fff;
            }

            &-uk {
                background-color: #002366;
                color: #fff;
            }
        }
    }

    &__headline-toggle {
        float: left;
        color: $c-grey-400;
        font-weight: normal;
        margin-right: 5px;

        // bootstrap override, TODO remove
        &[title] {
            border: none;
            cursor: pointer;
        }

        &::after {
            content: ':';
        }
    }

    &__field {
        &--priority,
        &--comments,
        &--main-image,
        &--content-type,
        &--working-title,
        &--headline,
        &--office,
        &--legal,
        &--status,
        &--status-in-print,
        &--composer,
        &--media,
        &--preview,
        &--live,
        &--ophan,
        &--created,
        &--incopy,
        &--wordcount,
        &--printwordcount,
        &--commissionedLength,
        &--needs-legal,
        &--needs-picture-desk,
        &--optimisedForWeb,
        &--sensitive,
        &--legally-sensitive,
        &--printlocation,
        &--rights,
        &--byline
        {
            @extend %fs-data-1;
            @extend %content-list__field-padding;
        }

        // smaller font size for assignee & presence
        &--assignee,
        &--presence {
            @extend %fs-data-2;
        }

        // icon fields
        &--priority,
        &--comments,
        &--main-image,
        &--content-type,
        &--composer,
        &--preview,
        &--live,
        &--ophan,
        &--incopy,
        &--optimisedForWeb,
        &--sensitive,
        &--legally-sensitive {
            padding: 10px 5px;
            width: $content-list-icon-size;
        }

        &--presence,
        &--assignee,
        &--office {
            padding: 5px 5px;
            text-align: center;
        }

        &--presence,
        &--office {
            width: 40px;
            @include smallScreen {
                min-width: 30px;
            }
        }

        &--assignee {
            width: 30px;
        }

        &--needs-legal,
        &--needs-picture-desk {
            width: 32px;
            white-space: nowrap; // Prevent inline-block icons from falling under one another
        }

        &--presence {
            position: relative;

            @include largeScreen {
                width: 50px;
            }
        }

        &--deadline,
        &--created,
        &--legal,
        &--last-modified,
        &--last-modified-by,
        &--last-modified-in-print-by {
            width: 100px;
        }

        &--status,
        &--status-in-print {
            @include smallScreen {
                width: 80px;
                &--select {
                    width: 80px;
                }
            }

            @include largeScreen {
                width: 125px;
                &--select {
                    width: 125px;
                }
            }
        }

        &--section {
            width: 70px;
            padding: 5px 5px;

        }

        &--section,
        &--deadline,
        &--last-modified,
        &--last-modified-by,
        &--last-modified-in-print-by {
            @extend %fs-data-1;
        }

        &--deadline,
        &--created,
        &--last-modified,
        &--last-modified-by,
        &--last-modified-in-print-by {
            white-space: nowrap;
        }

        &--notes {
            @extend %fs-data-1;
            padding: 2px 10px;

            // Prevent text overflow
            text-overflow: ellipsis;
            overflow: hidden;

            //default
            min-width: 120px;
            max-width: 200px;

            @include largeScreen {
                min-width: 0px;
                max-width: none;
                width: 325px;
            }

            @include smallScreen {
                min-width: 50px;
                max-width: 200px;
                padding: 2px 5px;
            }
        }

        &--commissionedLength {
            width: 34px;
            text-align: center;
        }

        &--wordcount {
            width: 34px;
            text-align: center;
        }

        &--printwordcount {
            width: 34px;
            text-align: center;
        }

        &-supl--published-state {
            @extend %fs-data-1;
            color: $c-grey-600;
            white-space: nowrap;
        }

        // First column
        &--priority {
            padding-left: 10px;
        }

        // Last column
        &--published-state {
            min-width: 148px;
            padding: 5px 10px;
            @extend %fs-data-3;
        }

        &--working-title,
        &--headline {
            @include smallScreen {
                max-width: 225px;
            }

            @include largeScreen {
                width: 375px;

            }
        }

        &--needs-legal,
        &--needs-picture-desk {
            @include largeScreen {
                width: auto;
            }
        }
    }

    .content-list-item__field--commissionedLength {
        &-status {
            &-near {
                color: green;
            }
            &-over {
                color: green;
            }
            &-alert {
                color: red;
            }
        }
    }

}

// Animations

.content-list.content-list--animations-enabled {
    .content-list-item {
        &.ng-enter {
            -webkit-transform: translate3d(0, 0, 0);
            -webkit-animation: content-list-item--enter-sequence 2s ease-out;
            animation: content-list-item--enter-sequence 2s ease-out;
        }

        &.ng-leave {
            -webkit-transform: translate3d(0, 0, 0);
            -webkit-animation: content-list-item--leave-sequence 0.5s ease-out;
            animation: content-list-item--leave-sequence 0.5s ease-out;
        }
    }
}

// Transition keyframes for changing content in the list
@include keyframes(content-list-item--enter-sequence) {
    // TODO: use proper pallete colours
    0% {
        background: #fcf8e3;
        opacity: 0;
    }
    50% {
        background: #fcf8e3;
        opacity: 1;
    }
}

@include keyframes(content-list-item--leave-sequence) {
    to {
        opacity: 0;
    }
}

// Compact layout
.content-list--compact {
    .content-list-item__field--working-title,
    .content-list-item__field--headline,
    .content-list-item__field--notes {
        @include text-truncate;
        max-width: 200px;
    }

    .content-list-item__field--working-title,
    .content-list-item__field--headline {
        @include smallScreen {
            @include font-size(11, 14); // Can't extend placeholders (%fs-data-1) into @media so including the font-size mixin directly
            max-width: 160px;
        }
    }

    .content-list-item__field--working-title,
    .content-list-item__field--headline,
    .content-list-item__field--notes {
        @include smallScreen {
            padding: 2px 4px;
        }
    }

    .content-list-item__field--notes {
        @include smallScreen {
            max-width: 90px;
        }

        @include largeScreen {
            width: 325px;
        }
    }

    .content-list-item__field--section {
        @include text-truncate;
        max-width: 80px;

        @include largeScreen {
            width: 110px;
        }
    }

    .content-list-item__field {
        &--priority,
        &--comments,
        &--main-image,
        &--content-type,
        &--working-title,
        &--headline,
        &--office,
        &--legal,
        &--status,
        &--status-in-print,
        &--composer,
        &--preview,
        &--live,
        &--ophan,
        &--deadline,
        &--created,
        &--section,
        &--incopy,
        &--optimisedForWeb,
        &--published-state,
        &--sensitive,
        &--legally-sensitive,
        &--commissionedLength,
        &--wordcount,
        &--printwordcount,
        &--last-modified,
        &--last-modified-by,
        &--last-modified-in-print-by,
        &--printlocation {
            @extend %fs-data-1;
        }

        &--published-state {
            min-width: 148px;
            padding: $compact-display-td-padding;
        }

        &-primary--published-state {
            display: inline;
        }

        &-supl--published-state {
            display: inline;
        }

        &--status,
        &--status-in-print {
            width: 125px;

            &--select {
                width: 125px;
            }

            @include smallScreen {
                width: 65px;
                &--select {
                    width: 65px;
                }
            }
        }

        &--office {
            width: 20px;
            padding: 2px 3px;
        }

        &--presence {
            @include largeScreen {
                width: 50px;
            }
        }

        &--needs-legal,
        &--needs-picture-desk {
            @include largeScreen {
                width: auto;
            }
        }
    }

    .content-list-item__field--presence,
    .content-list-item__field--assignee,
    .content-list-item__field--office {
        padding: $compact-display-td-padding;
    }

    .content-list-item__icon--presence,
    .content-list-item__icon--assignee {
        @extend %fs-data-1;
        font-size: 9px;
        width: 16px;
        height: 16px;
        line-height: 16px;
        display: inline-block;
    }
}

.planned-print-location {
    color: $c-grey-600;
    font-style: italic;

    &__brackets {
        color: black;
    }
}
.actual-print-location {
    color: black;
}
.planned-print-location, .actual-print-location {
    vertical-align: middle;
}

.content-list-item__field--pinboard {
    width: 77px;
}