cirrus-ui/src/components/tiles.scss

A lightweight UI framework written in SCSS

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

@if should-generate-classes($TILES) {
    /* TILES */
    .tile {
        display: flex;
        align-content: space-between; /* Ensure space between child elements of card tile */
        overflow: inherit; /* Prevent overflowing when unnecessary */

        p {
            font-size: 0.95rem; /* Base font size is 1rem */
        }

        .tile__icon,
        .tile__buttons {
            flex: 0 0 auto;
        }

        /* Override the default behavior where buttons display as blocks */
        .tile__buttons button,
        .tile__buttons .btn,
        .tile__buttons [type='submit'] {
            display: inline-block;
            margin: 0.1rem; /* Reduce space used by buttons, default .5rem */
        }

        .tile__container {
            flex: 1 1 auto;
        }

        /* Add spacing between the elements in between */
        .tile__container {
            &:not(:first-child) {
                padding-left: 1rem;
            }

            &:not(:last-child) {
                padding-right: 1rem;
            }
        }

        .tile__title {
            line-height: 1.5rem;
            font-weight: bolder;
            margin: 0.1rem auto;
        }

        .tile__subtitle {
            line-height: 1.25rem;
            opacity: 0.7;
            margin: 0.1rem auto;
        }
    }
}