162 lines
3.4 KiB
CSS
162 lines
3.4 KiB
CSS
/**
|
|
* @file
|
|
* Provides CSS3 flex based on Flexbox layout.
|
|
*/
|
|
|
|
/* csslint ignore:start */
|
|
:root {
|
|
/* The gap 15px is to match CSS grid convention such as Bootstrap. Adjust it. */
|
|
--bfColGap: 15px;
|
|
}
|
|
|
|
.block-flex,
|
|
.blazy.block-flex,
|
|
.item-list > .block-flex {
|
|
clear: both;
|
|
display: block;
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
list-style: none;
|
|
height: auto;
|
|
margin: 0 auto;
|
|
padding: 0;
|
|
width: 100%;
|
|
align-content: flex-start;
|
|
align-items: flex-start;
|
|
justify-content: flex-start;
|
|
transition: height .5s;
|
|
}
|
|
|
|
.block-flex > .grid,
|
|
.item-list > .block-flex > .grid {
|
|
display: block;
|
|
margin: 0;
|
|
min-height: 40px;
|
|
padding: 0;
|
|
flex-direction: column;
|
|
margin-right: var(--bfColGap);
|
|
margin-bottom: var(--bfColGap);
|
|
position: relative;
|
|
transition: height .3s, width .3s, top .3s;
|
|
}
|
|
|
|
.block-flex .grid__content {
|
|
position: relative;
|
|
overflow: visible;
|
|
}
|
|
|
|
.block-flex.is-b-loading {
|
|
opacity: 0;
|
|
}
|
|
|
|
/** 480px with 16px base font.*/
|
|
@media only screen and (min-width: 30em) {
|
|
.block-flex,
|
|
.blazy.block-flex,
|
|
.item-list > .block-flex,
|
|
.block-flex > .grid,
|
|
.item-list > .block-flex > .grid {
|
|
display: flex;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.blazy.small-block-flex-2 > .grid {
|
|
width: calc(33.3% - var(--bfColGap));
|
|
}
|
|
}
|
|
|
|
/** 641px with 16px base font. */
|
|
@media only screen and (min-width: 40.063em) {
|
|
.blazy.medium-block-flex-2 > .grid {
|
|
width: calc(50% - var(--bfColGap));
|
|
}
|
|
|
|
.blazy.medium-block-flex-3 > .grid {
|
|
width: calc(33.3333333333% - var(--bfColGap));
|
|
}
|
|
|
|
.blazy.medium-block-flex-4 > .grid {
|
|
width: calc(25% - var(--bfColGap));
|
|
}
|
|
|
|
.blazy.medium-block-flex-5 > .grid {
|
|
width: calc(20% - var(--bfColGap));
|
|
}
|
|
|
|
.blazy.medium-block-flex-6 > .grid {
|
|
width: calc(16.6666666667% - var(--bfColGap));
|
|
}
|
|
|
|
.blazy.medium-block-flex-7 > .grid {
|
|
width: calc(14.2857142857% - var(--bfColGap));
|
|
}
|
|
|
|
.blazy.medium-block-flex-8 > .grid {
|
|
width: calc(12.5% - var(--bfColGap));
|
|
}
|
|
|
|
.blazy.medium-block-flex-9 > .grid {
|
|
width: calc(11.1111111111% - var(--bfColGap));
|
|
}
|
|
|
|
.blazy.medium-block-flex-10 > .grid {
|
|
width: calc(10% - var(--bfColGap));
|
|
}
|
|
|
|
.blazy.medium-block-flex-11 > .grid {
|
|
width: calc(9.0909090909% - var(--bfColGap));
|
|
}
|
|
|
|
.blazy.medium-block-flex-12 > .grid {
|
|
width: calc(8.3333333333% - var(--bfColGap));
|
|
}
|
|
}
|
|
|
|
/** 1025px with 16px base font.*/
|
|
@media only screen and (min-width: 64.063em) {
|
|
.blazy.large-block-flex-2 > .grid {
|
|
width: calc(50% - var(--bfColGap));
|
|
}
|
|
|
|
.blazy.large-block-flex-3 > .grid {
|
|
width: calc(33.3333333333% - var(--bfColGap));
|
|
}
|
|
|
|
.blazy.large-block-flex-4 > .grid {
|
|
width: calc(25% - var(--bfColGap));
|
|
}
|
|
|
|
.blazy.large-block-flex-5 > .grid {
|
|
width: calc(20% - var(--bfColGap));
|
|
}
|
|
|
|
.blazy.large-block-flex-6 > .grid {
|
|
width: calc(16.6666666667% - var(--bfColGap));
|
|
}
|
|
|
|
.blazy.large-block-flex-7 > .grid {
|
|
width: calc(14.2857142857% - var(--bfColGap));
|
|
}
|
|
|
|
.blazy.large-block-flex-8 > .grid {
|
|
width: calc(12.5% - var(--bfColGap));
|
|
}
|
|
|
|
.blazy.large-block-flex-9 > .grid {
|
|
width: calc(11.1111111111% - var(--bfColGap));
|
|
}
|
|
|
|
.blazy.large-block-flex-10 > .grid {
|
|
width: calc(10% - var(--bfColGap));
|
|
}
|
|
|
|
.blazy.large-block-flex-11 > .grid {
|
|
width: calc(9.0909090909% - var(--bfColGap));
|
|
}
|
|
|
|
.blazy.large-block-flex-12 > .grid {
|
|
width: calc(8.3333333333% - var(--bfColGap));
|
|
}
|
|
}
|
|
/* csslint ignore:end */
|