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

@import "layouts/global/mixins";
@import "components/directives/ui-edit-rights";

 /**
 * Content-list styles.
 *
 * Shows all content items in a table.
 */

$content-list-icon-size: 14px;
$compact-display-td-padding: 2px 5px;

$textualIconSize: 22px;
$tableHeaderRowHeight: 48px;

// Global padding for cells
%content-list__field-padding {
    padding: 10px 5px;
}

    // Compact layout
    .content-list--compact %content-list__field-padding {
        padding: $compact-display-td-padding;
    }

 .content-list, .content-list * {
    box-sizing: content-box;
}

.content-list {
    width: 100%;
    border-bottom: 5px solid $c-grey-100;

    thead {
        th {
            z-index: 3;
            background-color: $c-white;
            white-space: nowrap;
        }
        tr {
            height: $tableHeaderRowHeight;
        }
    }

    &--sticky-row th {
        position: sticky;
        top: 0;
        background-color: $c-bluegrey;

        &.content-list__group-heading {
            top: $tableHeaderRowHeight;
            z-index: 2;
        }
    }

    // Table header
    &-head {
        &__row {
        }

        &__heading {

            &--titles,
            &--group,
            &--office,
            &--deadline,
            &--created,
            &--section,
            &--legal,
            &--status,
            &--status-in-print,
            &--notes,
            &--pinboard,
            &--links,
            &--published-state,
            &--wordcount,
            &--printwordcount,
            &--commissionedLength,
            &--needs-legal,
            &--needs-picture-desk,
            &--last-modified,
            &--last-modified-by,
            &--last-modified-in-print-by,
            &--printlocation,
            &--rights,
            &--byline {
                padding: 15px 10px 5px 5px;
                @extend %fs-data-2;

                font-weight: bold;
                text-align: left;
            }

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

            &--needs-legal,
            &--needs-picture-desk {
                padding: 10px 5px;
                width: $content-list-icon-size;
            }

            &--presence,
            &--assignee {
                padding: 5px 5px 5px 0;
            }

            &--assignee {
              text-align: center;
            }

            &--presence {
              text-align: right;
            }

            &--priority {
              // The priority icon is a slightly different shape, and needs
              // different padding as a result
              padding-top: 17px;
              padding-left: 10px;
              padding-right: 0;
            }

            &-icon {
                &--presence,
                &--assignee,
                &--headline-toggle {
                    display: inline-block;
                }

                &--presence {
                    width: 18px;
                    height: 18px;
                    margin-top: 3px;
                }
                &--assignee {
                    width: $content-list-icon-size;
                    height: $content-list-icon-size;
                    margin-top: 3px;
                }
                &--headline-toggle {
                    width: $content-list-icon-size;
                    height: $content-list-icon-size;
                    margin-right: 5px;
                }
            }

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

            &--wordcount,
            &--printwordcount {
                width: 40px;
            }

            &--printlocation {
                width: 300px;
            }

            &--titles {
                min-width: 200px;
            }

            &--last-modified,
            &--last-modified-in-print-by,
            &--last-modified-by {
                min-width: 110px;
            }

            &--rights {
              min-width: 125px;
            }

            &--byline {
              min-width: 125px;
            }

            &--titles {
                &--secondary {
                    color: grey;
                }
            }
        }
    }


    // Group headings in the table
    &__group-heading {

        &-row {
            background-color:  $c-bluegrey;
            border-bottom: 1px solid #ffffff;
        }

        &-link {
            @extend %fs-data-3;
            text-transform: uppercase;
            background-color: $c-bluegrey;
            color: $c-grey-700;
            font-weight: bold;
            display: inline-block;
            line-height: 20px;
            padding: 0 10px;
            min-width: 80px;

            &:hover {
                color: $c-grey-700;
                text-decoration: none;
            }
        }

        &-count {
            font-weight: normal;
            margin-left: 0.5em;
        }
    }


    &__button {
        &-icon {
            display: inline-block;
            width: 9px;
            height: 9px;
            margin-right: 5px;
        }

        &--new,
        &--import {
            @extend %fs-data-3;

            padding: 0 10px;
            background-color: $c-bluegrey;
            font-weight: normal;
            line-height: 21px;
            border-top: none;
            border-bottom: none;
            border-left: 1px solid $c-grey-400;
            border-right: 1px solid $c-bluegrey;
            color: $c-grey-700;
        }
    }

    &--presence-disabled {
      .content-list-head__heading--presence,
      .content-list-item__field--presence {
        &:after {
          content: "";
          display: block;
          position: absolute;
          height: 100%;
          width: 100%;
          top: 0;
          left: 0;
          background-color: rgba(220,220,220,0.6);
        }
      }

    }
}

