list.scss

//
// Copyright 2017 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-elevation/mixins";
@import "../packages/mdc-form-field/mdc-form-field";
@import "../packages/mdc-list/mdc-list";
@import "../packages/mdc-ripple/mixins";

a.material-icons {
  text-decoration: none;
}

.mdc-list,
.mdc-list-group {
  max-width: 600px;
}

.demo-list--icon-placeholders,
.demo-list--with-avatars {
  @include mdc-list-item-graphic-ink-color(white);
  @include mdc-list-item-graphic-fill-color(text-icon-on-background);
}

.demo-list--avatar-and-meta-icon {
  @include mdc-list-item-meta-ink-color($material-color-pink-a200);
}

.demo-list-group--custom,
.demo-list--custom {
  @include mdc-list-divider-color($material-color-pink-50);
}

.demo-list--custom {
  @include mdc-list-item-primary-text-ink-color($material-color-blue-600);
  @include mdc-list-item-secondary-text-ink-color($material-color-purple-600);
  @include mdc-list-item-graphic-fill-color($material-color-pink-400);
  @include mdc-list-item-graphic-ink-color($material-color-pink-50);
  @include mdc-list-item-meta-ink-color($material-color-orange-500);
}

.preamble {
  max-width: 600px;
  margin-top: 48px;
  margin-left: 72px;
}

.checkbox-list-ripple-surface:not(.mdc-ripple-upgraded):active::after {
  // TODO(moog16): Update mdc-ripple to prevent duplicate ripples on parent elements, and remove this hack
  // Prevent checkbox clicks from activating a second ripple on the list item.
  opacity: 0 !important;
}

#demo-wrapper {
  margin: 24px;
}

#demo-wrapper section {
  padding: 24px;
}

#demo-wrapper .mdc-list, #demo-wrapper .mdc-list-group {
  border: 1px solid rgba(0, 0, 0, 0.1);
}

#demo-wrapper .mdc-list-group .mdc-list {
  border: none;
}

#demo-wrapper h2 {
  font-size: 1.5em;
  margin-bottom: 0.8em;
  margin-left: 24px;
}

#demo-wrapper h3 {
  margin-bottom: 0.8em;
}

.hero .mdc-list {
  @include mdc-elevation(4);

  background-color: white;
  min-width: 320px;
}