Skip to content

Commit d43cb99

Browse files
crisbetocrisbeto
committed
refactor(material/core): post migration fixup
1 parent d94af9c commit d43cb99

File tree

22 files changed

+144
-104
lines changed

22 files changed

+144
-104
lines changed

‎src/material-experimental/column-resize/_column-resize.scss

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,8 @@
4040
bottom: 0;
4141
position: absolute;
4242
top: 0;
43-
transition: background variables.$swift-ease-in-duration variables.$swift-ease-in-timing-function;
43+
transition: background variables.$swift-ease-in-duration
44+
variables.$swift-ease-in-timing-function;
4445
width: 1px;
4546
}
4647

@@ -84,7 +85,8 @@
8485
background: transparent;
8586
cursor: col-resize;
8687
height: 100%;
87-
transition: background variables.$swift-ease-in-duration variables.$swift-ease-in-timing-function;
88+
transition: background variables.$swift-ease-in-duration
89+
variables.$swift-ease-in-timing-function;
8890
@include vendor-prefixes.user-select(none);
8991
width: 100%;
9092

‎src/material-experimental/mdc-button/_button-theme.scss

Lines changed: 50 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -63,63 +63,67 @@ $mat-button-state-target: '.mdc-button__ripple';
6363

6464
.mat-mdc-button, .mat-mdc-outlined-button {
6565
&.mat-unthemed {
66-
@include mdc-button-ink-color(mdc-helpers.$mdc-theme-on-surface, $query: mdc-helpers.$mat-theme-styles-query);
66+
@include mdc-button-ink-color(mdc-helpers.$mdc-theme-on-surface,
67+
$query: mdc-helpers.$mat-theme-styles-query);
6768
}
6869

6970
&.mat-primary {
7071
@include mdc-button-ink-color(primary, $query: mdc-helpers.$mat-theme-styles-query);
71-
@include mdc-states-base-color(
72-
primary, $query: mdc-helpers.$mat-theme-styles-query, $ripple-target: $mat-button-state-target);
72+
@include mdc-states-base-color(primary, $query: mdc-helpers.$mat-theme-styles-query,
73+
$ripple-target: $mat-button-state-target);
7374
@include _mat-button-ripple-ink-color(primary);
7475
}
7576

7677
&.mat-accent {
7778
@include mdc-button-ink-color(secondary, $query: mdc-helpers.$mat-theme-styles-query);
78-
@include mdc-states-base-color(
79-
secondary, $query: mdc-helpers.$mat-theme-styles-query, $ripple-target: $mat-button-state-target);
79+
@include mdc-states-base-color(secondary, $query: mdc-helpers.$mat-theme-styles-query,
80+
$ripple-target: $mat-button-state-target);
8081
@include _mat-button-ripple-ink-color(secondary);
8182
}
8283

8384
&.mat-warn {
8485
@include mdc-button-ink-color(error, $query: mdc-helpers.$mat-theme-styles-query);
85-
@include mdc-states-base-color(
86-
error, $query: mdc-helpers.$mat-theme-styles-query, $ripple-target: $mat-button-state-target);
86+
@include mdc-states-base-color(error, $query: mdc-helpers.$mat-theme-styles-query,
87+
$ripple-target: $mat-button-state-target);
8788
@include _mat-button-ripple-ink-color(error);
8889
}
8990
}
9091

