Difference between revisions of "Template:Portal/Layout.css"

 
m (1 revision imported)
 

/* -----------------------------------------------------------------------------

  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; } }

/* -----------------------------------------------------------------------------
        
           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;
        
        	}
        
        }
(No difference)

Attachments

Discussions