cirrus-ui/src/components/card.scss

A lightweight UI framework written in SCSS

@use '../src/internal' as *;

@if should-generate-classes($CARD) {
    /* CARDS */
    .card {
        background-color: #fff;
        backface-visibility: hidden;
        border-radius: 5px;
        box-shadow: 0px 5px 12px 0 rgba(42, 51, 83, 0.12), 0px 0px 5px rgba(0, 0, 0, 0.06);
        margin-bottom: 1rem;
        overflow: hidden;
        position: relative;
        transition: all 0.3s;

        &:hover {
            transition: all 0.3s;
            box-shadow: 0px 8px 20px 0 rgba(42, 51, 83, 0.12), 0 5px 5px rgba(0, 0, 0, 0.06);

            .card-image::after {
                opacity: 0;
            }
        }

        &.slide-up,
        &.card--slide-up {
            display: flex;
            flex-direction: column;
            max-height: 550px;

            &:hover {
                .card-body,
                .card__body {
                    opacity: 1;
                }
                .card-image,
                .card__image {
                    transform: translateY(-40px);
                }
                .mobile-title,
                .card__mobile-title {
                    bottom: 35%;
                    transition: all 0.3s ease-in-out;
                }
            }

            /* More card components in second example */
            .mobile-title,
            .card__mobile-title {
                position: absolute;
                left: 0;
                bottom: 5rem;
                background-color: var(--cirrus-bg);
                transition: 0.3s ease-in-out;
                width: 100%;
                padding: 1.5rem 0 0 0;
                backface-visibility: hidden;
            }

            .card-body,
            .card__body {
                opacity: 0;
                overflow: auto;
                transition: all var(--animation-duration) ease-in-out;
            }
        }

        /* Allow for the cards to have the same height when u-flex is used on the card */
        &.u-flex .content {
            flex-grow: 1;
        }

        p {
            margin: 1rem 0;
        }

        .card-image,
        .card__image {
            bottom: 0;
            left: 0;
            position: absolute;
            right: 0;
            top: 0;
            border-radius: 5px 5px 0 0;
            background-size: cover;
            background-repeat: no-repeat;
            transition: all 0.3s ease-in-out;

            &::after {
                content: '';
                display: block;
                position: absolute;
                background-color: rgba(0, 0, 0, 0.1);
                top: 0;
                left: 0;
                right: 0;
                transition: all 500ms;
                bottom: 0;
            }
        }

        .card-container,
        .card__container {
            display: block;
            position: relative;
            height: 40%;
            min-height: 21rem; /* So it appears in html5 standards mode */
        }

        .title-container,
        .card__title-container {
            position: absolute;
            bottom: 1rem;
            width: 100%;
            padding: 0 1rem;

            .title,
            .subtitle {
                color: #fff;
                margin: 1rem auto;
            }

            .title {
                font-weight: 300;
                font-size: 1.5rem;
                margin-bottom: 0;
                text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
            }
        }

        .action-bar,
        .card__action-bar {
            user-select: none;
            padding: 0.5rem;
            margin: 0;
            border-top: 1px solid fill('gray', '200');
            box-sizing: border-box;
            transition: left 200ms cubic-bezier(0.075, 0.82, 0.165, 1);

            /* Add some padding to the buttons */
            #{$button-selectors} {
                margin: 0 0.5rem;
            }

            & + .card-footer,
            & + .card__footer {
                padding: 1rem 0;
                border-top: 1px solid fill('gray', '200');
            }
        }

        .card-footer,
        .card__footer {
            position: relative;
            font-size: $font-size-s;
            color: fill('gray', '600');
        }

        /*
    NOTE: To have cards with the same height, place the card class with col-x classes and have the parent have fluid-container.
*/

        /* Card Title Bar */
        .card-head,
        .card__header {
            align-items: stretch;
            display: flex;
            border-bottom: 1px solid fill('gray', '200');
        }
    }
}