liquid_feedback_frontend
annotate style/mdl/card/_card.scss @ 1504:2a0d86117d54
Added hidden and role units
| author | bsw |
|---|---|
| date | Fri Jul 31 00:18:55 2020 +0200 (2020-07-31) |
| 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 |
| bsw/jbe@1309 | 19 .mdl-card { |
| bsw/jbe@1309 | 20 display: flex; |
| bsw/jbe@1309 | 21 flex-direction: column; |
| bsw/jbe@1309 | 22 font-size: $card-font-size; |
| bsw/jbe@1309 | 23 font-weight: 400; |
| bsw/jbe@1309 | 24 min-height: $card-height; |
| bsw/jbe@1309 | 25 overflow: hidden; |
| bsw/jbe@1309 | 26 width: $card-width; |
| bsw/jbe@1309 | 27 z-index: $card-z-index; |
| bsw/jbe@1309 | 28 position: relative; |
| bsw/jbe@1309 | 29 background: $card-background-color; |
| bsw/jbe@1309 | 30 border-radius: 2px; |
| bsw/jbe@1309 | 31 box-sizing: border-box; |
| bsw/jbe@1309 | 32 } |
| bsw/jbe@1309 | 33 |
| bsw/jbe@1309 | 34 .mdl-card__media { |
| bsw/jbe@1309 | 35 background-color: $card-image-placeholder-color; |
| bsw/jbe@1309 | 36 background-repeat: repeat; |
| bsw/jbe@1309 | 37 background-position: 50% 50%; |
| bsw/jbe@1309 | 38 background-size: cover; |
| bsw/jbe@1309 | 39 background-origin: padding-box; |
| bsw/jbe@1309 | 40 background-attachment: scroll; |
| bsw/jbe@1309 | 41 box-sizing: border-box; |
| bsw/jbe@1309 | 42 } |
| bsw/jbe@1309 | 43 |
| bsw/jbe@1309 | 44 .mdl-card__title { |
| bsw/jbe@1309 | 45 align-items: center; |
| bsw/jbe@1309 | 46 color: $card-text-color; |
| bsw/jbe@1309 | 47 display: block; |
| bsw/jbe@1309 | 48 display: flex; |
| bsw/jbe@1309 | 49 justify-content: stretch; |
| bsw/jbe@1309 | 50 line-height: normal; |
| bsw/jbe@1309 | 51 padding: $card-vertical-padding $card-horizontal-padding; |
| bsw/jbe@1309 | 52 perspective-origin: $card-title-perspective-origin-x $card-title-perspective-origin-y; |
| bsw/jbe@1309 | 53 transform-origin: $card-title-transform-origin-x $card-title-transform-origin-y; |
| bsw/jbe@1309 | 54 box-sizing: border-box; |
| bsw/jbe@1309 | 55 |
| bsw/jbe@1309 | 56 &.mdl-card--border { |
| bsw/jbe@1309 | 57 border-bottom: 1px solid $card-border-color; |
| bsw/jbe@1309 | 58 } |
| bsw/jbe@1309 | 59 } |
| bsw/jbe@1309 | 60 |
| bsw/jbe@1309 | 61 .mdl-card__title-text { |
| bsw/jbe@1309 | 62 align-self: flex-end; |
| bsw/jbe@1309 | 63 color: inherit; |
| bsw/jbe@1309 | 64 display: block; |
| bsw/jbe@1309 | 65 display: flex; |
| bsw/jbe@1309 | 66 font-size: $card-title-font-size; |
| bsw/jbe@1309 | 67 font-weight: $card-title-text-font-weight; |
| bsw/jbe@1309 | 68 line-height: normal; |
| bsw/jbe@1309 | 69 overflow: hidden; |
| bsw/jbe@1309 | 70 transform-origin: $card-title-text-transform-origin-x $card-title-text-transform-origin-y; |
| bsw/jbe@1309 | 71 margin: 0; |
| bsw/jbe@1309 | 72 } |
| bsw/jbe@1309 | 73 |
| bsw/jbe@1309 | 74 .mdl-card__subtitle-text { |
| bsw/jbe@1309 | 75 font-size: $card-subtitle-font-size; |
| bsw/jbe@1309 | 76 color: $card-subtitle-color; |
| bsw/jbe@1309 | 77 margin: 0; |
| bsw/jbe@1309 | 78 } |
| bsw/jbe@1309 | 79 |
| bsw/jbe@1309 | 80 .mdl-card__supporting-text { |
| bsw/jbe@1309 | 81 color: $card-supporting-text-text-color; |
| bsw/jbe@1309 | 82 font-size: $card-supporting-text-font-size; |
| bsw/jbe@1309 | 83 line-height: $card-supporting-text-line-height; |
| bsw/jbe@1309 | 84 overflow: hidden; |
| bsw/jbe@1309 | 85 padding: $card-vertical-padding $card-horizontal-padding; |
| bsw/jbe@1309 | 86 width: 90%; |
| bsw/jbe@1309 | 87 |
| bsw/jbe@1309 | 88 &.mdl-card--border { |
| bsw/jbe@1309 | 89 border-bottom: 1px solid $card-border-color; |
| bsw/jbe@1309 | 90 } |
| bsw/jbe@1309 | 91 } |
| bsw/jbe@1309 | 92 |
| bsw/jbe@1309 | 93 .mdl-card__actions { |
| bsw/jbe@1309 | 94 font-size: $card-actions-font-size; |
| bsw/jbe@1309 | 95 line-height: normal; |
| bsw/jbe@1309 | 96 width: 100%; |
| bsw/jbe@1309 | 97 background-color: rgba(0,0,0,0); |
| bsw/jbe@1309 | 98 padding: 8px; |
| bsw/jbe@1309 | 99 box-sizing: border-box; |
| bsw/jbe@1309 | 100 |
| bsw/jbe@1309 | 101 &.mdl-card--border { |
| bsw/jbe@1309 | 102 border-top: 1px solid $card-border-color; |
| bsw/jbe@1309 | 103 } |
| bsw/jbe@1309 | 104 } |
| bsw/jbe@1309 | 105 |
| bsw/jbe@1309 | 106 .mdl-card--expand { |
| bsw/jbe@1309 | 107 flex-grow: 1; |
| bsw/jbe@1309 | 108 } |
| bsw/jbe@1309 | 109 |
| bsw/jbe@1309 | 110 |
| bsw/jbe@1309 | 111 .mdl-card__menu { |
| bsw/jbe@1309 | 112 position: absolute; |
| bsw/jbe@1309 | 113 right: 16px; |
| bsw/jbe@1309 | 114 top: 16px; |
| bsw/jbe@1309 | 115 } |