@mussonindustrial/pyro-mui-joy/src/classes/card.css

A port of Material UI Joy Theme for Ignition by Inductive Automation

/* A card is a generic container for grouping related UI elements and content.*/
[psc='Joy/Container/card'],
[psc='Joy/Container/card-vertical'],
[psc='Joy/Container/card-horizontal'] {
    @include variant-support(Card);
    @include variant-default(Card, plain);
    @include palette-default(Card, neutral);

    /* Calculations */
    --joy-Card-childRadius: max(
        (var(--joy-Card-radius) - var(--joy-variant-borderWidth, 0px)) -
            var(--joy-Card-padding),
        min(
            var(--joy-Card-padding) / 2,
            (var(--joy-Card-radius) - var(--joy-variant-borderWidth, 0px)) / 2
        )
    );
    --joy-AspectRatio-radius: var(--joy-Card-childRadius);
    --joy-unstable_actionMargin: calc(-1 * var(--joy-variant-borderWidth, 0px));
    --joy-unstable_actionRadius: var(--joy-Card-radius);
    --joy-CardCover-radius: calc(
        var(--joy-Card-radius) - var(--joy-variant-borderWidth, 0px)
    );
    --joy-CardOverflow-offset: calc(-1 * var(--joy-Card-padding));
    --joy-CardOverflow-radius: calc(
        var(--joy-Card-radius) - var(--joy-variant-borderWidth, 0px)
    );
    --joy-Divider-inset: calc(-1 * var(--joy-Card-padding));

    /* Default to medium size */
    --joy-Card-radius: var(--joy-radius-md);
    --joy-Card-padding: 1rem;

    padding: var(--joy-Card-padding);
    border-radius: var(--joy-Card-radius);
    /* box-shadow: var(--joy-shadow-sm); */
    font-family: var(--joy-fontFamily-body);
    position: relative;

    /* Defaults */
    border-style: none;

    /* Variant */
    color: var(--joy-Card-Color);
    background-color: var(--joy-Card-Bg, var(--joy-palette-background-surface));
    border-color: var(--joy-Card-Border);
    border-width: var(--joy-Card-borderWidth);
    border-style: var(--joy-Card-borderStyle);
}

[psc='Joy/Size/sm'] [psc='Joy/Container/card'],
[psc='Joy/Size/sm'][psc='Joy/Container/card'][psc='Joy/Container/card'],
[psc='Joy/Size/sm'] [psc='Joy/Container/card-horizontal'],
[psc='Joy/Size/sm'][psc='Joy/Container/card-horizontal'][psc='Joy/Container/card-horizontal'],
[psc='Joy/Size/sm'] [psc='Joy/Container/card-vertical'],
[psc='Joy/Size/sm'][psc='Joy/Container/card-vertical'][psc='Joy/Container/card-vertical'] {
    --joy-Card-radius: var(--joy-radius-sm);
    --joy-Card-padding: 0.5rem;
}

[psc='Joy/Size/md'] [psc='Joy/Container/card'],
[psc='Joy/Size/md'][psc='Joy/Container/card'][psc='Joy/Container/card'],
[psc='Joy/Size/md'] [psc='Joy/Container/card-horizontal'],
[psc='Joy/Size/md'][psc='Joy/Container/card-horizontal'][psc='Joy/Container/card-horizontal'],
[psc='Joy/Size/md'] [psc='Joy/Container/card-vertical'],
[psc='Joy/Size/md'][psc='Joy/Container/card-vertical'][psc='Joy/Container/card-vertical'] {
    --joy-Card-radius: var(--joy-radius-md);
    --joy-Card-padding: 1rem;
}

[psc='Joy/Size/lg'] [psc='Joy/Container/card'],
[psc='Joy/Size/lg'][psc='Joy/Container/card'][psc='Joy/Container/card'],
[psc='Joy/Size/lg'] [psc='Joy/Container/card-horizontal'],
[psc='Joy/Size/lg'][psc='Joy/Container/card-horizontal'][psc='Joy/Container/card-horizontal'],
[psc='Joy/Size/lg'] [psc='Joy/Container/card-vertical'],
[psc='Joy/Size/lg'][psc='Joy/Container/card-vertical'][psc='Joy/Container/card-vertical'] {
    --joy-Card-radius: var(--joy-radius-lg);
    --joy-Card-padding: 1.5rem;
    font-size: var(--joy-fontSize-md);
}

