bsw/jbe@1309: /**
bsw/jbe@1309:  * Copyright 2015 Google Inc. All Rights Reserved.
bsw/jbe@1309:  *
bsw/jbe@1309:  * Licensed under the Apache License, Version 2.0 (the "License");
bsw/jbe@1309:  * you may not use this file except in compliance with the License.
bsw/jbe@1309:  * You may obtain a copy of the License at
bsw/jbe@1309:  *
bsw/jbe@1309:  *      http://www.apache.org/licenses/LICENSE-2.0
bsw/jbe@1309:  *
bsw/jbe@1309:  * Unless required by applicable law or agreed to in writing, software
bsw/jbe@1309:  * distributed under the License is distributed on an "AS IS" BASIS,
bsw/jbe@1309:  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
bsw/jbe@1309:  * See the License for the specific language governing permissions and
bsw/jbe@1309:  * limitations under the License.
bsw/jbe@1309:  */
bsw/jbe@1309: 
bsw/jbe@1309: @import "../variables";
bsw/jbe@1309: @import "../mixins";
bsw/jbe@1309: 
bsw/jbe@1309: 
bsw/jbe@1309: .mdl-list {
bsw/jbe@1309:   display: block;
bsw/jbe@1309:   padding: $list-border 0;
bsw/jbe@1309:   list-style: none;
bsw/jbe@1309: }
bsw/jbe@1309: 
bsw/jbe@1309: .mdl-list__item {
bsw/jbe@1309:   @include typo-subhead();
bsw/jbe@1309:   line-height: 1;
bsw/jbe@1309:   display: flex;
bsw/jbe@1309:   min-height: $list-min-height;
bsw/jbe@1309:   box-sizing: border-box;
bsw/jbe@1309:   flex-direction: row;
bsw/jbe@1309:   flex-wrap: nowrap;
bsw/jbe@1309:   align-items: center;
bsw/jbe@1309:   padding: $list-min-padding;
bsw/jbe@1309:   cursor: default;
bsw/jbe@1309:   color: $list-main-text-text-color;
bsw/jbe@1309:   overflow: hidden;
bsw/jbe@1309: 
bsw/jbe@1309:   & .mdl-list__item-primary-content {
bsw/jbe@1309:     order: 0;
bsw/jbe@1309:     flex-grow: 2;
bsw/jbe@1309:     text-decoration: none;
bsw/jbe@1309:     box-sizing: border-box;
bsw/jbe@1309:     display: flex;
bsw/jbe@1309:     align-items: center;
bsw/jbe@1309: 
bsw/jbe@1309:     & .mdl-list__item-icon {
bsw/jbe@1309:       margin-right: $list-icon-text-left-distance - $list-icon-size - $list-min-padding;
bsw/jbe@1309:     }
bsw/jbe@1309: 
bsw/jbe@1309:     & .mdl-list__item-avatar {
bsw/jbe@1309:       margin-right: $list-avatar-text-left-distance - $list-avatar-size - $list-min-padding;
bsw/jbe@1309:     }
bsw/jbe@1309:   }
bsw/jbe@1309: 
bsw/jbe@1309:   & .mdl-list__item-secondary-content {
bsw/jbe@1309:     display: flex;
bsw/jbe@1309:     flex-flow: column;
bsw/jbe@1309:     align-items: flex-end;
bsw/jbe@1309:     margin-left: $list-min-padding;
bsw/jbe@1309: 
bsw/jbe@1309:     & .mdl-list__item-secondary-action label { display: inline; }
bsw/jbe@1309:     & .mdl-list__item-secondary-info {
bsw/jbe@1309:       @include typo-caption();
bsw/jbe@1309:       color: $list-supporting-text-text-color;
bsw/jbe@1309:     }
bsw/jbe@1309:     & .mdl-list__item-sub-header {
bsw/jbe@1309:       padding: 0 0 0 $list-min-padding;
bsw/jbe@1309:     }
bsw/jbe@1309:   }
bsw/jbe@1309: }
bsw/jbe@1309: 
bsw/jbe@1309: .mdl-list__item-icon,
bsw/jbe@1309: .mdl-list__item-icon.material-icons {
bsw/jbe@1309:   height: $list-icon-size;
bsw/jbe@1309:   width: $list-icon-size;
bsw/jbe@1309:   font-size: $list-icon-size;
bsw/jbe@1309:   box-sizing: border-box;
bsw/jbe@1309:   color: $list-icon-color;
bsw/jbe@1309: }
bsw/jbe@1309: 
bsw/jbe@1309: .mdl-list__item-avatar,
bsw/jbe@1309: .mdl-list__item-avatar.material-icons {
bsw/jbe@1309:   height: $list-avatar-size;
bsw/jbe@1309:   width: $list-avatar-size;
bsw/jbe@1309:   box-sizing: border-box;
bsw/jbe@1309:   border-radius: 50%;
bsw/jbe@1309:   // Set a background colour in case the user doesn't provide an image.
bsw/jbe@1309:   background-color: $list-icon-color;
bsw/jbe@1309:   // Set a font size and color in case the user provides a Material Icon.
bsw/jbe@1309:   font-size: $list-avatar-size;
bsw/jbe@1309:   color: $list-avatar-color;
bsw/jbe@1309: }
bsw/jbe@1309: 
bsw/jbe@1309: .mdl-list__item--two-line {
bsw/jbe@1309:   height: $list-two-line-height;
bsw/jbe@1309: 
bsw/jbe@1309:   & .mdl-list__item-primary-content {
bsw/jbe@1309:     height: $list-two-line-height - $list-min-padding - $list-bottom-padding;
bsw/jbe@1309:     line-height: 20px;
bsw/jbe@1309:     display: block;
bsw/jbe@1309: 
bsw/jbe@1309:     & .mdl-list__item-avatar{
bsw/jbe@1309:       float: left;
bsw/jbe@1309:     }
bsw/jbe@1309: 
bsw/jbe@1309:     & .mdl-list__item-icon {
bsw/jbe@1309:       float: left;
bsw/jbe@1309:       // Icons are aligned to center of text in a two line list.
bsw/jbe@1309:       margin-top:
bsw/jbe@1309:         ($list-two-line-height - $list-min-padding - $list-bottom-padding -
bsw/jbe@1309:          $list-icon-size) / 2;
bsw/jbe@1309:     }
bsw/jbe@1309: 
bsw/jbe@1309:     & .mdl-list__item-secondary-content {
bsw/jbe@1309:       height: $list-two-line-height - $list-min-padding - $list-bottom-padding;
bsw/jbe@1309:     }
bsw/jbe@1309: 
bsw/jbe@1309:     & .mdl-list__item-sub-title {
bsw/jbe@1309:       @include typo-body-1();
bsw/jbe@1309:       line-height: 18px;
bsw/jbe@1309:       color: $list-supporting-text-text-color;
bsw/jbe@1309:       display: block;
bsw/jbe@1309:       padding: 0;
bsw/jbe@1309:     }
bsw/jbe@1309:   }
bsw/jbe@1309: }
bsw/jbe@1309: 
bsw/jbe@1309: .mdl-list__item--three-line {
bsw/jbe@1309:   height: $list-three-line-height;
bsw/jbe@1309: 
bsw/jbe@1309:   & .mdl-list__item-primary-content {
bsw/jbe@1309:     height: $list-three-line-height - $list-min-padding - $list-bottom-padding;
bsw/jbe@1309:     line-height: 20px;
bsw/jbe@1309:     display: block;
bsw/jbe@1309: 
bsw/jbe@1309:     & .mdl-list__item-avatar,
bsw/jbe@1309:     & .mdl-list__item-icon {
bsw/jbe@1309:       float: left;
bsw/jbe@1309:     }
bsw/jbe@1309:   }
bsw/jbe@1309: 
bsw/jbe@1309:   & .mdl-list__item-secondary-content {
bsw/jbe@1309:     height: $list-three-line-height - $list-min-padding - $list-bottom-padding;
bsw/jbe@1309:   }
bsw/jbe@1309: 
bsw/jbe@1309:   & .mdl-list__item-text-body {
bsw/jbe@1309:     @include typo-body-1();
bsw/jbe@1309:     line-height: 18px;
bsw/jbe@1309:     height: $list-three-line-height - $list-min-padding - $list-bottom-padding;
bsw/jbe@1309:     color: $list-supporting-text-text-color;
bsw/jbe@1309:     display: block;
bsw/jbe@1309:     padding: 0;
bsw/jbe@1309:   }
bsw/jbe@1309: }