84 lines
1.6 KiB
SCSS
84 lines
1.6 KiB
SCSS
@import "../../../_framework";
|
|
|
|
.content {
|
|
padding: 10px 0 0 20px;
|
|
background-color: #6ac88e;
|
|
border-bottom: solid 40px #c86350;
|
|
|
|
@include absolute-span(0, 0, 0, 0);
|
|
|
|
.wrap {
|
|
/*BASIC LAYOUT*/
|
|
@include cols(4, 20);
|
|
|
|
.inner {
|
|
background-color: #ffffff;
|
|
padding: 20px 20px 40px 20px !important;
|
|
box-shadow: 15px 15px 15px rgba(0, 0, 0, 0.4);
|
|
|
|
.head {
|
|
font-family: sans-serif;
|
|
font-weight: 700;
|
|
font-size: 18px;
|
|
line-height: 24px;
|
|
padding: 10px 0;
|
|
color: #c86350;
|
|
}
|
|
|
|
.img-wrapper {
|
|
position: relative;
|
|
box-sizing: border-box;
|
|
overflow: hidden;
|
|
|
|
img {
|
|
width: 100%; // make sure thins dont get wider than the parent cols element
|
|
}
|
|
}
|
|
}
|
|
|
|
&.focus {
|
|
/*FOCUS EFFECT*/
|
|
.head {
|
|
@include camera-focus($FOCUS-OUT, 10, $EASE, 0.5, 0);
|
|
}
|
|
|
|
img {
|
|
@include camera-focus($FOCUS-OUT, 10, $EASE, 0.5, 0);
|
|
}
|
|
}
|
|
|
|
&.zoom {
|
|
/*ZOOM EFFECT*/
|
|
.head {
|
|
@include camera-zoom($FOCUS-OUT, 1.5, $EASE, 0.5, 0);
|
|
}
|
|
|
|
img {
|
|
@include camera-zoom($FOCUS-OUT, 1.5, $EASE, 0.5, 0);
|
|
}
|
|
}
|
|
|
|
&.shake {
|
|
/*SHAKE EFFECT*/
|
|
.head {
|
|
@include camera-shake(5, 1.5, 0, 0, $EASE, 0.5, 0);
|
|
}
|
|
|
|
img {
|
|
@include camera-shake(5, 1.5, 0, 0, $EASE, 0.5, 0);
|
|
}
|
|
}
|
|
|
|
&.all {
|
|
/*ALL EFFECTS*/
|
|
.head {
|
|
@include camera-focus($FOCUS-OUT, 0.4, 10, $EASE);
|
|
}
|
|
|
|
img {
|
|
@include camera-focus($FOCUS-IN, 0.5, 10, $EASE);
|
|
}
|
|
}
|
|
}
|
|
}
|