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

Commit aa1987c

Browse files
Googlernshahan
Googler
authored and
nshahan
committed
Sync Sass feature-targeting changes from MDC Web pre-release v1.0.0-0
This CL includes several minor TypeScript refactorings from PRs #4451, #4461, and #4409. Clients and unit tests should be unaffected. https://github.com/material-components/material-components-web/releases/tag/v1.0.0-0 material-components/material-components-web#4451 material-components/material-components-web#4461 material-components/material-components-web#4409 PiperOrigin-RevId: 239228044
1 parent 47b8ff6 commit aa1987c

File tree

7 files changed

+130
-24
lines changed

7 files changed

+130
-24
lines changed

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

Lines changed: 3 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@
3333
// Public
3434
//
3535

36-
@mixin mdc-card($query: mdc-feature-all()) {
36+
@mixin mdc-card-core-styles($query: mdc-feature-all()) {
3737
// postcss-bem-linter: define card
3838

3939
$feat-color: mdc-feature-create-target($query, color);
@@ -251,7 +251,7 @@
251251

252252
.mdc-card__action--icon {
253253
@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.
254+
// Icon buttons are taller than buttons, so we need to adjust their margins to prevent the action row from expanding.
255255
margin: -6px 0;
256256

257257
// Same padding as mdc-icon-button.
@@ -291,11 +291,7 @@
291291
}
292292

293293
@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-
}
294+
@include mdc-shape-radius($radius, $rtl-reflexive, $query: $query);
299295
}
300296

301297
@mixin mdc-card-media-aspect-ratio($x, $y, $query: mdc-feature-all()) {

‎angular_components/lib/css/mdc_web/card/mdc-card.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,4 +21,4 @@
2121
//
2222

2323
@import "./mixins";
24-
@include mdc-card;
24+
@include mdc-card-core-styles;

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

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,27 @@
2525
@import "../theme/variables";
2626
@import "./variables";
2727

28+
@mixin mdc-elevation-core-styles($query: mdc-feature-all()) {
29+
$feat-animation: mdc-feature-create-target($query, animation);
30+
$feat-structure: mdc-feature-create-target($query, structure);
31+
32+
@for $z-value from 0 through 24 {
33+
.mdc-elevation--z#{$z-value} {
34+
@include mdc-elevation($z-value, $query: $query);
35+
}
36+
}
37+
38+
.mdc-elevation-transition {
39+
@include mdc-feature-targets($feat-animation) {
40+
transition: mdc-elevation-transition-value();
41+
}
42+
43+
@include mdc-feature-targets($feat-structure) {
44+
will-change: $mdc-elevation-property;
45+
}
46+
}
47+
}
48+
2849
// Applies the correct CSS rules to an element to give it the elevation specified by $z-value.
2950
// The $z-value must be between 0 and 24.
3051
// If $color has an alpha channel, it will be ignored and overridden. To increase the opacity of the shadow, use

‎angular_components/lib/css/mdc_web/featuretargeting/_functions.scss

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -91,7 +91,8 @@
9191

9292
@return (
9393
op: without,
94-
queries: ($feature-query)
94+
// NOTE: we need to use `append`, just putting parens around a single value doesn't make it a list in Sass.
95+
queries: append((), $feature-query)
9596
);
9697
}
9798

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

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@
2020
// THE SOFTWARE.
2121
//
2222

23+
@import "../animation/functions";
2324
@import "../animation/variables";
2425
@import "../base/mixins";
2526
@import "../featuretargeting/functions";
@@ -29,6 +30,42 @@
2930
@import "./keyframes";
3031
@import "./variables";
3132

