From 6c921e35de227187468bb485b57705accc8bb28a Mon Sep 17 00:00:00 2001 From: smuddyx Date: Fri, 21 May 2021 10:16:29 +0200 Subject: [PATCH] update material12 --- package-lock.json | 18 +++++++++++------- package.json | 4 ++-- src/custom-theme.scss | 40 +++++++++++++++++++--------------------- 3 files changed, 32 insertions(+), 30 deletions(-) diff --git a/package-lock.json b/package-lock.json index e01767d..61d5532 100644 --- a/package-lock.json +++ b/package-lock.json @@ -531,11 +531,12 @@ } }, "@angular/cdk": { - "version": "9.2.1", - "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-9.2.1.tgz", - "integrity": "sha512-aSG1UNPszkSnpNuDCNd7ZgT29oQ8vqHPmoqjvJI0JkEv3i6uEs5tRuhWl3TK39wDNuwdlq0AY47XTa/0Ppb5RQ==", + "version": "12.0.1", + "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-12.0.1.tgz", + "integrity": "sha512-fO77bM0LWZeHkg+o23ZYGaZbth5DbaGDHrHVq+ygPA+wjmSDs12w2vIXQ6KpruGdP+28tAdpvZDMfD56N7xTbg==", "requires": { - "parse5": "^5.0.0" + "parse5": "^5.0.0", + "tslib": "^2.1.0" }, "dependencies": { "parse5": { @@ -986,9 +987,12 @@ "dev": true }, "@angular/material": { - "version": "9.2.1", - "resolved": "https://registry.npmjs.org/@angular/material/-/material-9.2.1.tgz", - "integrity": "sha512-nqn/0Eg04DxwnkRGSM1xnmGgtfHYOBcEPbFeTu8c1qAbjFEozd6tpw4y6dQrCCL/JLNIRQPsxsUsVnKeWDF/4Q==" + "version": "12.0.1", + "resolved": "https://registry.npmjs.org/@angular/material/-/material-12.0.1.tgz", + "integrity": "sha512-Sevy/ssBuidSbpixUH8SvBXpHn+rKYfDao2YTgQxBJugIun9mnV0QqlzVG2gkdVYCesqEgZJRe3k7QXq7E+vlw==", + "requires": { + "tslib": "^2.1.0" + } }, "@angular/platform-browser": { "version": "12.0.1", diff --git a/package.json b/package.json index e14e55c..f791713 100644 --- a/package.json +++ b/package.json @@ -12,13 +12,13 @@ "private": true, "dependencies": { "@angular/animations": "~12.0.1", - "@angular/cdk": "^9.2.1", + "@angular/cdk": "^12.0.1", "@angular/common": "~12.0.1", "@angular/compiler": "~12.0.1", "@angular/core": "~12.0.1", "@angular/fire": "^5.4.2", "@angular/forms": "~12.0.1", - "@angular/material": "^9.2.1", + "@angular/material": "^12.0.1", "@angular/platform-browser": "~12.0.1", "@angular/platform-browser-dynamic": "~12.0.1", "@angular/router": "~12.0.1", diff --git a/src/custom-theme.scss b/src/custom-theme.scss index f152dc3..868e0fe 100644 --- a/src/custom-theme.scss +++ b/src/custom-theme.scss @@ -1,83 +1,81 @@ +@use '~@angular/material' as mat; // Custom Theming for Angular Material // For more information: https://material.angular.io/guide/theming -@import '~@angular/material/theming'; // Plus imports for other components in your app. // Include the common styles for Angular Material. We include this here so that you only // have to load a single css file for Angular Material in your app. // Be sure that you only ever include this mixin once! -@include mat-core(); +@include mat.core(); // Define the palettes for your theme using the Material Design palettes available in palette.scss // (imported above). For each palette, you can optionally specify a default, lighter, and darker // hue. Available color palettes: https://material.io/design/color/ -$wgenerator-primary: mat-palette($mat-indigo); -$wgenerator-accent: mat-palette($mat-pink, A200, A100, A400); +$wgenerator-primary: mat.define-palette(mat.$indigo-palette); +$wgenerator-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400); // The warn palette is optional (defaults to red). -$wgenerator-warn: mat-palette($mat-red); +$wgenerator-warn: mat.define-palette(mat.$red-palette); // Create the theme object (a Sass map containing all of the palettes). -$wgenerator-theme: mat-light-theme($wgenerator-primary, $wgenerator-accent, $wgenerator-warn); +$wgenerator-theme: mat.define-light-theme($wgenerator-primary, $wgenerator-accent, $wgenerator-warn); // Include theme styles for core and each component used in your app. // Alternatively, you can import and @include the theme mixins for each component // that you are using. -@include angular-material-theme($wgenerator-theme); +@include mat.all-component-themes($wgenerator-theme); // Custom Theming for Angular Material // For more information: https://material.angular.io/guide/theming -@import '~@angular/material/theming'; // Plus imports for other components in your app. // Include the common styles for Angular Material. We include this here so that you only // have to load a single css file for Angular Material in your app. // Be sure that you only ever include this mixin once! -@include mat-core(); +@include mat.core(); // Define the palettes for your theme using the Material Design palettes available in palette.scss // (imported above). For each palette, you can optionally specify a default, lighter, and darker // hue. Available color palettes: https://material.io/design/color/ -$wgenerator-primary: mat-palette($mat-indigo); -$wgenerator-accent: mat-palette($mat-pink, A200, A100, A400); +$wgenerator-primary: mat.define-palette(mat.$indigo-palette); +$wgenerator-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400); // The warn palette is optional (defaults to red). -$wgenerator-warn: mat-palette($mat-red); +$wgenerator-warn: mat.define-palette(mat.$red-palette); // Create the theme object (a Sass map containing all of the palettes). -$wgenerator-theme: mat-light-theme($wgenerator-primary, $wgenerator-accent, $wgenerator-warn); +$wgenerator-theme: mat.define-light-theme($wgenerator-primary, $wgenerator-accent, $wgenerator-warn); // Include theme styles for core and each component used in your app. // Alternatively, you can import and @include the theme mixins for each component // that you are using. -@include angular-material-theme($wgenerator-theme); +@include mat.all-component-themes($wgenerator-theme); // Custom Theming for Angular Material // For more information: https://material.angular.io/guide/theming -@import '~@angular/material/theming'; // Plus imports for other components in your app. // Include the common styles for Angular Material. We include this here so that you only // have to load a single css file for Angular Material in your app. // Be sure that you only ever include this mixin once! -@include mat-core(); +@include mat.core(); // Define the palettes for your theme using the Material Design palettes available in palette.scss // (imported above). For each palette, you can optionally specify a default, lighter, and darker // hue. Available color palettes: https://material.io/design/color/ -$wgenerator-primary: mat-palette($mat-indigo); -$wgenerator-accent: mat-palette($mat-pink, A200, A100, A400); +$wgenerator-primary: mat.define-palette(mat.$indigo-palette); +$wgenerator-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400); // The warn palette is optional (defaults to red). -$wgenerator-warn: mat-palette($mat-red); +$wgenerator-warn: mat.define-palette(mat.$red-palette); // Create the theme object (a Sass map containing all of the palettes). -$wgenerator-theme: mat-light-theme($wgenerator-primary, $wgenerator-accent, $wgenerator-warn); +$wgenerator-theme: mat.define-light-theme($wgenerator-primary, $wgenerator-accent, $wgenerator-warn); // Include theme styles for core and each component used in your app. // Alternatively, you can import and @include the theme mixins for each component // that you are using. -@include angular-material-theme($wgenerator-theme); +@include mat.all-component-themes($wgenerator-theme);