mybuddy/dashboard/static_src/scss/cards.scss

124 lines
2.5 KiB
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;
}
}
.progress {
height: $progress-height * 2;
}
}
.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');
}
}