mirror of
https://github.com/richard-loafle/fuse-angular.git
synced 2024-10-30 01:08:47 +00:00
(dependencies) Updated Angular Material to v12.0.0
This commit is contained in:
parent
6a86deaeec
commit
f4ca06a9a8
24
package-lock.json
generated
24
package-lock.json
generated
|
@ -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": {
|
||||
|
|
|
@ -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",
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue
Block a user