@ilo-org/styles 0.9.0 → 0.9.2

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.
Files changed (58) hide show
  1. package/build/css/components/index.css +202 -170
  2. package/build/css/components/index.css.map +1 -1
  3. package/build/css/global.css +3 -2
  4. package/build/css/global.css.map +1 -1
  5. package/build/css/index.css +203 -171
  6. package/build/css/index.css.map +1 -1
  7. package/build/css/monorepo.css +203 -171
  8. package/build/css/monorepo.css.map +1 -1
  9. package/build/minified/index.css +1 -1
  10. package/build/minified/index.css.map +1 -1
  11. package/build/minified/monorepo.css +1 -1
  12. package/build/minified/monorepo.css.map +1 -1
  13. package/css/components/accordion.css +1 -1
  14. package/css/components/breadcrumb.css +1 -1
  15. package/css/components/button.css +1 -1
  16. package/css/components/callout.css +1 -1
  17. package/css/components/card.css +1 -1
  18. package/css/components/checkbox.css +1 -1
  19. package/css/components/contextmenu.css +1 -1
  20. package/css/components/datacard.css +1 -1
  21. package/css/components/dropdown.css +1 -1
  22. package/css/components/featurecard.css +1 -1
  23. package/css/components/fieldset.css +1 -1
  24. package/css/components/file-upload.css +1 -1
  25. package/css/components/footer.css +1 -1
  26. package/css/components/formcontrol.css +1 -1
  27. package/css/components/heading.css +1 -1
  28. package/css/components/herocard.css +1 -1
  29. package/css/components/input.css +1 -1
  30. package/css/components/linklist.css +1 -1
  31. package/css/components/list.css +1 -1
  32. package/css/components/loading.css +1 -1
  33. package/css/components/logo.css +1 -1
  34. package/css/components/navigation.css +1 -1
  35. package/css/components/pagination.css +1 -1
  36. package/css/components/profile.css +1 -1
  37. package/css/components/readmore.css +1 -1
  38. package/css/components/richtext.css +1 -1
  39. package/css/components/socialmedia.css +1 -1
  40. package/css/components/statcard.css +1 -1
  41. package/css/components/table.css +1 -1
  42. package/css/components/tableofcontents.css +1 -1
  43. package/css/components/tabs.css +1 -1
  44. package/css/components/tag.css +1 -1
  45. package/css/components/textarea.css +1 -1
  46. package/css/components/textinput.css +1 -1
  47. package/css/global.css +1 -1
  48. package/css/global.css.map +1 -1
  49. package/css/index.css +1 -1
  50. package/css/index.css.map +1 -1
  51. package/css/monorepo.css +1 -1
  52. package/css/monorepo.css.map +1 -1
  53. package/package.json +3 -3
  54. package/scss/components/_file-upload.scss +0 -1
  55. package/scss/components/_formcontrol.scss +78 -33
  56. package/scss/components/_navigation.scss +9 -2
  57. package/css/components/formgroup.css +0 -1
  58. package/scss/components/_formgroup.scss +0 -9
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@ilo-org/styles",
3
3
  "description": "Styles for products using ILO's Design System",
4
- "version": "0.9.0",
4
+ "version": "0.9.2",
5
5
  "repository": {
6
6
  "type": "git",
7
7
  "url": "https://github.com/international-labour-organization/designsystem.git",
@@ -19,8 +19,8 @@
19
19
  ],
20
20
  "dependencies": {
21
21
  "@ilo-org/fonts": "0.1.0",
22
- "@ilo-org/themes": "0.2.0",
23
- "@ilo-org/icons": "0.2.1"
22
+ "@ilo-org/icons": "0.2.1",
23
+ "@ilo-org/themes": "0.4.0"
24
24
  },
