File: /home/zakatpen/public_html/landingpage/sass/_portfolio.scss
/* ----------------------------------------------------------------
portfolio.scss
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
Portfolio
-----------------------------------------------------------------*/
$grid-filter-prefix: grid-filter;
$portfolio-prefix: portfolio;
$masonry-prefix: masonry;
:root,
.not-dark {
--#{$cnvs-prefix}grid-filter-border-color : #{$grid-filter-border-color};
--#{$cnvs-prefix}portfolio-meta-color : #{$portfolio-meta-color};
--#{$cnvs-prefix}portfolio-meta-row-1-color : #{$portfolio-meta-row-1-color};
}
/* Grid - Filter
-----------------------------------------------------------------*/
.#{$grid-filter-prefix}-wrap,
.#{$grid-filter-prefix} {
//Grid Filter
--#{$cnvs-prefix}grid-filter-mb : #{$grid-filter-mb};
--#{$cnvs-prefix}grid-filter-border : #{$grid-filter-border};
--#{$cnvs-prefix}grid-filter-border-color : #{$grid-filter-border-color};
--#{$cnvs-prefix}grid-filter-border-radius : #{$grid-filter-border-radius};
--#{$cnvs-prefix}grid-filter-item-padding-x : #{$grid-filter-item-padding-x};
--#{$cnvs-prefix}grid-filter-item-padding-y : #{$grid-filter-item-padding-y};
--#{$cnvs-prefix}grid-filter-item-font-size : #{$grid-filter-item-font-size};
--#{$cnvs-prefix}grid-filter-col-sm : #{$grid-filter-col-sm};
--#{$cnvs-prefix}grid-filter-col-xs : #{$grid-filter-col-xs};
--#{$cnvs-prefix}grid-filter-styles-m : #{$grid-filter-styles-m};
--#{$cnvs-prefix}grid-filter-styles-radius : #{$grid-filter-styles-radius};
--#{$cnvs-prefix}grid-shuffle-size : #{$grid-shuffle-size};
}
.#{$grid-filter-prefix} {
position: relative;
display: -ms-flexbox;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
margin-bottom: var(--#{$cnvs-prefix}grid-filter-mb);
list-style: none;
@include media-breakpoint-up(md) {
border: var(--#{$cnvs-prefix}grid-filter-border) solid var(--#{$cnvs-prefix}grid-filter-border-color);
border-radius: var(--#{$cnvs-prefix}grid-filter-border-radius);
}
@include media-breakpoint-down(md) {
width: 100%;
}
&-wrap {
display: -ms-flexbox;
display: flex;
justify-content: space-between;
}
li {
position: relative;
width: calc(100% / var(--#{$cnvs-prefix}grid-filter-col-xs));
@include media-breakpoint-up(sm) {
width: calc(100% / var(--#{$cnvs-prefix}grid-filter-col-sm));
}
@include media-breakpoint-up(md) {
width: auto;
}
a {
display: block;
position: relative;
padding: var(--#{$cnvs-prefix}grid-filter-item-padding-y) var(--#{$cnvs-prefix}grid-filter-item-padding-x);
font-size: var(--#{$cnvs-prefix}grid-filter-item-font-size);
color: var(--#{$cnvs-prefix}contrast-600);
text-align: center;
border-radius: 2px;
@include media-breakpoint-up(md) {
border-left: var(--#{$cnvs-prefix}grid-filter-border) solid var(--#{$cnvs-prefix}grid-filter-border-color);
border-radius: 0;
.bothsidebar & {
padding: 12px 14px;
}
}
&:hover {
color: var(--#{$cnvs-prefix}themecolor);
}
}
&.activeFilter a {
color: #fff;
font-weight: 600;
background-color: var(--#{$cnvs-prefix}themecolor);
margin: 0;
@include media-breakpoint-up(md) {
margin: -1px 0;
padding-top: 11px;
padding-bottom: 11px;
.bothsidebar & {
padding: 13px 18px;
}
}
}
@include media-breakpoint-up(md) {
&:first-child a {
border-left: none;
border-radius: var(--#{$cnvs-prefix}grid-filter-border-radius) 0 0
var(--#{$cnvs-prefix}grid-filter-border-radius);
}
&:last-child a {
border-radius: 0 var(--#{$cnvs-prefix}grid-filter-border-radius)
var(--#{$cnvs-prefix}grid-filter-border-radius) 0;
}
}
}
/* Grid - Filter: Style 2
-----------------------------------------------------------------*/
&.style-2,
&.style-3,
&.style-4,
&.style-5,
&.style-6 {
border: none;
border-radius: 0;
margin-bottom: 2.75rem;
li {
margin-bottom: var(--#{$cnvs-prefix}grid-filter-styles-m);
a {
padding-top: 9px;
padding-bottom: 9px;
border-radius: var(--#{$cnvs-prefix}grid-filter-styles-radius);
border: none;
background-color: transparent;
margin: 0;
}
}
}
&.style-2 li.activeFilter a {
color: #fff !important;
background-color: var(--#{$cnvs-prefix}themecolor);
}
@include media-breakpoint-up(md) {
&.style-2,
&.style-3 {
li:not(:first-child) {
margin-left: var(--#{$cnvs-prefix}grid-filter-styles-m); }
}
}
/* Grid - Filter: Style 3
-----------------------------------------------------------------*/
&.style-3 li {
a {
border: var(--#{$cnvs-prefix}grid-filter-border) solid transparent;
}
&.activeFilter a {
color: var(--#{$cnvs-prefix}themecolor) !important;
border-color: var(--#{$cnvs-prefix}themecolor);
background-color: transparent;
}
}
/* Portfolio - Filter: Style 4
-----------------------------------------------------------------*/
&.style-4 li {
@include media-breakpoint-up(md) {
&:not(:first-child) {
margin-left: 2.25rem;
}
}
a {
padding: 0.75rem 0;
border-radius: 0;
&::after {
content: "";
position: absolute;
top: auto;
bottom: 0;
left: 50%;
width: 0;
height: 2px;
@include transition(all 0.3s ease);
}
}
&.activeFilter a {
color: var(--#{$cnvs-prefix}contrast-900) !important;
&::after {
width: 100%;
left: 0%;
background-color: var(--#{$cnvs-prefix}themecolor);
}
}
}
/* Portfolio - Filter: Style 5
-----------------------------------------------------------------*/
&.style-5 li {
@include media-breakpoint-up(md) {
&:not(:first-child) {
margin-left: 2.25rem;
}
}
a {
padding: 0.75rem 0 1rem;
border-radius: 0;
&::after {
content: "";
position: absolute;
top: auto;
bottom: 0;
left: 50%;
transform: translateX(-50%) scale(0);
width: 0.375rem;
height: 0.375rem;
border-radius: 50%;
@include transition(all 0.3s ease);
}
}
&.activeFilter a {
color: var(--#{$cnvs-prefix}contrast-900) !important;
&::after {
transform: translateX(-50%) scale(1);
background-color: var(--#{$cnvs-prefix}themecolor);
}
}
}
}
/* Portfolio - Shuffle Icon
-----------------------------------------------------------------*/
.grid-shuffle {
width: var(--#{$cnvs-prefix}grid-shuffle-size);
height: var(--#{$cnvs-prefix}grid-shuffle-size);
border: var(--#{$cnvs-prefix}grid-filter-border) solid var(--#{$cnvs-prefix}grid-filter-border-color);
font-size: calc(var(--#{$cnvs-prefix}grid-shuffle-size) / 2.625);
text-align: center;
line-height: calc(var(--#{$cnvs-prefix}grid-shuffle-size) - var(--#{$cnvs-prefix}grid-filter-border) - var(--#{$cnvs-prefix}grid-filter-border));
color: var(--#{$cnvs-prefix}contrast-900);
cursor: pointer;
@include transition(all 0.2s linear);
&:hover {
background-color: var(--#{$cnvs-prefix}themecolor);
color: #fff;
}
}
/* Portfolio - Items
-----------------------------------------------------------------*/
.#{$portfolio-prefix},
[class*=#{$portfolio-prefix}-] {
--#{$cnvs-prefix}portfolio-desc-padding-x : #{$portfolio-desc-padding-x};
--#{$cnvs-prefix}portfolio-desc-padding-y : #{$portfolio-desc-padding-y};
--#{$cnvs-prefix}portfolio-desc-title-size : #{$portfolio-desc-title-size};
--#{$cnvs-prefix}portfolio-modal-padding : #{$portfolio-modal-padding};
--#{$cnvs-prefix}portfolio-ajax-height : #{$portfolio-ajax-height};
// Portfolio Meta
--#{$cnvs-prefix}portfolio-meta-font-size : #{$portfolio-meta-font-size};
--#{$cnvs-prefix}portfolio-meta-color : #{$portfolio-meta-color};
--#{$cnvs-prefix}portfolio-meta-row-1 : #{$portfolio-meta-row-1};
--#{$cnvs-prefix}portfolio-meta-row-1-color : #{$portfolio-meta-row-1-color};
--#{$cnvs-prefix}portfolio-meta-icon : #{$portfolio-meta-icon};
--#{$cnvs-prefix}portfolio-navigation-size : #{$portfolio-navigation-size};
}
.#{$portfolio-prefix} {
position: relative;
&-item {
position: relative;
.#{$portfolio-prefix}-reveal & {
overflow: hidden;
}
.#{$portfolio-prefix}-image {
position: relative;
overflow: hidden;
}
.#{$portfolio-prefix}-image,
.#{$portfolio-prefix}-image > a,
.#{$portfolio-prefix}-image img {
display: block;
width: 100%;
height: auto;
}
}
&-rounded &-image {
border-radius: calc(var(--#{$cnvs-prefix}grid-filter-border-radius) + 1);
overflow: hidden;
}
@include transition(height 0.4s linear);
}
@include media-breakpoint-up(md) {
.#{$portfolio-prefix}-reveal {
.#{$portfolio-prefix}-image img,
.bg-overlay {
@include transition(all 0.3s ease-in-out);
}
}
}
/* Portfolio - Item Title
-----------------------------------------------------------------*/
.#{$portfolio-prefix}-desc {
position: relative;
z-index: 6;
padding: var(--#{$cnvs-prefix}portfolio-desc-padding-y) var(--#{$cnvs-prefix}portfolio-desc-padding-x);
h3 {
margin: 0;
padding: 0;
font-size: var(--#{$cnvs-prefix}portfolio-desc-title-size);
.col-md-9 & {
font-size: calc(var(--#{$cnvs-prefix}portfolio-desc-title-size) / 1.1111);
}
a {
color: var(--#{$cnvs-prefix}contrast-900);
&:hover {
color: var(--#{$cnvs-prefix}themecolor);
}
}
}
span {
display: block;
.col-md-9 & {
font-size: calc(var(--#{$cnvs-prefix}portfolio-desc-title-size) / 1.428);
}
}
span,
span a {
color: var(--#{$cnvs-prefix}contrast-600);
}
span a:hover {
color: var(--#{$cnvs-prefix}contrast-900);
}
.desc-lg & {
padding: 20px 8px;
h3 {
font-size: calc(var(--#{$cnvs-prefix}portfolio-desc-title-size) / 0.8333);
}
span {
font-size: 110%;
}
}
.desc-sm & {
padding: var(--#{$cnvs-prefix}portfolio-desc-padding-y) var(--#{$cnvs-prefix}portfolio-desc-padding-x);
h3 {
font-size: calc(var(--#{$cnvs-prefix}portfolio-desc-title-size) * 0.8);
}
span {
font-size: 90%;
}
}
.#{$portfolio-prefix}.g-0 & {
--#{$cnvs-prefix}portfolio-desc-padding-x: 15px;
}
.desc-sm.g-0 & {
--#{$cnvs-prefix}portfolio-desc-padding-x: calc(var(--#{$cnvs-prefix}portfolio-desc-padding-x) - 5px);
}
.#{$portfolio-prefix}-reveal & {
position: absolute;
top: auto;
bottom: 0;
width: 100%;
background-color: var(--#{$cnvs-prefix}body-bg);
-webkit-transform: translateY(100%);
transform: translateY(100%);
@include media-breakpoint-up(md) {
@include transition(all 0.3s ease-in-out);
}
@include media-breakpoint-down(sm) {
display: none !important;
}
}
}
.#{$portfolio-prefix}-reveal {
.#{$portfolio-prefix}-item {
&:hover {
.#{$portfolio-prefix}-desc {
-webkit-transform: translateY(0);
transform: translateY(0);
display: none;
@include media-breakpoint-up(md) {
display: block;
}
}
.#{$portfolio-prefix}-image img,
.bg-overlay {
-webkit-transform: translateY(0);
transform: translateY(0);
@include media-breakpoint-up(md) {
-webkit-transform: translateY(-15%);
transform: translateY(-15%);
}
}
}
}
}
/* Portfolio - Parallax
-----------------------------------------------------------------*/
.#{$portfolio-prefix}-parallax .#{$portfolio-prefix}-image {
height: 60vh;
background-attachment: fixed;
@include media-breakpoint-up(lg) {
height: 500px;
}
}
/* Portfolio Single - Image
-----------------------------------------------------------------*/
.#{$portfolio-prefix}-single {
&-image {
> a,
.slide a,
img,
iframe,
video {
display: block;
width: 100%;
}
&-full {
position: relative;
height: 600px;
overflow: hidden;
margin: calc(-1 * var(--#{$cnvs-prefix}content-padding)) 0 var(--#{$cnvs-prefix}content-padding);
}
}
&-video {
height: auto !important;
}
}
/* Masonry Thumbs
-----------------------------------------------------------------*/
.#{$masonry-prefix} {
&-thumbs {
position: relative;
--#{$prefix}gutter-x: calc(#{$masonry_thumbs-gutter} * 2);
--#{$prefix}gutter-y: calc(#{$masonry_thumbs-gutter} * 2);
> * {
overflow: hidden;
}
}
&-gap-lg {
--#{$prefix}gutter-x: calc(#{$masonry_thumbs-gutter} * 3);
--#{$prefix}gutter-y: calc(#{$masonry_thumbs-gutter} * 3);
}
&-gap-xl {
--#{$prefix}gutter-x: calc(#{$masonry_thumbs-gutter} * 5);
--#{$prefix}gutter-y: calc(#{$masonry_thumbs-gutter} * 5);
}
&-thumbs {
> * > img,
.grid-inner > img {
display: block;
width: 100%;
height: auto;
border-radius: 0;
}
}
}
/* Portfolio Single - Content
-----------------------------------------------------------------*/
.#{$portfolio-prefix}-single-content h2 {
margin: 0 0 20px;
padding: 0;
font-size: var(--#{$cnvs-prefix}portfolio-desc-title-size);
font-weight: 600 !important;
}
.modal-padding {
--#{$cnvs-prefix}portfolio-modal-padding : #{$portfolio-modal-padding};
padding: var(--#{$cnvs-prefix}portfolio-modal-padding);
}
.ajax-modal-title {
background-color: var(--#{$cnvs-prefix}contrast-100);
border-bottom: 1px solid var(--#{$cnvs-prefix}contrast-200);
padding: 25px 40px;
}
.ajax-modal-title h2 {
font-size: calc(var(--#{$cnvs-prefix}portfolio-desc-title-size) / 0.714);
margin-bottom: 0;
}
#portfolio-ajax-wrap {
position: relative;
max-height: 0;
overflow: hidden;
@include transition(max-height 0.4s ease);
}
#portfolio-ajax-wrap.#{$portfolio-prefix}-ajax-opened {
max-height: var(--#{$cnvs-prefix}portfolio-ajax-height);
}
#portfolio-ajax-container {
display: none;
padding-bottom: 60px;
}
#portfolio-ajax-single {
opacity: 0;
pointer-events: none;
transition: opacity .6s ease;
.portfolio-ajax-opened & {
opacity: 1;
pointer-events: auto;
}
}
#portfolio-ajax-title h2 {
font-size: calc(var(--#{$cnvs-prefix}portfolio-desc-title-size) / 0.714);
}
.portfolio-ajax-opened ~ .portfolio.grid-container {
.portfolio-item:not(:hover):not(.portfolio-active) {
opacity: 0.25;
}
}
/* Portfolio Single - Meta
-----------------------------------------------------------------*/
.#{$portfolio-prefix}-meta,
.#{$portfolio-prefix}-share {
list-style: none;
font-size: var(--#{$cnvs-prefix}portfolio-meta-font-size);
}
.#{$portfolio-prefix}-meta {
li {
margin: 10px 0;
color: var(--#{$cnvs-prefix}portfolio-meta-color);
&:first-child {
margin-top: 0;
}
span {
display: inline-block;
width: var(--#{$cnvs-prefix}portfolio-meta-row-1);
font-weight: bold;
color: var(--#{$cnvs-prefix}portfolio-meta-row-1-color);
i {
position: relative;
top: 1px;
width: var(--#{$cnvs-prefix}portfolio-meta-icon);
text-align: center;
margin-right: calc(var(--#{$cnvs-prefix}portfolio-meta-icon) * 0.5);
}
}
}
}
/* Portfolio Single Navigation
-----------------------------------------------------------------*/
#portfolio-navigation {
position: absolute;
top: 50%;
left: auto;
right: 10px;
max-width: calc(var(--#{$cnvs-prefix}portfolio-navigation-size) * 4);
height: var(--#{$cnvs-prefix}portfolio-navigation-size);
margin-top: calc(var(--#{$cnvs-prefix}portfolio-navigation-size) * -0.5);
.page-title-right & {
left: 10px;
right: auto;
}
.page-title-center & {
position: relative;
top: 0;
left: 0;
margin: 20px auto 0;
}
a {
display: block;
float: left;
margin-left: calc(var(--#{$cnvs-prefix}portfolio-navigation-size) * 0.5);
width: var(--#{$cnvs-prefix}portfolio-navigation-size);
height: var(--#{$cnvs-prefix}portfolio-navigation-size);
text-align: center;
color: var(--#{$cnvs-prefix}contrast-900);
@include transition(color 0.3s linear);
&:first-child {
margin-left: 0;
}
&:hover {
color: var(--#{$cnvs-prefix}themecolor);
}
}
#portfolio-ajax-show & {
top: 0;
margin-top: 0;
}
}