@ilo-org/styles 1.3.0 → 1.3.1

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 (8) hide show
  1. package/css/components/pagination.css +1 -1
  2. package/css/global.css.map +1 -1
  3. package/css/index.css +1 -1
  4. package/css/index.css.map +1 -1
  5. package/css/monorepo.css +1 -1
  6. package/css/monorepo.css.map +1 -1
  7. package/package.json +1 -1
  8. package/scss/components/_pagination.scss +26 -55
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.3.0",
4
+ "version": "1.3.1",
5
5
  "repository": {
6
6
  "type": "git",
7
7
  "url": "https://github.com/international-labour-organization/designsystem.git",
package/scss/components/_pagination.scss CHANGED
@@ -10,10 +10,10 @@
10
10
  $self: &;
11
11
 
12
12
  &--link {
13
- background: map-get($color, "ux", "pagination", "default", "background");
13
+ background: var(--ilo-color-gray-light);
14
14
  border: none;
15
15
  border-radius: 2px;
16
- color: map-get($color, "ux", "pagination", "default", "icon");
16
+ color: var(--ilo-color-blue-dark);
17
17
  display: inline-block;
18
18
  font-family: var(--ilo-fonts-display);
19
19
  height: px-to-rem(40px);
@@ -28,31 +28,26 @@
28
28
  content: "";
29
29
  display: inline-block;
30
30
  left: 50%;
31
- height: px-to-rem(16px);
31
+ height: px-to-rem(20px);
32
32
  position: absolute;
33
33
  top: 50%;
34
34
  transform: translate(-50%, -50%);
35
35
  transform-origin: center center;
36
- width: px-to-rem(16px);
36
+ width: px-to-rem(20px);
37
37
  }
38
38
 
39
39
  &:hover {
40
- background: map-get($color, "ux", "pagination", "hover", "background");
41
- color: map-get($color, "ux", "pagination", "hover", "icon");
40
+ background: var(--ilo-color-blue-lighter);
41
+ color: var(--ilo-color-blue);
42
42
  }
43
43
 
44
44
  &.ilo--pagination--disable {
45
45
  opacity: 0.45;
46
46
  cursor: unset;
47
+ pointer-events: none;
47
48
 
48
49
  &:hover {
49
- background: map-get(
50
- $color,
51
- "ux",
52
- "pagination",
53
- "default",
54
- "background"
55
- );
50
+ background: var(--ilo-color-gray-light);
56
51
  }
57
52
  }
58
53
  }
@@ -63,7 +58,7 @@
63
58
  transform: translate(-50%, -50%) rotate(180deg);
64
59
 
65
60
  @include dataurlicon(
66
- "arrowgotoright",
61
+ "double_chevron_right",
67
62
  map-get($color, "ux", "pagination", "default", "icon")
68
63
  );
69
64
  }
@@ -71,7 +66,7 @@
71
66
  &:hover {
72
67
  &::before {
73
68
  @include dataurlicon(
74
- "arrowgotoright",
69
+ "double_chevron_right",
75
70
  map-get($color, "ux", "pagination", "hover", "icon")
76
71
  );
77
72
  }
@@ -81,17 +76,11 @@
81
76
  opacity: 0.45;
82
77
 
83
78
  &:hover {
84
- background: map-get(
85
- $color,
86
- "ux",
87
- "pagination",
88
- "default",
89
- "background"
90
- );
79
+ background: var(--ilo-color-gray-light);
91
80
 
92
81
  &::before {
93
82
  @include dataurlicon(
94
- "arrowgotoright",
83
+ "double_chevron_right",
95
84
  map-get($color, "ux", "pagination", "default", "icon")
96
85
  );
97
86
  }
@@ -102,10 +91,10 @@
102
91
  &--prev-page {
103
92
  &::before {
104
93
  transform: translate(-50%, -50%) rotate(180deg);
105
- width: px-to-rem(10px);
94
+ width: px-to-rem(20px);
106
95
 
107
96
  @include dataurlicon(
108
- "caret_right",
97
+ "chevron_right",
109
98
  map-get($color, "ux", "pagination", "default", "icon")
110
99
  );
111
100
  }
@@ -113,7 +102,7 @@
113
102
  &:hover {
114
103
  &::before {
115
104
  @include dataurlicon(
116
- "caret_right",
105
+ "chevron_right",
117
106
  map-get($color, "ux", "pagination", "hover", "icon")
118
107
  );
119
108
  }
@@ -123,17 +112,11 @@
123
112
  opacity: 0.45;
124
113
 
125
114
  &:hover {
126
- background: map-get(
127
- $color,
128
- "ux",
129
- "pagination",
130
- "default",
131
- "background"
132
- );
115
+ background: var(--ilo-color-gray-light);
133
116
 
134
117
  &::before {
135
118
  @include dataurlicon(
136
- "caret_right",
119
+ "chevron_right",
137
120
  map-get($color, "ux", "pagination", "default", "icon")
138
121
  );
139
122
  }
@@ -144,10 +127,10 @@
144
127
  &--next-page {
145
128
  &::before {
146
129
  transform: translate(-50%, -50%) rotate(0);
147
- width: px-to-rem(10px);
130
+ width: px-to-rem(20px);
148
131
 
149
132
  @include dataurlicon(
150
- "caret_right",
133
+ "chevron_right",
151
134
  map-get($color, "ux", "pagination", "default", "icon")
152
135
  );
153
136
  }
@@ -155,7 +138,7 @@
155
138
  &:hover {
156
139
  &::before {
157
140
  @include dataurlicon(
158
- "caret_right",
141
+ "chevron_right",
159
142
  map-get($color, "ux", "pagination", "hover", "icon")
160
143
  );
161
144
  }
@@ -165,17 +148,11 @@
165
148
  opacity: 0.45;
166
149
 
167
150
  &:hover {
168
- background: map-get(
169
- $color,
170
- "ux",
171
- "pagination",
172
- "default",
173
- "background"
174
- );
151
+ background: var(--ilo-color-gray-light);
175
152
 
176
153
  &::before {
177
154
  @include dataurlicon(
178
- "caret_right",
155
+ "chevron_right",
179
156
  map-get($color, "ux", "pagination", "default", "icon")
180
157
  );
181
158
  }
@@ -186,7 +163,7 @@
186
163
  &--last-page {
187
164
  &::before {
188
165
  @include dataurlicon(
189
- "arrowgotoright",
166
+ "double_chevron_right",
190
167
  map-get($color, "ux", "pagination", "default", "icon")
191
168
  );
192
169
  }
@@ -194,7 +171,7 @@
194
171
  &:hover {
195
172
  &::before {
196
173
  @include dataurlicon(
197
- "arrowgotoright",
174
+ "double_chevron_right",
198
175
  map-get($color, "ux", "pagination", "hover", "icon")
199
176
  );
200
177
  }
@@ -204,17 +181,11 @@
204
181
  opacity: 0.45;
205
182
 
206
183
  &:hover {
207
- background: map-get(
208
- $color,
209
- "ux",
210
- "pagination",
211
- "default",
212
- "background"
213
- );
184
+ background: var(--ilo-color-gray-light);
214
185
 
215
186
  &::before {
216
187
  @include dataurlicon(
217
- "caret_right",
188
+ "chevron_right",
218
189
  map-get($color, "ux", "pagination", "default", "icon")
219
190
  );
220
191
  }