@material/grid-list/dist/mdc.grid-list.css

The Material Components for the web grid list component

/**
 * @license
 * Copyright Google LLC All Rights Reserved.
 *
 * Use of this source code is governed by an MIT-style license that can be
 * found in the LICENSE file at https://github.com/material-components/material-components-web/blob/master/LICENSE
 */
.mdc-grid-tile__primary {
  padding-bottom: calc(100% / 1);
}

.mdc-grid-tile {
  margin: 2px 0;
  padding: 0 2px;
}

.mdc-grid-tile__secondary {
  left: 2px;
  width: calc(100% - 4px);
}

.mdc-grid-list__tiles {
  margin: 2px auto;
}

.mdc-grid-list__tiles {
  display: flex;
  flex-flow: row wrap;
  padding: 0;
}

.mdc-grid-list--tile-gutter-1 .mdc-grid-tile {
  margin: 0.5px 0;
  padding: 0 0.5px;
}
.mdc-grid-list--tile-gutter-1 .mdc-grid-tile__secondary {
  left: 0.5px;
  width: calc(100% - 1px);
}
.mdc-grid-list--tile-gutter-1 .mdc-grid-list__tiles {
  margin: 0.5px auto;
}

.mdc-grid-list--tile-aspect-16x9 .mdc-grid-tile__primary {
  padding-bottom: calc(100% / 1.7777777778);
}

.mdc-grid-list--tile-aspect-3x2 .mdc-grid-tile__primary {
  padding-bottom: calc(100% / 1.5);
}

.mdc-grid-list--tile-aspect-2x3 .mdc-grid-tile__primary {
  padding-bottom: calc(100% / 0.6666666667);
}

.mdc-grid-list--tile-aspect-4x3 .mdc-grid-tile__primary {
  padding-bottom: calc(100% / 1.3333333333);
}

.mdc-grid-list--tile-aspect-3x4 .mdc-grid-tile__primary {
  padding-bottom: calc(100% / 0.75);
}

.mdc-grid-tile {
  display: block;
  position: relative;
  /* @alternate */
  width: 200px;
  width: var(--mdc-grid-list-tile-width, 200px);
}

.mdc-grid-tile__primary {
  background-color: #fff;
  /* @alternate */
  background-color: var(--mdc-theme-background, #fff);
  color: rgba(0, 0, 0, 0.87);
  /* @alternate */
  color: var(--mdc-theme-text-primary-on-background, rgba(0, 0, 0, 0.87));
  position: relative;
  height: 0;
}

.mdc-grid-tile__primary-content {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.mdc-grid-tile__secondary {
  background-color: #6200ee;
  /* @alternate */
  background-color: var(--mdc-theme-primary, #6200ee);
  color: #fff;
  /* @alternate */
  color: var(--mdc-theme-on-primary, #fff);
  position: absolute;
  bottom: 0;
  box-sizing: border-box;
  height: 48px;
  padding: 16px;
}

.mdc-grid-tile__title {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  display: block;
  margin: 0;
  padding: 0;
  font-size: 1rem;
  line-height: 1rem;
  font-weight: 500;
}

.mdc-grid-tile__support-text {
  font-family: Roboto, sans-serif;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-size: 1rem;
  line-height: 1.75rem;
  font-weight: 400;
  letter-spacing: 0.009375em;
  text-decoration: inherit;
  text-transform: inherit;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  display: block;
  margin: 0;
  margin-top: 4px;
  padding: 0;
}

.mdc-grid-tile__icon {
  position: absolute;
  top: calc(50% - 24px / 2);
  font-size: 0;
}

.mdc-grid-list--twoline-caption .mdc-grid-tile__secondary {
  height: 68px;
}

.mdc-grid-list--header-caption .mdc-grid-tile__secondary {
  top: 0;
  bottom: auto;
}

.mdc-grid-list--with-icon-align-start .mdc-grid-tile__secondary {
  /* @noflip */
  padding-left: 56px;
  /* @noflip */
  padding-right: 8px;
}
.mdc-grid-list[dir=rtl] .mdc-grid-list--with-icon-align-start .mdc-grid-tile__secondary, [dir=rtl] .mdc-grid-list .mdc-grid-list--with-icon-align-start .mdc-grid-tile__secondary {
  /* @noflip */
  padding-left: 8px;
  /* @noflip */
  padding-right: 56px;
}

.mdc-grid-list--with-icon-align-start .mdc-grid-tile__icon {
  /* @noflip */
  left: 16px;
  /* @noflip */
  right: initial;
  font-size: 24px;
}
.mdc-grid-list[dir=rtl] .mdc-grid-list--with-icon-align-start .mdc-grid-tile__icon, [dir=rtl] .mdc-grid-list .mdc-grid-list--with-icon-align-start .mdc-grid-tile__icon {
  /* @noflip */
  left: initial;
  /* @noflip */
  right: 16px;
}

.mdc-grid-list--with-icon-align-end .mdc-grid-tile__secondary {
  /* @noflip */
  padding-left: 16px;
  /* @noflip */
  padding-right: 56px;
}
.mdc-grid-list[dir=rtl] .mdc-grid-list--with-icon-align-end .mdc-grid-tile__secondary, [dir=rtl] .mdc-grid-list .mdc-grid-list--with-icon-align-end .mdc-grid-tile__secondary {
  /* @noflip */
  padding-left: 56px;
  /* @noflip */
  padding-right: 16px;
}

.mdc-grid-list--with-icon-align-end .mdc-grid-tile__icon {
  /* @noflip */
  left: initial;
  /* @noflip */
  right: 16px;
  font-size: 24px;
}
.mdc-grid-list[dir=rtl] .mdc-grid-list--with-icon-align-end .mdc-grid-tile__icon, [dir=rtl] .mdc-grid-list .mdc-grid-list--with-icon-align-end .mdc-grid-tile__icon {
  /* @noflip */
  left: 16px;
  /* @noflip */
  right: initial;
}

/*# sourceMappingURL=mdc.grid-list.css.map*/