liquid_feedback_frontend
annotate style/mdl/list/_list.scss @ 1532:3c15fea3f1c0
Added FirstLife group mirroring
author | bsw |
---|---|
date | Sun Oct 04 16:31:47 2020 +0200 (2020-10-04) |
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 } |