Initial commit

client/scss/components/_cards.scss

@@ -0,0 +1,164 @@
+$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);}
+}