mirror of
https://github.com/zitadel/zitadel.git
synced 2025-12-11 06:42:17 +00:00
feat: Merge master (#1260)
* chore(site): dependabot deps (#1148) * chore(deps): bump highlight.js from 10.4.1 to 10.5.0 in /site (#1143) Bumps [highlight.js](https://github.com/highlightjs/highlight.js) from 10.4.1 to 10.5.0. - [Release notes](https://github.com/highlightjs/highlight.js/releases) - [Changelog](https://github.com/highlightjs/highlight.js/blob/master/CHANGES.md) - [Commits](https://github.com/highlightjs/highlight.js/compare/10.4.1...10.5.0) Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * chore(deps-dev): bump @babel/plugin-transform-runtime in /site (#1144) Bumps [@babel/plugin-transform-runtime](https://github.com/babel/babel/tree/HEAD/packages/babel-plugin-transform-runtime) from 7.12.1 to 7.12.10. - [Release notes](https://github.com/babel/babel/releases) - [Changelog](https://github.com/babel/babel/blob/main/CHANGELOG.md) - [Commits](https://github.com/babel/babel/commits/v7.12.10/packages/babel-plugin-transform-runtime) Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * chore(deps): bump sirv from 1.0.7 to 1.0.10 in /site (#1145) Bumps [sirv](https://github.com/lukeed/sirv) from 1.0.7 to 1.0.10. - [Release notes](https://github.com/lukeed/sirv/releases) - [Commits](https://github.com/lukeed/sirv/compare/v1.0.7...v1.0.10) Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * chore(deps-dev): bump rollup from 2.34.0 to 2.35.1 in /site (#1142) Bumps [rollup](https://github.com/rollup/rollup) from 2.34.0 to 2.35.1. - [Release notes](https://github.com/rollup/rollup/releases) - [Changelog](https://github.com/rollup/rollup/blob/master/CHANGELOG.md) - [Commits](https://github.com/rollup/rollup/compare/v2.34.0...v2.35.1) Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * chore(deps-dev): bump @rollup/plugin-node-resolve in /site (#1141) Bumps [@rollup/plugin-node-resolve](https://github.com/rollup/plugins) from 10.0.0 to 11.0.1. - [Release notes](https://github.com/rollup/plugins/releases) - [Commits](https://github.com/rollup/plugins/compare/node-resolve-v10.0.0...commonjs-v11.0.1) Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * chore(deps): bump marked from 1.2.5 to 1.2.7 in /site (#1140) Bumps [marked](https://github.com/markedjs/marked) from 1.2.5 to 1.2.7. - [Release notes](https://github.com/markedjs/marked/releases) - [Changelog](https://github.com/markedjs/marked/blob/master/release.config.js) - [Commits](https://github.com/markedjs/marked/compare/v1.2.5...v1.2.7) Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * chore(deps-dev): bump @babel/core from 7.12.9 to 7.12.10 in /site (#1139) Bumps [@babel/core](https://github.com/babel/babel/tree/HEAD/packages/babel-core) from 7.12.9 to 7.12.10. - [Release notes](https://github.com/babel/babel/releases) - [Changelog](https://github.com/babel/babel/blob/main/CHANGELOG.md) - [Commits](https://github.com/babel/babel/commits/v7.12.10/packages/babel-core) Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * chore(deps-dev): bump rollup-plugin-svelte from 6.1.1 to 7.0.0 in /site (#1138) Bumps [rollup-plugin-svelte](https://github.com/sveltejs/rollup-plugin-svelte) from 6.1.1 to 7.0.0. - [Release notes](https://github.com/sveltejs/rollup-plugin-svelte/releases) - [Changelog](https://github.com/sveltejs/rollup-plugin-svelte/blob/master/CHANGELOG.md) - [Commits](https://github.com/sveltejs/rollup-plugin-svelte/compare/v6.1.1...v7.0.0) Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * chore(deps-dev): bump @babel/preset-env from 7.12.1 to 7.12.11 in /site (#1137) Bumps [@babel/preset-env](https://github.com/babel/babel/tree/HEAD/packages/babel-preset-env) from 7.12.1 to 7.12.11. - [Release notes](https://github.com/babel/babel/releases) - [Changelog](https://github.com/babel/babel/blob/main/CHANGELOG.md) - [Commits](https://github.com/babel/babel/commits/v7.12.11/packages/babel-preset-env) Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * downgrade svelte plugin Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * chore(console): dependabot deps (#1147) * chore(deps-dev): bump @types/node from 14.14.13 to 14.14.19 in /console (#1146) Bumps [@types/node](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/HEAD/types/node) from 14.14.13 to 14.14.19. - [Release notes](https://github.com/DefinitelyTyped/DefinitelyTyped/releases) - [Commits](https://github.com/DefinitelyTyped/DefinitelyTyped/commits/HEAD/types/node) Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * chore(deps): bump ts-protoc-gen from 0.13.0 to 0.14.0 in /console (#1129) Bumps [ts-protoc-gen](https://github.com/improbable-eng/ts-protoc-gen) from 0.13.0 to 0.14.0. - [Release notes](https://github.com/improbable-eng/ts-protoc-gen/releases) - [Changelog](https://github.com/improbable-eng/ts-protoc-gen/blob/master/CHANGELOG.md) - [Commits](https://github.com/improbable-eng/ts-protoc-gen/compare/0.13.0...0.14.0) Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * chore(deps-dev): bump @angular/language-service in /console (#1128) Bumps [@angular/language-service](https://github.com/angular/angular/tree/HEAD/packages/language-service) from 11.0.4 to 11.0.5. - [Release notes](https://github.com/angular/angular/releases) - [Changelog](https://github.com/angular/angular/blob/master/CHANGELOG.md) - [Commits](https://github.com/angular/angular/commits/11.0.5/packages/language-service) Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * chore(deps-dev): bump @angular/cli from 11.0.4 to 11.0.5 in /console (#1127) Bumps [@angular/cli](https://github.com/angular/angular-cli) from 11.0.4 to 11.0.5. - [Release notes](https://github.com/angular/angular-cli/releases) - [Commits](https://github.com/angular/angular-cli/compare/v11.0.4...v11.0.5) Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * chore(deps-dev): bump @angular-devkit/build-angular in /console (#1126) Bumps [@angular-devkit/build-angular](https://github.com/angular/angular-cli) from 0.1100.4 to 0.1100.5. - [Release notes](https://github.com/angular/angular-cli/releases) - [Commits](https://github.com/angular/angular-cli/commits) Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Max Peintner <max@caos.ch> * audit Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * feat: e-mail templates (#1158) * View definition added * Get templates and texts from the database. * Fill in texts in templates * Fill in texts in templates * Client API added * Weekly backup * Weekly backup * Daily backup * Weekly backup * Tests added * Corrections from merge branch * Fixes from pull request review * chore(console): dependencies (#1189) * chore(deps-dev): bump @angular/language-service in /console (#1187) Bumps [@angular/language-service](https://github.com/angular/angular/tree/HEAD/packages/language-service) from 11.0.5 to 11.0.9. - [Release notes](https://github.com/angular/angular/releases) - [Changelog](https://github.com/angular/angular/blob/master/CHANGELOG.md) - [Commits](https://github.com/angular/angular/commits/11.0.9/packages/language-service) Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * chore(deps): bump google-proto-files from 2.3.0 to 2.4.0 in /console (#1186) Bumps [google-proto-files](https://github.com/googleapis/nodejs-proto-files) from 2.3.0 to 2.4.0. - [Release notes](https://github.com/googleapis/nodejs-proto-files/releases) - [Changelog](https://github.com/googleapis/nodejs-proto-files/blob/master/CHANGELOG.md) - [Commits](https://github.com/googleapis/nodejs-proto-files/compare/v2.3.0...v2.4.0) Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * chore(deps-dev): bump @types/node from 14.14.19 to 14.14.21 in /console (#1185) Bumps [@types/node](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/HEAD/types/node) from 14.14.19 to 14.14.21. - [Release notes](https://github.com/DefinitelyTyped/DefinitelyTyped/releases) - [Commits](https://github.com/DefinitelyTyped/DefinitelyTyped/commits/HEAD/types/node) Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * chore(deps-dev): bump @angular/cli from 11.0.5 to 11.0.7 in /console (#1184) Bumps [@angular/cli](https://github.com/angular/angular-cli) from 11.0.5 to 11.0.7. - [Release notes](https://github.com/angular/angular-cli/releases) - [Commits](https://github.com/angular/angular-cli/compare/v11.0.5...v11.0.7) Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * chore(deps-dev): bump karma from 5.2.3 to 6.0.0 in /console (#1183) Bumps [karma](https://github.com/karma-runner/karma) from 5.2.3 to 6.0.0. - [Release notes](https://github.com/karma-runner/karma/releases) - [Changelog](https://github.com/karma-runner/karma/blob/master/CHANGELOG.md) - [Commits](https://github.com/karma-runner/karma/compare/v5.2.3...v6.0.0) Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * chore(deps-dev): bump @angular-devkit/build-angular in /console (#1182) Bumps [@angular-devkit/build-angular](https://github.com/angular/angular-cli) from 0.1100.5 to 0.1100.7. - [Release notes](https://github.com/angular/angular-cli/releases) - [Commits](https://github.com/angular/angular-cli/commits) Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Max Peintner <max@caos.ch> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * fix(console): trigger unauthenticated dialog only once (#1170) * fix: trigger dialog once * remove log * typed trigger * chore(console): dependencies (#1205) * chore(deps-dev): bump stylelint from 13.8.0 to 13.9.0 in /console (#1204) Bumps [stylelint](https://github.com/stylelint/stylelint) from 13.8.0 to 13.9.0. - [Release notes](https://github.com/stylelint/stylelint/releases) - [Changelog](https://github.com/stylelint/stylelint/blob/master/CHANGELOG.md) - [Commits](https://github.com/stylelint/stylelint/compare/13.8.0...13.9.0) Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * chore(deps-dev): bump @angular/language-service in /console (#1203) Bumps [@angular/language-service](https://github.com/angular/angular/tree/HEAD/packages/language-service) from 11.0.9 to 11.1.0. - [Release notes](https://github.com/angular/angular/releases) - [Changelog](https://github.com/angular/angular/blob/master/CHANGELOG.md) - [Commits](https://github.com/angular/angular/commits/11.1.0/packages/language-service) Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * chore(deps-dev): bump karma from 6.0.0 to 6.0.1 in /console (#1202) Bumps [karma](https://github.com/karma-runner/karma) from 6.0.0 to 6.0.1. - [Release notes](https://github.com/karma-runner/karma/releases) - [Changelog](https://github.com/karma-runner/karma/blob/master/CHANGELOG.md) - [Commits](https://github.com/karma-runner/karma/compare/v6.0.0...v6.0.1) Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * chore(deps-dev): bump @angular/cli from 11.0.7 to 11.1.1 in /console (#1201) Bumps [@angular/cli](https://github.com/angular/angular-cli) from 11.0.7 to 11.1.1. - [Release notes](https://github.com/angular/angular-cli/releases) - [Commits](https://github.com/angular/angular-cli/compare/v11.0.7...v11.1.1) Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * chore(deps-dev): bump @types/jasmine from 3.6.2 to 3.6.3 in /console (#1200) Bumps [@types/jasmine](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/HEAD/types/jasmine) from 3.6.2 to 3.6.3. - [Release notes](https://github.com/DefinitelyTyped/DefinitelyTyped/releases) - [Commits](https://github.com/DefinitelyTyped/DefinitelyTyped/commits/HEAD/types/jasmine) Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Max Peintner <max@caos.ch> * chore(deps-dev): bump @types/node from 14.14.21 to 14.14.22 in /console (#1199) Bumps [@types/node](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/HEAD/types/node) from 14.14.21 to 14.14.22. - [Release notes](https://github.com/DefinitelyTyped/DefinitelyTyped/releases) - [Commits](https://github.com/DefinitelyTyped/DefinitelyTyped/commits/HEAD/types/node) Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * chore(deps-dev): bump @angular-devkit/build-angular in /console (#1198) Bumps [@angular-devkit/build-angular](https://github.com/angular/angular-cli) from 0.1100.7 to 0.1101.1. - [Release notes](https://github.com/angular/angular-cli/releases) - [Commits](https://github.com/angular/angular-cli/commits) Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Max Peintner <max@caos.ch> * chore(deps): bump angularx-qrcode from 10.0.11 to 11.0.0 in /console (#1197) Bumps [angularx-qrcode](https://github.com/cordobo/angularx-qrcode) from 10.0.11 to 11.0.0. - [Release notes](https://github.com/cordobo/angularx-qrcode/releases) - [Commits](https://github.com/cordobo/angularx-qrcode/compare/10.0.11...11.0.0) Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * fix pack lock Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * fix: handle sequence correctly in subscription (#1209) * fix: correct master after merges again (#1230) * chore(docs): correct `iss` claim of jwt profile (#1229) * core(docs): correct `iss` claim of jwt profile * fix: correct master after merges again (#1230) * feat(login): new palette based styles (#1149) * chore(deps-dev): bump rollup from 2.33.2 to 2.34.0 in /site (#1040) Bumps [rollup](https://github.com/rollup/rollup) from 2.33.2 to 2.34.0. - [Release notes](https://github.com/rollup/rollup/releases) - [Changelog](https://github.com/rollup/rollup/blob/master/CHANGELOG.md) - [Commits](https://github.com/rollup/rollup/compare/v2.33.2...v2.34.0) Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * chore(deps): bump svelte-i18n from 3.2.5 to 3.3.0 in /site (#1039) Bumps [svelte-i18n](https://github.com/kaisermann/svelte-i18n) from 3.2.5 to 3.3.0. - [Release notes](https://github.com/kaisermann/svelte-i18n/releases) - [Changelog](https://github.com/kaisermann/svelte-i18n/blob/main/CHANGELOG.md) - [Commits](https://github.com/kaisermann/svelte-i18n/compare/v3.2.5...v3.3.0) Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * chore(deps-dev): bump @rollup/plugin-url from 5.0.1 to 6.0.0 in /site (#1038) Bumps [@rollup/plugin-url](https://github.com/rollup/plugins) from 5.0.1 to 6.0.0. - [Release notes](https://github.com/rollup/plugins/releases) - [Commits](https://github.com/rollup/plugins/compare/url-v5.0.1...url-v6.0.0) Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * chore(deps-dev): bump svelte from 3.29.7 to 3.30.1 in /site (#1037) Bumps [svelte](https://github.com/sveltejs/svelte) from 3.29.7 to 3.30.1. - [Release notes](https://github.com/sveltejs/svelte/releases) - [Changelog](https://github.com/sveltejs/svelte/blob/master/CHANGELOG.md) - [Commits](https://github.com/sveltejs/svelte/compare/v3.29.7...v3.30.1) Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * chore(deps): bump marked from 1.2.4 to 1.2.5 in /site (#1036) Bumps [marked](https://github.com/markedjs/marked) from 1.2.4 to 1.2.5. - [Release notes](https://github.com/markedjs/marked/releases) - [Changelog](https://github.com/markedjs/marked/blob/master/release.config.js) - [Commits](https://github.com/markedjs/marked/compare/v1.2.4...v1.2.5) Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * chore(deps-dev): bump @babel/core from 7.12.3 to 7.12.9 in /site (#1035) Bumps [@babel/core](https://github.com/babel/babel/tree/HEAD/packages/babel-core) from 7.12.3 to 7.12.9. - [Release notes](https://github.com/babel/babel/releases) - [Changelog](https://github.com/babel/babel/blob/main/CHANGELOG.md) - [Commits](https://github.com/babel/babel/commits/v7.12.9/packages/babel-core) Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * chore(deps-dev): bump rollup-plugin-svelte from 6.1.1 to 7.0.0 in /site (#1034) Bumps [rollup-plugin-svelte](https://github.com/sveltejs/rollup-plugin-svelte) from 6.1.1 to 7.0.0. - [Release notes](https://github.com/sveltejs/rollup-plugin-svelte/releases) - [Changelog](https://github.com/sveltejs/rollup-plugin-svelte/blob/master/CHANGELOG.md) - [Commits](https://github.com/sveltejs/rollup-plugin-svelte/compare/v6.1.1...v7.0.0) Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * chore(deps-dev): bump @rollup/plugin-commonjs in /site (#1033) Bumps [@rollup/plugin-commonjs](https://github.com/rollup/plugins) from 15.1.0 to 17.0.0. - [Release notes](https://github.com/rollup/plugins/releases) - [Commits](https://github.com/rollup/plugins/compare/commonjs-v15.1.0...commonjs-v17.0.0) Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * chore(deps-dev): bump @rollup/plugin-node-resolve in /site (#1032) Bumps [@rollup/plugin-node-resolve](https://github.com/rollup/plugins) from 10.0.0 to 11.0.0. - [Release notes](https://github.com/rollup/plugins/releases) - [Commits](https://github.com/rollup/plugins/compare/node-resolve-v10.0.0...commonjs-v11.0.0) Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * chore(deps-dev): bump @babel/preset-env from 7.12.1 to 7.12.7 in /site (#1031) Bumps [@babel/preset-env](https://github.com/babel/babel/tree/HEAD/packages/babel-preset-env) from 7.12.1 to 7.12.7. - [Release notes](https://github.com/babel/babel/releases) - [Changelog](https://github.com/babel/babel/blob/main/CHANGELOG.md) - [Commits](https://github.com/babel/babel/commits/v7.12.7/packages/babel-preset-env) Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * go * bundle files, lgn-color, legacy theme * remove old references * light dark context, button styles, zitadel brand * button theme, edit templates * typography theme mixins * input styles, container, extend light dark palette * footer, palette, container * container, label, assets, header * action container, input, typography label, adapt button theme * a and footer styles, adapt palette * user log profile, resourcetempurl * postinstall againnn * wrochage * rm local grpc * button elevation, helper for components * radio * radio button mixins, bundle * qr code styles, secret clipboard, icon pack * stroked buttons, icon buttons, header action, typography * fix password policy styles * account selection * account selection, lgn avatar * mocks * template fixes, animations scss * checkbox, register temp * checkbox appr * fix checkbox, remove input interference * select theme * avatar script, user selection, password policy validation fix * fix formfield state for register and change pwd * footer, main style, qr code fix, mfa type fix, account sel, checkbox * fotter tos, user select * reverse buttons for intial submit action * theme script, themed error messages, header img source * content wrapper, i18n, mobile * emptyline * idp mixins, fix unstyled html * register container * register layout, list themes, policy theme, register org * massive asset cleanup * fix source path, add missing icon, fix complexity refs, prefix * remove material icons, unused assets, fix icon font * move icon pack * avatar, contrast theme, error fix * zitadel css map * revert go mod * fix mfa verify actions * add idp styles * fix google colors, idp styles * fix: bugs * fix register options, google * fix script, mobile layout * precompile font selection * go mod tidy * assets and cleanup * input suffix, fix alignment, actions, add progress bar themes * progress bar mixins, layout fixes * remove test from loginname * cleanup comments, scripts * clear comments * fix external back button * fix mfa alignment * fix actions layout, on dom change listener for suffix * free tier change, success label * fix: button font line-height * remove tabindex * remove comment * remove comment * Update internal/ui/login/handler/password_handler.go Co-authored-by: Livio Amstutz <livio.a@gmail.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Maximilian Peintner <csaq7175@uibk.ac.at> Co-authored-by: Livio Amstutz <livio.a@gmail.com> * chore(console): dependencies (#1233) * chore(deps-dev): bump @angular-devkit/build-angular in /console (#1214) Bumps [@angular-devkit/build-angular](https://github.com/angular/angular-cli) from 0.1101.1 to 0.1101.2. - [Release notes](https://github.com/angular/angular-cli/releases) - [Commits](https://github.com/angular/angular-cli/commits) Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * chore(deps-dev): bump karma from 6.0.1 to 6.0.3 in /console (#1215) Bumps [karma](https://github.com/karma-runner/karma) from 6.0.1 to 6.0.3. - [Release notes](https://github.com/karma-runner/karma/releases) - [Changelog](https://github.com/karma-runner/karma/blob/master/CHANGELOG.md) - [Commits](https://github.com/karma-runner/karma/compare/v6.0.1...v6.0.3) Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * chore(deps-dev): bump @angular/language-service in /console (#1216) Bumps [@angular/language-service](https://github.com/angular/angular/tree/HEAD/packages/language-service) from 11.1.0 to 11.1.1. - [Release notes](https://github.com/angular/angular/releases) - [Changelog](https://github.com/angular/angular/blob/master/CHANGELOG.md) - [Commits](https://github.com/angular/angular/commits/11.1.1/packages/language-service) Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * chore(deps-dev): bump @angular/cli from 11.1.1 to 11.1.2 in /console (#1217) Bumps [@angular/cli](https://github.com/angular/angular-cli) from 11.1.1 to 11.1.2. - [Release notes](https://github.com/angular/angular-cli/releases) - [Commits](https://github.com/angular/angular-cli/compare/v11.1.1...v11.1.2) Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Max Peintner <max@caos.ch> * lock * site deps Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * fix: get email texts with default language (#1238) * fix(login): mail verification (#1237) * fix: mail verification * not block, stroked * fix: issues of new login ui (#1241) * fix: i18n of register * fix: autofocus * feat(operator): zitadel and database operator (#1208) * feat(operator): add base for zitadel operator * fix(operator): changed pipeline to release operator * fix(operator): fmt with only one parameter * fix(operator): corrected workflow job name * fix(zitadelctl): added restore and backuplist command * fix(zitadelctl): scale for restore * chore(container): use scratch for deploy container * fix(zitadelctl): limit image to scratch * fix(migration): added migration scripts for newer version * fix(operator): changed handling of kubeconfig in operator logic * fix(operator): changed handling of secrets in operator logic * fix(operator): use new version of zitadel * fix(operator): added path for migrations * fix(operator): delete doublets of migration scripts * fix(operator): delete subpaths and integrate logic into init container * fix(operator): corrected path in dockerfile for local migrations * fix(operator): added migrations for cockroachdb-secure * fix(operator): delete logic for ambassador module * fix(operator): added read and write secret commands * fix(operator): correct and align operator pipeline with zitadel pipeline * fix(operator): correct yaml error in operator pipeline * fix(operator): correct action name in operator pipeline * fix(operator): correct case-sensitive filename in operator pipeline * fix(operator): upload artifacts from buildx output * fix(operator): corrected attribute spelling error * fix(operator): combined jobs for operator binary and image * fix(operator): added missing comma in operator pipeline * fix(operator): added codecov for operator image * fix(operator): added codecov for operator image * fix(testing): code changes for testing and several unit-tests (#1009) * fix(operator): usage of interface of kubernetes client for testing and several unit-tests * fix(operator): several unit-tests * fix(operator): several unit-tests * fix(operator): changed order for the operator logic * fix(operator): added version of zitadelctl from semantic release * fix(operator): corrected function call with version of zitadelctl * fix(operator): corrected function call with version of zitadelctl * fix(operator): add check output to operator release pipeline * fix(operator): set --short length everywhere to 12 * fix(operator): zitadel setup in job instead of exec with several unit tests * fix(operator): fixes to combine newest zitadel and testing branch * fix(operator): corrected path in Dockerfile * fix(operator): fixed unit-test that was ignored during changes * fix(operator): fixed unit-test that was ignored during changes * fix(operator): corrected Dockerfile to correctly use env variable * fix(operator): quickfix takeoff deployment * fix(operator): corrected the clusterrolename in the applied artifacts * fix: update secure migrations * fix(operator): migrations (#1057) * fix(operator): copied migrations from orbos repository * fix(operator): newest migrations * chore: use cockroach-secure * fix: rename migration * fix: remove insecure cockroach migrations Co-authored-by: Stefan Benz <stefan@caos.ch> * fix: finalize labels * fix(operator): cli logging concurrent and fixe deployment of operator during restore * fix: finalize labels and cli commands * fix: restore * chore: cockroachdb is always secure * chore: use orbos consistent-labels latest commit * test: make tests compatible with new labels * fix: default to sa token for start command * fix: use cockroachdb v12.02 * fix: don't delete flyway user * test: fix migration test * fix: use correct table qualifiers * fix: don't alter sequence ownership * fix: upgrade flyway * fix: change ownership of all dbs and tables to admin user * fix: change defaultdb user * fix: treat clientid status codes >= 400 as errors * fix: reconcile specified ZITADEL version, not binary version * fix: add ca-certs * fix: use latest orbos code * fix: use orbos with fixed race condition * fix: use latest ORBOS code * fix: use latest ORBOS code * fix: make migration and scaling around restoring work * fix(operator): move zitadel operator * chore(migrations): include owner change migration * feat(db): add code base for database operator * fix(db): change used image registry for database operator * fix(db): generated mock * fix(db): add accidentally ignored file * fix(db): add cockroachdb backup image to pipeline * fix(db): correct pipeline and image versions * fix(db): correct version of used orbos * fix(db): correct database import * fix(db): go mod tidy * fix(db): use new version for orbos * fix(migrations): include migrations into zitadelctl binary (#1211) * fix(db): use statik to integrate migrations into binary * fix(migrations): corrections unit tests and pipeline for integrated migrations into zitadelctl binary * fix(migrations): correction in dockerfile for pipeline build * fix(migrations): correction in dockerfile for pipeline build * fix(migrations): dockerfile changes for cache optimization * fix(database): correct used part-of label in database operator * fix(database): correct used selectable label in zitadel operator * fix(operator): correct lables for user secrets in zitadel operator * fix(operator): correct lables for service test in zitadel operator * fix: don't enable database features for user operations (#1227) * fix: don't enable database features for user operations * fix: omit database feature for connection info adapter * fix: use latest orbos version * fix: update ORBOS (#1240) Co-authored-by: Florian Forster <florian@caos.ch> Co-authored-by: Elio Bischof <eliobischof@gmail.com> * Merge branch 'new-eventstore' into cascades # Conflicts: # internal/auth/repository/auth_request.go # internal/auth/repository/eventsourcing/eventstore/auth_request.go # internal/management/repository/eventsourcing/eventstore/user_grant.go # internal/management/repository/user_grant.go # internal/ui/login/handler/external_login_handler.go # internal/ui/login/handler/external_register_handler.go # internal/ui/login/handler/init_password_handler.go # internal/ui/login/handler/register_handler.go # internal/user/repository/view/model/notify_user.go # internal/v2/command/org_policy_login.go # internal/v2/command/project.go # internal/v2/command/user.go # internal/v2/command/user_human.go # internal/v2/command/user_human_externalidp.go # internal/v2/command/user_human_init.go # internal/v2/command/user_human_password.go # internal/v2/command/user_human_webauthn.go # internal/v2/domain/next_step.go # internal/v2/domain/policy_login.go # internal/v2/domain/request.go * chore: add local migrate_local.go again (#1261) Co-authored-by: Max Peintner <max@caos.ch> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Michael Waeger <49439088+michaelulrichwaeger@users.noreply.github.com> Co-authored-by: Livio Amstutz <livio.a@gmail.com> Co-authored-by: Maximilian Peintner <csaq7175@uibk.ac.at> Co-authored-by: Stefan Benz <46600784+stebenz@users.noreply.github.com> Co-authored-by: Florian Forster <florian@caos.ch> Co-authored-by: Elio Bischof <eliobischof@gmail.com>
This commit is contained in:
Fabi
@@ -0,0 +1,10 @@
|
||||
a {
|
||||
text-decoration: none;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
margin: 2px 0;
|
||||
|
||||
&.block {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,24 @@
|
||||
@import './a.scss';
|
||||
|
||||
@mixin lgn-a-theme($theme-or-color-config) {
|
||||
$theme: lgn-private-legacy-get-theme($theme-or-color-config);
|
||||
$color: lgn-get-color-config($theme);
|
||||
|
||||
@if $color != null {
|
||||
@include lgn-a-color($color);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin lgn-a-color($config-or-theme) {
|
||||
$config: lgn-get-color-config($config-or-theme);
|
||||
$primary: map-get($config, primary);
|
||||
|
||||
a {
|
||||
color: lgn-color($primary, default);
|
||||
|
||||
&:hover,
|
||||
&:active {
|
||||
color: lgn-color($primary, 400);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,51 @@
|
||||
$lgn-container-max-width: 380px;
|
||||
$lgn-container-padding: 20px;
|
||||
$lgn-container-margin: 0px auto 50px auto;
|
||||
|
||||
.lgn-account-selection{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
|
||||
.lgn-account {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border: none;
|
||||
outline: none;
|
||||
|
||||
.left {
|
||||
padding: .5rem 1rem;
|
||||
}
|
||||
|
||||
.lgn-names {
|
||||
display: block;
|
||||
margin: .5rem;
|
||||
text-align: start;
|
||||
|
||||
.lgn-displayname{
|
||||
font-size: 16px;
|
||||
margin: .5rem 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.lgn-loginname{
|
||||
font-size: 14px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.lgn-session-state {
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
margin-bottom: .5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.fill-space {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
i {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,62 @@
|
||||
@import './account_selection.scss';
|
||||
|
||||
@mixin lgn-account-selection-theme($theme-or-color-config) {
|
||||
$theme: lgn-private-legacy-get-theme($theme-or-color-config);
|
||||
$color: lgn-get-color-config($theme);
|
||||
|
||||
@if $color != null {
|
||||
@include lgn-account-selection-color($color);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin lgn-account-selection-color($config-or-theme) {
|
||||
$config: lgn-get-color-config($config-or-theme);
|
||||
$warn: map-get($config, warn);
|
||||
$primary: map-get($config, primary);
|
||||
$foreground: map-get($config, foreground);
|
||||
$background: map-get($config, background);
|
||||
|
||||
.lgn-account-selection{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
|
||||
.lgn-account {
|
||||
color: inherit;
|
||||
background: transparent;
|
||||
box-shadow: inset 0 -1px lgn-color($foreground, footer-line);
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
$primary: map-get($config, primary);
|
||||
background-color: lgn-color($background, account-selector-hover);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
background-color: lgn-color($background, account-selector-active);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: lgn-color($background, account-selector-active);
|
||||
}
|
||||
|
||||
.lgn-loginname{
|
||||
font-size: 14px;
|
||||
color: lgn-color($foreground, label);
|
||||
}
|
||||
|
||||
.lgn-session-state {
|
||||
color: lgn-color($foreground, label);
|
||||
|
||||
&.i0 {
|
||||
color: #85d996;
|
||||
}
|
||||
|
||||
&.i1 {
|
||||
$warn: map-get($config, warn);
|
||||
color: lgn-color($warn, default);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,22 @@
|
||||
@keyframes shake {
|
||||
10%, 90% {
|
||||
transform: translate3d(-1px, 0, 0);
|
||||
}
|
||||
|
||||
20%, 80% {
|
||||
transform: translate3d(2px, 0, 0);
|
||||
}
|
||||
|
||||
30%, 50%, 70% {
|
||||
transform: translate3d(-4px, 0, 0);
|
||||
}
|
||||
|
||||
40%, 60% {
|
||||
transform: translate3d(4px, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
[shake] {
|
||||
animation: shake .8s cubic-bezier(.36,.07,.19,.97) both;
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
@@ -0,0 +1,18 @@
|
||||
$lgn-container-max-width: 380px;
|
||||
$lgn-container-padding: 20px;
|
||||
$lgn-avatar-size: 32px;
|
||||
|
||||
.lgn-avatar {
|
||||
height: $lgn-avatar-size;
|
||||
width: $lgn-avatar-size;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-transform: uppercase;
|
||||
box-sizing: border-box;
|
||||
letter-spacing: .05em;
|
||||
font-size: 14px;
|
||||
outline: none;
|
||||
font-weight: bold;
|
||||
}
|
||||
@@ -0,0 +1,66 @@
|
||||
@import './avatar.scss';
|
||||
@import "../elevation/elevation.scss";
|
||||
|
||||
@mixin lgn-avatar-theme($theme-or-color-config) {
|
||||
$theme: lgn-private-legacy-get-theme($theme-or-color-config);
|
||||
$color: lgn-get-color-config($theme);
|
||||
|
||||
@if $color != null {
|
||||
@include lgn-avatar-color($color);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin lgn-avatar-color($config-or-theme) {
|
||||
$config: lgn-get-color-config($config-or-theme);
|
||||
$warn: map-get($config, warn);
|
||||
$primary: map-get($config, primary);
|
||||
|
||||
.lgn-avatar:not(.transparent) {
|
||||
@include _lgn-avatar-theme-property($config, "background-color", default);
|
||||
@include lgn-button-elevation(2, $config);
|
||||
}
|
||||
|
||||
.lgn-avatar .initials{
|
||||
@include _lgn-avatar-theme-property($config, "color", default-contrast);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin _lgn-avatar-theme-property($theme, $property, $hue) {
|
||||
$primary: map-get($theme, primary);
|
||||
$accent: map-get($theme, accent);
|
||||
$warn: map-get($theme, warn);
|
||||
$background: map-get($theme, background);
|
||||
$foreground: map-get($theme, foreground);
|
||||
|
||||
&.lgn-primary {
|
||||
#{$property}: lgn-color($primary, $hue);
|
||||
}
|
||||
&.lgn-accent {
|
||||
#{$property}: lgn-color($accent, $hue);
|
||||
}
|
||||
&.lgn-warn {
|
||||
#{$property}: lgn-color($warn, $hue);
|
||||
}
|
||||
|
||||
&.lgn-primary,
|
||||
&.lgn-accent,
|
||||
&.lgn-warn,
|
||||
&[disabled] {
|
||||
&[disabled] {
|
||||
$palette: if($property == "color", $foreground, $background);
|
||||
#{$property}: lgn-color($palette, disabled-button);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin lgn-avatar-elevation($zValue, $config, $opacity: $lgn-elevation-opacity) {
|
||||
$foreground: map-get($config, foreground);
|
||||
$elevation-color: map-get($foreground, elevation);
|
||||
$elevation-color-or-default: if(
|
||||
$elevation-color == null,
|
||||
$lgn-elevation-color,
|
||||
$elevation-color
|
||||
);
|
||||
|
||||
@include lgn-elevation($zValue, $elevation-color-or-default, $opacity);
|
||||
}
|
||||
@@ -0,0 +1,40 @@
|
||||
@import './button_base.scss';
|
||||
|
||||
.lgn-button, .lgn-stroked-button, .lgn-icon-button {
|
||||
@include lgn-button-base;
|
||||
}
|
||||
|
||||
.lgn-raised-button {
|
||||
@include lgn-raised-button;
|
||||
}
|
||||
|
||||
.lgn-icon-button {
|
||||
padding: 0;
|
||||
min-width: 0;
|
||||
width: $lgn-icon-button-size;
|
||||
height: $lgn-icon-button-size;
|
||||
flex-shrink: 0;
|
||||
line-height: $lgn-icon-button-size;
|
||||
border-radius: $lgn-icon-button-border-radius;
|
||||
|
||||
i, .mat-icon {
|
||||
line-height: $lgn-icon-button-line-height;
|
||||
}
|
||||
}
|
||||
|
||||
.lgn-stroked-button {
|
||||
border: $lgn-stroked-button-border-width solid currentColor;
|
||||
padding: $lgn-stroked-button-padding;
|
||||
line-height: $lgn-stroked-button-line-height;
|
||||
}
|
||||
|
||||
.lgn-button:focus {
|
||||
pointer-events: none;
|
||||
transition: $lgn-button-focus-transition;
|
||||
}
|
||||
|
||||
.lgn-button, .lgn-stroked-button, .lgn-raised-button {
|
||||
* {
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,59 @@
|
||||
$lgn-button-padding: 0 16px !default;
|
||||
$lgn-button-min-width: 64px !default;
|
||||
$lgn-button-margin: 0 !default;
|
||||
$lgn-button-line-height: 36px !default;
|
||||
$lgn-button-border-radius: 6px !default;
|
||||
$lgn-button-focus-transition: opacity 200ms cubic-bezier(0.35, 0, 0.25, 1),
|
||||
background-color 200ms cubic-bezier(0.35, 0, 0.25, 1) !default;
|
||||
|
||||
// Stroked button padding is 1px less horizontally than default or raised lgn button
|
||||
// button's padding.
|
||||
$lgn-stroked-button-line-height: $lgn-button-line-height - 2;
|
||||
$lgn-stroked-button-padding: 0 15px;
|
||||
$lgn-stroked-button-border-width: 1px;
|
||||
|
||||
$lgn-icon-button-size: 40px !default;
|
||||
$lgn-icon-button-border-radius: 50% !default;
|
||||
$lgn-icon-button-line-height: 24px !default;
|
||||
|
||||
// adds base styles to all button types.
|
||||
@mixin lgn-button-base {
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
border: none;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
|
||||
// Make anchors (a href) render like buttons.
|
||||
display: inline-block;
|
||||
white-space: nowrap;
|
||||
text-decoration: none;
|
||||
vertical-align: baseline;
|
||||
text-align: center;
|
||||
|
||||
// Sizing.
|
||||
margin: $lgn-button-margin;
|
||||
min-width: $lgn-button-min-width;
|
||||
line-height: $lgn-button-line-height;
|
||||
padding: $lgn-button-padding;
|
||||
border-radius: $lgn-button-border-radius;
|
||||
|
||||
overflow: visible;
|
||||
|
||||
&[disabled] {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
&::-moz-focus-inner {
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Applies styles to buttons with backgrounds: raised
|
||||
@mixin lgn-raised-button {
|
||||
@include lgn-button-base;
|
||||
|
||||
// Force hardware acceleration.
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
@@ -0,0 +1,160 @@
|
||||
@import "../theming/theming.scss";
|
||||
@import "./button.scss";
|
||||
@import "../elevation/elevation.scss";
|
||||
|
||||
@mixin lgn-button-theme($theme-or-color-config) {
|
||||
$theme: lgn-private-legacy-get-theme($theme-or-color-config);
|
||||
$color: lgn-get-color-config($theme);
|
||||
|
||||
@if $color != null {
|
||||
@include lgn-button-color($color);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin lgn-button-color($config-or-theme) {
|
||||
$config: lgn-get-color-config($config-or-theme);
|
||||
$primary: map-get($config, primary);
|
||||
$accent: map-get($config, accent);
|
||||
$warn: map-get($config, warn);
|
||||
$background: map-get($config, background);
|
||||
$foreground: map-get($config, foreground);
|
||||
|
||||
.lgn-button,
|
||||
.lgn-stroked-button,
|
||||
.lgn-icon-button {
|
||||
color: inherit;
|
||||
background: transparent;
|
||||
|
||||
@include _lgn-button-theme-property($config, "color", text);
|
||||
}
|
||||
|
||||
.lgn-button:focus,
|
||||
.lgn-stroked-button:focus,
|
||||
.lgn-raised-button:focus {
|
||||
@include lgn-button-elevation(8, $config);
|
||||
background: map-get($background, base);
|
||||
}
|
||||
|
||||
.lgn-stroked-button:not([disabled]) {
|
||||
border-color: lgn-color($foreground, divider);
|
||||
}
|
||||
|
||||
.lgn-button {
|
||||
@include _lgn-button-theme-property($config, "color", text);
|
||||
&:hover {
|
||||
$primary: map-get($config, primary);
|
||||
background-color: rgba(lgn-color($primary, 500), 0.1);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
background-color: rgba(lgn-color($primary, 500), 0.2);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: rgba(lgn-color($primary, 500), 0.25);
|
||||
}
|
||||
}
|
||||
|
||||
.lgn-raised-button {
|
||||
color: lgn-color($foreground, text);
|
||||
background-color: lgn-color($background, raised-button);
|
||||
|
||||
@include _lgn-button-theme-property($config, "color", default-contrast);
|
||||
@include _lgn-button-theme-property($config, "background-color", default);
|
||||
|
||||
&:active {
|
||||
background-color: rgba(lgn-color($primary, 500), 0.8);
|
||||
}
|
||||
}
|
||||
|
||||
.lgn-button,
|
||||
.lgn-stroked-button {
|
||||
@include lgn-button-elevation(0, $config);
|
||||
}
|
||||
|
||||
.lgn-raised-button {
|
||||
@include lgn-button-elevation(2, $config);
|
||||
|
||||
&:not([disabled]):active {
|
||||
@include lgn-button-elevation(8, $config);
|
||||
}
|
||||
|
||||
// &:focus {
|
||||
// @include lgn-b-elevation(8, $config);
|
||||
// }
|
||||
|
||||
&[disabled] {
|
||||
@include lgn-button-elevation(0, $config);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin _lgn-button-theme-property($theme, $property, $hue) {
|
||||
$primary: map-get($theme, primary);
|
||||
$accent: map-get($theme, accent);
|
||||
$warn: map-get($theme, warn);
|
||||
$background: map-get($theme, background);
|
||||
$foreground: map-get($theme, foreground);
|
||||
|
||||
&.lgn-primary {
|
||||
#{$property}: lgn-color($primary, $hue);
|
||||
}
|
||||
&.lgn-accent {
|
||||
#{$property}: lgn-color($accent, $hue);
|
||||
}
|
||||
&.lgn-warn {
|
||||
#{$property}: lgn-color($warn, $hue);
|
||||
}
|
||||
|
||||
&.lgn-primary,
|
||||
&.lgn-accent,
|
||||
&.lgn-warn,
|
||||
&[disabled] {
|
||||
&[disabled] {
|
||||
$palette: if($property == "color", $foreground, $background);
|
||||
#{$property}: lgn-color($palette, disabled-button);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin _lgn-button-focus-overlay-color($config-or-theme) {
|
||||
$config: lgn-get-color-config($config-or-theme);
|
||||
$primary: map-get($config, primary);
|
||||
$accent: map-get($config, accent);
|
||||
$warn: map-get($config, warn);
|
||||
|
||||
&.lgn-primary:focus {
|
||||
background-color: lgn-color($primary);
|
||||
}
|
||||
|
||||
&.lgn-accent:focus {
|
||||
background-color: lgn-color($accent);
|
||||
}
|
||||
|
||||
&.lgn-warn:focus {
|
||||
background-color: lgn-color($warn);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin lgn-button-elevation($zValue, $config, $opacity: $lgn-elevation-opacity) {
|
||||
$foreground: map-get($config, foreground);
|
||||
$elevation-color: map-get($foreground, elevation);
|
||||
$elevation-color-or-default: if(
|
||||
$elevation-color == null,
|
||||
$lgn-elevation-color,
|
||||
$elevation-color
|
||||
);
|
||||
|
||||
@include lgn-elevation($zValue, $elevation-color-or-default, $opacity);
|
||||
}
|
||||
|
||||
@mixin lgn-button-typography($config-or-theme) {
|
||||
$config: lgn-get-typography-config($config-or-theme);
|
||||
.lgn-button, .lgn-raised-button, .lgn-icon-button, .lgn-stroked-button {
|
||||
font: {
|
||||
family: lgn-font-family($config, button);
|
||||
size: lgn-font-size($config, button);
|
||||
weight: lgn-font-weight($config, button);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
@import './checkbox_base.scss';
|
||||
|
||||
.lgn-checkbox {
|
||||
@include lgn-checkbox-base;
|
||||
}
|
||||
@@ -0,0 +1,54 @@
|
||||
$lgn-checkbox-font-size: 14px !default;
|
||||
|
||||
@mixin lgn-checkbox-base {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
margin: 0 0 10px;
|
||||
font-size: $lgn-checkbox-font-size;
|
||||
line-height: 24px;
|
||||
box-sizing: inherit;
|
||||
|
||||
input[type='checkbox'] {
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
left: 0;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
opacity: 0;
|
||||
z-index: 0;
|
||||
box-sizing: inherit;
|
||||
}
|
||||
|
||||
// Unchecked
|
||||
label {
|
||||
display: block;
|
||||
padding: 0 0 0 30px;
|
||||
cursor: pointer;
|
||||
box-sizing: inherit;
|
||||
font-size: $lgn-checkbox-font-size;
|
||||
line-height: 28px;
|
||||
|
||||
&:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
left: 0;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border-radius: 2px;
|
||||
transition: all .28s cubic-bezier(.4, 0, .2, 1);
|
||||
transition-property: background-color, border-color;
|
||||
}
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
left: 5px;
|
||||
width: 6px;
|
||||
height: 12px;
|
||||
transform: rotate(45deg);
|
||||
transition: border-color .28s cubic-bezier(.4, 0, .2, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,55 @@
|
||||
@import '../theming/theming.scss';
|
||||
@import './checkbox.scss';
|
||||
|
||||
@mixin lgn-checkbox-theme($theme-or-color-config) {
|
||||
$theme: lgn-private-legacy-get-theme($theme-or-color-config);
|
||||
$color: lgn-get-color-config($theme);
|
||||
|
||||
@if $color != null {
|
||||
@include lgn-checkbox-color($color);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin lgn-checkbox-color($config-or-theme) {
|
||||
$config: lgn-get-color-config($config-or-theme);
|
||||
$primary: map-get($config, primary);
|
||||
$warn: map-get($config, warn);
|
||||
$background: map-get($config, background);
|
||||
$foreground: map-get($config, foreground);
|
||||
|
||||
input[type='checkbox'] {
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
left: 0;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
opacity: 0;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
// Unchecked
|
||||
.lgn-checkbox label {
|
||||
&:before {
|
||||
background-color: transparent;
|
||||
border: 2px solid lgn-color($foreground, input-border);
|
||||
}
|
||||
|
||||
&:after {
|
||||
border-bottom: 2px solid transparent;
|
||||
border-right: 2px solid transparent;
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
// Checked
|
||||
input[type='checkbox']:checked + label {
|
||||
&:before {
|
||||
background-color: lgn-color($primary, default);
|
||||
border-color: lgn-color($primary, default);
|
||||
}
|
||||
|
||||
&:after {
|
||||
border-color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,19 @@
|
||||
@import '../theming/all.scss';
|
||||
@import '../theming/theming.scss';
|
||||
|
||||
// Includes all of the color styles.
|
||||
@mixin zitadel-lgn-color($config-or-theme) {
|
||||
// In case a theme object has been passed instead of a configuration for
|
||||
// the color system, extract the color config from the theme object.
|
||||
$config: if(lgn-private-is-theme-object($config-or-theme),
|
||||
lgn-get-color-config($config-or-theme), $config-or-theme);
|
||||
|
||||
@if $config == null {
|
||||
@error 'No color configuration specified.';
|
||||
}
|
||||
|
||||
// includes all themes with given color
|
||||
@include zitadel-lgn-theme((
|
||||
color: $config,
|
||||
));
|
||||
}
|
||||
@@ -0,0 +1,124 @@
|
||||
$lgn-container-max-width: 400px;
|
||||
$lgn-container-padding: 20px;
|
||||
$lgn-container-margin: 0 auto 0 auto;
|
||||
$lgn-container-top-offset: 100px;
|
||||
$lgn-container-bottom-margin: 50px;
|
||||
|
||||
.lgn-max-width-wrapper {
|
||||
max-width: $lgn-container-max-width;
|
||||
margin: auto;
|
||||
margin-top: 50px;
|
||||
margin-bottom: $lgn-container-bottom-margin;
|
||||
display: block;
|
||||
|
||||
@media only screen and (min-width: 600px) {
|
||||
margin-top: $lgn-container-top-offset;
|
||||
}
|
||||
}
|
||||
|
||||
.content-container {
|
||||
position: relative; // used to position a button element relative to the left upper corner of the content wrapper
|
||||
display: block;
|
||||
margin: $lgn-container-margin;
|
||||
padding: $lgn-container-padding;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
|
||||
.lgn-head {
|
||||
h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
p {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.lgn-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: .5rem 0;
|
||||
margin-top: 1rem;
|
||||
|
||||
// this is used to reverse the submit button order.
|
||||
//The form submits the htmls first element thus for displaying the desired button on the right side, items have to be reversed.
|
||||
&.lgn-reverse-order {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
|
||||
.fill-space {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.lgn-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0;
|
||||
|
||||
// this is used to reverse the submit button order.
|
||||
//The form submits the htmls first element thus for displaying the desired button on the right side, items have to be reversed.
|
||||
&.lgn-reverse-order {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
|
||||
.fill-space {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.lgn-login-profile {
|
||||
margin-bottom: .5rem;
|
||||
|
||||
.lgn-profile-image {
|
||||
display: block;
|
||||
margin: .5rem;
|
||||
}
|
||||
.lgn-names {
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
border-radius: 50vw;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.inline-block {
|
||||
display: inline-block;
|
||||
margin: 0 2px;
|
||||
}
|
||||
|
||||
.lgn-displayname{
|
||||
margin: .5rem 1rem;
|
||||
}
|
||||
.lgn-loginname{
|
||||
p {
|
||||
margin: .5rem 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.lgn-left-action {
|
||||
position: absolute;
|
||||
left: 1rem;
|
||||
top: -40px;
|
||||
}
|
||||
|
||||
.lgn-register-options {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.lgn-mfa-other {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
button {
|
||||
width: 100%;
|
||||
margin: .5rem 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
i {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
@@ -0,0 +1,29 @@
|
||||
@import './container.scss';
|
||||
|
||||
@mixin lgn-container-theme($theme-or-color-config) {
|
||||
$theme: lgn-private-legacy-get-theme($theme-or-color-config);
|
||||
$color: lgn-get-color-config($theme);
|
||||
|
||||
@if $color != null {
|
||||
@include lgn-container-color($color);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin lgn-container-color($config-or-theme) {
|
||||
$config: lgn-get-color-config($config-or-theme);
|
||||
$warn: map-get($config, warn);
|
||||
$primary: map-get($config, primary);
|
||||
|
||||
.lgn-error {
|
||||
.lgn-error-message {
|
||||
color: lgn-color($warn, default);
|
||||
}
|
||||
}
|
||||
|
||||
.lgn-login-profile {
|
||||
.lgn-names {
|
||||
$foreground: map-get($config, foreground);
|
||||
border-color: lgn-color($foreground, divider);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,33 @@
|
||||
|
||||
@mixin lgn-core($typography-config: null) {
|
||||
@include zitadel-lgn-typography($typography-config);
|
||||
}
|
||||
|
||||
@mixin lgn-core-color($config-or-theme) {
|
||||
$config: lgn-get-color-config($config-or-theme);
|
||||
|
||||
// Wrapper element that provides the theme background
|
||||
.lgn-app-background#{if(&, ', &.lgn-app-background', '')} {
|
||||
$background: map-get($config, background);
|
||||
$foreground: map-get($config, foreground);
|
||||
|
||||
background-color: lgn-color($background, background);
|
||||
color: lgn-color($foreground, text);
|
||||
}
|
||||
|
||||
// Marker that is used to determine whether the user has added a theme to their page.
|
||||
@at-root {
|
||||
.lgn-theme-loaded-marker {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Mixin that renders all of the core styles that depend on the theme.
|
||||
@mixin lgn-core-theme($theme-or-color-config) {
|
||||
$theme: lgn-private-legacy-get-theme($theme-or-color-config);
|
||||
$color: lgn-get-color-config($theme);
|
||||
@if $color != null {
|
||||
@include lgn-core-color($color);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,165 @@
|
||||
@function _get-umbra-map($color, $opacity) {
|
||||
$shadow-color: if(
|
||||
type-of($color) == color,
|
||||
rgba($color, $opacity * 0.2),
|
||||
$color
|
||||
);
|
||||
|
||||
@return (
|
||||
0: "0px 0px 0px 0px #{$shadow-color}",
|
||||
1: "0px 2px 1px -1px #{$shadow-color}",
|
||||
2: "0px 3px 1px -2px #{$shadow-color}",
|
||||
3: "0px 3px 3px -2px #{$shadow-color}",
|
||||
4: "0px 2px 4px -1px #{$shadow-color}",
|
||||
5: "0px 3px 5px -1px #{$shadow-color}",
|
||||
6: "0px 3px 5px -1px #{$shadow-color}",
|
||||
7: "0px 4px 5px -2px #{$shadow-color}",
|
||||
8: "0px 5px 5px -3px #{$shadow-color}",
|
||||
9: "0px 5px 6px -3px #{$shadow-color}",
|
||||
10: "0px 6px 6px -3px #{$shadow-color}",
|
||||
11: "0px 6px 7px -4px #{$shadow-color}",
|
||||
12: "0px 7px 8px -4px #{$shadow-color}",
|
||||
13: "0px 7px 8px -4px #{$shadow-color}",
|
||||
14: "0px 7px 9px -4px #{$shadow-color}",
|
||||
15: "0px 8px 9px -5px #{$shadow-color}",
|
||||
16: "0px 8px 10px -5px #{$shadow-color}",
|
||||
17: "0px 8px 11px -5px #{$shadow-color}",
|
||||
18: "0px 9px 11px -5px #{$shadow-color}",
|
||||
19: "0px 9px 12px -6px #{$shadow-color}",
|
||||
20: "0px 10px 13px -6px #{$shadow-color}",
|
||||
21: "0px 10px 13px -6px #{$shadow-color}",
|
||||
22: "0px 10px 14px -6px #{$shadow-color}",
|
||||
23: "0px 11px 14px -7px #{$shadow-color}",
|
||||
24: "0px 11px 15px -7px #{$shadow-color}"
|
||||
);
|
||||
}
|
||||
|
||||
@function _get-penumbra-map($color, $opacity) {
|
||||
$shadow-color: if(
|
||||
type-of($color) == color,
|
||||
rgba($color, $opacity * 0.14),
|
||||
$color
|
||||
);
|
||||
|
||||
@return (
|
||||
0: "0px 0px 0px 0px #{$shadow-color}",
|
||||
1: "0px 1px 1px 0px #{$shadow-color}",
|
||||
2: "0px 2px 2px 0px #{$shadow-color}",
|
||||
3: "0px 3px 4px 0px #{$shadow-color}",
|
||||
4: "0px 4px 5px 0px #{$shadow-color}",
|
||||
5: "0px 5px 8px 0px #{$shadow-color}",
|
||||
6: "0px 6px 10px 0px #{$shadow-color}",
|
||||
7: "0px 7px 10px 1px #{$shadow-color}",
|
||||
8: "0px 8px 10px 1px #{$shadow-color}",
|
||||
9: "0px 9px 12px 1px #{$shadow-color}",
|
||||
10: "0px 10px 14px 1px #{$shadow-color}",
|
||||
11: "0px 11px 15px 1px #{$shadow-color}",
|
||||
12: "0px 12px 17px 2px #{$shadow-color}",
|
||||
13: "0px 13px 19px 2px #{$shadow-color}",
|
||||
14: "0px 14px 21px 2px #{$shadow-color}",
|
||||
15: "0px 15px 22px 2px #{$shadow-color}",
|
||||
16: "0px 16px 24px 2px #{$shadow-color}",
|
||||
17: "0px 17px 26px 2px #{$shadow-color}",
|
||||
18: "0px 18px 28px 2px #{$shadow-color}",
|
||||
19: "0px 19px 29px 2px #{$shadow-color}",
|
||||
20: "0px 20px 31px 3px #{$shadow-color}",
|
||||
21: "0px 21px 33px 3px #{$shadow-color}",
|
||||
22: "0px 22px 35px 3px #{$shadow-color}",
|
||||
23: "0px 23px 36px 3px #{$shadow-color}",
|
||||
24: "0px 24px 38px 3px #{$shadow-color}"
|
||||
);
|
||||
}
|
||||
|
||||
@function _get-ambient-map($color, $opacity) {
|
||||
$shadow-color: if(
|
||||
type-of($color) == color,
|
||||
rgba($color, $opacity * 0.12),
|
||||
$color
|
||||
);
|
||||
|
||||
@return (
|
||||
0: "0px 0px 0px 0px #{$shadow-color}",
|
||||
1: "0px 1px 3px 0px #{$shadow-color}",
|
||||
2: "0px 1px 5px 0px #{$shadow-color}",
|
||||
3: "0px 1px 8px 0px #{$shadow-color}",
|
||||
4: "0px 1px 10px 0px #{$shadow-color}",
|
||||
5: "0px 1px 14px 0px #{$shadow-color}",
|
||||
6: "0px 1px 18px 0px #{$shadow-color}",
|
||||
7: "0px 2px 16px 1px #{$shadow-color}",
|
||||
8: "0px 3px 14px 2px #{$shadow-color}",
|
||||
9: "0px 3px 16px 2px #{$shadow-color}",
|
||||
10: "0px 4px 18px 3px #{$shadow-color}",
|
||||
11: "0px 4px 20px 3px #{$shadow-color}",
|
||||
12: "0px 5px 22px 4px #{$shadow-color}",
|
||||
13: "0px 5px 24px 4px #{$shadow-color}",
|
||||
14: "0px 5px 26px 4px #{$shadow-color}",
|
||||
15: "0px 6px 28px 5px #{$shadow-color}",
|
||||
16: "0px 6px 30px 5px #{$shadow-color}",
|
||||
17: "0px 6px 32px 5px #{$shadow-color}",
|
||||
18: "0px 7px 34px 6px #{$shadow-color}",
|
||||
19: "0px 7px 36px 6px #{$shadow-color}",
|
||||
20: "0px 8px 38px 7px #{$shadow-color}",
|
||||
21: "0px 8px 40px 7px #{$shadow-color}",
|
||||
22: "0px 8px 42px 7px #{$shadow-color}",
|
||||
23: "0px 9px 44px 8px #{$shadow-color}",
|
||||
24: "0px 9px 46px 8px #{$shadow-color}"
|
||||
);
|
||||
}
|
||||
|
||||
$lgn-elevation-transition-duration: 280ms !default;
|
||||
$lgn-elevation-transition-timing-function: cubic-bezier(
|
||||
0.4,
|
||||
0,
|
||||
0.2,
|
||||
1
|
||||
) !default;
|
||||
$lgn-elevation-color: black !default;
|
||||
|
||||
// scaling value for elevation shadows.
|
||||
$lgn-elevation-opacity: 1 !default;
|
||||
|
||||
// Applies the correct css rules to an element to give it the elevation specified by $zValue.
|
||||
// The $zValue must be between 0 and 24.
|
||||
@mixin lgn-elevation(
|
||||
$zValue,
|
||||
$color: $lgn-elevation-color,
|
||||
$opacity: $lgn-elevation-opacity
|
||||
) {
|
||||
@if type-of($zValue) != number or not unitless($zValue) {
|
||||
@error '$zValue must be a unitless number';
|
||||
}
|
||||
@if $zValue < 0 or $zValue > 24 {
|
||||
@error '$zValue must be between 0 and 24';
|
||||
}
|
||||
|
||||
box-shadow: #{map-get(_get-umbra-map($color, $opacity), $zValue)},
|
||||
#{map-get(_get-penumbra-map($color, $opacity), $zValue)},
|
||||
#{map-get(_get-ambient-map($color, $opacity), $zValue)};
|
||||
}
|
||||
|
||||
// Returns a string that can be used as the value for a transition property for elevation.
|
||||
// Calling this function directly is useful in situations where a component needs to transition
|
||||
// more than one property.
|
||||
//
|
||||
// .foo {
|
||||
// transition: lgn-elevation-transition-property-value(), opacity 100ms ease;
|
||||
// }
|
||||
@function lgn-elevation-transition-property-value(
|
||||
$duration: $lgn-elevation-transition-duration,
|
||||
$easing: $lgn-elevation-transition-timing-function
|
||||
) {
|
||||
@return box-shadow #{$duration} #{$easing};
|
||||
}
|
||||
|
||||
// Applies the correct css rules needed to have an element transition between elevations.
|
||||
// This mixin should be applied to elements whose elevation values will change depending on their
|
||||
// context (e.g. when active or disabled).
|
||||
//
|
||||
// NOTE(traviskaufman): Both this mixin and the above function use default parameters so they can
|
||||
// be used in the same way by clients.
|
||||
@mixin lgn-elevation-transition(
|
||||
$duration: $lgn-elevation-transition-duration,
|
||||
$easing: $lgn-elevation-transition-timing-function
|
||||
) {
|
||||
transition: lgn-elevation-transition-property-value($duration, $easing);
|
||||
}
|
||||
@@ -0,0 +1,9 @@
|
||||
.lgn-error {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
outline: none;
|
||||
i {
|
||||
margin-right: .5rem;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,19 @@
|
||||
@import './error.scss';
|
||||
|
||||
@mixin lgn-error-theme($theme-or-color-config) {
|
||||
$theme: lgn-private-legacy-get-theme($theme-or-color-config);
|
||||
$color: lgn-get-color-config($theme);
|
||||
|
||||
@if $color != null {
|
||||
@include lgn-error-color($color);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin lgn-error-color($config-or-theme) {
|
||||
$config: lgn-get-color-config($config-or-theme);
|
||||
$warn: map-get($config, warn);
|
||||
|
||||
.lgn-error {
|
||||
color: lgn-color($warn, default);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,29 @@
|
||||
$container-max-width: 350px;
|
||||
$footer-height: 50px;
|
||||
$footer-padding: 0 1rem;
|
||||
|
||||
footer {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
background: #00000020;
|
||||
min-height: $footer-height;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: $footer-padding;
|
||||
|
||||
.fill-space {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
a {
|
||||
font-size: 12px;
|
||||
margin-left: 1rem;
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 600px) {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,27 @@
|
||||
@import './footer.scss';
|
||||
|
||||
@mixin lgn-footer-theme($theme-or-color-config) {
|
||||
$theme: lgn-private-legacy-get-theme($theme-or-color-config);
|
||||
// @include lgn-private-check-duplicate-theme-styles($theme, 'mat-button') {
|
||||
$color: lgn-get-color-config($theme);
|
||||
|
||||
@if $color != null {
|
||||
@include lgn-footer-color($color);
|
||||
}
|
||||
// }
|
||||
}
|
||||
|
||||
@mixin lgn-footer-color($config-or-theme) {
|
||||
$config: lgn-get-color-config($config-or-theme);
|
||||
$background: map-get($config, background);
|
||||
$foreground: map-get($config, foreground);
|
||||
|
||||
footer {
|
||||
background-color: lgn-color($background, footer);
|
||||
border-top: 1px solid lgn-color($foreground, footer-line);
|
||||
|
||||
a {
|
||||
color: lgn-color($background, footer-links);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,16 @@
|
||||
$lgn-header-padding: 0;
|
||||
$lgn-header-margin: 1rem auto .5rem auto;
|
||||
|
||||
.lgn-header {
|
||||
display: block;
|
||||
position: relative;
|
||||
margin: $lgn-header-margin;
|
||||
padding: $lgn-header-padding;
|
||||
width: 100%;
|
||||
|
||||
.lgn-logo {
|
||||
height: 43px;
|
||||
width: 160px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,27 @@
|
||||
@import './header.scss';
|
||||
|
||||
@mixin lgn-header-theme($theme-or-color-config) {
|
||||
$theme: lgn-private-legacy-get-theme($theme-or-color-config);
|
||||
$color: lgn-get-color-config($theme);
|
||||
|
||||
@if $color != null {
|
||||
@include lgn-header-color($color);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin lgn-header-color($config-or-theme) {
|
||||
$config: lgn-get-color-config($config-or-theme);
|
||||
|
||||
.lgn-logo {
|
||||
background: _lgn-get-logo-src($config);
|
||||
background-position: auto;
|
||||
background-size: contain;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@function _lgn-get-logo-src($config) {
|
||||
$is-dark-theme: map-get($config, is-dark);
|
||||
@return if($is-dark-theme, url('../logo-light.svg') no-repeat, url('../logo-dark.svg') no-repeat);
|
||||
// @return if($is-dark-theme, url('../'+attr(sourcelight))/*url('../logo-light.svg')*/ no-repeat, url('../'+attr(sourcedark))/*url('../logo-dark.svg')*/ no-repeat);
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
@import './identity_provider_base.scss';
|
||||
|
||||
.lgn-idp {
|
||||
@include lgn-idp-base;
|
||||
}
|
||||
@@ -0,0 +1,42 @@
|
||||
$lgn-idp-margin: .5rem 0;
|
||||
$lgn-idp-padding: 0 1px;
|
||||
$lgn-idp-provider-name-line-height: 36px;
|
||||
$lgn-idp-border-radius: .5rem;
|
||||
$googlelogosource: '../../../images/idp/google';
|
||||
|
||||
@mixin lgn-idp-base {
|
||||
display: block;
|
||||
margin: $lgn-idp-margin;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
padding: $lgn-idp-padding;
|
||||
border-radius: $lgn-idp-border-radius;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
|
||||
span.logo {
|
||||
height: 46px;
|
||||
width: 46px;
|
||||
}
|
||||
|
||||
span.provider-name {
|
||||
line-height: $lgn-idp-provider-name-line-height;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
&.google {
|
||||
span.logo {
|
||||
height: 46px;
|
||||
width: 46px;
|
||||
background-image: url($googlelogosource + '.png');
|
||||
background-size: 25px;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
border-radius: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,43 @@
|
||||
@import './identity_provider.scss';
|
||||
|
||||
@mixin lgn-idp-theme($theme-or-color-config) {
|
||||
$theme: lgn-private-legacy-get-theme($theme-or-color-config);
|
||||
$color: lgn-get-color-config($theme);
|
||||
|
||||
@if $color != null {
|
||||
@include lgn-idp-color($color);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin lgn-idp-color($config-or-theme) {
|
||||
$config: lgn-get-color-config($config-or-theme);
|
||||
$background: map-get($config, background);
|
||||
$foreground: map-get($config, foreground);
|
||||
|
||||
.lgn-idp {
|
||||
border-color: lgn-color($foreground, divider);
|
||||
|
||||
@include lgn-idp-elevation(1, $config);
|
||||
|
||||
&:not([disabled]):active {
|
||||
@include lgn-idp-elevation(8, $config);
|
||||
}
|
||||
|
||||
&.google {
|
||||
color: lgn-color($foreground, google-text);
|
||||
background-color: lgn-color($background, google);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin lgn-idp-elevation($zValue, $config, $opacity: $lgn-elevation-opacity) {
|
||||
$foreground: map-get($config, foreground);
|
||||
$elevation-color: map-get($foreground, elevation);
|
||||
$elevation-color-or-default: if(
|
||||
$elevation-color == null,
|
||||
$lgn-elevation-color,
|
||||
$elevation-color
|
||||
);
|
||||
|
||||
@include lgn-elevation($zValue, $elevation-color-or-default, $opacity);
|
||||
}
|
||||
@@ -0,0 +1,23 @@
|
||||
@import './input_base.scss';
|
||||
|
||||
input:not([type=radio]):not([type=checkbox]),
|
||||
.lgn-input {
|
||||
@include lgn-input-base;
|
||||
}
|
||||
|
||||
// use seme base styling for select as input
|
||||
select, .lgn-select {
|
||||
@include lgn-input-base;
|
||||
}
|
||||
|
||||
.lgn-suffix-wrapper {
|
||||
position: relative;
|
||||
|
||||
[lgnSuffix] {
|
||||
position: absolute;
|
||||
right: .5rem;
|
||||
top: 9px;
|
||||
height: inherit;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,32 @@
|
||||
$lgn-input-padding-start: 10px !default;
|
||||
$lgn-input-padding: 10px !default;
|
||||
$lgn-input-margin: 0 0 2px 0 !default;
|
||||
$lgn-input-line-height: 40px !default;
|
||||
$lgn-input-border-radius: 4px !default;
|
||||
$lgn-input-border-width: 1px !default;
|
||||
$lgn-input-placeholder-font-size: 14px !default;
|
||||
|
||||
@mixin lgn-input-base {
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
padding-inline-start: $lgn-input-padding-start;
|
||||
outline: none;
|
||||
display: inline-block;
|
||||
text-align: start;
|
||||
cursor: text;
|
||||
border-radius: $lgn-input-border-radius;
|
||||
transform: all .2 linear;
|
||||
font-size: 1rem;
|
||||
border-style: solid;
|
||||
border-width: $lgn-input-border-width;
|
||||
height: $lgn-input-line-height;
|
||||
padding: $lgn-input-padding;
|
||||
transition: border-color .2s ease-in-out;
|
||||
width: 100%;
|
||||
margin: $lgn-input-margin;
|
||||
|
||||
&::placeholder {
|
||||
font-size: $lgn-input-placeholder-font-size;
|
||||
font-style: italic;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,58 @@
|
||||
@import '../theming/theming.scss';
|
||||
@import './input.scss';
|
||||
|
||||
@mixin lgn-input-theme($theme-or-color-config) {
|
||||
$theme: lgn-private-legacy-get-theme($theme-or-color-config);
|
||||
$color: lgn-get-color-config($theme);
|
||||
|
||||
@if $color != null {
|
||||
@include lgn-input-color($color);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin lgn-input-color($config-or-theme) {
|
||||
$config: lgn-get-color-config($config-or-theme);
|
||||
$primary: map-get($config, primary);
|
||||
$warn: map-get($config, warn);
|
||||
$background: map-get($config, background);
|
||||
$foreground: map-get($config, foreground);
|
||||
|
||||
.lgn-input:not([disabled]),
|
||||
select:not([disabled]), .lgn-select:not([disabled]) {
|
||||
border-color: lgn-color($foreground, input-border);
|
||||
}
|
||||
|
||||
.lgn-input,
|
||||
select, .lgn-select {
|
||||
color: lgn-color($foreground, text);
|
||||
background-color: lgn-color($background, input);
|
||||
|
||||
&:hover {
|
||||
border-color: lgn-color($foreground, input-border-hover);
|
||||
}
|
||||
|
||||
&:active {
|
||||
@include _lgn-input-theme-property($config, 'border-color', default);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
@include _lgn-input-theme-property($config, 'border-color', default);
|
||||
}
|
||||
|
||||
// overwrite if state is warn
|
||||
&[color='warn'] {
|
||||
border-color: lgn-color($warn, default);
|
||||
}
|
||||
}
|
||||
|
||||
.lgn-input::placeholder,
|
||||
select::placeholder,
|
||||
.lgn-select::placeholder {
|
||||
color: lgn-color($foreground, input-placeholder);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin _lgn-input-theme-property($theme, $property, $hue) {
|
||||
$primary: map-get($theme, primary);
|
||||
#{$property}: lgn-color($primary, $hue);
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
@import './label_base.scss';
|
||||
|
||||
.lgn-label {
|
||||
@include lgn-label-base;
|
||||
}
|
||||
@@ -0,0 +1,11 @@
|
||||
$lgn-label-font-size: 12px !default;
|
||||
$lgn-label-margin: 0 0 2px 0;
|
||||
$lgn-label-font-weight: 400;
|
||||
|
||||
@mixin lgn-label-base {
|
||||
display: block;
|
||||
font-size: $lgn-label-font-size;
|
||||
transition: color .2s ease;
|
||||
margin: $lgn-label-margin;
|
||||
font-weight: $lgn-label-font-weight;
|
||||
}
|
||||
@@ -0,0 +1,25 @@
|
||||
@import '../theming/theming.scss';
|
||||
@import './label.scss';
|
||||
|
||||
@mixin lgn-label-theme($theme-or-color-config) {
|
||||
$theme: lgn-private-legacy-get-theme($theme-or-color-config);
|
||||
// @include lgn-private-check-duplicate-theme-styles($theme, 'lgn-label') {
|
||||
$color: lgn-get-color-config($theme);
|
||||
|
||||
@if $color != null {
|
||||
@include lgn-label-color($color);
|
||||
}
|
||||
// }
|
||||
}
|
||||
|
||||
@mixin lgn-label-color($config-or-theme) {
|
||||
$config: lgn-get-color-config($config-or-theme);
|
||||
$primary: map-get($config, primary);
|
||||
$warn: map-get($config, warn);
|
||||
$background: map-get($config, background);
|
||||
$foreground: map-get($config, foreground);
|
||||
|
||||
.lgn-label {
|
||||
color: lgn-color($foreground, label);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
@import './list_base.scss';
|
||||
|
||||
.lgn-list, ul {
|
||||
@include lgn-list-base;
|
||||
}
|
||||
@@ -0,0 +1,39 @@
|
||||
@mixin lgn-list-base {
|
||||
&.lgn-policy {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
li {
|
||||
flex: 1 0 50%;
|
||||
}
|
||||
}
|
||||
|
||||
li {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
list-style: none;
|
||||
margin: 4px 0;
|
||||
font-style: italic;
|
||||
|
||||
i {
|
||||
margin: 0 .5rem;
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.lgn-no-dots) {
|
||||
li::before {
|
||||
content: "\2022";
|
||||
font-weight: bold;
|
||||
display: inline-block;
|
||||
width: 20px;
|
||||
margin-left: -20px;
|
||||
font-style: normal;
|
||||
}
|
||||
}
|
||||
|
||||
&.lgn-no-dots {
|
||||
list-style-type: none;
|
||||
padding-inline-start: 0;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,34 @@
|
||||
@import '../theming/theming.scss';
|
||||
@import './list.scss';
|
||||
|
||||
@mixin lgn-list-theme($theme-or-color-config) {
|
||||
$theme: lgn-private-legacy-get-theme($theme-or-color-config);
|
||||
$color: lgn-get-color-config($theme);
|
||||
|
||||
@if $color != null {
|
||||
@include lgn-list-color($color);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin lgn-list-color($config-or-theme) {
|
||||
$config: lgn-get-color-config($config-or-theme);
|
||||
$primary: map-get($config, primary);
|
||||
$warn: map-get($config, warn);
|
||||
|
||||
$is-dark-theme: map-get($config, is-dark);
|
||||
.lgn-list, ul {
|
||||
li::before {
|
||||
color: lgn-color($primary, default);
|
||||
}
|
||||
|
||||
li i {
|
||||
&.lgn-warn {
|
||||
color: lgn-color($warn, default);
|
||||
}
|
||||
|
||||
&.lgn-valid {
|
||||
color: #85d996;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,6 @@
|
||||
@import './progress_bar_base.scss';
|
||||
|
||||
.lgn-progress-bar {
|
||||
@include lgn-progress-bar-base;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,3 @@
|
||||
@mixin lgn-progress-bar-base {
|
||||
display: block;
|
||||
}
|
||||
@@ -0,0 +1,23 @@
|
||||
@import '../theming/theming.scss';
|
||||
@import './progress_bar.scss';
|
||||
|
||||
@mixin lgn-progress-bar-theme($theme-or-color-config) {
|
||||
$theme: lgn-private-legacy-get-theme($theme-or-color-config);
|
||||
$color: lgn-get-color-config($theme);
|
||||
|
||||
@if $color != null {
|
||||
@include lgn-progress-bar-color($color);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin lgn-progress-bar-color($config-or-theme) {
|
||||
$config: lgn-get-color-config($config-or-theme);
|
||||
$primary: map-get($config, primary);
|
||||
$warn: map-get($config, warn);
|
||||
$background: map-get($config, background);
|
||||
$foreground: map-get($config, foreground);
|
||||
|
||||
.lgn-progress-bar {
|
||||
border-color: lgn-color($foreground, input-border);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,12 @@
|
||||
.lgn-qrcode {
|
||||
display: block;
|
||||
margin: auto;
|
||||
margin: 1rem 0;
|
||||
margin-bottom: 1.5rem;
|
||||
|
||||
svg {
|
||||
margin: auto;
|
||||
display: block;
|
||||
border-radius: .5rem;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,30 @@
|
||||
@import './qrcode.scss';
|
||||
|
||||
@mixin lgn-qrcode-theme($theme-or-color-config) {
|
||||
$theme: lgn-private-legacy-get-theme($theme-or-color-config);
|
||||
$color: lgn-get-color-config($theme);
|
||||
|
||||
@if $color != null {
|
||||
@include lgn-qrcode-color($color);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin lgn-qrcode-color($config-or-theme) {
|
||||
$config: lgn-get-color-config($config-or-theme);
|
||||
$background: map-get($config, background);
|
||||
$foreground: map-get($config, foreground);
|
||||
|
||||
.lgn-qrcode {
|
||||
svg {
|
||||
background: lgn-color($background, qrcode);
|
||||
}
|
||||
|
||||
svg rect.color {
|
||||
fill: lgn-color($foreground, qrcode);
|
||||
}
|
||||
|
||||
svg rect.bg-color {
|
||||
fill: lgn-color($background, qrcode);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
@import './radio_base.scss';
|
||||
|
||||
.lgn-radio {
|
||||
@include lgn-radio-base;
|
||||
}
|
||||
@@ -0,0 +1,111 @@
|
||||
$lgn-radio-font-size: 14px !default;
|
||||
$lgn-radio-margin: 0 0 10px;
|
||||
$lgn-radio-font-weight: 400;
|
||||
$lgn-radio-size: 20px;
|
||||
$lgn-radio-checked-size: 10px;
|
||||
$lgn-radio-ripple-size: 15px;
|
||||
$lgn-radio-label-padding: 0 0 0 ($lgn-radio-size + 10px);
|
||||
|
||||
@keyframes ripple {
|
||||
0% {
|
||||
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0);
|
||||
}
|
||||
|
||||
50% {
|
||||
box-shadow: 0 0 0 15px rgba(0, 0, 0, .1);
|
||||
}
|
||||
|
||||
100% {
|
||||
box-shadow: 0 0 0 15px rgba(0, 0, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin lgn-radio-base {
|
||||
outline: none;
|
||||
margin: 16px 0;
|
||||
display: inline-block;
|
||||
|
||||
&.block {
|
||||
display: block;
|
||||
}
|
||||
|
||||
label {
|
||||
display: inline-block;
|
||||
height: $lgn-radio-size;
|
||||
position: relative;
|
||||
padding: $lgn-radio-label-padding;
|
||||
margin-bottom: 0;
|
||||
cursor: pointer;
|
||||
vertical-align: middle;
|
||||
padding-top: 2px;
|
||||
outline: none;
|
||||
font-size: $lgn-radio-font-size;
|
||||
line-height: 16px;
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
position: absolute;
|
||||
content: '';
|
||||
border-radius: 50%;
|
||||
transition: all .3s ease;
|
||||
transition-property: transform, border-color;
|
||||
}
|
||||
|
||||
&::before {
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: $lgn-radio-size;
|
||||
height: $lgn-radio-size;
|
||||
border-width: 2px;
|
||||
border-style: solid;
|
||||
}
|
||||
|
||||
&::after {
|
||||
top: $lgn-radio-size / 2 - $lgn-radio-checked-size / 2;
|
||||
left: $lgn-radio-size / 2 - $lgn-radio-checked-size / 2;
|
||||
width: $lgn-radio-checked-size;
|
||||
height: $lgn-radio-checked-size;
|
||||
transform: scale(0);
|
||||
}
|
||||
}
|
||||
|
||||
input[type='radio'] {
|
||||
opacity: 0;
|
||||
margin: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
outline: none;
|
||||
|
||||
&:checked + label::before {
|
||||
animation: ripple .2s linear forwards;
|
||||
}
|
||||
|
||||
&:checked + label::after {
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
&:focus + label {
|
||||
opacity: 1;
|
||||
// outline-width: 2px;
|
||||
// outline-style: solid;
|
||||
// outline-offset: 2px;
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
+ label {
|
||||
cursor: not-allowed;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,62 @@
|
||||
@import '../theming/theming.scss';
|
||||
@import './radio.scss';
|
||||
|
||||
@mixin lgn-radio-theme($theme-or-color-config) {
|
||||
$theme: lgn-private-legacy-get-theme($theme-or-color-config);
|
||||
$color: lgn-get-color-config($theme);
|
||||
|
||||
@if $color != null {
|
||||
@include lgn-radio-color($color);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin lgn-radio-color($config-or-theme) {
|
||||
$config: lgn-get-color-config($config-or-theme);
|
||||
$primary: map-get($config, primary);
|
||||
$warn: map-get($config, warn);
|
||||
$background: map-get($config, background);
|
||||
$foreground: map-get($config, foreground);
|
||||
|
||||
label {
|
||||
&::before {
|
||||
border-color: lgn-color($foreground, radio-border);
|
||||
}
|
||||
|
||||
&::after {
|
||||
background: lgn-color($primary, default);
|
||||
}
|
||||
}
|
||||
|
||||
input[type='radio'] {
|
||||
opacity: 0;
|
||||
|
||||
&:checked + label::before {
|
||||
border-color: lgn-color($primary, default);
|
||||
}
|
||||
|
||||
&:focus + label {
|
||||
opacity: 1;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
+ label::before {
|
||||
border-color: lgn-color($background, disabled-button);
|
||||
}
|
||||
|
||||
&:checked {
|
||||
+ label::before {
|
||||
color: lgn-color($background, disabled-selected-button);;
|
||||
}
|
||||
|
||||
+ label::after {
|
||||
background: lgn-color($background, disabled-selected-button);;
|
||||
}
|
||||
}
|
||||
|
||||
&:focus {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,20 @@
|
||||
$column-gap: .5rem;
|
||||
|
||||
.lgn-register {
|
||||
.double-col {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin: 0 -.5rem;
|
||||
|
||||
.lgn-field {
|
||||
margin: 0 $column-gap;
|
||||
flex: 1;
|
||||
box-sizing: border-box;
|
||||
margin-bottom: .5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.lgn-field {
|
||||
margin-bottom: .5rem;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
@import './select_base.scss';
|
||||
|
||||
.lgn-select, select {
|
||||
@include lgn-select-base;
|
||||
}
|
||||
@@ -0,0 +1,14 @@
|
||||
@mixin lgn-select-base {
|
||||
// background-image: url(select_arrow.svg);
|
||||
// background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20256%20448%22%20enable-background%3D%22new%200%200%20256%20448%22%3E%3Cpath%20class%3D%22arrow%22%20d%3D%22M255.9%20168c0-4.2-1.6-7.9-4.8-11.2-3.2-3.2-6.9-4.8-11.2-4.8H16c-4.2%200-7.9%201.6-11.2%204.8S0%20163.8%200%20168c0%204.4%201.6%208.2%204.8%2011.4l112%20112c3.1%203.1%206.8%204.6%2011.2%204.6%204.4%200%208.2-1.5%2011.4-4.6l112-112c3-3.2%204.5-7%204.5-11.4z%22%2F%3E%3C%2Fsvg%3E%0A");
|
||||
background-position: right 10px center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: auto 50%;
|
||||
color: white;
|
||||
-moz-appearance: none;
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
&::-ms-expand {
|
||||
display: none;
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,27 @@
|
||||
@import '../theming/theming.scss';
|
||||
@import './select.scss';
|
||||
|
||||
@mixin lgn-select-theme($theme-or-color-config) {
|
||||
$theme: lgn-private-legacy-get-theme($theme-or-color-config);
|
||||
$color: lgn-get-color-config($theme);
|
||||
|
||||
@if $color != null {
|
||||
@include lgn-select-color($color);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin lgn-select-color($config-or-theme) {
|
||||
$config: lgn-get-color-config($config-or-theme);
|
||||
$primary: map-get($config, primary);
|
||||
|
||||
$is-dark-theme: map-get($config, is-dark);
|
||||
.lgn-select, select {
|
||||
background-image: svg-icon($is-dark-theme);
|
||||
}
|
||||
}
|
||||
|
||||
@function svg-icon($darktheme) {
|
||||
// @return url('../select_arrow_dark.svg');
|
||||
@return if($darktheme, url('../select_arrow_dark.svg'),url('../select_arrow_light.svg'));
|
||||
// @return url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 448" enable-background="new 0 0 256 448"><path class="arrow" d="M255.9 168c0-4.2-1.6-7.9-4.8-11.2-3.2-3.2-6.9-4.8-11.2-4.8H16c-4.2 0-7.9 1.6-11.2 4.8S0 163.8 0 168c0 4.4 1.6 8.2 4.8 11.4l112 112c3.1 3.1 6.8 4.6 11.2 4.6 4.4 0 8.2-1.5 11.4-4.6l112-112c3-3.2 4.5-7 4.5-11.4z"/></svg>');
|
||||
}
|
||||
@@ -0,0 +1,8 @@
|
||||
@import './success_label_base.scss';
|
||||
|
||||
.lgn-success-label {
|
||||
color: #0e6245;
|
||||
background: #cbf4c9;
|
||||
border-radius: .5rem;
|
||||
padding: .5rem;
|
||||
}
|
||||
@@ -0,0 +1,8 @@
|
||||
$lgn-success-label-padding: .5rem;
|
||||
$lgn-success-label-border-radius: .5rem;
|
||||
|
||||
|
||||
@mixin lgn-success-label-base {
|
||||
border-radius: $lgn-success-label-border-radius;
|
||||
padding: $lgn-success-label-padding;
|
||||
}
|
||||
@@ -0,0 +1,21 @@
|
||||
@import '../theming/theming.scss';
|
||||
@import './success_label.scss';
|
||||
|
||||
@mixin lgn-success-label-theme($theme-or-color-config) {
|
||||
$theme: lgn-private-legacy-get-theme($theme-or-color-config);
|
||||
$color: lgn-get-color-config($theme);
|
||||
|
||||
@if $color != null {
|
||||
@include lgn-success-label-color($color);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin lgn-success-label-color($config-or-theme) {
|
||||
$config: lgn-get-color-config($config-or-theme);
|
||||
$is-dark-theme: map-get($config, is-dark);
|
||||
|
||||
.lgn-success-label {
|
||||
color: if($is-dark-theme, #cbf4c9, #0e6245);
|
||||
background-color: if($is-dark-theme, #4f566b, #cbf4c9);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,41 @@
|
||||
@import '../core/core.scss';
|
||||
@import '../footer/footer_theme.scss';
|
||||
@import '../header/header_theme.scss';
|
||||
@import '../button/button_theme.scss';
|
||||
@import '../input/input_theme.scss';
|
||||
@import '../label/label_theme.scss';
|
||||
@import '../radio/radio_theme.scss';
|
||||
@import '../a/a_theme.scss';
|
||||
@import '../identity_provider/identity_provider_theme.scss';
|
||||
@import '../error/error_theme.scss';
|
||||
@import '../qrcode/qrcode_theme.scss';
|
||||
@import '../container/container_theme.scss';
|
||||
@import '../account_selection/account_selection_theme.scss';
|
||||
@import '../avatar/avatar_theme.scss';
|
||||
@import '../checkbox/checkbox_theme.scss';
|
||||
@import '../select/select_theme.scss';
|
||||
@import '../list/list_theme.scss';
|
||||
@import '../typography/typography.scss';
|
||||
@import '../success_label/success_label_theme.scss';
|
||||
@import './theming';
|
||||
|
||||
@mixin zitadel-lgn-theme($theme-or-color-config) {
|
||||
@include lgn-core-theme($theme-or-color-config);
|
||||
@include lgn-header-theme($theme-or-color-config);
|
||||
@include lgn-button-theme($theme-or-color-config);
|
||||
@include lgn-input-theme($theme-or-color-config);
|
||||
@include lgn-radio-theme($theme-or-color-config);
|
||||
@include lgn-checkbox-theme($theme-or-color-config);
|
||||
@include lgn-label-theme($theme-or-color-config);
|
||||
@include lgn-footer-theme($theme-or-color-config);
|
||||
@include lgn-a-theme($theme-or-color-config);
|
||||
@include lgn-error-theme($theme-or-color-config);
|
||||
@include lgn-qrcode-theme($theme-or-color-config);
|
||||
@include lgn-container-theme($theme-or-color-config);
|
||||
@include lgn-account-selection-theme($theme-or-color-config);
|
||||
@include lgn-avatar-theme($theme-or-color-config);
|
||||
@include lgn-select-theme($theme-or-color-config);
|
||||
@include lgn-list-theme($theme-or-color-config);
|
||||
@include lgn-idp-theme($theme-or-color-config);
|
||||
@include lgn-success-label-theme($theme-or-color-config);
|
||||
}
|
||||
@@ -0,0 +1,265 @@
|
||||
$dark-primary-text: rgba(black, 0.87);
|
||||
$dark-secondary-text: rgba(black, 0.54);
|
||||
$dark-disabled-text: rgba(black, 0.38);
|
||||
$dark-dividers: rgba(black, 0.12);
|
||||
$dark-focused: rgba(black, 0.12);
|
||||
$dark-input-border: #403e3e;
|
||||
$dark-input-border-hover: #aeafb1;
|
||||
|
||||
$light-primary-text: white;
|
||||
$light-secondary-text: rgba(white, 0.7);
|
||||
$light-disabled-text: rgba(white, 0.5);
|
||||
$light-dividers: rgba(white, 0.12);
|
||||
$light-focused: rgba(white, 0.12);
|
||||
$light-input-border: #00000040;
|
||||
$light-input-border-hover: #1a1b1b;
|
||||
|
||||
$lgn-dark-brand: (
|
||||
50: #fff,
|
||||
100: #dde6f3,
|
||||
200: #b4c9e4,
|
||||
300: #7fa3d1,
|
||||
400: #6992c9,
|
||||
500: #5282c1,
|
||||
600: #4072b4,
|
||||
700: #38649d,
|
||||
800: #305687,
|
||||
900: #284770,
|
||||
A100: #fff,
|
||||
A200: #dde6f3,
|
||||
A300: #6992c9,
|
||||
A400: #38649d,
|
||||
A500: #666,
|
||||
A600: #fff,
|
||||
A700: #8795a1,
|
||||
A800: #2d2e30,
|
||||
A900: #212224,
|
||||
contrast: (
|
||||
50: $dark-primary-text,
|
||||
100: $dark-primary-text,
|
||||
200: $dark-primary-text,
|
||||
300: $dark-primary-text,
|
||||
400: $dark-primary-text,
|
||||
500: $light-primary-text,
|
||||
600: $light-primary-text,
|
||||
700: $light-primary-text,
|
||||
800: $light-primary-text,
|
||||
900: $light-primary-text,
|
||||
A100: $dark-primary-text,
|
||||
A200: $light-primary-text,
|
||||
A400: $light-primary-text,
|
||||
A700: $light-primary-text,
|
||||
)
|
||||
);
|
||||
|
||||
$lgn-light-brand: (
|
||||
50: #eaedfa,
|
||||
100: #ccd2f2,
|
||||
200: #aab4ea,
|
||||
300: #8796e1,
|
||||
400: #6e80da,
|
||||
500: #5469d4,
|
||||
600: #4d61cf,
|
||||
700: #4356c9,
|
||||
800: #3a4cc3,
|
||||
900: #293bb9,
|
||||
A100: #f9faff,
|
||||
A200: #c6ccff,
|
||||
A300: #939fff,
|
||||
A400: #7a88ff,
|
||||
A500: #333,
|
||||
A600: #000,
|
||||
A700: #8795a1,
|
||||
A800: white,
|
||||
A900: #fafafa,
|
||||
contrast: (
|
||||
50: $dark-primary-text,
|
||||
100: $dark-primary-text,
|
||||
200: $dark-primary-text,
|
||||
300: $dark-primary-text,
|
||||
400: $dark-primary-text,
|
||||
500: $light-primary-text,
|
||||
600: $light-primary-text,
|
||||
700: $light-primary-text,
|
||||
800: $light-primary-text,
|
||||
900: $light-primary-text,
|
||||
A100: $dark-primary-text,
|
||||
A200: $light-primary-text,
|
||||
A400: $light-primary-text,
|
||||
A700: $light-primary-text,
|
||||
)
|
||||
);
|
||||
|
||||
// skip accent color for first gen theming
|
||||
// $lgn-accent-color: (
|
||||
// 50: #ebf4f2,
|
||||
// 100: #cce3de,
|
||||
// 200: #abd1c9,
|
||||
// 300: #89bfb3,
|
||||
// 400: #6fb1a2,
|
||||
// 500: #56a392,
|
||||
// 600: #4f9b8a,
|
||||
// 700: #45917f,
|
||||
// 800: #3c8875,
|
||||
// 900: #2b7763,
|
||||
// A100: #beffed,
|
||||
// A200: #8bffde,
|
||||
// A400: #58ffd0,
|
||||
// A700: #3effc9,
|
||||
// contrast: (
|
||||
// 50: $dark-primary-text,
|
||||
// 100: $dark-primary-text,
|
||||
// 200: $dark-primary-text,
|
||||
// 300: $dark-primary-text,
|
||||
// 400: $dark-primary-text,
|
||||
// 500: $light-primary-text,
|
||||
// 600: $light-primary-text,
|
||||
// 700: $light-primary-text,
|
||||
// 800: $light-primary-text,
|
||||
// 900: $light-primary-text,
|
||||
// A100: $dark-primary-text,
|
||||
// A200: $light-primary-text,
|
||||
// A400: $light-primary-text,
|
||||
// A700: $light-primary-text,
|
||||
// )
|
||||
// );
|
||||
|
||||
$lgn-warn: (
|
||||
50: #ffebee,
|
||||
100: #ffcdd2,
|
||||
200: #ef9a9a,
|
||||
300: #e57373,
|
||||
400: #ef5350,
|
||||
500: #f44336,
|
||||
600: #e53935,
|
||||
700: #d32f2f,
|
||||
800: #c62828,
|
||||
900: #b71c1c,
|
||||
A100: #ff8a80,
|
||||
A200: #ff5252,
|
||||
A400: #ff1744,
|
||||
A700: #d50000,
|
||||
contrast: (
|
||||
50: $dark-primary-text,
|
||||
100: $dark-primary-text,
|
||||
200: $dark-primary-text,
|
||||
300: $dark-primary-text,
|
||||
400: $dark-primary-text,
|
||||
500: $light-primary-text,
|
||||
600: $light-primary-text,
|
||||
700: $light-primary-text,
|
||||
800: $light-primary-text,
|
||||
900: $light-primary-text,
|
||||
A100: $dark-primary-text,
|
||||
A200: $light-primary-text,
|
||||
A400: $light-primary-text,
|
||||
A700: $light-primary-text,
|
||||
)
|
||||
);
|
||||
|
||||
$lgn-grey: (
|
||||
50: #fafafa,
|
||||
100: #f5f5f5,
|
||||
200: #eeeeee,
|
||||
300: #e0e0e0,
|
||||
400: #bdbdbd,
|
||||
500: #9e9e9e,
|
||||
600: #757575,
|
||||
700: #616161,
|
||||
800: #424242,
|
||||
900: #212121,
|
||||
A100: #ffffff,
|
||||
A200: #eeeeee,
|
||||
A400: #bdbdbd,
|
||||
A700: #616161,
|
||||
contrast: (
|
||||
50: $dark-primary-text,
|
||||
100: $dark-primary-text,
|
||||
200: $dark-primary-text,
|
||||
300: $dark-primary-text,
|
||||
400: $dark-primary-text,
|
||||
500: $dark-primary-text,
|
||||
600: $light-primary-text,
|
||||
700: $light-primary-text,
|
||||
800: $light-primary-text,
|
||||
900: $light-primary-text,
|
||||
A100: $dark-primary-text,
|
||||
A200: $dark-primary-text,
|
||||
A400: $dark-primary-text,
|
||||
A700: $light-primary-text,
|
||||
)
|
||||
);
|
||||
|
||||
$lgn-light-theme-background: (
|
||||
background: map-get($lgn-grey, 50),
|
||||
hover: rgba(black, 0.04),
|
||||
disabled-button: rgba(black, 0.12),
|
||||
raised-button: white,
|
||||
focused-button: $dark-focused,
|
||||
selected-button: map-get($lgn-grey, 300),
|
||||
selected-disabled-button: map-get($lgn-grey, 400),
|
||||
tooltip: map-get($lgn-grey, 700),
|
||||
input: #fafafa50,
|
||||
footer: #fafafa,
|
||||
qrcode: #fafafa, // use black ground on white background because inverted qrcode colors are not allowed
|
||||
account-selector-hover: rgba(black, 0.02),
|
||||
account-selector-active: rgba(black, 0.05),
|
||||
google: #ffffff,
|
||||
);
|
||||
|
||||
$lgn-dark-theme-background: (
|
||||
background: #212224,
|
||||
hover: rgba(white, 0.04), // TODO(kara): check style with Material Design UX
|
||||
disabled-button: rgba(white, 0.12),
|
||||
raised-button: map-get($lgn-grey, 800),
|
||||
focused-button: $light-focused,
|
||||
selected-button: map-get($lgn-grey, 900),
|
||||
selected-disabled-button: map-get($lgn-grey, 800),
|
||||
tooltip: map-get($lgn-grey, 700),
|
||||
input: rgba(black, .2),
|
||||
footer: #212224,
|
||||
qrcode: white, // needs white background to recognize borders,
|
||||
account-selector-hover: rgba(white, 0.02),
|
||||
account-selector-active: rgba(white, 0.05),
|
||||
google: #ffffff,
|
||||
);
|
||||
|
||||
$lgn-light-theme-foreground: (
|
||||
footer-links: map-get($lgn-light-brand, 500),
|
||||
footer-line: #e3e8ee,
|
||||
base: black,
|
||||
input-border: $light-input-border,
|
||||
radio-border: $light-input-border,
|
||||
input-border-hover: $light-input-border-hover,
|
||||
input-placeholder: map-get($lgn-grey, 600),
|
||||
label: map-get($lgn-grey, 600),//#697386
|
||||
divider: $dark-dividers,
|
||||
disabled: $dark-disabled-text,
|
||||
disabled-button: rgba(black, 0.26),
|
||||
elevation: black,
|
||||
secondary-text: $dark-secondary-text,
|
||||
icon: rgba(black, 0.54),
|
||||
text: rgba(black, 0.87),
|
||||
qrcode: black,
|
||||
google-text: #8b8d8d,
|
||||
);
|
||||
|
||||
$lgn-dark-theme-foreground: (
|
||||
footer-links: map-get($lgn-grey, 500),
|
||||
footer-line: #303131,
|
||||
base: white,
|
||||
input-border: $dark-input-border,
|
||||
radio-border: $dark-input-border,
|
||||
input-border-hover: $dark-input-border-hover,
|
||||
input-placeholder: map-get($lgn-grey, 600),
|
||||
label: map-get($lgn-grey, 600),// #8795a1,
|
||||
divider: $light-dividers,
|
||||
disabled: $light-disabled-text,
|
||||
disabled-button: rgba(white, 0.3),
|
||||
elevation: black,
|
||||
secondary-text: $light-secondary-text,
|
||||
icon: white,
|
||||
text: white,
|
||||
qrcode: black,
|
||||
google-text: #8b8d8d,
|
||||
);
|
||||
@@ -0,0 +1,217 @@
|
||||
@import 'palette';
|
||||
|
||||
// For a given hue in a palette, return the contrast color from the map of contrast palettes.
|
||||
// @param $color-map
|
||||
// @param $hue
|
||||
@function lgn-contrast($palette, $hue) {
|
||||
@return map-get(map-get($palette, contrast), $hue);
|
||||
}
|
||||
|
||||
// add contrast colors to the palette to display text on buttons or the user avatar
|
||||
@function lgn-palette($base-palette, $default: 500, $lighter: 100, $darker: 700, $text: $default) {
|
||||
$result: map-merge($base-palette, (
|
||||
default: map-get($base-palette, $default),
|
||||
lighter: map-get($base-palette, $lighter),
|
||||
darker: map-get($base-palette, $darker),
|
||||
text: map-get($base-palette, $text),
|
||||
|
||||
default-contrast: lgn-contrast($base-palette, $default),
|
||||
lighter-contrast: lgn-contrast($base-palette, $lighter),
|
||||
darker-contrast: lgn-contrast($base-palette, $darker)
|
||||
));
|
||||
|
||||
// For each hue in the palette, add a "-contrast" color to the map.
|
||||
@each $hue, $color in $base-palette {
|
||||
$result: map-merge($result, (
|
||||
'#{$hue}-contrast': lgn-contrast($base-palette, $hue)
|
||||
));
|
||||
}
|
||||
|
||||
@return $result;
|
||||
}
|
||||
|
||||
@function _lgn-create-light-color-config($primary, $accent, $warn: null) {
|
||||
@return (
|
||||
primary: $primary,
|
||||
accent: $accent,
|
||||
warn: if($warn != null, $warn, lgn-palette($lgn-warn)),
|
||||
is-dark: false,
|
||||
foreground: $lgn-light-theme-foreground,
|
||||
background: $lgn-light-theme-background,
|
||||
);
|
||||
}
|
||||
|
||||
@function _lgn-create-dark-color-config($primary, $accent, $warn: null) {
|
||||
@return (
|
||||
primary: $primary,
|
||||
accent: $accent,
|
||||
warn: if($warn != null, $warn, lgn-palette($lgn-warn)),
|
||||
is-dark: true,
|
||||
foreground: $lgn-dark-theme-foreground,
|
||||
background: $lgn-dark-theme-background,
|
||||
);
|
||||
}
|
||||
|
||||
@function lgn-light-theme($primary, $accent: null, $warn: lgn-palette($lgn-warn)) {
|
||||
@if $accent != null {
|
||||
@return lgn-private-create-backwards-compatibility-theme(_lgn-validate-theme((
|
||||
_is-legacy-theme: true,
|
||||
color: _lgn-create-light-color-config($primary, $accent, $warn),
|
||||
)));
|
||||
}
|
||||
|
||||
$result: $primary;
|
||||
@if map-get($primary, color) {
|
||||
$color-settings: map-get($primary, color);
|
||||
$primary: map-get($color-settings, primary);
|
||||
$accent: map-get($color-settings, accent);
|
||||
$warn: map-get($color-settings, warn);
|
||||
$result: map-merge($result, (color: _lgn-create-light-color-config($primary, $accent, $warn)));
|
||||
}
|
||||
@return lgn-private-create-backwards-compatibility-theme(_lgn-validate-theme($result));
|
||||
}
|
||||
|
||||
@function lgn-dark-theme($primary, $accent: null, $warn: lgn-palette($lgn-warn)) {
|
||||
@if $accent != null {
|
||||
@return lgn-private-create-backwards-compatibility-theme(_lgn-validate-theme((
|
||||
_is-legacy-theme: true,
|
||||
color: _lgn-create-dark-color-config($primary, $accent, $warn),
|
||||
)));
|
||||
}
|
||||
|
||||
$result: $primary;
|
||||
@if map-get($primary, color) {
|
||||
$color-settings: map-get($primary, color);
|
||||
$primary: map-get($color-settings, primary);
|
||||
$accent: map-get($color-settings, accent);
|
||||
$warn: map-get($color-settings, warn);
|
||||
$result: map-merge($result, (color: _lgn-create-dark-color-config($primary, $accent, $warn)));
|
||||
}
|
||||
@return lgn-private-create-backwards-compatibility-theme(_lgn-validate-theme($result));
|
||||
}
|
||||
|
||||
/// Gets the color configuration from the given theme or configuration.
|
||||
@function lgn-get-color-config($theme, $default: null) {
|
||||
// If a configuration has been passed, return the config directly.
|
||||
@if not lgn-private-is-theme-object($theme) {
|
||||
@return $theme;
|
||||
}
|
||||
@if lgn-private-is-legacy-constructed-theme($theme) {
|
||||
@return $theme;
|
||||
}
|
||||
@if map-has-key($theme, color) {
|
||||
@return map-get($theme, color);
|
||||
}
|
||||
@return $default;
|
||||
}
|
||||
|
||||
@function lgn-private-create-backwards-compatibility-theme($theme) {
|
||||
@if not map-get($theme, color) {
|
||||
@return $theme;
|
||||
}
|
||||
$color: map-get($theme, color);
|
||||
@return map-merge($theme, $color);
|
||||
}
|
||||
|
||||
// Checks whether the given value resolves to a theme object. Theme objects are always
|
||||
// of type `map` and can optionally only specify `color`, `density` or `typography`.
|
||||
@function lgn-private-is-theme-object($value) {
|
||||
@return type-of($value) == 'map' and (
|
||||
map-has-key($value, color) or
|
||||
map-has-key($value, density) or
|
||||
map-has-key($value, typography) or
|
||||
length($value) == 0
|
||||
);
|
||||
}
|
||||
|
||||
// Gets the theme from the given value that is either already a theme, or a color configuration.
|
||||
// This handles the legacy case where developers pass a color configuration directly to the
|
||||
// theme mixin. Before we introduced the new pattern for constructing a theme, developers passed
|
||||
// the color configuration directly to the theme mixins. This can be still the case if developers
|
||||
// construct a theme manually and pass it to a theme. We support this for backwards compatibility.
|
||||
// TODO(devversion): remove this in the future. Constructing themes manually is rare,
|
||||
// and the code can be easily updated to the new API.
|
||||
@function lgn-private-legacy-get-theme($theme-or-color-config) {
|
||||
@if lgn-private-is-theme-object($theme-or-color-config) {
|
||||
@return $theme-or-color-config;
|
||||
}
|
||||
@return lgn-private-create-backwards-compatibility-theme((
|
||||
_is-legacy-theme: true,
|
||||
color: $theme-or-color-config
|
||||
));
|
||||
}
|
||||
|
||||
// Note that the `$theme.primary` key does usually not exist since the color configuration
|
||||
// is stored in `$theme.color` which contains a property for `primary`. This method copies
|
||||
// the map from `$theme.color` to `$theme` for backwards compatibility.
|
||||
@function lgn-private-create-backwards-compatibility-theme($theme) {
|
||||
@if not map-get($theme, color) {
|
||||
@return $theme;
|
||||
}
|
||||
$color: map-get($theme, color);
|
||||
@return map-merge($theme, $color);
|
||||
}
|
||||
|
||||
// Validates the specified theme by ensuring that the optional color config defines
|
||||
// a primary, accent and warn palette. Returns the theme if no failures were found.
|
||||
@function _lgn-validate-theme($theme) {
|
||||
@if map-get($theme, color) {
|
||||
$color: map-get($theme, color);
|
||||
@if not map-get($color, primary) {
|
||||
@error 'Theme does not define a valid "primary" palette.';
|
||||
}
|
||||
@else if not map-get($color, accent) {
|
||||
@error 'Theme does not define a valid "accent" palette.';
|
||||
}
|
||||
@else if not map-get($color, warn) {
|
||||
@error 'Theme does not define a valid "warn" palette.';
|
||||
}
|
||||
}
|
||||
@return $theme;
|
||||
}
|
||||
|
||||
// Checks whether a given value corresponds to a legacy constructed theme.
|
||||
@function lgn-private-is-legacy-constructed-theme($value) {
|
||||
@return type-of($value) == 'map' and map-get($value, '_is-legacy-theme');
|
||||
}
|
||||
|
||||
// Gets a color from a theme palette (the output of mat-palette).
|
||||
// The hue can be one of the standard values (500, A400, etc.), one of the three preconfigured
|
||||
// hues (default, lighter, darker), or any of the aforementioned prefixed with "-contrast".
|
||||
//
|
||||
// @param $color-map The theme palette (output of mat-palette).
|
||||
// @param $hue The hue from the palette to use. If this is a value between 0 and 1, it will
|
||||
// be treated as opacity.
|
||||
// @param $opacity The alpha channel value for the color.
|
||||
@function lgn-color($palette, $hue: default, $opacity: null) {
|
||||
// If hueKey is a number between zero and one, then it actually contains an
|
||||
// opacity value, so recall this function with the default hue and that given opacity.
|
||||
@if type-of($hue) == number and $hue >= 0 and $hue <= 1 {
|
||||
@return lgn-color($palette, default, $hue);
|
||||
}
|
||||
|
||||
$color: map-get($palette, $hue);
|
||||
|
||||
@if (type-of($color) != color) {
|
||||
// If the $color resolved to something different from a color (e.g. a CSS variable),
|
||||
// we can't apply the opacity anyway so we return the value as is, otherwise Sass can
|
||||
// throw an error or output something invalid.
|
||||
@return $color;
|
||||
}
|
||||
|
||||
@return rgba($color, if($opacity == null, opacity($color), $opacity));
|
||||
}
|
||||
|
||||
/// Gets the typography configuration from the given theme or configuration.
|
||||
@function lgn-get-typography-config($theme-or-config, $default: null) {
|
||||
// If a configuration has been passed, return the config directly.
|
||||
@if not lgn-private-is-theme-object($theme-or-config) {
|
||||
@return $theme-or-config;
|
||||
}
|
||||
// In case a theme has been passed, extract the configuration if present,
|
||||
// or fall back to the default typography config.
|
||||
@if (map-has-key($theme-or-config, typography)) {
|
||||
@return map-get($theme-or-config, typography);
|
||||
}
|
||||
@return $default;
|
||||
}
|
||||
@@ -0,0 +1,4 @@
|
||||
@font-face {
|
||||
font-family: Aileron;
|
||||
src: url(../../../fonts/ailerons/ailerons.otf ) format('opentype');
|
||||
}
|
||||
@@ -0,0 +1,64 @@
|
||||
@font-face {
|
||||
font-family: Lato;
|
||||
src: url(../../../fonts/lato/Lato-Thin.ttf ) format('truetype');
|
||||
font-style: normal;
|
||||
font-weight: 100;
|
||||
}
|
||||
@font-face {
|
||||
font-family: Lato;
|
||||
src: url(../../../fonts/lato/Lato-ThinItalic.ttf ) format('truetype');
|
||||
font-style: italic;
|
||||
font-weight: 100;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: Lato;
|
||||
src: url(../../../fonts/lato/Lato-Light.ttf ) format('truetype');
|
||||
font-style: normal;
|
||||
font-weight: 200;
|
||||
}
|
||||
@font-face {
|
||||
font-family: Lato;
|
||||
src: url(../../../fonts/lato/Lato-LightItalic.ttf ) format('truetype');
|
||||
font-style: italic;
|
||||
font-weight: 200;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: Lato;
|
||||
src: url(../../../fonts/lato/Lato-Regular.ttf ) format('truetype');
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
}
|
||||
@font-face {
|
||||
font-family: Lato;
|
||||
src: url(../../../fonts/lato/Lato-Italic.ttf ) format('truetype');
|
||||
font-style: italic;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: Lato;
|
||||
src: url(../../../fonts/lato/Lato-Bold.ttf ) format('truetype');
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
}
|
||||
@font-face {
|
||||
font-family: Lato;
|
||||
src: url(../../../fonts/lato/Lato-BoldItalic.ttf ) format('truetype');
|
||||
font-style: italic;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: Lato;
|
||||
src: url(../../../fonts/lato/Lato-Black.ttf ) format('truetype');
|
||||
font-style: normal;
|
||||
font-weight: 800;
|
||||
}
|
||||
@font-face {
|
||||
font-family: Lato;
|
||||
src: url(../../../fonts/lato/Lato-BlackItalic.ttf ) format('truetype');
|
||||
font-style: italic;
|
||||
font-weight: 800;
|
||||
}
|
||||
@@ -0,0 +1,26 @@
|
||||
|
||||
@font-face {
|
||||
font-family: PTSans;
|
||||
src: url(../../../fonts/PT_Sans/PTSans-Bold.ttf ) format('truetype');
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
}
|
||||
@font-face {
|
||||
font-family: PTSans;
|
||||
src: url(../../../fonts/PT_Sans/PTSans-BoldItalic.ttf ) format('truetype');
|
||||
font-style: italic;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: PTSans;
|
||||
src: url(../../../fonts/PT_Sans/PTSans-Italic.ttf ) format('truetype');
|
||||
font-style: italic;
|
||||
font-weight: 400;
|
||||
}
|
||||
@font-face {
|
||||
font-family: PTSans;
|
||||
src: url(../../../fonts/PT_Sans/PTSans-Regular.ttf ) format('truetype');
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
}
|
||||
@@ -0,0 +1,113 @@
|
||||
|
||||
@font-face {
|
||||
font-family: Raleway;
|
||||
src: url(../../../fonts/Raleway/Raleway-Black.ttf ) format('truetype');
|
||||
font-style: normal;
|
||||
font-weight: 900;
|
||||
}
|
||||
@font-face {
|
||||
font-family: Raleway;
|
||||
src: url(../../../fonts/Raleway/Raleway-BlackItalic.ttf ) format('truetype');
|
||||
font-style: italic;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: Raleway;
|
||||
src: url(../../../fonts/Raleway/Raleway-Bold.ttf ) format('truetype');
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
}
|
||||
@font-face {
|
||||
font-family: Raleway;
|
||||
src: url(../../../fonts/Raleway/Raleway-BoldItalic.ttf ) format('truetype');
|
||||
font-style: italic;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: Raleway;
|
||||
src: url(../../../fonts/Raleway/Raleway-ExtraBold.ttf ) format('truetype');
|
||||
font-style: normal;
|
||||
font-weight: 800;
|
||||
}
|
||||
@font-face {
|
||||
font-family: Raleway;
|
||||
src: url(../../../fonts/Raleway/Raleway-ExtraBoldItalic.ttf ) format('truetype');
|
||||
font-style: italic;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: Raleway;
|
||||
src: url(../../../fonts/Raleway/Raleway-ExtraLight.ttf ) format('truetype');
|
||||
font-style: normal;
|
||||
font-weight: 200;
|
||||
}
|
||||
@font-face {
|
||||
font-family: Raleway;
|
||||
src: url(../../../fonts/Raleway/Raleway-ExtraLightItalic.ttf ) format('truetype');
|
||||
font-style: italic;
|
||||
font-weight: 200;
|
||||
}
|
||||
@font-face {
|
||||
font-family: Raleway;
|
||||
src: url(../../../fonts/Raleway/Raleway-Light.ttf ) format('truetype');
|
||||
font-style: normal;
|
||||
font-weight: 300;
|
||||
}
|
||||
@font-face {
|
||||
font-family: Raleway;
|
||||
src: url(../../../fonts/Raleway/Raleway-LightItalic.ttf ) format('truetype');
|
||||
font-style: italic;
|
||||
font-weight: 300;
|
||||
}
|
||||
@font-face {
|
||||
font-family: Raleway;
|
||||
src: url(../../../fonts/Raleway/Raleway-Medium.ttf ) format('truetype');
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
}
|
||||
@font-face {
|
||||
font-family: Raleway;
|
||||
src: url(../../../fonts/Raleway/Raleway-MediumItalic.ttf ) format('truetype');
|
||||
font-style: italic;
|
||||
font-weight: 500;
|
||||
}
|
||||
@font-face {
|
||||
font-family: Raleway;
|
||||
src: url(../../../fonts/Raleway/Raleway-Regular.ttf ) format('truetype');
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
}
|
||||
@font-face {
|
||||
font-family: Raleway;
|
||||
src: url(../../../fonts/Raleway/Raleway-Italic.ttf ) format('truetype');
|
||||
font-style: italic;
|
||||
font-weight: 400;
|
||||
}
|
||||
@font-face {
|
||||
font-family: Raleway;
|
||||
src: url(../../../fonts/Raleway/Raleway-SemiBold.ttf ) format('truetype');
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
}
|
||||
@font-face {
|
||||
font-family: Raleway;
|
||||
src: url(../../../fonts/Raleway/Raleway-SemiBoldItalic.ttf ) format('truetype');
|
||||
font-style: italic;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: Raleway;
|
||||
src: url(../../../fonts/Raleway/Raleway-Thin.ttf ) format('truetype');
|
||||
font-style: normal;
|
||||
font-weight: 100;
|
||||
}
|
||||
@font-face {
|
||||
font-family: Raleway;
|
||||
src: url(../../../fonts/Raleway/Raleway-ThinItalic.ttf ) format('truetype');
|
||||
font-style: italic;
|
||||
font-weight: 100;
|
||||
}
|
||||
@@ -0,0 +1,76 @@
|
||||
|
||||
@font-face {
|
||||
font-family: Roboto;
|
||||
src: url(../../../fonts/Roboto/Roboto-Black.ttf ) format('truetype');
|
||||
font-style: normal;
|
||||
font-weight: 900;
|
||||
}
|
||||
@font-face {
|
||||
font-family: Roboto;
|
||||
src: url(../../../fonts/Roboto/Roboto-BlackItalic.ttf ) format('truetype');
|
||||
font-style: italic;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: Roboto;
|
||||
src: url(../../../fonts/Roboto/Roboto-Bold.ttf ) format('truetype');
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
}
|
||||
@font-face {
|
||||
font-family: Roboto;
|
||||
src: url(../../../fonts/Roboto/Roboto-BoldItalic.ttf ) format('truetype');
|
||||
font-style: italic;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: Roboto;
|
||||
src: url(../../../fonts/Roboto/Roboto-Regular.ttf ) format('truetype');
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
}
|
||||
@font-face {
|
||||
font-family: Roboto;
|
||||
src: url(../../../fonts/Roboto/Roboto-Italic.ttf ) format('truetype');
|
||||
font-style: italic;
|
||||
font-weight: 400;
|
||||
}
|
||||
@font-face {
|
||||
font-family: Roboto;
|
||||
src: url(../../../fonts/Roboto/Roboto-Light.ttf ) format('truetype');
|
||||
font-style: normal;
|
||||
font-weight: 300;
|
||||
}
|
||||
@font-face {
|
||||
font-family: Roboto;
|
||||
src: url(../../../fonts/Roboto/Roboto-LightItalic.ttf ) format('truetype');
|
||||
font-style: italic;
|
||||
font-weight: 300;
|
||||
}
|
||||
@font-face {
|
||||
font-family: Roboto;
|
||||
src: url(../../../fonts/Roboto/Roboto-Medium.ttf ) format('truetype');
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
}
|
||||
@font-face {
|
||||
font-family: Roboto;
|
||||
src: url(../../../fonts/Roboto/Roboto-MediumItalic.ttf ) format('truetype');
|
||||
font-style: italic;
|
||||
font-weight: 500;
|
||||
}
|
||||
@font-face {
|
||||
font-family: Roboto;
|
||||
src: url(../../../fonts/Roboto/Roboto-Thin.ttf ) format('truetype');
|
||||
font-style: normal;
|
||||
font-weight: 100;
|
||||
|
||||
}
|
||||
@font-face {
|
||||
font-family: Roboto;
|
||||
src: url(../../../fonts/Roboto/Roboto-ThinItalic.ttf ) format('truetype');
|
||||
font-style: italic;
|
||||
font-weight: 100;
|
||||
}
|
||||
@@ -0,0 +1,225 @@
|
||||
@import './faces/ailerons_font_faces.scss';
|
||||
@import './faces/lato_font_faces.scss';
|
||||
@import './faces/roboto_font_faces.scss';
|
||||
@import './faces/raleway_font_faces.scss';
|
||||
@import './faces/pt_sans_font_faces.scss';
|
||||
|
||||
@mixin zitadel-lgn-typography($config-or-theme: null) {
|
||||
$config: if(lgn-private-is-theme-object($config-or-theme),
|
||||
lgn-get-typography-config($config-or-theme), $config-or-theme);
|
||||
|
||||
@if not $config {
|
||||
$config: lgn-typography-config();
|
||||
}
|
||||
|
||||
@include lgn-base-typography($config);
|
||||
}
|
||||
|
||||
@function lgn-typography-config(
|
||||
$font-family: 'Lato, -apple-system, BlinkMacSystemFont, sans-serif',
|
||||
$display-4: lgn-typography-level(112px, 112px, 300, $letter-spacing: -0.05em),
|
||||
$display-3: lgn-typography-level(56px, 56px, 400, $letter-spacing: -0.02em),
|
||||
$display-2: lgn-typography-level(45px, 48px, 400, $letter-spacing: -0.005em),
|
||||
$display-1: lgn-typography-level(34px, 40px, 400),
|
||||
$headline: lgn-typography-level(24px, 32px, 400),
|
||||
$title: lgn-typography-level(20px, 32px, 500),
|
||||
$subheading-2: lgn-typography-level(16px, 28px, 400),
|
||||
$subheading-1: lgn-typography-level(15px, 24px, 400),
|
||||
$body-2: lgn-typography-level(14px, 24px, 500),
|
||||
$body-1: lgn-typography-level(14px, 20px, 400),
|
||||
$caption-1: lgn-typography-level(12px, 20px, 400),
|
||||
$button: lgn-typography-level(14px, 36px, 500),
|
||||
$input: lgn-typography-level(inherit, 1.125, 400),
|
||||
) {
|
||||
$config: (
|
||||
display-4: $display-4,
|
||||
display-3: $display-3,
|
||||
display-2: $display-2,
|
||||
display-1: $display-1,
|
||||
headline: $headline,
|
||||
title: $title,
|
||||
subheading-2: $subheading-2,
|
||||
subheading-1: $subheading-1,
|
||||
body-2: $body-2,
|
||||
body-1: $body-1,
|
||||
caption-1: $caption-1,
|
||||
button: $button,
|
||||
input: $input,
|
||||
);
|
||||
|
||||
// Loop through the levels and set the `font-family` of the ones that don't have one to the base.
|
||||
@each $key, $level in $config {
|
||||
@if map-get($level, font-family) == null {
|
||||
$new-level: map-merge($level, (font-family: $font-family));
|
||||
$config: map-merge($config, ($key: $new-level));
|
||||
}
|
||||
}
|
||||
|
||||
// Add the base font family to the config.
|
||||
@return map-merge($config, (font-family: $font-family));
|
||||
}
|
||||
|
||||
@function lgn-typography-level(
|
||||
$font-size,
|
||||
$line-height: $font-size,
|
||||
$font-weight: 400,
|
||||
$font-family: null,
|
||||
$letter-spacing: normal) {
|
||||
|
||||
@return (
|
||||
font-size: $font-size,
|
||||
line-height: $line-height,
|
||||
font-weight: $font-weight,
|
||||
font-family: $font-family,
|
||||
letter-spacing: $letter-spacing
|
||||
);
|
||||
}
|
||||
|
||||
// Converts a typography level into CSS styles.
|
||||
@mixin lgn-typography-level-to-styles($config, $level) {
|
||||
$font-size: lgn-font-size($config, $level);
|
||||
$font-weight: lgn-font-weight($config, $level);
|
||||
$line-height: lgn-line-height($config, $level);
|
||||
$font-family: lgn-font-family($config, $level);
|
||||
|
||||
@include lgn-typography-font-shorthand($font-size, $font-weight, $line-height, $font-family);
|
||||
letter-spacing: lgn-letter-spacing($config, $level);
|
||||
}
|
||||
|
||||
// Utility for fetching a nested value from a typography config.
|
||||
@function _lgn-get-type-value($config, $level, $name) {
|
||||
@return map-get(map-get($config, $level), $name);
|
||||
}
|
||||
|
||||
// Gets the font size for a level inside a typography config.
|
||||
@function lgn-font-size($config, $level) {
|
||||
@return _lgn-get-type-value($config, $level, font-size);
|
||||
}
|
||||
|
||||
// Gets the line height for a level inside a typography config.
|
||||
@function lgn-line-height($config, $level) {
|
||||
@return _lgn-get-type-value($config, $level, line-height);
|
||||
}
|
||||
|
||||
// Gets the font weight for a level inside a typography config.
|
||||
@function lgn-font-weight($config, $level) {
|
||||
@return _lgn-get-type-value($config, $level, font-weight);
|
||||
}
|
||||
|
||||
// Gets the letter spacing for a level inside a typography config.
|
||||
@function lgn-letter-spacing($config, $level) {
|
||||
@return _lgn-get-type-value($config, $level, letter-spacing);
|
||||
}
|
||||
|
||||
@function lgn-font-family($config, $level: null) {
|
||||
$font-family: map-get($config, font-family);
|
||||
|
||||
@if $level != null {
|
||||
$font-family: _lgn-get-type-value($config, $level, font-family);
|
||||
}
|
||||
|
||||
// Guard against unquoting non-string values, because it's deprecated.
|
||||
@return if(type-of($font-family) == string, unquote($font-family), $font-family);
|
||||
}
|
||||
|
||||
// Outputs the shorthand `font` CSS property, based on a set of typography values. Falls back to
|
||||
// the individual properties if a value that isn't allowed in the shorthand is passed in.
|
||||
@mixin lgn-typography-font-shorthand($font-size, $font-weight, $line-height, $font-family) {
|
||||
// If any of the values are set to `inherit`, we can't use the shorthand
|
||||
// so we fall back to passing in the individual properties.
|
||||
@if ($font-size == inherit or
|
||||
$font-weight == inherit or
|
||||
$line-height == inherit or
|
||||
$font-family == inherit or
|
||||
$font-size == null or
|
||||
$font-weight == null or
|
||||
$line-height == null or
|
||||
$font-family == null) {
|
||||
|
||||
font-size: $font-size;
|
||||
font-weight: $font-weight;
|
||||
line-height: $line-height;
|
||||
font-family: $font-family;
|
||||
}
|
||||
@else {
|
||||
// Otherwise use the shorthand `font`, because it's the least amount of bytes. Note
|
||||
// that we need to use interpolation for `font-size/line-height` in order to prevent
|
||||
// Sass from dividing the two values.
|
||||
font: $font-weight #{$font-size}/#{$line-height} $font-family;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin lgn-base-typography($config, $selector: '.lgn-typography') {
|
||||
h1, .lgn-headline, #{$selector} h1 {
|
||||
@include lgn-typography-level-to-styles($config, headline);
|
||||
margin: 0 0 16px;
|
||||
}
|
||||
|
||||
h2, .lgn-title, #{$selector} h2 {
|
||||
@include lgn-typography-level-to-styles($config, title);
|
||||
margin: 0 0 16px;
|
||||
}
|
||||
|
||||
h3, .lgn-subheading-2, #{$selector} h3 {
|
||||
@include lgn-typography-level-to-styles($config, subheading-2);
|
||||
margin: 0 0 16px;
|
||||
}
|
||||
|
||||
h4, .lgn-subheading-1, #{$selector} h4 {
|
||||
@include lgn-typography-level-to-styles($config, subheading-1);
|
||||
margin: 0 0 16px;
|
||||
}
|
||||
|
||||
.lgn-body-strong, .lgn-body-2 {
|
||||
@include lgn-typography-level-to-styles($config, body-2);
|
||||
}
|
||||
|
||||
p, .lgn-body, .lgn-body-1, #{$selector} {
|
||||
@include lgn-typography-level-to-styles($config, body-1);
|
||||
|
||||
p {
|
||||
margin: 0 0 12px;
|
||||
}
|
||||
}
|
||||
|
||||
button, .lgn-button, .lgn-raised-button, .lgn-stroked-button {
|
||||
@include lgn-typography-level-to-styles($config, button);
|
||||
}
|
||||
|
||||
span {
|
||||
@include lgn-typography-level-to-styles($config, body-1);
|
||||
}
|
||||
|
||||
a, .lgn-a {
|
||||
@include lgn-typography-level-to-styles($config, body-1);
|
||||
}
|
||||
|
||||
small .lgn-small, .lgn-caption {
|
||||
@include lgn-typography-level-to-styles($config, caption-1);
|
||||
}
|
||||
|
||||
label, .lgn-label, #{$selector} .lgn-label, #{$selector} label {
|
||||
@include lgn-typography-level-to-styles($config, caption-1);
|
||||
margin: 0 0 2px 0;
|
||||
}
|
||||
|
||||
.lgn-display-4, #{$selector} .lgn-display-4 {
|
||||
@include lgn-typography-level-to-styles($config, display-4);
|
||||
margin: 0 0 56px;
|
||||
}
|
||||
|
||||
.lgn-display-3, #{$selector} .lgn-display-3 {
|
||||
@include lgn-typography-level-to-styles($config, display-3);
|
||||
margin: 0 0 64px;
|
||||
}
|
||||
|
||||
.lgn-display-2, #{$selector} .lgn-display-2 {
|
||||
@include lgn-typography-level-to-styles($config, display-2);
|
||||
margin: 0 0 64px;
|
||||
}
|
||||
|
||||
.lgn-display-1, #{$selector} .lgn-display-1 {
|
||||
@include lgn-typography-level-to-styles($config, display-1);
|
||||
margin: 0 0 64px;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user