image-list.scss

//
// Copyright 2018 Google Inc. All Rights Reserved.
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
//      http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.
//

@import "./common";
@import "../packages/mdc-checkbox/mdc-checkbox";
@import "../packages/mdc-form-field/mdc-form-field";
@import "../packages/mdc-image-list/mdc-image-list";
@import "../packages/mdc-radio/mdc-radio";

.mdc-image-list.hero-image-list {
  @include mdc-image-list-standard-columns(5);

  width: 300px;
  margin: 0;
}

.hero-image-list .mdc-image-list__image {
  background-color: #000;
}

.mdc-image-list.standard-image-list {
  @include mdc-image-list-aspect(1.5); // Images are 3:2
  @include mdc-image-list-standard-columns(5);

  max-width: 1000px;
}

.mdc-image-list.masonry-image-list {
  @include mdc-image-list-masonry-columns(5);
  max-width: 1000px;
}

.hide-supporting .mdc-image-list__supporting {
  display: none;
}

.rounded-corners {
  @include mdc-image-list-corner-radius(8px);
}

@media (max-width: 599px) {
  .mdc-image-list.standard-image-list {
    @include mdc-image-list-standard-columns(3);
  }

  .mdc-image-list.masonry-image-list {
    @include mdc-image-list-masonry-columns(3);
  }
}