@igo2/sdg-core 2.0.0-next.12 → 2.0.0-next.14
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 +3 -3
- package/package.json +1 -1
- package/src/style/_index.scss +2 -0
- package/src/style/_styles.scss +7 -0
- package/src/style/_table.scss +88 -0
package/README.md
CHANGED
|
@@ -5,6 +5,7 @@ Infrastructure de base du Système de Design Gouvernemental du Québec (SDG).
|
|
|
5
5
|
## Vue d'ensemble
|
|
6
6
|
|
|
7
7
|
Ce paquet fournit l'infrastructure SCSS fondamentale pour les applications SDG :
|
|
8
|
+
|
|
8
9
|
- **Styles** — Typographie, système d'élévation, grille de mise en page, points d'arrêt responsifs
|
|
9
10
|
- **Tokens de design** — Jetons de couleur, espacement, élévation et disposition
|
|
10
11
|
|
|
@@ -41,6 +42,7 @@ Core génère diverses variables CSS pour personnaliser votre application :
|
|
|
41
42
|
### Styles
|
|
42
43
|
|
|
43
44
|
- `_typography.scss` — Système de typographie avec échelles responsives
|
|
45
|
+
- `_table.scss` - Styles pour les tableaux
|
|
44
46
|
- `_elevation.scss` — Système d'élévation (z-values 0-4)
|
|
45
47
|
- `_sass-utils.scss` — Utilitaires et helpers Sass
|
|
46
48
|
- `bootstrap-layout.scss` — Grille responsive basée sur Bootstrap
|
|
@@ -56,12 +58,10 @@ Disponible via `@use '@igo2/sdg-core/layout'`.
|
|
|
56
58
|
## Caractéristiques
|
|
57
59
|
|
|
58
60
|
✅ **Système de typographie** — Typographie extensible alignée avec les directives SDG
|
|
59
|
-
✅ **Compatible Bootstrap** — Utilise Bootstrap 5.2 grid system
|
|
61
|
+
✅ **Compatible Bootstrap** — Utilise Bootstrap 5.2 grid system
|
|
60
62
|
|
|
61
63
|
## Modules connexes
|
|
62
64
|
|
|
63
65
|
- [`@igo2/sdg-common`](../common/README.md) — Composants UI et utilitaires Angular
|
|
64
66
|
- [`@igo2/sdg-carto`](../carto/README.md) — Module cartographique
|
|
65
67
|
- [`@igo2/sdg-i18n`](../i18n/README.md) — Utilitaires d'internationalisation
|
|
66
|
-
|
|
67
|
-
|
package/package.json
CHANGED
package/src/style/_index.scss
CHANGED
|
@@ -0,0 +1,88 @@
|
|
|
1
|
+
@mixin table {
|
|
2
|
+
table {
|
|
3
|
+
width: 100%;
|
|
4
|
+
border-collapse: collapse;
|
|
5
|
+
margin: 72px 0 72px 0 !important;
|
|
6
|
+
|
|
7
|
+
&[grey],
|
|
8
|
+
&[simple] {
|
|
9
|
+
> thead {
|
|
10
|
+
color: var(--sdg-color-text);
|
|
11
|
+
}
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
&[grey] {
|
|
15
|
+
> thead {
|
|
16
|
+
background-color: var(--sdg-color-grey-pale);
|
|
17
|
+
border-bottom: 1px solid var(--sdg-color-grey-light);
|
|
18
|
+
}
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
&[simple] {
|
|
22
|
+
> thead {
|
|
23
|
+
background-color: var(--sdg-color-background);
|
|
24
|
+
border-bottom: 1px solid var(--sdg-color-blue-dark);
|
|
25
|
+
|
|
26
|
+
> tr > th {
|
|
27
|
+
padding: 0 var(--sdg-spacer-sm) var(--sdg-spacer-xs)
|
|
28
|
+
var(--sdg-spacer-sm);
|
|
29
|
+
}
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
> tbody {
|
|
33
|
+
> tr {
|
|
34
|
+
&:nth-child(even) {
|
|
35
|
+
background-color: var(--sdg-color-background);
|
|
36
|
+
}
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
> caption {
|
|
42
|
+
margin-bottom: var(--sdg-spacer-md);
|
|
43
|
+
text-align: left;
|
|
44
|
+
font-size: var(--sdg-font-size-lg);
|
|
45
|
+
line-height: var(--sdg-line-height-lg);
|
|
46
|
+
font-weight: var(--sdg-font-weight-bold);
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
> thead {
|
|
50
|
+
background-color: var(--sdg-palette-blue-650);
|
|
51
|
+
color: var(--sdg-color-white);
|
|
52
|
+
|
|
53
|
+
> tr > th {
|
|
54
|
+
text-align: left !important;
|
|
55
|
+
padding: var(--sdg-spacer-sm);
|
|
56
|
+
font-size: var(--sdg-font-size-md);
|
|
57
|
+
line-height: var(--sdg-line-height-md);
|
|
58
|
+
font-weight: var(--sdg-font-weight-bold);
|
|
59
|
+
|
|
60
|
+
&[numeric] {
|
|
61
|
+
text-align: right !important;
|
|
62
|
+
}
|
|
63
|
+
}
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
> tbody {
|
|
67
|
+
> tr {
|
|
68
|
+
border-bottom: 1px solid var(--sdg-color-grey-light);
|
|
69
|
+
|
|
70
|
+
&:nth-child(even) {
|
|
71
|
+
background-color: var(--sdg-color-grey-pale);
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
> td {
|
|
75
|
+
text-align: left !important;
|
|
76
|
+
padding: var(--sdg-spacer-sm);
|
|
77
|
+
font-size: var(--sdg-font-size-md);
|
|
78
|
+
line-height: var(--sdg-line-height-md);
|
|
79
|
+
font-weight: var(--sdg-font-weight-normal);
|
|
80
|
+
|
|
81
|
+
&[numeric] {
|
|
82
|
+
text-align: right !important;
|
|
83
|
+
}
|
|
84
|
+
}
|
|
85
|
+
}
|
|
86
|
+
}
|
|
87
|
+
}
|
|
88
|
+
}
|