Skip to content

Commit ecc706b

Browse files
crisbetocrisbeto
committed
refactor(material/core): run sass module migration
1 parent f3556ac commit ecc706b

File tree

336 files changed

+5302
-4269
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

336 files changed

+5302
-4269
lines changed

‎src/cdk/a11y/_a11y.import.scss

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
@forward 'a11y' hide a11y, high-contrast;
2+
@forward 'a11y' as cdk-* hide cdk-optionally-nest-content;

‎src/cdk/a11y/_a11y.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
@mixin cdk-a11y {
1+
@mixin a11y {
22
.cdk-visually-hidden {
33
border: 0;
44
clip: rect(0 0 0 0);
@@ -42,7 +42,7 @@
4242
/// * `on` - works for `Emulated`, `Native`, and `ShadowDom`
4343
/// * `off` - works for `None`
4444
/// * `any` - works for all encapsulation modes by emitting the CSS twice (default).
45-
@mixin cdk-high-contrast($target: active, $encapsulation: 'any') {
45+
@mixin high-contrast($target: active, $encapsulation: 'any') {
4646
@if ($target != 'active' and $target != 'black-on-white' and $target != 'white-on-black') {
4747
@error 'Unknown cdk-high-contrast value "#{$target}" provided. ' +
4848
'Allowed values are "active", "black-on-white", and "white-on-black"';

‎src/cdk/a11y/a11y-prebuilt.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
1-
@import './a11y';
1+
@use './a11y';
22

3-
@include cdk-a11y();
3+
@include a11y.a11y();

‎src/cdk/overlay/_overlay.import.scss

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
@forward 'overlay' hide $dark-backdrop-background, $z-index-overlay, $z-index-overlay-backdrop, $z-index-overlay-container, overlay;
2+
@forward 'overlay' as cdk-* hide $cdk-backdrop-animation-duration, $cdk-backdrop-animation-timing-function, $cdk-dark-backdrop-background;
3+
@forward 'overlay' as cdk-overlay-* hide $cdk-overlay-backdrop-animation-duration, $cdk-overlay-backdrop-animation-timing-function, $cdk-overlay-z-index-overlay, $cdk-overlay-z-index-overlay-backdrop, $cdk-overlay-z-index-overlay-container, cdk-overlay-overlay;

‎src/cdk/overlay/_overlay.scss

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,19 @@
11
// We want overlays to always appear over user content, so set a baseline
22
// very high z-index for the overlay container, which is where we create the new
33
// stacking context for all overlays.
4-
$cdk-z-index-overlay-container: 1000 !default;
5-
$cdk-z-index-overlay: 1000 !default;
6-
$cdk-z-index-overlay-backdrop: 1000 !default;
4+
$z-index-overlay-container: 1000 !default;
5+
$z-index-overlay: 1000 !default;
6+
$z-index-overlay-backdrop: 1000 !default;
77

88
// Background color for all of the backdrops
9-
$cdk-overlay-dark-backdrop-background: rgba(0, 0, 0, 0.32) !default;
9+
$dark-backdrop-background: rgba(0, 0, 0, 0.32) !default;
1010

1111
// Default backdrop animation is based on the Material Design swift-ease-out.
1212
$backdrop-animation-duration: 400ms !default;
1313
$backdrop-animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;
1414

1515

16-
@mixin cdk-overlay() {
16+
@mixin overlay() {
1717
.cdk-overlay-container, .cdk-global-overlay-wrapper {
1818
// Disable events from being captured on the overlay container.
1919
pointer-events: none;
@@ -28,7 +28,7 @@ $backdrop-animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;
2828
// The overlay-container is an invisible element which contains all individual overlays.
2929
.cdk-overlay-container {
3030
position: fixed;
31-
z-index: $cdk-z-index-overlay-container;
31+
z-index: $z-index-overlay-container;
3232

3333
&:empty {
3434
// Hide the element when it doesn't have any child nodes. This doesn't
@@ -44,7 +44,7 @@ $backdrop-animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;
4444
.cdk-global-overlay-wrapper {
4545
display: flex;
4646
position: absolute;
47-
z-index: $cdk-z-index-overlay;
47+
z-index: $z-index-overlay;
4848
}
4949

5050
// A single overlay pane.
@@ -54,7 +54,7 @@ $backdrop-animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;
5454
position: absolute;
5555
pointer-events: auto;
5656
box-sizing: border-box;
57-
z-index: $cdk-z-index-overlay;
57+
z-index: $z-index-overlay;
5858

5959
// For connected-position overlays, we set `display: flex` in
6060
// order to force `max-width` and `max-height` to take effect.
@@ -71,7 +71,7 @@ $backdrop-animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;
7171
left: 0;
7272
right: 0;
7373

74-
z-index: $cdk-z-index-overlay-backdrop;
74+
z-index: $z-index-overlay-backdrop;
7575
pointer-events: auto;
7676
-webkit-tap-highlight-color: transparent;
7777
transition: opacity $backdrop-animation-duration $backdrop-animation-timing-function;
@@ -91,7 +91,7 @@ $backdrop-animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;
9191
}
9292

9393
.cdk-overlay-dark-backdrop {
94-
background: $cdk-overlay-dark-backdrop-background;
94+
background: $dark-backdrop-background;
9595
}
9696

9797
.cdk-overlay-transparent-backdrop {
@@ -108,7 +108,7 @@ $backdrop-animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;
108108
// overlay element's size to fit within the viewport.
109109
.cdk-overlay-connected-position-bounding-box {
110110
position: absolute;
111-
z-index: $cdk-z-index-overlay;
111+
z-index: $z-index-overlay;
112112

113113
// We use `display: flex` on this element exclusively for centering connected overlays.
114114
// When *not* centering, a top/left/bottom/right will be set which overrides the normal

‎src/cdk/overlay/overlay-prebuilt.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
1-
@import './overlay';
1+
@use './overlay';
22

3-
@include cdk-overlay();
3+
@include overlay.overlay();

‎src/cdk/text-field/_text-field.import.scss

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
@forward 'text-field' hide $autofill-color-frame-count, autofill-color, text-field;
2+
@forward 'text-field' as cdk-* hide $cdk-autofill-color-frame-count, cdk-autofill-color, cdk-textarea-autosize-measuring-base;
3+
@forward 'text-field' as cdk-text-field-* hide cdk-text-field-text-field, cdk-text-field-textarea-autosize-measuring-base;

‎src/cdk/text-field/_text-field.scss

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
// Core styles that enable monitoring autofill state of text fields.
2-
@mixin cdk-text-field {
2+
@mixin text-field {
33
// Keyframes that apply no styles, but allow us to monitor when an text field becomes autofilled
44
// by watching for the animation events that are fired when they start. Note: the /*!*/ comment is
55
// needed to prevent LibSass from stripping the keyframes out.
@@ -52,30 +52,30 @@
5252
}
5353

5454
// Used to generate UIDs for keyframes used to change the text field autofill styles.
55-
$cdk-text-field-autofill-color-frame-count: 0;
55+
$autofill-color-frame-count: 0;
5656

5757
// Mixin used to apply custom background and foreground colors to an autofilled text field.
5858
// Based on: https://stackoverflow.com/questions/2781549/
5959
// removing-input-background-colour-for-chrome-autocomplete#answer-37432260
60-
@mixin cdk-text-field-autofill-color($background, $foreground:'') {
61-
@keyframes cdk-text-field-autofill-color-#{$cdk-text-field-autofill-color-frame-count} {
60+
@mixin autofill-color($background, $foreground:'') {
61+
@keyframes cdk-text-field-autofill-color-#{$autofill-color-frame-count} {
6262
to {
6363
background: $background;
6464
@if $foreground != '' { color: $foreground; }
6565
}
6666
}
6767

6868
&:-webkit-autofill {
69-
animation: cdk-text-field-autofill-color-#{$cdk-text-field-autofill-color-frame-count} both;
69+
animation: cdk-text-field-autofill-color-#{$autofill-color-frame-count} both;
7070
}
7171

7272
&.cdk-text-field-autofill-monitored:-webkit-autofill {
7373
// Since Chrome 80 we need a 1ms delay for cdk-text-field-autofill-start, or the animationstart
7474
// event won't fire.
7575
animation: cdk-text-field-autofill-start 0s 1ms,
76-
cdk-text-field-autofill-color-#{$cdk-text-field-autofill-color-frame-count} both;
76+
cdk-text-field-autofill-color-#{$autofill-color-frame-count} both;
7777
}
7878

79-
$cdk-text-field-autofill-color-frame-count:
80-
$cdk-text-field-autofill-color-frame-count + 1 !global;
79+
$autofill-color-frame-count:
80+
$autofill-color-frame-count + 1 !global;
8181
}

‎src/cdk/text-field/text-field-prebuilt.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
1-
@import 'text-field';
1+
@use 'text-field';
22

3-
@include cdk-text-field();
3+
@include text-field.text-field();

‎src/dev-app/datepicker/datepicker-demo.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
@import '../../material/datepicker/datepicker-theme';
1+
@use '../../material/datepicker/datepicker-theme';
22

33
mat-calendar {
44
width: 300px;
@@ -9,5 +9,5 @@ mat-calendar {
99
}
1010

1111
.demo-custom-range {
12-
@include mat-date-range-colors(hotpink, teal, yellow, purple);
12+
@include datepicker-theme.date-range-colors(hotpink, teal, yellow, purple);
1313
}

‎src/dev-app/input/input-demo.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
@import '../../cdk/text-field/text-field';
1+
@use '../../cdk/text-field/text-field';
22

33
.demo-basic {
44
padding: 0;
@@ -33,7 +33,7 @@
3333
}
3434

3535
.demo-custom-autofill-style {
36-
@include cdk-text-field-autofill-color(transparent, red);
36+
@include text-field.autofill-color(transparent, red);
3737
}
3838

3939
.demo-rows {

‎src/dev-app/mdc-dialog/mdc-dialog-demo.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
@import '../../material-experimental/mdc-dialog/dialog-legacy-padding';
1+
@use '../../material-experimental/mdc-dialog/dialog-legacy-padding';
22

33
.demo-dialog-card {
44
max-width: 600px;
@@ -24,5 +24,5 @@
2424
}
2525

2626
.demo-dialog-legacy-padding {
27-
@include mat-mdc-dialog-legacy-padding();
27+
@include dialog-legacy-padding.legacy-padding();
2828
}

‎src/dev-app/mdc-input/mdc-input-demo.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
@import '../../cdk/text-field/text-field';
1+
@use '../../cdk/text-field/text-field';
22

33
.demo-basic {
44
padding: 0;
@@ -41,7 +41,7 @@
4141
}
4242

4343
.demo-custom-autofill-style {
44-
@include cdk-text-field-autofill-color(transparent, red);
44+
@include text-field.autofill-color(transparent, red);
4545
}
4646

4747
.demo-rows {

‎src/dev-app/theme.scss

Lines changed: 45 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1,56 +1,60 @@
1-
@import '../material/core/color/all-color';
2-
@import '../material/core/density/private/all-density';
3-
@import '../material/core/focus-indicators/focus-indicators';
4-
@import '../material/core/theming/all-theme';
5-
@import '../material-experimental/column-resize/column-resize';
6-
@import '../material-experimental/mdc-helpers/mdc-helpers';
7-
@import '../material-experimental/mdc-helpers/focus-indicators';
8-
@import '../material-experimental/mdc-color/all-color';
9-
@import '../material-experimental/mdc-theming/all-theme';
10-
@import '../material-experimental/mdc-typography/all-typography';
11-
@import '../material-experimental/mdc-density/all-density';
12-
@import '../material-experimental/mdc-slider/slider-theme';
13-
@import '../material-experimental/popover-edit/popover-edit';
1+
@use '../material/core/color/all-color' as color-all-color;
2+
@use '../material/core/density/private/all-density' as private-all-density;
3+
@use '../material/core/focus-indicators/focus-indicators' as focus-indicators-focus-indicators;
4+
@use '../material/core/theming/all-theme' as theming-all-theme;
5+
@use '../material-experimental/column-resize/column-resize';
6+
@use '../material-experimental/mdc-helpers/mdc-helpers';
7+
@use '../material-experimental/mdc-helpers/focus-indicators';
8+
@use '../material-experimental/mdc-color/all-color';
9+
@use '../material-experimental/mdc-theming/all-theme';
10+
@use '../material-experimental/mdc-typography/all-typography';
11+
@use '../material-experimental/mdc-density/all-density';
12+
@use '../material-experimental/mdc-slider/slider-theme';
13+
@use '../material-experimental/popover-edit/popover-edit';
14+
@use '../material/core/core';
15+
@use '../material/core/theming/palette';
16+
@use '../material/core/theming/theming';
17+
@use '../material/core/typography/typography';
1418

1519
// Plus imports for other components in your app.
1620

1721
// Include the common styles for Angular Material. We include this here so that you only
1822
// have to load a single css file for Angular Material in your app.
1923
// **Be sure that you only ever include this mixin once!**
20-
@include mat-core();
21-
@include angular-material-mdc-typography();
22-
@include mat-popover-edit-typography(mat-typography-config());
24+
@include core.core();
25+
@include all-typography.angular-material-mdc-typography();
26+
@include popover-edit.typography(typography.config());
2327

2428
// Include base styles for strong focus indicators.
2529
.demo-strong-focus {
26-
@include mat-strong-focus-indicators();
27-
@include mat-mdc-strong-focus-indicators();
30+
@include focus-indicators-focus-indicators.strong-focus-indicators();
31+
@include focus-indicators.strong-focus-indicators();
2832
}
2933

3034
// Define the default theme (same as the example above).
31-
$candy-app-primary: mat-palette($mat-indigo);
32-
$candy-app-accent: mat-palette($mat-pink, A200, A100, A400);
33-
$candy-app-theme: mat-light-theme((
35+
$candy-app-primary: theming.palette(palette.$indigo);
36+
$candy-app-accent: theming.palette(palette.$pink, A200, A100, A400);
37+
$candy-app-theme: theming.light-theme((
3438
color: (
3539
primary: $candy-app-primary,
3640
accent: $candy-app-accent
3741
)
3842
));
3943

4044
// Include the default theme styles.
41-
@include angular-material-theme($candy-app-theme);
42-
@include angular-material-mdc-theme($candy-app-theme);
43-
@include mat-column-resize-theme($candy-app-theme);
44-
@include mat-popover-edit-theme($candy-app-theme);
45+
@include theming-all-theme.angular-material-theme($candy-app-theme);
46+
@include all-theme.angular-material-mdc-theme($candy-app-theme);
47+
@include column-resize.theme($candy-app-theme);
48+
@include popover-edit.theme($candy-app-theme);
4549

4650
// We add this in manually for now, because it isn't included in `angular-material-mdc-theme`.
47-
@include mat-mdc-slider-theme($candy-app-theme);
51+
@include slider-theme.theme($candy-app-theme);
4852

4953
// Define an alternate dark theme.
50-
$dark-primary: mat-palette($mat-blue-grey);
51-
$dark-accent: mat-palette($mat-amber, A200, A100, A400);
52-
$dark-warn: mat-palette($mat-deep-orange);
53-
$dark-theme: mat-dark-theme((
54+
$dark-primary: theming.palette(palette.$blue-grey);
55+
$dark-accent: theming.palette(palette.$amber, A200, A100, A400);
56+
$dark-warn: theming.palette(palette.$deep-orange);
57+
$dark-theme: theming.dark-theme((
5458
color: (
5559
primary: $dark-primary,
5660
accent: $dark-accent,
@@ -60,26 +64,26 @@ $dark-theme: mat-dark-theme((
6064

6165
// Include the default theme for focus indicators.
6266
.demo-strong-focus {
63-
@include mat-strong-focus-indicators-theme($candy-app-theme);
64-
@include mat-mdc-strong-focus-indicators-theme($candy-app-theme);
67+
@include focus-indicators-focus-indicators.strong-focus-indicators-theme($candy-app-theme);
68+
@include focus-indicators.strong-focus-indicators-theme($candy-app-theme);
6569
}
6670

6771
// Include the alternative theme styles inside of a block with a CSS class. You can make this
6872
// CSS class whatever you want. In this example, any component inside of an element with
6973
// `.demo-unicorn-dark-theme` will be affected by this alternate dark theme instead of the
7074
// default theme.
7175
.demo-unicorn-dark-theme {
72-
@include angular-material-color($dark-theme);
73-
@include angular-material-mdc-color($dark-theme);
74-
@include mat-column-resize-color($dark-theme);
75-
@include mat-popover-edit-color($dark-theme);
76-
@include mat-mdc-slider-color($dark-theme);
76+
@include color-all-color.angular-material-color($dark-theme);
77+
@include all-color.angular-material-mdc-color($dark-theme);
78+
@include column-resize.color($dark-theme);
79+
@include popover-edit.color($dark-theme);
80+
@include slider-theme.color($dark-theme);
7781
}
7882

7983
// Include the dark theme for focus indicators.
8084
.demo-unicorn-dark-theme.demo-strong-focus {
81-
@include mat-strong-focus-indicators-color($dark-theme);
82-
@include mat-mdc-strong-focus-indicators-color($dark-theme);
85+
@include focus-indicators-focus-indicators.strong-focus-indicators-color($dark-theme);
86+
@include focus-indicators.strong-focus-indicators-color($dark-theme);
8387
}
8488

8589
// Create classes for all density scales which are supported by all MDC-based components.
@@ -88,7 +92,7 @@ $dark-theme: mat-dark-theme((
8892
$density-scales: (-1, -2, minimum, maximum);
8993
@each $density in $density-scales {
9094
.demo-density-#{$density} {
91-
@include angular-material-density($density);
92-
@include angular-material-mdc-density($density);
95+
@include private-all-density.angular-material-density($density);
96+
@include all-density.angular-material-mdc-density($density);
9397
}
9498
}

‎src/e2e-app/theme.scss

Lines changed: 13 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,23 @@
1-
@import '../material/core/theming/all-theme';
2-
@import '../material-experimental/mdc-theming/all-theme';
3-
@import '../material-experimental/mdc-typography/all-typography';
1+
@use '../material/core/theming/all-theme' as theming-all-theme;
2+
@use '../material-experimental/mdc-theming/all-theme';
3+
@use '../material-experimental/mdc-typography/all-typography';
4+
@use '../material/core/core';
5+
@use '../material/core/theming/palette';
6+
@use '../material/core/theming/theming';
47

58
// Plus imports for other components in your app.
69

710
// Include the common styles for Angular Material. We include this here so that you only
811
// have to load a single css file for Angular Material in your app.
912
// **Be sure that you only ever include this mixin once!**
10-
@include mat-core();
11-
@include angular-material-mdc-typography();
13+
@include core.core();
14+
@include all-typography.angular-material-mdc-typography();
1215

1316
// Define the default theme (same as the example above).
14-
$candy-app-primary: mat-palette($mat-indigo);
15-
$candy-app-accent: mat-palette($mat-pink, A200, A100, A400);
16-
$candy-app-theme: mat-light-theme($candy-app-primary, $candy-app-accent);
17+
$candy-app-primary: theming.palette(palette.$indigo);
18+
$candy-app-accent: theming.palette(palette.$pink, A200, A100, A400);
19+
$candy-app-theme: theming.light-theme($candy-app-primary, $candy-app-accent);
1720

1821
// Include the default theme styles.
19-
@include angular-material-theme($candy-app-theme);
20-
@include angular-material-mdc-theme($candy-app-theme);
22+
@include theming-all-theme.angular-material-theme($candy-app-theme);
23+
@include all-theme.angular-material-mdc-theme($candy-app-theme);

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
@forward '../../material/core/style/variables.import';
2+
@forward '../../material/core/theming/theming.import';
3+
@forward '../../material/core/style/vendor-prefixes.import';
4+
@forward 'column-resize' as mat-column-resize-*;

0 commit comments

Comments
 (0)