creating button, cards and tooltip
This commit is contained in:
MastersGame
12
projects/qd-design-demo/src/app/app.config.server.ts
Normal file
12
projects/qd-design-demo/src/app/app.config.server.ts
Normal file
@@ -0,0 +1,12 @@
|
||||
import { mergeApplicationConfig, ApplicationConfig } from '@angular/core';
|
||||
import { provideServerRendering, withRoutes } from '@angular/ssr';
|
||||
import { appConfig } from './app.config';
|
||||
import { serverRoutes } from './app.routes.server';
|
||||
|
||||
const serverConfig: ApplicationConfig = {
|
||||
providers: [
|
||||
provideServerRendering(withRoutes(serverRoutes))
|
||||
]
|
||||
};
|
||||
|
||||
export const config = mergeApplicationConfig(appConfig, serverConfig);
|
||||
13
projects/qd-design-demo/src/app/app.config.ts
Normal file
13
projects/qd-design-demo/src/app/app.config.ts
Normal file
@@ -0,0 +1,13 @@
|
||||
import { ApplicationConfig, provideBrowserGlobalErrorListeners, provideZonelessChangeDetection } from '@angular/core';
|
||||
import { provideRouter } from '@angular/router';
|
||||
|
||||
import { routes } from './app.routes';
|
||||
import { provideClientHydration, withEventReplay } from '@angular/platform-browser';
|
||||
|
||||
export const appConfig: ApplicationConfig = {
|
||||
providers: [
|
||||
provideBrowserGlobalErrorListeners(),
|
||||
provideZonelessChangeDetection(),
|
||||
provideRouter(routes), provideClientHydration(withEventReplay())
|
||||
]
|
||||
};
|
||||
497
projects/qd-design-demo/src/app/app.css
Normal file
497
projects/qd-design-demo/src/app/app.css
Normal file
@@ -0,0 +1,497 @@
|
||||
/* You can add global styles to this file, and also import other styles files */
|
||||
@import url("https://fonts.googleapis.com/icon?family=Material+Icons");
|
||||
:root {
|
||||
/* body - large */
|
||||
--md-sys-typescale-body-large-font-family-name: Roboto;
|
||||
--md-sys-typescale-body-large-font-family-style: Regular;
|
||||
--md-sys-typescale-body-large-font-size: 18px;
|
||||
--md-sys-typescale-body-large-font-weight: 400px;
|
||||
--md-sys-typescale-body-large-letter-spacing: 0.50px;
|
||||
--md-sys-typescale-body-large-line-height: 22px;
|
||||
/* body - medium */
|
||||
--md-sys-typescale-body-medium-font-family-name: Roboto;
|
||||
--md-sys-typescale-body-medium-font-family-style: Regular;
|
||||
--md-sys-typescale-body-medium-font-size: 16px;
|
||||
--md-sys-typescale-body-medium-font-weight: 400px;
|
||||
--md-sys-typescale-body-medium-letter-spacing: 0.25px;
|
||||
--md-sys-typescale-body-medium-line-height: 20px;
|
||||
/* body - small */
|
||||
--md-sys-typescale-body-small-font-family-name: Roboto;
|
||||
--md-sys-typescale-body-small-font-family-style: Regular;
|
||||
--md-sys-typescale-body-small-font-size: 14px;
|
||||
--md-sys-typescale-body-small-font-weight: 400px;
|
||||
--md-sys-typescale-body-small-letter-spacing: 0.40px;
|
||||
--md-sys-typescale-body-small-line-height: 18px;
|
||||
/* display - large */
|
||||
--md-sys-typescale-display-large-font-family-name: Roboto;
|
||||
--md-sys-typescale-display-large-font-family-style: Regular;
|
||||
--md-sys-typescale-display-large-font-size: 51px;
|
||||
--md-sys-typescale-display-large-font-weight: 400px;
|
||||
--md-sys-typescale-display-large-letter-spacing: -0.25px;
|
||||
--md-sys-typescale-display-large-line-height: 61px;
|
||||
/* display - medium */
|
||||
--md-sys-typescale-display-medium-font-family-name: Roboto;
|
||||
--md-sys-typescale-display-medium-font-family-style: Regular;
|
||||
--md-sys-typescale-display-medium-font-size: 42px;
|
||||
--md-sys-typescale-display-medium-font-weight: 400px;
|
||||
--md-sys-typescale-display-medium-letter-spacing: 0px;
|
||||
--md-sys-typescale-display-medium-line-height: 52px;
|
||||
/* display - small */
|
||||
--md-sys-typescale-display-small-font-family-name: Roboto;
|
||||
--md-sys-typescale-display-small-font-family-style: Regular;
|
||||
--md-sys-typescale-display-small-font-size: 40px;
|
||||
--md-sys-typescale-display-small-font-weight: 400px;
|
||||
--md-sys-typescale-display-small-letter-spacing: 0px;
|
||||
--md-sys-typescale-display-small-line-height: 50px;
|
||||
/* headline - large */
|
||||
--md-sys-typescale-headline-large-font-family-name: Roboto;
|
||||
--md-sys-typescale-headline-large-font-family-style: Regular;
|
||||
--md-sys-typescale-headline-large-font-size: 36px;
|
||||
--md-sys-typescale-headline-large-font-weight: 400px;
|
||||
--md-sys-typescale-headline-large-letter-spacing: 0px;
|
||||
--md-sys-typescale-headline-large-line-height: 44px;
|
||||
/* headline - medium */
|
||||
--md-sys-typescale-headline-medium-font-family-name: Roboto;
|
||||
--md-sys-typescale-headline-medium-font-family-style: Regular;
|
||||
--md-sys-typescale-headline-medium-font-size: 32px;
|
||||
--md-sys-typescale-headline-medium-font-weight: 400px;
|
||||
--md-sys-typescale-headline-medium-letter-spacing: 0px;
|
||||
--md-sys-typescale-headline-medium-line-height: 36px;
|
||||
/* headline - small */
|
||||
--md-sys-typescale-headline-small-font-family-name: Roboto;
|
||||
--md-sys-typescale-headline-small-font-family-style: Regular;
|
||||
--md-sys-typescale-headline-small-font-size: 28px;
|
||||
--md-sys-typescale-headline-small-font-weight: 400px;
|
||||
--md-sys-typescale-headline-small-letter-spacing: 0px;
|
||||
--md-sys-typescale-headline-small-line-height: 36px;
|
||||
/* label - large */
|
||||
--md-sys-typescale-label-large-font-family-name: Roboto;
|
||||
--md-sys-typescale-label-large-font-family-style: Regular;
|
||||
--md-sys-typescale-label-large-font-size: 12px;
|
||||
--md-sys-typescale-label-large-font-weight: 500px;
|
||||
--md-sys-typescale-label-large-letter-spacing: 0.10px;
|
||||
--md-sys-typescale-label-large-line-height: 14px;
|
||||
/* label - medium */
|
||||
--md-sys-typescale-label-medium-font-family-name: Roboto;
|
||||
--md-sys-typescale-label-medium-font-family-style: Regular;
|
||||
--md-sys-typescale-label-medium-font-size: 11px;
|
||||
--md-sys-typescale-label-medium-font-weight: 500px;
|
||||
--md-sys-typescale-label-medium-letter-spacing: 0.50px;
|
||||
--md-sys-typescale-label-medium-line-height: 15px;
|
||||
/* label - small */
|
||||
--md-sys-typescale-label-small-font-family-name: Roboto;
|
||||
--md-sys-typescale-label-small-font-family-style: Regular;
|
||||
--md-sys-typescale-label-small-font-size: 10px;
|
||||
--md-sys-typescale-label-small-font-weight: 500px;
|
||||
--md-sys-typescale-label-small-letter-spacing: 0.50px;
|
||||
--md-sys-typescale-label-small-line-height: 14px;
|
||||
/* title - large */
|
||||
--md-sys-typescale-title-large-font-family-name: Roboto;
|
||||
--md-sys-typescale-title-large-font-family-style: Regular;
|
||||
--md-sys-typescale-title-large-font-size: 25px;
|
||||
--md-sys-typescale-title-large-font-weight: 400px;
|
||||
--md-sys-typescale-title-large-letter-spacing: 0px;
|
||||
--md-sys-typescale-title-large-line-height: 31px;
|
||||
/* title - medium */
|
||||
--md-sys-typescale-title-medium-font-family-name: Roboto;
|
||||
--md-sys-typescale-title-medium-font-family-style: Regular;
|
||||
--md-sys-typescale-title-medium-font-size: 22px;
|
||||
--md-sys-typescale-title-medium-font-weight: 500px;
|
||||
--md-sys-typescale-title-medium-letter-spacing: 0.15px;
|
||||
--md-sys-typescale-title-medium-line-height: 28px;
|
||||
/* title - small */
|
||||
--md-sys-typescale-title-small-font-family-name: Roboto;
|
||||
--md-sys-typescale-title-small-font-family-style: Regular;
|
||||
--md-sys-typescale-title-small-font-size: 20px;
|
||||
--md-sys-typescale-title-small-font-weight: 500px;
|
||||
--md-sys-typescale-title-small-letter-spacing: 0.10px;
|
||||
--md-sys-typescale-title-small-line-height: 16px;
|
||||
}
|
||||
|
||||
.display-large {
|
||||
font-family: var(--md-sys-typescale-display-large-font-family-name);
|
||||
font-size: var(--md-sys-typescale-display-large-font-size);
|
||||
font-style: var(--md-sys-typescale-display-large-font-family-style);
|
||||
font-weight: var(--md-sys-typescale-display-large-font-weight);
|
||||
letter-spacing: var(--md-sys-typescale-display-large-tracking);
|
||||
line-height: var(--md-sys-typescale-display-large-line-height);
|
||||
text-decoration: var(--md-sys-typescale-display-large-text-decoration);
|
||||
text-transform: var(--md-sys-typescale-display-large-text-transform);
|
||||
}
|
||||
|
||||
.display-medium {
|
||||
font-family: var(--md-sys-typescale-display-medium-font-family-name);
|
||||
font-size: var(--md-sys-typescale-display-medium-font-size);
|
||||
font-style: var(--md-sys-typescale-display-medium-font-family-style);
|
||||
font-weight: var(--md-sys-typescale-display-medium-font-weight);
|
||||
letter-spacing: var(--md-sys-typescale-display-medium-tracking);
|
||||
line-height: var(--md-sys-typescale-display-medium-line-height);
|
||||
text-decoration: var(--md-sys-typescale-display-medium-text-decoration);
|
||||
text-transform: var(--md-sys-typescale-display-medium-text-transform);
|
||||
}
|
||||
|
||||
.display-small {
|
||||
font-family: var(--md-sys-typescale-display-small-font-family-name);
|
||||
font-size: var(--md-sys-typescale-display-small-font-size);
|
||||
font-style: var(--md-sys-typescale-display-small-font-family-style);
|
||||
font-weight: var(--md-sys-typescale-display-small-font-weight);
|
||||
letter-spacing: var(--md-sys-typescale-display-small-tracking);
|
||||
line-height: var(--md-sys-typescale-display-small-line-height);
|
||||
text-decoration: var(--md-sys-typescale-display-small-text-decoration);
|
||||
text-transform: var(--md-sys-typescale-display-small-text-transform);
|
||||
}
|
||||
|
||||
.headline-large {
|
||||
font-family: var(--md-sys-typescale-headline-large-font-family-name);
|
||||
font-size: var(--md-sys-typescale-headline-large-font-size);
|
||||
font-style: var(--md-sys-typescale-headline-large-font-family-style);
|
||||
font-weight: var(--md-sys-typescale-headline-large-font-weight);
|
||||
letter-spacing: var(--md-sys-typescale-headline-large-tracking);
|
||||
line-height: var(--md-sys-typescale-headline-large-line-height);
|
||||
text-decoration: var(--md-sys-typescale-headline-large-text-decoration);
|
||||
text-transform: var(--md-sys-typescale-headline-large-text-transform);
|
||||
}
|
||||
|
||||
.headline-medium {
|
||||
font-family: var(--md-sys-typescale-headline-medium-font-family-name);
|
||||
font-size: var(--md-sys-typescale-headline-medium-font-size);
|
||||
font-style: var(--md-sys-typescale-headline-medium-font-family-style);
|
||||
font-weight: var(--md-sys-typescale-headline-medium-font-weight);
|
||||
letter-spacing: var(--md-sys-typescale-headline-medium-tracking);
|
||||
line-height: var(--md-sys-typescale-headline-medium-line-height);
|
||||
text-decoration: var(--md-sys-typescale-headline-medium-text-decoration);
|
||||
text-transform: var(--md-sys-typescale-headline-medium-text-transform);
|
||||
}
|
||||
|
||||
.headline-small {
|
||||
font-family: var(--md-sys-typescale-headline-small-font-family-name);
|
||||
font-size: var(--md-sys-typescale-headline-small-font-size);
|
||||
font-style: var(--md-sys-typescale-headline-small-font-family-style);
|
||||
font-weight: var(--md-sys-typescale-headline-small-font-weight);
|
||||
letter-spacing: var(--md-sys-typescale-headline-small-tracking);
|
||||
line-height: var(--md-sys-typescale-headline-small-line-height);
|
||||
text-decoration: var(--md-sys-typescale-headline-small-text-decoration);
|
||||
text-transform: var(--md-sys-typescale-headline-small-text-transform);
|
||||
}
|
||||
|
||||
.body-large {
|
||||
font-family: var(--md-sys-typescale-body-large-font-family-name);
|
||||
font-size: var(--md-sys-typescale-body-large-font-size);
|
||||
font-style: var(--md-sys-typescale-body-large-font-family-style);
|
||||
font-weight: var(--md-sys-typescale-body-large-font-weight);
|
||||
letter-spacing: var(--md-sys-typescale-body-large-tracking);
|
||||
line-height: var(--md-sys-typescale-body-large-line-height);
|
||||
text-decoration: var(--md-sys-typescale-body-large-text-decoration);
|
||||
text-transform: var(--md-sys-typescale-body-large-text-transform);
|
||||
}
|
||||
|
||||
.body-medium {
|
||||
font-family: var(--md-sys-typescale-body-medium-font-family-name);
|
||||
font-size: var(--md-sys-typescale-body-medium-font-size);
|
||||
font-style: var(--md-sys-typescale-body-medium-font-family-style);
|
||||
font-weight: var(--md-sys-typescale-body-medium-font-weight);
|
||||
letter-spacing: var(--md-sys-typescale-body-medium-tracking);
|
||||
line-height: var(--md-sys-typescale-body-medium-line-height);
|
||||
text-decoration: var(--md-sys-typescale-body-medium-text-decoration);
|
||||
text-transform: var(--md-sys-typescale-body-medium-text-transform);
|
||||
}
|
||||
|
||||
.body-small {
|
||||
font-family: var(--md-sys-typescale-body-small-font-family-name);
|
||||
font-size: var(--md-sys-typescale-body-small-font-size);
|
||||
font-style: var(--md-sys-typescale-body-small-font-family-style);
|
||||
font-weight: var(--md-sys-typescale-body-small-font-weight);
|
||||
letter-spacing: var(--md-sys-typescale-body-small-tracking);
|
||||
line-height: var(--md-sys-typescale-body-small-line-height);
|
||||
text-decoration: var(--md-sys-typescale-body-small-text-decoration);
|
||||
text-transform: var(--md-sys-typescale-body-small-text-transform);
|
||||
}
|
||||
|
||||
.label-large {
|
||||
font-family: var(--md-sys-typescale-label-large-font-family-name);
|
||||
font-size: var(--md-sys-typescale-label-large-font-size);
|
||||
font-style: var(--md-sys-typescale-label-large-font-family-style);
|
||||
font-weight: var(--md-sys-typescale-label-large-font-weight);
|
||||
letter-spacing: var(--md-sys-typescale-label-large-tracking);
|
||||
line-height: var(--md-sys-typescale-label-large-line-height);
|
||||
text-decoration: var(--md-sys-typescale-label-large-text-decoration);
|
||||
text-transform: var(--md-sys-typescale-label-large-text-transform);
|
||||
}
|
||||
|
||||
.label-medium {
|
||||
font-family: var(--md-sys-typescale-label-medium-font-family-name);
|
||||
font-size: var(--md-sys-typescale-label-medium-font-size);
|
||||
font-style: var(--md-sys-typescale-label-medium-font-family-style);
|
||||
font-weight: var(--md-sys-typescale-label-medium-font-weight);
|
||||
letter-spacing: var(--md-sys-typescale-label-medium-tracking);
|
||||
line-height: var(--md-sys-typescale-label-medium-line-height);
|
||||
text-decoration: var(--md-sys-typescale-label-medium-text-decoration);
|
||||
text-transform: var(--md-sys-typescale-label-medium-text-transform);
|
||||
}
|
||||
|
||||
.label-small {
|
||||
font-family: var(--md-sys-typescale-label-small-font-family-name);
|
||||
font-size: var(--md-sys-typescale-label-small-font-size);
|
||||
font-style: var(--md-sys-typescale-label-small-font-family-style);
|
||||
font-weight: var(--md-sys-typescale-label-small-font-weight);
|
||||
letter-spacing: var(--md-sys-typescale-label-small-tracking);
|
||||
line-height: var(--md-sys-typescale-label-small-line-height);
|
||||
text-decoration: var(--md-sys-typescale-label-small-text-decoration);
|
||||
text-transform: var(--md-sys-typescale-label-small-text-transform);
|
||||
}
|
||||
|
||||
.title-large {
|
||||
font-family: var(--md-sys-typescale-title-large-font-family-name);
|
||||
font-size: var(--md-sys-typescale-title-large-font-size);
|
||||
font-style: var(--md-sys-typescale-title-large-font-family-style);
|
||||
font-weight: var(--md-sys-typescale-title-large-font-weight);
|
||||
letter-spacing: var(--md-sys-typescale-title-large-tracking);
|
||||
line-height: var(--md-sys-typescale-title-large-line-height);
|
||||
text-decoration: var(--md-sys-typescale-title-large-text-decoration);
|
||||
text-transform: var(--md-sys-typescale-title-large-text-transform);
|
||||
}
|
||||
|
||||
.title-medium {
|
||||
font-family: var(--md-sys-typescale-title-medium-font-family-name);
|
||||
font-size: var(--md-sys-typescale-title-medium-font-size);
|
||||
font-style: var(--md-sys-typescale-title-medium-font-family-style);
|
||||
font-weight: var(--md-sys-typescale-title-medium-font-weight);
|
||||
letter-spacing: var(--md-sys-typescale-title-medium-tracking);
|
||||
line-height: var(--md-sys-typescale-title-medium-line-height);
|
||||
text-decoration: var(--md-sys-typescale-title-medium-text-decoration);
|
||||
text-transform: var(--md-sys-typescale-title-medium-text-transform);
|
||||
}
|
||||
|
||||
.title-small {
|
||||
font-family: var(--md-sys-typescale-title-small-font-family-name);
|
||||
font-size: var(--md-sys-typescale-title-small-font-size);
|
||||
font-style: var(--md-sys-typescale-title-small-font-family-style);
|
||||
font-weight: var(--md-sys-typescale-title-small-font-weight);
|
||||
letter-spacing: var(--md-sys-typescale-title-small-tracking);
|
||||
line-height: var(--md-sys-typescale-title-small-line-height);
|
||||
text-decoration: var(--md-sys-typescale-title-small-text-decoration);
|
||||
text-transform: var(--md-sys-typescale-title-small-text-transform);
|
||||
}
|
||||
|
||||
.scrollable-y {
|
||||
max-height: 100%;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.height-100 {
|
||||
height: 100%;
|
||||
max-height: 100%;
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
.height-100-vh {
|
||||
height: 100vh;
|
||||
max-height: 100vh;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.width-100 {
|
||||
max-width: 100%;
|
||||
min-width: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.width-100-vw {
|
||||
max-width: 100vw;
|
||||
min-width: 100vw;
|
||||
width: 100vw;
|
||||
}
|
||||
|
||||
body {
|
||||
--md-sys-color-primary: rgb(73 93 146);
|
||||
--md-sys-color-surface-tint: rgb(73 93 146);
|
||||
--md-sys-color-on-primary: rgb(255 255 255);
|
||||
--md-sys-color-primary-container: rgb(218 225 255);
|
||||
--md-sys-color-on-primary-container: rgb(49 69 120);
|
||||
--md-sys-color-secondary: rgb(88 94 113);
|
||||
--md-sys-color-on-secondary: rgb(255 255 255);
|
||||
--md-sys-color-secondary-container: rgb(221 226 249);
|
||||
--md-sys-color-on-secondary-container: rgb(65 70 89);
|
||||
--md-sys-color-tertiary: rgb(115 84 113);
|
||||
--md-sys-color-on-tertiary: rgb(255 255 255);
|
||||
--md-sys-color-tertiary-container: rgb(255 214 249);
|
||||
--md-sys-color-on-tertiary-container: rgb(90 61 88);
|
||||
--md-sys-color-error: rgb(186 26 26);
|
||||
--md-sys-color-on-error: rgb(255 255 255);
|
||||
--md-sys-color-error-container: rgb(255 218 214);
|
||||
--md-sys-color-on-error-container: rgb(147 0 10);
|
||||
--md-sys-color-background: rgb(250 248 255);
|
||||
--md-sys-color-on-background: rgb(26 27 33);
|
||||
--md-sys-color-surface: rgb(250 248 255);
|
||||
--md-sys-color-on-surface: rgb(26 27 33);
|
||||
--md-sys-color-surface-variant: rgb(225 226 236);
|
||||
--md-sys-color-on-surface-variant: rgb(69 70 79);
|
||||
--md-sys-color-outline: rgb(117 118 128);
|
||||
--md-sys-color-outline-variant: rgb(197 198 208);
|
||||
--md-sys-color-shadow: rgb(0 0 0);
|
||||
--md-sys-color-scrim: rgb(0 0 0);
|
||||
--md-sys-color-inverse-surface: rgb(47 48 54);
|
||||
--md-sys-color-inverse-on-surface: rgb(241 240 247);
|
||||
--md-sys-color-inverse-primary: rgb(179 197 255);
|
||||
--md-sys-color-primary-fixed: rgb(218 225 255);
|
||||
--md-sys-color-on-primary-fixed: rgb(0 24 73);
|
||||
--md-sys-color-primary-fixed-dim: rgb(179 197 255);
|
||||
--md-sys-color-on-primary-fixed-variant: rgb(49 69 120);
|
||||
--md-sys-color-secondary-fixed: rgb(221 226 249);
|
||||
--md-sys-color-on-secondary-fixed: rgb(21 27 44);
|
||||
--md-sys-color-secondary-fixed-dim: rgb(193 198 221);
|
||||
--md-sys-color-on-secondary-fixed-variant: rgb(65 70 89);
|
||||
--md-sys-color-tertiary-fixed: rgb(255 214 249);
|
||||
--md-sys-color-on-tertiary-fixed: rgb(43 18 43);
|
||||
--md-sys-color-tertiary-fixed-dim: rgb(225 187 220);
|
||||
--md-sys-color-on-tertiary-fixed-variant: rgb(90 61 88);
|
||||
--md-sys-color-surface-dim: rgb(218 217 224);
|
||||
--md-sys-color-surface-bright: rgb(250 248 255);
|
||||
--md-sys-color-surface-container-lowest: rgb(255 255 255);
|
||||
--md-sys-color-surface-container-low: rgb(244 243 250);
|
||||
--md-sys-color-surface-container: rgb(238 237 244);
|
||||
--md-sys-color-surface-container-high: rgb(232 231 239);
|
||||
--md-sys-color-surface-container-highest: rgb(227 226 233);
|
||||
transition: background-color 0.3s, color 0.3s;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
body:not(.light-theme) {
|
||||
--md-sys-color-primary: rgb(179 197 255);
|
||||
--md-sys-color-surface-tint: rgb(179 197 255);
|
||||
--md-sys-color-on-primary: rgb(25 46 96);
|
||||
--md-sys-color-primary-container: rgb(49 69 120);
|
||||
--md-sys-color-on-primary-container: rgb(218 225 255);
|
||||
--md-sys-color-secondary: rgb(193 198 221);
|
||||
--md-sys-color-on-secondary: rgb(42 48 66);
|
||||
--md-sys-color-secondary-container: rgb(65 70 89);
|
||||
--md-sys-color-on-secondary-container: rgb(221 226 249);
|
||||
--md-sys-color-tertiary: rgb(225 187 220);
|
||||
--md-sys-color-on-tertiary: rgb(66 39 65);
|
||||
--md-sys-color-tertiary-container: rgb(90 61 88);
|
||||
--md-sys-color-on-tertiary-container: rgb(255 214 249);
|
||||
--md-sys-color-error: rgb(255 180 171);
|
||||
--md-sys-color-on-error: rgb(105 0 5);
|
||||
--md-sys-color-error-container: rgb(147 0 10);
|
||||
--md-sys-color-on-error-container: rgb(255 218 214);
|
||||
--md-sys-color-background: rgb(18 19 24);
|
||||
--md-sys-color-on-background: rgb(227 226 233);
|
||||
--md-sys-color-surface: rgb(18 19 24);
|
||||
--md-sys-color-on-surface: rgb(227 226 233);
|
||||
--md-sys-color-surface-variant: rgb(69 70 79);
|
||||
--md-sys-color-on-surface-variant: rgb(197 198 208);
|
||||
--md-sys-color-outline: rgb(143 144 154);
|
||||
--md-sys-color-outline-variant: rgb(69 70 79);
|
||||
--md-sys-color-shadow: rgb(0 0 0);
|
||||
--md-sys-color-scrim: rgb(0 0 0);
|
||||
--md-sys-color-inverse-surface: rgb(227 226 233);
|
||||
--md-sys-color-inverse-on-surface: rgb(47 48 54);
|
||||
--md-sys-color-inverse-primary: rgb(73 93 146);
|
||||
--md-sys-color-primary-fixed: rgb(218 225 255);
|
||||
--md-sys-color-on-primary-fixed: rgb(0 24 73);
|
||||
--md-sys-color-primary-fixed-dim: rgb(179 197 255);
|
||||
--md-sys-color-on-primary-fixed-variant: rgb(49 69 120);
|
||||
--md-sys-color-secondary-fixed: rgb(221 226 249);
|
||||
--md-sys-color-on-secondary-fixed: rgb(21 27 44);
|
||||
--md-sys-color-secondary-fixed-dim: rgb(193 198 221);
|
||||
--md-sys-color-on-secondary-fixed-variant: rgb(65 70 89);
|
||||
--md-sys-color-tertiary-fixed: rgb(255 214 249);
|
||||
--md-sys-color-on-tertiary-fixed: rgb(43 18 43);
|
||||
--md-sys-color-tertiary-fixed-dim: rgb(225 187 220);
|
||||
--md-sys-color-on-tertiary-fixed-variant: rgb(90 61 88);
|
||||
--md-sys-color-surface-dim: rgb(18 19 24);
|
||||
--md-sys-color-surface-bright: rgb(56 57 63);
|
||||
--md-sys-color-surface-container-lowest: rgb(13 14 19);
|
||||
--md-sys-color-surface-container-low: rgb(26 27 33);
|
||||
--md-sys-color-surface-container: rgb(30 31 37);
|
||||
--md-sys-color-surface-container-high: rgb(41 42 47);
|
||||
--md-sys-color-surface-container-highest: rgb(51 52 58);
|
||||
}
|
||||
}
|
||||
body.dark-theme {
|
||||
--md-sys-color-primary: rgb(179 197 255);
|
||||
--md-sys-color-surface-tint: rgb(179 197 255);
|
||||
--md-sys-color-on-primary: rgb(25 46 96);
|
||||
--md-sys-color-primary-container: rgb(49 69 120);
|
||||
--md-sys-color-on-primary-container: rgb(218 225 255);
|
||||
--md-sys-color-secondary: rgb(193 198 221);
|
||||
--md-sys-color-on-secondary: rgb(42 48 66);
|
||||
--md-sys-color-secondary-container: rgb(65 70 89);
|
||||
--md-sys-color-on-secondary-container: rgb(221 226 249);
|
||||
--md-sys-color-tertiary: rgb(225 187 220);
|
||||
--md-sys-color-on-tertiary: rgb(66 39 65);
|
||||
--md-sys-color-tertiary-container: rgb(90 61 88);
|
||||
--md-sys-color-on-tertiary-container: rgb(255 214 249);
|
||||
--md-sys-color-error: rgb(255 180 171);
|
||||
--md-sys-color-on-error: rgb(105 0 5);
|
||||
--md-sys-color-error-container: rgb(147 0 10);
|
||||
--md-sys-color-on-error-container: rgb(255 218 214);
|
||||
--md-sys-color-background: rgb(18 19 24);
|
||||
--md-sys-color-on-background: rgb(227 226 233);
|
||||
--md-sys-color-surface: rgb(18 19 24);
|
||||
--md-sys-color-on-surface: rgb(227 226 233);
|
||||
--md-sys-color-surface-variant: rgb(69 70 79);
|
||||
--md-sys-color-on-surface-variant: rgb(197 198 208);
|
||||
--md-sys-color-outline: rgb(143 144 154);
|
||||
--md-sys-color-outline-variant: rgb(69 70 79);
|
||||
--md-sys-color-shadow: rgb(0 0 0);
|
||||
--md-sys-color-scrim: rgb(0 0 0);
|
||||
--md-sys-color-inverse-surface: rgb(227 226 233);
|
||||
--md-sys-color-inverse-on-surface: rgb(47 48 54);
|
||||
--md-sys-color-inverse-primary: rgb(73 93 146);
|
||||
--md-sys-color-primary-fixed: rgb(218 225 255);
|
||||
--md-sys-color-on-primary-fixed: rgb(0 24 73);
|
||||
--md-sys-color-primary-fixed-dim: rgb(179 197 255);
|
||||
--md-sys-color-on-primary-fixed-variant: rgb(49 69 120);
|
||||
--md-sys-color-secondary-fixed: rgb(221 226 249);
|
||||
--md-sys-color-on-secondary-fixed: rgb(21 27 44);
|
||||
--md-sys-color-secondary-fixed-dim: rgb(193 198 221);
|
||||
--md-sys-color-on-secondary-fixed-variant: rgb(65 70 89);
|
||||
--md-sys-color-tertiary-fixed: rgb(255 214 249);
|
||||
--md-sys-color-on-tertiary-fixed: rgb(43 18 43);
|
||||
--md-sys-color-tertiary-fixed-dim: rgb(225 187 220);
|
||||
--md-sys-color-on-tertiary-fixed-variant: rgb(90 61 88);
|
||||
--md-sys-color-surface-dim: rgb(18 19 24);
|
||||
--md-sys-color-surface-bright: rgb(56 57 63);
|
||||
--md-sys-color-surface-container-lowest: rgb(13 14 19);
|
||||
--md-sys-color-surface-container-low: rgb(26 27 33);
|
||||
--md-sys-color-surface-container: rgb(30 31 37);
|
||||
--md-sys-color-surface-container-high: rgb(41 42 47);
|
||||
--md-sys-color-surface-container-highest: rgb(51 52 58);
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--md-sys-color-surface);
|
||||
}
|
||||
|
||||
:host {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1 1 auto;
|
||||
display: flex;
|
||||
flex: 1 1 0;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.horizontal {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
.image-wrapper {
|
||||
position: relative;
|
||||
min-width: 100px;
|
||||
width: 100%;
|
||||
aspect-ratio: 16/9;
|
||||
margin: 0;
|
||||
}
|
||||
.image-wrapper img {
|
||||
object-fit: cover;
|
||||
}
|
||||
.image-wrapper:empty {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/*# sourceMappingURL=app.css.map */
|
||||
1
projects/qd-design-demo/src/app/app.css.map
Normal file
1
projects/qd-design-demo/src/app/app.css.map
Normal file
@@ -0,0 +1 @@
|
||||
{"version":3,"sourceRoot":"","sources":["../styles.scss","../../../qd-design/src/styles/qd_design_system.scss","../../../qd-design/src/styles/typography/typography.token.scss","../../../qd-design/src/styles/typography/typography.module.scss","../../../qd-design/src/styles/design/look_and_feel.scss","../../../qd-design/src/styles/colors/light-theme.scss","../../../qd-design/src/styles/colors/dark-theme.scss","app.scss"],"names":[],"mappings":"AAAA;ACQQ;ACRR;AACE;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;;;ACzGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AClIF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AHjDF;EITE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EJpCA;;;AAGF;EACE;IKhBA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;;AL3BF;EKrBE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AN9CF;EACE;;;AOFF;EHWE;EACA,gBGX0B;EHgB1B;EGfA;EACA;EACA;;;AAGF;EHIE;EACA,gBGJ0B;EHS1B;;;AGNF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE","file":"app.css"}
|
||||
67
projects/qd-design-demo/src/app/app.html
Normal file
67
projects/qd-design-demo/src/app/app.html
Normal file
@@ -0,0 +1,67 @@
|
||||
<div class="horizontal">
|
||||
<qd-button variant="elevated" [text]="'Play'" [iconName]="'play_arrow'" (click)="onClick()"></qd-button>
|
||||
<qd-button variant="elevated" [text]="'Play'" [iconName]="'play_arrow'" (click)="onClick()" [disabled]="true"></qd-button>
|
||||
|
||||
<qd-button variant="filled" [text]="'Play'" [iconName]="'play_arrow'" (click)="onClick()"></qd-button>
|
||||
<qd-button variant="filled" [text]="'Play'" [iconName]="'play_arrow'" (click)="onClick()" [disabled]="true"></qd-button>
|
||||
|
||||
<qd-button variant="filled-tonal" [text]="'Play'" [iconName]="'play_arrow'" (click)="onClick()"></qd-button>
|
||||
<qd-button variant="filled-tonal" [text]="'Play'" [iconName]="'play_arrow'" (click)="onClick()" [disabled]="true"></qd-button>
|
||||
|
||||
<qd-button variant="outlined" [text]="'Play'" [iconName]="'play_arrow'" (click)="onClick()"></qd-button>
|
||||
<qd-button variant="outlined" [text]="'Play'" [iconName]="'play_arrow'" (click)="onClick()" [disabled]="true"></qd-button>
|
||||
|
||||
<qd-button variant="text" [text]="'Play'" [iconName]="'play_arrow'" (click)="onClick()"></qd-button>
|
||||
<qd-button variant="text" [text]="'Play'" [iconName]="'play_arrow'" (click)="onClick()" [disabled]="true"></qd-button>
|
||||
</div>
|
||||
<div class="horizontal">
|
||||
<qd-card clickable style="width: 300px" (click)="onClick()">
|
||||
<figure image class="image-wrapper">
|
||||
<img [ngSrc]="'https://i0.wp.com/www.bishoprook.com/wp-content/uploads/2021/05/placeholder-image-gray-16x9-1.png?ssl=1'" fill alt="''"/>
|
||||
</figure>
|
||||
<div class="display-large">Coucoudsqtsggsrtrqstrdsqt</div>
|
||||
<div class="body-medium">Description</div>
|
||||
</qd-card>
|
||||
<qd-card disabled clickable style="width: 300px" (click)="onClick()">
|
||||
<figure image class="image-wrapper">
|
||||
<img [ngSrc]="'https://i0.wp.com/www.bishoprook.com/wp-content/uploads/2021/05/placeholder-image-gray-16x9-1.png?ssl=1'" fill alt="''"/>
|
||||
</figure>
|
||||
<div class="display-large">Coucoudsqtsggsrtrqstrdsqt</div>
|
||||
<div class="body-medium">Description</div>
|
||||
</qd-card>
|
||||
<qd-card clickable [variant]="'elevated'" style="width: 300px" (click)="onClick()">
|
||||
<figure image class="image-wrapper">
|
||||
<img [ngSrc]="'https://i0.wp.com/www.bishoprook.com/wp-content/uploads/2021/05/placeholder-image-gray-16x9-1.png?ssl=1'" fill alt="''"/>
|
||||
</figure>
|
||||
<div class="display-large">Coucoudsqtsggsrtrqstrdsqt</div>
|
||||
<div class="body-medium">Description</div>
|
||||
</qd-card>
|
||||
<qd-card clickable disabled [variant]="'elevated'" style="width: 300px" (click)="onClick()">
|
||||
<figure image class="image-wrapper">
|
||||
<img [ngSrc]="'https://i0.wp.com/www.bishoprook.com/wp-content/uploads/2021/05/placeholder-image-gray-16x9-1.png?ssl=1'" fill alt="''"/>
|
||||
</figure>
|
||||
<div class="display-large">Coucoudsqtsggsrtrqstrdsqt</div>
|
||||
<div class="body-medium">Description</div>
|
||||
</qd-card>
|
||||
<qd-card [variant]="'outlined'" style="width: 300px">
|
||||
<figure image class="image-wrapper">
|
||||
<img [ngSrc]="'https://i0.wp.com/www.bishoprook.com/wp-content/uploads/2021/05/placeholder-image-gray-16x9-1.png?ssl=1'" fill alt="''"/>
|
||||
</figure>
|
||||
<div class="display-large">Coucoudsqtsggsrtrqstrdsqt</div>
|
||||
<div class="body-medium">Description</div>
|
||||
</qd-card>
|
||||
<qd-card clickable [variant]="'outlined'" style="width: 300px">
|
||||
<figure image class="image-wrapper">
|
||||
<img [ngSrc]="'https://i0.wp.com/www.bishoprook.com/wp-content/uploads/2021/05/placeholder-image-gray-16x9-1.png?ssl=1'" fill alt="''"/>
|
||||
</figure>
|
||||
<div class="display-large">Coucou</div>
|
||||
<div class="body-medium">Description</div>
|
||||
</qd-card>
|
||||
<qd-card disabled clickable [variant]="'outlined'" style="width: 300px">
|
||||
<figure image class="image-wrapper">
|
||||
<img [ngSrc]="'https://i0.wp.com/www.bishoprook.com/wp-content/uploads/2021/05/placeholder-image-gray-16x9-1.png?ssl=1'" fill alt="''"/>
|
||||
</figure>
|
||||
<div class="display-large">Coucoudsqtsggsrtrqstrdsqt</div>
|
||||
<div class="body-medium">Description</div>
|
||||
</qd-card>
|
||||
</div>
|
||||
8
projects/qd-design-demo/src/app/app.routes.server.ts
Normal file
8
projects/qd-design-demo/src/app/app.routes.server.ts
Normal file
@@ -0,0 +1,8 @@
|
||||
import { RenderMode, ServerRoute } from '@angular/ssr';
|
||||
|
||||
export const serverRoutes: ServerRoute[] = [
|
||||
{
|
||||
path: '**',
|
||||
renderMode: RenderMode.Prerender
|
||||
}
|
||||
];
|
||||
3
projects/qd-design-demo/src/app/app.routes.ts
Normal file
3
projects/qd-design-demo/src/app/app.routes.ts
Normal file
@@ -0,0 +1,3 @@
|
||||
import { Routes } from '@angular/router';
|
||||
|
||||
export const routes: Routes = [];
|
||||
28
projects/qd-design-demo/src/app/app.scss
Normal file
28
projects/qd-design-demo/src/app/app.scss
Normal file
@@ -0,0 +1,28 @@
|
||||
@use "../styles";
|
||||
|
||||
:host {
|
||||
@include styles.flex-fill(column);
|
||||
display: flex;
|
||||
flex: 1 1 0;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.horizontal {
|
||||
@include styles.flex-fill(row);
|
||||
}
|
||||
|
||||
.image-wrapper {
|
||||
position: relative;
|
||||
min-width: 100px;
|
||||
width: 100%;
|
||||
aspect-ratio: 16/9;
|
||||
margin: 0;
|
||||
|
||||
img {
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
&:empty {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
25
projects/qd-design-demo/src/app/app.spec.ts
Normal file
25
projects/qd-design-demo/src/app/app.spec.ts
Normal file
@@ -0,0 +1,25 @@
|
||||
import { provideZonelessChangeDetection } from '@angular/core';
|
||||
import { TestBed } from '@angular/core/testing';
|
||||
import { App } from './app';
|
||||
|
||||
describe('App', () => {
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
imports: [App],
|
||||
providers: [provideZonelessChangeDetection()]
|
||||
}).compileComponents();
|
||||
});
|
||||
|
||||
it('should create the app', () => {
|
||||
const fixture = TestBed.createComponent(App);
|
||||
const app = fixture.componentInstance;
|
||||
expect(app).toBeTruthy();
|
||||
});
|
||||
|
||||
it('should render title', () => {
|
||||
const fixture = TestBed.createComponent(App);
|
||||
fixture.detectChanges();
|
||||
const compiled = fixture.nativeElement as HTMLElement;
|
||||
expect(compiled.querySelector('h1')?.textContent).toContain('Hello, qd-design-demo');
|
||||
});
|
||||
});
|
||||
20
projects/qd-design-demo/src/app/app.ts
Normal file
20
projects/qd-design-demo/src/app/app.ts
Normal file
@@ -0,0 +1,20 @@
|
||||
import { Component, signal } from '@angular/core';
|
||||
import {QdButton} from '../../../qd-design/src/lib/qd-button/qd-button';
|
||||
import {QdButtonType} from '../../../qd-design/src/enums/qd-button-type.enum';
|
||||
import {QdCard} from '../../../qd-design/src/lib/qd-card/qd-card';
|
||||
import {NgOptimizedImage} from '@angular/common';
|
||||
|
||||
@Component({
|
||||
selector: 'app-root',
|
||||
imports: [QdButton, QdCard, NgOptimizedImage],
|
||||
templateUrl: './app.html',
|
||||
styleUrl: './app.scss'
|
||||
})
|
||||
export class App {
|
||||
protected readonly title = signal('qd-design-demo');
|
||||
protected readonly QdButtonType = QdButtonType;
|
||||
|
||||
public onClick() {
|
||||
console.log('clicked');
|
||||
}
|
||||
}
|
||||
15
projects/qd-design-demo/src/index.html
Normal file
15
projects/qd-design-demo/src/index.html
Normal file
@@ -0,0 +1,15 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>QdDesignDemo</title>
|
||||
<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/css?family=Roboto"
|
||||
rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<app-root></app-root>
|
||||
</body>
|
||||
</html>
|
||||
7
projects/qd-design-demo/src/main.server.ts
Normal file
7
projects/qd-design-demo/src/main.server.ts
Normal file
@@ -0,0 +1,7 @@
|
||||
import { bootstrapApplication } from '@angular/platform-browser';
|
||||
import { App } from './app/app';
|
||||
import { config } from './app/app.config.server';
|
||||
|
||||
const bootstrap = () => bootstrapApplication(App, config);
|
||||
|
||||
export default bootstrap;
|
||||
6
projects/qd-design-demo/src/main.ts
Normal file
6
projects/qd-design-demo/src/main.ts
Normal file
@@ -0,0 +1,6 @@
|
||||
import { bootstrapApplication } from '@angular/platform-browser';
|
||||
import { appConfig } from './app/app.config';
|
||||
import { App } from './app/app';
|
||||
|
||||
bootstrapApplication(App, appConfig)
|
||||
.catch((err) => console.error(err));
|
||||
68
projects/qd-design-demo/src/server.ts
Normal file
68
projects/qd-design-demo/src/server.ts
Normal file
@@ -0,0 +1,68 @@
|
||||
import {
|
||||
AngularNodeAppEngine,
|
||||
createNodeRequestHandler,
|
||||
isMainModule,
|
||||
writeResponseToNodeResponse,
|
||||
} from '@angular/ssr/node';
|
||||
import express from 'express';
|
||||
import { join } from 'node:path';
|
||||
|
||||
const browserDistFolder = join(import.meta.dirname, '../browser');
|
||||
|
||||
const app = express();
|
||||
const angularApp = new AngularNodeAppEngine();
|
||||
|
||||
/**
|
||||
* Example Express Rest API endpoints can be defined here.
|
||||
* Uncomment and define endpoints as necessary.
|
||||
*
|
||||
* Example:
|
||||
* ```ts
|
||||
* app.get('/api/{*splat}', (req, res) => {
|
||||
* // Handle API request
|
||||
* });
|
||||
* ```
|
||||
*/
|
||||
|
||||
/**
|
||||
* Serve static files from /browser
|
||||
*/
|
||||
app.use(
|
||||
express.static(browserDistFolder, {
|
||||
maxAge: '1y',
|
||||
index: false,
|
||||
redirect: false,
|
||||
}),
|
||||
);
|
||||
|
||||
/**
|
||||
* Handle all other requests by rendering the Angular application.
|
||||
*/
|
||||
app.use((req, res, next) => {
|
||||
angularApp
|
||||
.handle(req)
|
||||
.then((response) =>
|
||||
response ? writeResponseToNodeResponse(response, res) : next(),
|
||||
)
|
||||
.catch(next);
|
||||
});
|
||||
|
||||
/**
|
||||
* Start the server if this module is the main entry point.
|
||||
* The server listens on the port defined by the `PORT` environment variable, or defaults to 4000.
|
||||
*/
|
||||
if (isMainModule(import.meta.url)) {
|
||||
const port = process.env['PORT'] || 4000;
|
||||
app.listen(port, (error) => {
|
||||
if (error) {
|
||||
throw error;
|
||||
}
|
||||
|
||||
console.log(`Node Express server listening on http://localhost:${port}`);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Request handler used by the Angular CLI (for dev-server and during build) or Firebase Cloud Functions.
|
||||
*/
|
||||
export const reqHandler = createNodeRequestHandler(app);
|
||||
6
projects/qd-design-demo/src/styles.scss
Normal file
6
projects/qd-design-demo/src/styles.scss
Normal file
@@ -0,0 +1,6 @@
|
||||
/* You can add global styles to this file, and also import other styles files */
|
||||
@forward "../../qd-design/src/styles/qd_design_system";
|
||||
|
||||
body {
|
||||
background-color: var(--md-sys-color-surface);
|
||||
}
|
||||
Reference in New Issue
Block a user