Unverified Commit 96c04f44 authored by Lauri Timmanee's avatar Lauri Timmanee
Browse files

Issue #3255180 by mherchel, Gauravmahlawat, andy-blum: Olivero: Refactor Views...

Issue #3255180 by mherchel, Gauravmahlawat, andy-blum: Olivero: Refactor Views Grid Style CSS to take advantage of not having to support IE
parent b8e771ec
Loading
Loading
Loading
Loading
+0 −590
Original line number Diff line number Diff line
/*
 * DO NOT EDIT THIS FILE.
 * See the following change record for more information,
 * https://www.drupal.org/node/3084859
 * @preserve
 */

/**
 * @file
 * Responsive styles for views grid horizontal layout.
 */

/*
 * Media query breakpoints.
 * Processed by postcss/postcss-custom-media.
 */

/* Navigation related breakpoints */

/* Grid related breakpoints */

/* Grid shifts from 6 to 14 columns. */

/* Width of the entire grid maxes out. */

:root {
  --views-grid-layout-gap: var(--sp);
}

.views-view-grid--horizontal {
  display: flex;
  flex-wrap: wrap
}

[dir="ltr"] .views-view-grid--horizontal.cols-1 > * {
      margin-right: 0;
}

[dir="rtl"] .views-view-grid--horizontal.cols-1 > * {
      margin-left: 0;
}

.views-view-grid--horizontal.cols-1 > * {
      flex-basis: 100%;
    }

[dir="ltr"] .views-view-grid--horizontal.cols-2 > * {
      margin-right: 0;
}

[dir="rtl"] .views-view-grid--horizontal.cols-2 > * {
      margin-left: 0;
}

.views-view-grid--horizontal.cols-2 > * {
      flex-basis: 100%

      /* 2 column layout. */
    }

@media (min-width: 43.75rem) {

[dir="ltr"] .views-view-grid--horizontal.cols-2 > * {
        margin-right: var(--views-grid-layout-gap);
  }

[dir="rtl"] .views-view-grid--horizontal.cols-2 > * {
        margin-left: var(--views-grid-layout-gap);
  }

.views-view-grid--horizontal.cols-2 > * {
        flex-basis: calc(50% - var(--views-grid-layout-gap)*0.5)
    }

        [dir="ltr"] .views-view-grid--horizontal.cols-2 > *:nth-child(2n) {
          margin-right: 0;
  }

        [dir="rtl"] .views-view-grid--horizontal.cols-2 > *:nth-child(2n) {
          margin-left: 0;
  }
      }

[dir="ltr"] .views-view-grid--horizontal.cols-3 > * {
      margin-right: 0;
}

[dir="rtl"] .views-view-grid--horizontal.cols-3 > * {
      margin-left: 0;
}

.views-view-grid--horizontal.cols-3 > * {
      flex-basis: 100%

      /* 2 column layout. */
    }

@media (min-width: 43.75rem) {

[dir="ltr"] .views-view-grid--horizontal.cols-3 > * {
        margin-right: var(--views-grid-layout-gap);
  }

[dir="rtl"] .views-view-grid--horizontal.cols-3 > * {
        margin-left: var(--views-grid-layout-gap);
  }

.views-view-grid--horizontal.cols-3 > * {
        flex-basis: calc(50% - var(--views-grid-layout-gap)*0.5)
    }

        [dir="ltr"] .views-view-grid--horizontal.cols-3 > *:nth-child(2n) {
          margin-right: 0;
  }

        [dir="rtl"] .views-view-grid--horizontal.cols-3 > *:nth-child(2n) {
          margin-left: 0;
  }
      }

.views-view-grid--horizontal.cols-3 > * {

      /* 3 column layout. */
    }

