dbmedialab/reader-critics

// MAIN CONTENT
// The "card" is each element from the article.
// E.g. a paragraph, a title, a lead etc.
.card {
    box-shadow: $shadow-level-2;
    padding: 1rem 1rem .5rem;
    margin: 0 auto .5rem;
    max-width: $content-max-width;
    box-sizing: border-box;
    @media (max-width: $content-max-width) {
        margin: 0 .5rem 1rem;
    }

    h1 {
        font-size: 1.8rem;
        margin: 0 0 .5rem;
        font-weight: 400;
    }

    h3 {
        font-size: 1.25rem;
        margin: 0 0 .5rem;
        font-weight: 600;
    }

    p {
        margin-bottom: .5rem;
    }

    fieldset {
        margin: 0;
        padding: 0;
        border: 0;

        &.actions {
            text-align: center;
            margin: 1rem 0;
        }
    }

    textarea,
    input[type='text'] {
        width: 100%;
        border: 1px solid $color-success;
        border-radius: 5px;
        padding: .5rem;
        font-family: 'Roboto', sans-serif;
        font-size: .9rem;
        margin-bottom: 1rem;
    }

    footer {
        text-align: center;
        margin: .5rem 0 0;
    }

    label {
        text-transform: uppercase;
        color: $color-success;
        font-size: .8rem;
    }


    // The form contains the inpu from the user.
    // When the element is being edited a class is added.
    // so we can hide the element by default.
    form {
        display: none;
    }

    ol {
        li {
            font-size: .9rem;
            list-style: none;

            &::before {
                @include material-icon;
                margin-right: .3rem;
                font-size: 1.5rem;
                display: inline-block;
                content: 'close';
                color: $color-warning;
                position: relative;
                top: .5rem;
                cursor: pointer;
            }

            &:last-child {
                margin-bottom: 1rem;
            }
        }
    }

    // When the form is "active" we add a editing class
    // displaying all the input feilds and hiding some options.
    &.editing {
        form {
            @include appear;
            display: block;
        }

        footer {
            display: none;
        }
    }

    &:not(.edited) {
        .button {
            .reset {
                display: none;
            }
        }
    }

    .button {
        text-transform: uppercase;
        font-size: .8rem;
        background: none;
        border: 0;
        cursor: pointer;
        padding: .5rem;

        &::before {
            @include material-icon;
            margin-right: .3rem;
            display: inline-block;
            border-radius: 2rem;
            border-width: 1px;
            border-style: solid;
            position: relative;
            top: .15rem;
            padding: .5rem;
        }

        // BUTTON VARIATIONS
        &.cancel {
            color: $color-warning;

            &::before {
                content: 'close';
                border-color: $color-warning;
            }
        }

        &.save {
            color: $color-success;

            &::before {
                content: 'done';
                border-color: $color-success;
            }
        }

        &.edit {
            color: $color-success;

            &::before {
                content: 'edit';
                border-color: $color-success;
            }
        }

        &.reset {
            color: $color-warning;

            &::before {
                content: 'delete';
                border-color: $color-warning;
            }
        }
    }
}