.jet-listing-grid {
&[data-lazy-load] {
min-height: 1px;
}
&.jet-listing-grid-loading {
&:after {
content: '';
display: block;
width: 36px;
height: 36px;
margin: 0 auto;
color: rgba(100, 100, 100, 0.8);
border: 4px solid currentColor;
border-top-color: transparent;
border-radius: 50%;
animation: jet-engine-spin 1s infinite linear;
}
}
&__items {
display: flex;
flex-wrap: wrap;
margin: 0 -10px;
width: calc(100% + 20px);
body.wp-admin.block-editor-page .jet-listing-grid__slider & {
flex-wrap: nowrap;
}
}
&__masonry {
align-items: flex-start;
}
&__item {
padding: 10px;
@for $i from 1 through 10 {
.grid-col-desk-#{$i} > & {
max-width: 100%/$i;
flex: 0 0 100%/$i;
}
}
&.colspan-1 {
max-width: 100% !important;
flex: 0 0 100% !important;
}
@for $i from 2 through 6 {
@for $j from $i+1 through 10 {
&.colspan-#{$i}-#{$j} {
max-width: percentage($i/$j) !important;
flex: 0 0 percentage($i/$j) !important;
}
}
}
}
&__slider {
position: relative;
body.wp-admin.block-editor-page & {
overflow: hidden;
}
&[dir="rtl"] {
.slick-slide {
float: right;
}
}
&-icon.slick-arrow {
position: absolute;
top: 50%;
width: 50px;
height: 50px;
line-height: 50px;
font-size: 30px;
color: #fff;
background-color: #111;
left: 0;
margin-top: -25px;
cursor: pointer;
text-align: center;
z-index: 999;
display: flex;
align-items: center;
justify-content: center;
&.next-arrow {
left: auto;
right: 0;
transform: scaleX(-1);
}
svg {
height: 30px;
width: auto;
path {
fill: currentColor;
}
}
}
> .jet-listing-grid__items:not(.slick-initialized) {
> .jet-listing-grid__item {
display: none;
&:first-of-type {
display: block;
}
body.wp-admin.block-editor-page & {
display: block;
}
}
}
.jet-slick-dots {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
margin: 10px 0;
li {
width: 12px;
height: 12px;
border-radius: 100%;
text-indent: -50px;
overflow: hidden;
cursor: pointer;
background: #eee;
margin: 3px;
&:hover,
&.slick-active {
background: #111;
}
}
}
}
.jet-engine-listing-overlay {
&-wrap {
position: relative;
cursor: pointer;
}
&-link {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: -1;
}
}
.slick-slider {
position: relative;
display: block;
box-sizing: border-box;
user-select: none;
-webkit-touch-callout: none;
-khtml-user-select: none;
-ms-touch-action: pan-y;
touch-action: pan-y;
-webkit-tap-highlight-color: transparent;
}
.slick-list {
position: relative;
display: block;
overflow: hidden;
margin: 0;
padding: 0;
}
.slick-list:focus {
outline: none;
}
.slick-list.dragging {
cursor: pointer;
cursor: hand;
}
.slick-slider .slick-track,
.slick-slider .slick-list {
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.slick-track {
position: relative;
top: 0;
left: 0;
display: block;
margin-left: auto;
margin-right: auto;
}
.slick-track:before,
.slick-track:after {
display: table;
content: '';
}
.slick-track:after {
clear: both;
}
.slick-loading .slick-track {
visibility: hidden;
}
.slick-slide {
display: none;
float: left;
height: 100%;
min-height: 1px;
}
[dir='rtl'] .slick-slide {
float: right;
}
.slick-slide img {
display: block;
}
.slick-slide.slick-loading img {
display: none;
}
.slick-slide.dragging img {
pointer-events: none;
}
.slick-initialized .slick-slide {
display: block;
}
.slick-loading .slick-slide {
visibility: hidden;
}
.slick-vertical .slick-slide {
display: block;
height: auto;
border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
display: none;
}
}
// Scroll Slider
@each $device in desktop, tablet, mobile {
body[data-elementor-device-mode="#{$device}"] .jet-listing-grid__scroll-slider-#{$device} {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
-ms-overflow-style: -ms-autohiding-scrollbar;
> .jet-listing-grid__items {
flex-wrap: nowrap;
}
}
}
@media ( min-width: 1025px ) {
.jet-listing-grid--blocks .jet-listing-grid__scroll-slider-desktop {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
-ms-overflow-style: -ms-autohiding-scrollbar;
> .jet-listing-grid__items {
flex-wrap: nowrap;
}
}
}
@media ( min-width: 768px ) and ( max-width: 1024px ) {
.jet-listing-grid--blocks .jet-listing-grid__scroll-slider-tablet {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
-ms-overflow-style: -ms-autohiding-scrollbar;
> .jet-listing-grid__items {
flex-wrap: nowrap;
}
}
}
@media ( max-width: 767px ) {
.jet-listing-grid--blocks .jet-listing-grid__scroll-slider-mobile {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
-ms-overflow-style: -ms-autohiding-scrollbar;
> .jet-listing-grid__items {
flex-wrap: nowrap;
}
}
}
.jet-listing-grid__item {
&.jet-equal-columns {
> .elementor {
height: 100%;
> .elementor-inner {
height: 100%;
> .elementor-section-wrap {
height: 100%;
> .elementor-section {
height: 100%;
}
}
}
// For compat with E. v3.0
> .elementor-section-wrap {
height: 100%;
> .elementor-section {
height: 100%;
}
}
}
.jet-engine-listing-overlay-wrap {
height: 100%;
> .elementor {
height: 100%;
> .elementor-inner {
height: 100%;
> .elementor-section-wrap {
height: 100%;
> .elementor-section {
height: 100%;
}
}
}
// For compat with E. v3.0
> .elementor-section-wrap {
height: 100%;
> .elementor-section {
height: 100%;
}
}
}
}
}
}
.jet-listing-grid__items.jet-equal-columns__wrapper {
.slick-track {
display: flex;
align-items: stretch;
}
.slick-slide {
float: none;
height: auto;
display: flex;
flex-direction: column;
img {
object-fit: cover;
flex-grow: 1;
}
> *,
.jet-equal-columns{
height: 100%;
}
}
}
.jet-listing-not-found {
text-align: center;
display: block;
margin: 0;
width: 100%;
}
@media ( max-width: 1025px ) {
@for $i from 1 through 10 {
.grid-col-tablet-#{$i} > .jet-listing-grid__item {
max-width: 100%/$i;
flex: 0 0 100%/$i;
}
}
}
body[data-elementor-device-mode="tablet"] {
@for $i from 1 through 10 {
.grid-col-tablet-#{$i} > .jet-listing-grid__item {
max-width: 100%/$i;
flex: 0 0 100%/$i;
}
}
}
@media ( max-width: 768px ) {
@for $i from 1 through 10 {
.grid-col-mobile-#{$i} > .jet-listing-grid__item {
max-width: 100%/$i;
flex: 0 0 100%/$i;
}
}
}
body[data-elementor-device-mode="mobile"] {
@for $i from 1 through 10 {
.grid-col-mobile-#{$i} > .jet-listing-grid__item {
max-width: 100%/$i;
flex: 0 0 100%/$i;
}
}
}
@keyframes jet-engine-spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(359deg);
}
}