@media (min-width: 62.5rem) {

.views-view-grid--horizontal.cols-3 > * {
        flex-basis: calc(33.33333% - var(--views-grid-layout-gap)*0.66667)
    }

        [dir="ltr"] .views-view-grid--horizontal.cols-3 > *:nth-child(2n) {
          margin-right: var(--views-grid-layout-gap);
  }

        [dir="rtl"] .views-view-grid--horizontal.cols-3 > *:nth-child(2n) {
          margin-left: var(--views-grid-layout-gap);
  }

        [dir="ltr"] .views-view-grid--horizontal.cols-3 > *:nth-child(3n) {
          margin-right: 0;
  }

        [dir="rtl"] .views-view-grid--horizontal.cols-3 > *:nth-child(3n) {
          margin-left: 0;
  }
      }

[dir="ltr"] .views-view-grid--horizontal.cols-4 > * {
      margin-right: 0;
}

[dir="rtl"] .views-view-grid--horizontal.cols-4 > * {
      margin-left: 0;
}

.views-view-grid--horizontal.cols-4 > * {
      flex-basis: 100%

      /* 2 column layout. */
    }

@media (min-width: 43.75rem) {

[dir="ltr"] .views-view-grid--horizontal.cols-4 > * {
        margin-right: var(--views-grid-layout-gap);
  }

[dir="rtl"] .views-view-grid--horizontal.cols-4 > * {
        margin-left: var(--views-grid-layout-gap);
  }

.views-view-grid--horizontal.cols-4 > * {
        flex-basis: calc(50% - var(--views-grid-layout-gap)*0.5)
    }

        [dir="ltr"] .views-view-grid--horizontal.cols-4 > *:nth-child(2n) {
          margin-right: 0;
  }

        [dir="rtl"] .views-view-grid--horizontal.cols-4 > *:nth-child(2n) {
          margin-left: 0;
  }
      }

.views-view-grid--horizontal.cols-4 > * {

      /* 4 column layout. */
    }

@media (min-width: 62.5rem) {

.views-view-grid--horizontal.cols-4 > * {
        flex-basis: calc(25% - var(--views-grid-layout-gap)*0.75)
    }

        [dir="ltr"] .views-view-grid--horizontal.cols-4 > *:nth-child(2n) {
          margin-right: var(--views-grid-layout-gap);
  }

        [dir="rtl"] .views-view-grid--horizontal.cols-4 > *:nth-child(2n) {
          margin-left: var(--views-grid-layout-gap);
  }

        [dir="ltr"] .views-view-grid--horizontal.cols-4 > *:nth-child(4n) {
          margin-right: 0;
  }

        [dir="rtl"] .views-view-grid--horizontal.cols-4 > *:nth-child(4n) {
          margin-left: 0;
  }
      }

[dir="ltr"] .views-view-grid--horizontal.cols-5 > * {
      margin-right: 0;
}

[dir="rtl"] .views-view-grid--horizontal.cols-5 > * {
      margin-left: 0;
}

.views-view-grid--horizontal.cols-5 > * {
      flex-basis: 100%

      /* 2 column layout. */
    }

@media (min-width: 31.25rem) {

[dir="ltr"] .views-view-grid--horizontal.cols-5 > * {
        margin-right: var(--views-grid-layout-gap);
  }

[dir="rtl"] .views-view-grid--horizontal.cols-5 > * {
        margin-left: var(--views-grid-layout-gap);
  }

.views-view-grid--horizontal.cols-5 > * {
        flex-basis: calc(50% - var(--views-grid-layout-gap)*0.5)
    }

        [dir="ltr"] .views-view-grid--horizontal.cols-5 > *:nth-child(2n) {
          margin-right: 0;
  }

        [dir="rtl"] .views-view-grid--horizontal.cols-5 > *:nth-child(2n) {
          margin-left: 0;
  }
      }

.views-view-grid--horizontal.cols-5 > * {

      /* 3 column layout. */
    }

