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

core/themes/olivero/css/layout/layout-views-grid-horizontal.css

deleted100644 → 0
+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);

  }

core/themes/olivero/css/layout/layout-views-grid-horizontal.pcss.css

deleted100644 → 0
+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);

  }

}

core/themes/olivero/css/layout/layout-views-grid-vertical.css

deleted100644 → 0
+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;

    }

core/themes/olivero/css/layout/layout-views-grid-vertical.pcss.css

deleted100644 → 0
+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;

    }

  }

}

core/themes/olivero/css/layout/layout-views-grid.css

0 → 100644
+60 −0

File added.

Preview size limit exceeded, changes collapsed.