9192
.mat-mdc-raised-button,
9293
.mat-mdc-unelevated-button {
9394
&.mat-unthemed {
94-
@include mdc-button-container-fill-color(
95-
mdc-helpers.$mdc-theme-surface, $query: mdc-helpers.$mat-theme-styles-query);
96-
@include mdc-button-ink-color(mdc-helpers.$mdc-theme-on-surface, $query: mdc-helpers.$mat-theme-styles-query);
97-
@include mdc-states-base-color(
98-
mdc-helpers.$mdc-theme-on-surface, $query: mdc-helpers.$mat-theme-styles-query,
99-
$ripple-target: $mat-button-state-target);
95+
@include mdc-button-container-fill-color(mdc-helpers.$mdc-theme-surface,
96+
$query: mdc-helpers.$mat-theme-styles-query);
97+
@include mdc-button-ink-color(mdc-helpers.$mdc-theme-on-surface,
98+
$query: mdc-helpers.$mat-theme-styles-query);
99+
@include mdc-states-base-color(mdc-helpers.$mdc-theme-on-surface,
100+
$query: mdc-helpers.$mat-theme-styles-query, $ripple-target: $mat-button-state-target);
100101
}
101102

102103
&.mat-primary {
103-
@include mdc-button-container-fill-color(primary, $query: mdc-helpers.$mat-theme-styles-query);
104+
@include mdc-button-container-fill-color(primary,
105+
$query: mdc-helpers.$mat-theme-styles-query);
104106
@include mdc-button-ink-color(on-primary, $query: mdc-helpers.$mat-theme-styles-query);
105-
@include mdc-states-base-color(
106-
on-primary, $query: mdc-helpers.$mat-theme-styles-query, $ripple-target: $mat-button-state-target);
107+
@include mdc-states-base-color(on-primary, $query: mdc-helpers.$mat-theme-styles-query,
108+
$ripple-target: $mat-button-state-target);
107109
@include _mat-button-ripple-ink-color(on-primary);
108110
}
109111

110112
&.mat-accent {
111-
@include mdc-button-container-fill-color(secondary, $query: mdc-helpers.$mat-theme-styles-query);
113+
@include mdc-button-container-fill-color(secondary,
114+
$query: mdc-helpers.$mat-theme-styles-query);
112115
@include mdc-button-ink-color(on-secondary, $query: mdc-helpers.$mat-theme-styles-query);
113-
@include mdc-states-base-color(
114-
on-secondary, $query: mdc-helpers.$mat-theme-styles-query, $ripple-target: $mat-button-state-target);
116+
@include mdc-states-base-color(on-secondary, $query: mdc-helpers.$mat-theme-styles-query,
117+
$ripple-target: $mat-button-state-target);
115118
@include _mat-button-ripple-ink-color(on-secondary);
116119
}
117120

118121
&.mat-warn {
119-
@include mdc-button-container-fill-color(error, $query: mdc-helpers.$mat-theme-styles-query);
122+
@include mdc-button-container-fill-color(error,
123+
$query: mdc-helpers.$mat-theme-styles-query);
120124
@include mdc-button-ink-color(on-error, $query: mdc-helpers.$mat-theme-styles-query);
121-
@include mdc-states-base-color(
122-
on-error, $query: mdc-helpers.$mat-theme-styles-query, $ripple-target: $mat-button-state-target);
125+
@include mdc-states-base-color(on-error, $query: mdc-helpers.$mat-theme-styles-query,
126+
$ripple-target: $mat-button-state-target);
123127
@include _mat-button-ripple-ink-color(on-error);
124128
}
125129

@@ -130,7 +134,8 @@ $mat-button-state-target: '.mdc-button__ripple';
130134

131135
.mat-mdc-outlined-button {
132136
&.mat-unthemed {
133-
@include mdc-button-outline-color(mdc-helpers.$mdc-theme-on-surface, $query: mdc-helpers.$mat-theme-styles-query);
137+
@include mdc-button-outline-color(mdc-helpers.$mdc-theme-on-surface,
138+
$query: mdc-helpers.$mat-theme-styles-query);
134139
}
135140

136141
&.mat-primary {
@@ -211,32 +216,33 @@ $mat-button-state-target: '.mdc-button__ripple';
211216
$query: mdc-helpers.$mat-theme-styles-query, $ripple-target: $mat-button-state-target);
212217

213218
&.mat-unthemed {
214-
@include mdc-states-base-color(
215-
mdc-helpers.$mdc-theme-on-surface, $query: mdc-helpers.$mat-theme-styles-query,
216-
$ripple-target: $mat-button-state-target);
217-
@include mdc-fab-container-color(mdc-helpers.$mdc-theme-surface, $query: mdc-helpers.$mat-theme-styles-query);
218-
@include mdc-fab-ink-color(mdc-helpers.$mdc-theme-on-surface, $query: mdc-helpers.$mat-theme-styles-query);
219+
@include mdc-states-base-color(mdc-helpers.$mdc-theme-on-surface,
220+
$query: mdc-helpers.$mat-theme-styles-query, $ripple-target: $mat-button-state-target);
221+
@include mdc-fab-container-color(mdc-helpers.$mdc-theme-surface,
222+
$query: mdc-helpers.$mat-theme-styles-query);
223+
@include mdc-fab-ink-color(mdc-helpers.$mdc-theme-on-surface,
224+
$query: mdc-helpers.$mat-theme-styles-query);
219225
}
220226

221227
&.mat-primary {
222-
@include mdc-states-base-color(
223-
on-primary, $query: mdc-helpers.$mat-theme-styles-query, $ripple-target: $mat-button-state-target);
228+
@include mdc-states-base-color(on-primary, $query: mdc-helpers.$mat-theme-styles-query,
229+
$ripple-target: $mat-button-state-target);
224230
@include mdc-fab-container-color(primary, $query: mdc-helpers.$mat-theme-styles-query);
225231
@include mdc-fab-ink-color(on-primary, $query: mdc-helpers.$mat-theme-styles-query);
226232
@include _mat-button-ripple-ink-color(on-primary);
227233
}
228234

229235
&.mat-accent {
230-
@include mdc-states-base-color(
231-
on-secondary, $query: mdc-helpers.$mat-theme-styles-query, $ripple-target: $mat-button-state-target);
236+
@include mdc-states-base-color(on-secondary, $query: mdc-helpers.$mat-theme-styles-query,
237+
$ripple-target: $mat-button-state-target);
232238
@include mdc-fab-container-color(secondary, $query: mdc-helpers.$mat-theme-styles-query);
233239
@include mdc-fab-ink-color(on-secondary, $query: mdc-helpers.$mat-theme-styles-query);
234240
@include _mat-button-ripple-ink-color(on-secondary);
235241
}
236242

237243
&.mat-warn {
238-
@include mdc-states-base-color(
239-
on-error, $query: mdc-helpers.$mat-theme-styles-query, $ripple-target: $mat-button-state-target);
244+
@include mdc-states-base-color(on-error, $query: mdc-helpers.$mat-theme-styles-query,
245+
$ripple-target: $mat-button-state-target);
240246
@include mdc-fab-container-color(error, $query: mdc-helpers.$mat-theme-styles-query);
241247
@include mdc-fab-ink-color(on-error, $query: mdc-helpers.$mat-theme-styles-query);
242248
@include _mat-button-ripple-ink-color(on-error);
@@ -290,29 +296,29 @@ $mat-button-state-target: '.mdc-button__ripple';
290296
$query: mdc-helpers.$mat-theme-styles-query, $ripple-target: $mat-button-state-target);
291297

292298
&.mat-unthemed {
293-
@include mdc-states-base-color(
294-
mdc-helpers.$mdc-theme-on-surface, $query: mdc-helpers.$mat-theme-styles-query,
295-
$ripple-target: $mat-button-state-target);
296-
@include mdc-icon-button-ink-color(mdc-helpers.$mdc-theme-on-surface, $query: mdc-helpers.$mat-theme-styles-query);
299+
@include mdc-states-base-color(mdc-helpers.$mdc-theme-on-surface,
300+
$query: mdc-helpers.$mat-theme-styles-query, $ripple-target: $mat-button-state-target);
301+
@include mdc-icon-button-ink-color(mdc-helpers.$mdc-theme-on-surface,
302+
$query: mdc-helpers.$mat-theme-styles-query);
297303
}
298304

299305
&.mat-primary {
300-
@include mdc-states-base-color(
301-
primary, $query: mdc-helpers.$mat-theme-styles-query, $ripple-target: $mat-button-state-target);
306+
@include mdc-states-base-color(primary, $query: mdc-helpers.$mat-theme-styles-query,
307+
$ripple-target: $mat-button-state-target);
302308
@include mdc-icon-button-ink-color(primary, $query: mdc-helpers.$mat-theme-styles-query);
303309
@include _mat-button-ripple-ink-color(primary);
304310
}
305311

306312
&.mat-accent {
307-
@include mdc-states-base-color(
308-
secondary, $query: mdc-helpers.$mat-theme-styles-query, $ripple-target: $mat-button-state-target);
313+
@include mdc-states-base-color(secondary, $query: mdc-helpers.$mat-theme-styles-query,
314+
$ripple-target: $mat-button-state-target);
309315
@include mdc-icon-button-ink-color(secondary, $query: mdc-helpers.$mat-theme-styles-query);
310316
@include _mat-button-ripple-ink-color(secondary);
311317
}
312318

313319
&.mat-warn {
314-
@include mdc-states-base-color(
315-
error, $query: mdc-helpers.$mat-theme-styles-query, $ripple-target: $mat-button-state-target);
320+
@include mdc-states-base-color(error, $query: mdc-helpers.$mat-theme-styles-query,
321+
$ripple-target: $mat-button-state-target);
316322
@include mdc-icon-button-ink-color(error, $query: mdc-helpers.$mat-theme-styles-query);
317323
@include _mat-button-ripple-ink-color(error);
318324
}

‎src/material-experimental/mdc-chips/_chips-theme.scss

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,8 +13,10 @@
1313
text-primary-on-dark,
1414
$query: mdc-helpers.$mat-theme-styles-query
1515
);
16-
@include mdc-chip-leading-icon-color(text-primary-on-dark, $query: mdc-helpers.$mat-theme-styles-query);
17-
@include mdc-chip-trailing-icon-color(text-primary-on-dark, $query: mdc-helpers.$mat-theme-styles-query);
16+
@include mdc-chip-leading-icon-color(text-primary-on-dark,
17+
$query: mdc-helpers.$mat-theme-styles-query);
18+
@include mdc-chip-trailing-icon-color(text-primary-on-dark,
19+
$query: mdc-helpers.$mat-theme-styles-query);
1820
}
1921