@media (min-width: 43.75rem) {

.views-view-grid--horizontal.cols-5 > * {
        flex-basis: calc(33.33333% - var(--views-grid-layout-gap)*0.66667)
    }

        [dir="ltr"] .views-view-grid--horizontal.cols-5 > *:nth-child(2n) {
          margin-right: var(--views-grid-layout-gap);
  }

        [dir="rtl"] .views-view-grid--horizontal.cols-5 > *:nth-child(2n) {
          margin-left: var(--views-grid-layout-gap);
  }

        [dir="ltr"] .views-view-grid--horizontal.cols-5 > *:nth-child(3n) {
          margin-right: 0;
  }

        [dir="rtl"] .views-view-grid--horizontal.cols-5 > *:nth-child(3n) {
          margin-left: 0;
  }
      }

.views-view-grid--horizontal.cols-5 > * {

      /* 5 column layout. */
    }

@media (min-width: 62.5rem) {

.views-view-grid--horizontal.cols-5 > * {
        flex-basis: calc(20% - var(--views-grid-layout-gap)*0.8)
    }

        [dir="ltr"] .views-view-grid--horizontal.cols-5 > *:nth-child(3n) {
          margin-right: var(--views-grid-layout-gap);
  }

        [dir="rtl"] .views-view-grid--horizontal.cols-5 > *:nth-child(3n) {
          margin-left: var(--views-grid-layout-gap);
  }

        [dir="ltr"] .views-view-grid--horizontal.cols-5 > *:nth-child(5n) {
          margin-right: 0;
  }

        [dir="rtl"] .views-view-grid--horizontal.cols-5 > *:nth-child(5n) {
          margin-left: 0;
  }
      }

[dir="ltr"] .views-view-grid--horizontal.cols-6 > * {
      margin-right: 0;
}

[dir="rtl"] .views-view-grid--horizontal.cols-6 > * {
      margin-left: 0;
}

.views-view-grid--horizontal.cols-6 > * {
      flex-basis: 100%

      /* 2 column layout. */
    }

@media (min-width: 31.25rem) {

[dir="ltr"] .views-view-grid--horizontal.cols-6 > * {
        margin-right: var(--views-grid-layout-gap);
  }

[dir="rtl"] .views-view-grid--horizontal.cols-6 > * {
        margin-left: var(--views-grid-layout-gap);
  }

.views-view-grid--horizontal.cols-6 > * {
        flex-basis: calc(50% - var(--views-grid-layout-gap)*0.5)
    }

        [dir="ltr"] .views-view-grid--horizontal.cols-6 > *:nth-child(2n) {
          margin-right: 0;
  }

        [dir="rtl"] .views-view-grid--horizontal.cols-6 > *:nth-child(2n) {
          margin-left: 0;
  }
      }

.views-view-grid--horizontal.cols-6 > * {

      /* 3 column layout. */
    }

@media (min-width: 43.75rem) {

.views-view-grid--horizontal.cols-6 > * {
        flex-basis: calc(33.33333% - var(--views-grid-layout-gap)*0.66667)
    }

        [dir="ltr"] .views-view-grid--horizontal.cols-6 > *:nth-child(2n) {
          margin-right: var(--views-grid-layout-gap);
  }

        [dir="rtl"] .views-view-grid--horizontal.cols-6 > *:nth-child(2n) {
          margin-left: var(--views-grid-layout-gap);
  }

        [dir="ltr"] .views-view-grid--horizontal.cols-6 > *:nth-child(3n) {
          margin-right: 0;
  }

        [dir="rtl"] .views-view-grid--horizontal.cols-6 > *:nth-child(3n) {
          margin-left: 0;
  }
      }

.views-view-grid--horizontal.cols-6 > * {

      /* 6 column layout. */
    }

