// Cards basic .card {
&.card-image { background-size: cover; background-position: center; width: 100%; [class*="rgba-"] { border-radius: $md-card-border-radius; } } // Cascading cards &.card-cascade { .view { &.view-cascade { box-shadow: $z-depth-1-half; border-radius: $md-card-border-radius; &.gradient-card-header { @extend .white-text; padding: $card-cascade-header-gradient-py $card-cascade-header-gradient-px; text-align: center; .card-header-title { font-weight: 500; } .btn-floating { background-color: $card-cascade-header-gradient-btn-floating-bgc; } } } } &.wider { box-shadow: none; background-color: transparent; .view { &.view-cascade { z-index: 2; } } .card-body { &.card-body-cascade { box-shadow: $z-depth-1; margin-left: $card-cascade-wider-card-body-mx; margin-right: $card-cascade-wider-card-body-mx; background: $card-cascade-wider-card-body-bg; z-index: 1; border-radius: 0 0 $md-card-border-radius $md-card-border-radius; } } &.reverse { .card-body { &.card-body-cascade { z-index: 3; margin-top: $card-cascade-reverse-mt; border-radius: $md-card-border-radius; box-shadow: $z-depth-1-half; } } } } &.narrower { margin-top: $card-cascade-narrower-mt; .view { &.view-cascade { margin-left: $card-cascade-narrowe-view-mx; margin-right: $card-cascade-narrowe-view-mx; margin-top: $card-cascade-narrower-view-mt; } } } &.panel-cascade { .view { text-align: center; color: $panel-cascade-view-color; } .list-group { .list-group-item { margin-bottom: 0; border: 0; border-bottom: 1px solid $panel-cascade-list-group-item-border-bottom; color: $panel-cascade-list-group-item-color; &:hover { background-color: $panel-cascade-list-group-item-bgc; } } } } } .btn-action { margin-top: $card-btn-action-my; margin-bottom: $card-btn-action-my; } .activator { position: absolute; right: 0; font-size: $card-activator-font-size; } .card-reveal { position: absolute; width: 100%; overflow-y: auto; top: 100%; height: 100%; z-index: 1; display: none; .content { position: relative; } } &.ovf-hidden { overflow: hidden; } .card-share { position: relative; .social-reveal { position: absolute; top: $card-share-social-reveal-top; right: $card-share-social-reveal-right; visibility: hidden; width: auto; transform: translateZ(0); transform: translateX(0); transition: $card-share-social-reveal-transition; } .social-reveal-active { z-index: 11; visibility: visible; transform: translateZ(0); transform: translateX(-48px); transition: $card-share-social-reveal-transition; } }
}
// Title and close button .card .card-reveal .card-title, .card-wrapper .card-rotating .card-title {
cursor: pointer;
} .card .card-reveal .card-title i, .card-wrapper .card-rotating .card-title i {
color: $card-reveal-title-i-color; position: absolute; right: $card-reveal-title-i-right;
}
// Rotating card .card-wrapper {
margin: 0; min-height: $card-wrapper-min-height; position: relative; perspective: $card-wrapper-perspective; .face { position: absolute; width: 100%; height: 100%; } /* Front side */ .card-up { height: $card-up-img-size; overflow: hidden; img { vertical-align: middle; } } .avatar { display: block; margin-top: $card-avatar-margin-top; overflow: hidden; width: $card-up-size; } .avatar { img { border: 5px solid $white-base; background: none repeat scroll 0 0 $white-base; width: 100%; } } /* Card with rotate on click */ .card-rotating { position: absolute; transform-style: $card-rotating-transform-style; .content { position: relative; } &.effect__click { &.flipped { .front { transform: $card-front-effect-click-transform; } .back { transform: $card-back-effect-click-transform; } } } } .front, .back { box-shadow: $z-depth-1; border-radius: $md-card-border-radius; backface-visibility: hidden; transition: $card-front-back-transition; } .back { transform: $card-back-transform; }
}
// Testimonial card .testimonial-card {
.card-up { overflow: hidden; height: $card-up-size; border-top-left-radius: $md-card-border-radius; border-top-right-radius: $md-card-border-radius; } .avatar { border-radius: $border-radius-circle; width: $card-up-size; margin-top: $card-avatar-margin-top; overflow: hidden; border: 5px solid $white-base; } .avatar img { width: 100%; } .card-body { text-align: center; }
}