//https://www.google.com/design/spec/components/cards.html#cards-content-blocks // Card resting elevation: 2dp .card { border: 0; margin-bottom: 30px; margin-top: 30px; border-radius: $border-radius-large; color: $gray-dark; background: $white-color; width: 100%; .card-category:not([class*="text-"]) { color: $gray-color; } .card-category{ margin-top: 10px; .material-icons{ position: relative; top: 8px; line-height: 0; } } .form-check { margin-top: 5px; } .card-title{ margin-top: 0.625rem; &:last-child{ margin-bottom: 0; } } // Cards have a default elevation of 2dp. @include box-shadow($bmd-shadow-2dp); @extend %std-font; &.no-shadow { .card-header-image, .card-header-image img { box-shadow: none !important; } } .card-body, .card-footer { padding: $padding-card-body-y $padding-card-body-x; } .card-body { & + .card-footer{ padding-top: 0rem; border: 0; border-radius: $border-radius-large; } } .card-footer { display: flex; align-items: center; background-color: transparent; border: 0; .author, .stats { display: inline-flex; } .stats { color: $gray-color; .material-icons { position: relative; top: -10px; margin-right: 3px; margin-left: 3px; font-size: 18px; } } } &.bmd-card-raised { // Card raised elevation: 8dp @include box-shadow($bmd-shadow-8dp); } @include media-breakpoint-up(lg) { // On desktop, cards can have a resting elevation of 0dp and gain an elevation of 8dp on hover. &.bmd-card-flat { box-shadow: none; } } .card-header { border-bottom: none; background: transparent; .title{ color: $white-color; } &:not([class*="card-header-"]){ // @include shadow-big(); } .nav-tabs { padding: 0; } &.card-header-image { position: relative; padding: 0; z-index: 1; margin-left: 15px; margin-right: 15px; margin-top: -30px; border-radius: $border-radius-large; img { width: 100%; border-radius: $border-radius-large; pointer-events: none; @include shadow-big-image(); } .card-title { position: absolute; bottom: 15px; left: 15px; color: $white-color; font-size: $font-size-h4; text-shadow: 0 2px 5px rgba(33, 33, 33, 0.5); } .colored-shadow{ transform: scale(0.94); top: 12px; filter: blur(12px); position: absolute; width: 100%; height: 100%; background-size: cover; z-index: -1; transition: opacity .45s; opacity: 0; } &.no-shadow{ box-shadow: none; &.shadow-normal{ @include shadow-big(); } .colored-shadow{ display: none !important; } } } } .card-header-primary .card-icon, .card-header-primary .card-text, .card-header-primary:not(.card-header-icon):not(.card-header-text), &.bg-primary, &.card-rotate.bg-primary .front, &.card-rotate.bg-primary .back{ background: linear-gradient(60deg, $purple-400, $purple-600); } .card-header-info .card-icon, .card-header-info .card-text, .card-header-info:not(.card-header-icon):not(.card-header-text), &.bg-info, &.card-rotate.bg-info .front, &.card-rotate.bg-info .back{ background: linear-gradient(60deg, $cyan-400, $cyan-600); } .card-header-success .card-icon, .card-header-success .card-text, .card-header-success:not(.card-header-icon):not(.card-header-text), &.bg-success, &.card-rotate.bg-success .front, &.card-rotate.bg-success .back{ background: linear-gradient(60deg, $green-400, $green-600); } .card-header-warning .card-icon, .card-header-warning .card-text, .card-header-warning:not(.card-header-icon):not(.card-header-text), &.bg-warning, &.card-rotate.bg-warning .front, &.card-rotate.bg-warning .back{ background: linear-gradient(60deg, $orange-400, $orange-600); } .card-header-danger .card-icon, .card-header-danger .card-text, .card-header-danger:not(.card-header-icon):not(.card-header-text), &.bg-danger, &.card-rotate.bg-danger .front, &.card-rotate.bg-danger .back{ background: linear-gradient(60deg, $red-400, $red-600); } .card-header-rose .card-icon, .card-header-rose .card-text, .card-header-rose:not(.card-header-icon):not(.card-header-text), &.bg-rose, &.card-rotate.bg-rose .front, &.card-rotate.bg-rose .back{ background: linear-gradient(60deg, $pink-400, $pink-600); } .card-header-primary .card-icon, .card-header-primary:not(.card-header-icon):not(.card-header-text), .card-header-primary .card-text{ @include shadow-big-color($brand-primary); //@include shadow-8dp-color($brand-primary); //@include shadow-16dp-color($brand-primary); } .card-header-danger .card-icon, .card-header-danger:not(.card-header-icon):not(.card-header-text), .card-header-danger .card-text{ @include shadow-big-color($brand-danger); } .card-header-rose .card-icon, .card-header-rose:not(.card-header-icon):not(.card-header-text), .card-header-rose .card-text{ @include shadow-big-color($brand-rose); } .card-header-warning .card-icon, .card-header-warning:not(.card-header-icon):not(.card-header-text), .card-header-warning .card-text{ @include shadow-big-color($brand-warning); } .card-header-info .card-icon, .card-header-info:not(.card-header-icon):not(.card-header-text), .card-header-info .card-text{ @include shadow-big-color($brand-info); } .card-header-success .card-icon, .card-header-success:not(.card-header-icon):not(.card-header-text), .card-header-success .card-text{ @include shadow-big-color($brand-success); } [class*="card-header-"], &[class*="bg-"]{ color: $white-color; .card-title a, .card-title, .icon i{ color: $white-color; } .icon i{ border-color: rgba(255, 255, 255, 0.25); } .author a, .stats, .card-category, .card-description{ color: $white-transparent; } .author a{ &:hover, &:focus, &:active{ color: $white-color; } } } .author{ .avatar{ width: 30px; height: 30px; overflow: hidden; border-radius: 50%; margin-right: 5px; } a{ color: $black-color; text-decoration: none; .ripple-container{ display: none; } } } .card-category-social{ .fa{ font-size: 24px; position: relative; margin-top: -4px; top: 2px; margin-right: 5px; } .material-icons{ position: relative; top: 5px; } } &[class*="bg-"], &[class*="bg-"] .card-body{ border-radius: $border-radius-large; h1, h2, h3{ small{ color: $white-transparent; } } } .card-stats{ background: transparent; display: flex; .author, .stats{ display: inline-flex; } } } .card { box-shadow: 0 1px 4px 0 rgba(0,0,0,0.14); .table tr:first-child td{ border-top: none; } .card-title{ margin-top: 0; margin-bottom: 3px; } .card-body{ padding: $padding-card-body-y 20px; position: relative; .form-group { margin: 8px 0 0; } } .card-header { z-index: 3 !important; .card-title{ margin-bottom: 3px; } .card-category{ margin: 0; } &.card-header-text { display: inline-block; &:after { content: ""; display: table; } } &.card-header-icon, &.card-header-text { i { width: 33px; height: 33px; text-align: center; line-height: 33px; } .card-title{ margin-top: 15px; color: $black-color; } h4{ font-weight: 300; } } &.card-header-tabs { .nav-tabs { background: transparent; padding: 0; } .nav-tabs-title { float: left; padding: 10px 10px 10px 0; line-height: 24px; } } } &.card-plain { .card-header { &.card-header-icon + .card-body .card-title, &.card-header-icon + .card-body .card-category { margin-top: -20px; } } } .card-actions { position: absolute; z-index: 1; top: -50px; width: calc(100% - 30px); left: 17px; right: 17px; text-align: center; .card-header{ padding: 0; min-height: 160px; } .btn { padding-left: 12px; padding-right: 12px; } .fix-broken-card { position: absolute; top: -65px; } } &.card-chart { .card-footer i:nth-child(1n+2){ width: 18px; text-align: center; } .card-category{ margin: 0; } } .card-body + .card-footer, .card-footer{ padding: 0; padding-top: 10px; margin: 0 15px 10px; border-radius: 0; justify-content: space-between; align-items: center; h6 { width: 100%; } .stats{ color: #999999; font-size: 12px; line-height: 22px; .card-category{ padding-top: 7px; padding-bottom: 7px; margin: 0; } .material-icons{ position: relative; top: 4px; font-size: 16px; } } } [class*="card-header-"] { margin: 0px 15px 0; padding: 0; .card-title + .card-category{ color: rgba(255, 255, 255, 0.8); a { color: $white-color; } } &:not(.card-header-icon):not(.card-header-text):not(.card-header-image){ border-radius: $border-radius-base; margin-top: -20px; padding: 15px; } .card-icon, .card-text{ border-radius: $border-radius-base; background-color: $gray-color; padding: 15px; margin-top: -20px; margin-right: 15px; float: left; } .card-text{ float: none; display: inline-block; margin-right: 0; .card-title{ color: $white-color; margin-top: 0; } } position: relative; .ct-chart{ .card-title{ color: $white-color; } .card-category{ margin-bottom: 0; color: rgba($white-color, .62); } .ct-label{ color: rgba($white-color, .7); } .ct-grid{ stroke: rgba(255, 255, 255, 0.2); } .ct-series-a .ct-point, .ct-series-a .ct-line, .ct-series-a .ct-bar, .ct-series-a .ct-slice-donut{ stroke: rgba(255,255,255,.8); } .ct-series-a .ct-slice-pie, .ct-series-a .ct-area{ fill: rgba(255,255,255,.4); } .ct-series-a .ct-bar{ stroke-width: 10px; } .ct-point{ stroke-width: 10px; stroke-linecap: round; } .ct-line{ fill: none; stroke-width: 4px; } } } [data-header-animation="true"] { @include transform-translate-y(0); -webkit-transition: all 300ms cubic-bezier(0.34, 1.61, 0.7, 1); -moz-transition: all 300ms cubic-bezier(0.34, 1.61, 0.7, 1); -o-transition: all 300ms cubic-bezier(0.34, 1.61, 0.7, 1); -ms-transition: all 300ms cubic-bezier(0.34, 1.61, 0.7, 1); transition: all 300ms cubic-bezier(0.34, 1.61, 0.7, 1); } &:hover { [data-header-animation="true"]{ @include transform-translate-y(-50px); } } .map { height: 280px; border-radius: $border-radius-large; margin-top: 15px; &.map-big{ height: 420px; } } .card-body.table-full-width{ padding: 0; } .card-plain .card-header-icon { margin-right: 15px !important; } } .table-sales{ margin-top: 40px; } .iframe-container { width: 100%; iframe { width: 100%; height: 500px; border: 0; @include shadow-big(); } } .card-wizard { .nav.nav-pills { .nav-item { margin: 0; .nav-link { padding: 6px 15px !important; } } } .nav-pills:not(.flex-column) .nav-item + .nav-item:not(:first-child) { margin-left: 0; } .nav-item .nav-link.active, .nav-item .nav-link:hover, .nav-item .nav-link:focus { background-color: inherit !important; box-shadow: none !important; } .input-group-text { padding: 6px 15px 0px !important; } .card-footer { border-top: none !important; } } .card-chart, .card-product { .card-body + .card-footer { border-top: 1px solid #eee; } } .card-product{ .price{ color: inherit; } } .card-collapse { margin-bottom: 15px; .card .card-header a[aria-expanded="true"]{ color: #e91e63; } }