liquid_feedback_frontend
annotate style/mdl/list/_list.scss @ 1404:f99e7df399e6
Text case change
| author | bsw | 
|---|---|
| date | Mon Aug 13 19:52:00 2018 +0200 (2018-08-13) | 
| parents | 32cc544d5a5b | 
| children | 
| rev | line source | 
|---|---|
| bsw/jbe@1309 | 1 /** | 
| bsw/jbe@1309 | 2 * Copyright 2015 Google Inc. All Rights Reserved. | 
| bsw/jbe@1309 | 3 * | 
| bsw/jbe@1309 | 4 * Licensed under the Apache License, Version 2.0 (the "License"); | 
| bsw/jbe@1309 | 5 * you may not use this file except in compliance with the License. | 
| bsw/jbe@1309 | 6 * You may obtain a copy of the License at | 
| bsw/jbe@1309 | 7 * | 
| bsw/jbe@1309 | 8 * http://www.apache.org/licenses/LICENSE-2.0 | 
| bsw/jbe@1309 | 9 * | 
| bsw/jbe@1309 | 10 * Unless required by applicable law or agreed to in writing, software | 
| bsw/jbe@1309 | 11 * distributed under the License is distributed on an "AS IS" BASIS, | 
| bsw/jbe@1309 | 12 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. | 
| bsw/jbe@1309 | 13 * See the License for the specific language governing permissions and | 
| bsw/jbe@1309 | 14 * limitations under the License. | 
| bsw/jbe@1309 | 15 */ | 
| bsw/jbe@1309 | 16 | 
| bsw/jbe@1309 | 17 @import "../variables"; | 
| bsw/jbe@1309 | 18 @import "../mixins"; | 
| bsw/jbe@1309 | 19 | 
| bsw/jbe@1309 | 20 | 
| bsw/jbe@1309 | 21 .mdl-list { | 
| bsw/jbe@1309 | 22 display: block; | 
| bsw/jbe@1309 | 23 padding: $list-border 0; | 
| bsw/jbe@1309 | 24 list-style: none; | 
| bsw/jbe@1309 | 25 } | 
| bsw/jbe@1309 | 26 | 
| bsw/jbe@1309 | 27 .mdl-list__item { | 
| bsw/jbe@1309 | 28 @include typo-subhead(); | 
| bsw/jbe@1309 | 29 line-height: 1; | 
| bsw/jbe@1309 | 30 display: flex; | 
| bsw/jbe@1309 | 31 min-height: $list-min-height; | 
| bsw/jbe@1309 | 32 box-sizing: border-box; | 
| bsw/jbe@1309 | 33 flex-direction: row; | 
| bsw/jbe@1309 | 34 flex-wrap: nowrap; | 
| bsw/jbe@1309 | 35 align-items: center; | 
| bsw/jbe@1309 | 36 padding: $list-min-padding; | 
| bsw/jbe@1309 | 37 cursor: default; | 
| bsw/jbe@1309 | 38 color: $list-main-text-text-color; | 
| bsw/jbe@1309 | 39 overflow: hidden; | 
| bsw/jbe@1309 | 40 | 
| bsw/jbe@1309 | 41 & .mdl-list__item-primary-content { | 
| bsw/jbe@1309 | 42 order: 0; | 
| bsw/jbe@1309 | 43 flex-grow: 2; | 
| bsw/jbe@1309 | 44 text-decoration: none; | 
| bsw/jbe@1309 | 45 box-sizing: border-box; | 
| bsw/jbe@1309 | 46 display: flex; | 
| bsw/jbe@1309 | 47 align-items: center; | 
| bsw/jbe@1309 | 48 | 
| bsw/jbe@1309 | 49 & .mdl-list__item-icon { | 
| bsw/jbe@1309 | 50 margin-right: $list-icon-text-left-distance - $list-icon-size - $list-min-padding; | 
| bsw/jbe@1309 | 51 } | 
| bsw/jbe@1309 | 52 | 
| bsw/jbe@1309 | 53 & .mdl-list__item-avatar { | 
| bsw/jbe@1309 | 54 margin-right: $list-avatar-text-left-distance - $list-avatar-size - $list-min-padding; | 
| bsw/jbe@1309 | 55 } | 
| bsw/jbe@1309 | 56 } | 
| bsw/jbe@1309 | 57 | 
| bsw/jbe@1309 | 58 & .mdl-list__item-secondary-content { | 
| bsw/jbe@1309 | 59 display: flex; | 
| bsw/jbe@1309 | 60 flex-flow: column; | 
| bsw/jbe@1309 | 61 align-items: flex-end; | 
| bsw/jbe@1309 | 62 margin-left: $list-min-padding; | 
| bsw/jbe@1309 | 63 | 
| bsw/jbe@1309 | 64 & .mdl-list__item-secondary-action label { display: inline; } | 
| bsw/jbe@1309 | 65 & .mdl-list__item-secondary-info { | 
| bsw/jbe@1309 | 66 @include typo-caption(); | 
| bsw/jbe@1309 | 67 color: $list-supporting-text-text-color; | 
| bsw/jbe@1309 | 68 } | 
| bsw/jbe@1309 | 69 & .mdl-list__item-sub-header { | 
| bsw/jbe@1309 | 70 padding: 0 0 0 $list-min-padding; | 
| bsw/jbe@1309 | 71 } | 
| bsw/jbe@1309 | 72 } | 
| bsw/jbe@1309 | 73 } | 
| bsw/jbe@1309 | 74 | 
| bsw/jbe@1309 | 75 .mdl-list__item-icon, | 
| bsw/jbe@1309 | 76 .mdl-list__item-icon.material-icons { | 
| bsw/jbe@1309 | 77 height: $list-icon-size; | 
| bsw/jbe@1309 | 78 width: $list-icon-size; | 
| bsw/jbe@1309 | 79 font-size: $list-icon-size; | 
| bsw/jbe@1309 | 80 box-sizing: border-box; | 
| bsw/jbe@1309 | 81 color: $list-icon-color; | 
| bsw/jbe@1309 | 82 } | 
| bsw/jbe@1309 | 83 | 
| bsw/jbe@1309 | 84 .mdl-list__item-avatar, | 
| bsw/jbe@1309 | 85 .mdl-list__item-avatar.material-icons { | 
| bsw/jbe@1309 | 86 height: $list-avatar-size; | 
| bsw/jbe@1309 | 87 width: $list-avatar-size; | 
| bsw/jbe@1309 | 88 box-sizing: border-box; | 
| bsw/jbe@1309 | 89 border-radius: 50%; | 
| bsw/jbe@1309 | 90 // Set a background colour in case the user doesn't provide an image. | 
| bsw/jbe@1309 | 91 background-color: $list-icon-color; | 
| bsw/jbe@1309 | 92 // Set a font size and color in case the user provides a Material Icon. | 
| bsw/jbe@1309 | 93 font-size: $list-avatar-size; | 
| bsw/jbe@1309 | 94 color: $list-avatar-color; | 
| bsw/jbe@1309 | 95 } | 
| bsw/jbe@1309 | 96 | 
| bsw/jbe@1309 | 97 .mdl-list__item--two-line { | 
| bsw/jbe@1309 | 98 height: $list-two-line-height; | 
| bsw/jbe@1309 | 99 | 
| bsw/jbe@1309 | 100 & .mdl-list__item-primary-content { | 
| bsw/jbe@1309 | 101 height: $list-two-line-height - $list-min-padding - $list-bottom-padding; | 
| bsw/jbe@1309 | 102 line-height: 20px; | 
| bsw/jbe@1309 | 103 display: block; | 
| bsw/jbe@1309 | 104 | 
| bsw/jbe@1309 | 105 & .mdl-list__item-avatar{ | 
| bsw/jbe@1309 | 106 float: left; | 
| bsw/jbe@1309 | 107 } | 
| bsw/jbe@1309 | 108 | 
| bsw/jbe@1309 | 109 & .mdl-list__item-icon { | 
| bsw/jbe@1309 | 110 float: left; | 
| bsw/jbe@1309 | 111 // Icons are aligned to center of text in a two line list. | 
| bsw/jbe@1309 | 112 margin-top: | 
| bsw/jbe@1309 | 113 ($list-two-line-height - $list-min-padding - $list-bottom-padding - | 
| bsw/jbe@1309 | 114 $list-icon-size) / 2; | 
| bsw/jbe@1309 | 115 } | 
| bsw/jbe@1309 | 116 | 
| bsw/jbe@1309 | 117 & .mdl-list__item-secondary-content { | 
| bsw/jbe@1309 | 118 height: $list-two-line-height - $list-min-padding - $list-bottom-padding; | 
| bsw/jbe@1309 | 119 } | 
| bsw/jbe@1309 | 120 | 
| bsw/jbe@1309 | 121 & .mdl-list__item-sub-title { | 
| bsw/jbe@1309 | 122 @include typo-body-1(); | 
| bsw/jbe@1309 | 123 line-height: 18px; | 
| bsw/jbe@1309 | 124 color: $list-supporting-text-text-color; | 
| bsw/jbe@1309 | 125 display: block; | 
| bsw/jbe@1309 | 126 padding: 0; | 
| bsw/jbe@1309 | 127 } | 
| bsw/jbe@1309 | 128 } | 
| bsw/jbe@1309 | 129 } | 
| bsw/jbe@1309 | 130 | 
| bsw/jbe@1309 | 131 .mdl-list__item--three-line { | 
| bsw/jbe@1309 | 132 height: $list-three-line-height; | 
| bsw/jbe@1309 | 133 | 
| bsw/jbe@1309 | 134 & .mdl-list__item-primary-content { | 
| bsw/jbe@1309 | 135 height: $list-three-line-height - $list-min-padding - $list-bottom-padding; | 
| bsw/jbe@1309 | 136 line-height: 20px; | 
| bsw/jbe@1309 | 137 display: block; | 
| bsw/jbe@1309 | 138 | 
| bsw/jbe@1309 | 139 & .mdl-list__item-avatar, | 
| bsw/jbe@1309 | 140 & .mdl-list__item-icon { | 
| bsw/jbe@1309 | 141 float: left; | 
| bsw/jbe@1309 | 142 } | 
| bsw/jbe@1309 | 143 } | 
| bsw/jbe@1309 | 144 | 
| bsw/jbe@1309 | 145 & .mdl-list__item-secondary-content { | 
| bsw/jbe@1309 | 146 height: $list-three-line-height - $list-min-padding - $list-bottom-padding; | 
| bsw/jbe@1309 | 147 } | 
| bsw/jbe@1309 | 148 | 
| bsw/jbe@1309 | 149 & .mdl-list__item-text-body { | 
| bsw/jbe@1309 | 150 @include typo-body-1(); | 
| bsw/jbe@1309 | 151 line-height: 18px; | 
| bsw/jbe@1309 | 152 height: $list-three-line-height - $list-min-padding - $list-bottom-padding; | 
| bsw/jbe@1309 | 153 color: $list-supporting-text-text-color; | 
| bsw/jbe@1309 | 154 display: block; | 
| bsw/jbe@1309 | 155 padding: 0; | 
| bsw/jbe@1309 | 156 } | 
| bsw/jbe@1309 | 157 } |