Updated angular material

pull/558/head
Isaac Abadi 3 years ago
parent ed5f910c33
commit 2459403b22

28
package-lock.json generated

@ -437,18 +437,18 @@
}
},
"@angular/cdk": {
"version": "11.0.2",
"resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-11.0.2.tgz",
"integrity": "sha512-hdZ9UJVGgCFhdOuB4RPS1Ku45VSG/WfRjbyxu/7teYyFKqAvcd3vawkeQfZf+lExmFaeW43+5hnpu/JIlGTrSA==",
"version": "12.2.13",
"resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-12.2.13.tgz",
"integrity": "sha512-zSKRhECyFqhingIeyRInIyTvYErt4gWo+x5DQr0b7YLUbU8DZSwWnG4w76Ke2s4U8T7ry1jpJBHoX/e8YBpGMg==",
"requires": {
"parse5": "^5.0.0",
"tslib": "^2.0.0"
"tslib": "^2.2.0"
},
"dependencies": {
"tslib": {
"version": "2.0.3",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.0.3.tgz",
"integrity": "sha512-uZtkfKblCEQtZKBF6EBXVZeQNl82yqtDQdv+eck8u7tdPxjLu2/lp5/uPW+um2tpuxINHWy3GhiccY7QgEaVHQ=="
"version": "2.4.0",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz",
"integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ=="
}
}
},
@ -813,17 +813,17 @@
}
},
"@angular/material": {
"version": "11.0.2",
"resolved": "https://registry.npmjs.org/@angular/material/-/material-11.0.2.tgz",
"integrity": "sha512-qmLxrIcbbowXrE0+ZiGA/RXfaZTtVKtgLchn7GvI+R5DZ79g5IicTPxayzQavLJSTESX19JTjlByRSGiXJstgA==",
"version": "12.2.13",
"resolved": "https://registry.npmjs.org/@angular/material/-/material-12.2.13.tgz",
"integrity": "sha512-6g2GyN4qp2D+DqY2AwrQuPB3cd9gybvQVXvNRbTPXEulHr+LgGei00ySdFHFp6RvdGSMZ4i3LM1Fq3VkFxhCfQ==",
"requires": {
"tslib": "^2.0.0"
"tslib": "^2.2.0"
},
"dependencies": {
"tslib": {
"version": "2.0.3",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.0.3.tgz",
"integrity": "sha512-uZtkfKblCEQtZKBF6EBXVZeQNl82yqtDQdv+eck8u7tdPxjLu2/lp5/uPW+um2tpuxINHWy3GhiccY7QgEaVHQ=="
"version": "2.4.0",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz",
"integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ=="
}
}
},

@ -22,13 +22,13 @@
"dependencies": {
"@angular-devkit/core": "^12.2.17",
"@angular/animations": "^12.2.16",
"@angular/cdk": "^11.0.2",
"@angular/cdk": "^12.2.13",
"@angular/common": "^12.2.16",
"@angular/compiler": "^12.2.16",
"@angular/core": "^12.2.16",
"@angular/forms": "^12.2.16",
"@angular/localize": "^12.2.16",
"@angular/material": "^11.0.2",
"@angular/material": "^12.2.13",
"@angular/platform-browser": "^12.2.16",
"@angular/platform-browser-dynamic": "^12.2.16",
"@angular/router": "^12.2.16",

@ -1,4 +1,5 @@
/* You can add global styles to this file, and also import other style files */
@use '~@angular/material' as mat;
@import '~material-icons/iconfont/material-icons.css';
@ -16,30 +17,30 @@ body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }
// Plus imports for other components in your app.
/*// Typography
$custom-typography: mat-typography-config(
$custom-typography: mat.define-typography-config(
$font-family: Raleway,
$headline: mat-typography-level(24px, 48px, 400),
$body-1: mat-typography-level(16px, 24px, 400)
$headline: mat.define-typography-level(24px, 48px, 400),
$body-1: mat.define-typography-level(16px, 24px, 400)
);
@include angular-material-typography($custom-typography);
@include mat.all-component-typographies($custom-typography);
*/
// Default colors
$my-app-primary: mat-palette($mat-light-blue, 700, 100, 800);
$my-app-accent: mat-palette($mat-blue, 700, 100, 800);
$my-app-warn: mat-palette($mat-red, 700, 100, 800);
$my-app-primary: mat.define-palette(mat.$light-blue-palette, 700, 100, 800);
$my-app-accent: mat.define-palette(mat.$blue-palette, 700, 100, 800);
$my-app-warn: mat.define-palette(mat.$red-palette, 700, 100, 800);
$my-app-theme: mat-light-theme($my-app-primary, $my-app-accent, $my-app-warn);
@include angular-material-theme($my-app-theme);
$my-app-theme: mat.define-light-theme($my-app-primary, $my-app-accent, $my-app-warn);
@include mat.all-component-themes($my-app-theme);
// Dark theme
$dark-primary: mat-palette($mat-light-blue, 700, 100, 800);
$dark-accent: mat-palette($mat-blue);
$dark-warn: mat-palette($mat-deep-orange);
$dark-primary: mat.define-palette(mat.$light-blue-palette, 700, 100, 800);
$dark-accent: mat.define-palette(mat.$blue-palette);
$dark-warn: mat.define-palette(mat.$deep-orange-palette);
$dark-theme: mat-dark-theme($dark-primary, $dark-accent, $dark-warn);
$dark-theme: mat.define-dark-theme($dark-primary, $dark-accent, $dark-warn);
.dark-theme {
@include angular-material-theme($dark-theme);
@include mat.all-component-themes($dark-theme);
}
.mat-stroked-button, .mat-raised-button, .mat-flat-button {
@ -47,14 +48,14 @@ $dark-theme: mat-dark-theme($dark-primary, $dark-accent, $dark-warn);
}
// Light theme
$light-primary: mat-palette($mat-grey, 200, 500, 300);
$light-accent: mat-palette($mat-brown, 200);
$light-warn: mat-palette($mat-deep-orange, 200);
$light-primary: mat.define-palette(mat.$grey-palette, 200, 500, 300);
$light-accent: mat.define-palette(mat.$brown-palette, 200);
$light-warn: mat.define-palette(mat.$deep-orange-palette, 200);
$light-theme: mat-light-theme($light-primary, $light-accent, $light-warn);
$light-theme: mat.define-light-theme($light-primary, $light-accent, $light-warn);
.light-theme {
@include angular-material-theme($light-theme);
@include mat.all-component-themes($light-theme);
}
.no-outline {
@ -65,7 +66,7 @@ $light-theme: mat-light-theme($light-primary, $light-accent, $light-warn);
// 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();
// @import '../node_modules/@angular/material/theming';

Loading…
Cancel
Save