Skip to content
This repository was archived by the owner on May 20, 2023. It is now read-only.

Commit 226984b

Browse files
Googlernshahan
Googler
authored and
nshahan
committed
Import MDC Web v0.44.0 to google3/third_party
Full sync of all MDC Web components. Changelog: https://github.com/material-components/material-components-web/blob/master/CHANGELOG.md Code changes in v0.44.0 since v0.41.1: material-components/material-components-web@v0.41.1...v0.44.0#files_bucket PiperOrigin-RevId: 233749812
1 parent 16c51f4 commit 226984b

File tree

15 files changed

+807
-330
lines changed

15 files changed

+807
-330
lines changed

‎angular_components/lib/css/mdc_web/base/_mixins.scss‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
//
2+
// Copyright 2018 Google Inc.
3+
//
4+
// Permission is hereby granted, free of charge, to any person obtaining a copy
5+
// of this software and associated documentation files (the "Software"), to deal
6+
// in the Software without restriction, including without limitation the rights
7+
// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
8+
// copies of the Software, and to permit persons to whom the Software is
9+
// furnished to do so, subject to the following conditions:
10+
//
11+
// The above copyright notice and this permission notice shall be included in
12+
// all copies or substantial portions of the Software.
13+
//
14+
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
15+
// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
16+
// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
17+
// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
18+
// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
19+
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
20+
// THE SOFTWARE.
21+
//
22+
23+
// This variable is not intended to be overridden externally; it uses !default to avoid being reset
24+
// every time this file is imported.
25+
$mdc-base-styles-emitted_: () !default;
26+
27+
@mixin mdc-base-emit-once($key) {
28+
@if not index($mdc-base-styles-emitted_, $key) {
29+
$mdc-base-styles-emitted_: append($mdc-base-styles-emitted_, $key, comma) !global;
30+
31+
@content;
32+
}
33+
}

‎angular_components/lib/css/mdc_web/card/_mixins.scss‎

Lines changed: 272 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -20,30 +20,292 @@
2020
// THE SOFTWARE.
2121
//
2222

23-
@import "../theme/mixins";
23+
@import "../elevation/mixins";
24+
@import "../featuretargeting/functions";
25+
@import "../featuretargeting/mixins";
26+
@import "../ripple/mixins";
27+
@import "../rtl/mixins";
2428
@import "../shape/mixins";
29+
@import "../theme/mixins";
2530
@import "./variables";
2631

2732
//
2833
// Public
2934
//
3035

