@ilo-org/styles 1.8.2 → 1.8.4

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 (14) hide show
  1. package/css/components/credit.css +1 -1
  2. package/css/components/loading.css +1 -1
  3. package/css/components/navigation.css +1 -1
  4. package/css/components/scorecard.css +1 -1
  5. package/css/global.css.map +1 -1
  6. package/css/index.css +2 -2
  7. package/css/index.css.map +1 -1
  8. package/css/monorepo.css +2 -2
  9. package/css/monorepo.css.map +1 -1
  10. package/package.json +1 -1
  11. package/scss/components/_credit.scss +0 -4
  12. package/scss/components/_loading.scss +26 -80
  13. package/scss/components/_navigation.scss +2 -2
  14. package/scss/components/_scorecard.scss +5 -0
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": "1.8.2",
4
+ "version": "1.8.4",
5
5
  "repository": {
6
6
  "type": "git",
7
7
  "url": "https://github.com/international-labour-organization/designsystem.git",
package/scss/components/_credit.scss CHANGED
@@ -20,7 +20,6 @@
20
20
  background-position: top right;
21
21
  background-repeat: no-repeat;
22
22
  background-size: contain;
23
- @include dataurlicon("halfsquaretriangle", $color-ux-credit-background);
24
23
  content: "";
25
24
  height: px-to-rem($spacing-ux-credit-height);
26
25
  position: absolute;
@@ -43,7 +42,6 @@
43
42
  background-position: top left;
44
43
  background-repeat: no-repeat;
45
44
  background-size: contain;
46
- @include dataurlicon("caretdown", $color-base-neutrals-dark);
47
45
  content: "";
48
46
  height: px-to-rem(map-get($spacing, "padding-1-5"));
49
47
  position: absolute;
@@ -59,7 +57,6 @@
59
57
  background-repeat: no-repeat;
60
58
  background-size: px-to-rem(map-get($spacing, "padding-1-5"))
61
59
  px-to-rem(map-get($spacing, "padding-1-5"));
62
- @include dataurlicon("info", $color-base-neutrals-white);
63
60
  content: "";
64
61
  height: px-to-rem(map-get($spacing, "padding-3"));
65
62
  position: absolute;
@@ -95,7 +92,6 @@
95
92
 
96
93
  &:after {
97
94
  background-position: top right;
98
- @include dataurlicon("caretdown", $color-base-neutrals-dark);
99
95
  left: auto;
100
96
  right: calc(#{px-to-rem(map-get($spacing, "padding-1-5"))} / 2);
101
97
  }
package/scss/components/_loading.scss CHANGED
@@ -4,90 +4,36 @@
4
4
  @import "../animations";
5
5
 
6
6
  .ilo--loading {
7
- align-items: center;
8
- display: flex;
9
- justify-content: center;
10
- position: relative;
11
-
12
- &--large {
13
- .ilo--loading--copy {
14
- @include isVisuallyHidden();
15
- }
16
-
17
- &.ilo--loading--loading {
18
- &:before {
19
- animation: spin 1.5s linear infinite;
20
- background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' viewBox='0 0 107.7 107.7'%3E%3Ccircle cx='53.8' cy='53.7' r='53.9' fill='%23fff'/%3E%3Cpath fill='%23b8c4cc' d='M101.8 53.7c0-10.8-3.6-21.2-10.3-29.7-6.7-8.5-16-14.4-26.5-17s-21.5-1.4-31.3 3.1C23.9 14.7 16 22.4 11.1 32c-4.9 9.6-6.4 20.6-4.3 31.2 2.1 10.6 7.7 20.1 15.9 27.1s18.5 11 29.3 11.5c10.8.4 21.4-2.8 30.1-9.1l-4.7-6.4c-7.3 5.3-16.1 8-25.1 7.6-9-.4-17.6-3.7-24.5-9.6-6.8-5.9-11.5-13.9-13.3-22.7-1.8-8.8-.5-18 3.6-26S28.9 21.2 37 17.4c8.2-3.8 17.4-4.7 26.1-2.6 8.8 2.1 16.5 7.1 22.1 14.2s8.6 15.8 8.6 24.8h8z'/%3E%3Cpath fill='%231e2dbe' d='m97.8 74.9 9.5-17.2h-19l9.5 17.2z'/%3E%3C/svg%3E");
21
- background-position: center;
22
- background-repeat: no-repeat;
23
- background-size: contain;
24
- content: "";
25
- display: block;
26
- height: px-to-rem(107.5px);
27
- width: px-to-rem(107.5px);
28
- }
29
- }
30
-
31
- &.ilo--loading--loaded {
32
- &:before {
33
- background-image: url("data:image/svg+xml,%3Csvg width='97' height='96' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M.237 48c0-26.51 21.49-48 48-48s48 21.49 48 48-21.49 48-48 48-48-21.49-48-48Z' fill='%23EDF0F2'/%3E%3Cpath d='M20.237 48c0-15.464 12.536-28 28-28 15.463 0 28 12.536 28 28s-12.536 28-28 28-28-12.536-28-28Z' fill='%231E2DBE'/%3E%3Cpath d='m44.037 50.8-5.6-5.6-4.2 4.2 9.8 9.8 18.2-18.2-4.2-4.2-14 14Z' fill='%23fff'/%3E%3C/svg%3E");
34
- background-position: center;
35
- background-repeat: no-repeat;
36
- background-size: contain;
37
- content: "";
38
- display: block;
39
- height: px-to-rem(96px);
40
- width: px-to-rem(96px);
41
- }
42
- }
7
+ --ilo-loading-size: #{px-to-rem(60px)};
8
+ --ilo-loading-loading-circle: var(--ilo-color-gray-light);
9
+ --ilo-loading-loading-line: var(--ilo-color-gray-base);
10
+ --ilo-loading-loading-pointer: var(--ilo-color-blue);
11
+ --ilo-loading-loaded-circle: var(--ilo-color-gray-light);
12
+ --ilo-loading-loaded-cirlce-inner: var(--ilo-color-blue);
13
+ --ilo-loading-loaded-check: var(--ilo-color-white);
14
+
15
+ width: var(--ilo-loading-size);
16
+ height: var(--ilo-loading-size);
17
+
18
+ &__theme__dark {
19
+ --ilo-loading-loading-circle: var(--ilo-color-blue-dark);
20
+ --ilo-loading-loading-line: var(--ilo-color-yellow);
21
+ --ilo-loading-loading-pointer: var(--ilo-color-yellow);
22
+
23
+ --ilo-loading-loaded-circle: var(--ilo-color-blue-dark);
24
+ --ilo-loading-loaded-cirlce-inner: var(--ilo-color-yellow);
25
+ --ilo-loading-loaded-check: var(--ilo-color-blue-dark);
43
26
  }
44
27
 
45
- &--small {
46
- .ilo--loading--copy {
47
- color: $color-ux-labels-default;
48
- font-family: var(--ilo-fonts-copy);
49
- font-weight: 400;
50
- @include font-styles("label-small");
51
- }
52
-
53
- &.ilo--loading--idle {
54
- .ilo--loading--copy {
55
- @include isVisuallyHidden();
56
- }
57
- }
58
-
59
- &.ilo--loading--loading {
60
- &:before {
61
- animation: spin 1.5s linear infinite;
62
- background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' viewBox='0 0 27.3 27.3'%3E%3Ccircle cx='13.7' cy='13.7' r='13.7' fill='%23fff'/%3E%3Cpath fill='%23b8c4cc' d='M25.7 13.7c0-2.7-.9-5.3-2.6-7.4-1.7-2.1-4-3.6-6.6-4.2-2.6-.6-5.4-.4-7.8.8-2.5 1-4.5 2.9-5.7 5.3-1.2 2.4-1.6 5.1-1.1 7.8.5 2.6 1.9 5 4 6.8 2 1.8 4.6 2.8 7.3 2.9 2.7.1 5.3-.7 7.5-2.3L18.9 21c-1.6 1.2-3.6 1.8-5.6 1.7-2-.1-4-.8-5.5-2.1s-2.6-3.1-3-5.1-.1-4 .8-5.8C6.5 7.8 8 6.3 9.9 5.5c1.8-.8 3.9-1 5.9-.6 2 .5 3.7 1.6 5 3.2 1.3 1.6 1.9 3.6 1.9 5.6h3z'/%3E%3Cpath fill='%231e2dbe' d='m24.2 20.6 3-5.4h-6l3 5.4z'/%3E%3C/svg%3E");
63
- background-position: center;
64
- background-repeat: no-repeat;
65
- background-size: contain;
66
- content: "";
67
- display: block;
68
- height: px-to-rem(24px);
69
- margin-right: spacing(3);
70
- width: px-to-rem(24px);
71
- }
72
- }
28
+ &__size__small {
29
+ --ilo-loading-size: #{px-to-rem(36px)};
30
+ }
73
31
 
74
- &.ilo--loading--loaded {
75
- &:before {
76
- background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 12C0 5.373 5.373 0 12 0s12 5.373 12 12-5.373 12-12 12S0 18.627 0 12Z' fill='%231E2DBE'/%3E%3Cpath d='m10.2 13.2-2.4-2.4L6 12.6l4.2 4.2L18 9l-1.8-1.8-6 6Z' fill='%23fff'/%3E%3C/svg%3E");
77
- background-position: center;
78
- background-repeat: no-repeat;
79
- background-size: contain;
80
- content: "";
81
- display: block;
82
- height: px-to-rem(24px);
83
- margin-right: spacing(3);
84
- width: px-to-rem(24px);
85
- }
86
- }
32
+ &__loading {
33
+ animation: spin 1.5s linear infinite;
87
34
  }
88
35
 
89
- &.storybook {
90
- height: 400px;
91
- width: 100%;
36
+ &__loaded {
37
+ animation: none;
92
38
  }
93
39
  }
package/scss/components/_navigation.scss CHANGED
@@ -784,7 +784,7 @@
784
784
  transition: all 150ms ease-out;
785
785
 
786
786
  &::before {
787
- @include dataurlicon("arrowleft", $brand-ilo-dark-blue);
787
+ @include dataurlicon("chevron_left", $brand-ilo-dark-blue);
788
788
  background-position: 10% center;
789
789
  background-repeat: no-repeat;
790
790
  background-size: 24px;
@@ -817,7 +817,7 @@
817
817
  color: $brand-ilo-blue;
818
818
 
819
819
  &::before {
820
- @include dataurlicon("arrowleft", $brand-ilo-blue);
820
+ @include dataurlicon("chevron_left", $brand-ilo-blue);
821
821
  background-position: 10% center;
822
822
  background-repeat: no-repeat;
823
823
  background-size: 24px;
package/scss/components/_scorecard.scss CHANGED
@@ -159,16 +159,21 @@
159
159
 
160
160
  .ilo--status {
161
161
  grid-area: status;
162
+ margin-bottom: 0;
162
163
  }
163
164
 
164
165
  #{$self}--title {
165
166
  grid-area: title;
166
167
  @include typography("heading-4");
168
+ margin-bottom: 0;
169
+ align-self: center;
167
170
  }
168
171
 
169
172
  #{$self}--area--content {
170
173
  grid-area: content;
171
174
  flex-flow: row wrap;
175
+ margin-bottom: 0;
176
+ align-items: center;
172
177
  }
173
178
 
174
179
  #{$self}--area--cta {