33+
@mixin mdc-ripple-core-styles($query: mdc-feature-all()) {
34+
// postcss-bem-linter: define ripple-surface
35+
36+
$feat-structure: mdc-feature-create-target($query, structure);
37+
38+
.mdc-ripple-surface {
39+
@include mdc-ripple-surface($query: $query);
40+
@include mdc-states($query: $query);
41+
@include mdc-ripple-radius-bounded($query: $query);
42+
43+
@include mdc-feature-targets($feat-structure) {
44+
position: relative;
45+
outline: none;
46+
overflow: hidden;
47+
}
48+
49+
&[data-mdc-ripple-is-unbounded] {
50+
@include mdc-ripple-radius-unbounded($query: $query);
51+
52+
@include mdc-feature-targets($feat-structure) {
53+
overflow: visible;
54+
}
55+
}
56+
57+
&--primary {
58+
@include mdc-states(primary, $query: $query);
59+
}
60+
61+
&--accent {
62+
@include mdc-states(secondary, $query: $query);
63+
}
64+
}
65+
66+
// postcss-bem-linter: end
67+
}
68+
3269
@mixin mdc-ripple-common($query: mdc-feature-all()) {
3370
$feat-animation: mdc-feature-create-target($query, animation);
3471
$feat-structure: mdc-feature-create-target($query, structure);

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

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

23+
@import "../featuretargeting/functions";
24+
@import "../featuretargeting/mixins";
2325
@import "./variables";
2426
@import "./functions";
2527

26-
@mixin mdc-shape-radius($radius, $rtl-reflexive: false) {
27-
// Even if $rtl-reflexive is true, only emit RTL styles if we can't easily tell that the given radius is symmetrical
28-
$needs-flip: $rtl-reflexive and length($radius) > 1;
28+
@mixin mdc-shape-radius($radius, $rtl-reflexive: false, $query: mdc-feature-all()) {
29+
$feat-structure: mdc-feature-create-target($query, structure);
2930

30-
@if ($needs-flip) {
31-
/* @noflip */
32-
}
33-
34-
border-radius: mdc-shape-prop-value($radius);
31+
@include mdc-feature-targets($feat-structure) {
32+
// Even if $rtl-reflexive is true, only emit RTL styles if we can't easily tell that the given radius is symmetrical
33+
$needs-flip: $rtl-reflexive and length($radius) > 1;
3534

36-
@if ($needs-flip) {
37-
@include mdc-rtl {
35+
@if ($needs-flip) {
3836
/* @noflip */
39-
border-radius: mdc-shape-flip-radius(mdc-shape-prop-value($radius));
37+
}
38+
39+
border-radius: mdc-shape-prop-value($radius);
40+
41+
@if ($needs-flip) {
42+
@include mdc-rtl {
43+
/* @noflip */
44+
border-radius: mdc-shape-flip-radius(mdc-shape-prop-value($radius));
45+
}
4046
}
4147
}
4248
}

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

Lines changed: 49 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -20,8 +20,47 @@
2020
// THE SOFTWARE.
2121
//
2222

23+
@import "../featuretargeting/functions";
24+
@import "../featuretargeting/mixins";
2325
@import "./variables";
2426

27+
@mixin mdc-theme-core-styles($query: mdc-feature-all()) {
28+
$feat-color: mdc-feature-create-target($query, color);
29+
30+
:root {
31+
@include mdc-feature-targets($feat-color) {
32+
@each $style in map-keys($mdc-theme-property-values) {
33+
--mdc-theme-#{$style}: #{map-get($mdc-theme-property-values, $style)};
34+
}
35+
}
36+
}
37+
38+
@each $style in map-keys($mdc-theme-property-values) {
39+
@if $style != "background" and $style != "surface" {
40+
.mdc-theme--#{$style} {
41+
@include mdc-feature-targets($feat-color) {
42+
@include mdc-theme-prop(color, $style, true);
43+
}
44+
}
45+
} @else {
46+
.mdc-theme--#{$style} {
47+
@include mdc-feature-targets($feat-color) {
48+
@include mdc-theme-prop(background-color, $style);
49+
}
50+
}
51+
}
52+
}
53+
54+
// CSS rules for using primary and secondary (plus light/dark variants) as background colors.
55+
@each $style in ("primary", "secondary") {
56+
.mdc-theme--#{$style}-bg {
57+
@include mdc-feature-targets($feat-color) {
58+
@include mdc-theme-prop(background-color, $style, true);
59+
}
60+
}
61+
}
62+
}
63+
2564
// Applies the correct theme color style to the specified property.
2665
// $property is typically color or background-color, but can be any CSS property that accepts color values.
2766
// $style should be one of the map keys in $mdc-theme-property-values (_variables.scss), or a color value.
@@ -47,14 +86,17 @@
4786
@if $edgeOptOut {
4887
// stylelint-disable max-nesting-depth
4988
@at-root {
50-
// @supports not (-ms-ime-align:auto) {
89+
// IE 11 doesn't understand this syntax and ignores the entire block.
90+
// Edge understands this syntax and skips the entire block to avoid a nasty :before/:after pseudo-element bug.
91+
// All other browsers apply the styles within the block.
92+
// @supports not (-ms-ime-align: auto) {
5193
// stylelint-disable scss/selector-no-redundant-nesting-selector
5294
& {
5395
/* @alternate */
5496
#{$property}: var(--mdc-theme-#{$style}, $value) !important;
5597
}
5698
// stylelint-enable scss/selector-no-redundant-nesting-selector
57-
// }
99+
// }
58100
}
59101
// stylelint-enable max-nesting-depth
60102
} @else {
@@ -67,14 +109,17 @@
67109
@if $edgeOptOut {
68110
// stylelint-disable max-nesting-depth
69111
@at-root {
70-
// @supports not (-ms-ime-align:auto) {
112+
// IE 11 doesn't understand this syntax and ignores the entire block.
113+
// Edge understands this syntax and skips the entire block to avoid a nasty :before/:after pseudo-element bug.
114+
// All other browsers apply the styles within the block.
115+
// @supports not (-ms-ime-align: auto) {
71116
// stylelint-disable scss/selector-no-redundant-nesting-selector
72117
& {
73118
/* @alternate */
74119
#{$property}: var(--mdc-theme-#{$style}, $value);
75120
}
76121
// stylelint-enable scss/selector-no-redundant-nesting-selector
77-
// }
122+
// }
78123
}
79124
// stylelint-enable max-nesting-depth
80125
} @else {

0 commit comments

Comments
 (0)