
| Current Path : /var/www/html1/bbp/web/core/themes/olivero/css/layout/ |
Linux ift1.ift-informatik.de 5.4.0-216-generic #236-Ubuntu SMP Fri Apr 11 19:53:21 UTC 2025 x86_64 |
| Current File : /var/www/html1/bbp/web/core/themes/olivero/css/layout/layout-views-grid-horizontal.pcss.css |
/**
* @file
* Responsive styles for views grid horizontal layout.
*/
@import "../base/variables.pcss.css";
:root {
--views-grid-layout-gap: var(--sp);
}
.views-view-grid--horizontal {
display: flex;
flex-wrap: wrap;
&.cols-1 {
& > * {
flex-basis: 100%;
margin-inline-end: 0;
}
}
&.cols-2 {
& > * {
flex-basis: 100%;
margin-inline-end: 0;
/* 2 column layout. */
@media (--md) {
flex-basis: calc(100% / 2 - (((2 - 1) / 2) * var(--views-grid-layout-gap)));
margin-inline-end: var(--views-grid-layout-gap);
&:nth-child(2n) {
margin-inline-end: 0;
}
}
}
}
&.cols-3 {
& > * {
flex-basis: 100%;
margin-inline-end: 0;
/* 2 column layout. */
@media (--md) {
flex-basis: calc(100% / 2 - (((2 - 1) / 2) * var(--views-grid-layout-gap)));
margin-inline-end: var(--views-grid-layout-gap);
&:nth-child(2n) {
margin-inline-end: 0;
}
}
/* 3 column layout. */
@media (--lg) {
flex-basis: calc(100% / 3 - (((3 - 1) / 3) * var(--views-grid-layout-gap)));
&:nth-child(2n) {
margin-inline-end: var(--views-grid-layout-gap);
}
&:nth-child(3n) {
margin-inline-end: 0;
}
}
}
}
&.cols-4 {
& > * {
flex-basis: 100%;
margin-inline-end: 0;
/* 2 column layout. */
@media (--md) {
flex-basis: calc(100% / 2 - (((2 - 1) / 2) * var(--views-grid-layout-gap)));
margin-inline-end: var(--views-grid-layout-gap);
&:nth-child(2n) {
margin-inline-end: 0;
}
}
/* 4 column layout. */
@media (--lg) {
flex-basis: calc(100% / 4 - (((4 - 1) / 4) * var(--views-grid-layout-gap)));
&:nth-child(2n) {
margin-inline-end: var(--views-grid-layout-gap);
}
&:nth-child(4n) {
margin-inline-end: 0;
}
}
}
}
&.cols-5 {
& > * {
flex-basis: 100%;
margin-inline-end: 0;
/* 2 column layout. */
@media (--sm) {
flex-basis: calc(100% / 2 - (((2 - 1) / 2) * var(--views-grid-layout-gap)));
margin-inline-end: var(--views-grid-layout-gap);
&:nth-child(2n) {
margin-inline-end: 0;
}
}
/* 3 column layout. */
@media (--md) {
flex-basis: calc(100% / 3 - (((3 - 1) / 3) * var(--views-grid-layout-gap)));
&:nth-child(2n) {
margin-inline-end: var(--views-grid-layout-gap);
}
&:nth-child(3n) {
margin-inline-end: 0;
}
}
/* 5 column layout. */
@media (--lg) {
flex-basis: calc(100% / 5 - (((5 - 1) / 5) * var(--views-grid-layout-gap)));
&:nth-child(3n) {
margin-inline-end: var(--views-grid-layout-gap);
}
&:nth-child(5n) {
margin-inline-end: 0;
}
}
}
}
&.cols-6 {
& > * {
flex-basis: 100%;
margin-inline-end: 0;
/* 2 column layout. */
@media (--sm) {
flex-basis: calc(100% / 2 - (((2 - 1) / 2) * var(--views-grid-layout-gap)));
margin-inline-end: var(--views-grid-layout-gap);
&:nth-child(2n) {
margin-inline-end: 0;
}
}
/* 3 column layout. */
@media (--md) {
flex-basis: calc(100% / 3 - (((3 - 1) / 3) * var(--views-grid-layout-gap)));
&:nth-child(2n) {
margin-inline-end: var(--views-grid-layout-gap);
}
&:nth-child(3n) {
margin-inline-end: 0;
}
}
/* 6 column layout. */
@media (--lg) {
flex-basis: calc(100% / 6 - (((6 - 1) / 6) * var(--views-grid-layout-gap)));
&:nth-child(3n) {
margin-inline-end: var(--views-grid-layout-gap);
}
&:nth-child(6n) {
margin-inline-end: 0;
}
}
}
}
&.cols-7 {
& > * {
flex-basis: 100%;
margin-inline-end: 0;
/* 2 column layout. */
@media (--sm) {
flex-basis: calc(100% / 2 - (((2 - 1) / 2) * var(--views-grid-layout-gap)));
margin-inline-end: var(--views-grid-layout-gap);
&:nth-child(2n) {
margin-inline-end: 0;
}
}
/* 3 column layout. */
@media (--md) {
flex-basis: calc(100% / 3 - (((3 - 1) / 3) * var(--views-grid-layout-gap)));
&:nth-child(2n) {
margin-inline-end: var(--views-grid-layout-gap);
}
&:nth-child(3n) {
margin-inline-end: 0;
}
}
/* 7 column layout. */
@media (--lg) {
flex-basis: calc(100% / 7 - (((7 - 1) / 7) * var(--views-grid-layout-gap)));
&:nth-child(3n) {
margin-inline-end: var(--views-grid-layout-gap);
}
&:nth-child(7n) {
margin-inline-end: 0;
}
}
}
}
&.cols-8 {
& > * {
flex-basis: 100%;
margin-inline-end: 0;
/* 2 column layout. */
@media (--sm) {
flex-basis: calc(100% / 2 - (((2 - 1) / 2) * var(--views-grid-layout-gap)));
margin-inline-end: var(--views-grid-layout-gap);
&:nth-child(2n) {
margin-inline-end: 0;
}
}
/* 4 column layout. */
@media (--md) {
flex-basis: calc(100% / 4 - (((4 - 1) / 4) * var(--views-grid-layout-gap)));
&:nth-child(2n) {
margin-inline-end: var(--views-grid-layout-gap);
}
&:nth-child(4n) {
margin-inline-end: 0;
}
}
/* 8 column layout. */
@media (--lg) {
flex-basis: calc(100% / 8 - (((8 - 1) / 8) * var(--views-grid-layout-gap)));
&:nth-child(4n) {
margin-inline-end: var(--views-grid-layout-gap);
}
&:nth-child(8n) {
margin-inline-end: 0;
}
}
}
}
& > * {
flex-grow: 0;
flex-shrink: 0;
margin-block-end: var(--views-grid-layout-gap);
}
}