ygrette
/
Digitalisation_EPA_Client
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Update material

Browse Source
upgradeTo12
VANNEAU 3 years ago
parent 8d153cf4c1
commit 86c6ae0734
4 changed files with 41 additions and 28 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 28
      package-lock.json
  2. 4
      package.json
  3. 33
      src/app/app.theme.scss
  4. 4
      src/styles.scss

28
package-lock.json generated
Unescape View File

@ -425,12 +425,12 @@
} }
}, },
"@angular/cdk": { "@angular/cdk": {
"version": "11.1.2", "version": "12.2.12",
"resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-11.1.2.tgz", "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-12.2.12.tgz",
"integrity": "sha512-RnKvMWAIcWbWoUdBfAoOs4pQl6t5O+1OuPlBNK5aL2FYqoLv5U0fP88Rf7OhjPlD0ASsPGLG45t+dA5sUVZ46Q==", "integrity": "sha512-AK+74JZP95BDj9OJ1YUaRqPXkgs+oadTk7z+8omu1RcvDoUivouKxgODCQX5jI7rZeQIlnV49hEgBne07hYk4A==",
"requires": { "requires": {
"parse5": "^5.0.0", "parse5": "^5.0.0",
"tslib": "^2.0.0" "tslib": "^2.2.0"
}, },
"dependencies": { "dependencies": {
"parse5": { "parse5": {
@ -438,6 +438,11 @@
"resolved": "https://registry.npmjs.org/parse5/-/parse5-5.1.1.tgz", "resolved": "https://registry.npmjs.org/parse5/-/parse5-5.1.1.tgz",
"integrity": "sha512-ugq4DFI0Ptb+WWjAdOK16+u/nHfiIrcE+sh8kZMaM0WllQKLI9rOUq6c2b7cwPkXdzfQESqvoqK6ug7U/Yyzug==", "integrity": "sha512-ugq4DFI0Ptb+WWjAdOK16+u/nHfiIrcE+sh8kZMaM0WllQKLI9rOUq6c2b7cwPkXdzfQESqvoqK6ug7U/Yyzug==",
"optional": true "optional": true
},
"tslib": {
"version": "2.3.1",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.1.tgz",
"integrity": "sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw=="
} }
} }
}, },
@ -680,11 +685,18 @@
} }
}, },
"@angular/material": { "@angular/material": {
"version": "11.1.2", "version": "12.2.12",
"resolved": "https://registry.npmjs.org/@angular/material/-/material-11.1.2.tgz", "resolved": "https://registry.npmjs.org/@angular/material/-/material-12.2.12.tgz",
"integrity": "sha512-Fyjk6LUrJ+mJmRMrnM2L4Q9pijuhLa8q1G50mUYa81OJPWnhMRlzoM2dDHpS/ibIARpBc3QA8PmF3hUgyLxgMg==", "integrity": "sha512-Fgpffplmd3KfoK9Ms34jYXRaqFYLbgXdGl250Acg7fV16LN1KTOyYm2Qs+FQuqyhuXfhePPt6Srh7VcGTLT4+g==",
"requires": { "requires": {
"tslib": "^2.0.0" "tslib": "^2.2.0"
},
"dependencies": {
"tslib": {
"version": "2.3.1",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.1.tgz",
"integrity": "sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw=="
}
} }
}, },
"@angular/platform-browser": { "@angular/platform-browser": {

4
package.json
Unescape View File

@ -14,12 +14,12 @@
"dependencies": { "dependencies": {
"@angular-material-components/datetime-picker": "^5.0.3", "@angular-material-components/datetime-picker": "^5.0.3",
"@angular/animations": "~12.2.12", "@angular/animations": "~12.2.12",
"@angular/cdk": "^11.1.2", "@angular/cdk": "^12.2.12",
"@angular/common": "~12.2.12", "@angular/common": "~12.2.12",
"@angular/compiler": "~12.2.12", "@angular/compiler": "~12.2.12",
"@angular/core": "~12.2.12", "@angular/core": "~12.2.12",
"@angular/forms": "~12.2.12", "@angular/forms": "~12.2.12",
"@angular/material": "^11.1.2", "@angular/material": "^12.2.12",
"@angular/platform-browser": "~12.2.12", "@angular/platform-browser": "~12.2.12",
"@angular/platform-browser-dynamic": "~12.2.12", "@angular/platform-browser-dynamic": "~12.2.12",
"@angular/router": "~12.2.12", "@angular/router": "~12.2.12",

33
src/app/app.theme.scss
Unescape View File

@ -1,4 +1,5 @@
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
@use '~@angular/material' as mat;
// @ Custom color maps // @ Custom color maps
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
$navy-app-theme: ( $navy-app-theme: (
@ -72,19 +73,19 @@ $apside-primary-app-theme: (
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
// Define the primary, accent and warn palettes // Define the primary, accent and warn palettes
$default-primary-palette: mat-palette($navy-app-theme); $default-primary-palette: mat.define-palette($navy-app-theme);
$default-accent-palette: mat-palette($mat-light-blue, 600, 400, 700); $default-accent-palette: mat.define-palette(mat.$light-blue-palette, 600, 400, 700);
$default-warn-palette: mat-palette($mat-red); $default-warn-palette: mat.define-palette(mat.$red-palette);
// Create the Material theme object // Create the Material theme object
$theme: mat-light-theme($default-primary-palette, $default-accent-palette, $default-warn-palette); $theme: mat.define-light-theme($default-primary-palette, $default-accent-palette, $default-warn-palette);
// Add ".theme-default" class to the body to activate this theme. // Add ".theme-default" class to the body to activate this theme.
// Class name must start with "theme-" !!! // Class name must start with "theme-" !!!
.theme-default { .theme-default {
// Create an Angular Material theme from the $theme map // Create an Angular Material theme from the $theme map
@include angular-material-theme($theme); @include mat.all-component-themes($theme);
} }
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
@ -92,19 +93,19 @@ $theme: mat-light-theme($default-primary-palette, $default-accent-palette, $defa
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
// Define the primary, accent and warn palettes // Define the primary, accent and warn palettes
$blue-gray-dark-theme-primary-palette: mat-palette($navy-app-theme); $blue-gray-dark-theme-primary-palette: mat.define-palette($navy-app-theme);
$blue-gray-dark-theme-accent-palette: mat-palette($mat-blue-gray); $blue-gray-dark-theme-accent-palette: mat.define-palette(mat.$blue-gray-palette);
$blue-gray-dark-theme-warn-palette: mat-palette($mat-red); $blue-gray-dark-theme-warn-palette: mat.define-palette(mat.$red-palette);
// Create the Material theme object // Create the Material theme object
$blue-gray-dark-theme: mat-dark-theme($blue-gray-dark-theme-primary-palette, $blue-gray-dark-theme-accent-palette, $blue-gray-dark-theme-warn-palette); $blue-gray-dark-theme: mat.define-dark-theme($blue-gray-dark-theme-primary-palette, $blue-gray-dark-theme-accent-palette, $blue-gray-dark-theme-warn-palette);
// Add ".theme-blue-gray-dark" class to the body to activate this theme. // Add ".theme-blue-gray-dark" class to the body to activate this theme.
// Class name must start with "theme-" !!! // Class name must start with "theme-" !!!
.theme-blue-gray-dark { .theme-blue-gray-dark {
// Generate the Angular Material theme // Generate the Angular Material theme
@include angular-material-theme($blue-gray-dark-theme); @include mat.all-component-themes($blue-gray-dark-theme);
} }
@ -113,13 +114,13 @@ $blue-gray-dark-theme: mat-dark-theme($blue-gray-dark-theme-primary-palette, $bl
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
// Angular Material typography // Angular Material typography
$typography: mat-typography-config( $typography: mat.define-typography-config(
$font-family: 'Muli, Helvetica Neue, Arial, sans-serif', $font-family: 'Muli, Helvetica Neue, Arial, sans-serif',
$title: mat-typography-level(20px, 32px, 600), $title: mat.define-typography-level(20px, 32px, 600),
$body-2: mat-typography-level(14px, 24px, 600), $body-2: mat.define-typography-level(14px, 24px, 600),
$button: mat-typography-level(14px, 14px, 600), $button: mat.define-typography-level(14px, 14px, 600),
$input: mat-typography-level(16px, 1.125, 400) // line-height must be unitless !!! $input: mat.define-typography-level(16px, 1.125, 400) // line-height must be unitless !!!
); );
// Setup the typography // Setup the typography
@include angular-material-typography($typography); @include mat.all-component-typographies($typography);

4
src/styles.scss
Unescape View File

@ -1,5 +1,5 @@
@import '~@angular/material/theming'; @use '~@angular/material' as mat;
@include mat-core(); @include mat.core();
// Import app.theme.scss // Import app.theme.scss
@import "app/app.theme"; @import "app/app.theme";

Write Preview
Loading…
Cancel
Save