@ilo-org/styles 0.3.2 → 0.3.3

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.3",
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,6 +214,10 @@
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;
@@ -230,11 +234,13 @@
230
234
  position: absolute;
231
235
  top: 0;
232
236
  transform: translateX(100%);
233
- transition: transform 225ms ease-out;
237
+ transition: transform 225ms ease-out, visibility 225ms 0ms;
234
238
  width: 100%;
239
+ visibility: hidden;
235
240
 
236
241
  .ilo--header.ilo--mobile--open & {
237
242
  transform: translateX(0);
243
+ visibility: visible;
238
244
  }
239
245
 
240
246
  .ilo--header--local & {
@@ -248,6 +254,7 @@
248
254
  overflow: visible;
249
255
  position: static;
250
256
  transform: none;
257
+ visibility: visible;
251
258
  }
252
259
  }
253
260
 
@@ -642,6 +649,7 @@
642
649
 
643
650
  .ilo--context-menu {
644
651
  opacity: 0;
652
+ visibility: hidden;
645
653
  position: absolute;
646
654
  right: 0;
647
655
  top: calc(100% + 12px);
@@ -652,12 +660,14 @@
652
660
  .ilo--language-switcher:focus-within &,
653
661
  &:focus-within {
654
662
  opacity: 1;
663
+ visibility: visible;
655
664
  z-index: 1;
656
665
  }
657
666
  }
658
667
 
659
668
  .ilo--language-switcher--button:focus + .ilo--context-menu {
660
669
  opacity: 1;
670
+ visibility: visible;
661
671
  z-index: 1;
662
672
  }
663
673
  }