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

View File

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

View File

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