@media (min-width: 62.5rem) {

.views-view-grid--horizontal.cols-6 > * {
        flex-basis: calc(16.66667% - var(--views-grid-layout-gap)*0.83333)
    }

        [dir="ltr"] .views-view-grid--horizontal.cols-6 > *:nth-child(3n) {
          margin-right: var(--views-grid-layout-gap);
  }

        [dir="rtl"] .views-view-grid--horizontal.cols-6 > *:nth-child(3n) {
          margin-left: var(--views-grid-layout-gap);
  }

        [dir="ltr"] .views-view-grid--horizontal.cols-6 > *:nth-child(6n) {
          margin-right: 0;
  }

        [dir="rtl"] .views-view-grid--horizontal.cols-6 > *:nth-child(6n) {
          margin-left: 0;
  }
      }

[dir="ltr"] .views-view-grid--horizontal.cols-7 > * {
      margin-right: 0;
}

[dir="rtl"] .views-view-grid--horizontal.cols-7 > * {
      margin-left: 0;
}

.views-view-grid--horizontal.cols-7 > * {
      flex-basis: 100%

      /* 2 column layout. */
    }

@media (min-width: 31.25rem) {

[dir="ltr"] .views-view-grid--horizontal.cols-7 > * {
        margin-right: var(--views-grid-layout-gap);
  }

[dir="rtl"] .views-view-grid--horizontal.cols-7 > * {
        margin-left: var(--views-grid-layout-gap);
  }

.views-view-grid--horizontal.cols-7 > * {
        flex-basis: calc(50% - var(--views-grid-layout-gap)*0.5)
    }

        [dir="ltr"] .views-view-grid--horizontal.cols-7 > *:nth-child(2n) {
          margin-right: 0;
  }

        [dir="rtl"] .views-view-grid--horizontal.cols-7 > *:nth-child(2n) {
          margin-left: 0;
  }
      }

.views-view-grid--horizontal.cols-7 > * {

      /* 3 column layout. */
    }

@media (min-width: 43.75rem) {

.views-view-grid--horizontal.cols-7 > * {
        flex-basis: calc(33.33333% - var(--views-grid-layout-gap)*0.66667)
    }

        [dir="ltr"] .views-view-grid--horizontal.cols-7 > *:nth-child(2n) {
          margin-right: var(--views-grid-layout-gap);
  }

        [dir="rtl"] .views-view-grid--horizontal.cols-7 > *:nth-child(2n) {
          margin-left: var(--views-grid-layout-gap);
  }

        [dir="ltr"] .views-view-grid--horizontal.cols-7 > *:nth-child(3n) {
          margin-right: 0;
  }

        [dir="rtl"] .views-view-grid--horizontal.cols-7 > *:nth-child(3n) {
          margin-left: 0;
  }
      }

.views-view-grid--horizontal.cols-7 > * {

      /* 7 column layout. */
    }

@media (min-width: 62.5rem) {

.views-view-grid--horizontal.cols-7 > * {
        flex-basis: calc(14.28571% - var(--views-grid-layout-gap)*0.85714)
    }

        [dir="ltr"] .views-view-grid--horizontal.cols-7 > *:nth-child(3n) {
          margin-right: var(--views-grid-layout-gap);
  }

        [dir="rtl"] .views-view-grid--horizontal.cols-7 > *:nth-child(3n) {
          margin-left: var(--views-grid-layout-gap);
  }

        [dir="ltr"] .views-view-grid--horizontal.cols-7 > *:nth-child(7n) {
          margin-right: 0;
  }

        [dir="rtl"] .views-view-grid--horizontal.cols-7 > *:nth-child(7n) {
          margin-left: 0;
  }
      }

[dir="ltr"] .views-view-grid--horizontal.cols-8 > * {
      margin-right: 0;
}

[dir="rtl"] .views-view-grid--horizontal.cols-8 > * {
      margin-left: 0;
}

.views-view-grid--horizontal.cols-8 > * {
      flex-basis: 100%

      /* 2 column layout. */
    }

