.card {
position: relative; display: flex; flex-direction: column; min-width: 0; word-wrap: break-word; border: 1px solid rgba(0, 0, 0, 0.05); border-radius: .375rem; background-color: #fff; background-clip: border-box; > { hr { margin-right: 0; margin-left: 0; } .list-group { &:first-child .list-group-item:first-child { border-top-left-radius: .375rem; border-top-right-radius: .375rem; } &:last-child .list-group-item:last-child { border-bottom-right-radius: .375rem; border-bottom-left-radius: .375rem; } } }
}
.card-body {
padding: 1.5rem; flex: 1 1 auto;
}
.card-title {
margin-bottom: 1.25rem;
}
.card-subtitle {
margin-top: -.625rem; margin-bottom: 0;
}
.card-text:last-child {
margin-bottom: 0;
}
.card-link {
&:hover { text-decoration: none; } + .card-link { margin-left: 1.5rem; }
}
.card-header {
margin-bottom: 0; padding: 1.25rem 1.5rem; border-bottom: 1px solid rgba(0, 0, 0, 0.05); background-color: #fff; &:first-child { border-radius: calc(.375rem - 1px) calc(.375rem - 1px) 0 0; } + .list-group .list-group-item:first-child { border-top: 0; }
}
.card-footer {
padding: 1.25rem 1.5rem; border-top: 1px solid rgba(0, 0, 0, 0.05); background-color: #fff; &:last-child { border-radius: 0 0 calc(.375rem - 1px) calc(.375rem - 1px); }
}
.card-header-tabs {
margin-right: -.75rem; margin-bottom: -1.25rem; margin-left: -.75rem; border-bottom: 0;
}
.card-header-pills {
margin-right: -.75rem; margin-left: -.75rem;
}
.card-img-overlay {
position: absolute; top: 0; right: 0; bottom: 0; left: 0; padding: 1.25rem;
}
.card-img {
width: 100%; border-radius: calc(.375rem - 1px);
}
.card-img-top {
width: 100%; border-top-left-radius: calc(.375rem - 1px); border-top-right-radius: calc(.375rem - 1px);
}
.card-img-bottom {
width: 100%; border-bottom-right-radius: calc(.375rem - 1px); border-bottom-left-radius: calc(.375rem - 1px);
}
.card-deck {
display: flex; flex-direction: column; .card { margin-bottom: 15px; }
}
@media (min-width: 576px) {
.card-deck { margin-right: -15px; margin-left: -15px; flex-flow: row wrap; .card { display: flex; flex-direction: column; margin-right: 15px; margin-bottom: 0; margin-left: 15px; flex: 1 0; } }
}
.card-group {
display: flex; flex-direction: column; > .card { margin-bottom: 15px; }
}
@media (min-width: 576px) {
.card-group { flex-flow: row wrap; > .card { margin-bottom: 0; flex: 1 0; + .card { margin-left: 0; border-left: 0; } &:first-child { border-top-right-radius: 0; border-bottom-right-radius: 0; .card-img-top, .card-header { border-top-right-radius: 0; } .card-img-bottom, .card-footer { border-bottom-right-radius: 0; } } &:last-child { border-top-left-radius: 0; border-bottom-left-radius: 0; .card-img-top, .card-header { border-top-left-radius: 0; } .card-img-bottom, .card-footer { border-bottom-left-radius: 0; } } &:only-child { border-radius: .375rem; .card-img-top, .card-header { border-top-left-radius: .375rem; border-top-right-radius: .375rem; } .card-img-bottom, .card-footer { border-bottom-right-radius: .375rem; border-bottom-left-radius: .375rem; } } &:not(:first-child):not(:last-child):not(:only-child) { border-radius: 0; .card-img-top, .card-img-bottom, .card-header, .card-footer { border-radius: 0; } } } }
}
.card-columns .card {
margin-bottom: 1.25rem;
}
@media (min-width: 576px) {
.card-columns { column-count: 3; column-gap: 1.25rem; orphans: 1; widows: 1; .card { display: inline-block; width: 100%; } }
}
.accordion .card {
&:not(:first-of-type) { &:not(:last-of-type) { border-bottom: 0; border-radius: 0; } .card-header:first-child { border-radius: 0; } } &:first-of-type { border-bottom: 0; border-bottom-right-radius: 0; border-bottom-left-radius: 0; } &:last-of-type { border-top-left-radius: 0; border-top-right-radius: 0; }
}
.card {
margin-bottom: 30px; border: 0; box-shadow: 0 0 2rem 0 rgba(136, 152, 170, 0.15);
}
.card-translucent {
background-color: rgba(18, 91, 152, 0.08);
}
.card-deck .card {
margin-bottom: 30px;
}
.card.shadow {
border: 0 !important;
}
@media (min-width: 576px) {
.card-columns { column-count: 1; }
}
@media (min-width: 768px) {
.card-columns { column-count: 2; }
}
@media (min-width: 1200px) {
.card-columns { column-count: 3; column-gap: 1.25rem; }
}
.card-lift–hover:hover {
transition: all .15s ease; transform: translateY(-20px);
}
@media screen and (prefers-reduced-motion: reduce) {
.card-lift--hover:hover { transition: none; }
}
.card-blockquote {
position: relative; padding: 2rem; .svg-bg { position: absolute; top: -94px; left: 0; display: block; width: 100%; height: 95px; }
}
.card-serial-number {
font-size: 1.625rem; display: flex; justify-content: space-between; > div:not(:last-child) { display: flex; flex: 1 1 auto; &:after { position: relative; left: -2px; content: '-'; text-align: center; flex: 1 1 auto; } }
}
@media (max-width: 575.98px) {
.card-serial-number { font-size: 1.0625rem; }
}
.card-pricing {
.card-header { padding-top: 1.25rem; padding-bottom: 1.25rem; } .list-unstyled li { padding: .5rem 0; color: #8898aa; } &.popular { z-index: 1; border: 3px solid #5e72e4 !important; }
}
@media (min-width: 768px) {
.card-pricing.zoom-in { z-index: 1; transform: scale(1.1); }
}
.card-profile-image {
position: relative; img { position: absolute; left: 50%; max-width: 140px; transition: all .15s ease; transform: translate(-50%, -50%) scale(1); border: 3px solid #fff; border-radius: .375rem; &:hover { transform: translate(-50%, -50%) scale(1.03); } }
}
.card-profile-stats {
padding: 1rem 0; > div { margin-right: 1rem; padding: .875rem; text-align: center; &:last-child { margin-right: 0; } .heading { font-size: 1.1rem; font-weight: bold; display: block; } .description { font-size: .875rem; color: #adb5bd; } }
}
.card-profile-actions {
padding: .875rem;
}
.card-stats {
.card-body { padding: 1rem 1.5rem; } .card-status-bullet { position: absolute; top: 0; right: 0; transform: translate(50%, -50%); }
}
.chart {
position: relative; height: 350px;
}
.chart-sm {
height: 230px;
}
.chart-legend {
font-size: .875rem; display: flex; margin-top: 2.5rem; text-align: center; color: #8898aa; justify-content: center;
}
.chart-legend-item {
display: inline-flex; align-items: center; + .chart-legend-item { margin-left: 1rem; }
}
.chart-legend-indicator {
display: inline-block; width: .5rem; height: .5rem; margin-right: .375rem; border-radius: 50%;
}
chart-tooltip {
z-index: 0; .arrow { top: 100%; left: 50%; transform: translateX(-50%) translateX(-0.5rem); }
}
.chart-info-overlay {
position: absolute; z-index: 1; top: 0; left: 5%; max-width: 350px; padding: 20px;
}
.close {
transition: all .15s ease; > span:not(.sr-only) { font-size: 1.25rem; line-height: 17px; display: block; width: 1.25rem; height: 1.25rem; transition: all .15s ease; color: rgba(0, 0, 0, 0.6); border-radius: 50%; background-color: transparent; } &:hover, &:focus { color: rgba(0, 0, 0, 0.9); outline: none; background-color: transparent; } &:hover span:not(.sr-only), &:focus span:not(.sr-only) { background-color: transparent; }
}
.close-dark {
> span:not(.sr-only) { color: rgba(255, 255, 255, 0.8); } &:hover > span:not(.sr-only), &:focus > span:not(.sr-only) { color: white; }
}
.accordion .card-header {
position: relative; cursor: pointer; &:after { font: normal normal normal 14px/1 NucleoIcons; line-height: 0; position: absolute; top: 50%; right: 1.5rem; content: '\ea0f'; transition: all 0.15s cubic-bezier(0.68, -0.55, 0.265, 1.55); transform: translateY(-50%); } &[aria-expanded='false']:after { content: '\ea0f'; } &[aria-expanded='true'] { &:after { transform: rotate(180deg); } .heading { color: #5e72e4; } }
}
@media screen and (prefers-reduced-motion: reduce) {
.accordion .card-header:after { transition: none; }
}
.footer.has-cards {
position: relative; overflow: hidden; margin-top: -420px; padding-top: 500px; pointer-events: none; background: transparent; &:before { position: absolute; top: 600px; right: 0; left: 0; height: 2000px; content: ''; transform: skew(0, -8deg); background: #f7fafc; } .container { position: relative; pointer-events: auto; }
}
.nav-wrapper + .card {
border-top-left-radius: 0; border-top-right-radius: 0; border-bottom-right-radius: .375rem; border-bottom-left-radius: .375rem;
}
.card .table {
margin-bottom: 0;
}