242 lines
4.1 KiB
SCSS
242 lines
4.1 KiB
SCSS
//
|
|
// Filters
|
|
//
|
|
|
|
.filters {
|
|
text-align: center;
|
|
list-style: none;
|
|
margin: 0 0 15px;
|
|
padding: 0;
|
|
|
|
> li {
|
|
display: inline-block;
|
|
margin: 0 12px 20px 0;
|
|
|
|
&:not(:last-child)::after {
|
|
content: '/';
|
|
opacity: .4;
|
|
margin: 0 0 0 12px;
|
|
}
|
|
}
|
|
|
|
a {
|
|
opacity: .6;
|
|
color: $body-color;
|
|
|
|
&:hover,
|
|
&.current {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
}
|
|
|
|
//
|
|
// Portfolio Grid
|
|
//
|
|
|
|
.row-portfolio {
|
|
|
|
.container & {
|
|
margin-right: -5px;
|
|
margin-left: -5px;
|
|
}
|
|
|
|
.grid-sizer,
|
|
.portfolio-item {
|
|
overflow: hidden;
|
|
padding: 5px;
|
|
float: left;
|
|
width: 50%;
|
|
}
|
|
|
|
&[data-columns="3"] .grid-sizer,
|
|
&[data-columns="3"] .portfolio-item {
|
|
width: 33.333333%;
|
|
}
|
|
|
|
&[data-columns="4"] .grid-sizer,
|
|
&[data-columns="4"] .portfolio-item {
|
|
width: 25%;
|
|
}
|
|
|
|
&[data-columns="5"] .grid-sizer,
|
|
&[data-columns="5"] .portfolio-item {
|
|
width: 20%;
|
|
}
|
|
}
|
|
|
|
//
|
|
// Portfolio Carousel Item
|
|
//
|
|
|
|
.portfolio-carousel {
|
|
|
|
.owl-prev,
|
|
.owl-next {
|
|
background: color("white");
|
|
border-radius: $border-radius;
|
|
height: 54px;
|
|
width: 54px;
|
|
margin-top: -27px;
|
|
line-height: 54px;
|
|
font-size: rem(12px);
|
|
color: $headings-color;
|
|
}
|
|
|
|
.owl-prev {
|
|
left: 5px;
|
|
|
|
&:hover {
|
|
left: 5px;
|
|
}
|
|
}
|
|
|
|
.owl-next {
|
|
right: 5px;
|
|
|
|
&:hover {
|
|
right: 5px;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
//
|
|
// Portfolio Grid Item
|
|
//
|
|
|
|
.portfolio-item-wrapper {
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.portfolio-item-img {
|
|
position: relative;
|
|
top: 0;
|
|
}
|
|
|
|
.portfolio-item-img,
|
|
.portfolio-item-caption {
|
|
transition: all 0.3s ease-in-out;
|
|
}
|
|
|
|
.portfolio-item-caption {
|
|
background: #fff;
|
|
//position: absolute;
|
|
padding: rem(25px) rem(20px);
|
|
padding-top:rem(18px);
|
|
width: 100%;
|
|
//top: 100%;
|
|
//left: 0;
|
|
text-align: center;
|
|
z-index: 1;
|
|
}
|
|
|
|
.portfolio-item-title {
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.portfolio-item-subtitle {
|
|
font-size: rem(13px);
|
|
}
|
|
|
|
.portfolio-item-link {
|
|
position: absolute;
|
|
z-index: 3;
|
|
bottom: 0;
|
|
right: 0;
|
|
left: 0;
|
|
top: 0;
|
|
}
|
|
|
|
.portfolio-item:hover .portfolio-item-img {
|
|
//top: rem(-104px);
|
|
}
|
|
|
|
.portfolio-item:hover .portfolio-item-caption {
|
|
transform: translateY(-10px);
|
|
}
|
|
|
|
.sticky-sidebar {
|
|
padding: 0 0 30px 0;
|
|
}
|
|
|
|
.single-portfolio-title {
|
|
font-size: rem(20px);
|
|
margin: 0 0 18px;
|
|
}
|
|
|
|
//
|
|
// Media
|
|
//
|
|
|
|
@include media-breakpoint-down(lg) {
|
|
|
|
.row-portfolio {
|
|
|
|
&[data-columns="4"] .grid-sizer,
|
|
&[data-columns="4"] .portfolio-item {
|
|
width: 33.333333%;
|
|
}
|
|
|
|
&[data-columns="5"] .grid-sizer,
|
|
&[data-columns="5"] .portfolio-item {
|
|
width: 33.333333%;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
@include media-breakpoint-down(md) {
|
|
|
|
.row-portfolio {
|
|
|
|
.grid-sizer,
|
|
.portfolio-item {
|
|
width: 50%;
|
|
}
|
|
|
|
&[data-columns="3"] .grid-sizer,
|
|
&[data-columns="3"] .portfolio-item {
|
|
width: 50%;
|
|
}
|
|
|
|
&[data-columns="4"] .grid-sizer,
|
|
&[data-columns="4"] .portfolio-item {
|
|
width: 50%;
|
|
}
|
|
|
|
&[data-columns="5"] .grid-sizer,
|
|
&[data-columns="5"] .portfolio-item {
|
|
width: 50%;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
@include media-breakpoint-down(sm) {
|
|
|
|
.row-portfolio {
|
|
|
|
.grid-sizer,
|
|
.portfolio-item {
|
|
width: 100%;
|
|
}
|
|
|
|
&[data-columns="3"] .grid-sizer,
|
|
&[data-columns="3"] .portfolio-item {
|
|
width: 100%;
|
|
}
|
|
|
|
&[data-columns="4"] .grid-sizer,
|
|
&[data-columns="4"] .portfolio-item {
|
|
width: 100%;
|
|
}
|
|
|
|
&[data-columns="5"] .grid-sizer,
|
|
&[data-columns="5"] .portfolio-item {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
} |