[psc='Joy/Container/card-overflow'] {
    align-self: stretch;
    position: relative;
    display: flex;
    flex-direction: var(--joy-_CardOverflow-flexDirection);
    margin: var(--joy-_CardOverflow-margin);
    border-radius: var(--joy-_CardOverflow-radius);
    padding: var(--joy-_CardOverflow-padding);
    --joy-variant-borderWidth: 0px;
}

[psc='Joy/Container/card-cover'] {
    align-self: stretch;
    position: absolute;
    display: block;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    z-index: 0;
    /* flex-direction: var(--joy-_CardOverflow-flexDirection); */
    /* margin: var(--joy-_CardOverflow-margin); */
    border-radius: var(--joy-CardCover-radius);
    /* --joy-variant-borderWidth: 0px; */
}

[psc='Joy/Container/card-vertical'] {
    --joy-_CardOverflow-flexDirection: column;
    --joy-AspectRatio-margin: 0 calc(-1 * var(--joy-Card-padding));
    --joy-_CardOverflow-margin: 0 var(--joy-CardOverflow-offset);
    --joy-_CardOverflow-padding: 0 var(--joy-Card-padding);

    flex-direction: var(--joy-_CardOverflow-flexDirection) !important;

    > [psc='Joy/Container/card-overflow']:first-child {
        --joy-AspectRatio-radius: calc(
                var(--joy-CardOverflow-radius) -
                    var(--joy-variant-borderWidth, 0px)
            )
            calc(
                var(--joy-CardOverflow-radius) -
                    var(--joy-variant-borderWidth, 0px)
            )
            0 0;
        --joy-_CardOverflow-radius: var(--joy-CardOverflow-radius)
            var(--joy-CardOverflow-radius) 0 0;
        --joy-_CardOverflow-margin: var(--joy-CardOverflow-offset)
            var(--joy-CardOverflow-offset) 0;
    }

    > [psc='Joy/Container/card-overflow'] {
        --joy-_CardOverflow-margin: var(--joy-CardOverflow-offset)
            var(--joy-CardOverflow-offset) 0 0;
    }

    > [psc='Joy/Container/card-overflow']:last-child {
        --joy-AspectRatio-radius: 0 0
            calc(
                var(--joy-CardOverflow-radius) -
                    var(--joy-variant-borderWidth, 0px)
            )
            calc(
                var(--joy-CardOverflow-radius) -
                    var(--joy-variant-borderWidth, 0px)
            );
        --joy-_CardOverflow-radius: 0 0 var(--joy-CardOverflow-radius)
            var(--joy-CardOverflow-radius);
        --joy-_CardOverflow-margin: 0 var(--joy-CardOverflow-offset)
            var(--joy-CardOverflow-offset);
    }
}

[psc='Joy/Container/card-horizontal'] {
    --joy-_CardOverflow-flexDirection: row;
    --joy-AspectRatio-margin: 0 calc(-1 * var(--joy-Card-padding));
    --joy-_CardOverflow-margin: var(--joy-CardOverflow-offset) 0;
    --joy-_CardOverflow-padding: var(--joy-Card-padding) 0;

    flex-direction: var(--joy-_CardOverflow-flexDirection) !important;

    > [psc='Joy/Container/card-overflow']:first-child {
        --joy-AspectRatio-radius: calc(
                var(--joy-CardOverflow-radius) -
                    var(--joy-variant-borderWidth, 0px)
            )
            0 0
            calc(
                var(--joy-CardOverflow-radius) -
                    var(--joy-variant-borderWidth, 0px)
            );
        --joy-_CardOverflow-radius: var(--joy-CardOverflow-radius) 0 0
            var(--joy-CardOverflow-radius);
        --joy-_CardOverflow-margin: var(--joy-CardOverflow-offset) 0px
            var(--joy-CardOverflow-offset) var(--joy-CardOverflow-offset);
    }

    > [psc='Joy/Container/card-overflow'] {
        --joy-_CardOverflow-margin: 0px 0px var(--joy-CardOverflow-offset)
            var(--joy-CardOverflow-offset);
    }

    > [psc='Joy/Container/card-overflow']:last-child {
        --joy-AspectRatio-radius: 0
            calc(
                var(--joy-CardOverflow-radius) -
                    var(--joy-variant-borderWidth, 0px)
            )
            calc(
                var(--joy-CardOverflow-radius) -
                    var(--joy-variant-borderWidth, 0px)
            )
            0;
        --joy-_CardOverflow-radius: 0 var(--joy-CardOverflow-radius)
            var(--joy-CardOverflow-radius) 0;
        --joy-_CardOverflow-margin: var(--joy-CardOverflow-offset)
            var(--joy-CardOverflow-offset) var(--joy-CardOverflow-offset) 0px;
    }
}