.border-0 { .card, .nav-link { border: 0 !important; } .card-stacked::after { border: 1px solid rgba($text-muted, 0.07) !important; } } .card { box-shadow: $card-shadow; border: $card-border-width solid $card-border-color; background: var(--#{$variable-prefix}card-bg, #{$card-bg}); @media print { border: none; box-shadow: none; } @at-root a#{&} { color: inherit; @include transition(box-shadow $transition-time); &:hover { text-decoration: none; box-shadow: $card-shadow-hover; } } } // Card stamp .card-stamp { --stamp-size: 7rem; position: absolute; top: 0; right: 0; width: calc(var(--stamp-size) * 1); height: calc(var(--stamp-size) * 1); max-height: 100%; border-top-right-radius: $border-radius; overflow: hidden; pointer-events: none; } .card-stamp-icon { background: $text-muted; color: $white; display: flex; align-items: center; justify-content: center; border-radius: $border-radius-pill; width: calc(var(--stamp-size) * 1); height: calc(var(--stamp-size) * 1); position: relative; top: calc(var(--stamp-size) * -.25); right: calc(var(--stamp-size) * -.25); font-size: calc(var(--stamp-size) * .75); transform: rotate(10deg); opacity: .075; .icon { stroke-width: 2; width: calc(var(--stamp-size) * .75); height: calc(var(--stamp-size) * .75); } } // Card image .card-img, .card-img-start { @include border-start-radius($card-inner-border-radius); } .card-img, .card-img-end { @include border-end-radius($card-inner-border-radius); } .card-img-overlay { display: flex; flex-direction: column; justify-content: flex-end; } .card-img-overlay-dark { background-image: $overlay-gradient; } .card-inactive { pointer-events: none; box-shadow: none; .card-body { opacity: .64; } } .card-active { position: relative; background-color: rgba($primary, .03); z-index: 1; &:before { position: absolute; top: -1px; right: -1px; bottom: -1px; left: -1px; content: ""; border: 1px solid $primary; border-radius: inherit; } } .card-link { color: inherit; &:hover { color: inherit; text-decoration: none; box-shadow: 0 1px 6px 0 rgba(0, 0, 0, .08); } } .card-btn { display: flex; align-items: center; justify-content: center; padding: $card-spacer-y $card-spacer-x; text-align: center; @include transition(background $transition-time); border-top: 1px solid var(--#{$variable-prefix}border-color); flex: 1; color: inherit; font-weight: $font-weight-medium; &:hover { text-decoration: none; background: $active-bg; } & + & { border-left: 1px solid var(--#{$variable-prefix}border-color); } } .card-stacked { position: relative; &:after { position: absolute; top: -5px; right: 5px; left: 5px; height: 5px; content: ""; background: $card-bg; border: 1px solid $card-border-color; border-radius: $card-border-radius $card-border-radius 0 0; } } .card-cover { position: relative; padding: $card-spacer-y $card-spacer-x; background: #666666 no-repeat center/cover; &:before { position: absolute; top: 0; right: 0; bottom: 0; left: 0; content: ""; background: rgba($dark, .48); } &:first-child, &:first-child:before { border-radius: $border-radius $border-radius 0 0; } } .card-cover-blurred { &:before { backdrop-filter: blur(2px); } } .card-actions { margin-left: auto; font-size: $h5-font-size; a { text-decoration: none; } } .card-header { color: inherit; display: flex; align-items: center; background: transparent; } .card-header-tabs { flex: 1; margin: (- $card-spacer-y) (- $card-spacer-x); } .card-header-pills { flex: 1; } /* Card footer */ .card-footer { margin-top: auto; } .card-footer-gray { border-top: 0; background: $gray-50; } .card-progress { height: .25rem; &:last-child { border-radius: 0 0 2px 2px; } &:first-child { border-radius: 2px 2px 0 0; } } .card-meta { color: $text-muted; } .card-title { display: block; margin: 0 0 1rem; font-size: $h3-font-size; font-weight: $font-weight-medium; color: $headings-color; line-height: 1.5rem; @at-root a#{&}:hover { color: inherit; } .card-header & { margin: .125rem 0; } } .card-subtitle { margin-top: -$card-spacer-y; margin-bottom: $card-title-spacer-y; color: $text-muted; .card-header & { margin: -.125rem 0 0; } } .card-body { > :last-child { margin-bottom: 0; } .card-sm > & { padding: .75rem; } .card-md > & { @include media-breakpoint-up(md) { padding: 2rem; } } .card-lg > & { @include media-breakpoint-up(md) { padding: 2rem; } @include media-breakpoint-up(lg) { padding: 4rem; } } @media print { padding: 0; } & + & { border-top: 1px solid $border-color; } } .card-body-scrollable { overflow: auto; } /** Card optinos */ .card-options { top: 1.5rem; right: .75rem; display: flex; margin-left: auto; } .card-options-link { display: inline-block; min-width: 1rem; margin-left: .25rem; color: $text-muted; } .card-dropdown { line-height: 1; color: $text-muted; .icon { width: 1.5rem; height: 1.5rem; font-size: 1.5rem; stroke-width: 1; } } /** Card status */ .card-status-top { position: absolute; top: 0; right: 0; left: 0; height: $card-status-size; border-radius: $card-border-radius $card-border-radius 0 0; } .card-status-start { position: absolute; right: auto; bottom: 0; width: $card-status-size; height: 100%; border-radius: $card-border-radius 0 0 $card-border-radius; } .card-status-bottom { position: absolute; top: initial; bottom: 0; width: 100%; height: $card-status-size; border-radius: 0 0 $card-border-radius $card-border-radius; } /** Card table */ .card-table { margin-bottom: 0 !important; tr { .card-header ~ .table-responsive &, .card-header ~ & { &:first-child td { //border-top: 0; } } td, th { //border-top: 1px solid $border-color; &:first-child { padding-left: $card-spacer-x; } &:last-child { padding-right: $card-spacer-x; } } } thead { tr { &:first-child { td, th { border-top: 0; } } } } tbody { tr:last-child { td, th { border-bottom: 0; } } } .card-body + & { border-top: 1px solid $border-color; } } /* Card code */ .card-code { padding: 0; .highlight { margin: 0; border: 0; } pre { margin: 0 !important; border: 0 !important; } } /* Card chart */ .card-chart { position: relative; z-index: 1; height: 3.5rem; } /** Card avatar */ .card-avatar { margin-left: auto; margin-right: auto; box-shadow: 0 0 0 .25rem $card-bg; margin-top: calc(-1 * calc(var(--#{$variable-prefix}avatar-size) * .5)); } /* Card list group */ .card-list-group { .card-body + & { border-top: 1px solid $border-color; } .list-group-item { padding-right: $card-spacer-x; padding-left: $card-spacer-x; border-right: 0; border-left: 0; border-radius: 0; &:last-child { border-bottom: 0; } &:first-child { border-top: 0; } } } /** Card tabs */ .card-tabs { .nav-tabs { position: relative; z-index: $zindex-dropdown; border-bottom: 0; .nav-link { background: $card-cap-bg; border: $card-border-width solid $card-border-color; border-bottom: 0; &.active, &:active, &:hover { border-color: $card-border-color; } &.active { color: $headings-color; background: $card-bg; } } .nav-item { &:not(:first-child) { .nav-link { border-top-left-radius: 0; } } &:not(:last-child) { .nav-link { border-top-right-radius: 0; } } + .nav-item { margin-left: -1px; } } } .nav-tabs-bottom { margin-bottom: 0; .nav-item { margin-top: -1px; margin-bottom: 0; .nav-link { border-top-width: 0; border-bottom: $card-border-width solid $card-border-color; border-top-left-radius: 0; border-top-right-radius: 0; } } } .card { margin: 0; border-top-left-radius: 0; } }