preact-material-components/ImageList/style.css

preact wrapper for "Material Components for the web"

/*!
 Material Components for the Web
 Copyright (c) 2018 Google Inc.
 License: MIT
*/
.mdc-image-list {
  display: flex;
  flex-wrap: wrap;
  margin: 0 auto;
  padding: 0; }

.mdc-image-list__item,
.mdc-image-list__image-aspect-container {
  position: relative;
  box-sizing: border-box; }

.mdc-image-list__item {
  list-style-type: none; }

.mdc-image-list__image {
  width: 100%; }

.mdc-image-list__image-aspect-container .mdc-image-list__image {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover; }

.mdc-image-list__image-aspect-container {
  padding-bottom: calc(100% / 1); }

.mdc-image-list__supporting {
  color: rgba(0, 0, 0, 0.87);
  /* @alternate */
  color: var(--mdc-theme-text-primary-on-background, rgba(0, 0, 0, 0.87));
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 8px 0;
  line-height: 24px; }

.mdc-image-list__label {
  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; }

.mdc-image-list--with-text-protection .mdc-image-list__supporting {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 48px;
  padding: 0 16px;
  background: rgba(0, 0, 0, 0.6);
  color: #fff; }

.mdc-image-list--masonry {
  display: block; }
  .mdc-image-list--masonry .mdc-image-list__item {
    -webkit-column-break-inside: avoid;
            break-inside: avoid-column; }
  .mdc-image-list--masonry .mdc-image-list__image {
    display: block;
    height: auto; }

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