wp_back/wp-content/plugins/visual-portfolio/assets/css/layout-masonry.scss

48 lines
871 B
SCSS
Raw Permalink Normal View History

2024-05-20 15:37:46 +03:00
/*
* Visual Portfolio layout Masonry.
*/
// Gaps.
[data-vp-layout="masonry"] {
.vp-portfolio__items {
margin-top: calc(-1 * var(--vp-items__gap-vertical));
margin-left: calc(-1 * var(--vp-items__gap));
}
.vp-portfolio__item-wrap .vp-portfolio__item {
margin-top: var(--vp-items__gap-vertical);
margin-left: var(--vp-items__gap);
}
}
// Images.
[data-vp-masonry-images-aspect-ratio*=":"] {
.vp-portfolio__item-img img,
.vp-portfolio__item-img {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.vp-portfolio__item-img-wrap {
position: relative;
display: block;
overflow: hidden;
&::before {
display: block;
padding-top: 56%;
content: "";
}
}
.vp-portfolio__item-img img {
width: 100%;
height: 100%;
object-fit: var(--vp-images__object-fit);
object-position: var(--vp-images__object-position);
}
}