preact-material-components/GridList/style.css

preact wrapper for "Material Components for the web"

/*!
 Material Components for the Web
 Copyright (c) 2018 Google Inc.
 License: Apache-2.0
*/
.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.77778); }

.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.66667); }

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

.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;
  font-weight: 500;
  line-height: 1rem; }

.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.00937em;
  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*/