(dependencies) Updated Angular Material to v12.0.0

This commit is contained in:
sercan 2021-05-14 14:15:14 +03:00
parent 6a86deaeec
commit f4ca06a9a8
3 changed files with 29 additions and 46 deletions

24
package-lock.json generated
View File

@ -361,12 +361,12 @@
} }
}, },
"@angular/cdk": { "@angular/cdk": {
"version": "11.2.11", "version": "12.0.0",
"resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-11.2.11.tgz", "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-12.0.0.tgz",
"integrity": "sha512-INDyO6Vh4WjsWkYAeZN39B4wTs+VqoAcTGdVBA39uij6wdu00ufr7pPRHtjAoNgrOWjEd/SCgDaUMcFEZ2+lcg==", "integrity": "sha512-Ij1wNlufbwH2R3zVwkiJgrI0Oc4+yuveEFWMnckcZ7t6E3drmeS1/YeHSbYlWau+fglWs7LtJWC4dEIpGymvzg==",
"requires": { "requires": {
"parse5": "^5.0.0", "parse5": "^5.0.0",
"tslib": "^2.0.0" "tslib": "^2.1.0"
} }
}, },
"@angular/cli": { "@angular/cli": {
@ -547,19 +547,19 @@
"dev": true "dev": true
}, },
"@angular/material": { "@angular/material": {
"version": "11.2.11", "version": "12.0.0",
"resolved": "https://registry.npmjs.org/@angular/material/-/material-11.2.11.tgz", "resolved": "https://registry.npmjs.org/@angular/material/-/material-12.0.0.tgz",
"integrity": "sha512-B9uehF/TCaH6+nCY3+S8GxSHzFbk1OD4djzyBcSNsLnwtY3UYSCT9j/J05cAahpCSUPxCWkj4MfgnhtduLmMgA==", "integrity": "sha512-ToWfr4ge2ZINLBtUQOseGm7mzscLMsrKLWYM0HzfVL9lkm6EtfTlReZV84DEzDf6/htky41t9nY5SBPWs2dtug==",
"requires": { "requires": {
"tslib": "^2.0.0" "tslib": "^2.1.0"
} }
}, },
"@angular/material-moment-adapter": { "@angular/material-moment-adapter": {
"version": "11.2.11", "version": "12.0.0",
"resolved": "https://registry.npmjs.org/@angular/material-moment-adapter/-/material-moment-adapter-11.2.11.tgz", "resolved": "https://registry.npmjs.org/@angular/material-moment-adapter/-/material-moment-adapter-12.0.0.tgz",
"integrity": "sha512-0dz7Mgiel6ZWBkGUXtF/OBZqJgmuCSlCJXXNU7ntgqx+IGnMeM7q+yVf86ybvj+q92FdjYW35ALRq+YftpqlSw==", "integrity": "sha512-KHj28LoEp+LAhu8ohm4RO4ox7yYSO2e3eMYHF2IlX1lZ9k/g62tMbB01QffqroZuHelNdja3aGH0mnwrXUiH4g==",
"requires": { "requires": {
"tslib": "^2.0.0" "tslib": "^2.1.0"
} }
}, },
"@angular/platform-browser": { "@angular/platform-browser": {

View File

@ -13,13 +13,13 @@
}, },
"dependencies": { "dependencies": {
"@angular/animations": "12.0.0", "@angular/animations": "12.0.0",
"@angular/cdk": "11.2.11", "@angular/cdk": "12.0.0",
"@angular/common": "12.0.0", "@angular/common": "12.0.0",
"@angular/compiler": "12.0.0", "@angular/compiler": "12.0.0",
"@angular/core": "12.0.0", "@angular/core": "12.0.0",
"@angular/forms": "12.0.0", "@angular/forms": "12.0.0",
"@angular/material": "11.2.11", "@angular/material": "12.0.0",
"@angular/material-moment-adapter": "11.2.11", "@angular/material-moment-adapter": "12.0.0",
"@angular/platform-browser": "12.0.0", "@angular/platform-browser": "12.0.0",
"@angular/platform-browser-dynamic": "12.0.0", "@angular/platform-browser-dynamic": "12.0.0",
"@angular/router": "12.0.0", "@angular/router": "12.0.0",

View File

@ -1,23 +1,20 @@
@use '~@angular/material' as mat;
@use "sass:map"; @use "sass:map";
@import '~@angular/material/theming';
/** Include the core Angular Material styles */ /** Include the core Angular Material styles */
@include mat-core(); @include mat.core();
/** Configure the Angular Material typography */ /** Configure the Angular Material typography */
@include angular-material-typography( @include mat.all-component-typographies(
mat-typography-config( mat.define-typography-config(
$font-family: theme('fontFamily.sans'), $font-family: theme('fontFamily.sans'),
$title: mat-typography-level(1.25rem, 2rem, 600), $title: mat.define-typography-level(1.25rem, 2rem, 600),
$body-2: mat-typography-level(0.875rem, 1.5rem, 600), $body-2: mat.define-typography-level(0.875rem, 1.5rem, 600),
$button: mat-typography-level(0.875rem, 0.875rem, 500), $button: mat.define-typography-level(0.875rem, 0.875rem, 500),
$input: mat-typography-level(0.875rem, 1.2857142857, 400) // line-height: 20px $input: mat.define-typography-level(0.875rem, 1.2857142857, 400) // line-height: 20px
) )
); );
/** Configure the Angular Material density **/
@include angular-material-density(-2);
/** Prepare the Background and Foreground maps */ /** Prepare the Background and Foreground maps */
$background-light: ( $background-light: (
status-bar: #CBD5E1, /* blueGray.300 */ status-bar: #CBD5E1, /* blueGray.300 */
@ -135,7 +132,7 @@ $palettes: ();
CSS Custom Properties to dynamically switch the colors. */ CSS Custom Properties to dynamically switch the colors. */
body.light, body.light,
body .light { body .light {
$base-light-theme: mat-light-theme(( $base-light-theme: mat.define-light-theme((
color: ($palettes) color: ($palettes)
)); ));
@ -148,22 +145,15 @@ body .light {
foreground: $foreground-light, foreground: $foreground-light,
background: $background-light background: $background-light
), ),
typography: null, density: -2
density: null,
primary: map.get(map.get($base-light-theme, color), primary),
accent: map.get(map.get($base-light-theme, color), accent),
warn: map.get(map.get($base-light-theme, color), warn),
is-dark: map.get(map.get($base-light-theme, color), is-dark),
foreground: $foreground-light,
background: $background-light
); );
@include angular-material-theme($light-theme); @include mat.all-component-themes($light-theme);
} }
body.dark, body.dark,
body .dark { body .dark {
$base-dark-theme: mat-dark-theme(( $base-dark-theme: mat.define-dark-theme((
color: ($palettes) color: ($palettes)
)); ));
@ -176,15 +166,8 @@ body .dark {
foreground: $foreground-dark, foreground: $foreground-dark,
background: $background-dark background: $background-dark
), ),
typography: null, density: -2
density: null,
primary: map.get(map.get($base-dark-theme, color), primary),
accent: map.get(map.get($base-dark-theme, color), accent),
warn: map.get(map.get($base-dark-theme, color), warn),
is-dark: map.get(map.get($base-dark-theme, color), is-dark),
foreground: $foreground-dark,
background: $background-dark
); );
@include angular-material-theme($dark-theme); @include mat.all-component-colors($dark-theme);
} }