@igo2/sdg-core 1.1.2 → 2.0.0-next.10
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +62 -4
- package/fesm2022/igo2-sdg-core.mjs +0 -97
- package/fesm2022/igo2-sdg-core.mjs.map +1 -1
- package/package.json +5 -10
- package/src/_index.scss +0 -1
- package/src/style/_index.scss +0 -1
- package/src/tokens/_system.scss +4 -22
- package/types/igo2-sdg-core.d.ts +2 -0
- package/index.d.ts +0 -53
- package/src/style/overrides/_index.scss +0 -2
- package/src/style/overrides/igo2-lib/_index.scss +0 -9
- package/src/style/overrides/igo2-lib/_list.scss +0 -22
- package/src/style/overrides/igo2-lib/_panel.scss +0 -7
- package/src/style/overrides/igo2-lib/_search-bar.scss +0 -72
- package/src/style/overrides/material/_button.scss +0 -137
- package/src/style/overrides/material/_checkbox.scss +0 -120
- package/src/style/overrides/material/_chip.scss +0 -122
- package/src/style/overrides/material/_dialog.scss +0 -37
- package/src/style/overrides/material/_divider.scss +0 -11
- package/src/style/overrides/material/_expansion-panel.scss +0 -62
- package/src/style/overrides/material/_form-field.scss +0 -140
- package/src/style/overrides/material/_icon.scss +0 -34
- package/src/style/overrides/material/_index.scss +0 -27
- package/src/style/overrides/material/_radio-button.scss +0 -124
- package/src/style/overrides/material/_select.scss +0 -74
- package/src/style/overrides/material/_sidenav.scss +0 -9
- package/src/style/overrides/material/_tab.scss +0 -95
- package/src/theme/_index.scss +0 -1
- package/src/theme/material/_index.scss +0 -1
- package/src/theme/material/_theme.scss +0 -241
package/README.md
CHANGED
|
@@ -1,9 +1,67 @@
|
|
|
1
|
-
#
|
|
1
|
+
# @igo2/sdg-core
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
Infrastructure de base du Système de Design Gouvernemental du Québec (SDG).
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
## Vue d'ensemble
|
|
6
6
|
|
|
7
|
+
Ce paquet fournit l'infrastructure SCSS fondamentale pour les applications SDG :
|
|
8
|
+
- **Styles** — Typographie, système d'élévation, grille de mise en page, points d'arrêt responsifs
|
|
9
|
+
- **Tokens de design** — Jetons de couleur, espacement, élévation et disposition
|
|
10
|
+
|
|
11
|
+
## Installation
|
|
12
|
+
|
|
13
|
+
```bash
|
|
14
|
+
npm install @igo2/sdg-core
|
|
7
15
|
```
|
|
8
|
-
|
|
16
|
+
|
|
17
|
+
## Utilisation
|
|
18
|
+
|
|
19
|
+
### Styles
|
|
20
|
+
|
|
21
|
+
Importez les styles core dans le fichier de style principal de votre application :
|
|
22
|
+
|
|
23
|
+
```scss
|
|
24
|
+
@use '@igo2/sdg-core' as sdg;
|
|
25
|
+
|
|
26
|
+
// Les styles core incluent la typographie, l'élévation, la mise en page et les points d'arrêt
|
|
9
27
|
```
|
|
28
|
+
|
|
29
|
+
### Variables CSS
|
|
30
|
+
|
|
31
|
+
Core génère diverses variables CSS pour personnaliser votre application :
|
|
32
|
+
|
|
33
|
+
- `--sdg-color-*` — Couleurs du thème SDG
|
|
34
|
+
- `--sdg-elevation-*` — Valeurs d'ombre
|
|
35
|
+
- `--sdg-spacer-*` — Valeurs d'espacement
|
|
36
|
+
- `--sdg-font-size-*` — Tailles de police
|
|
37
|
+
- `--sdg-line-height-*` — Hauteurs de ligne
|
|
38
|
+
|
|
39
|
+
## Structure
|
|
40
|
+
|
|
41
|
+
### Styles
|
|
42
|
+
|
|
43
|
+
- `_typography.scss` — Système de typographie avec échelles responsives
|
|
44
|
+
- `_elevation.scss` — Système d'élévation (z-values 0-4)
|
|
45
|
+
- `_sass-utils.scss` — Utilitaires et helpers Sass
|
|
46
|
+
- `bootstrap-layout.scss` — Grille responsive basée sur Bootstrap
|
|
47
|
+
- `_breakpoints.scss` — Points d'arrêt responsifs
|
|
48
|
+
|
|
49
|
+
### Mise en page (SCSS uniquement)
|
|
50
|
+
|
|
51
|
+
- `bootstrap-layout.scss` — Grille responsive basée sur Bootstrap
|
|
52
|
+
- `_breakpoints.scss` — Points d'arrêt responsifs
|
|
53
|
+
|
|
54
|
+
Disponible via `@use '@igo2/sdg-core/layout'`.
|
|
55
|
+
|
|
56
|
+
## Caractéristiques
|
|
57
|
+
|
|
58
|
+
✅ **Système de typographie** — Typographie extensible alignée avec les directives SDG
|
|
59
|
+
✅ **Compatible Bootstrap** — Utilise Bootstrap 5.2 grid system
|
|
60
|
+
|
|
61
|
+
## Modules connexes
|
|
62
|
+
|
|
63
|
+
- [`@igo2/sdg-common`](../common/README.md) — Composants UI et utilitaires Angular
|
|
64
|
+
- [`@igo2/sdg-carto`](../carto/README.md) — Module cartographique
|
|
65
|
+
- [`@igo2/sdg-i18n`](../i18n/README.md) — Utilitaires d'internationalisation
|
|
66
|
+
|
|
67
|
+
|
|
@@ -1,101 +1,4 @@
|
|
|
1
|
-
import { BreakpointObserver } from '@angular/cdk/layout';
|
|
2
|
-
import * as i0 from '@angular/core';
|
|
3
|
-
import { inject, signal, Injectable, Pipe, model, Directive } from '@angular/core';
|
|
4
|
-
|
|
5
|
-
class BreakpointService {
|
|
6
|
-
breakpointObserver = inject(BreakpointObserver);
|
|
7
|
-
_isHandset = signal(false, ...(ngDevMode ? [{ debugName: "_isHandset" }] : []));
|
|
8
|
-
get isHandset() {
|
|
9
|
-
return this._isHandset.asReadonly();
|
|
10
|
-
}
|
|
11
|
-
constructor() {
|
|
12
|
-
this.handleBreakpoint();
|
|
13
|
-
}
|
|
14
|
-
handleBreakpoint() {
|
|
15
|
-
this.breakpointObserver
|
|
16
|
-
.observe('(max-width: 575px)')
|
|
17
|
-
.subscribe((result) => {
|
|
18
|
-
this._isHandset.set(result.matches);
|
|
19
|
-
});
|
|
20
|
-
}
|
|
21
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: BreakpointService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
22
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: BreakpointService, providedIn: 'root' });
|
|
23
|
-
}
|
|
24
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: BreakpointService, decorators: [{
|
|
25
|
-
type: Injectable,
|
|
26
|
-
args: [{
|
|
27
|
-
providedIn: 'root'
|
|
28
|
-
}]
|
|
29
|
-
}], ctorParameters: () => [] });
|
|
30
|
-
|
|
31
|
-
const RouteTitleKey = 'RouteTitle';
|
|
32
|
-
const RouteTranslateKey = 'TranslateKey';
|
|
33
|
-
function hasStaticTitle(config) {
|
|
34
|
-
return typeof config.title === 'string' || config.title === null;
|
|
35
|
-
}
|
|
36
|
-
function resolveTitle(config, titleResolver) {
|
|
37
|
-
if (hasStaticTitle(config)) {
|
|
38
|
-
return config.title;
|
|
39
|
-
}
|
|
40
|
-
else {
|
|
41
|
-
return (titleResolver?.resolveStatic(config) ?? config.data?.[RouteTranslateKey] // try to fallback on the translation key
|
|
42
|
-
);
|
|
43
|
-
}
|
|
44
|
-
}
|
|
45
|
-
|
|
46
|
-
class TitleResolver {
|
|
47
|
-
}
|
|
48
|
-
|
|
49
|
-
class TitleResolverPipe {
|
|
50
|
-
titleResolver = inject(TitleResolver, { optional: true });
|
|
51
|
-
transform(value) {
|
|
52
|
-
return resolveTitle(value, this.titleResolver);
|
|
53
|
-
}
|
|
54
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: TitleResolverPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
|
|
55
|
-
static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.21", ngImport: i0, type: TitleResolverPipe, isStandalone: true, name: "titleResolver" });
|
|
56
|
-
}
|
|
57
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: TitleResolverPipe, decorators: [{
|
|
58
|
-
type: Pipe,
|
|
59
|
-
args: [{
|
|
60
|
-
name: 'titleResolver',
|
|
61
|
-
standalone: true
|
|
62
|
-
}]
|
|
63
|
-
}] });
|
|
64
|
-
|
|
65
|
-
function pathIsExternal(path) {
|
|
66
|
-
const regex = /^https?:\/\//;
|
|
67
|
-
return regex.test(path);
|
|
68
|
-
}
|
|
69
|
-
function isSafeUrl(url) {
|
|
70
|
-
const safePattern = /^(https?:\/\/|\/(?!\/)|\.\/|\.\.\/)/;
|
|
71
|
-
const unsafePattern = /^(javascript:|data:|vbscript:)/i;
|
|
72
|
-
return safePattern.test(url) && !unsafePattern.test(url.trim());
|
|
73
|
-
}
|
|
74
|
-
|
|
75
|
-
class WithLabels {
|
|
76
|
-
labels = model({}, ...(ngDevMode ? [{ debugName: "labels" }] : []));
|
|
77
|
-
// eslint-disable-next-line @angular-eslint/prefer-inject
|
|
78
|
-
constructor(defaultLabels, labelsToken) {
|
|
79
|
-
this.setLabels(defaultLabels, labelsToken);
|
|
80
|
-
}
|
|
81
|
-
setLabels(defaultLabels, token) {
|
|
82
|
-
const labelsOverride = inject(token, { optional: true });
|
|
83
|
-
this.labels.update((value) => ({
|
|
84
|
-
...(defaultLabels ?? {}),
|
|
85
|
-
...(labelsOverride ?? {}),
|
|
86
|
-
...value
|
|
87
|
-
}));
|
|
88
|
-
}
|
|
89
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: WithLabels, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive });
|
|
90
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.21", type: WithLabels, isStandalone: true, inputs: { labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { labels: "labelsChange" }, ngImport: i0 });
|
|
91
|
-
}
|
|
92
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: WithLabels, decorators: [{
|
|
93
|
-
type: Directive
|
|
94
|
-
}], ctorParameters: () => [{ type: undefined }, { type: i0.InjectionToken }], propDecorators: { labels: [{ type: i0.Input, args: [{ isSignal: true, alias: "labels", required: false }] }, { type: i0.Output, args: ["labelsChange"] }] } });
|
|
95
|
-
|
|
96
1
|
/**
|
|
97
2
|
* Generated bundle index. Do not edit.
|
|
98
3
|
*/
|
|
99
|
-
|
|
100
|
-
export { BreakpointService, RouteTitleKey, RouteTranslateKey, TitleResolver, TitleResolverPipe, WithLabels, isSafeUrl, pathIsExternal, resolveTitle };
|
|
101
4
|
//# sourceMappingURL=igo2-sdg-core.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"igo2-sdg-core.mjs","sources":["../../../packages/core/src/
|
|
1
|
+
{"version":3,"file":"igo2-sdg-core.mjs","sources":["../../../packages/core/src/igo2-sdg-core.ts"],"sourcesContent":["/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"AAAA;;AAEG"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@igo2/sdg-core",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "2.0.0-next.10",
|
|
4
4
|
"license": "LiLiQ-R",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -13,7 +13,7 @@
|
|
|
13
13
|
"exports": {
|
|
14
14
|
".": {
|
|
15
15
|
"sass": "./_index.scss",
|
|
16
|
-
"types": "./
|
|
16
|
+
"types": "./types/igo2-sdg-core.d.ts",
|
|
17
17
|
"default": "./fesm2022/igo2-sdg-core.mjs"
|
|
18
18
|
},
|
|
19
19
|
"./layout": {
|
|
@@ -23,17 +23,12 @@
|
|
|
23
23
|
"default": "./package.json"
|
|
24
24
|
}
|
|
25
25
|
},
|
|
26
|
-
"peerDependencies": {
|
|
27
|
-
"@angular/cdk": "^20.0.0",
|
|
28
|
-
"@angular/common": "^20.0.0",
|
|
29
|
-
"@angular/core": "^20.0.0",
|
|
30
|
-
"@angular/material": "^20.0.0",
|
|
31
|
-
"@angular/router": "^20.0.0"
|
|
32
|
-
},
|
|
33
26
|
"dependencies": {
|
|
34
27
|
"tslib": "^2.6.0"
|
|
35
28
|
},
|
|
36
29
|
"sideEffects": false,
|
|
37
30
|
"module": "fesm2022/igo2-sdg-core.mjs",
|
|
38
|
-
"typings": "
|
|
31
|
+
"typings": "types/igo2-sdg-core.d.ts",
|
|
32
|
+
"type": "module",
|
|
33
|
+
"peerDependencies": {}
|
|
39
34
|
}
|
package/src/_index.scss
CHANGED
package/src/style/_index.scss
CHANGED
package/src/tokens/_system.scss
CHANGED
|
@@ -1,8 +1,5 @@
|
|
|
1
1
|
@use 'sass:map';
|
|
2
2
|
|
|
3
|
-
@use '../style/overrides';
|
|
4
|
-
@use '../style/elevation';
|
|
5
|
-
@use '../style/typography';
|
|
6
3
|
@use './sys-colors';
|
|
7
4
|
@use './sys-elevation';
|
|
8
5
|
@use './sys-layout';
|
|
@@ -10,25 +7,6 @@
|
|
|
10
7
|
@use './sys-typography';
|
|
11
8
|
@use './token-utils';
|
|
12
9
|
|
|
13
|
-
@mixin theme($withDarkMode: false) {
|
|
14
|
-
@include system-tokens();
|
|
15
|
-
|
|
16
|
-
@if ($withDarkMode) {
|
|
17
|
-
body.dark-mode {
|
|
18
|
-
@include _system-dark-colors();
|
|
19
|
-
}
|
|
20
|
-
}
|
|
21
|
-
|
|
22
|
-
body {
|
|
23
|
-
background-color: var(--sdg-color-background);
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
@include typography.typo-base();
|
|
27
|
-
|
|
28
|
-
@include overrides.igo2-lib-overrides();
|
|
29
|
-
@include overrides.material-overrides();
|
|
30
|
-
}
|
|
31
|
-
|
|
32
10
|
@mixin system-tokens() {
|
|
33
11
|
@include _system-colors();
|
|
34
12
|
@include _system-typographies();
|
|
@@ -52,6 +30,10 @@
|
|
|
52
30
|
@include token-utils.values(sys-colors.sys-dark-color-values());
|
|
53
31
|
}
|
|
54
32
|
|
|
33
|
+
@mixin system-dark-colors() {
|
|
34
|
+
@include _system-dark-colors();
|
|
35
|
+
}
|
|
36
|
+
|
|
55
37
|
@mixin _system-typographies() {
|
|
56
38
|
$typography: sys-typography.sys-typography-values();
|
|
57
39
|
@include token-utils.values($typography);
|
package/index.d.ts
DELETED
|
@@ -1,53 +0,0 @@
|
|
|
1
|
-
import * as i0 from '@angular/core';
|
|
2
|
-
import { Signal, PipeTransform, InjectionToken } from '@angular/core';
|
|
3
|
-
import { Resolve, ActivatedRouteSnapshot, RouterStateSnapshot, MaybeAsync, Route } from '@angular/router';
|
|
4
|
-
|
|
5
|
-
declare class BreakpointService {
|
|
6
|
-
private breakpointObserver;
|
|
7
|
-
private _isHandset;
|
|
8
|
-
get isHandset(): Signal<boolean>;
|
|
9
|
-
constructor();
|
|
10
|
-
private handleBreakpoint;
|
|
11
|
-
static ɵfac: i0.ɵɵFactoryDeclaration<BreakpointService, never>;
|
|
12
|
-
static ɵprov: i0.ɵɵInjectableDeclaration<BreakpointService>;
|
|
13
|
-
}
|
|
14
|
-
|
|
15
|
-
declare abstract class TitleResolver<T = string> implements Resolve<T> {
|
|
16
|
-
abstract resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): MaybeAsync<T>;
|
|
17
|
-
abstract resolveStatic(route: Route): string | undefined;
|
|
18
|
-
}
|
|
19
|
-
|
|
20
|
-
declare const RouteTitleKey = "RouteTitle";
|
|
21
|
-
declare const RouteTranslateKey = "TranslateKey";
|
|
22
|
-
declare function resolveTitle(config: Route, titleResolver?: TitleResolver | null): string | undefined;
|
|
23
|
-
|
|
24
|
-
type SdgRoutes = SdgRoute[];
|
|
25
|
-
interface SdgRoute extends Route {
|
|
26
|
-
isHome?: boolean;
|
|
27
|
-
description?: string;
|
|
28
|
-
children?: SdgRoutes;
|
|
29
|
-
/** Hidden in the primary tabs navigation and in the breadcrumbs */
|
|
30
|
-
hidden?: boolean;
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
declare class TitleResolverPipe implements PipeTransform {
|
|
34
|
-
private titleResolver;
|
|
35
|
-
transform(value: SdgRoute): string | undefined;
|
|
36
|
-
static ɵfac: i0.ɵɵFactoryDeclaration<TitleResolverPipe, never>;
|
|
37
|
-
static ɵpipe: i0.ɵɵPipeDeclaration<TitleResolverPipe, "titleResolver", true>;
|
|
38
|
-
}
|
|
39
|
-
|
|
40
|
-
declare function pathIsExternal(path: string): boolean;
|
|
41
|
-
declare function isSafeUrl(url: string): boolean;
|
|
42
|
-
|
|
43
|
-
type Labels = Record<string, any>;
|
|
44
|
-
declare class WithLabels<T extends Labels> {
|
|
45
|
-
labels: i0.ModelSignal<T>;
|
|
46
|
-
constructor(defaultLabels: T | undefined, labelsToken: InjectionToken<T>);
|
|
47
|
-
private setLabels;
|
|
48
|
-
static ɵfac: i0.ɵɵFactoryDeclaration<WithLabels<any>, never>;
|
|
49
|
-
static ɵdir: i0.ɵɵDirectiveDeclaration<WithLabels<any>, never, never, { "labels": { "alias": "labels"; "required": false; "isSignal": true; }; }, { "labels": "labelsChange"; }, never, never, true, never>;
|
|
50
|
-
}
|
|
51
|
-
|
|
52
|
-
export { BreakpointService, RouteTitleKey, RouteTranslateKey, TitleResolver, TitleResolverPipe, WithLabels, isSafeUrl, pathIsExternal, resolveTitle };
|
|
53
|
-
export type { SdgRoute, SdgRoutes };
|
|
@@ -1,22 +0,0 @@
|
|
|
1
|
-
@mixin overrides() {
|
|
2
|
-
igo-search-results-item {
|
|
3
|
-
.mdc-list-item__primary-text {
|
|
4
|
-
white-space: normal;
|
|
5
|
-
overflow: hidden;
|
|
6
|
-
text-overflow: ellipsis;
|
|
7
|
-
max-height: unset !important;
|
|
8
|
-
line-height: 18px !important;
|
|
9
|
-
}
|
|
10
|
-
}
|
|
11
|
-
|
|
12
|
-
igo-list
|
|
13
|
-
[igolistitem][color='accent'].igo-list-item-selected
|
|
14
|
-
> mat-list-item {
|
|
15
|
-
background-color: var(--sdg-color-blue-pale);
|
|
16
|
-
|
|
17
|
-
h4,
|
|
18
|
-
small {
|
|
19
|
-
color: var(--sdg-color-blue-piv) !important;
|
|
20
|
-
}
|
|
21
|
-
}
|
|
22
|
-
}
|
|
@@ -1,72 +0,0 @@
|
|
|
1
|
-
@use 'sass:map';
|
|
2
|
-
@use '@angular/material' as mat;
|
|
3
|
-
|
|
4
|
-
@mixin overrides() {
|
|
5
|
-
igo-search-bar {
|
|
6
|
-
background-color: var(--sdg-color-background);
|
|
7
|
-
|
|
8
|
-
// Workaroung, OPEN SANS font add a mysterious 1px for the height
|
|
9
|
-
.mat-mdc-form-field-infix {
|
|
10
|
-
max-height: 40px;
|
|
11
|
-
}
|
|
12
|
-
|
|
13
|
-
button[mat-icon-button] {
|
|
14
|
-
border-radius: 0;
|
|
15
|
-
background-color: var(--sdg-color-blue-piv);
|
|
16
|
-
|
|
17
|
-
&:hover {
|
|
18
|
-
background-color: var(--sdg-color-blue-normal);
|
|
19
|
-
}
|
|
20
|
-
}
|
|
21
|
-
|
|
22
|
-
mat-icon {
|
|
23
|
-
color: var(--sdg-color-white);
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
mat-form-field {
|
|
27
|
-
@include mat.form-field-overrides(
|
|
28
|
-
(
|
|
29
|
-
container-height: 40px,
|
|
30
|
-
container-vertical-padding: 8px
|
|
31
|
-
)
|
|
32
|
-
);
|
|
33
|
-
}
|
|
34
|
-
|
|
35
|
-
.mdc-icon-button.mat-mdc-button-base {
|
|
36
|
-
@include mat.icon-button-overrides(
|
|
37
|
-
(
|
|
38
|
-
state-layer-size: 40px
|
|
39
|
-
)
|
|
40
|
-
);
|
|
41
|
-
// reset the default padding of Material. Igo is overriding it
|
|
42
|
-
padding: calc(
|
|
43
|
-
calc(
|
|
44
|
-
var(--mat-icon-button-state-layer-size, 40px) - var(
|
|
45
|
-
--mat-icon-button-icon-size,
|
|
46
|
-
24px
|
|
47
|
-
)
|
|
48
|
-
) /
|
|
49
|
-
2
|
|
50
|
-
);
|
|
51
|
-
}
|
|
52
|
-
}
|
|
53
|
-
|
|
54
|
-
igo-search-results {
|
|
55
|
-
igo-collapsible {
|
|
56
|
-
.mdc-list-item__primary-text {
|
|
57
|
-
color: var(--sdg-color-text);
|
|
58
|
-
font-weight: bold;
|
|
59
|
-
}
|
|
60
|
-
}
|
|
61
|
-
|
|
62
|
-
igo-search-results-item {
|
|
63
|
-
.mdc-list-item__primary-text {
|
|
64
|
-
font-weight: normal;
|
|
65
|
-
}
|
|
66
|
-
}
|
|
67
|
-
|
|
68
|
-
.mdc-list-item--with-leading-icon .mdc-list-item__start {
|
|
69
|
-
color: var(--sdg-color-text);
|
|
70
|
-
}
|
|
71
|
-
}
|
|
72
|
-
}
|
|
@@ -1,137 +0,0 @@
|
|
|
1
|
-
@use '@angular/material' as mat;
|
|
2
|
-
|
|
3
|
-
@mixin overrides() {
|
|
4
|
-
.mdc-button {
|
|
5
|
-
$height: 56px;
|
|
6
|
-
$font-size: var(--sdg-font-size-md);
|
|
7
|
-
$border-radius: 0;
|
|
8
|
-
$horizontal-padding: 16px;
|
|
9
|
-
|
|
10
|
-
min-width: calc($height * 2) !important;
|
|
11
|
-
max-width: 360px;
|
|
12
|
-
line-height: var(--sdg-line-height-md) !important;
|
|
13
|
-
|
|
14
|
-
@include mat.button-overrides(
|
|
15
|
-
(
|
|
16
|
-
filled-container-height: $height,
|
|
17
|
-
filled-label-text-size: $font-size,
|
|
18
|
-
filled-label-text-weight: bold,
|
|
19
|
-
filled-container-shape: $border-radius,
|
|
20
|
-
filled-horizontal-padding: $horizontal-padding,
|
|
21
|
-
outlined-container-height: $height,
|
|
22
|
-
outlined-label-text-size: $font-size,
|
|
23
|
-
outlined-label-text-weight: bold,
|
|
24
|
-
outlined-container-shape: $border-radius,
|
|
25
|
-
outlined-horizontal-padding: $horizontal-padding,
|
|
26
|
-
protected-container-height: $height,
|
|
27
|
-
protected-label-text-size: $font-size,
|
|
28
|
-
protected-label-text-weight: bold,
|
|
29
|
-
protected-container-shape: $border-radius,
|
|
30
|
-
protected-horizontal-padding: $horizontal-padding,
|
|
31
|
-
text-container-height: $height,
|
|
32
|
-
text-label-text-size: $font-size,
|
|
33
|
-
text-label-text-weight: bold,
|
|
34
|
-
text-container-shape: $border-radius,
|
|
35
|
-
text-horizontal-padding: $horizontal-padding
|
|
36
|
-
)
|
|
37
|
-
);
|
|
38
|
-
|
|
39
|
-
&[compact] {
|
|
40
|
-
$height: 40px;
|
|
41
|
-
@include mat.button-overrides(
|
|
42
|
-
(
|
|
43
|
-
filled-container-height: $height,
|
|
44
|
-
outlined-container-height: $height,
|
|
45
|
-
protected-container-height: $height,
|
|
46
|
-
text-container-height: $height
|
|
47
|
-
)
|
|
48
|
-
);
|
|
49
|
-
|
|
50
|
-
min-width: calc($height * 2) !important;
|
|
51
|
-
}
|
|
52
|
-
}
|
|
53
|
-
|
|
54
|
-
.mat-mdc-button-base {
|
|
55
|
-
&.on-primary {
|
|
56
|
-
@include mat.button-overrides(
|
|
57
|
-
(
|
|
58
|
-
filled-state-layer-color: var(--sdg-color-grey-pale),
|
|
59
|
-
outlined-state-layer-color: var(--sdg-color-grey-pale),
|
|
60
|
-
protected-state-layer-color: var(--sdg-color-grey-pale),
|
|
61
|
-
text-state-layer-color: var(--sdg-color-grey-pale)
|
|
62
|
-
)
|
|
63
|
-
);
|
|
64
|
-
@include mat.icon-button-overrides(
|
|
65
|
-
(
|
|
66
|
-
state-layer-color: var(--sdg-color-grey-pale)
|
|
67
|
-
)
|
|
68
|
-
);
|
|
69
|
-
}
|
|
70
|
-
}
|
|
71
|
-
|
|
72
|
-
.mat-mdc-outlined-button {
|
|
73
|
-
border-color: currentColor !important;
|
|
74
|
-
border-width: 2px !important;
|
|
75
|
-
background-color: var(--sdg-color-background) !important;
|
|
76
|
-
|
|
77
|
-
&[compact] {
|
|
78
|
-
border-width: 1px !important;
|
|
79
|
-
}
|
|
80
|
-
}
|
|
81
|
-
|
|
82
|
-
.mdc-fab {
|
|
83
|
-
$background: var(--sdg-color-blue-piv);
|
|
84
|
-
$foreground: var(--sdg-color-white);
|
|
85
|
-
$border-radius: 0;
|
|
86
|
-
|
|
87
|
-
@include mat.fab-overrides(
|
|
88
|
-
(
|
|
89
|
-
container-color: $background,
|
|
90
|
-
container-shape: $border-radius,
|
|
91
|
-
foreground-color: $foreground,
|
|
92
|
-
small-container-color: $background,
|
|
93
|
-
small-container-shape: $border-radius,
|
|
94
|
-
small-foreground-color: $foreground
|
|
95
|
-
)
|
|
96
|
-
);
|
|
97
|
-
}
|
|
98
|
-
|
|
99
|
-
@include color-variants-backwards-compatibility();
|
|
100
|
-
}
|
|
101
|
-
|
|
102
|
-
// Material custom color variants backwards compatibility
|
|
103
|
-
@mixin color-variants-backwards-compatibility() {
|
|
104
|
-
.mdc-button {
|
|
105
|
-
&.mat-warn {
|
|
106
|
-
@include mat.button-overrides(
|
|
107
|
-
(
|
|
108
|
-
filled-container-color: var(--sdg-color-red-normal)
|
|
109
|
-
)
|
|
110
|
-
);
|
|
111
|
-
}
|
|
112
|
-
&.mat-primary {
|
|
113
|
-
@include mat.button-overrides(
|
|
114
|
-
(
|
|
115
|
-
filled-container-color: var(--sdg-color-blue-piv)
|
|
116
|
-
)
|
|
117
|
-
);
|
|
118
|
-
}
|
|
119
|
-
}
|
|
120
|
-
|
|
121
|
-
.mdc-icon-button {
|
|
122
|
-
&.mat-warn {
|
|
123
|
-
@include mat.icon-button-overrides(
|
|
124
|
-
(
|
|
125
|
-
icon-color: var(--sdg-color-red-normal)
|
|
126
|
-
)
|
|
127
|
-
);
|
|
128
|
-
}
|
|
129
|
-
&.mat-primary {
|
|
130
|
-
@include mat.icon-button-overrides(
|
|
131
|
-
(
|
|
132
|
-
icon-color: var(--sdg-color-blue-piv)
|
|
133
|
-
)
|
|
134
|
-
);
|
|
135
|
-
}
|
|
136
|
-
}
|
|
137
|
-
}
|