@media (min-width: 31.25rem) {

[dir="ltr"] .views-view-grid--horizontal.cols-8 > * {
        margin-right: var(--views-grid-layout-gap);
  }

[dir="rtl"] .views-view-grid--horizontal.cols-8 > * {
        margin-left: var(--views-grid-layout-gap);
  }

.views-view-grid--horizontal.cols-8 > * {
        flex-basis: calc(50% - var(--views-grid-layout-gap)*0.5)
    }

        [dir="ltr"] .views-view-grid--horizontal.cols-8 > *:nth-child(2n) {
          margin-right: 0;
  }

        [dir="rtl"] .views-view-grid--horizontal.cols-8 > *:nth-child(2n) {
          margin-left: 0;
  }
      }

.views-view-grid--horizontal.cols-8 > * {

      /* 4 column layout. */
    }

@media (min-width: 43.75rem) {

.views-view-grid--horizontal.cols-8 > * {
        flex-basis: calc(25% - var(--views-grid-layout-gap)*0.75)
    }

        [dir="ltr"] .views-view-grid--horizontal.cols-8 > *:nth-child(2n) {
          margin-right: var(--views-grid-layout-gap);
  }

        [dir="rtl"] .views-view-grid--horizontal.cols-8 > *:nth-child(2n) {
          margin-left: var(--views-grid-layout-gap);
  }

        [dir="ltr"] .views-view-grid--horizontal.cols-8 > *:nth-child(4n) {
          margin-right: 0;
  }

        [dir="rtl"] .views-view-grid--horizontal.cols-8 > *:nth-child(4n) {
          margin-left: 0;
  }
      }

.views-view-grid--horizontal.cols-8 > * {

      /* 8 column layout. */
    }

@media (min-width: 62.5rem) {

.views-view-grid--horizontal.cols-8 > * {
        flex-basis: calc(12.5% - var(--views-grid-layout-gap)*0.875)
    }

        [dir="ltr"] .views-view-grid--horizontal.cols-8 > *:nth-child(4n) {
          margin-right: var(--views-grid-layout-gap);
  }

        [dir="rtl"] .views-view-grid--horizontal.cols-8 > *:nth-child(4n) {
          margin-left: var(--views-grid-layout-gap);
  }

        [dir="ltr"] .views-view-grid--horizontal.cols-8 > *:nth-child(8n) {
          margin-right: 0;
  }

        [dir="rtl"] .views-view-grid--horizontal.cols-8 > *:nth-child(8n) {
          margin-left: 0;
  }
      }

.views-view-grid--horizontal > * {
    flex-grow: 0;
    flex-shrink: 0;
    margin-bottom: var(--views-grid-layout-gap);
  }
+0 −277
Original line number Diff line number Diff line
/**
 * @file
 * Responsive styles for views grid horizontal layout.
 */

@import "../base/media-queries.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);
  }
}
+0 −165
Original line number Diff line number Diff line
/*
 * DO NOT EDIT THIS FILE.
 * See the following change record for more information,
 * https://www.drupal.org/node/3084859
 * @preserve
 */

/**
 * @file
 * Responsive styles for views grid vertical layout.
 */

/*
 * Media query breakpoints.
 * Processed by postcss/postcss-custom-media.
 */

/* Navigation related breakpoints */

/* Grid related breakpoints */

/* Grid shifts from 6 to 14 columns. */

/* Width of the entire grid maxes out. */

:root {
  --views-grid-layout-gap: var(--sp);
}

.views-view-grid--vertical {
  margin-bottom: calc(var(--views-grid-layout-gap)*-1); /* Offset the bottom row's padding. */
  grid-column-gap: var(--views-grid-layout-gap)
}

@media (min-width: 31.25rem) {

.views-view-grid--vertical.cols-2 {
      column-count: 2
  }
    }

@media (min-width: 31.25rem) {

.views-view-grid--vertical.cols-3 {
      column-count: 2
  }
    }

@media (min-width: 43.75rem) {

.views-view-grid--vertical.cols-3 {
      column-count: 3
  }
    }

