// // card.scss // Extended from Bootstrap //
// // Bootstrap Overrides ===================================== //
.card {
margin-bottom: $card-margin-bottom; border-color: $card-outline-color; // box-shadow: $card-box-shadow; box-shadow: $card-box-shadow-primary; &.light-shadow{ box-shadow: $card-box-shadow; }
}
.card > * {
flex-shrink: 0;
}
// Header
.card-header {
display: flex; flex-direction: row; align-items: center; height: $card-header-height; padding-top: $card-spacer-y / 2; padding-bottom: $card-spacer-y / 2; > *:first-child { flex: 1; }
}
// Title
.card-title {
margin-bottom: $card-spacer-y / 2;
}
// // Dashkit =================================== //
// Card header // // Make sure the card header is always the same height with its content // centered vertically
.card-header-title {
margin-bottom: 0;
}
.card-header-tabs {
margin-top: -$card-spacer-y / 2; margin-bottom: -$card-spacer-y / 2; margin-left: 0; margin-right: 0;
}
.card-header-tabs .nav-link {
padding-top: calc((#{$card-header-height} - 1em * #{$line-height-base}) / 2) !important; padding-bottom: calc((#{$card-header-height} - 1em * #{$line-height-base}) / 2) !important;
}
// Card table // // Make sure the card table content is aligned with the rest of the card content
.card-table {
margin-bottom: 0;
}
.card-table thead th {
border-top-width: 0;
}
.card-table thead th, .card-table tbody td {
&:first-child { padding-left: $card-spacer-x !important; } &:last-child { padding-right: $card-spacer-x !important; }
}
.card > .card-table:first-child, .card > .table-responsive:first-child > .card-table {
> thead, > tbody, > tfoot { &:first-child { > tr:first-child { > th, > td { &:first-child { border-top-left-radius: $card-border-radius; } &:last-child { border-top-right-radius: $card-border-radius; } } } } }
}
// Card avatar // // Moves card avatar up by 50%
.card-avatar {
display: block !important; margin-left: auto; margin-right: auto; margin-bottom: $card-spacer-y;
}
.card-avatar-top {
margin-top: -($card-spacer-x + $avatar-size-base / 2);
}
.card-avatar-top.avatar-xs {
margin-top: -($card-spacer-x + $avatar-size-xs / 2);
}
.card-avatar-top.avatar-sm {
margin-top: -($card-spacer-x + $avatar-size-sm / 2);
}
.card-avatar-top.avatar-lg {
margin-top: -($card-spacer-x + $avatar-size-lg / 2);
}
.card-avatar-top.avatar-xl {
margin-top: -($card-spacer-x + $avatar-size-xl / 2);
}
.card-avatar-top.avatar-xxl {
margin-top: -($card-spacer-x + $avatar-size-xxl / 2);
}
// Card dropdown // // Places dropdowns in the top right corner
.card-dropdown {
position: absolute; top: $card-spacer-x; right: $card-spacer-x;
}
// Card inactive // // Adds dashed border and removes background
.card-inactive {
border-color: $border-color; border-style: dashed; background-color: transparent; box-shadow: none;
}
// Card flush // // Removes borders and background
.card-flush {
background: none; border: none; box-shadow: none;
}
// Card sizing // // Affects card padding
.card-sm .card-body, .card-sm .card-footer-boxed {
padding: $card-spacer-x-sm;
}
// Card header flush // // Removes border between card header and body and adjusts spacing
.card-header-flush {
border-bottom: 0;
}
.card-header-flush + .card-body {
padding-top: 0;
}
// Card fill // // Fills the whole available space to fit the height of the neighboring card
.card-fill {
height: calc(100% - #{$card-margin-bottom});
}
.card-fill .card-body {
flex-grow: 0; margin-top: auto; margin-bottom: auto;
}
// Responsive
.card-fill {
@each $breakpoint, $value in $grid-breakpoints { &-#{$breakpoint} { @include media-breakpoint-up(#{$breakpoint}) { height: calc(100% - #{$card-margin-bottom}); .card-body { flex-grow: 0; margin-top: auto; margin-bottom: auto; } } } }
}
// Card adjust // // Limits the height to the height of the neighboring card and adds a scrollbar to the card body
.card-adjust {
height: 0; min-height: 100%;
}
.card-adjust .card {
height: calc(100% - #{$card-margin-bottom});
}
.card-adjust .card-body {
height: calc(100% - #{$card-header-height}); overflow-y: auto;
}
// Responsive
.card-adjust {
@each $breakpoint, $value in $grid-breakpoints { &-#{$breakpoint} { @include media-breakpoint-up(#{$breakpoint}) { height: 0; min-height: 100%; .card { height: calc(100% - #{$card-margin-bottom}); } .card-body { height: calc(100% - #{$card-header-height}); overflow-y: auto; } } } }
}
// Card footer boxed
.card-footer-boxed {
padding-right: 0; padding-bottom: $card-spacer-x; padding-left: 0; margin-left: $card-spacer-x; margin-right: $card-spacer-x;
}