forked from a64f7bb4-7358-4778-9fbe-3b882c34cc1d/v1
368 lines
8.2 KiB
CSS
368 lines
8.2 KiB
CSS
/**
|
|
* @file
|
|
* Provides CSS3 nativegrid based on Grid Layout.
|
|
*
|
|
* @see https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout
|
|
* Below is the less-robust version of GridStack layouts.
|
|
* Specific for Masonry, add a min-height to the .block-nativegrid to avoid
|
|
* reflow due to using JS.
|
|
*
|
|
* Classes:
|
|
* - .is-b-native, as the original two-dimensional, the real Native Grid.
|
|
* - .is-b-masonry, as the tweaked one-dimensional, the Masonry.
|
|
*/
|
|
|
|
/* csslint ignore:start */
|
|
/* The gap 15px is to match CSS grid convention such as Bootstrap, adjust it. */
|
|
:root {
|
|
--bnColGap: 15px;
|
|
--bnRowHeightNative: 80px;
|
|
}
|
|
|
|
.block-nativegrid,
|
|
.blazy.block-nativegrid,
|
|
.item-list > .block-nativegrid {
|
|
clear: both;
|
|
display: block;
|
|
list-style: none;
|
|
margin: 0 auto;
|
|
overflow: hidden;
|
|
padding: 0;
|
|
position: relative;
|
|
width: 100%;
|
|
}
|
|
|
|
.block-nativegrid > .grid,
|
|
.item-list > .block-nativegrid > .grid {
|
|
display: block;
|
|
margin: 0 0 var(--bnColGap) 0;
|
|
min-height: 40px;
|
|
padding: 0;
|
|
width: 100%;
|
|
}
|
|
|
|
.block-nativegrid .grid__content {
|
|
position: relative;
|
|
overflow: visible;
|
|
width: 100%;
|
|
}
|
|
|
|
/** 480px with 16px base font. */
|
|
@media only screen and (min-width: 30em) {
|
|
.block-nativegrid > .grid,
|
|
.item-list > .block-nativegrid > .grid {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.block-nativegrid {
|
|
gap: var(--bnColGap);
|
|
grid-template-columns: auto;
|
|
grid-auto-rows: var(--bnRowHeightNative);
|
|
/* align-content: start;
|
|
justify-content: start; */
|
|
}
|
|
|
|
.block-nativegrid,
|
|
.blazy.block-nativegrid,
|
|
.item-list > .block-nativegrid {
|
|
display: grid;
|
|
}
|
|
|
|
/** Without margin. */
|
|
.block-nativegrid.is-b-gapless {
|
|
gap: 0; /* csslint allow: known-properties, gap */
|
|
}
|
|
|
|
.block-nativegrid > .grid,
|
|
.item-list > .block-nativegrid > .grid {
|
|
display: flex;
|
|
align-items: start;
|
|
justify-content: start;
|
|
}
|
|
|
|
/** Adjust the minimum accordingly like everything else. */
|
|
.block-nativegrid.is-b-native > .grid {
|
|
-ms-grid-row-span: 2;
|
|
grid-row: span 2;
|
|
-ms-grid-column: auto;
|
|
grid-column: auto;
|
|
}
|
|
|
|
.block-nativegrid.is-b-native .grid__content {
|
|
height: 100%;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* Enable to make it gapless for Masonry. */
|
|
.block-nativegrid .is-b-grid .grid__content {
|
|
height: 100%;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* Add more relevant selectors accordingly to make gapless grids.
|
|
Remove .is-b-native to make it fit height-width for Masonry. */
|
|
.block-nativegrid.is-b-native .grid .litebox,
|
|
.block-nativegrid.is-b-native .grid .b-bg,
|
|
.block-nativegrid.is-b-native .grid iframe,
|
|
.block-nativegrid.is-b-native .grid picture,
|
|
.block-nativegrid.is-b-native .grid video,
|
|
.block-nativegrid.is-b-native .grid .media,
|
|
.block-nativegrid.is-b-native .grid img.media__element,
|
|
.block-nativegrid.is-b-native .grid .slide__media {
|
|
height: inherit;
|
|
/* Aspect ratio is irrelevant for gapless grid.*/
|
|
padding: 0 !important; /* csslint allow: known-properties, important */
|
|
position: static; /* To keep lightbox/ video icon centered. */
|
|
object-fit: cover;
|
|
width: 100%;
|
|
}
|
|
|
|
/* For some reason, unlike video, etc., iframe refuses to show when static. */
|
|
.block-nativegrid.is-b-native .grid iframe {
|
|
position: absolute;
|
|
}
|
|
|
|
/* To avoid initial confusion due to being hidden, adjust it. */
|
|
.block-nativegrid.is-b-native .blazy__caption,
|
|
.block-nativegrid.is-b-native .slide__caption {
|
|
bottom: 0;
|
|
left: 0;
|
|
position: absolute;
|
|
width: 100%;
|
|
color: #fff;
|
|
background: rgba(0,0,0,.8);
|
|
text-align: center;
|
|
padding: 10px 15px;
|
|
z-index: 3;
|
|
}
|
|
|
|
/* The only rule make sense for small devices, adjust it accordingly. */
|
|
.small-block-nativegrid-2 {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
}
|
|
|
|
/** 641px with 16px base font. */
|
|
@media only screen and (min-width: 40.063em) {
|
|
.medium-block-nativegrid-2 {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
|
|
.medium-block-nativegrid-3 {
|
|
grid-template-columns: repeat(3, 1fr);
|
|
}
|
|
|
|
.medium-block-nativegrid-4 {
|
|
grid-template-columns: repeat(4, 1fr);
|
|
}
|
|
|
|
.medium-block-nativegrid-5 {
|
|
grid-template-columns: repeat(5, 1fr);
|
|
}
|
|
|
|
.medium-block-nativegrid-6 {
|
|
grid-template-columns: repeat(6, 1fr);
|
|
}
|
|
|
|
.medium-block-nativegrid-7 {
|
|
grid-template-columns: repeat(7, 1fr);
|
|
}
|
|
|
|
.medium-block-nativegrid-8 {
|
|
grid-template-columns: repeat(8, 1fr);
|
|
}
|
|
|
|
.medium-block-nativegrid-9 {
|
|
grid-template-columns: repeat(9, 1fr);
|
|
}
|
|
|
|
.medium-block-nativegrid-10 {
|
|
grid-template-columns: repeat(10, 1fr);
|
|
}
|
|
|
|
.medium-block-nativegrid-11 {
|
|
grid-template-columns: repeat(11, 1fr);
|
|
}
|
|
|
|
.medium-block-nativegrid-12 {
|
|
grid-template-columns: repeat(12, 1fr);
|
|
}
|
|
}
|
|
|
|
/** 1025px with 16px base font. */
|
|
@media only screen and (min-width: 64.063em) {
|
|
/* Default for two-dimensional layout. */
|
|
.block-nativegrid {
|
|
grid-template-columns: repeat(12, 1fr);
|
|
}
|
|
|
|
/* Configurable one-dimensional layouts. */
|
|
.large-block-nativegrid-2 {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
|
|
.large-block-nativegrid-3 {
|
|
grid-template-columns: repeat(3, 1fr);
|
|
}
|
|
|
|
.large-block-nativegrid-4 {
|
|
grid-template-columns: repeat(4, 1fr);
|
|
}
|
|
|
|
.large-block-nativegrid-5 {
|
|
grid-template-columns: repeat(5, 1fr);
|
|
}
|
|
|
|
.large-block-nativegrid-6 {
|
|
grid-template-columns: repeat(6, 1fr);
|
|
}
|
|
|
|
.large-block-nativegrid-7 {
|
|
grid-template-columns: repeat(7, 1fr);
|
|
}
|
|
|
|
.large-block-nativegrid-8 {
|
|
grid-template-columns: repeat(8, 1fr);
|
|
}
|
|
|
|
.large-block-nativegrid-9 {
|
|
grid-template-columns: repeat(9, 1fr);
|
|
}
|
|
|
|
.large-block-nativegrid-10 {
|
|
grid-template-columns: repeat(10, 1fr);
|
|
}
|
|
|
|
.large-block-nativegrid-11 {
|
|
grid-template-columns: repeat(11, 1fr);
|
|
}
|
|
|
|
.large-block-nativegrid-12 {
|
|
grid-template-columns: repeat(12, 1fr);
|
|
}
|
|
|
|
/* Dimensions for two-dimensional layout. */
|
|
/** grid-row == height */
|
|
.block-nativegrid > .grid[data-b-h='1'] {
|
|
-ms-grid-row-span: 1;
|
|
grid-row: span 1;
|
|
}
|
|
|
|
.block-nativegrid > .grid[data-b-h='2'] {
|
|
-ms-grid-row-span: 2;
|
|
grid-row: span 2;
|
|
}
|
|
|
|
.block-nativegrid > .grid[data-b-h='3'] {
|
|
-ms-grid-row-span: 3;
|
|
grid-row: span 3;
|
|
}
|
|
|
|
.block-nativegrid > .grid[data-b-h='4'] {
|
|
-ms-grid-row-span: 4;
|
|
grid-row: span 4;
|
|
}
|
|
|
|
.block-nativegrid > .grid[data-b-h='5'] {
|
|
-ms-grid-row-span: 5;
|
|
grid-row: span 5;
|
|
}
|
|
|
|
.block-nativegrid > .grid[data-b-h='6'] {
|
|
-ms-grid-row-span: 6;
|
|
grid-row: span 6;
|
|
}
|
|
|
|
.block-nativegrid > .grid[data-b-h='7'] {
|
|
-ms-grid-row-span: 7;
|
|
grid-row: span 7;
|
|
}
|
|
|
|
.block-nativegrid > .grid[data-b-h='8'] {
|
|
-ms-grid-row-span: 8;
|
|
grid-row: span 8;
|
|
}
|
|
|
|
.block-nativegrid > .grid[data-b-h='9'] {
|
|
-ms-grid-row-span: 9;
|
|
grid-row: span 9;
|
|
}
|
|
|
|
.block-nativegrid > .grid[data-b-h='10'] {
|
|
-ms-grid-row-span: 10;
|
|
grid-row: span 10;
|
|
}
|
|
|
|
.block-nativegrid > .grid[data-b-h='11'] {
|
|
-ms-grid-row-span: 11;
|
|
grid-row: span 11;
|
|
}
|
|
|
|
.block-nativegrid > .grid[data-b-h='12'] {
|
|
-ms-grid-row-span: 12;
|
|
grid-row: span 12;
|
|
}
|
|
|
|
/** grid-column == width */
|
|
.block-nativegrid > .grid[data-b-w='1'] {
|
|
-ms-grid-column-span: 1;
|
|
grid-column: span 1;
|
|
}
|
|
|
|
.block-nativegrid > .grid[data-b-w='2'] {
|
|
-ms-grid-column-span: 2;
|
|
grid-column: span 2;
|
|
}
|
|
|
|
.block-nativegrid > .grid[data-b-w='3'] {
|
|
-ms-grid-column-span: 3;
|
|
grid-column: span 3;
|
|
}
|
|
|
|
.block-nativegrid > .grid[data-b-w='4'] {
|
|
-ms-grid-column-span: 4;
|
|
grid-column: span 4;
|
|
}
|
|
|
|
.block-nativegrid > .grid[data-b-w='5'] {
|
|
-ms-grid-column-span: 5;
|
|
grid-column: span 5;
|
|
}
|
|
|
|
.block-nativegrid > .grid[data-b-w='6'] {
|
|
-ms-grid-column-span: 6;
|
|
grid-column: span 6;
|
|
}
|
|
|
|
.block-nativegrid > .grid[data-b-w='7'] {
|
|
-ms-grid-column-span: 7;
|
|
grid-column: span 7;
|
|
}
|
|
|
|
.block-nativegrid > .grid[data-b-w='8'] {
|
|
-ms-grid-column-span: 8;
|
|
grid-column: span 8;
|
|
}
|
|
|
|
.block-nativegrid > .grid[data-b-w='9'] {
|
|
-ms-grid-column-span: 9;
|
|
grid-column: span 9;
|
|
}
|
|
|
|
.block-nativegrid > .grid[data-b-w='10'] {
|
|
-ms-grid-column-span: 10;
|
|
grid-column: span 10;
|
|
}
|
|
|
|
.block-nativegrid > .grid[data-b-w='11'] {
|
|
-ms-grid-column-span: 11;
|
|
grid-column: span 11;
|
|
}
|
|
|
|
.block-nativegrid > .grid[data-b-w='12'] {
|
|
-ms-grid-column-span: 12;
|
|
grid-column: span 12;
|
|
}
|
|
}
|
|
/* csslint ignore:end */
|