@media (min-width: 31.25rem) {

.views-view-grid--vertical.cols-4 {
      column-count: 2
  }
    }

@media (min-width: 43.75rem) {

.views-view-grid--vertical.cols-4 {
      column-count: 3
  }
    }

@media (min-width: 62.5rem) {

.views-view-grid--vertical.cols-4 {
      column-count: 4
  }
    }

@media (min-width: 31.25rem) {

.views-view-grid--vertical.cols-5 {
      column-count: 2
  }
    }

@media (min-width: 43.75rem) {

.views-view-grid--vertical.cols-5 {
      column-count: 3
  }
    }

@media (min-width: 62.5rem) {

.views-view-grid--vertical.cols-5 {
      column-count: 5
  }
    }

@media (min-width: 31.25rem) {

.views-view-grid--vertical.cols-6 {
      column-count: 2
  }
    }

@media (min-width: 43.75rem) {

.views-view-grid--vertical.cols-6 {
      column-count: 3
  }
    }

@media (min-width: 62.5rem) {

.views-view-grid--vertical.cols-6 {
      column-count: 6
  }
    }

@media (min-width: 31.25rem) {

.views-view-grid--vertical.cols-7 {
      column-count: 2
  }
    }

@media (min-width: 43.75rem) {

.views-view-grid--vertical.cols-7 {
      column-count: 3
  }
    }

@media (min-width: 62.5rem) {

.views-view-grid--vertical.cols-7 {
      column-count: 7
  }
    }

@media (min-width: 31.25rem) {

.views-view-grid--vertical.cols-8 {
      column-count: 2
  }
    }

@media (min-width: 43.75rem) {

.views-view-grid--vertical.cols-8 {
      column-count: 4
  }
    }

@media (min-width: 62.5rem) {

.views-view-grid--vertical.cols-8 {
      column-count: 8
  }
    }

.views-view-grid--vertical .views-view-grid__item > * {
      padding-bottom: var(--views-grid-layout-gap);
      page-break-inside: avoid;
      break-inside: avoid;
    }
+0 −108
Original line number Diff line number Diff line
/**
 * @file
 * Responsive styles for views grid vertical layout.
 */

@import "../base/media-queries.pcss.css";

:root {
  --views-grid-layout-gap: var(--sp);
}

.views-view-grid--vertical {
  margin-block-end: calc(-1 * var(--views-grid-layout-gap)); /* Offset the bottom row's padding. */
  column-gap: var(--views-grid-layout-gap);

  &.cols-2 {
    @media (--sm) {
      column-count: 2;
    }
  }

  &.cols-3 {
    @media (--sm) {
      column-count: 2;
    }

    @media (--md) {
      column-count: 3;
    }
  }

  &.cols-4 {
    @media (--sm) {
      column-count: 2;
    }

    @media (--md) {
      column-count: 3;
    }

    @media (--lg) {
      column-count: 4;
    }
  }

  &.cols-5 {
    @media (--sm) {
      column-count: 2;
    }

    @media (--md) {
      column-count: 3;
    }

    @media (--lg) {
      column-count: 5;
    }
  }

  &.cols-6 {
    @media (--sm) {
      column-count: 2;
    }

    @media (--md) {
      column-count: 3;
    }

    @media (--lg) {
      column-count: 6;
    }
  }

  &.cols-7 {
    @media (--sm) {
      column-count: 2;
    }

    @media (--md) {
      column-count: 3;
    }

    @media (--lg) {
      column-count: 7;
    }
  }

  &.cols-8 {
    @media (--sm) {
      column-count: 2;
    }

    @media (--md) {
      column-count: 4;
    }

    @media (--lg) {
      column-count: 8;
    }
  }

  & .views-view-grid__item {
    & > * {
      padding-block-end: var(--views-grid-layout-gap);
      break-inside: avoid;
    }
  }
}
+60 −0

File added.

Preview size limit exceeded, changes collapsed.

Loading