@ilo-org/styles 0.3.2 → 0.3.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.
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.3.2",
4
+ "version": "0.3.4",
5
5
  "repository": {
6
6
  "type": "git",
7
7
  "url": "https://github.com/international-labour-organization/designsystem.git",
@@ -186,7 +186,7 @@
186
186
  );
187
187
  background: map-get($color, "hero", "card", "light", "background");
188
188
  color: map-get($color, "hero", "card", "light", "color");
189
- max-width: 998px;
189
+ max-width: 920px;
190
190
  position: relative;
191
191
  padding: 16px 16px 40px 16px;
192
192
 
@@ -224,10 +224,10 @@
224
224
  64px,
225
225
  116px
226
226
  );
227
- padding: 0 70px 70px 56px;
227
+ padding: 0 70px 70px 70px;
228
228
 
229
229
  &.ilo--hero-card--graphic {
230
- padding: 0 70px 44px 56px;
230
+ padding: 0 70px 44px 70px;
231
231
  }
232
232
  }
233
233
 
@@ -214,10 +214,18 @@
214
214
  direction: rtl;
215
215
  }
216
216
 
217
+ .ilo--subnav--open & {
218
+ visibility: hidden;
219
+ }
220
+
217
221
  @include breakpoint("large") {
218
222
  display: flex;
219
223
  justify-content: space-between;
220
224
  padding: 0 20px;
225
+
226
+ .ilo--subnav--open & {
227
+ visibility: visible;
228
+ }
221
229
  }
222
230
  }
223
231
 
@@ -230,11 +238,13 @@
230
238
  position: absolute;
231
239
  top: 0;
232
240
  transform: translateX(100%);
233
- transition: transform 225ms ease-out;
241
+ transition: transform 225ms ease-out, visibility 225ms 0ms;
234
242
  width: 100%;
243
+ visibility: hidden;
235
244
 
236
245
  .ilo--header.ilo--mobile--open & {
237
246
  transform: translateX(0);
247
+ visibility: visible;
238
248
  }
239
249
 
240
250
  .ilo--header--local & {
@@ -248,6 +258,7 @@
248
258
  overflow: visible;
249
259
  position: static;
250
260
  transform: none;
261
+ visibility: visible;
251
262
  }
252
263
  }
253
264
 
@@ -642,6 +653,7 @@
642
653
 
643
654
  .ilo--context-menu {
644
655
  opacity: 0;
656
+ visibility: hidden;
645
657
  position: absolute;
646
658
  right: 0;
647
659
  top: calc(100% + 12px);
@@ -652,12 +664,14 @@
652
664
  .ilo--language-switcher:focus-within &,
653
665
  &:focus-within {
654
666
  opacity: 1;
667
+ visibility: visible;
655
668
  z-index: 1;
656
669
  }
657
670
  }
658
671
 
659
672
  .ilo--language-switcher--button:focus + .ilo--context-menu {
660
673
  opacity: 1;
674
+ visibility: visible;
661
675
  z-index: 1;
662
676
  }
663
677
  }