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)
|