1#@!#!123s

: / home / mihaidwf / justshea.net / wp-content / themes / oceanwp / sass /
Filename : _layout.scss
back
.container {
	width: 1200px;
	max-width: 90%;
    margin: 0 auto;
}

#wrap {
	position: relative;
}

#main {
	position: relative;

    #content-wrap {
		padding-top: 50px;
		padding-bottom: 50px;
	}
}

.no-margins #main #content-wrap,
.no-margins.separate-layout #main #content-wrap,
.landing-page #main #content-wrap {
    padding-top: 0;
    padding-bottom: 0;
}

.content-area {
	float: left;
	position: relative;
	width: 72%;
	padding-right: 30px;
	border-right-width: 1px;
	border-style: solid;
	border-color: $color-9;
}

.widget-area {
	width: 28%;

	&.sidebar-primary {
		float: right;
		padding-left: 30px;
	}

	&.sidebar-secondary {
		float: left;
	}
}

.content-full-width .content-area,
body.content-full-screen #content-wrap {
	width: 100% !important;
	max-width: none !important;
	padding: 0 !important;
	border: 0 !important;
}

.content-full-screen .content-area {
	float: none;
	width: 100% !important;
	max-width: none !important;
	padding: 0 !important;
	margin: 0 !important;
	border: 0 !important;
}

.content-left-sidebar {
	.content-area {
		float: right;
		padding-left: 30px;
		padding-right: 0;
		border-left-width: 1px;
		border-right-width: 0;
	}

	.widget-area {
		float: left;
		padding-right: 30px;
		padding-left: 0;
	}
}

.content-both-sidebars {
	.content-area {
		width: 44%;
	}

	&.scs-style {
		.content-area {
			left: 28%;
			padding-left: 30px;
			border-left-width: 1px;
		}

		.widget-area.sidebar-secondary {
			position: relative;
			left: -44%;
			padding-right: 30px;
		}
	}

	&.ssc-style {
		.content-area {
			left: 56%;
			padding-left: 30px;
		    padding-right: 0;
		    border-left-width: 1px;
		    border-right-width: 0;
		}

		.widget-area {
			position: relative;
			left: -44%;
			padding-right: 30px;

			&.sidebar-primary {
			    padding-left: 0;
			}
		}
	}

	&.css-style {
		.widget-area.sidebar-secondary {
			padding-left: 30px;
		}
	}
}

/* Boxed Layout */
.boxed-layout {
	background-color: $color-7;

	#wrap {
		width: 1280px;
		max-width: 100% ;
		margin: 0 auto;
		background-color: $color-1;
	}


	&.wrap-boxshadow #wrap {
		@include box-shadow( 0 1px 4px rgba(0, 0, 0, .15) );
	}

	#wrap .container {
		width: auto;
		max-width: none;
		padding-left: 30px;
		padding-right: 30px;
	}

	&.content-full-screen #content-wrap {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	#footer-widgets {
		margin: 0;
	}
}

/* Boxed Layout > Move absolute items */
.boxed-layout .site-breadcrumbs {
	right: 30px;
}

/* Separate Layout */
.separate-layout {
	background-color: $color-9;

	.content-area,
	.widget-area .sidebar-box {
		background-color: $color-1;
		padding: 30px;
	}

	&.content-left-sidebar .content-area {
		padding: 30px;
	}

	&.content-full-width .content-area {
		padding: 30px !important;
	}

	.content-area {
	    border-right-width: 0;
	}

	&.content-left-sidebar .content-area {
	    border-left-width: 0;
	}

	.widget-area.sidebar-primary {
	    padding-left: 20px;
	}

	.widget-area.sidebar-secondary {
	    padding-right: 20px;
	}

	&.content-left-sidebar .widget-area {
	    padding-right: 20px;
	    padding-left: 0;
	}

	#main #content-wrap {
	    padding-top: 20px;
	    padding-bottom: 20px;
	}

	.sidebar-box {
	    margin-bottom: 20px;
	}

	.sidebar-box:last-child {
	    margin-bottom: 0;
	}

	&.content-both-sidebars {
		&.scs-style {
			.content-area {
				border-left-width: 0;
			}

			.widget-area.sidebar-secondary {
				padding-right: 20px;
			}
		}

		&.ssc-style {
			.content-area {
				padding-right: 30px;
			    border-left-width: 0;
			}

			.widget-area {
				padding-right: 20px;
			}
		}

		&.css-style {
			.widget-area.sidebar-secondary {
				padding-left: 20px;
				padding-right: 0;
			}
		}
	}
}