25
25
  "devDependencies": {
26
26
  "cssnano": "^5.1.13",
package/scss/components/_file-upload.scss CHANGED
@@ -78,7 +78,6 @@
78
78
 
79
79
  &--list {
80
80
  order: 4;
81
- grid-area: uploads;
82
81
  }
83
82
 
84
83
  &--list-item {
package/scss/components/_formcontrol.scss CHANGED
@@ -6,58 +6,103 @@
6
6
  .ilo--form-control {
7
7
  $c: &;
8
8
 
9
- display: inline-grid;
10
9
  grid-area: input;
10
+ display: inline-grid;
11
+ grid-template-rows: auto;
12
+ grid-template-columns: auto;
13
+ gap: px-to-rem($spacing-padding-1);
11
14
 
12
15
  &__label-placement {
13
16
  // Label is to the flex start of form element
14
17
  &__start {
15
- grid-template-rows: auto;
16
- grid-template-columns: auto;
17
- grid-template-areas:
18
- "label input"
19
- "helper ."
20
- "uploads uploads";
21
- column-gap: px-to-rem($spacing-padding-1);
18
+ // Label
19
+ :first-child {
20
+ grid-area: 1 / 1 / 2 / 2;
21
+ }
22
+
23
+ // Field
24
+ :nth-child(2) {
25
+ grid-area: 1 / 2 / 2 / 3;
26
+ }
27
+
28
+ // Helper
29
+ :nth-child(3) {
30
+ grid-area: 2 / 2 / 3 / 3;
31
+ }
22
32
 
23
- #{$c}--helper {
24
- text-align: right;
33
+ // Upload
34
+ :nth-child(4) {
35
+ grid-area: 3 / 1 / 4 / 3;
25
36
  }
26
37
  }
27
38
 
28
39
  // Label is at the end of the form element
29
40
  &__end {
30
- grid-template-rows: auto;
31
- grid-template-columns: auto;
32
- grid-template-areas:
33
- "input label"
34
- ". helper"
35
- "uploads uploads";
36
- column-gap: px-to-rem($spacing-padding-1);
41
+ // Label
42
+ :first-child {
43
+ grid-area: 1 / 2 / 2 / 3;
44
+ }
45
+
46
+ // Field
47
+ :nth-child(2) {
48
+ grid-area: 1 / 1 / 2 / 2;
49
+ }
50
+
51
+ // Helper
52
+ :nth-child(3) {
53
+ grid-area: 2 / 1 / 3 / 3;
54
+ }
55
+
56
+ // Upload
57
+ :nth-child(4) {
58
+ grid-area: 3 / 1 / 4 / 3;
59
+ }
37
60
  }
38
61
 
39
62
  // Label is above form element
40
63
  &__top {
41
- grid-template-rows: auto auto auto;
42
- grid-template-columns: auto;
43
- grid-template-areas:
44
- "label"
45
- "input"
46
- "downloads"
47
- "helper";
48
- row-gap: px-to-rem($spacing-padding-1);
64
+ // Label
65
+ :first-child {
66
+ grid-area: 1 / 1 / 2 / 2;
67
+ }
68
+
69
+ // Field
70
+ :nth-child(2) {
71
+ grid-area: 2 / 1 / 3 / 2;
72
+ }
73
+
74
+ // Helper
75
+ :nth-child(3) {
76
+ grid-area: 3 / 1 / 4 / 2;
77
+ }
78
+
79
+ // Upload
80
+ :nth-child(4) {
81
+ grid-area: 4 / 1 / 5 / 2;
82
+ }
49
83
  }
50
84
 
51
85
  // Label is below form element
52
86
  &__bottom {
53
- grid-template-rows: auto auto auto;
54
- grid-template-columns: auto;
55
- grid-template-areas:
56
- "helper"
57
- "input"
58
- "downloads"
59
- "label";
60
- row-gap: px-to-rem($spacing-padding-1);
87
+ // Label
88
+ :first-child {
89
+ grid-area: 3 / 1 / 4 / 2;
90
+ }
91
+
92
+ // Field
93
+ :nth-child(2) {
94
+ grid-area: 2 / 1 / 3 / 2;
95
+ }
96
+
97
+ // Helper
98
+ :nth-child(3) {
99
+ grid-area: 1 / 1 / 2 / 2;
100
+ }
101
+
102
+ // Upload
103
+ :nth-child(4) {
104
+ grid-area: 4 / 1 / 5 / 2;
105
+ }
61
106
  }
62
107
  }
63
108
 
package/scss/components/_navigation.scss CHANGED
@@ -583,7 +583,12 @@
583
583
  }
584
584
 
585
585
  &--search {
586
- .ilo--searchfield {
586
+ padding: px-to-rem(32px) 0 px-to-rem(24px);
587
+
588
+ .ilo--searchfield,
589
+ .ilo--form,
590
+ .ilo--fieldset,
591
+ .ilo--form-control {
587
592
  width: 100%;
588
593
  }
589
594
 
@@ -896,12 +901,14 @@
896
901
  padding: 80px 20px;
897
902
  }
898
903
 
904
+ .ilo--form,
899
905
  .ilo--searchfield {
900
906
  max-width: 618px;
901
907
  width: 100%;
902
908
  }
903
909
 
904
- .ilo--fieldset {
910
+ .ilo--fieldset,
911
+ .ilo--form-control {
905
912
  width: 100%;
906
913
  }
907
914
  }
package/css/components/formgroup.css DELETED
@@ -1 +0,0 @@
1
- .right-to-left .ilo--form{direction:rtl}
package/scss/components/_formgroup.scss DELETED
@@ -1,9 +0,0 @@
1
- @use "../tokens" as *;
2
- @use "../functions" as *;
3
- @import "../mixins";
4
-
5
- .ilo--form {
6
- .right-to-left & {
7
- direction: rtl;
8
- }
9
- }