dbmedialab/reader-critics

View on GitHub
src/admin/scss/custom/articles.scss

Summary

Maintainability
Test Coverage
.articles-list {
    color: #000;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 10px;
    top: 10px;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 10px;

    .griddle-table {
        .griddle-cell, .griddle-table-heading-cell {
            &:nth-child(2) {
                text-align: center;
            }

            &:last-child {
                text-align: center;
            }
        }
    }

    .button {
        font-weight: 600;
        line-height: .9rem;
        margin: 0 .2rem;
        padding: 10px 30px;
    }
}

.article-view {
    color: #000;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 10px;
    top: 10px;
    overflow-y: auto;
    overflow-x: hidden;

    .article-container {

        .article {
            margin-bottom: 30px;
            padding: 1.6rem;

            .time-section {
                .time-item {
                    color: #000;
                    opacity: .6;
                    text-align: right;

                    i {
                        margin-right: .2rem;
                    }

                }
            }

            .article-url-section {
                margin: .5rem 0;

                .article-url-link, .article-website-name {
                    @include no-line-break(true);
                    font-size: 1.2rem;
                    line-height: 1;
                }

                .article-website-name {
                    text-align: right;

                    span {
                        color: #597e97;
                    }
                }
            }

            .article-title-section {
                margin-top: 1rem;

                .article-text {
                    font-size: 1.6rem;
                }
            }
        }
    }

    .article-feedbacks-container {
        padding: 0 2.5rem;

        .article-feedback-item {
            margin-bottom: 50px;
            border: 1px solid rgba(0, 0, 0, .1);
            border-radius: 3px;
            padding: .935rem;

            .item-label {
                font-size: .7rem;
                text-transform: uppercase;
                color: #597e97;
                margin-top: 1rem;
                opacity: .7;
            }

            .time-section {
                .time-item {
                    color: #000;
                    opacity: .6;

                    i {
                        margin-right: .2rem;
                    }
                }
            }

            .feedback-section {
                margin-top: 1rem;

                .feedback-text {
                    font-size: 1.6rem;
                }
            }

            .comment-section {
                background-color: $color-user-comment-background;
                padding: 1rem;
                margin: 1rem 0;

                .item-label {
                    margin-top: 0;
                }

                .comment-item {
                    font-size: 1rem;
                }
            }

            .links-section {
                margin-top: 1rem;

                .links-container {
                    .link-item {
                        @include no-line-break(true);
                        font-size: .8rem;
                        display: block;
                        line-height: 1.5;

                        i {
                            margin-right: .2rem;
                        }
                    }
                }
            }

            .buttons-section {
                margin-top: 1rem;
            }
        }
    }
}