165 lines
2.9 KiB
SCSS
165 lines
2.9 KiB
SCSS
$card-over-bg-zindex:2;
|
|
$card-under-bg-zindex:1;
|
|
|
|
/*Extending Cards Features*/
|
|
.row{margin-bottom:$globalMargin;}
|
|
.card {
|
|
-webkit-transform: translate3d(0,0,0);
|
|
background-size: cover;
|
|
border: $rounded-0 !important;
|
|
max-height: 150000px;
|
|
margin-bottom:$globalMargin;
|
|
background-position: center center !important;
|
|
}
|
|
|
|
.cover-slider .card{margin-bottom:0px!important;}
|
|
[data-card-height="cover"].card{margin-bottom:0px!important;}
|
|
.card-style {
|
|
overflow: hidden;
|
|
margin: 0px 16px $globalMargin 16px;
|
|
border-radius: $rounded-card-style;
|
|
border: none;
|
|
box-shadow: $globalShadow;
|
|
.card-body {
|
|
padding: 15px;
|
|
}
|
|
}
|
|
.card-style .card-overlay{
|
|
border-radius: $rounded-card-style;
|
|
}
|
|
|
|
.card-body {
|
|
z-index: $card-over-bg-zindex;
|
|
}
|
|
.card-header {
|
|
z-index: $card-over-bg-zindex;
|
|
}
|
|
.card-footer {
|
|
z-index: $card-over-bg-zindex;
|
|
}
|
|
.card-top {
|
|
z-index: $card-over-bg-zindex;
|
|
position: absolute;
|
|
left: 0px;
|
|
right: 0px;
|
|
top: 0px;
|
|
}
|
|
.card-bottom {
|
|
z-index: $card-over-bg-zindex;
|
|
position: absolute;
|
|
left: 0px;
|
|
right: 0px;
|
|
bottom: 0px;
|
|
}
|
|
.card-center {
|
|
z-index: $card-over-bg-zindex;
|
|
position: absolute;
|
|
left: 0px;
|
|
right: 0px;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
}
|
|
.card-overlay {
|
|
left: 0px;
|
|
right: 0px;
|
|
top: 0px;
|
|
bottom: 0px;
|
|
position: absolute;
|
|
z-index: $card-under-bg-zindex;
|
|
}
|
|
.card-image {
|
|
display: block;
|
|
width: 100%;
|
|
min-height: 250px;
|
|
overflow: hidden;
|
|
position: absolute;
|
|
width: 100%;
|
|
img {
|
|
transition: all 450ms ease;
|
|
}
|
|
}
|
|
.card-overflow {
|
|
overflow: visible !important;
|
|
z-index: 20;
|
|
}
|
|
[data-card-height] {
|
|
p {
|
|
padding-bottom: 0px;
|
|
}
|
|
}
|
|
|
|
/*Card Effects*/
|
|
.card-scale-image {
|
|
transform: scale(1.05, 1.05) !important;
|
|
}
|
|
.card-rotate-image {
|
|
transform: rotate(5deg) scale(1.2, 1.2) !important;
|
|
}
|
|
.card-grayscale-image {
|
|
filter: grayscale(100%);
|
|
}
|
|
.card-blur-image {
|
|
filter: blur(5px);
|
|
}
|
|
.card-hide-image {
|
|
opacity: 0 !important;
|
|
}
|
|
.card-hide {
|
|
div {
|
|
transition: $globalTransitions;
|
|
}
|
|
* {
|
|
transition: $globalTransitions;
|
|
}
|
|
}
|
|
.polaroid-effect {
|
|
background-color: $color-white;
|
|
padding: 5px;
|
|
border: solid 1px rgba(0,0,0,0.1);
|
|
}
|
|
.card-scale {
|
|
* {
|
|
transition: $globalTransitions;
|
|
}
|
|
}
|
|
.card-rotate {
|
|
* {
|
|
transition: $globalTransitions;
|
|
}
|
|
}
|
|
.card-grayscale {
|
|
* {
|
|
transition: $globalTransitions;
|
|
}
|
|
}
|
|
.card-blur {
|
|
* {
|
|
transition: $globalTransitions;
|
|
}
|
|
}
|
|
|
|
.card-overlay{background-position:center center; background-size: cover!important;}
|
|
.card-overlay-infinite{
|
|
position: absolute;
|
|
left: 0px;
|
|
right: 0px;
|
|
bottom: 0px;
|
|
width: 2000px;
|
|
height: 100%;
|
|
z-index: 0;
|
|
animation: infiniteBG 600s;
|
|
animation-iteration-count: infinite;
|
|
animation-timing-function: linear;
|
|
background-image: url(images/mountain.jpg);
|
|
background-size: cover;
|
|
background-repeat: repeat;
|
|
background-position: left bottom;
|
|
transform: translateX(0px);
|
|
}
|
|
|
|
@keyframes infiniteBG {
|
|
0% {transform:translateX(0px);}
|
|
50% {transform:translateX(-1400px);}
|
|
100% {transform:translateX(0px);}
|
|
}
|