superdesk/superdesk-client-core

View on GitHub
scripts/apps/ingest/styles/dashboard.scss

Summary

Maintainability
Test Coverage
// Styling for the ingest dashboard
// ----------------------------------------------------------------------------------------
@import '~mixins.scss';
@import '~variables.scss';


// Ingest dashboard
// -------------------------------------------------

.ingest-dashboard {
    padding: 40px;
    overflow: auto;
    .card-list {
        display: flex;
        flex-wrap: wrap;        
    }
    .card-list > li {
        width: 240px;
        margin: 10px;
        padding: 0px;
        position: relative;
        flex: 0 0 auto;
        &:hover {
            cursor: default;
        }
        .card-list__controls {
            position: absolute;
            inset-block-start: 7px;
            inset-inline-end: 1px;
        }
        .header {
            height: 110px;
            background: var(--sd-colour-bg--02);
            padding: 16px;
            color: $white;
            border-radius: var(--b-radius--medium) var(--b-radius--medium) 0 0;
            .title {
                padding-block-end: 6px;
                font-weight: 500;
            }
            .sub-title {
                color: hsla(0, 0%, 100%, 0.5);
                .text {
                    color: hsla(0, 0%, 100%, 0.75);
                    font-weight: 500;
                }
            }
        }
        .status {
            color: $white;
            font-size: 14px;
            padding: 10px 15px;
            min-height: 36px;
            box-sizing: content-box;
            .time {
                font-size: 11px;
            }
            &.opened {
                background: #107401;
            }
            &.closed {
                background: #970000;
            }
            .uppercase {
                padding-inline-end: .3em;
            }
        }
        .ingested-count {
            padding: 10px 16px;
            text-align: center;
            border-block-end: 1px  solid var(--sd-colour-line--light);
            .count {
                font-size: 30px;
                line-height: 34px;
                font-weight: 500;
            }
            .text {
                font-size: 11px;
                color: var(--color-text-light);
            }
        }
        .update-time {
            padding: 0 15px 10px 15px;
            border-block-end: 1px  solid var(--sd-colour-line--light);
            .text {
                margin-block-start: 10px;
                font-size: 12px;
                text-transform: uppercase;
                color: var(--color-text-light);
                font-weight: 500;
            }
            .time {
                font-size: 11px;
            }
        }
        .error {
            word-wrap: break-word;
            color: $red;
            padding: 5px;
        }
        .toggle-box {
            margin: 10px;
            header {
                &:before {
                    display: none;
                }
                h6 {
                    background: none;
                }
                i {
                    opacity: 0.6;
                }
                .chevron {
                    background-color: hsl(0, 0%, 100%);
                }
            }
        }
    }
}