Sjabloon:Portal/Layout.css

/* -----------------------------------------------------------------------------
   Layout styles
----------------------------------------------------------------------------- */

/* -----------------------------------------------------------------------------
   Common styles
----------------------------------------------------------------------------- */
.bs-vspace {
	margin-top: 10px;
    margin-bottom: 10px;
}

/* container */
.bs-layout-container {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.bs-layout-container.bs-layout-space-between {
	justify-content: space-between;
}
.bs-layout-container.bs-layout-space-around {
	justify-content: space-around;
}
.bs-layout-container.bs-layout-space-auto {
	justify-content: space-between;
}
.bs-layout-container.bs-layout-space-start {
	justify-content: flex-start;
}
.bs-layout-container.bs-layout-space-end {
	justify-content: flex-end;
}

/* cell */
.bs-layout-cell {
	padding: 10px;
	margin-bottom: 10px;
	overflow: hidden;
	text-overflow: ellipsis;
}

.bs-layout-cell a.image img {
	max-width: 100%;
	height: auto;
}

.bs-layout-cell.bs-layout-cell-image {
	padding: 0px;
}

.bs-layout-cell.bs-layout-cell-image a > img {
	max-width: 100%;
	height: auto;
}

/* -----------------------------------------------------------------------------
   Desktop only styles
----------------------------------------------------------------------------- */
@media all and ( min-width: 1001px ) {
	.bs-layout-container.bs-space-auto {
		justify-content: space-between;
	}
}
/* -----------------------------------------------------------------------------
   Desktop and tablet styles
----------------------------------------------------------------------------- */
@media all and ( min-width: 721px ) {
	.bs-layout-cell {
		width: 100%;
		min-height: 100%;
	}

	.bs-layout-container.bs-contain-col-2 .bs-layout-cell {
		width: 49%;
	}
	.bs-layout-container.bs-contain-col-2 .bs-layout-cell:nth-child( odd ) {
		margin-left: 0;
		margin-right: 1%;
	}
	.bs-layout-container.bs-contain-col-2 .bs-layout-cell:nth-child( even ) {
		margin-left: 1%;
		margin-right: 0;
	}

	.bs-layout-container.bs-contain-col-3 .bs-layout-cell {
		width: 32%;
	}
	.bs-layout-container.bs-contain-col-3 .bs-layout-cell:nth-child( 3n+1 ) {
		margin-left: 0;
		margin-right: 1%;
	}
	.bs-layout-container.bs-contain-col-3 .bs-layout-cell:nth-child( 3n+2 ) {
		margin-left: 0.5%;
		margin-right: 0.5%;
	}
	.bs-layout-container.bs-contain-col-3 .bs-layout-cell:nth-child( 3n ) {
		margin-left: 1%;
		margin-right: 0;
	}
	
	.bs-layout-container.bs-contain-col-3.colspan-2-left .bs-layout-cell:nth-child( odd ) {
		width: 65%;
		margin-left: 0;
		margin-right: 1%;
	}
	.bs-layout-container.bs-contain-col-3.colspan-2-left .bs-layout-cell:nth-child( even ) {
		width: 32%;
		margin-left: 1%;
		margin-right: 0;
	}
	.bs-layout-container.bs-contain-col-3.colspan-2-right .bs-layout-cell:nth-child( odd ) {
		width: 32%;
		margin-left: 0;
		margin-right: 1%;
	}
	.bs-layout-container.bs-contain-col-3.colspan-2-right .bs-layout-cell:nth-child( even ) {
		width: 65%;
		margin-left: 1%;
		margin-right: 0;
	}

	.bs-layout-container.bs-contain-col-4 .bs-layout-cell {
		width: 23%;
	}
	.bs-layout-container.bs-contain-col-4 .bs-layout-cell:nth-child( 4n+1 ) {
		margin-left: 0;
		margin-right: 1%;
	}
	.bs-layout-container.bs-contain-col-4 .bs-layout-cell:nth-child( 4n+2 ),
	.bs-layout-container.bs-contain-col-4 .bs-layout-cell:nth-child( 4n+3 ){
		margin-left: 0.5%;
		margin-right: 0.5%;
	}
	.bs-layout-container.bs-contain-col-4 .bs-layout-cell:nth-child( 4n ) {
		margin-left: 1%;
		margin-right: 0;
	}
	
	.bs-layout-container.bs-contain-col-4.colspan-2-left .bs-layout-cell:nth-child( 3n+1 ) {
		width: 45%;
		margin-left: 0;
		margin-right: 1%;
	}
	.bs-layout-container.bs-contain-col-4.colspan-2-left .bs-layout-cell:nth-child( 3n+2 ),
	.bs-layout-container.bs-contain-col-4.colspan-2-left .bs-layout-cell:nth-child( 3n ){
		margin-left: 1%;
	}
	
	.bs-layout-container.bs-contain-col-4.colspan-2-center .bs-layout-cell:nth-child( 3n+1 ) {
		margin-right: 1%;
	}
	.bs-layout-container.bs-contain-col-4.colspan-2-center .bs-layout-cell:nth-child( 3n+2 ) {
		width: 45%;
		margin-right: 0;
	}
	.bs-layout-container.bs-contain-col-4.colspan-2-center .bs-layout-cell:nth-child( 3n ){
		margin-left: 0;
		margin-right: 1%;
	}

	.bs-layout-container.bs-contain-col-4.colspan-2-right .bs-layout-cell:nth-child( 3n+1 ),
	.bs-layout-container.bs-contain-col-4.colspan-2-right .bs-layout-cell:nth-child( 3n+2 ) {
		margin-right: 1%;
	}
	.bs-layout-container.bs-contain-col-4.colspan-2-right .bs-layout-cell:nth-child( 3n ){
		width: 45%;
		margin-left: 1%;
		margin-right: 0;
	}

	.bs-layout-container.bs-contain-col-4.colspan-3-left .bs-layout-cell:nth-child( odd ) {
		width: 75%;
		margin-left: 0;
		margin-right: 1%;
	}
	.bs-layout-container.bs-contain-col-4.colspan-3-left .bs-layout-cell:nth-child( even ) {
		margin-left: 1%;
		margin-right: 0;
	}

	.bs-layout-container.bs-contain-col-4.colspan-3-right .bs-layout-cell:nth-child( odd ) {
		margin-left: 0;
		margin-right: 1%;
	}
	.bs-layout-container.bs-contain-col-4.colspan-3-right .bs-layout-cell:nth-child( even ) {
		width: 75%;
		margin-left: 1%;
		margin-right: 0;
	}
}
/* -----------------------------------------------------------------------------
   Tablet only styles
----------------------------------------------------------------------------- */
@media all and ( min-width: 721px ) and ( max-width: 1000px ) {
	.bs-layout-container.bs-space-auto {
		justify-content: space-evenly;
	}
}
/* -----------------------------------------------------------------------------
   Mobile only styles
----------------------------------------------------------------------------- */
@media all and ( max-width: 720px ) {
	.bs-layout-container.bs-space-auto {
		justify-content: space-evenly;
	}

	.bs-layout-container .bs-layout-cell {
		min-width: 100%;
		min-height: 100% !important;
	}
}