256 lines
7.7 KiB
CSS
256 lines
7.7 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.
|
|
*
|
|
* Warning! The percentage values are affected by :root--bnColGap. Adjust.
|
|
* Percentage is used specific for Masonry due to numeric values 1~12 is broken
|
|
* when being used on AJAX loaded contents like VIS, or IO infinite pager.
|
|
*
|
|
* @todo https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Masonry_Layout
|
|
*/
|
|
|
|
/* csslint ignore:start */
|
|
/* The gap 15px is to match CSS grid convention such as Bootstrap, adjust it.
|
|
To have gapless, simply add `is-b-gapless` class via template_preprocess. */
|
|
:root {
|
|
--bnRowHeightMasonry: 15px;
|
|
}
|
|
|
|
/** 480px with 16px base font. */
|
|
@media only screen and (min-width: 30em) {
|
|
.block-nativegrid.is-b-masonry {
|
|
grid-auto-rows: var(--bnRowHeightMasonry);
|
|
}
|
|
|
|
/* Enable to make it gapless for Masonry. */
|
|
.block-nativegrid.is-b-masonry .is-b-grid .grid__content {
|
|
height: 100%;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* To make even bottom gaps when using CSS background Blazy formmater.
|
|
See Troubleshooting for more details on this.
|
|
Only if using images, add more inner divs to fill in the gaps here. */
|
|
.block-nativegrid.is-b-masonry .grid .litebox,
|
|
.block-nativegrid.is-b-masonry .grid .media {
|
|
height: 100%;
|
|
}
|
|
|
|
/* The only rule make sense for small devices, adjust it accordingly. */
|
|
.small-block-nativegrid-2.is-b-masonry {
|
|
grid-template-columns: repeat(auto-fill, minmax(49.3333%, 1fr));
|
|
}
|
|
|
|
/* Gapless. */
|
|
.small-block-nativegrid-2.is-b-masonry.is-b-gapless {
|
|
grid-template-columns: repeat(auto-fill, minmax(50%, 1fr));
|
|
}
|
|
}
|
|
|
|
/** 641px with 16px base font. */
|
|
@media only screen and (min-width: 40.063em) {
|
|
/* Makes nice with AJAX unload due to unpredictable content heights. */
|
|
.is-b-unload .grid:not(.is-b-grid) {
|
|
opacity: 0;
|
|
transition: opacity .3s;
|
|
}
|
|
|
|
.is-b-unload .grid.is-b-layout {
|
|
opacity: 1;
|
|
}
|
|
|
|
/* Configurable one-dimensional layouts. */
|
|
.medium-block-nativegrid-2.is-b-masonry {
|
|
grid-template-columns: repeat(auto-fill, minmax(49.3333%, 1fr));
|
|
}
|
|
|
|
.medium-block-nativegrid-3.is-b-masonry {
|
|
grid-template-columns: repeat(auto-fill, minmax(32.4444%, 1fr));
|
|
}
|
|
|
|
.medium-block-nativegrid-4.is-b-masonry {
|
|
grid-template-columns: repeat(auto-fill, minmax(24%, 1fr));
|
|
}
|
|
|
|
.medium-block-nativegrid-5.is-b-masonry {
|
|
grid-template-columns: repeat(auto-fill, minmax(19%, 1fr));
|
|
}
|
|
|
|
.medium-block-nativegrid-6.is-b-masonry {
|
|
grid-template-columns: repeat(auto-fill, minmax(15.3333%, 1fr));
|
|
}
|
|
|
|
.medium-block-nativegrid-7.is-b-masonry {
|
|
grid-template-columns: repeat(auto-fill, minmax(13%, 1fr));
|
|
}
|
|
|
|
.medium-block-nativegrid-8.is-b-masonry {
|
|
grid-template-columns: repeat(auto-fill, minmax(12.4444%, 1fr));
|
|
}
|
|
|
|
.medium-block-nativegrid-9.is-b-masonry {
|
|
grid-template-columns: repeat(auto-fill, minmax(8.7777%, 1fr));
|
|
}
|
|
|
|
.medium-block-nativegrid-10.is-b-masonry {
|
|
grid-template-columns: repeat(auto-fill, minmax(8.7777%, 1fr));
|
|
}
|
|
|
|
.medium-block-nativegrid-11.is-b-masonry {
|
|
grid-template-columns: repeat(auto-fill, minmax(8%, 1fr));
|
|
}
|
|
|
|
.medium-block-nativegrid-12.is-b-masonry {
|
|
grid-template-columns: repeat(auto-fill, minmax(7.2222%, 1fr));
|
|
}
|
|
|
|
/* Gapless. */
|
|
.medium-block-nativegrid-2.is-b-masonry.is-b-gapless {
|
|
grid-template-columns: repeat(auto-fill, minmax(50%, 1fr));
|
|
}
|
|
|
|
.medium-block-nativegrid-3.is-b-masonry.is-b-gapless {
|
|
grid-template-columns: repeat(auto-fill, minmax(33.3333%, 1fr));
|
|
}
|
|
|
|
.medium-block-nativegrid-4.is-b-masonry.is-b-gapless {
|
|
grid-template-columns: repeat(auto-fill, minmax(25%, 1fr));
|
|
}
|
|
|
|
.medium-block-nativegrid-5.is-b-masonry.is-b-gapless {
|
|
grid-template-columns: repeat(auto-fill, minmax(20%, 1fr));
|
|
}
|
|
|
|
.medium-block-nativegrid-6.is-b-masonry.is-b-gapless {
|
|
grid-template-columns: repeat(auto-fill, minmax(16.6666%, 1fr));
|
|
}
|
|
|
|
.medium-block-nativegrid-7.is-b-masonry.is-b-gapless {
|
|
grid-template-columns: repeat(auto-fill, minmax(14.2857%, 1fr));
|
|
}
|
|
|
|
.medium-block-nativegrid-8.is-b-masonry.is-b-gapless {
|
|
grid-template-columns: repeat(auto-fill, minmax(12.5%, 1fr));
|
|
}
|
|
|
|
.medium-block-nativegrid-9.is-b-masonry.is-b-gapless {
|
|
grid-template-columns: repeat(auto-fill, minmax(11.11111%, 1fr));
|
|
}
|
|
|
|
.medium-block-nativegrid-10.is-b-masonry.is-b-gapless {
|
|
grid-template-columns: repeat(auto-fill, minmax(10%, 1fr));
|
|
}
|
|
|
|
.medium-block-nativegrid-11.is-b-masonry.is-b-gapless {
|
|
grid-template-columns: repeat(auto-fill, minmax(9.0909%, 1fr));
|
|
}
|
|
|
|
.medium-block-nativegrid-12.is-b-masonry.is-b-gapless {
|
|
grid-template-columns: repeat(auto-fill, minmax(8.3333%, 1fr));
|
|
}
|
|
}
|
|
|
|
/** 1025px with 16px base font. */
|
|
@media only screen and (min-width: 64.063em) {
|
|
/* Configurable one-dimensional layouts. */
|
|
.large-block-nativegrid-2.is-b-masonry {
|
|
grid-template-columns: repeat(auto-fill, minmax(49.3333%, 1fr));
|
|
}
|
|
|
|
.large-block-nativegrid-3.is-b-masonry {
|
|
grid-template-columns: repeat(auto-fill, minmax(32.4444%, 1fr));
|
|
}
|
|
|
|
.large-block-nativegrid-4.is-b-masonry {
|
|
grid-template-columns: repeat(auto-fill, minmax(24%, 1fr));
|
|
}
|
|
|
|
.large-block-nativegrid-5.is-b-masonry {
|
|
grid-template-columns: repeat(auto-fill, minmax(19%, 1fr));
|
|
}
|
|
|
|
.large-block-nativegrid-6.is-b-masonry {
|
|
grid-template-columns: repeat(auto-fill, minmax(15.3333%, 1fr));
|
|
}
|
|
|
|
.large-block-nativegrid-7.is-b-masonry {
|
|
grid-template-columns: repeat(auto-fill, minmax(13%, 1fr));
|
|
}
|
|
|
|
.large-block-nativegrid-8.is-b-masonry {
|
|
grid-template-columns: repeat(auto-fill, minmax(12.4444%, 1fr));
|
|
}
|
|
|
|
.large-block-nativegrid-9.is-b-masonry {
|
|
grid-template-columns: repeat(auto-fill, minmax(8.7777%, 1fr));
|
|
}
|
|
|
|
.large-block-nativegrid-10.is-b-masonry {
|
|
grid-template-columns: repeat(auto-fill, minmax(8.7777%, 1fr));
|
|
}
|
|
|
|
.large-block-nativegrid-11.is-b-masonry {
|
|
grid-template-columns: repeat(auto-fill, minmax(8%, 1fr));
|
|
}
|
|
|
|
.large-block-nativegrid-12.is-b-masonry {
|
|
grid-template-columns: repeat(auto-fill, minmax(7.2222%, 1fr));
|
|
}
|
|
|
|
/* Gapless. */
|
|
.large-block-nativegrid-2.is-b-masonry.is-b-gapless {
|
|
grid-template-columns: repeat(auto-fill, minmax(50%, 1fr));
|
|
}
|
|
|
|
.large-block-nativegrid-3.is-b-masonry.is-b-gapless {
|
|
grid-template-columns: repeat(auto-fill, minmax(33.3333%, 1fr));
|
|
}
|
|
|
|
.large-block-nativegrid-4.is-b-masonry.is-b-gapless {
|
|
grid-template-columns: repeat(auto-fill, minmax(25%, 1fr));
|
|
}
|
|
|
|
.large-block-nativegrid-5.is-b-masonry.is-b-gapless {
|
|
grid-template-columns: repeat(auto-fill, minmax(20%, 1fr));
|
|
}
|
|
|
|
.large-block-nativegrid-6.is-b-masonry.is-b-gapless {
|
|
grid-template-columns: repeat(auto-fill, minmax(16.6666%, 1fr));
|
|
}
|
|
|
|
.large-block-nativegrid-7.is-b-masonry.is-b-gapless {
|
|
grid-template-columns: repeat(auto-fill, minmax(14.2857%, 1fr));
|
|
}
|
|
|
|
.large-block-nativegrid-8.is-b-masonry.is-b-gapless {
|
|
grid-template-columns: repeat(auto-fill, minmax(12.5%, 1fr));
|
|
}
|
|
|
|
.large-block-nativegrid-9.is-b-masonry.is-b-gapless {
|
|
grid-template-columns: repeat(auto-fill, minmax(11.11111%, 1fr));
|
|
}
|
|
|
|
.large-block-nativegrid-10.is-b-masonry.is-b-gapless {
|
|
grid-template-columns: repeat(auto-fill, minmax(10%, 1fr));
|
|
}
|
|
|
|
.large-block-nativegrid-11.is-b-masonry.is-b-gapless {
|
|
grid-template-columns: repeat(auto-fill, minmax(9.0909%, 1fr));
|
|
}
|
|
|
|
.large-block-nativegrid-12.is-b-masonry.is-b-gapless {
|
|
grid-template-columns: repeat(auto-fill, minmax(8.3333%, 1fr));
|
|
}
|
|
|
|
}
|
|
/* csslint ignore:end */
|