@synergy-design-system/metadata 3.13.0 → 3.15.0
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/CHANGELOG.md +25 -0
- package/data/core/component/component:syn-card.json +0 -5
- package/data/core/component/component:syn-drawer.json +0 -5
- package/data/core/setup/setup:angular-components-module.json +1 -1
- package/data/core/setup/setup:angular-forms-module.json +1 -1
- package/data/core/setup/setup:angular-package.json +2 -2
- package/data/core/setup/setup:angular-validators-module.json +1 -1
- package/data/core/setup/setup:components-package.json +2 -2
- package/data/core/setup/setup:react-package.json +2 -2
- package/data/core/setup/setup:tokens-package.json +2 -2
- package/data/core/setup/setup:vue-package.json +2 -2
- package/data/core/token/token:tokens-charts-js-index-d-ts.json +1 -1
- package/data/core/token/token:tokens-charts-js-index-js.json +1 -1
- package/data/core/token/token:tokens-charts-scss-tokens-scss.json +1 -1
- package/data/core/token/token:tokens-charts-themes-sick2025-dark-css.json +1 -1
- package/data/core/token/token:tokens-charts-themes-sick2025-light-css.json +1 -1
- package/data/core/token/token:tokens-figma-variables-sick2018-dark-json.json +1 -1
- package/data/core/token/token:tokens-figma-variables-sick2018-light-json.json +1 -1
- package/data/core/token/token:tokens-figma-variables-sick2025-dark-json.json +1 -1
- package/data/core/token/token:tokens-figma-variables-sick2025-light-json.json +1 -1
- package/data/core/token/token:tokens-js-index-d-ts.json +1 -1
- package/data/core/token/token:tokens-js-index-js.json +1 -1
- package/data/core/token/token:tokens-scss-tokens-scss.json +1 -1
- package/data/core/token/token:tokens-themes-sick2018-dark-css.json +1 -1
- package/data/core/token/token:tokens-themes-sick2018-light-css.json +1 -1
- package/data/core/token/token:tokens-themes-sick2025-dark-css.json +1 -1
- package/data/core/token/token:tokens-themes-sick2025-light-css.json +1 -1
- package/data/index.json +3 -3
- package/data/layers/examples/component/component:syn-card.md +4 -4
- package/data/layers/examples/component/component:syn-header.md +1 -1
- package/data/layers/examples/template/template:appshell.md +56 -0
- package/data/layers/examples/template/template:breadcrumb.md +0 -3
- package/data/layers/examples/template/template:footer.md +7 -0
- package/data/layers/examples/template/template:forms.md +12 -24
- package/data/layers/examples/template/template:localization.md +0 -1
- package/data/layers/examples/template/template:tag-group.md +2 -8
- package/data/layers/full/component/component:syn-card/components/card.component.ts +10 -10
- package/data/layers/full/component/component:syn-card/components/card.styles.ts +31 -11
- package/data/layers/full/component/component:syn-card/components/card.ts +0 -1
- package/data/layers/full/component/component:syn-dialog/components/dialog.styles.ts +3 -14
- package/data/layers/full/component/component:syn-drawer/components/drawer.component.ts +1 -2
- package/data/layers/full/component/component:syn-drawer/components/drawer.styles.ts +47 -49
- package/data/layers/full/component/component:syn-header/components/header.styles.ts +1 -1
- package/data/layers/full/setup/setup:angular-package/angular/CHANGELOG.md +16 -0
- package/data/layers/full/setup/setup:angular-package/angular/package.json +1 -1
- package/data/layers/full/setup/setup:components-package/components/CHANGELOG.md +31 -0
- package/data/layers/full/setup/setup:components-package/components/package.json +2 -2
- package/data/layers/full/setup/setup:react-package/react/CHANGELOG.md +16 -0
- package/data/layers/full/setup/setup:react-package/react/package.json +1 -1
- package/data/layers/full/setup/setup:tokens-package/tokens/CHANGELOG.md +4 -0
- package/data/layers/full/setup/setup:tokens-package/tokens/package.json +1 -1
- package/data/layers/full/setup/setup:vue-package/vue/CHANGELOG.md +16 -0
- package/data/layers/full/setup/setup:vue-package/vue/package.json +1 -1
- package/data/layers/full/tokens/charts/js/index.d.ts +1 -1
- package/data/layers/full/tokens/charts/js/index.js +1 -1
- package/data/layers/full/tokens/charts/scss/_tokens.scss +1 -1
- package/data/layers/full/tokens/charts/themes/sick2025_dark.css +1 -1
- package/data/layers/full/tokens/charts/themes/sick2025_light.css +1 -1
- package/data/layers/full/tokens/js/index.d.ts +1 -1
- package/data/layers/full/tokens/js/index.js +1 -1
- package/data/layers/full/tokens/scss/_tokens.scss +1 -1
- package/data/layers/full/tokens/themes/sick2018_dark.css +1 -1
- package/data/layers/full/tokens/themes/sick2018_light.css +1 -1
- package/data/layers/full/tokens/themes/sick2025_dark.css +1 -1
- package/data/layers/full/tokens/themes/sick2025_light.css +1 -1
- package/data/manifest.json +1 -1
- package/package.json +6 -6
- package/data/layers/full/component/component:syn-card/components/card.custom.styles.ts +0 -60
- package/data/layers/full/component/component:syn-drawer/components/drawer.custom.styles.ts +0 -78
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,30 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
+
## 3.15.0
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [#1302](https://github.com/synergy-design-system/synergy-design-system/pull/1302) [`77a02c1`](https://github.com/synergy-design-system/synergy-design-system/commit/77a02c15b4d9310dbb24ea945629c83a7a2e4e16) Thanks [@schilchSICKAG](https://github.com/schilchSICKAG)! - Released on: 2026-06-22
|
|
8
|
+
|
|
9
|
+
fix: 🐛 Components should use correct headline styles ([#1290](https://github.com/synergy-design-system/synergy-design-system/issues/1290))
|
|
10
|
+
|
|
11
|
+
This release fixes multiple typographic issues for headers in the following components:
|
|
12
|
+
- `<syn-card>`
|
|
13
|
+
- `<syn-dialog>`
|
|
14
|
+
- `<syn-drawer>`
|
|
15
|
+
- `<syn-header>`
|
|
16
|
+
|
|
17
|
+
## 3.14.0
|
|
18
|
+
|
|
19
|
+
### Patch Changes
|
|
20
|
+
|
|
21
|
+
- [#1306](https://github.com/synergy-design-system/synergy-design-system/pull/1306) [`b4494ba`](https://github.com/synergy-design-system/synergy-design-system/commit/b4494ba1bcaf1016c83bc03c44b1ece17b8a194a) Thanks [@kirchsuSICKAG](https://github.com/kirchsuSICKAG)! - Released on: 2026-06-16
|
|
22
|
+
|
|
23
|
+
fix: 🐛 Focus Issues with new Chromium version ([#1304](https://github.com/synergy-design-system/synergy-design-system/issues/1304))
|
|
24
|
+
|
|
25
|
+
This release fixes focus-related issues caused by changes in newer Chromium versions.
|
|
26
|
+
Affected were `<syn-select />` and `<syn-dropdown />` in combination with `<syn-dialog />` or `<syn-drawer />`
|
|
27
|
+
|
|
3
28
|
## 3.13.0
|
|
4
29
|
|
|
5
30
|
### Patch Changes
|
|
@@ -191,10 +191,6 @@
|
|
|
191
191
|
"layer": "full",
|
|
192
192
|
"path": "layers/full/component/component:syn-card/components/card.component.ts"
|
|
193
193
|
},
|
|
194
|
-
{
|
|
195
|
-
"layer": "full",
|
|
196
|
-
"path": "layers/full/component/component:syn-card/components/card.custom.styles.ts"
|
|
197
|
-
},
|
|
198
194
|
{
|
|
199
195
|
"layer": "full",
|
|
200
196
|
"path": "layers/full/component/component:syn-card/components/card.styles.ts"
|
|
@@ -240,7 +236,6 @@
|
|
|
240
236
|
"sources": [
|
|
241
237
|
"packages/angular/components/card/card.component.ts",
|
|
242
238
|
"packages/components/src/components/card/card.component.ts",
|
|
243
|
-
"packages/components/src/components/card/card.custom.styles.ts",
|
|
244
239
|
"packages/components/src/components/card/card.styles.ts",
|
|
245
240
|
"packages/components/src/components/card/card.ts",
|
|
246
241
|
"packages/react/src/components/card.ts",
|
|
@@ -257,10 +257,6 @@
|
|
|
257
257
|
"layer": "full",
|
|
258
258
|
"path": "layers/full/component/component:syn-drawer/components/drawer.component.ts"
|
|
259
259
|
},
|
|
260
|
-
{
|
|
261
|
-
"layer": "full",
|
|
262
|
-
"path": "layers/full/component/component:syn-drawer/components/drawer.custom.styles.ts"
|
|
263
|
-
},
|
|
264
260
|
{
|
|
265
261
|
"layer": "full",
|
|
266
262
|
"path": "layers/full/component/component:syn-drawer/components/drawer.styles.ts"
|
|
@@ -311,7 +307,6 @@
|
|
|
311
307
|
"sources": [
|
|
312
308
|
"packages/angular/components/drawer/drawer.component.ts",
|
|
313
309
|
"packages/components/src/components/drawer/drawer.component.ts",
|
|
314
|
-
"packages/components/src/components/drawer/drawer.custom.styles.ts",
|
|
315
310
|
"packages/components/src/components/drawer/drawer.styles.ts",
|
|
316
311
|
"packages/components/src/components/drawer/drawer.ts",
|
|
317
312
|
"packages/react/src/components/drawer.ts",
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
"custom": {
|
|
3
3
|
"framework": "angular",
|
|
4
4
|
"packageName": "@synergy-design-system/angular",
|
|
5
|
-
"packageVersion": "3.15.
|
|
5
|
+
"packageVersion": "3.15.6",
|
|
6
6
|
"subpathExports": [
|
|
7
7
|
".",
|
|
8
8
|
"./components/*",
|
|
@@ -39,7 +39,7 @@
|
|
|
39
39
|
"name": "Angular Framework Package",
|
|
40
40
|
"package": "angular",
|
|
41
41
|
"relations": [],
|
|
42
|
-
"since": "3.15.
|
|
42
|
+
"since": "3.15.6",
|
|
43
43
|
"sources": [
|
|
44
44
|
"packages/angular/README.md",
|
|
45
45
|
"packages/angular/CHANGELOG.md",
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"custom": {
|
|
3
3
|
"packageName": "@synergy-design-system/components",
|
|
4
|
-
"packageVersion": "3.15.
|
|
4
|
+
"packageVersion": "3.15.6"
|
|
5
5
|
},
|
|
6
6
|
"id": "setup:components-package",
|
|
7
7
|
"kind": "setup",
|
|
@@ -40,7 +40,7 @@
|
|
|
40
40
|
"name": "Components Package",
|
|
41
41
|
"package": "components",
|
|
42
42
|
"relations": [],
|
|
43
|
-
"since": "3.15.
|
|
43
|
+
"since": "3.15.6",
|
|
44
44
|
"sources": [
|
|
45
45
|
"packages/components/README.md",
|
|
46
46
|
"packages/components/CHANGELOG.md",
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
"custom": {
|
|
3
3
|
"framework": "react",
|
|
4
4
|
"packageName": "@synergy-design-system/react",
|
|
5
|
-
"packageVersion": "3.15.
|
|
5
|
+
"packageVersion": "3.15.6",
|
|
6
6
|
"subpathExports": [
|
|
7
7
|
".",
|
|
8
8
|
"./components/*",
|
|
@@ -42,7 +42,7 @@
|
|
|
42
42
|
"name": "React Framework Package",
|
|
43
43
|
"package": "react",
|
|
44
44
|
"relations": [],
|
|
45
|
-
"since": "3.15.
|
|
45
|
+
"since": "3.15.6",
|
|
46
46
|
"sources": [
|
|
47
47
|
"packages/react/README.md",
|
|
48
48
|
"packages/react/CHANGELOG.md",
|
|
@@ -32,7 +32,7 @@
|
|
|
32
32
|
"./themes/*"
|
|
33
33
|
],
|
|
34
34
|
"packageName": "@synergy-design-system/tokens",
|
|
35
|
-
"packageVersion": "3.15.
|
|
35
|
+
"packageVersion": "3.15.6"
|
|
36
36
|
},
|
|
37
37
|
"id": "setup:tokens-package",
|
|
38
38
|
"kind": "setup",
|
|
@@ -59,7 +59,7 @@
|
|
|
59
59
|
"name": "Tokens Package",
|
|
60
60
|
"package": "tokens",
|
|
61
61
|
"relations": [],
|
|
62
|
-
"since": "3.15.
|
|
62
|
+
"since": "3.15.6",
|
|
63
63
|
"sources": [
|
|
64
64
|
"packages/tokens/BREAKING_CHANGES.md",
|
|
65
65
|
"packages/tokens/CHANGELOG.md",
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
"custom": {
|
|
3
3
|
"framework": "vue",
|
|
4
4
|
"packageName": "@synergy-design-system/vue",
|
|
5
|
-
"packageVersion": "3.15.
|
|
5
|
+
"packageVersion": "3.15.6"
|
|
6
6
|
},
|
|
7
7
|
"id": "setup:vue-package",
|
|
8
8
|
"kind": "setup",
|
|
@@ -33,7 +33,7 @@
|
|
|
33
33
|
"name": "Vue Framework Package",
|
|
34
34
|
"package": "vue",
|
|
35
35
|
"relations": [],
|
|
36
|
-
"since": "3.15.
|
|
36
|
+
"since": "3.15.6",
|
|
37
37
|
"sources": [
|
|
38
38
|
"packages/vue/README.md",
|
|
39
39
|
"packages/vue/CHANGELOG.md",
|
package/data/index.json
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
{
|
|
2
|
-
"builtAt": "2026-06-
|
|
2
|
+
"builtAt": "2026-06-22T12:51:56.629Z",
|
|
3
3
|
"entities": [
|
|
4
4
|
{
|
|
5
5
|
"corePath": "data/core/asset/asset:sick2018-icons.json",
|
|
@@ -267,7 +267,7 @@
|
|
|
267
267
|
"kind": "component",
|
|
268
268
|
"layers": {
|
|
269
269
|
"examples": 1,
|
|
270
|
-
"full":
|
|
270
|
+
"full": 7,
|
|
271
271
|
"interface": 2,
|
|
272
272
|
"rules": 1
|
|
273
273
|
},
|
|
@@ -421,7 +421,7 @@
|
|
|
421
421
|
"kind": "component",
|
|
422
422
|
"layers": {
|
|
423
423
|
"examples": 1,
|
|
424
|
-
"full":
|
|
424
|
+
"full": 7,
|
|
425
425
|
"interface": 2,
|
|
426
426
|
"rules": 1
|
|
427
427
|
},
|
|
@@ -29,8 +29,8 @@ Cards can be used to group related subjects in a container.
|
|
|
29
29
|
}
|
|
30
30
|
|
|
31
31
|
syn-card h3 {
|
|
32
|
-
font: var(--syn-body-medium-bold)
|
|
33
|
-
margin: 0 0 var(--syn-spacing-x-small)
|
|
32
|
+
font: var(--syn-body-medium-bold);
|
|
33
|
+
margin: 0 0 var(--syn-spacing-x-small);
|
|
34
34
|
}
|
|
35
35
|
|
|
36
36
|
syn-card small {
|
|
@@ -142,8 +142,8 @@ Footers can be used to display actions, summaries, or other relevant content.
|
|
|
142
142
|
}
|
|
143
143
|
|
|
144
144
|
syn-card h3 {
|
|
145
|
-
font: var(--syn-body-medium-bold)
|
|
146
|
-
margin: 0 0 var(--syn-spacing-x-small)
|
|
145
|
+
font: var(--syn-body-medium-bold);
|
|
146
|
+
margin: 0 0 var(--syn-spacing-x-small);
|
|
147
147
|
}
|
|
148
148
|
|
|
149
149
|
syn-card small {
|
|
@@ -48,7 +48,7 @@ The focus event gives the user feedback that a link in the logo has been focused
|
|
|
48
48
|
```html
|
|
49
49
|
<style>
|
|
50
50
|
.custom-header-link-with-logo {
|
|
51
|
-
color: var(--syn-logo-color)
|
|
51
|
+
color: var(--syn-logo-color);
|
|
52
52
|
}
|
|
53
53
|
.custom-header-link-with-logo syn-icon {
|
|
54
54
|
display: block;
|
|
@@ -150,6 +150,13 @@ The side navigation opens when the user clicks on the burger menu. As the side n
|
|
|
150
150
|
<!-- /.synergy-demo-application -->
|
|
151
151
|
|
|
152
152
|
<style>
|
|
153
|
+
html,
|
|
154
|
+
body {
|
|
155
|
+
height: 100%;
|
|
156
|
+
margin: 0;
|
|
157
|
+
padding: 0;
|
|
158
|
+
}
|
|
159
|
+
|
|
153
160
|
body {
|
|
154
161
|
margin: 0 !important;
|
|
155
162
|
padding: 0 !important;
|
|
@@ -431,6 +438,13 @@ The side navigation opens when the user clicks on the burger menu. As the side n
|
|
|
431
438
|
<!-- /.synergy-demo-application -->
|
|
432
439
|
|
|
433
440
|
<style>
|
|
441
|
+
html,
|
|
442
|
+
body {
|
|
443
|
+
height: 100%;
|
|
444
|
+
margin: 0;
|
|
445
|
+
padding: 0;
|
|
446
|
+
}
|
|
447
|
+
|
|
434
448
|
body {
|
|
435
449
|
margin: 0 !important;
|
|
436
450
|
padding: 0 !important;
|
|
@@ -761,6 +775,13 @@ The navigation opens when the user hovers over it. As the navigation opens, it o
|
|
|
761
775
|
<!-- /.synergy-demo-application -->
|
|
762
776
|
|
|
763
777
|
<style>
|
|
778
|
+
html,
|
|
779
|
+
body {
|
|
780
|
+
height: 100%;
|
|
781
|
+
margin: 0;
|
|
782
|
+
padding: 0;
|
|
783
|
+
}
|
|
784
|
+
|
|
764
785
|
body {
|
|
765
786
|
margin: 0 !important;
|
|
766
787
|
padding: 0 !important;
|
|
@@ -1054,6 +1075,13 @@ The navigation opens when the user touches it. As the side navigation opens, a t
|
|
|
1054
1075
|
<!-- /.synergy-demo-application -->
|
|
1055
1076
|
|
|
1056
1077
|
<style>
|
|
1078
|
+
html,
|
|
1079
|
+
body {
|
|
1080
|
+
height: 100%;
|
|
1081
|
+
margin: 0;
|
|
1082
|
+
padding: 0;
|
|
1083
|
+
}
|
|
1084
|
+
|
|
1057
1085
|
body {
|
|
1058
1086
|
margin: 0 !important;
|
|
1059
1087
|
padding: 0 !important;
|
|
@@ -1338,6 +1366,13 @@ General BehaviourThe navigation maintains its compact width until the user click
|
|
|
1338
1366
|
<!-- /.synergy-demo-application -->
|
|
1339
1367
|
|
|
1340
1368
|
<style>
|
|
1369
|
+
html,
|
|
1370
|
+
body {
|
|
1371
|
+
height: 100%;
|
|
1372
|
+
margin: 0;
|
|
1373
|
+
padding: 0;
|
|
1374
|
+
}
|
|
1375
|
+
|
|
1341
1376
|
body {
|
|
1342
1377
|
margin: 0 !important;
|
|
1343
1378
|
padding: 0 !important;
|
|
@@ -1622,6 +1657,13 @@ General BehaviourThe navigation maintains its compact width until the user click
|
|
|
1622
1657
|
<!-- /.synergy-demo-application -->
|
|
1623
1658
|
|
|
1624
1659
|
<style>
|
|
1660
|
+
html,
|
|
1661
|
+
body {
|
|
1662
|
+
height: 100%;
|
|
1663
|
+
margin: 0;
|
|
1664
|
+
padding: 0;
|
|
1665
|
+
}
|
|
1666
|
+
|
|
1625
1667
|
body {
|
|
1626
1668
|
margin: 0 !important;
|
|
1627
1669
|
padding: 0 !important;
|
|
@@ -1888,6 +1930,13 @@ The top navigation can be combined with a light grey background.This variant is
|
|
|
1888
1930
|
<!-- /.synergy-demo-application -->
|
|
1889
1931
|
|
|
1890
1932
|
<style>
|
|
1933
|
+
html,
|
|
1934
|
+
body {
|
|
1935
|
+
height: 100%;
|
|
1936
|
+
margin: 0;
|
|
1937
|
+
padding: 0;
|
|
1938
|
+
}
|
|
1939
|
+
|
|
1891
1940
|
body {
|
|
1892
1941
|
margin: 0 !important;
|
|
1893
1942
|
padding: 0 !important;
|
|
@@ -2142,6 +2191,13 @@ Additionally the top navigation can be combined with an alternative background.
|
|
|
2142
2191
|
<!-- /.synergy-demo-application -->
|
|
2143
2192
|
|
|
2144
2193
|
<style>
|
|
2194
|
+
html,
|
|
2195
|
+
body {
|
|
2196
|
+
height: 100%;
|
|
2197
|
+
margin: 0;
|
|
2198
|
+
padding: 0;
|
|
2199
|
+
}
|
|
2200
|
+
|
|
2145
2201
|
body {
|
|
2146
2202
|
margin: 0 !important;
|
|
2147
2203
|
padding: 0 !important;
|
|
@@ -32,7 +32,6 @@
|
|
|
32
32
|
|
|
33
33
|
<style>
|
|
34
34
|
body {
|
|
35
|
-
margin: 0 !important;
|
|
36
35
|
padding: 0 !important;
|
|
37
36
|
}
|
|
38
37
|
|
|
@@ -149,7 +148,6 @@
|
|
|
149
148
|
|
|
150
149
|
<style>
|
|
151
150
|
body {
|
|
152
|
-
margin: 0 !important;
|
|
153
151
|
padding: 0 !important;
|
|
154
152
|
}
|
|
155
153
|
|
|
@@ -203,7 +201,6 @@
|
|
|
203
201
|
|
|
204
202
|
<style>
|
|
205
203
|
body {
|
|
206
|
-
margin: 0 !important;
|
|
207
204
|
padding: 0 !important;
|
|
208
205
|
}
|
|
209
206
|
|
|
@@ -7,12 +7,10 @@
|
|
|
7
7
|
margin: 0 auto;
|
|
8
8
|
padding: var(--syn-spacing-x-large);
|
|
9
9
|
max-width: 750px;
|
|
10
|
-
}
|
|
11
10
|
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
margin: 0 0 var(--syn-spacing-medium) 0;
|
|
11
|
+
h1 {
|
|
12
|
+
margin: 0 0 var(--syn-spacing-medium) 0;
|
|
13
|
+
}
|
|
16
14
|
}
|
|
17
15
|
|
|
18
16
|
.synergy-form-demo > p {
|
|
@@ -31,10 +29,8 @@
|
|
|
31
29
|
}
|
|
32
30
|
|
|
33
31
|
fieldset legend {
|
|
34
|
-
font
|
|
35
|
-
|
|
36
|
-
line-height: var(--syn-line-height-normal);
|
|
37
|
-
margin-bottom: var(--syn-spacing-medium);
|
|
32
|
+
font: var(--syn-heading-large);
|
|
33
|
+
margin-bottom: var(--syn-spacing-large);
|
|
38
34
|
}
|
|
39
35
|
|
|
40
36
|
fieldset legend + p {
|
|
@@ -47,13 +43,7 @@
|
|
|
47
43
|
display: flex;
|
|
48
44
|
flex-flow: wrap;
|
|
49
45
|
margin-bottom: var(--syn-spacing-2x-large);
|
|
50
|
-
gap: var(--syn-spacing-large)
|
|
51
|
-
|
|
52
|
-
/* TODO: this two css properties can be removed, when this issue is fixed https://github.com/synergy-design-system/synergy-design-system/issues/612
|
|
53
|
-
* It is fixed for the newest chrome and firefox versions, but not for safari :(
|
|
54
|
-
*/
|
|
55
|
-
position: relative;
|
|
56
|
-
z-index: 1;
|
|
46
|
+
gap: var(--syn-spacing-large);
|
|
57
47
|
}
|
|
58
48
|
|
|
59
49
|
.fields > * {
|
|
@@ -62,7 +52,7 @@
|
|
|
62
52
|
|
|
63
53
|
@container (min-width: 640px) {
|
|
64
54
|
.fields > * {
|
|
65
|
-
flex-basis: calc(50% - var(--syn-spacing-
|
|
55
|
+
flex-basis: calc(50% - calc(var(--syn-spacing-large) / 2));
|
|
66
56
|
}
|
|
67
57
|
}
|
|
68
58
|
|
|
@@ -95,7 +85,7 @@
|
|
|
95
85
|
}
|
|
96
86
|
</style>
|
|
97
87
|
<div class="synergy-form-demo">
|
|
98
|
-
<h1>Contact Form</h1>
|
|
88
|
+
<h1 class="syn-heading--3x-large">Contact Form</h1>
|
|
99
89
|
<p>
|
|
100
90
|
Please fill in your personal information and let us know how we can help
|
|
101
91
|
you.
|
|
@@ -253,7 +243,7 @@
|
|
|
253
243
|
|
|
254
244
|
```html
|
|
255
245
|
<div class="synergy-upload-form-demo">
|
|
256
|
-
<h1>Multiple files upload</h1>
|
|
246
|
+
<h1 class="syn-heading--3x-large">Multiple files upload</h1>
|
|
257
247
|
<form
|
|
258
248
|
enctype="multipart/form-data"
|
|
259
249
|
method="post"
|
|
@@ -288,12 +278,10 @@
|
|
|
288
278
|
flex-direction: column;
|
|
289
279
|
gap: var(--syn-spacing-medium);
|
|
290
280
|
}
|
|
291
|
-
}
|
|
292
281
|
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
margin: 0 0 var(--syn-spacing-medium) 0;
|
|
282
|
+
h1 {
|
|
283
|
+
margin: 0 0 var(--syn-spacing-medium) 0;
|
|
284
|
+
}
|
|
297
285
|
}
|
|
298
286
|
|
|
299
287
|
.uploaded-files {
|