// column-configurator

.content-list-head--button-container {
    position:  relative;
}

.configure-columns {
    position: absolute;
    bottom: 6px;
    right: 6px;
    background-color: #ffffff;
    width: 20px;
    height: 20px;
    border: 1px solid $c-grey-650;
    @include border-radius(50px);
    cursor: pointer;

    @mixin icon-line {
        position: absolute;
        width: 2px;
        height: 12px;
        top: 4px;
        left: 9px;
        background-color: $c-grey-650;
        padding: 0;
    }

    .configure-columns__inner {
        @include icon-line;
    }

    &:before, &:after {
        @include icon-line;
        content: " ";
        display: block;
    }

    &:before {
        left: 5px;
    }

    &:after {
        left: 13px;
    }

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

    &:active, &--active {
        background-color: $c-grey-650;
        .configure-columns__inner, &:before, &:after {
            background-color: #ffffff;
        }
    }
}

.column-configurator {
    $columnConfiguratorBorder: 1px;
    $columnConfiguratorTopOffset: $tableHeaderRowHeight + $topToolbarHeight + $columnConfiguratorBorder;

    position: fixed;
    top: $columnConfiguratorTopOffset;

    max-height: calc(100vh - #{$columnConfiguratorTopOffset});
    overflow-x: hidden;
    overflow-y: scroll;

    right: 15px;
    width: 180px;
    z-index: 3;

    // _toolbar-sections-dropdown.scss:71
    background-color: #ffffff;
    border: $columnConfiguratorBorder solid $c-grey-400;
    box-shadow: 2px 1px 5px $c-grey-300;
    display: block;
    -webkit-transition: opacity .35 ease-in-out;
    -moz-transition: opacity .35 ease-in-out;
    -ms-transition: opacity .35 ease-in-out;
    -o-transition: opacity .35 ease-in-out;
    transition: opacity .35 ease-in-out;
    // ! _toolbar-sections-dropdown.scss:71

    .column-configurator__list {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .column-configurator__list-item {
        border-bottom: 1px solid $c-grey-300;
        .column-configurator__label {
            padding: 6px 10px;
            color: $c-grey-700;
            font-weight: normal;
            @extend %fs-data-3;
            text-transform: capitalize;
            margin: 0;
            cursor: pointer;
            width: 100%;
            user-select: none;

            input {
                width: auto;
            }

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

        .column-configurator__label {
            margin-right: 4px;
        }

        &:last-child {
            border: none;
        }

    }
}

.configure-columns__new-indicator {
    display: inline-block;

    z-index: 9;
    @extend %fs-data-1;
    font-weight: normal;
    color: #ffffff;
    height: 14px;
    background-color: #B22234;
    padding: 1px 3px 0;

    position: relative;
    top: -2px;
    left: 6px;


    &--animate-on-button {
        display: block;
        margin: 0;
        position: absolute;
        left: -25px;
        top: -5px;

        animation: new-indicator-pulse 3s infinite alternate;
        -webkit-animation: new-indicator-pulse 3s infinite alternate;
        -moz-animation: new-indicator-pulse 3s infinite alternate;

        animation-timing-function: ease-in-out;
        -webkit-animation-timing-function: ease-in-out;
        -moz-animation-timing-function: ease-in-out;
    }
}

@include keyframes(new-indicator-pulse) {
    0% {
        transform: scale(0.9);
        opacity: 0.7;
    }
    50% {
        transform: scale(1);
        opacity: 1;
    }
    100% {
        transform: scale(0.9);
        opacity: 0.7;
    }
}

.content-list-head__heading--group {
    position: relative;
}

.content-list-head__heading-sort-by {
  cursor: pointer;
  user-select: none;
}

.content-list-head__heading-sort-indicator {
  font-size: 10px;
}

.content-list__content-end {
    background-color:  $c-bluegrey;
    border-top: 1px solid $c-grey-300;
    border-bottom: 1px solid #ffffff;
    height: 46px;
    line-height: 46px;
    @extend %fs-data-2;
    text-transform: uppercase;
    color: $c-grey-700;
    font-weight: bold;
    text-align: center;
}

.content-list__content-end-reset {
    margin: 0 0 0 6px;
    line-height: 1.42857143; // Bootstrap...
}

.content-list-head__heading--pinboard {
    width: 62px;
}