Added Angular Material.
This commit is contained in:
@ -27,6 +27,8 @@
|
||||
}
|
||||
],
|
||||
"styles": [
|
||||
"src/custom-theme.scss",
|
||||
"./node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css",
|
||||
"src/styles.css"
|
||||
],
|
||||
"scripts": [],
|
||||
|
2
frontend/angular-seshat/package-lock.json
generated
2
frontend/angular-seshat/package-lock.json
generated
@ -9,6 +9,7 @@
|
||||
"version": "0.0.0",
|
||||
"dependencies": {
|
||||
"@angular/animations": "^18.0.0",
|
||||
"@angular/cdk": "^18.2.14",
|
||||
"@angular/common": "^18.0.0",
|
||||
"@angular/compiler": "^18.0.0",
|
||||
"@angular/core": "^18.0.0",
|
||||
@ -473,7 +474,6 @@
|
||||
"resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-18.2.14.tgz",
|
||||
"integrity": "sha512-vDyOh1lwjfVk9OqoroZAP8pf3xxKUvyl+TVR8nJxL4c5fOfUFkD7l94HaanqKSRwJcI2xiztuu92IVoHn8T33Q==",
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"tslib": "^2.3.0"
|
||||
},
|
||||
|
@ -12,6 +12,7 @@
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"@angular/animations": "^18.0.0",
|
||||
"@angular/cdk": "^18.2.14",
|
||||
"@angular/common": "^18.0.0",
|
||||
"@angular/compiler": "^18.0.0",
|
||||
"@angular/core": "^18.0.0",
|
||||
@ -44,4 +45,4 @@
|
||||
"ng-packagr": "^18.2.0",
|
||||
"typescript": "~5.4.2"
|
||||
}
|
||||
}
|
||||
}
|
@ -5,6 +5,7 @@ import { provideClientHydration } from '@angular/platform-browser';
|
||||
import { provideHttpClient, withInterceptorsFromDi, withFetch, HTTP_INTERCEPTORS } from '@angular/common/http';
|
||||
import { LoadingInterceptor } from './shared/interceptors/loading.interceptor';
|
||||
import { TokenValidationInterceptor } from './shared/interceptors/token-validation.interceptor';
|
||||
import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
|
||||
|
||||
export const appConfig: ApplicationConfig = {
|
||||
providers: [
|
||||
@ -17,5 +18,6 @@ export const appConfig: ApplicationConfig = {
|
||||
),
|
||||
LoadingInterceptor,
|
||||
TokenValidationInterceptor,
|
||||
provideAnimationsAsync(),
|
||||
]
|
||||
};
|
||||
|
36
frontend/angular-seshat/src/custom-theme.scss
Normal file
36
frontend/angular-seshat/src/custom-theme.scss
Normal file
@ -0,0 +1,36 @@
|
||||
|
||||
// Custom Theming for Angular Material
|
||||
// For more information: https://material.angular.io/guide/theming
|
||||
@use '@angular/material' as mat;
|
||||
// Plus imports for other components in your app.
|
||||
|
||||
// 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();
|
||||
|
||||
// Define the theme object.
|
||||
$angular-seshat-theme: mat.define-theme((
|
||||
color: (
|
||||
theme-type: light,
|
||||
primary: mat.$azure-palette,
|
||||
tertiary: mat.$blue-palette,
|
||||
),
|
||||
density: (
|
||||
scale: 0,
|
||||
)
|
||||
));
|
||||
|
||||
// Include theme styles for core and each component used in your app.
|
||||
// Alternatively, you can import and @include the theme mixins for each component
|
||||
// that you are using.
|
||||
:root {
|
||||
@include mat.all-component-themes($angular-seshat-theme);
|
||||
}
|
||||
|
||||
// Comment out the line below if you want to use the pre-defined typography utility classes.
|
||||
// For more information: https://material.angular.io/guide/typography#using-typography-styles-in-your-application.
|
||||
// @include mat.typography-hierarchy($angular-seshat-theme);
|
||||
|
||||
// Comment out the line below if you want to use the deprecated `color` inputs.
|
||||
// @include mat.color-variants-backwards-compatibility($angular-seshat-theme);
|
@ -6,8 +6,10 @@
|
||||
<base href="/">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="icon" type="image/x-icon" href="favicon.ico">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<body class="mat-typography">
|
||||
<app-root></app-root>
|
||||
</body>
|
||||
</html>
|
||||
|
@ -2,4 +2,6 @@
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
html, body { height: 100%; }
|
||||
body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }
|
||||
|
Reference in New Issue
Block a user