creating button, cards and tooltip
This commit is contained in:
MastersGame
123
angular.json
123
angular.json
@@ -3,5 +3,128 @@
|
||||
"version": 1,
|
||||
"newProjectRoot": "projects",
|
||||
"projects": {
|
||||
"qd-design": {
|
||||
"projectType": "library",
|
||||
"schematics": {
|
||||
"@schematics/angular:component": {
|
||||
"style": "scss"
|
||||
}
|
||||
},
|
||||
"root": "projects/qd-design",
|
||||
"sourceRoot": "projects/qd-design/src",
|
||||
"prefix": "",
|
||||
"architect": {
|
||||
"build": {
|
||||
"builder": "@angular/build:ng-packagr",
|
||||
"configurations": {
|
||||
"production": {
|
||||
"tsConfig": "projects/qd-design/tsconfig.lib.prod.json"
|
||||
},
|
||||
"development": {
|
||||
"tsConfig": "projects/qd-design/tsconfig.lib.json"
|
||||
}
|
||||
},
|
||||
"defaultConfiguration": "production"
|
||||
},
|
||||
"test": {
|
||||
"builder": "@angular/build:karma",
|
||||
"options": {
|
||||
"tsConfig": "projects/qd-design/tsconfig.spec.json"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"qd-design-demo": {
|
||||
"projectType": "application",
|
||||
"schematics": {
|
||||
"@schematics/angular:component": {
|
||||
"style": "scss"
|
||||
}
|
||||
},
|
||||
"root": "projects/qd-design-demo",
|
||||
"sourceRoot": "projects/qd-design-demo/src",
|
||||
"prefix": "",
|
||||
"architect": {
|
||||
"build": {
|
||||
"builder": "@angular/build:application",
|
||||
"options": {
|
||||
"browser": "projects/qd-design-demo/src/main.ts",
|
||||
"tsConfig": "projects/qd-design-demo/tsconfig.app.json",
|
||||
"inlineStyleLanguage": "scss",
|
||||
"assets": [
|
||||
{
|
||||
"glob": "**/*",
|
||||
"input": "projects/qd-design-demo/public"
|
||||
}
|
||||
],
|
||||
"styles": [
|
||||
"projects/qd-design-demo/src/styles.scss"
|
||||
],
|
||||
"server": "projects/qd-design-demo/src/main.server.ts",
|
||||
"outputMode": "server",
|
||||
"ssr": {
|
||||
"entry": "projects/qd-design-demo/src/server.ts"
|
||||
}
|
||||
},
|
||||
"configurations": {
|
||||
"production": {
|
||||
"budgets": [
|
||||
{
|
||||
"type": "initial",
|
||||
"maximumWarning": "500kB",
|
||||
"maximumError": "1MB"
|
||||
},
|
||||
{
|
||||
"type": "anyComponentStyle",
|
||||
"maximumWarning": "4kB",
|
||||
"maximumError": "8kB"
|
||||
}
|
||||
],
|
||||
"outputHashing": "all"
|
||||
},
|
||||
"development": {
|
||||
"optimization": false,
|
||||
"extractLicenses": false,
|
||||
"sourceMap": true
|
||||
}
|
||||
},
|
||||
"defaultConfiguration": "production"
|
||||
},
|
||||
"serve": {
|
||||
"builder": "@angular/build:dev-server",
|
||||
"configurations": {
|
||||
"production": {
|
||||
"buildTarget": "qd-design-demo:build:production"
|
||||
},
|
||||
"development": {
|
||||
"buildTarget": "qd-design-demo:build:development"
|
||||
}
|
||||
},
|
||||
"defaultConfiguration": "development"
|
||||
},
|
||||
"extract-i18n": {
|
||||
"builder": "@angular/build:extract-i18n"
|
||||
},
|
||||
"test": {
|
||||
"builder": "@angular/build:karma",
|
||||
"options": {
|
||||
"tsConfig": "projects/qd-design-demo/tsconfig.spec.json",
|
||||
"inlineStyleLanguage": "scss",
|
||||
"assets": [
|
||||
{
|
||||
"glob": "**/*",
|
||||
"input": "projects/qd-design-demo/public"
|
||||
}
|
||||
],
|
||||
"styles": [
|
||||
"projects/qd-design-demo/src/styles.scss"
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"cli": {
|
||||
"analytics": "4c0b8f28-f584-40da-8193-df653f2b4910"
|
||||
}
|
||||
}
|
||||
|
||||
3134
package-lock.json
generated
3134
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
11
package.json
11
package.json
@@ -6,7 +6,8 @@
|
||||
"start": "ng serve",
|
||||
"build": "ng build",
|
||||
"watch": "ng build --watch --configuration development",
|
||||
"test": "ng test"
|
||||
"test": "ng test",
|
||||
"serve:ssr:qd-design-demo": "node dist/qd-design-demo/server/server.mjs"
|
||||
},
|
||||
"prettier": {
|
||||
"overrides": [
|
||||
@@ -25,20 +26,28 @@
|
||||
"@angular/core": "^20.1.0",
|
||||
"@angular/forms": "^20.1.0",
|
||||
"@angular/platform-browser": "^20.1.0",
|
||||
"@angular/platform-server": "^20.1.0",
|
||||
"@angular/router": "^20.1.0",
|
||||
"@angular/ssr": "^20.1.5",
|
||||
"express": "^5.1.0",
|
||||
"@ng-icons/core": "^25.0.1",
|
||||
"rxjs": "~7.8.0",
|
||||
"tslib": "^2.3.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@angular/build": "^20.1.5",
|
||||
"@angular/cli": "^20.1.5",
|
||||
"@angular/compiler-cli": "^20.1.0",
|
||||
"@types/express": "^5.0.1",
|
||||
"@types/jasmine": "~5.1.0",
|
||||
"@types/node": "^20.17.19",
|
||||
"jasmine-core": "~5.8.0",
|
||||
"karma": "~6.4.0",
|
||||
"karma-chrome-launcher": "~3.2.0",
|
||||
"karma-coverage": "~2.2.0",
|
||||
"karma-jasmine": "~5.1.0",
|
||||
"karma-jasmine-html-reporter": "~2.1.0",
|
||||
"ng-packagr": "^20.1.0",
|
||||
"typescript": "~5.8.2"
|
||||
}
|
||||
}
|
||||
|
||||
BIN
projects/qd-design-demo/public/favicon.ico
Normal file
BIN
projects/qd-design-demo/public/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
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);
|
||||
}
|
||||
17
projects/qd-design-demo/tsconfig.app.json
Normal file
17
projects/qd-design-demo/tsconfig.app.json
Normal file
@@ -0,0 +1,17 @@
|
||||
/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
|
||||
/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
|
||||
{
|
||||
"extends": "../../tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"outDir": "../../out-tsc/app",
|
||||
"types": [
|
||||
"node"
|
||||
]
|
||||
},
|
||||
"include": [
|
||||
"src/**/*.ts"
|
||||
],
|
||||
"exclude": [
|
||||
"src/**/*.spec.ts"
|
||||
]
|
||||
}
|
||||
14
projects/qd-design-demo/tsconfig.spec.json
Normal file
14
projects/qd-design-demo/tsconfig.spec.json
Normal file
@@ -0,0 +1,14 @@
|
||||
/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
|
||||
/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
|
||||
{
|
||||
"extends": "../../tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"outDir": "../../out-tsc/spec",
|
||||
"types": [
|
||||
"jasmine"
|
||||
]
|
||||
},
|
||||
"include": [
|
||||
"src/**/*.ts"
|
||||
]
|
||||
}
|
||||
63
projects/qd-design/README.md
Normal file
63
projects/qd-design/README.md
Normal file
@@ -0,0 +1,63 @@
|
||||
# QdDesign
|
||||
|
||||
This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 20.1.0.
|
||||
|
||||
## Code scaffolding
|
||||
|
||||
Angular CLI includes powerful code scaffolding tools. To generate a new component, run:
|
||||
|
||||
```bash
|
||||
ng generate component component-name
|
||||
```
|
||||
|
||||
For a complete list of available schematics (such as `components`, `directives`, or `pipes`), run:
|
||||
|
||||
```bash
|
||||
ng generate --help
|
||||
```
|
||||
|
||||
## Building
|
||||
|
||||
To build the library, run:
|
||||
|
||||
```bash
|
||||
ng build qd-design
|
||||
```
|
||||
|
||||
This command will compile your project, and the build artifacts will be placed in the `dist/` directory.
|
||||
|
||||
### Publishing the Library
|
||||
|
||||
Once the project is built, you can publish your library by following these steps:
|
||||
|
||||
1. Navigate to the `dist` directory:
|
||||
```bash
|
||||
cd dist/qd-design
|
||||
```
|
||||
|
||||
2. Run the `npm publish` command to publish your library to the npm registry:
|
||||
```bash
|
||||
npm publish
|
||||
```
|
||||
|
||||
## Running unit tests
|
||||
|
||||
To execute unit tests with the [Karma](https://karma-runner.github.io) test runner, use the following command:
|
||||
|
||||
```bash
|
||||
ng test
|
||||
```
|
||||
|
||||
## Running end-to-end tests
|
||||
|
||||
For end-to-end (e2e) testing, run:
|
||||
|
||||
```bash
|
||||
ng e2e
|
||||
```
|
||||
|
||||
Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.
|
||||
|
||||
## Additional Resources
|
||||
|
||||
For more information on using the Angular CLI, including detailed command references, visit the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.
|
||||
7
projects/qd-design/ng-package.json
Normal file
7
projects/qd-design/ng-package.json
Normal file
@@ -0,0 +1,7 @@
|
||||
{
|
||||
"$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
|
||||
"dest": "../../dist/qd-design",
|
||||
"lib": {
|
||||
"entryFile": "src/public-api.ts"
|
||||
}
|
||||
}
|
||||
12
projects/qd-design/package.json
Normal file
12
projects/qd-design/package.json
Normal file
@@ -0,0 +1,12 @@
|
||||
{
|
||||
"name": "qd-design",
|
||||
"version": "0.0.1",
|
||||
"peerDependencies": {
|
||||
"@angular/common": "^20.1.0",
|
||||
"@angular/core": "^20.1.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"tslib": "^2.3.0"
|
||||
},
|
||||
"sideEffects": false
|
||||
}
|
||||
11
projects/qd-design/src/directives/qd-button-variant.ts
Normal file
11
projects/qd-design/src/directives/qd-button-variant.ts
Normal file
@@ -0,0 +1,11 @@
|
||||
import {Directive, HostBinding, Input} from '@angular/core';
|
||||
|
||||
export type QdButtonVariant = 'elevated' | 'filled' | 'filled-tonal' | 'outlined' | 'text';
|
||||
|
||||
@Directive({
|
||||
standalone: true,
|
||||
selector: 'qd-button[variant]'
|
||||
})
|
||||
export class QdButtonVariantDirective {
|
||||
@Input() @HostBinding('attr.data-variant') variant: QdButtonVariant = 'filled';
|
||||
}
|
||||
11
projects/qd-design/src/directives/qd-card-variant.ts
Normal file
11
projects/qd-design/src/directives/qd-card-variant.ts
Normal file
@@ -0,0 +1,11 @@
|
||||
import {Directive, HostBinding, Input} from '@angular/core';
|
||||
|
||||
export type QdCardVariant = 'elevated' | 'filled' | 'outlined';
|
||||
|
||||
@Directive({
|
||||
standalone: true,
|
||||
selector: 'qd-card[variant]'
|
||||
})
|
||||
export class QdCardVariantDirective {
|
||||
@Input() @HostBinding('attr.data-variant') variant: QdCardVariant = 'filled';
|
||||
}
|
||||
16
projects/qd-design/src/directives/qd-tooltip-directive.ts
Normal file
16
projects/qd-design/src/directives/qd-tooltip-directive.ts
Normal file
@@ -0,0 +1,16 @@
|
||||
import {Directive, ElementRef} from '@angular/core';
|
||||
import { Overlay, OverlayRef, OverlayPositionBuilder, ConnectionPositionPair } from '@angular/cdk/overlay';
|
||||
|
||||
@Directive({
|
||||
standalone: true,
|
||||
selector: '[tooltip]'
|
||||
})
|
||||
export class QdTooltipDirective {
|
||||
|
||||
constructor(
|
||||
private elementRef: ElementRef,
|
||||
private overlay: Overlay,
|
||||
private positionBuilder: OverlayPositionBuilder
|
||||
) {}
|
||||
|
||||
}
|
||||
7
projects/qd-design/src/enums/qd-button-type.enum.ts
Normal file
7
projects/qd-design/src/enums/qd-button-type.enum.ts
Normal file
@@ -0,0 +1,7 @@
|
||||
export enum QdButtonType {
|
||||
ELEVATED = 'elevated',
|
||||
FILLED = 'filled',
|
||||
FILLED_TONAL = 'filled-tonal',
|
||||
OUTLINED = 'outlined',
|
||||
TEXT = 'text',
|
||||
}
|
||||
808
projects/qd-design/src/lib/qd-button/qd-button.css
Normal file
808
projects/qd-design/src/lib/qd-button/qd-button.css
Normal file
@@ -0,0 +1,808 @@
|
||||
@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, .button-content, :host[data-variant=elevated] .button .content, :host[data-variant=filled] .button .content, :host[data-variant=filled-tonal] .button .content, :host[data-variant=outlined] .button .content, :host[data-variant=text] .button .content {
|
||||
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);
|
||||
}
|
||||
|
||||
:host {
|
||||
display: flex;
|
||||
background-color: transparent;
|
||||
height: fit-content;
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
.button {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
cursor: pointer;
|
||||
background-color: transparent;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 20px;
|
||||
box-sizing: border-box;
|
||||
height: 40px;
|
||||
padding: 0 16px;
|
||||
transition: all 200ms ease-in-out;
|
||||
width: fit-content;
|
||||
}
|
||||
.button-icon, :host[data-variant=text] .button .icon, :host[data-variant=outlined] .button .icon, :host[data-variant=filled-tonal] .button .icon, :host[data-variant=filled] .button .icon, :host[data-variant=elevated] .button .icon {
|
||||
background-color: transparent;
|
||||
height: 24px;
|
||||
margin: auto;
|
||||
padding: 0;
|
||||
width: 24px;
|
||||
}
|
||||
.button-content, :host[data-variant=text] .button .content, :host[data-variant=outlined] .button .content, :host[data-variant=filled-tonal] .button .content, :host[data-variant=filled] .button .content, :host[data-variant=elevated] .button .content {
|
||||
background-color: transparent;
|
||||
height: fit-content;
|
||||
margin: auto 8px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
:host[data-variant=elevated] .button {
|
||||
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
|
||||
background-color: var(--md-sys-color-surface-container-low);
|
||||
}
|
||||
:host[data-variant=elevated] .button:enabled:hover, :host[data-variant=elevated] .button:hover {
|
||||
box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
|
||||
background-color: color-mix(in hsl, var(--md-sys-color-surface-container-low), var(--md-sys-color-primary) 8%);
|
||||
}
|
||||
:host[data-variant=elevated] .button.hover {
|
||||
box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
|
||||
background-color: color-mix(in hsl, var(--md-sys-color-surface-container-low), var(--md-sys-color-primary) 8%);
|
||||
}
|
||||
:host[data-variant=elevated] .button:enabled:focus-visible, :host[data-variant=elevated] .button:focus-visible {
|
||||
outline: none;
|
||||
box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
|
||||
background-color: color-mix(in hsl, var(--md-sys-color-surface-container-low), var(--md-sys-color-primary) 12%);
|
||||
}
|
||||
:host[data-variant=elevated] .button.focus {
|
||||
box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
|
||||
background-color: color-mix(in hsl, var(--md-sys-color-surface-container-low), var(--md-sys-color-primary) 12%);
|
||||
}
|
||||
:host[data-variant=elevated] .button:enabled:active, :host[data-variant=elevated] .button:active {
|
||||
box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
|
||||
background-color: color-mix(in hsl, var(--md-sys-color-surface-container-low), var(--md-sys-color-primary) 12%);
|
||||
}
|
||||
:host[data-variant=elevated] .button.active {
|
||||
box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
|
||||
background-color: color-mix(in hsl, var(--md-sys-color-surface-container-low), var(--md-sys-color-primary) 12%);
|
||||
}
|
||||
:host[data-variant=elevated] .button:disabled, :host[data-variant=elevated] .button:disabled:active, :host[data-variant=elevated] .button:disabled:hover, :host[data-variant=elevated] .button:disabled:focus {
|
||||
pointer-events: none;
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
|
||||
cursor: default;
|
||||
box-shadow: none;
|
||||
}
|
||||
:host[data-variant=elevated] .button:disabled .icon, :host[data-variant=elevated] .button:disabled:active .icon, :host[data-variant=elevated] .button:disabled:hover .icon, :host[data-variant=elevated] .button:disabled:focus .icon {
|
||||
color: color-mix(in srgb, var(--md-sys-color-on-surface) 32%, transparent);
|
||||
background: transparent;
|
||||
}
|
||||
:host[data-variant=elevated] .button:disabled .content, :host[data-variant=elevated] .button:disabled:active .content, :host[data-variant=elevated] .button:disabled:hover .content, :host[data-variant=elevated] .button:disabled:focus .content {
|
||||
color: color-mix(in srgb, var(--md-sys-color-on-surface) 32%, transparent);
|
||||
background: transparent;
|
||||
}
|
||||
:host[data-variant=elevated] .button.disabled {
|
||||
pointer-events: none;
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
|
||||
cursor: default;
|
||||
box-shadow: none;
|
||||
}
|
||||
:host[data-variant=elevated] .button.disabled .icon {
|
||||
color: color-mix(in srgb, var(--md-sys-color-on-surface) 32%, transparent);
|
||||
background: transparent;
|
||||
}
|
||||
:host[data-variant=elevated] .button.disabled .content {
|
||||
color: color-mix(in srgb, var(--md-sys-color-on-surface) 32%, transparent);
|
||||
background: transparent;
|
||||
}
|
||||
:host[data-variant=elevated] .button .icon {
|
||||
color: var(--md-sys-color-primary);
|
||||
}
|
||||
:host[data-variant=elevated] .button .content {
|
||||
color: var(--md-sys-color-primary);
|
||||
}
|
||||
|
||||
:host[data-variant=filled] .button {
|
||||
background-color: var(--md-sys-color-primary);
|
||||
}
|
||||
:host[data-variant=filled] .button:enabled:hover, :host[data-variant=filled] .button:hover {
|
||||
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
|
||||
background-color: color-mix(in hsl, var(--md-sys-color-primary), var(--md-sys-color-on-primary) 8%);
|
||||
}
|
||||
:host[data-variant=filled] .button.hover {
|
||||
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
|
||||
background-color: color-mix(in hsl, var(--md-sys-color-primary), var(--md-sys-color-on-primary) 8%);
|
||||
}
|
||||
:host[data-variant=filled] .button:enabled:focus-visible, :host[data-variant=filled] .button:focus-visible {
|
||||
outline: none;
|
||||
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
|
||||
background-color: color-mix(in hsl, var(--md-sys-color-primary), var(--md-sys-color-on-primary) 12%);
|
||||
}
|
||||
:host[data-variant=filled] .button.focus {
|
||||
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
|
||||
background-color: color-mix(in hsl, var(--md-sys-color-primary), var(--md-sys-color-on-primary) 12%);
|
||||
}
|
||||
:host[data-variant=filled] .button:enabled:active, :host[data-variant=filled] .button:active {
|
||||
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
|
||||
background-color: color-mix(in hsl, var(--md-sys-color-primary), var(--md-sys-color-on-primary) 12%);
|
||||
}
|
||||
:host[data-variant=filled] .button.active {
|
||||
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
|
||||
background-color: color-mix(in hsl, var(--md-sys-color-primary), var(--md-sys-color-on-primary) 12%);
|
||||
}
|
||||
:host[data-variant=filled] .button:disabled, :host[data-variant=filled] .button:disabled:active, :host[data-variant=filled] .button:disabled:hover, :host[data-variant=filled] .button:disabled:focus {
|
||||
pointer-events: none;
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
|
||||
cursor: default;
|
||||
box-shadow: none;
|
||||
}
|
||||
:host[data-variant=filled] .button:disabled .icon, :host[data-variant=filled] .button:disabled:active .icon, :host[data-variant=filled] .button:disabled:hover .icon, :host[data-variant=filled] .button:disabled:focus .icon {
|
||||
color: color-mix(in srgb, var(--md-sys-color-on-surface) 32%, transparent);
|
||||
background: transparent;
|
||||
}
|
||||
:host[data-variant=filled] .button:disabled .content, :host[data-variant=filled] .button:disabled:active .content, :host[data-variant=filled] .button:disabled:hover .content, :host[data-variant=filled] .button:disabled:focus .content {
|
||||
color: color-mix(in srgb, var(--md-sys-color-on-surface) 32%, transparent);
|
||||
background: transparent;
|
||||
}
|
||||
:host[data-variant=filled] .button.disabled {
|
||||
pointer-events: none;
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
|
||||
cursor: default;
|
||||
box-shadow: none;
|
||||
}
|
||||
:host[data-variant=filled] .button.disabled .icon {
|
||||
color: color-mix(in srgb, var(--md-sys-color-on-surface) 32%, transparent);
|
||||
background: transparent;
|
||||
}
|
||||
:host[data-variant=filled] .button.disabled .content {
|
||||
color: color-mix(in srgb, var(--md-sys-color-on-surface) 32%, transparent);
|
||||
background: transparent;
|
||||
}
|
||||
:host[data-variant=filled] .button .icon {
|
||||
color: var(--md-sys-color-on-primary);
|
||||
}
|
||||
:host[data-variant=filled] .button .content {
|
||||
color: var(--md-sys-color-on-primary);
|
||||
}
|
||||
|
||||
:host[data-variant=filled-tonal] .button {
|
||||
background-color: var(--md-sys-color-secondary-container);
|
||||
}
|
||||
:host[data-variant=filled-tonal] .button:enabled:hover, :host[data-variant=filled-tonal] .button:hover {
|
||||
background-color: color-mix(in hsl, var(--md-sys-color-secondary-container), var(--md-sys-color-on-secondary-container) 8%);
|
||||
box-shadow: var(--md-sys-elevation-1);
|
||||
}
|
||||
:host[data-variant=filled-tonal] .button.hover {
|
||||
background-color: color-mix(in hsl, var(--md-sys-color-secondary-container), var(--md-sys-color-on-secondary-container) 8%);
|
||||
box-shadow: var(--md-sys-elevation-1);
|
||||
}
|
||||
:host[data-variant=filled-tonal] .button:enabled:focus-visible, :host[data-variant=filled-tonal] .button:focus-visible {
|
||||
outline: none;
|
||||
background-color: color-mix(in hsl, var(--md-sys-color-secondary-container), var(--md-sys-color-on-secondary-container) 12%);
|
||||
box-shadow: var(--md-sys-elevation-1);
|
||||
}
|
||||
:host[data-variant=filled-tonal] .button.focus {
|
||||
background-color: color-mix(in hsl, var(--md-sys-color-secondary-container), var(--md-sys-color-on-secondary-container) 12%);
|
||||
box-shadow: var(--md-sys-elevation-1);
|
||||
}
|
||||
:host[data-variant=filled-tonal] .button:enabled:active, :host[data-variant=filled-tonal] .button:active {
|
||||
background-color: color-mix(in hsl, var(--md-sys-color-secondary-container), var(--md-sys-color-on-secondary-container) 12%);
|
||||
box-shadow: var(--md-sys-elevation-1);
|
||||
}
|
||||
:host[data-variant=filled-tonal] .button.active {
|
||||
background-color: color-mix(in hsl, var(--md-sys-color-secondary-container), var(--md-sys-color-on-secondary-container) 12%);
|
||||
box-shadow: var(--md-sys-elevation-1);
|
||||
}
|
||||
:host[data-variant=filled-tonal] .button:disabled, :host[data-variant=filled-tonal] .button:disabled:active, :host[data-variant=filled-tonal] .button:disabled:hover, :host[data-variant=filled-tonal] .button:disabled:focus {
|
||||
pointer-events: none;
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
|
||||
cursor: default;
|
||||
box-shadow: none;
|
||||
}
|
||||
:host[data-variant=filled-tonal] .button:disabled .icon, :host[data-variant=filled-tonal] .button:disabled:active .icon, :host[data-variant=filled-tonal] .button:disabled:hover .icon, :host[data-variant=filled-tonal] .button:disabled:focus .icon {
|
||||
color: color-mix(in srgb, var(--md-sys-color-on-surface) 32%, transparent);
|
||||
background: transparent;
|
||||
}
|
||||
:host[data-variant=filled-tonal] .button:disabled .content, :host[data-variant=filled-tonal] .button:disabled:active .content, :host[data-variant=filled-tonal] .button:disabled:hover .content, :host[data-variant=filled-tonal] .button:disabled:focus .content {
|
||||
color: color-mix(in srgb, var(--md-sys-color-on-surface) 32%, transparent);
|
||||
background: transparent;
|
||||
}
|
||||
:host[data-variant=filled-tonal] .button.disabled {
|
||||
pointer-events: none;
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
|
||||
cursor: default;
|
||||
box-shadow: none;
|
||||
}
|
||||
:host[data-variant=filled-tonal] .button.disabled .icon {
|
||||
color: color-mix(in srgb, var(--md-sys-color-on-surface) 32%, transparent);
|
||||
background: transparent;
|
||||
}
|
||||
:host[data-variant=filled-tonal] .button.disabled .content {
|
||||
color: color-mix(in srgb, var(--md-sys-color-on-surface) 32%, transparent);
|
||||
background: transparent;
|
||||
}
|
||||
:host[data-variant=filled-tonal] .button .icon {
|
||||
color: var(--md-sys-color-on-secondary-container);
|
||||
}
|
||||
:host[data-variant=filled-tonal] .button .content {
|
||||
color: var(--md-sys-color-on-secondary-container);
|
||||
}
|
||||
|
||||
:host[data-variant=outlined] .button {
|
||||
background-color: transparent;
|
||||
border: 1px solid var(--md-sys-color-outline-variant);
|
||||
}
|
||||
:host[data-variant=outlined] .button:enabled:hover, :host[data-variant=outlined] .button:hover {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent);
|
||||
}
|
||||
:host[data-variant=outlined] .button.hover {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent);
|
||||
}
|
||||
:host[data-variant=outlined] .button:enabled:focus-visible, :host[data-variant=outlined] .button:focus-visible {
|
||||
outline: none;
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
|
||||
}
|
||||
:host[data-variant=outlined] .button.focus {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
|
||||
}
|
||||
:host[data-variant=outlined] .button:enabled:active, :host[data-variant=outlined] .button:active {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
|
||||
}
|
||||
:host[data-variant=outlined] .button.active {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
|
||||
}
|
||||
:host[data-variant=outlined] .button:disabled, :host[data-variant=outlined] .button:disabled:active, :host[data-variant=outlined] .button:disabled:hover, :host[data-variant=outlined] .button:disabled:focus {
|
||||
pointer-events: none;
|
||||
background-color: transparent;
|
||||
border: 1px solid color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
|
||||
cursor: default;
|
||||
box-shadow: none;
|
||||
}
|
||||
:host[data-variant=outlined] .button:disabled .icon, :host[data-variant=outlined] .button:disabled:active .icon, :host[data-variant=outlined] .button:disabled:hover .icon, :host[data-variant=outlined] .button:disabled:focus .icon {
|
||||
color: color-mix(in srgb, var(--md-sys-color-on-surface) 32%, transparent);
|
||||
background: transparent;
|
||||
}
|
||||
:host[data-variant=outlined] .button:disabled .content, :host[data-variant=outlined] .button:disabled:active .content, :host[data-variant=outlined] .button:disabled:hover .content, :host[data-variant=outlined] .button:disabled:focus .content {
|
||||
color: color-mix(in srgb, var(--md-sys-color-on-surface) 32%, transparent);
|
||||
background: transparent;
|
||||
}
|
||||
:host[data-variant=outlined] .button.disabled {
|
||||
pointer-events: none;
|
||||
background-color: transparent;
|
||||
border: 1px solid color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
|
||||
cursor: default;
|
||||
box-shadow: none;
|
||||
}
|
||||
:host[data-variant=outlined] .button.disabled .icon {
|
||||
color: color-mix(in srgb, var(--md-sys-color-on-surface) 32%, transparent);
|
||||
background: transparent;
|
||||
}
|
||||
:host[data-variant=outlined] .button.disabled .content {
|
||||
color: color-mix(in srgb, var(--md-sys-color-on-surface) 32%, transparent);
|
||||
background: transparent;
|
||||
}
|
||||
:host[data-variant=outlined] .button .icon {
|
||||
color: var(--md-sys-color-on-surface-variant);
|
||||
}
|
||||
:host[data-variant=outlined] .button .content {
|
||||
color: var(--md-sys-color-on-surface-variant);
|
||||
}
|
||||
|
||||
:host[data-variant=text] .button {
|
||||
padding: 0 4px;
|
||||
}
|
||||
:host[data-variant=text] .button:enabled:hover, :host[data-variant=text] .button:hover {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent);
|
||||
}
|
||||
:host[data-variant=text] .button.hover {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent);
|
||||
}
|
||||
:host[data-variant=text] .button:enabled:focus-visible, :host[data-variant=text] .button:focus-visible {
|
||||
outline: none;
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
|
||||
}
|
||||
:host[data-variant=text] .button.focus {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
|
||||
}
|
||||
:host[data-variant=text] .button:enabled:active, :host[data-variant=text] .button:active {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
|
||||
}
|
||||
:host[data-variant=text] .button.active {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
|
||||
}
|
||||
:host[data-variant=text] .button:disabled, :host[data-variant=text] .button:disabled:active, :host[data-variant=text] .button:disabled:hover, :host[data-variant=text] .button:disabled:focus {
|
||||
pointer-events: none;
|
||||
background-color: transparent;
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
|
||||
cursor: default;
|
||||
box-shadow: none;
|
||||
}
|
||||
:host[data-variant=text] .button:disabled .icon, :host[data-variant=text] .button:disabled:active .icon, :host[data-variant=text] .button:disabled:hover .icon, :host[data-variant=text] .button:disabled:focus .icon {
|
||||
color: color-mix(in srgb, var(--md-sys-color-on-surface) 32%, transparent);
|
||||
background: transparent;
|
||||
}
|
||||
:host[data-variant=text] .button:disabled .content, :host[data-variant=text] .button:disabled:active .content, :host[data-variant=text] .button:disabled:hover .content, :host[data-variant=text] .button:disabled:focus .content {
|
||||
color: color-mix(in srgb, var(--md-sys-color-on-surface) 32%, transparent);
|
||||
background: transparent;
|
||||
}
|
||||
:host[data-variant=text] .button.disabled {
|
||||
pointer-events: none;
|
||||
background-color: transparent;
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
|
||||
cursor: default;
|
||||
box-shadow: none;
|
||||
}
|
||||
:host[data-variant=text] .button.disabled .icon {
|
||||
color: color-mix(in srgb, var(--md-sys-color-on-surface) 32%, transparent);
|
||||
background: transparent;
|
||||
}
|
||||
:host[data-variant=text] .button.disabled .content {
|
||||
color: color-mix(in srgb, var(--md-sys-color-on-surface) 32%, transparent);
|
||||
background: transparent;
|
||||
}
|
||||
:host[data-variant=text] .button .icon {
|
||||
color: var(--md-sys-color-primary);
|
||||
}
|
||||
:host[data-variant=text] .button .content {
|
||||
color: var(--md-sys-color-primary);
|
||||
}
|
||||
|
||||
/*# sourceMappingURL=qd-button.css.map */
|
||||
1
projects/qd-design/src/lib/qd-button/qd-button.css.map
Normal file
1
projects/qd-design/src/lib/qd-button/qd-button.css.map
Normal file
@@ -0,0 +1 @@
|
||||
{"version":3,"sourceRoot":"","sources":["../../styles/qd_design_system.scss","../../styles/typography/typography.token.scss","../../styles/typography/typography.module.scss","../../styles/design/look_and_feel.scss","../../styles/colors/light-theme.scss","../../styles/colors/dark-theme.scss","qd-button.scss","../../styles/design/overall-design.scss"],"names":[],"mappings":"AAQQ;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;;;AC/CF;EACE;EACA;EACA;EACA;;;AAmBF;EHZE;EACA,gBGYiB;EHqCjB;EGnCA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAGF;EAEE;EACA;EACA;EACA;;;AAIJ;EC9CE;EDgDA;;ACgCA;EA5EA;EDgDE;;ACgCF;EAhFA;EDgDE;;ACiBF;EACE;EAlEF;EDqDE;;ACiBF;EAtEA;EDqDE;;ACEF;EAvDA;ED0DE;;ACCF;EA3DA;ED0DE;;ACfF;EACE;ED9CF;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;ACuCF;EACE;EDnDF;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;AAwDF;EAEE;;AAGF;EAEE;;;AAIJ;EACE;;ACDA;EAhFA;EDqFE;;ACDF;EApFA;EDqFE;;AChBF;EACE;EAtEF;ED0FE;;AChBF;EA1EA;ED0FE;;AC/BF;EA3DA;ED+FE;;AChCF;EA/DA;ED+FE;;AChDF;EACE;ED9CF;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;ACuCF;EACE;EDnDF;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;AAyFF;EAEE;;AAGF;EAEE;;;AAIJ;EACE;;AClCA;EDqCE;EACA;;AClCF;EDiCE;EACA;;ACjDF;EACE;EDoDA;EACA;;ACjDF;EDgDE;EACA;;AChEF;EDoEE;EACA;;ACjEF;EDgEE;EACA;;ACjFF;EACE;ED9CF;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;ACuCF;EACE;EDnDF;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;AA0HF;EAEE;;AAGF;EAEE;;;AAIJ;EACE;EACA;;ACpEA;EDuEE;;ACnEF;EDmEE;;AClFF;EACE;EDqFA;;ACjFF;EDiFE;;AChGF;EDoGE;;AChGF;EDgGE;;AChHF;EACE;EDmHA;EACA;EAlKF;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;ACuCF;EACE;ED8GA;EACA;EAlKF;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;AA2JF;EAEE;;AAGF;EAEE;;;AAIJ;EACE;;ACpGA;EDuGE;;ACnGF;EDmGE;;AClHF;EACE;EDqHA;;ACjHF;EDiHE;;AChIF;EDoIE;;AChIF;EDgIE;;AChJF;EACE;EDmJA;EAjMF;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;ACuCF;EACE;ED8IA;EAjMF;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;AA0LF;EAEE;;AAGF;EAEE","file":"qd-button.css"}
|
||||
16
projects/qd-design/src/lib/qd-button/qd-button.html
Normal file
16
projects/qd-design/src/lib/qd-button/qd-button.html
Normal file
@@ -0,0 +1,16 @@
|
||||
<button [class]="'button'"
|
||||
[disabled]="disabled()"
|
||||
[type]="type()">
|
||||
@if (iconName() != undefined) {
|
||||
<qd-icon [iconName]="iconName()!"
|
||||
[size]="24"
|
||||
class="icon">
|
||||
</qd-icon>
|
||||
}
|
||||
|
||||
@if (text() != undefined) {
|
||||
<p class="content">
|
||||
{{ text() }}
|
||||
</p>
|
||||
}
|
||||
</button>
|
||||
217
projects/qd-design/src/lib/qd-button/qd-button.scss
Normal file
217
projects/qd-design/src/lib/qd-button/qd-button.scss
Normal file
@@ -0,0 +1,217 @@
|
||||
@use '../../styles/qd_design_system' as qd;
|
||||
|
||||
:host {
|
||||
display: flex;
|
||||
background-color: transparent;
|
||||
height: fit-content;
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
@mixin button-disabled {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
|
||||
cursor: default;
|
||||
box-shadow: none;
|
||||
|
||||
.icon {
|
||||
color: color-mix(in srgb, var(--md-sys-color-on-surface) 32%, transparent);
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.content {
|
||||
color: color-mix(in srgb, var(--md-sys-color-on-surface) 32%, transparent);
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.button {
|
||||
@include qd.flex(row);
|
||||
@include qd.clickable;
|
||||
background-color: transparent;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 20px;
|
||||
box-sizing: border-box;
|
||||
height: 40px;
|
||||
padding: 0 16px;
|
||||
transition: all 200ms ease-in-out;
|
||||
width: fit-content;
|
||||
|
||||
&-icon {
|
||||
background-color: transparent;
|
||||
height: 24px;
|
||||
margin: auto;
|
||||
padding: 0;
|
||||
width: 24px;
|
||||
}
|
||||
|
||||
&-content {
|
||||
@extend .label-large;
|
||||
background-color: transparent;
|
||||
height: fit-content;
|
||||
margin: auto 8px;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
:host[data-variant='elevated'] .button {
|
||||
@include qd.elevation-1;
|
||||
background-color: var(--md-sys-color-surface-container-low);
|
||||
|
||||
@include qd.hover {
|
||||
@include qd.elevation-2;
|
||||
background-color: color-mix(in hsl, var(--md-sys-color-surface-container-low), var(--md-sys-color-primary) 8%);
|
||||
}
|
||||
|
||||
@include qd.focus {
|
||||
@include qd.elevation-2;
|
||||
background-color: color-mix(in hsl, var(--md-sys-color-surface-container-low), var(--md-sys-color-primary) 12%);
|
||||
}
|
||||
|
||||
@include qd.active {
|
||||
@include qd.elevation-2;
|
||||
background-color: color-mix(in hsl, var(--md-sys-color-surface-container-low), var(--md-sys-color-primary) 12%);
|
||||
}
|
||||
|
||||
@include qd.disabled {
|
||||
@include button-disabled;
|
||||
}
|
||||
|
||||
.icon {
|
||||
@extend .button-icon;
|
||||
color: var(--md-sys-color-primary);
|
||||
}
|
||||
|
||||
.content {
|
||||
@extend .button-content;
|
||||
color: var(--md-sys-color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
:host[data-variant='filled'] .button {
|
||||
background-color: var(--md-sys-color-primary);
|
||||
|
||||
@include qd.hover {
|
||||
@include qd.elevation-1;
|
||||
background-color: color-mix(in hsl, var(--md-sys-color-primary), var(--md-sys-color-on-primary) 8%);
|
||||
}
|
||||
|
||||
@include qd.focus {
|
||||
@include qd.elevation-1;
|
||||
background-color: color-mix(in hsl, var(--md-sys-color-primary), var(--md-sys-color-on-primary) 12%);
|
||||
}
|
||||
|
||||
@include qd.active {
|
||||
@include qd.elevation-1;
|
||||
background-color: color-mix(in hsl, var(--md-sys-color-primary), var(--md-sys-color-on-primary) 12%);
|
||||
}
|
||||
|
||||
@include qd.disabled {
|
||||
@include button-disabled;
|
||||
}
|
||||
|
||||
.icon {
|
||||
@extend .button-icon;
|
||||
color: var(--md-sys-color-on-primary);
|
||||
}
|
||||
|
||||
.content {
|
||||
@extend .button-content;
|
||||
color: var(--md-sys-color-on-primary);
|
||||
}
|
||||
}
|
||||
|
||||
:host[data-variant='filled-tonal'] .button {
|
||||
background-color: var(--md-sys-color-secondary-container);
|
||||
|
||||
@include qd.hover {
|
||||
background-color: color-mix(in hsl, var(--md-sys-color-secondary-container), var(--md-sys-color-on-secondary-container) 8%);
|
||||
box-shadow: var(--md-sys-elevation-1);
|
||||
}
|
||||
|
||||
@include qd.focus {
|
||||
background-color: color-mix(in hsl, var(--md-sys-color-secondary-container), var(--md-sys-color-on-secondary-container) 12%);
|
||||
box-shadow: var(--md-sys-elevation-1);
|
||||
}
|
||||
|
||||
@include qd.active {
|
||||
background-color: color-mix(in hsl, var(--md-sys-color-secondary-container), var(--md-sys-color-on-secondary-container) 12%);
|
||||
box-shadow: var(--md-sys-elevation-1);
|
||||
}
|
||||
|
||||
@include qd.disabled {
|
||||
@include button-disabled;
|
||||
}
|
||||
|
||||
.icon {
|
||||
@extend .button-icon;
|
||||
color: var(--md-sys-color-on-secondary-container);
|
||||
}
|
||||
|
||||
.content {
|
||||
@extend .button-content;
|
||||
color: var(--md-sys-color-on-secondary-container);
|
||||
}
|
||||
}
|
||||
|
||||
:host[data-variant='outlined'] .button {
|
||||
background-color: transparent;
|
||||
border: 1px solid var(--md-sys-color-outline-variant);
|
||||
|
||||
@include qd.hover {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent);
|
||||
}
|
||||
|
||||
@include qd.focus {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
|
||||
}
|
||||
|
||||
@include qd.active {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
|
||||
}
|
||||
|
||||
@include qd.disabled {
|
||||
background-color: transparent;
|
||||
border: 1px solid color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
|
||||
@include button-disabled;
|
||||
}
|
||||
|
||||
.icon {
|
||||
@extend .button-icon;
|
||||
color: var(--md-sys-color-on-surface-variant);
|
||||
}
|
||||
|
||||
.content {
|
||||
@extend .button-content;
|
||||
color: var(--md-sys-color-on-surface-variant);
|
||||
}
|
||||
}
|
||||
|
||||
:host[data-variant='text'] .button {
|
||||
padding: 0 4px;
|
||||
|
||||
@include qd.hover {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent);
|
||||
}
|
||||
|
||||
@include qd.focus {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
|
||||
}
|
||||
|
||||
@include qd.active {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
|
||||
}
|
||||
|
||||
@include qd.disabled {
|
||||
background-color: transparent;
|
||||
@include button-disabled;
|
||||
}
|
||||
|
||||
.icon {
|
||||
@extend .button-icon;
|
||||
color: var(--md-sys-color-primary);
|
||||
}
|
||||
|
||||
.content {
|
||||
@extend .button-content;
|
||||
color: var(--md-sys-color-primary);
|
||||
}
|
||||
}
|
||||
23
projects/qd-design/src/lib/qd-button/qd-button.spec.ts
Normal file
23
projects/qd-design/src/lib/qd-button/qd-button.spec.ts
Normal file
@@ -0,0 +1,23 @@
|
||||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { QdButton } from './qd-button';
|
||||
|
||||
describe('QdButton', () => {
|
||||
let component: QdButton;
|
||||
let fixture: ComponentFixture<QdButton>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
imports: [QdButton]
|
||||
})
|
||||
.compileComponents();
|
||||
|
||||
fixture = TestBed.createComponent(QdButton);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
25
projects/qd-design/src/lib/qd-button/qd-button.ts
Normal file
25
projects/qd-design/src/lib/qd-button/qd-button.ts
Normal file
@@ -0,0 +1,25 @@
|
||||
import {Component, input, output, OutputEmitterRef} from '@angular/core';
|
||||
import {QdIcon} from '../qd-icon/qd-icon';
|
||||
import {QdButtonVariantDirective} from '../../directives/qd-button-variant';
|
||||
|
||||
@Component({
|
||||
selector: 'qd-button',
|
||||
imports: [
|
||||
QdIcon
|
||||
],
|
||||
templateUrl: './qd-button.html',
|
||||
styleUrl: './qd-button.scss',
|
||||
hostDirectives: [
|
||||
{
|
||||
directive: QdButtonVariantDirective,
|
||||
inputs: ['variant']
|
||||
}
|
||||
]
|
||||
})
|
||||
export class QdButton {
|
||||
// Optional inputs
|
||||
iconName = input<String>();
|
||||
text = input<string | number>();
|
||||
disabled = input<Boolean>(false);
|
||||
type = input<'button' | 'submit' | 'reset'>('button');
|
||||
}
|
||||
615
projects/qd-design/src/lib/qd-card/qd-card.css
Normal file
615
projects/qd-design/src/lib/qd-card/qd-card.css
Normal file
@@ -0,0 +1,615 @@
|
||||
@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);
|
||||
}
|
||||
|
||||
:host {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
}
|
||||
:host.disabled:disabled, :host.disabled:disabled:active, :host.disabled:disabled:hover, :host.disabled:disabled:focus {
|
||||
pointer-events: none;
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
|
||||
cursor: default;
|
||||
box-shadow: none;
|
||||
}
|
||||
:host.disabled.disabled {
|
||||
pointer-events: none;
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
|
||||
cursor: default;
|
||||
box-shadow: none;
|
||||
}
|
||||
:host.disabled .image {
|
||||
opacity: 32%;
|
||||
}
|
||||
:host.disabled .content {
|
||||
opacity: 32%;
|
||||
}
|
||||
|
||||
:host[data-variant=filled] {
|
||||
background-color: var(--md-sys-color-surface-container-highest);
|
||||
}
|
||||
:host[data-variant=filled].interactive {
|
||||
cursor: pointer;
|
||||
}
|
||||
:host[data-variant=filled].interactive:enabled:hover, :host[data-variant=filled].interactive:hover {
|
||||
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
|
||||
background-color: color-mix(in hsl, var(--md-sys-color-surface-container-highest), var(--md-sys-color-on-surface) 8%);
|
||||
}
|
||||
:host[data-variant=filled].interactive.hover {
|
||||
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
|
||||
background-color: color-mix(in hsl, var(--md-sys-color-surface-container-highest), var(--md-sys-color-on-surface) 8%);
|
||||
}
|
||||
:host[data-variant=filled].interactive:enabled:focus-visible, :host[data-variant=filled].interactive:focus-visible {
|
||||
outline: none;
|
||||
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
|
||||
background-color: color-mix(in hsl, var(--md-sys-color-surface-container-highest), var(--md-sys-color-secondary) 12%);
|
||||
}
|
||||
:host[data-variant=filled].interactive.focus {
|
||||
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
|
||||
background-color: color-mix(in hsl, var(--md-sys-color-surface-container-highest), var(--md-sys-color-secondary) 12%);
|
||||
}
|
||||
:host[data-variant=filled].interactive:enabled:active, :host[data-variant=filled].interactive:active {
|
||||
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
|
||||
background-color: color-mix(in hsl, var(--md-sys-color-surface-container-highest), var(--md-sys-color-on-surface) 10%);
|
||||
}
|
||||
:host[data-variant=filled].interactive.active {
|
||||
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
|
||||
background-color: color-mix(in hsl, var(--md-sys-color-surface-container-highest), var(--md-sys-color-on-surface) 10%);
|
||||
}
|
||||
:host[data-variant=filled].interactive:disabled, :host[data-variant=filled].interactive:disabled:active, :host[data-variant=filled].interactive:disabled:hover, :host[data-variant=filled].interactive:disabled:focus {
|
||||
pointer-events: none;
|
||||
}
|
||||
:host[data-variant=filled].interactive.disabled {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
:host[data-variant=outlined] {
|
||||
background-color: var(--md-sys-color-surface);
|
||||
border: 1px solid var(--md-sys-color-outline-variant);
|
||||
}
|
||||
:host[data-variant=outlined].interactive {
|
||||
cursor: pointer;
|
||||
}
|
||||
:host[data-variant=outlined].interactive:enabled:hover, :host[data-variant=outlined].interactive:hover {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-surface), var(--md-sys-color-on-surface) 8%);
|
||||
}
|
||||
:host[data-variant=outlined].interactive.hover {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-surface), var(--md-sys-color-on-surface) 8%);
|
||||
}
|
||||
:host[data-variant=outlined].interactive:enabled:focus-visible, :host[data-variant=outlined].interactive:focus-visible {
|
||||
outline: none;
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-surface), var(--md-sys-color-on-surface) 10%);
|
||||
}
|
||||
:host[data-variant=outlined].interactive.focus {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-surface), var(--md-sys-color-on-surface) 10%);
|
||||
}
|
||||
:host[data-variant=outlined].interactive:enabled:active, :host[data-variant=outlined].interactive:active {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-surface), var(--md-sys-color-on-surface) 10%);
|
||||
}
|
||||
:host[data-variant=outlined].interactive.active {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-surface), var(--md-sys-color-on-surface) 10%);
|
||||
}
|
||||
:host[data-variant=outlined].interactive:disabled, :host[data-variant=outlined].interactive:disabled:active, :host[data-variant=outlined].interactive:disabled:hover, :host[data-variant=outlined].interactive:disabled:focus {
|
||||
pointer-events: none;
|
||||
background-color: transparent;
|
||||
border: 1px solid color-mix(in srgb, var(--md-sys-color-outline) 12%, transparent);
|
||||
}
|
||||
:host[data-variant=outlined].interactive.disabled {
|
||||
pointer-events: none;
|
||||
background-color: transparent;
|
||||
border: 1px solid color-mix(in srgb, var(--md-sys-color-outline) 12%, transparent);
|
||||
}
|
||||
|
||||
:host[data-variant=elevated] {
|
||||
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
|
||||
background-color: var(--md-sys-color-surface-container-low);
|
||||
}
|
||||
:host[data-variant=elevated].interactive {
|
||||
cursor: pointer;
|
||||
}
|
||||
:host[data-variant=elevated].interactive:disabled, :host[data-variant=elevated].interactive:disabled:active, :host[data-variant=elevated].interactive:disabled:hover, :host[data-variant=elevated].interactive:disabled:focus {
|
||||
pointer-events: none;
|
||||
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
:host[data-variant=elevated].interactive.disabled {
|
||||
pointer-events: none;
|
||||
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
:host[data-variant=elevated].interactive:enabled:hover, :host[data-variant=elevated].interactive:hover {
|
||||
box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
|
||||
background-color: color-mix(in hsl, var(--md-sys-color-surface-container-low), var(--md-sys-color-on-surface) 8%);
|
||||
}
|
||||
:host[data-variant=elevated].interactive.hover {
|
||||
box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
|
||||
background-color: color-mix(in hsl, var(--md-sys-color-surface-container-low), var(--md-sys-color-on-surface) 8%);
|
||||
}
|
||||
:host[data-variant=elevated].interactive:enabled:focus-visible, :host[data-variant=elevated].interactive:focus-visible {
|
||||
outline: none;
|
||||
box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
|
||||
background-color: color-mix(in hsl, var(--md-sys-color-surface-container-low), var(--md-sys-color-on-surface) 10%);
|
||||
}
|
||||
:host[data-variant=elevated].interactive.focus {
|
||||
box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
|
||||
background-color: color-mix(in hsl, var(--md-sys-color-surface-container-low), var(--md-sys-color-on-surface) 10%);
|
||||
}
|
||||
:host[data-variant=elevated].interactive:enabled:active, :host[data-variant=elevated].interactive:active {
|
||||
box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
|
||||
background-color: color-mix(in hsl, var(--md-sys-color-surface-container-low), var(--md-sys-color-on-surface) 10%);
|
||||
}
|
||||
:host[data-variant=elevated].interactive.active {
|
||||
box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
|
||||
background-color: color-mix(in hsl, var(--md-sys-color-surface-container-low), var(--md-sys-color-on-surface) 10%);
|
||||
}
|
||||
|
||||
.image {
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 12px 16px;
|
||||
overflow: hidden;
|
||||
color: var(--md-sys-color-on-surface);
|
||||
}
|
||||
|
||||
/*# sourceMappingURL=qd-card.css.map */
|
||||
1
projects/qd-design/src/lib/qd-card/qd-card.css.map
Normal file
1
projects/qd-design/src/lib/qd-card/qd-card.css.map
Normal file
@@ -0,0 +1 @@
|
||||
{"version":3,"sourceRoot":"","sources":["../../styles/qd_design_system.scss","../../styles/typography/typography.token.scss","../../styles/typography/typography.module.scss","../../styles/design/look_and_feel.scss","../../styles/colors/light-theme.scss","../../styles/colors/dark-theme.scss","qd-card.scss","../../styles/design/overall-design.scss"],"names":[],"mappings":"AAQQ;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;;;AC/CF;EHWE;EACA,gBGXiB;EACjB;EACA;;ACkDA;EACE;ED/CE;EACA;EACA;;ACiDJ;EACE;EDpDE;EACA;EACA;;AAGF;EACE;;AAGF;EACE;;;AAKN;EACE;;AAEA;EHoCA;;AIyBA;EAhFA;EDuBI;;AC6DJ;EApFA;EDuBI;;AC8CJ;EACE;EAtEF;ED4BI;;AC8CJ;EA1EA;ED4BI;;AC+BJ;EA3DA;EDiCI;;AC8BJ;EA/DA;EDiCI;;ACcJ;EACE;;AAIF;EACE;;;ADZJ;EACE;EACA;;AAEA;EHUA;;AIyBA;EDhCI;;ACoCJ;EDpCI;;ACqBJ;EACE;EDlBE;;ACsBJ;EDtBI;;ACOJ;EDHI;;ACOJ;EDPI;;ACTJ;EACE;EDYE;EACA;;ACTJ;EACE;EDOE;EACA;;;AAKN;EClEE;EDoEA;;AAEA;EHfA;;AIRA;EACE;EAhDF;;AAoDA;EACE;EArDF;;AAgFA;EA5EA;ED0EI;;ACMJ;EAhFA;ED0EI;;ACTJ;EACE;EAlEF;ED+EI;;ACTJ;EAtEA;ED+EI;;ACxBJ;EAvDA;EDoFI;;ACzBJ;EA3DA;EDoFI;;;AAKN;EACE;EACA;;;AAGF;EACE;EACA;EACA","file":"qd-card.css"}
|
||||
6
projects/qd-design/src/lib/qd-card/qd-card.html
Normal file
6
projects/qd-design/src/lib/qd-card/qd-card.html
Normal file
@@ -0,0 +1,6 @@
|
||||
<div class="image">
|
||||
<ng-content select="img[image], figure[image]"></ng-content>
|
||||
</div>
|
||||
<div class="content">
|
||||
<ng-content></ng-content>
|
||||
</div>
|
||||
111
projects/qd-design/src/lib/qd-card/qd-card.scss
Normal file
111
projects/qd-design/src/lib/qd-card/qd-card.scss
Normal file
@@ -0,0 +1,111 @@
|
||||
@use '../../styles/qd_design_system' as qd;
|
||||
|
||||
:host {
|
||||
@include qd.flex(column);
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
|
||||
&.disabled {
|
||||
@include qd.disabled {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
|
||||
cursor: default;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.image {
|
||||
opacity: 32%;
|
||||
}
|
||||
|
||||
.content {
|
||||
opacity: 32%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:host[data-variant='filled'] {
|
||||
background-color: var(--md-sys-color-surface-container-highest);
|
||||
|
||||
&.interactive {
|
||||
@include qd.clickable;
|
||||
@include qd.hover {
|
||||
@include qd.elevation-1;
|
||||
background-color: color-mix(in hsl, var(--md-sys-color-surface-container-highest), var(--md-sys-color-on-surface) 8%);
|
||||
}
|
||||
|
||||
@include qd.focus {
|
||||
@include qd.elevation-1;
|
||||
background-color: color-mix(in hsl, var(--md-sys-color-surface-container-highest), var(--md-sys-color-secondary) 12%);
|
||||
}
|
||||
|
||||
@include qd.active {
|
||||
@include qd.elevation-1;
|
||||
background-color: color-mix(in hsl, var(--md-sys-color-surface-container-highest), var(--md-sys-color-on-surface) 10%);
|
||||
}
|
||||
|
||||
@include qd.disabled {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:host[data-variant='outlined'] {
|
||||
background-color: var(--md-sys-color-surface);
|
||||
border: 1px solid var(--md-sys-color-outline-variant);
|
||||
|
||||
&.interactive {
|
||||
@include qd.clickable;
|
||||
@include qd.hover {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-surface), var(--md-sys-color-on-surface) 8%);
|
||||
}
|
||||
|
||||
@include qd.focus {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-surface), var(--md-sys-color-on-surface) 10%);
|
||||
}
|
||||
|
||||
@include qd.active {
|
||||
background-color: color-mix(in srgb, var(--md-sys-color-surface), var(--md-sys-color-on-surface) 10%);
|
||||
}
|
||||
|
||||
@include qd.disabled {
|
||||
background-color: transparent;
|
||||
border: 1px solid color-mix(in srgb, var(--md-sys-color-outline) 12%, transparent);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:host[data-variant='elevated'] {
|
||||
@include qd.elevation-1;
|
||||
background-color: var(--md-sys-color-surface-container-low);
|
||||
|
||||
&.interactive {
|
||||
@include qd.clickable;
|
||||
@include qd.disabled {
|
||||
@include qd.elevation-1;
|
||||
}
|
||||
|
||||
@include qd.hover {
|
||||
@include qd.elevation-2;
|
||||
background-color: color-mix(in hsl, var(--md-sys-color-surface-container-low), var(--md-sys-color-on-surface) 8%);
|
||||
}
|
||||
|
||||
@include qd.focus {
|
||||
@include qd.elevation-2;
|
||||
background-color: color-mix(in hsl, var(--md-sys-color-surface-container-low), var(--md-sys-color-on-surface) 10%);
|
||||
}
|
||||
|
||||
@include qd.active {
|
||||
@include qd.elevation-2;
|
||||
background-color: color-mix(in hsl, var(--md-sys-color-surface-container-low), var(--md-sys-color-on-surface) 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.image {
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 12px 16px;
|
||||
overflow: hidden;
|
||||
color: var(--md-sys-color-on-surface);
|
||||
}
|
||||
23
projects/qd-design/src/lib/qd-card/qd-card.spec.ts
Normal file
23
projects/qd-design/src/lib/qd-card/qd-card.spec.ts
Normal file
@@ -0,0 +1,23 @@
|
||||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { QdCard } from './qd-card';
|
||||
|
||||
describe('QdCard', () => {
|
||||
let component: QdCard;
|
||||
let fixture: ComponentFixture<QdCard>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
imports: [QdCard]
|
||||
})
|
||||
.compileComponents();
|
||||
|
||||
fixture = TestBed.createComponent(QdCard);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
49
projects/qd-design/src/lib/qd-card/qd-card.ts
Normal file
49
projects/qd-design/src/lib/qd-card/qd-card.ts
Normal file
@@ -0,0 +1,49 @@
|
||||
import {
|
||||
booleanAttribute,
|
||||
Component,
|
||||
ElementRef,
|
||||
HostBinding,
|
||||
HostListener, inject,
|
||||
input,
|
||||
output,
|
||||
OutputEmitterRef
|
||||
} from '@angular/core';
|
||||
import {NgOptimizedImage} from '@angular/common';
|
||||
import {QdButtonVariantDirective} from '../../directives/qd-button-variant';
|
||||
import {QdCardVariantDirective} from '../../directives/qd-card-variant';
|
||||
|
||||
@Component({
|
||||
selector: 'qd-card',
|
||||
imports: [],
|
||||
templateUrl: './qd-card.html',
|
||||
styleUrl: './qd-card.scss',
|
||||
host: {
|
||||
'[attr.tabindex]': 'clickable() && !disabled() ? "0" : null',
|
||||
'[attr.role]': 'clickable() && !disabled() ? "button" : null',
|
||||
'[class.interactive]': 'clickable() && !disabled()',
|
||||
'[class.disabled]': 'disabled()',
|
||||
'(keydown.enter)': 'handleKey($event)',
|
||||
'(keydown.space)': 'handleKey($event)'
|
||||
},
|
||||
standalone: true,
|
||||
hostDirectives: [
|
||||
{
|
||||
directive: QdCardVariantDirective,
|
||||
inputs: ['variant']
|
||||
}
|
||||
]
|
||||
})
|
||||
export class QdCard {
|
||||
clickable = input(false, { transform: booleanAttribute });
|
||||
disabled = input(false, { transform: booleanAttribute });
|
||||
|
||||
private element = inject(ElementRef);
|
||||
|
||||
handleKey(event: Event) {
|
||||
if (!this.clickable()) return;
|
||||
|
||||
event.preventDefault();
|
||||
|
||||
this.element.nativeElement.click();
|
||||
}
|
||||
}
|
||||
6
projects/qd-design/src/lib/qd-icon/qd-icon.html
Normal file
6
projects/qd-design/src/lib/qd-icon/qd-icon.html
Normal file
@@ -0,0 +1,6 @@
|
||||
<span class="material-icons"
|
||||
translate="no"
|
||||
[ngStyle]="{'width.px': size(),'height.px': size() }"
|
||||
aria-hidden="true">
|
||||
{{ iconName() }}
|
||||
</span>
|
||||
0
projects/qd-design/src/lib/qd-icon/qd-icon.scss
Normal file
0
projects/qd-design/src/lib/qd-icon/qd-icon.scss
Normal file
23
projects/qd-design/src/lib/qd-icon/qd-icon.spec.ts
Normal file
23
projects/qd-design/src/lib/qd-icon/qd-icon.spec.ts
Normal file
@@ -0,0 +1,23 @@
|
||||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { QdIcon } from './qd-icon';
|
||||
|
||||
describe('QdIcon', () => {
|
||||
let component: QdIcon;
|
||||
let fixture: ComponentFixture<QdIcon>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
imports: [QdIcon]
|
||||
})
|
||||
.compileComponents();
|
||||
|
||||
fixture = TestBed.createComponent(QdIcon);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
13
projects/qd-design/src/lib/qd-icon/qd-icon.ts
Normal file
13
projects/qd-design/src/lib/qd-icon/qd-icon.ts
Normal file
@@ -0,0 +1,13 @@
|
||||
import {Component, input} from '@angular/core';
|
||||
import {NgStyle} from '@angular/common';
|
||||
|
||||
@Component({
|
||||
selector: 'qd-icon',
|
||||
imports: [NgStyle],
|
||||
templateUrl: './qd-icon.html',
|
||||
styleUrl: './qd-icon.scss'
|
||||
})
|
||||
export class QdIcon {
|
||||
size = input<number>(24);
|
||||
iconName= input.required<String>();
|
||||
}
|
||||
@@ -0,0 +1,28 @@
|
||||
:host {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.tooltip-content {
|
||||
background-color: #1e1e1e;
|
||||
color: white;
|
||||
padding: 8px 12px;
|
||||
border-radius: 4px;
|
||||
font-size: 13px;
|
||||
max-width: 250px;
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
|
||||
pointer-events: none;
|
||||
animation: tooltip-fade 0.2s cubic-bezier(0, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
@keyframes tooltip-fade {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: scale(0.9);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
/*# sourceMappingURL=qd-plain-tooltip.css.map */
|
||||
@@ -0,0 +1 @@
|
||||
{"version":3,"sourceRoot":"","sources":["qd-plain-tooltip.scss"],"names":[],"mappings":"AAAA;EACE;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;;;AAGF;EACE;IAAO;IAAY;;EACnB;IAAK;IAAY","file":"qd-plain-tooltip.css"}
|
||||
@@ -0,0 +1,3 @@
|
||||
<div class="tooltip-container">
|
||||
{{ text() }}
|
||||
</div>
|
||||
@@ -0,0 +1,20 @@
|
||||
:host {
|
||||
display: block;
|
||||
}
|
||||
.tooltip-content {
|
||||
background-color: #1e1e1e;
|
||||
color: white;
|
||||
padding: 8px 12px;
|
||||
border-radius: 4px;
|
||||
font-size: 13px;
|
||||
max-width: 250px;
|
||||
box-shadow: 0 4px 6px rgba(0,0,0,0.3);
|
||||
pointer-events: none;
|
||||
|
||||
animation: tooltip-fade 0.2s cubic-bezier(0, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
@keyframes tooltip-fade {
|
||||
from { opacity: 0; transform: scale(0.9); }
|
||||
to { opacity: 1; transform: scale(1); }
|
||||
}
|
||||
@@ -0,0 +1,23 @@
|
||||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { QdPlainTooltip } from './qd-plain-tooltip';
|
||||
|
||||
describe('QdPlainTooltip', () => {
|
||||
let component: QdPlainTooltip;
|
||||
let fixture: ComponentFixture<QdPlainTooltip>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
imports: [QdPlainTooltip]
|
||||
})
|
||||
.compileComponents();
|
||||
|
||||
fixture = TestBed.createComponent(QdPlainTooltip);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,13 @@
|
||||
import {ChangeDetectionStrategy, Component, input} from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'qd-plain-tooltip',
|
||||
imports: [],
|
||||
templateUrl: './qd-plain-tooltip.html',
|
||||
standalone: true,
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
styleUrl: './qd-plain-tooltip.scss'
|
||||
})
|
||||
export class QdPlainTooltip {
|
||||
text = input<String>();
|
||||
}
|
||||
6
projects/qd-design/src/public-api.ts
Normal file
6
projects/qd-design/src/public-api.ts
Normal file
@@ -0,0 +1,6 @@
|
||||
/*
|
||||
* Public API Surface of qd-design
|
||||
*/
|
||||
|
||||
export * from './lib/qd-button/qd-button';
|
||||
export * from './directives/qd-button-variant';
|
||||
51
projects/qd-design/src/styles/colors/light-theme.scss
Normal file
51
projects/qd-design/src/styles/colors/light-theme.scss
Normal file
@@ -0,0 +1,51 @@
|
||||
@mixin light-theme-colors-tokens {
|
||||
--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);
|
||||
}
|
||||
94
projects/qd-design/src/styles/design/look_and_feel.scss
Normal file
94
projects/qd-design/src/styles/design/look_and_feel.scss
Normal file
@@ -0,0 +1,94 @@
|
||||
//variables
|
||||
$header-height-phone: 80px;
|
||||
$header-height-web: 40px;
|
||||
$header-width-web: 80px;
|
||||
$breakpoints: (max-phone: 767px,
|
||||
max-tablet: 959px,
|
||||
max-fanart: 1150px,
|
||||
max-small-desktop: 1599px);
|
||||
|
||||
$button-height: 40px;
|
||||
|
||||
//classes
|
||||
@mixin flex($direction) {
|
||||
display: flex;
|
||||
flex-direction: $direction;
|
||||
}
|
||||
|
||||
@mixin flex-fill($direction) {
|
||||
@include flex($direction);
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
@mixin flex-wrap($direction) {
|
||||
@include flex($direction);
|
||||
flex-flow: $direction wrap;
|
||||
}
|
||||
|
||||
@mixin flex-fill-wrap($direction) {
|
||||
@include flex-fill($direction);
|
||||
flex-flow: $direction wrap;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
@mixin clickable {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@mixin editable {
|
||||
cursor: text;
|
||||
}
|
||||
|
||||
//mixins responsive
|
||||
@mixin max-phone {
|
||||
@media only screen and (max-width: map-get($breakpoints, max-phone)) {
|
||||
@content
|
||||
}
|
||||
}
|
||||
|
||||
@mixin max-tablet {
|
||||
@media only screen and (max-width: map-get($breakpoints, max-tablet)) {
|
||||
@content
|
||||
}
|
||||
}
|
||||
|
||||
@mixin max-fanart {
|
||||
@media only screen and (max-width: map-get($breakpoints, max-fanart)) {
|
||||
@content
|
||||
}
|
||||
}
|
||||
|
||||
@mixin max-small-desktop {
|
||||
@media only screen and (max-width: map-get($breakpoints, max-small-desktop)) {
|
||||
@content
|
||||
}
|
||||
}
|
||||
234
projects/qd-design/src/styles/design/overall-design.scss
Normal file
234
projects/qd-design/src/styles/design/overall-design.scss
Normal file
@@ -0,0 +1,234 @@
|
||||
@use 'look_and_feel';
|
||||
|
||||
//variables
|
||||
$backdrop-filter-blur: blur(10px);
|
||||
$box-shadow: 0px 3px 1px 0px rgba(0, 0, 0, 0.04), 0px 3px 8px 0px rgba(0, 0, 0, 0.12);
|
||||
$border-radius: 20px;
|
||||
|
||||
@mixin elevation-1 {
|
||||
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.30);
|
||||
}
|
||||
|
||||
@mixin elevation-2 {
|
||||
box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.30);
|
||||
}
|
||||
|
||||
@mixin elevation-3 {
|
||||
box-shadow: 0 4px 8px 3px rgba(0, 0, 0, 0.15), 0 1px 3px 0 rgba(0, 0, 0, 0.30);
|
||||
}
|
||||
|
||||
@mixin elevation-4 {
|
||||
box-shadow: 0 6px 10px 4px rgba(0, 0, 0, 0.15), 0 2px 3px 0 rgba(0, 0, 0, 0.30);
|
||||
}
|
||||
|
||||
@mixin elevation-5 {
|
||||
box-shadow: 0 8px 12px 6px rgba(0, 0, 0, 0.15), 0 4px 4px 0 rgba(0, 0, 0, 0.30);
|
||||
}
|
||||
|
||||
@mixin scrollable {
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
margin-right: 20px;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
background: transparent;
|
||||
width: 12px;
|
||||
overflow: hidden;
|
||||
|
||||
&-thumb {
|
||||
background-color: var(--md-sys-color-primary);
|
||||
border: 4px solid var(--md-sys-color-surface-container);
|
||||
border-radius: 8px;
|
||||
background-clip: border-box;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
&-track {
|
||||
background-color: transparent;
|
||||
border-bottom-right-radius: 21px;
|
||||
border-top-right-radius: 21px;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin disabled {
|
||||
&:disabled, &:disabled:active, &:disabled:hover, &:disabled:focus {
|
||||
pointer-events: none;
|
||||
@content
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
pointer-events: none;
|
||||
@content
|
||||
}
|
||||
}
|
||||
|
||||
@mixin active {
|
||||
&:enabled:active, &:active {
|
||||
@content
|
||||
}
|
||||
|
||||
&.active {
|
||||
@content
|
||||
}
|
||||
}
|
||||
|
||||
@mixin focus {
|
||||
&:enabled:focus-visible, &:focus-visible {
|
||||
outline: none;
|
||||
@content
|
||||
}
|
||||
|
||||
&.focus {
|
||||
@content
|
||||
}
|
||||
}
|
||||
|
||||
@mixin hover {
|
||||
&:enabled:hover, &:hover {
|
||||
@content
|
||||
}
|
||||
|
||||
&.hover {
|
||||
@content
|
||||
}
|
||||
}
|
||||
|
||||
@mixin input {
|
||||
@include flex-fill(row);
|
||||
@include editable;
|
||||
border: 1px solid var(--md-sys-color-outline);
|
||||
border-radius: 20px;
|
||||
height: 40px;
|
||||
padding-left: 16px;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
|
||||
.trail {
|
||||
@include flex(row);
|
||||
background-color: transparent;
|
||||
border-radius: 20px;
|
||||
height: 100%;
|
||||
min-width: 8px;
|
||||
padding: 0 8px;
|
||||
width: fit-content;
|
||||
|
||||
.icon {
|
||||
@include input-icon;
|
||||
}
|
||||
}
|
||||
|
||||
.filename {
|
||||
@extend .body-large;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
color: var(--md-sys-color-on-surface);
|
||||
display: block;
|
||||
flex: 1 1 auto;
|
||||
margin: auto 0;
|
||||
max-width: 100%;
|
||||
min-width: 40px;
|
||||
overflow: hidden;
|
||||
padding: 4px 0;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
|
||||
.label {
|
||||
@extend .body-medium;
|
||||
color: var(--md-sys-color-on-surface);
|
||||
left: 0;
|
||||
min-width: 40px;
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
top: 0;
|
||||
transition: all 500ms ease-in-out;
|
||||
translate: 16px 11px;
|
||||
|
||||
&.alwaysTop {
|
||||
@extend .body-small;
|
||||
padding: 0 4px;
|
||||
translate: 16px -9px;
|
||||
}
|
||||
}
|
||||
|
||||
.input {
|
||||
@include flex(row);
|
||||
@extend .body-large;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
color: var(--md-sys-color-on-surface);
|
||||
flex: 1 1 auto;
|
||||
margin: auto 0;
|
||||
padding: 4px 0;
|
||||
width: 100%;
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
@include focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
&:focus ~ label, &:valid ~ label {
|
||||
@extend .body-small;
|
||||
padding: 0 4px;
|
||||
translate: 16px -9px;
|
||||
}
|
||||
}
|
||||
|
||||
@include disabled {
|
||||
border: 1px solid var(--md-sys-color-on-surface-opacity-012);
|
||||
pointer-events: none;
|
||||
|
||||
.filename {
|
||||
@extend .opacity-038;
|
||||
}
|
||||
|
||||
.label {
|
||||
@extend .opacity-038;
|
||||
}
|
||||
|
||||
.input {
|
||||
@extend .opacity-038;
|
||||
}
|
||||
|
||||
.trail {
|
||||
.icon {
|
||||
@extend .opacity-038;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.error {
|
||||
border: 1px solid var(--md-sys-color-error);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin input-icon {
|
||||
color: var(--md-sys-color-on-surface);
|
||||
height: fit-content;
|
||||
margin: auto 4px;
|
||||
width: fit-content;
|
||||
|
||||
&.clickable {
|
||||
@include clickable;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin error-container {
|
||||
@include flex(row);
|
||||
min-height: 15px;
|
||||
padding: 4px;
|
||||
|
||||
.error-message {
|
||||
@extend .body-small;
|
||||
color: var(--md-sys-color-error);
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
25
projects/qd-design/src/styles/qd_design_system.scss
Normal file
25
projects/qd-design/src/styles/qd_design_system.scss
Normal file
@@ -0,0 +1,25 @@
|
||||
@forward "typography/typography.token";
|
||||
@forward "typography/typography.module";
|
||||
@forward "design/overall-design";
|
||||
@forward "design/look_and_feel";
|
||||
|
||||
@use "colors/light-theme";
|
||||
@use 'colors/dark-theme';
|
||||
|
||||
@import url('https://fonts.googleapis.com/icon?family=Material+Icons');
|
||||
|
||||
body {
|
||||
@include light-theme.light-theme-colors-tokens;
|
||||
|
||||
transition: background-color 0.3s, color 0.3s;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
body:not(.light-theme) {
|
||||
@include dark-theme.dark-theme-colors-tokens;
|
||||
}
|
||||
}
|
||||
|
||||
body.dark-theme {
|
||||
@include dark-theme.dark-theme-colors-tokens;
|
||||
}
|
||||
164
projects/qd-design/src/styles/typography/typography.module.scss
Normal file
164
projects/qd-design/src/styles/typography/typography.module.scss
Normal file
@@ -0,0 +1,164 @@
|
||||
.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);
|
||||
}
|
||||
107
projects/qd-design/src/styles/typography/typography.token.scss
Normal file
107
projects/qd-design/src/styles/typography/typography.token.scss
Normal file
@@ -0,0 +1,107 @@
|
||||
: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;
|
||||
}
|
||||
18
projects/qd-design/tsconfig.lib.json
Normal file
18
projects/qd-design/tsconfig.lib.json
Normal file
@@ -0,0 +1,18 @@
|
||||
/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
|
||||
/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
|
||||
{
|
||||
"extends": "../../tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"outDir": "../../out-tsc/lib",
|
||||
"declaration": true,
|
||||
"declarationMap": true,
|
||||
"inlineSources": true,
|
||||
"types": []
|
||||
},
|
||||
"include": [
|
||||
"src/**/*.ts"
|
||||
],
|
||||
"exclude": [
|
||||
"**/*.spec.ts"
|
||||
]
|
||||
}
|
||||
11
projects/qd-design/tsconfig.lib.prod.json
Normal file
11
projects/qd-design/tsconfig.lib.prod.json
Normal file
@@ -0,0 +1,11 @@
|
||||
/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
|
||||
/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
|
||||
{
|
||||
"extends": "./tsconfig.lib.json",
|
||||
"compilerOptions": {
|
||||
"declarationMap": false
|
||||
},
|
||||
"angularCompilerOptions": {
|
||||
"compilationMode": "partial"
|
||||
}
|
||||
}
|
||||
14
projects/qd-design/tsconfig.spec.json
Normal file
14
projects/qd-design/tsconfig.spec.json
Normal file
@@ -0,0 +1,14 @@
|
||||
/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
|
||||
/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
|
||||
{
|
||||
"extends": "../../tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"outDir": "../../out-tsc/spec",
|
||||
"types": [
|
||||
"jasmine"
|
||||
]
|
||||
},
|
||||
"include": [
|
||||
"src/**/*.ts"
|
||||
]
|
||||
}
|
||||
@@ -11,6 +11,11 @@
|
||||
"skipLibCheck": true,
|
||||
"isolatedModules": true,
|
||||
"experimentalDecorators": true,
|
||||
"paths": {
|
||||
"qd-design": [
|
||||
"./dist/qd-design"
|
||||
]
|
||||
},
|
||||
"importHelpers": true,
|
||||
"target": "ES2022",
|
||||
"module": "preserve"
|
||||
@@ -22,5 +27,19 @@
|
||||
"typeCheckHostBindings": true,
|
||||
"strictTemplates": true
|
||||
},
|
||||
"files": []
|
||||
"files": [],
|
||||
"references": [
|
||||
{
|
||||
"path": "./projects/qd-design/tsconfig.lib.json"
|
||||
},
|
||||
{
|
||||
"path": "./projects/qd-design/tsconfig.spec.json"
|
||||
},
|
||||
{
|
||||
"path": "./projects/qd-design-demo/tsconfig.app.json"
|
||||
},
|
||||
{
|
||||
"path": "./projects/qd-design-demo/tsconfig.spec.json"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user