31-
@mixin mdc-card-fill-color($color) {
32-
@include mdc-theme-prop(background-color, $color);
36+
@mixin mdc-card($query: mdc-feature-all()) {
37+
// postcss-bem-linter: define card
38+
39+
$feat-color: mdc-feature-create-target($query, color);
40+
$feat-structure: mdc-feature-create-target($query, structure);
41+
42+
.mdc-card {
43+
@include mdc-card-shape-radius(medium, $query: $query);
44+
@include mdc-card-fill-color(surface, $query);
45+
@include mdc-elevation(1, $query: $query);
46+
47+
@include mdc-feature-targets($feat-structure) {
48+
@include mdc-card-container-layout_;
49+
}
50+
}
51+
52+
.mdc-card--outlined {
53+
@include mdc-elevation(0, $query: $query);
54+
@include mdc-card-outline($mdc-card-outline-color, $query: $query);
55+
}
56+
57+
//
58+
// Media
59+
//
60+
61+
.mdc-card__media {
62+
@include mdc-feature-targets($feat-structure) {
63+
position: relative; // Child element `__media-content` has `position: absolute`
64+
box-sizing: border-box;
65+
background-repeat: no-repeat;
66+
background-position: center;
67+
background-size: cover;
68+
}
69+
70+
&::before {
71+
@include mdc-feature-targets($feat-structure) {
72+
display: block;
73+
content: "";
74+
}
75+
}
76+
}
77+
78+
.mdc-card__media:first-child {
79+
@include mdc-feature-targets($feat-structure) {
80+
border-top-left-radius: inherit;
81+
border-top-right-radius: inherit;
82+
}
83+
}
84+
85+
.mdc-card__media:last-child {
86+
@include mdc-feature-targets($feat-structure) {
87+
border-bottom-left-radius: inherit;
88+
border-bottom-right-radius: inherit;
89+
}
90+
}
91+
92+
.mdc-card__media--square {
93+
@include mdc-card-media-aspect-ratio(1, 1, $query);
94+
}
95+
96+
.mdc-card__media--16-9 {
97+
@include mdc-card-media-aspect-ratio(16, 9, $query);
98+
}
99+
100+
.mdc-card__media-content {
101+
@include mdc-feature-targets($feat-structure) {
102+
position: absolute;
103+
top: 0;
104+
right: 0;
105+
bottom: 0;
106+
left: 0;
107+
box-sizing: border-box;
108+
}
109+
}
110+
111+
//
112+
// Primary action
113+
//
114+
115+
.mdc-card__primary-action {
116+
@include mdc-ripple-surface($query);
117+
@include mdc-ripple-radius-bounded($query: $query);
118+
119+
@include mdc-feature-targets($feat-structure) {
120+
@include mdc-card-container-layout_;
121+
122+
position: relative; // Needed to prevent the ripple wash from overflowing the container in IE and Edge
123+
outline: none;
124+
color: inherit;
125+
text-decoration: none;
126+
cursor: pointer;
127+
overflow: hidden;
128+
}
129+
130+
@include mdc-states($query: $query);
131+
}
132+
133+
.mdc-card__primary-action:first-child {
134+
@include mdc-feature-targets($feat-structure) {
135+
border-top-left-radius: inherit;
136+
border-top-right-radius: inherit;
137+
}
138+
}
139+
140+
.mdc-card__primary-action:last-child {
141+
@include mdc-feature-targets($feat-structure) {
142+
border-bottom-left-radius: inherit;
143+
border-bottom-right-radius: inherit;
144+
}
145+
}
146+
147+
//
148+
// Action row
149+
//
150+
151+
.mdc-card__actions {
152+
@include mdc-feature-targets($feat-structure) {
153+
@include mdc-card-actions-layout_;
154+
155+
min-height: 52px;
156+
padding: 8px;
157+
}
158+
}
159+
160+
.mdc-card__actions--full-bleed {
161+
@include mdc-feature-targets($feat-structure) {
162+
padding: 0;
163+
}
164+
}
165+
166+
.mdc-card__action-buttons,
167+
.mdc-card__action-icons {
168+
@include mdc-feature-targets($feat-structure) {
169+
@include mdc-card-actions-layout_;
170+
}
171+
}
172+
173+
.mdc-card__action-icons {
174+
@include mdc-feature-targets($feat-color) {
175+
@include mdc-theme-prop(color, text-icon-on-background);
176+
}
177+
178+
@include mdc-feature-targets($feat-structure) {
179+
flex-grow: 1;
180+
justify-content: flex-end;
181+
}
182+
}
183+
184+
.mdc-card__action-buttons + .mdc-card__action-icons {
185+
@include mdc-feature-targets($feat-structure) {
186+
@include mdc-rtl-reflexive-box(margin, left, 16px);
187+
}
188+
}
189+
190+
//
191+
// Action items
192+
//
193+
194+
.mdc-card__action {
195+
@include mdc-feature-targets($feat-structure) {
196+
@include mdc-card-actions-layout_(inline-flex);
197+
198+
justify-content: center;
199+
cursor: pointer;
200+
user-select: none;
201+
}
202+
203+
&:focus {
204+
@include mdc-feature-targets($feat-structure) {
205+
outline: none;
206+
}
207+
}
208+
}
209+
210+
//
211+
// Action buttons
212+
//
213+
214+
.mdc-card__action--button {
215+
@include mdc-feature-targets($feat-structure) {
216+
@include mdc-rtl-reflexive-box(margin, right, 8px);
217+
218+
padding: 0 8px;
219+
}
220+
221+
&:last-child {
222+
@include mdc-feature-targets($feat-structure) {
223+
@include mdc-rtl-reflexive-box(margin, right, 0);
224+
}
225+
}
226+
}
227+
228+
.mdc-card__actions--full-bleed .mdc-card__action--button {
229+
@include mdc-feature-targets($feat-structure) {
230+
justify-content: space-between;
231+
width: 100%;
232+
height: auto;
233+
max-height: none;
234+
margin: 0;
235+
padding: 8px 16px;
236+
/* @noflip */
237+
text-align: left;
238+
}
239+
240+
@include mdc-rtl {
241+
@include mdc-feature-targets($feat-structure) {
242+
/* @noflip */
243+
text-align: right;
244+
}
245+
}
246+
}
247+
248+
//
249+
// Action icons
250+
//
251+
252+
.mdc-card__action--icon {
253+
@include mdc-feature-targets($feat-structure) {
254+
// Icon toggles are taller than buttons, so we need to adjust their margins to prevent the action row from expanding.
255+
margin: -6px 0;
256+
257+
// Same padding as mdc-icon-button.
258+
padding: 12px;
259+
}
260+
}
261+
262+
.mdc-card__action--icon:not(:disabled) {
263+
@include mdc-feature-targets($feat-color) {
264+
@include mdc-theme-prop(color, text-icon-on-background);
265+
}
266+
}
267+
268+
// postcss-bem-linter: end
33269
}
34270

35-
@mixin mdc-card-outline($color, $thickness: $mdc-card-outline-width) {
36-
border: $thickness solid mdc-theme-prop-value($color);
271+
@mixin mdc-card-fill-color($color, $query: mdc-feature-all()) {
272+
$feat-color: mdc-feature-create-target($query, color);
273+
274+
@include mdc-feature-targets($feat-color) {
275+
@include mdc-theme-prop(background-color, $color);
276+
}
277+
}
278+
279+
@mixin mdc-card-outline($color, $thickness: $mdc-card-outline-width, $query: mdc-feature-all()) {
280+
$feat-color: mdc-feature-create-target($query, color);
281+
$feat-structure: mdc-feature-create-target($query, structure);
282+
283+
@include mdc-feature-targets($feat-structure) {
284+
border-width: $thickness;
285+
border-style: solid;
286+
}
287+
288+
@include mdc-feature-targets($feat-color) {
289+
border-color: mdc-theme-prop-value($color);
290+
}
37291
}
38292

39-
@mixin mdc-card-shape-radius($radius, $rtl-reflexive: false) {
40-
@include mdc-shape-radius($radius, $rtl-reflexive);
293+
@mixin mdc-card-shape-radius($radius, $rtl-reflexive: false, $query: mdc-feature-all()) {
294+
$feat-structure: mdc-feature-create-target($query, structure);
295+
296+
@include mdc-feature-targets($feat-structure) {
297+
@include mdc-shape-radius($radius, $rtl-reflexive);
298+
}
41299
}
42300

43-
@mixin mdc-card-media-aspect-ratio($x, $y) {
301+
@mixin mdc-card-media-aspect-ratio($x, $y, $query: mdc-feature-all()) {
302+
$feat-structure: mdc-feature-create-target($query, structure);
303+
44304
&::before {
45-
// This clever trick brought to you by: http://www.mademyday.de/css-height-equals-width-with-pure-css.html
46-
margin-top: percentage($y / $x);
305+
@include mdc-feature-targets($feat-structure) {
306+
// This clever trick brought to you by: http://www.mademyday.de/css-height-equals-width-with-pure-css.html
307+
margin-top: percentage($y / $x);
308+
}
47309
}
48310
}
49311

@@ -63,10 +325,3 @@
63325
align-items: center;
64326
box-sizing: border-box;
65327
}
66-
67-
@mixin mdc-card-media-aspect-ratio-base_ {
68-
&::before {
69-
display: block;
70-
content: "";
71-
}
72-
}

‎angular_components/lib/css/mdc_web/card/_variables.scss‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,5 +22,5 @@
2222

2323
@import "../theme/mixins";
2424

25-
$mdc-card-outline-color: mix(mdc-theme-prop-value(on-surface), mdc-theme-prop-value(surface), 12%);
26-
$mdc-card-outline-width: 1px;
25+
$mdc-card-outline-color: mix(mdc-theme-prop-value(on-surface), mdc-theme-prop-value(surface), 12%) !default;
26+
$mdc-card-outline-width: 1px !default;

0 commit comments

Comments
 (0)