2022
@mixin color($config-or-theme) {

‎src/material-experimental/mdc-dialog/dialog.scss

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,8 @@ $mat-dialog-content-max-height: 65vh !default;
1212
$mat-dialog-button-horizontal-margin: 8px !default;
1313

1414
@include mdc-dialog-core-styles($query: mdc-helpers.$mat-base-styles-query);
15-
@include mdc-dialog-structure-overrides.private-dialog-structure-overrides($mat-dialog-content-max-height);
15+
@include mdc-dialog-structure-overrides.private-dialog-structure-overrides(
16+
$mat-dialog-content-max-height);
1617

1718
// The dialog container is focusable. We remove the default outline shown in browsers.
1819
.mat-mdc-dialog-container {

‎src/material-experimental/mdc-form-field/_form-field-theme.scss

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

1717
// Mixin that overwrites the default MDC text-field color styles to be based on
1818
// the given theme palette. The MDC text-field is styled using `primary` by default.
19-
@mixin _mat-mdc-text-field-color-styles($palette-name, $query: mdc-helpers.$mat-theme-styles-query) {
19+
@mixin _mat-mdc-text-field-color-styles($palette-name,
20+
$query: mdc-helpers.$mat-theme-styles-query) {
2021
$_mdc-text-field-focused-label-color: mdc-text-field.$focused-label-color;
2122
mdc-text-field.$focused-label-color: rgba(mdc-theme-prop-value($palette-name), 0.87);
2223

‎src/material-experimental/mdc-form-field/form-field.scss

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,12 @@
99

1010

1111
// Base styles for MDC text-field, notched-outline, floating label and line-ripple.
12-
@include mdc-text-field-without-ripple($query: mdc-helpers.$mat-base-styles-without-animation-query);
13-
@include mdc-floating-label-core-styles($query: mdc-helpers.$mat-base-styles-without-animation-query);
14-
@include mdc-notched-outline-core-styles($query: mdc-helpers.$mat-base-styles-without-animation-query);
12+
@include mdc-text-field-without-ripple(
13+
$query: mdc-helpers.$mat-base-styles-without-animation-query);
14+
@include mdc-floating-label-core-styles(
15+
$query: mdc-helpers.$mat-base-styles-without-animation-query);
16+
@include mdc-notched-outline-core-styles(
17+
$query: mdc-helpers.$mat-base-styles-without-animation-query);
1518
@include mdc-line-ripple-core-styles($query: mdc-helpers.$mat-base-styles-without-animation-query);
1619

1720
// MDC text-field overwrites.

‎src/material-experimental/mdc-menu/menu.scss

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,8 @@ mat-menu {
5050
// MDC's menu items are `<li>` nodes which don't need resets, however ours
5151
// can be anything, including buttons, so we need to do the reset ourselves.
5252
@include button-common.reset;
53-
@include mdc-list-deprecated-single-line-height($height, $query: mdc-helpers.$mat-base-styles-query);
53+
@include mdc-list-deprecated-single-line-height($height,
54+
$query: mdc-helpers.$mat-base-styles-query);
5455
cursor: pointer;
5556
width: 100%;
5657
text-align: left;

‎src/material-experimental/mdc-progress-bar/_progress-bar-theme.scss

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,8 @@
1111
// lightening the color of the primary bar.
1212
$buffer-color: color.adjust(mdc-theme-prop-value($color), $lightness: 30%);
1313
@include mdc-linear-progress-bar-color($color, $query: mdc-helpers.$mat-theme-styles-query);
14-
@include mdc-linear-progress-buffer-color($buffer-color, $query: mdc-helpers.$mat-theme-styles-query);
14+
@include mdc-linear-progress-buffer-color($buffer-color,
15+
$query: mdc-helpers.$mat-theme-styles-query);
1516
}
1617

1718
@mixin color($config-or-theme) {

‎src/material-experimental/mdc-progress-bar/progress-bar.scss

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
@use '../mdc-helpers/mdc-helpers';
22
@import '@material/linear-progress/mixins.import';
33

4-
@include mdc-linear-progress-core-styles($query: mdc-helpers.$mat-base-styles-without-animation-query);
4+
@include mdc-linear-progress-core-styles($query:
5+
mdc-helpers.$mat-base-styles-without-animation-query);
56

67
.mat-mdc-progress-bar {
78
// Explicitly set to `block` since the browser defaults custom elements to `inline`.

‎src/material-experimental/popover-edit/_popover-edit.scss

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,8 @@
5858
right: 0;
5959
transform-origin: 50%;
6060
transform: scaleX(0.5);
61-
transition: background-color variables.$swift-ease-in-duration variables.$swift-ease-in-timing-function;
61+
transition: background-color variables.$swift-ease-in-duration
62+
variables.$swift-ease-in-timing-function;
6263
visibility: hidden;
6364
}
6465

‎src/material/button/_button-base.scss

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ $margin: 0 !default;
1111
$line-height: 36px !default;
1212
$border-radius: 4px !default;
1313
$focus-transition: opacity 200ms variables.$swift-ease-in-out-timing-function,
14-
background-color 200ms variables.$swift-ease-in-out-timing-function !default;
14+
background-color 200ms variables.$swift-ease-in-out-timing-function !default;
1515

1616
// Stroked button padding is 1px less horizontally than default/flat/raised
1717
// button's padding.
@@ -82,8 +82,8 @@ $mini-fab-padding: 8px !default;
8282
transform: translate3d(0, 0, 0);
8383

8484
// Animation.
85-
transition: background variables.$swift-ease-out-duration variables.$swift-ease-out-timing-function,
86-
elevation.transition-property-value();
85+
transition: background variables.$swift-ease-out-duration
86+
variables.$swift-ease-out-timing-function, elevation.transition-property-value();
8787
}
8888

8989
// Applies styles to fab and mini-fab button types only

‎src/material/checkbox/checkbox.scss

Lines changed: 12 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -184,8 +184,8 @@ $_mat-checkbox-mark-stroke-size: 2 / 15 * checkbox-common.$size !default;
184184
display: inline-block;
185185

186186
// Animation
187-
transition: background variables.$swift-ease-out-duration variables.$swift-ease-out-timing-function,
188-
elevation.transition-property-value();
187+
transition: background variables.$swift-ease-out-duration
188+
variables.$swift-ease-out-timing-function, elevation.transition-property-value();
189189

190190
cursor: pointer;
191191
-webkit-tap-highlight-color: transparent;
@@ -275,8 +275,8 @@ $_mat-checkbox-mark-stroke-size: 2 / 15 * checkbox-common.$size !default;
275275
display: inline-flex;
276276
justify-content: center;
277277
transition: background-color checkbox-common.$transition-duration
278-
variables.$linear-out-slow-in-timing-function,
279-
opacity checkbox-common.$transition-duration variables.$linear-out-slow-in-timing-function;
278+
variables.$linear-out-slow-in-timing-function, opacity checkbox-common.$transition-duration
279+
variables.$linear-out-slow-in-timing-function;
280280

281281
._mat-animation-noopable & {
282282
transition: none;
@@ -426,7 +426,8 @@ $_mat-checkbox-mark-stroke-size: 2 / 15 * checkbox-common.$size !default;
426426

427427
&-unchecked-checked {
428428
.mat-checkbox-background {
429-
animation: checkbox-common.$transition-duration * 2 linear 0ms mat-checkbox-fade-in-background;
429+
animation: checkbox-common.$transition-duration * 2 linear 0ms
430+
mat-checkbox-fade-in-background;
430431
}
431432

432433
.mat-checkbox-checkmark-path {
@@ -440,7 +441,8 @@ $_mat-checkbox-mark-stroke-size: 2 / 15 * checkbox-common.$size !default;
440441

441442
&-unchecked-indeterminate {
442443
.mat-checkbox-background {
443-
animation: checkbox-common.$transition-duration * 2 linear 0ms mat-checkbox-fade-in-background;
444+
animation: checkbox-common.$transition-duration * 2 linear 0ms
445+
mat-checkbox-fade-in-background;
444446
}
445447

446448
.mat-checkbox-mixedmark {
@@ -451,7 +453,8 @@ $_mat-checkbox-mark-stroke-size: 2 / 15 * checkbox-common.$size !default;
451453

452454
&-checked-unchecked {
453455
.mat-checkbox-background {
454-
animation: checkbox-common.$transition-duration * 2 linear 0ms mat-checkbox-fade-out-background;
456+
animation: checkbox-common.$transition-duration * 2 linear 0ms
457+
mat-checkbox-fade-out-background;
455458
}
456459

457460
.mat-checkbox-checkmark-path {
@@ -486,7 +489,8 @@ $_mat-checkbox-mark-stroke-size: 2 / 15 * checkbox-common.$size !default;
486489

487490
&-indeterminate-unchecked {
488491
.mat-checkbox-background {
489-
animation: checkbox-common.$transition-duration * 2 linear 0ms mat-checkbox-fade-out-background;
492+
animation: checkbox-common.$transition-duration * 2 linear 0ms
493+
mat-checkbox-fade-out-background;
490494
}
491495

492496
.mat-checkbox-mixedmark {

‎src/material/chips/_chips-theme.scss

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,8 @@ $chip-remove-font-size: 18px;
3232
}
3333

3434
@mixin _mat-chip-theme-color($palette) {
35-
@include _mat-chip-element-color(theming.color($palette, default-contrast), theming.color($palette));
35+
@include _mat-chip-element-color(theming.color($palette, default-contrast),
36+
theming.color($palette));
3637

3738
.mat-ripple-element {
3839
@include _mat-chips-ripple-background($palette, default-contrast, 0.1);

0 commit comments

Comments
 (0)