­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ .jet-smart-listing { display: flex; flex-wrap: wrap; margin-left: -10px; margin-right: -10px; margin-bottom: 40px; &-wrap { position: relative; word-wrap: anywhere; } // Featured Post &__featured { display: flex; flex-direction: column; margin: 10px; position: relative; overflow: hidden; transform: translateY( 20px ); opacity: 0; animation: appear 400ms forwards; &.featured-layout-boxed { background-size: cover; justify-content: flex-end; } &.featured-position-top { width: 100%; max-width: 100%; } &.featured-img-left { flex-direction: row; @media (max-width: 1024px) { flex-wrap: wrap; } } &.featured-img-right { flex-direction: row-reverse; @media (max-width: 1024px) { flex-wrap: wrap; } } &-box-link { display: flex; flex-direction: column; height: 100%; justify-content: flex-end; padding: 15px; position: relative; &:before { position: absolute; left: 0; top: 0; right: 0; bottom: 0; content: ''; z-index: 1; } > * { position: relative; z-index: 2; } } &-content { .featured-img-left & { flex-grow: 1; } .featured-img-left.has-post-thumb & { margin-left: 20px; } .featured-img-right.has-post-thumb & { margin-right: 20px; } .featured-img-top.has-post-thumb & { margin-top: 20px; } } } &.has-featured-position-left, &.has-featured-position-right { flex-wrap: nowrap; @media (max-width: 1024px) { flex-wrap: wrap; } } &.has-featured-position-right { flex-direction: row-reverse; } &__more { .elementor .elementor-widget-jet-blog-smart-listing & { transition: all 200ms; &-wrap { display: flex; } display: inline-flex; align-items: center; &-icon { margin-left: 5px; text-decoration: none; } &-text { display: inline-block; order: 0; } } } // Standard posts wrapper &__posts { display: flex; flex-wrap: wrap; margin-left: 10px; margin-right: 10px; align-self: flex-start; .has-featured-position-top &, .no-featured & { max-width: 100%; flex-basis: 100%; } @media (max-width: 1024px) { max-width: 100% !important; flex-basis: 100% !important; } } // Standard posts item &__post { display: flex; align-content: flex-start; margin-top: 10px; margin-bottom: 10px; position: relative; animation: appear 400ms forwards; transform: translateY( 20px ); opacity: 0; &-thumbnail { flex: 0 0 auto; img { display: block; width: 100%; height: auto; } .has-thumb-postion-top & { flex: 1 0 100%; width: 100%; max-width: 100%; } .featured-img-left & { flex: 0 0 50%; width: 50%; max-width: 50%; } a { display: block; position: relative; overflow: hidden; &:before { position: absolute; left: 0; top: 0; right: 0; bottom: 0; content: ''; z-index: 1; } } } &-content { flex-grow: 1; .has-thumb-postion-top.has-post-thumb & { margin-top: 20px; } .has-thumb-postion-left.has-post-thumb & { margin-left: 20px; } .has-thumb-postion-right.has-post-thumb & { margin-right: 20px; } } } &__post-wrapper { @for $i from 1 through 8 { .columns-#{$i} & { $k: 1; @for $j from 1 through 8 { $selector: ''; $separator: ''; @for $n from 1 through $i { $selector: $selector + $separator + '&:nth-child(' + $k + ')'; $separator: ','; $k: $k + 1; } #{$selector} { animation-delay: $j*100ms; } } } } @media (max-width: 1024px) { @for $i from 1 through 8 { .columns-tablet-#{$i} & { $k: 1; @for $j from 1 through 8 { $selector: ''; $separator: ''; @for $n from 1 through $i { $selector: $selector + $separator + '&:nth-child(' + $k + ')'; $separator: ','; $k: $k + 1; } #{$selector} { animation-delay: $j*100ms; } } } } } @media (max-width: 767px) { @for $i from 1 through 8 { .columns-mobile-#{$i} & { $k: 1; @for $j from 1 through 8 { $selector: ''; $separator: ''; @for $n from 1 through $i { $selector: $selector + $separator + '&:nth-child(' + $k + ')'; $separator: ','; $k: $k + 1; } #{$selector} { animation-delay: $j*100ms; } } } } } .rows-1 & { @for $i from 1 through 8 { &:nth-child( #{$i} ) { animation-delay: $i*100ms; } } } } &__meta { &-icon { margin-right: 5px; } &-item { display: inline-block; &:not(:first-child):before { content: ""; display: inline-block; margin-left: 5px; margin-right: 5px; } .jet-smart-listing__post { font-size: .75em; } } .post__date, .posted-by, .post__comments { font-size: inherit; font-weight: inherit; letter-spacing: inherit; line-height: inherit; } .has-author-avatar { display: flex; align-items: center; margin-bottom: 1em; } } // Block heading (title and filter) &__heading { display: flex; max-width: 100%; justify-content: space-between; align-items: center; } &__filter { &-item { display: inline-block; &[hidden] { display: none; } a { margin-left: 10px; display: block; transition: all 200ms; } } &-more { position: relative; > .jet-blog-icon { display: block; } } &-hidden-items { position: absolute; right: 0; visibility: hidden; opacity: 0; top: -999em; margin-top: 20px; transition: margin 200ms linear, opacity 200ms linear; min-width: 150px; text-align: right; z-index: 999; padding: 15px; background-color: #fff; .jet-smart-listing__filter-more:hover & { visibility: visible; opacity: 1; margin-top: 0; top: 100%; } .jet-smart-listing__filter-item { display: block; a { padding: 0 5px; } } } } &-wrap.jet-processing { opacity: .5; position: relative; &:after { z-index: 99; left: 0; top: 0; right: 0; bottom: 0; content: ""; } + .jet-smart-listing-loading { border-radius: 50%; width: 36px; height: 36px; border: 0.25rem solid rgba(100, 100, 100, 0.8); border-top-color: #111; animation: spin 1s infinite linear; position: absolute; left: 50%; top: 50%; z-index: 999; margin: -18px 0 0 -18px; } } &__arrow { position: absolute; top: 100%; width: 40px; height: 40px; text-align: center; cursor: pointer; display: flex; justify-content: center; align-items: center; i { display: block; &:before { display: block; line-height: 1px; } } &.jet-arrow-prev { left: 0; } &.jet-arrow-next { left: 40px; i { transform: scale(-1, 1); } } &.jet-arrow-disabled { opacity: .5; cursor: default; pointer-events: none; } } &__terms { .has-post-thumb & { position: absolute; top: 0; left: 0; z-index: 99; .jet-smart-listing__posts & { max-width: 50%; flex: 0 0 50%; } } &-link { transition: all 200ms; position: relative; z-index: 3; display: inline-block; line-height: 1em; padding: 5px 10px; } } } .elementor-jet-blog-smart-listing { position: relative; } .jet-title-fields, .jet-content-fields { &__item { &-label, &-value, &-icon, &-image { display: inline-block; vertical-align: middle; } &-icon svg{ width: 1em; height: 1em; fill: currentColor; } &-image { width: 25px; } } } @-webkit-keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @-webkit-keyframes appear { 0% { transform: translateY( 20px ); opacity: 0; } 100% { transform: translateY( 0 ); opacity: 1; } } @keyframes appear { 0% { transform: translateY( 20px ); opacity: 0; } 100% { transform: translateY( 0 ); opacity: 1; } }