mybuddy/dashboard/static_src/scss/cards.scss

@use 'sass:map';

%card-header-text {
    font-size: $h4-font-size;
    font-weight: $headings-font-weight;
    line-height: $headings-line-height;
}

.card-dashboard {
    margin-bottom: $spacer;

    .card-header {
        @extend %card-header-text;
        margin-bottom: 0;
    }

    .card-body {
        .card-title {
            @extend %card-header-text;
        }

        .card-text {
            color: $text-muted;
        }

        // Offset horizontal padding in dashboard cards with a carousel.
        .carousel {
            margin-left: -$card-spacer-x;
            margin-right: -$card-spacer-x;
            padding-left: $card-spacer-x;
            padding-right: $card-spacer-x;
        }
    }

    .list-group {
        .list-group-item {
            color: $white;
        }
    }
}

.card-diaperchange {
    border-color: map.get($theme-colors, 'danger');

    .card-header, .card-header a {
        background-color: map.get($theme-colors, 'danger');
        color: map.get($theme-colors, 'light');
    }

    .card-body {
        color: map.get($theme-colors, 'danger');
    }

    .progress {
        height: $progress-height * 2;
    }
}

.card-feeding,
.card-pumping {
    border-color: map.get($theme-colors, 'primary');

    .card-header, .card-header a {
        background-color: map.get($theme-colors, 'primary');
        color: map.get($theme-colors, 'light');
    }

    .card-body {
        color: map.get($theme-colors, 'primary');

        // Last feeding method header in card.
        .last-feeding-method {
            font-size: 2em;
        }
    }
}

.card-sleep {
    border-color: map.get($theme-colors, 'secondary');

    .card-header, .card-header a {
        background-color: map.get($theme-colors, 'secondary');
        color: map.get($theme-colors, 'light');
    }
}

.card-statistics, .card-timer {
    border-color: map.get($theme-colors, 'light');

    .card-header {
        background-color: map.get($theme-colors, 'light');
        color: map.get($theme-colors, 'dark');

        a {
            color: map.get($theme-colors, 'dark');
        }
    }

    .card-body {
        color: map.get($theme-colors, 'light');

        .container {
            padding: 0;
        }
    }
}

.card-tummytime {
    border-color: map.get($theme-colors, 'success');

    .card-header, .card-header a {
        background-color: map.get($theme-colors, 'success');
        color: map.get($theme-colors, 'light');
    }

    .card-body {
        color: map.get($theme-colors, 'success');
    }
}