body.separate-blog.separate-layout {
	.content-area {
		padding: 0 !important; /* using !important to override customizer setting */
    	background-color: transparent;
	}

	#blog-entries > {
	    * {
		    background-color: #fff;
		    padding: 30px;
		    border: 0;
		    margin-bottom: 20px;
		}

		:last-child {
			margin-bottom: 0;
		}
	}

	.oceanwp-pagination,
	.page-jump,
	.scroller-status {
		background-color: #fff;
    	padding: 30px;
    	margin-top: 20px;

    	ul.page-numbers {
    		padding: 0;
    	}
	}

	.oceanwp-row {
		margin: 0;
		margin-right: -1.25rem;
	}

	#blog-entries.blog-grid > {
	    * {
		    background-color: transparent;
    		padding: 0 1.25rem 0 0;
		}

		:last-child {
			margin-bottom: 1.25rem;
		}
	}

	&.has-blog-grid .oceanwp-pagination {
    	margin-top: 0;
	}

	.blog-entry.grid-entry {
		.blog-entry-inner {
			background-color: #fff;
		    padding: 1.875rem;
		    border: 0;
	    }

    	.thumbnail {
		    margin: 0;
		}
	}
}

/*------------------------------------*
	All Devices under 1280px
*------------------------------------*/
@media only screen and (max-width: 1280px) {

	/* Both sidebars layout */
	.content-both-sidebars {
		.content-area {
			float: none !important;
			width: 100% !important;
			left: auto !important;
			border-width: 0 !important;
		}

		&:not(.separate-layout) .content-area {
		    padding: 0 !important;
		    margin-bottom: 40px;
	    }

		.widget-area {
			&.sidebar-primary,
			&.sidebar-secondary {
				float: left;
				width: 49% !important;
				left: auto !important;
				padding: 0 !important;
			}

			&.sidebar-primary {
				float: right;
			}
		}

		&:not(.separate-layout) .widget-area {
			&.sidebar-primary,
			&.sidebar-secondary {
				width: 48% !important;
			}
		}
	}

	/* Separate layout */
	.separate-layout.content-both-sidebars {
		.content-area {
		    margin-bottom: 20px;
		}

		.widget-area {
			&.sidebar-primary,
			&.sidebar-secondary {
				width: 49% !important;
			}

			&.sidebar-secondary {
			    margin-bottom: 20px;
			}

			&.sidebar-primary {
			    padding-left: 0;
			}
		}
	}

}

/*------------------------------------*
	All Devices under 1080px
*------------------------------------*/
@media only screen and (max-width: 1080px) {

	/* Both sidebars layout */
	.content-both-sidebars {
		.content-area {
			float: none !important;
			width: 100% !important;
			left: auto !important;
			border-width: 0 !important;
		}

		&:not(.separate-layout) .content-area {
		    padding: 0 !important;
		    margin-bottom: 40px;
	    }

		.widget-area {
			&.sidebar-primary,
			&.sidebar-secondary {
				float: left;
				width: 49% !important;
				left: auto !important;
				padding: 0 !important;
			}

			&.sidebar-primary {
				float: right;
			}
		}

		&:not(.separate-layout) .widget-area {
			&.sidebar-primary,
			&.sidebar-secondary {
				width: 48% !important;
			}
		}
	}

	/* Separate layout */
	.separate-layout.content-both-sidebars {
		.content-area {
		    margin-bottom: 20px;
		}

		.widget-area {
			&.sidebar-primary,
			&.sidebar-secondary {
				width: 49% !important;
			}

			&.sidebar-secondary {
			    margin-bottom: 20px;
			}

			&.sidebar-primary {
			    padding-left: 0;
			}
		}
	}

}

