blob: 6f8c19f3c322efb0924c1d1abf18629d86c2e04e [file] [log] [blame]
Copybara botbe50d492023-11-30 00:16:42 +01001/**
2 * Copyright 2015 Google Inc. All Rights Reserved.
3 *
4 * Licensed under the Apache License, Version 2.0 (the "License");
5 * you may not use this file except in compliance with the License.
6 * You may obtain a copy of the License at
7 *
8 * http://www.apache.org/licenses/LICENSE-2.0
9 *
10 * Unless required by applicable law or agreed to in writing, software
11 * distributed under the License is distributed on an "AS IS" BASIS,
12 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 * See the License for the specific language governing permissions and
14 * limitations under the License.
15 */
16
17@import "../variables";
18
19.mdl-card {
20 display: flex;
21 flex-direction: column;
22 font-size: $card-font-size;
23 font-weight: 400;
24 min-height: $card-height;
25 overflow: hidden;
26 width: $card-width;
27 z-index: $card-z-index;
28 position: relative;
29 background: $card-background-color;
30 border-radius: 2px;
31 box-sizing: border-box;
32}
33
34.mdl-card__media {
35 background-color: $card-image-placeholder-color;
36 background-repeat: repeat;
37 background-position: 50% 50%;
38 background-size: cover;
39 background-origin: padding-box;
40 background-attachment: scroll;
41 box-sizing: border-box;
42}
43
44.mdl-card__title {
45 align-items: center;
46 color: $card-text-color;
47 display: block;
48 display: flex;
49 justify-content: stretch;
50 line-height: normal;
51 padding: $card-vertical-padding $card-horizontal-padding;
52 perspective-origin: $card-title-perspective-origin-x $card-title-perspective-origin-y;
53 transform-origin: $card-title-transform-origin-x $card-title-transform-origin-y;
54 box-sizing: border-box;
55
56 &.mdl-card--border {
57 border-bottom: 1px solid $card-border-color;
58 }
59}
60
61.mdl-card__title-text {
62 align-self: flex-end;
63 color: inherit;
64 display: block;
65 display: flex;
66 font-size: $card-title-font-size;
67 font-weight: $card-title-text-font-weight;
68 line-height: normal;
69 overflow: hidden;
70 transform-origin: $card-title-text-transform-origin-x $card-title-text-transform-origin-y;
71 margin: 0;
72}
73
74.mdl-card__subtitle-text {
75 font-size: $card-subtitle-font-size;
76 color: $card-subtitle-color;
77 margin: 0;
78}
79
80.mdl-card__supporting-text {
81 color: $card-supporting-text-text-color;
82 font-size: $card-supporting-text-font-size;
83 line-height: $card-supporting-text-line-height;
84 overflow: hidden;
85 padding: $card-vertical-padding $card-horizontal-padding;
86 width: 90%;
87
88 &.mdl-card--border {
89 border-bottom: 1px solid $card-border-color;
90 }
91}
92
93.mdl-card__actions {
94 font-size: $card-actions-font-size;
95 line-height: normal;
96 width: 100%;
97 background-color: rgba(0,0,0,0);
98 padding: 8px;
99 box-sizing: border-box;
100
101 &.mdl-card--border {
102 border-top: 1px solid $card-border-color;
103 }
104}
105
106.mdl-card--expand {
107 flex-grow: 1;
108}
109
110
111.mdl-card__menu {
112 position: absolute;
113 right: 16px;
114 top: 16px;
115}