@everymatrix/casino-hamburger-menu-nd 1.43.2 → 1.43.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,6 +1,6 @@
1
1
  {
2
2
  "name": "@everymatrix/casino-hamburger-menu-nd",
3
- "version": "1.43.2",
3
+ "version": "1.43.4",
4
4
  "main": "dist/casino-hamburger-menu-nd.js",
5
5
  "svelte": "src/index.ts",
6
6
  "scripts": {
@@ -35,5 +35,5 @@
35
35
  "publishConfig": {
36
36
  "access": "public"
37
37
  },
38
- "gitHead": "0477411e57fe6c3eda8ff28059aa540dcada8ae0"
38
+ "gitHead": "8464c47cb49b4ffa1c9debfac3a7dfc3097cf57a"
39
39
  }
@@ -284,10 +284,10 @@
284
284
  {/if}
285
285
  </ul>
286
286
  <div class="Separator"></div>
287
- <ul class="HamburgerSecondaryMenu">
287
+ <ul class="HamburgerSecondaryMenu {isOptionsListVisible ? 'Overlay' : ''}">
288
288
  {#each activeMenuItemChildren as secondaryItem}
289
289
  <!-- svelte-ignore a11y-click-events-have-key-events -->
290
- <li on:click={e => { handleClick(secondaryItem); e.preventDefault()}}>
290
+ <li on:click={e => { handleClick(secondaryItem); e.preventDefault()}}>
291
291
  <img src={secondaryItem.img} alt="menu icon" />
292
292
  <p>{secondaryItem.label}</p>
293
293
  </li>
@@ -295,43 +295,43 @@
295
295
  </ul>
296
296
  {#if (languagesArray.length > 1) }
297
297
  <!-- svelte-ignore a11y-click-events-have-key-events -->
298
- <div class="LanguageSelector {isOptionsListVisible ? 'Open' : ''}" on:click={toggleLanguageDropdown}>
299
- <span class="LanguageSelectorTitle">{$_('language')}</span>
300
- {#if countryflaghamburger !== 'true'}
301
- <select bind:value={selectedLanguage} class="Item ItemLanguage NoFlag" on:change={()=>sendLangChange()}>
302
- {#each languagesArray as lang}
303
- <option value={lang} selected>{lang.slice(-2)}</option>
304
- {/each}
305
- </select>
306
- {:else}
307
- <div class="LanguageDropdown">
308
- <div class="SelectedOption Item ItemLanguage">
309
- <span class="FlagIcon">
310
- {@html countryFlags[determineFlag(selectedLanguage)]}
311
- </span>
312
- <span class="LanguageName">{selectedLanguage.slice(-2)}</span>
313
- <span class="TriangleInactive {isOptionsListVisible ? 'TriangleActive' : ''}">
314
- <svg xmlns="http://www.w3.org/2000/svg" width="14" height="6.835" viewBox="0 0 14 6.835">
315
- <path id="arrow" d="M281.541,447.921a.488.488,0,0,0,.295-.122l6.5-5.851a.488.488,0,1,0-.65-.726l-6.176,5.556-6.176-5.556h0a.488.488,0,1,0-.65.726l6.5,5.851a.488.488,0,0,0,.355.122Z" transform="translate(-274.511 -441.088)" fill="#d1d1d1"/>
316
- </svg>
317
- </span>
318
- </div>
319
- {#if isOptionsListVisible}
320
- <div class="OptionList {languageListOpen ? 'Open' : ''}">
321
- {#each languagesArray as operatorLanguage}
322
- <!-- svelte-ignore a11y-click-events-have-key-events -->
323
- <div class="LanguageOption {languageListOpen ? 'Open' : ''}" on:click={() => selectLanguage(operatorLanguage)}>
324
- <span class="FlagIcon">
325
- {@html countryFlags[determineFlag(operatorLanguage)]}
326
- </span>
327
- <span class="LanguageName">{operatorLanguage}</span>
328
- </div>
329
- {/each}
330
- </div>
331
- {/if}
332
- </div>
333
- {/if}
334
- </div>
298
+ <div class="LanguageSelector {isOptionsListVisible ? 'Open' : ''}" on:click={toggleLanguageDropdown}>
299
+ <span class="LanguageSelectorTitle">{$_('language')}</span>
300
+ {#if countryflaghamburger !== 'true'}
301
+ <select bind:value={selectedLanguage} class="Item ItemLanguage NoFlag" on:change={()=>sendLangChange()}>
302
+ {#each languagesArray as lang}
303
+ <option value={lang} selected>{lang.slice(-2)}</option>
304
+ {/each}
305
+ </select>
306
+ {:else}
307
+ <div class="LanguageDropdown">
308
+ <div class="SelectedOption Item ItemLanguage">
309
+ <span class="FlagIcon">
310
+ {@html countryFlags[determineFlag(selectedLanguage)]}
311
+ </span>
312
+ <span class="LanguageName">{selectedLanguage.slice(-2)}</span>
313
+ <span class="TriangleInactive {isOptionsListVisible ? 'TriangleActive' : ''}">
314
+ <svg xmlns="http://www.w3.org/2000/svg" width="14" height="6.835" viewBox="0 0 14 6.835">
315
+ <path id="arrow" d="M281.541,447.921a.488.488,0,0,0,.295-.122l6.5-5.851a.488.488,0,1,0-.65-.726l-6.176,5.556-6.176-5.556h0a.488.488,0,1,0-.65.726l6.5,5.851a.488.488,0,0,0,.355.122Z" transform="translate(-274.511 -441.088)" fill="#d1d1d1"/>
316
+ </svg>
317
+ </span>
318
+ </div>
319
+ {#if isOptionsListVisible}
320
+ <div class="OptionList {languageListOpen ? 'Open' : ''}">
321
+ {#each languagesArray as operatorLanguage}
322
+ <!-- svelte-ignore a11y-click-events-have-key-events -->
323
+ <div class="LanguageOption {languageListOpen ? 'Open' : ''}" on:click={() => selectLanguage(operatorLanguage)}>
324
+ <span class="FlagIcon">
325
+ {@html countryFlags[determineFlag(operatorLanguage)]}
326
+ </span>
327
+ <span class="LanguageName">{operatorLanguage}</span>
328
+ </div>
329
+ {/each}
330
+ </div>
331
+ {/if}
332
+ </div>
333
+ {/if}
334
+ </div>
335
335
  {/if}
336
336
  </div>
337
337
  <!-- svelte-ignore a11y-interactive-supports-focus -->
@@ -616,7 +616,9 @@
616
616
 
617
617
  &.Open {
618
618
  transition: all .2s linear;
619
- height: 170px;
619
+ height: auto;
620
+ background-color: var(--emw-color-background-secondary, #000000);
621
+ overflow: auto;
620
622
  }
621
623
 
622
624
  .LanguageOption {
@@ -664,8 +666,7 @@
664
666
  position: fixed;
665
667
  width: 100%;
666
668
  height: 100%;
667
- z-index: 100;
668
- z-index: 999999;
669
+ z-index: 150;
669
670
  top: 0;
670
671
  left: 0;
671
672
  background-color: rgba(0, 0, 0, .7);
@@ -770,9 +771,15 @@
770
771
  margin-top: 10px;
771
772
  list-style: none;
772
773
  height: 85%;
774
+ overflow: auto;
773
775
  width: 90vw;
774
776
  display: flex;
775
777
  flex-direction: column;
778
+
779
+ &.Overlay {
780
+ opacity: 0.5;
781
+ transition: opacity 0.3s ease-in-out;
782
+ }
776
783
  li {
777
784
  padding: 15px;
778
785
  display: flex;