/*------------------------------------*
	All Devices under 960px
*------------------------------------*/
@media only screen and (max-width: 959px) {
	
	/* boxed */
	.boxed-layout {
		#wrap {
			overflow: hidden;
		}

		.site-breadcrumbs {
			right: auto;
		}
	}
	
	/* container */
	.container,
	body.content-full-screen .elementor-section-wrap > .elementor-section.elementor-section-boxed > .elementor-container {
		max-width: 90%;
	}
	
	/* full width content and sidebar */
	.content-area,
	.content-left-sidebar .content-area {
		float: none !important;
		width: 100%;
		margin-bottom: 40px;
		border: 0;
	}

	body.sidebar-content .content-area {
		margin-bottom: 0;
	}

	body:not(.separate-layout) .content-area,
	.content-left-sidebar:not(.separate-layout) .content-area {
		padding: 0 !important;
	}

	.no-margins .content-area,
	.no-margins.content-left-sidebar .content-area {
		margin-bottom: 0;
	}

	.widget-area.sidebar-primary,
	.widget-area.sidebar-secondary,
	.content-left-sidebar .widget-area {
		float: none !important;
		width: 100%;
		padding: 0 !important;
		border: 0;
	}

	body.has-composer.has-sidebar #primary {
		margin-bottom: 40px;
	}

	#main #content-wrap.container {
		width: auto !important;
	}

	/* Both sidebars layout */
	.content-both-sidebars {
		.widget-area {
			&.sidebar-primary,
			&.sidebar-secondary {
				float: none !important;
				width: 100% !important;
			}
		}

		&:not(.separate-layout) .widget-area {
			&.sidebar-primary,
			&.sidebar-secondary {
				width: 100% !important;
			}
		}
	}

	.separate-layout.content-both-sidebars {
		.widget-area {
			&.sidebar-primary,
			&.sidebar-secondary {
				width: 100% !important;
			}
		}
	}

	/* Separate layout */
	.separate-layout {
		.container,
		&.content-full-screen .elementor-section-wrap > .elementor-section.elementor-section-boxed > .elementor-container {
		    max-width: 95%;
		}

	    .content-area,
		&.content-left-sidebar .content-area {
			margin-bottom: 20px;
		}

		.widget-area {
			padding-left: 0 !important;
    		padding-right: 0 !important;
		}
	}

	body.separate-blog.separate-layout {
		.oceanwp-row {
			margin: 0 !important;
		}

		#blog-entries.blog-grid > * {
	    	padding: 0 !important;
		}
	}
	
}

/*------------------------------------*
	Tablet Portrait
*------------------------------------*/
@media only screen and (min-width: 768px) and (max-width: 959px) {
	
	/* main  */
	body.boxed-layout #wrap,
	body.boxed-layout .parallax-footer {
		width: auto !important;
	}
	
}

/*------------------------------------*
	Phone Portrait and Landscape
*------------------------------------*/
@media only screen and (max-width: 767px) {

	/* grid & main  */
	#wrap {
		width: 100% !important;
	}

	body.boxed-layout #wrap {
		width: auto !important;
	}

	.boxed-layout #top-bar-social {
		&.top-bar-right {
			right: auto;
		}

		&.top-bar-left {
			left: auto;
		}
	}

	.col:not(.swiper-slide), .blog-entry {
		width: 100%;
		margin-bottom: 25px;
	}

}

/*------------------------------------*
	Phone Landscape
*------------------------------------*/
@media only screen and (max-width: 480px) {

	/* boxed */
	.boxed-layout #wrap .container {
		padding-left: 20px;
		padding-right: 20px;
	}

}