Current File : /home/kelaby89/www/wp/wp-content/themes/nexio/skins/default/templates/blog-styles/masonry.scss

/* Blog layout: Masonry
------------------------- */

@import "../../../../css/_mixins.scss";
@import "../../../../css/_theme-vars.scss";
@import "../../css/_skin-vars.scss";

body[class*="blog_style_classic-masonry"] .posts_container {
	margin-bottom: calc(-1 * (var(--theme-var-grid_gap) + 15px));
}

.masonry_wrap {
	position:relative;
	margin-right: calc( -1 * var(--theme-var-grid_gap ) );
}
.masonry_wrap .masonry_item {
	position:relative;
	display: inline-block;
	vertical-align:top;
	padding: 0 var(--theme-var-grid_gap) var(--theme-var-grid_gap) 0;
	margin-bottom:0;
	width: 50%;
	border-width: 0;
	@include border-box;
	.post_layout_classic-masonry {
		padding-bottom: 0;
	}
}
.masonry_wrap.no_margin {
	margin-right: 0;
}
.masonry_wrap.no_margin .masonry_item {
	padding: 0;
}
.masonry_wrap .masonry_item-1_1 {
	width: 100%;
}
.masonry_wrap .masonry_item-1_3 {
	width: 33.3333%;
}
.masonry_wrap .masonry_item-1_4 {
	width: 25%;
}

.masonry_item .post_title {
	margin: 0;
	font-size: 24px;
	line-height: 1.15em;
}
.post_layout_classic-masonry_1,
.post_layout_classic-masonry_2 {
	.post_title {
		margin: 0;
		font-size: 35px;
		line-height: 1.15em;
	}
}
.sidebar_show .post_layout_classic-masonry_2 {
	.post_title {
		margin: 0;
		font-size: 28px;
		line-height: 1.15em;
	}
}

.post_layout_classic-masonry_3 .post_title {
	margin: 0;
	font-size: 28px;
	line-height: 1.19em;
}


.masonry_wrap .masonry_item {
	/* audio */
	.format-audio .post_featured .post_audio_title {
		font-size: 24px;
		line-height: 1.3em;
		font-weight: 500;
		margin-top: 0.4em;
		margin-bottom: 0.5em;
	}
	.format-audio .post_featured .post_audio_author {
		font-size: 13px;
	}
	.post_info_audio {
		margin-top: 5px;
	}
	div.mejs-controls div.mejs-button > button {
		border: none;
	}
	div.mejs-controls div.mejs-button.mejs-playpause-button > button {
		background-color: var(--theme-color-bg_color) !important;
	}
	div.mejs-controls div.mejs-button.mejs-volume-button {
		width: 30px;
		> button {
			width: 30px;
			height: 40px;
			line-height: 42px;
		}
	}
	div.mejs-controls .mejs-horizontal-volume-slider {
		margin-left: 5px;
	}
	div.mejs-controls .mejs-time.mejs-duration-container {
		margin-right: 5px;
	}
	div.mejs-controls .mejs-time.mejs-currenttime-container {
		margin-left: 10px;
	}
	div.mejs-controls .mejs-time-rail {
		margin: 0 12px;
	}
	.format-audio .post_featured.without_thumb .post_audio:not(.with_iframe),
	.single-format-audio .post_featured.without_thumb .post_audio:not(.with_iframe),
	.sc_layouts_blog_item_featured .post_featured.without_thumb .post_audio:not(.with_iframe) {
		padding: 30px;
	}

	/* video */
	.trx_addons_video_player.with_cover .video_hover,
	.post_featured.with_thumb .post_video_hover {
		width: 65px;
		height: 65px;
		line-height: 65px;
		margin: -32px 0 0 -32px;
		font-size: 17px;
		letter-spacing: -4px;
	}

	.post_featured {
		margin-bottom: 1.85em;
	}
	.post_layout_portfolio {
		.post_featured {
			margin-bottom: 0;
		}
	}
	.post_layout_classic-masonry_4 {
		.post_featured {
			margin-bottom: 1em;
		}
	}
	.swiper-pagination-bullets {
		display: none;
	}
	.slider_container.slider_controls_side .slider_controls_wrap > a, .slider_outer_controls_side .slider_controls_wrap > a {
		opacity: 1;
		margin-left: 30px;
		margin-right: 30px;
	}
	.slider_container.slider_controls_side .slider_controls_wrap > a,
	.slider_outer_controls_side .slider_controls_wrap > a {
		width: 34px;
		height: 34px;
		line-height: 32px;
		&:before {
			font-size: 13px;
		}
	}
	.swiper-button-next, .swiper-button-prev {
		margin-top: -17px !important;
	}
	.post_header .post_meta_item.post_categories {
		font-size: 13px;
		font-weight: 400;
		text-transform: uppercase;
		letter-spacing: 0.6px;
		color: var(--theme-color-text_dark);
		a {
			color: var(--theme-color-text_dark);
			&:hover {
				color: var(--theme-color-text_link);
			}
		}
	}
	.post_header {
		padding: 0 0 14px;
		.post_meta {
			margin: 0 0 12px;
		}
	}
	.post_layout_classic-masonry_3 {
		.post_header {
			padding: 0 0 17px 50px;
		}
	}
	.post_layout_classic-masonry_1,
	.post_layout_classic-masonry_2 {
		.post_header {
			padding: 0 0 25px 50px;
		}
	}
	.post_layout_classic-masonry_1,
	.post_layout_classic-masonry_2,
	.post_layout_classic-masonry_3 {
		.post_header {
			//padding: 0 0 15px 50px;
			position: relative;
			.post_meta {
				margin: 0 0 12px;
			}
			&:before {
				position: absolute;
				left: 0;
				top: 9px;
				width: 35px;
				height: 2px;
				content: "";
				display: block;
				background-color: var(--theme-color-text_dark);
			}
		}
	}
}