hr-design-system-handlebars 0.117.13 → 0.117.14

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 (21) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/dist/assets/index.css +225 -197
  3. package/dist/assets/vendor/js/header.alpine.js +0 -257
  4. package/dist/views/components/content_nav/content_nav.hbs +5 -6
  5. package/dist/views/components/content_nav/content_nav_container.hbs +1 -3
  6. package/dist/views/components/content_nav/content_nav_dropdown.hbs +20 -18
  7. package/dist/views/components/content_nav/content_nav_item.hbs +9 -5
  8. package/dist/views/components/content_nav/content_nav_list.hbs +1 -2
  9. package/dist/views/components/teaser/content_nav/teaser_content_nav.hbs +2 -5
  10. package/package.json +1 -1
  11. package/src/assets/css/custom-components.css +119 -1
  12. package/src/assets/vendor/js/header.alpine.js +0 -257
  13. package/src/stories/views/components/content_nav/content_nav.hbs +5 -6
  14. package/src/stories/views/components/content_nav/content_nav_container.hbs +1 -3
  15. package/src/stories/views/components/content_nav/content_nav_dropdown.hbs +20 -18
  16. package/src/stories/views/components/content_nav/content_nav_item.hbs +9 -5
  17. package/src/stories/views/components/content_nav/content_nav_list.hbs +1 -2
  18. package/src/stories/views/components/teaser/content_nav/teaser_content_nav.hbs +2 -5
  19. package/src/stories/views/components/teaser/content_nav/teaser_content_nav.stories.mdx +8 -1
  20. package/dist/assets/vendor/js/content_nav.alpine.js +0 -261
  21. package/src/assets/vendor/js/content_nav.alpine.js +0 -261
package/dist/assets/vendor/js/header.alpine.js CHANGED
@@ -395,261 +395,4 @@ document.addEventListener('alpine:init', () => {
395
395
  }
396
396
  },
397
397
  }))
398
-
399
- Alpine.data('contentNavigationHandler', () => ({
400
- open: false,
401
-
402
- shouldDropdownBeShown(teasersize, isDropdown, isMixed) {
403
- if (isDropdown) {
404
- return true
405
- }
406
-
407
- if (isMixed) {
408
- if (teasersize === 100 || teasersize === 66 || teasersize === 50) {
409
- if (this.$screen('lg')) return false
410
- if (this.$screen('md')) return false
411
- if (this.$screen('xs')) return true
412
- } else if (teasersize === 33 || teasersize === 25) {
413
- return true
414
- }
415
- }
416
- },
417
-
418
- shouldContentBeShown(teasersize, isDropdown, isMixed) {
419
- if (isDropdown) {
420
- return this.$store.contentNavDropdownIsOpen
421
- }
422
- if (isMixed) {
423
- if (teasersize === 100 || teasersize === 66 || teasersize === 50) {
424
- if (this.$screen('lg')) return true
425
- if (this.$screen('md')) return true
426
- if (this.$screen('xs')) return this.$store.contentNavDropdownIsOpen
427
- } else if (teasersize === 33 || teasersize === 25) {
428
- return this.$store.contentNavDropdownIsOpen
429
- }
430
- }
431
-
432
- return false
433
- },
434
- chooseListItemStyles(teasersize, isList, isMixed, isDropdown, isFlow) {
435
- let classes = []
436
-
437
- switch (teasersize) {
438
- case 100:
439
- classes.push('w-full', 'md:w-fit')
440
- isList
441
- ? classes.push('border', 'mb-2', 'md:!mr-2', 'hover:no-underline')
442
- : isMixed
443
- ? classes.push(
444
- '!w-full',
445
- 'md:!w-fit',
446
- '!mb-0',
447
- 'md:!mb-2',
448
- 'md:mr-2',
449
- 'border-l-0',
450
- 'border-r-0',
451
- 'border-t-0',
452
- 'border-b',
453
- 'last:border-b-0',
454
- 'md:!border',
455
- 'md:border-blue-congress',
456
- 'border-gray-400',
457
- 'hover:underline',
458
- 'hover:text-blue-congress',
459
- 'hover:!bg-white',
460
- 'hover:!fill-blue-congress',
461
- 'md:hover:no-underline',
462
- 'md:hover:text-white',
463
- 'md:hover:!bg-blue-congress',
464
- 'md:hover:!fill-white'
465
- )
466
- : isDropdown
467
- ? classes.push(
468
- '!w-full',
469
- 'ml-0',
470
- 'md:!w-full',
471
- 'md:mb-0',
472
- 'md:!mr-0',
473
- 'border-gray-400',
474
- 'border-l-0',
475
- 'border-r-0',
476
- 'border-t-0',
477
- 'border-b',
478
- 'last:border-b-0',
479
- 'hover:underline',
480
- 'hover:text-blue-congress',
481
- 'hover:!bg-white',
482
- 'hover:!fill-blue-congress'
483
- )
484
- : isFlow
485
- ? classes.push('!w-fit', '!mr-2', 'border', 'mb-2', 'hover:no-underline')
486
- : ''
487
- break
488
- case 66:
489
- classes.push('w-fit')
490
- isList == true
491
- ? classes.push('border', 'mb-2', 'mr-2', 'md:!mr-2', 'hover:no-underline')
492
- : isMixed
493
- ? classes.push(
494
- '!w-full',
495
- 'md:!w-fit',
496
- '!mb-0',
497
- 'md:!mb-2',
498
- 'md:mr-2',
499
- 'border-l-0',
500
- 'border-r-0',
501
- 'border-t-0',
502
- 'border-b',
503
- 'last:border-b-0',
504
- 'md:!border',
505
- 'hover:text-blue-congress',
506
- 'hover:!fill-blue-congress',
507
- 'hover:!bg-white',
508
- 'md:hover:!bg-blue-congress',
509
- 'md:hover:!text-white',
510
- 'md:hover:no-underline',
511
- 'md:hover:!fill-white'
512
- )
513
- : isDropdown
514
- ? classes.push(
515
- '!w-full',
516
- 'md:!w-full',
517
- 'md:mb-0',
518
- 'md:!mr-0',
519
- 'border-l-0',
520
- 'border-r-0',
521
- 'border-t-0',
522
- 'border-b',
523
- 'last:border-b-0',
524
- 'hover:underline',
525
- 'hover:text-blue-congress',
526
- 'hover:!bg-white',
527
- 'hover:!fill-blue-congress'
528
- )
529
- : isFlow
530
- ? classes.push('!w-fit', '!mr-2', 'border', 'mb-2', 'hover:no-underline')
531
- : ''
532
- break
533
- case 50:
534
- classes.push('w-full')
535
- isList
536
- ? classes.push('border', 'mb-2', 'hover:no-underline')
537
- : isMixed
538
- ? classes.push(
539
- '!w-full',
540
- 'border',
541
- 'md:mb-2',
542
- 'last:mb-0',
543
- 'border-gray-400',
544
- 'border-l-0',
545
- 'border-r-0',
546
- 'border-t-0',
547
- 'md:border',
548
- 'md:border-blue-congress',
549
- 'hover:underline',
550
- 'hover:!bg-white',
551
- 'hover:text-blue-congress',
552
- 'hover:fill-blue-congress',
553
- 'md:hover:!bg-blue-congress',
554
- 'md:hover:!text-white',
555
- 'md:hover:fill-white',
556
- 'md:hover:no-underline'
557
- )
558
- : isDropdown
559
- ? classes.push(
560
- '!w-full',
561
- 'md:!w-full',
562
- 'md:mb-0',
563
- 'md:!mr-0',
564
- 'border-l-0',
565
- 'border-r-0',
566
- 'border-t-0',
567
- 'border-b',
568
- 'last:border-b-0',
569
- 'border-gray-400',
570
- 'hover:underline',
571
- 'hover:!text-blue-congress',
572
- 'hover:!bg-white',
573
- 'hover:!fill-blue-congress'
574
- )
575
- : isFlow
576
- ? classes.push('!w-fit', '!mr-2', 'border', 'mb-2', 'hover:no-underline')
577
- : ''
578
- break
579
- case 33:
580
- classes.push('w-full')
581
- isList
582
- ? classes.push('border', 'mb-2', 'hover:no-underline')
583
- : isMixed
584
- ? classes.push(
585
- '!w-full',
586
- '!mb-0',
587
- 'border-b',
588
- 'last:border-b-0',
589
- 'hover:!bg-white',
590
- 'hover:underline',
591
- 'hover:text-blue-congress',
592
- 'hover:!fill-blue-congress'
593
- )
594
- : isDropdown
595
- ? classes.push(
596
- '!w-full',
597
- 'md:!w-full',
598
- 'md:mb-0',
599
- 'md:!mr-0',
600
- 'border-l-0',
601
- 'border-r-0',
602
- 'border-t-0',
603
- 'border-b',
604
- 'last:border-b-0',
605
- 'hover:underline',
606
- 'hover:!text-blue-congress',
607
- 'hover:!bg-white',
608
- 'hover:!fill-blue-congress'
609
- )
610
- : isFlow
611
- ? classes.push('!w-fit', '!mr-2', 'border', 'mb-2', 'hover:no-underline')
612
- : ''
613
- break
614
- case 25:
615
- classes.push('w-full')
616
- isList
617
- ? classes.push('border', 'mb-2', 'hover:no-underline')
618
- : isMixed
619
- ? classes.push(
620
- '!w-full',
621
- '!mb-0',
622
- 'border-b',
623
- 'last:border-b-0',
624
- 'hover:!bg-white',
625
- 'hover:underline',
626
- 'hover:!text-blue-congress',
627
- 'hover:!fill-blue-congress'
628
- )
629
- : isDropdown
630
- ? classes.push(
631
- '!w-full',
632
- 'md:!w-full',
633
- 'md:mb-0',
634
- 'md:!mr-0',
635
- 'border-l-0',
636
- 'border-r-0',
637
- 'border-t-0',
638
- 'border-b',
639
- 'last:border-b-0',
640
- 'hover:underline',
641
- 'hover:text-blue-congress',
642
- 'hover:!bg-white',
643
- 'hover:!fill-blue-congress'
644
- )
645
- : isFlow
646
- ? classes.push('!w-fit', '!mr-2', 'border', 'mb-2', 'hover:no-underline')
647
- : ''
648
- break
649
- }
650
- for (let i = 0; i < classes.length; i++) {
651
- this.$el.classList.add(classes[i])
652
- }
653
- },
654
- }))
655
398
  })
package/dist/views/components/content_nav/content_nav.hbs CHANGED
@@ -1,6 +1,6 @@
1
1
  {{#with this.contentNav}}
2
2
  {{#if this.isListOrFlow}}
3
- <nav class="w-full px-2 md:px-0 c-content-nav">
3
+ <nav class="w-full px-2 md:px-0 c-content-nav {{inline-switch ../_teaserSize '["100","66","50","33","25"]' '[" teaser-size-100"," teaser-size-66"," teaser-size-50"," teaser-size-33"," teaser-size-25", ""]'}}">
4
4
  {{> components/content_nav/content_nav_container
5
5
  _teaserSize=../_teaserSize
6
6
  _maindivclass="flex relative flex-wrap mt-2 mx-2 md:mx-0 md:mt-0 "
@@ -8,7 +8,6 @@
8
8
  </nav>
9
9
  {{else}}
10
10
  {{#decorator 'components/content_nav/content_nav_dropdown'
11
- _componentClass="c-content-nav h-10 md:h-auto w-full"
12
11
  _teaserSize=../_teaserSize
13
12
  _iconOpen="arrow-down"
14
13
  _iconClose="arrow-up"
@@ -16,10 +15,10 @@
16
15
  _hiddenNavigationLabel="Unternavigation"
17
16
  }}
18
17
 
19
- {{> components/content_nav/content_nav_container
20
- _teaserSize=_teaserSize
21
- _maindivclass="flex flex-col w-full mt-0"
22
- }}
18
+ {{> components/content_nav/content_nav_container
19
+ _teaserSize=_teaserSize
20
+ _maindivclass="flex flex-col w-full mt-0"
21
+ }}
23
22
 
24
23
  {{/decorator}}
25
24
  {{/if}}
package/dist/views/components/content_nav/content_nav_container.hbs CHANGED
@@ -1,6 +1,4 @@
1
- <div class="{{_maindivclass}} {{#if this.isAutosuggest}} autoSuggest js-load{{/if}} {{#if this.isMixed}}relative {{else}}absolute{{/if}}"
2
- @click.outside ="contentNavDropdownIsOpen = false; $dispatch('hr:global:resetinputAutoSuggest');"
3
-
1
+ <div class="{{_maindivclass}} {{#if this.isAutosuggest}} autoSuggest js-load{{/if}} relative"
4
2
  {{#if this.isAutosuggest}}
5
3
  data-hr-auto-suggest='{"filterGroupsSelector":".c-content-nav__group", "filterElementSelector":".c-content-nav__item", "filterTextSelector":".js-title", "inputElementSelector":".js-autosuggest-input", "matchedClass":"block", "unmatchedClass":"hidden"}'
6
4
  {{/if}}
package/dist/views/components/content_nav/content_nav_dropdown.hbs CHANGED
@@ -1,36 +1,38 @@
1
- <nav
2
- class="w-full {{#if this.isMixed}} px-2 md:px-0 {{else}} px-0 {{/if}} {{_componentClass}} "
1
+ <nav class="w-full px-2 md:px-0 {{inline-switch _teaserSize '["100","66","50","33","25"]' '[" teaser-size-100"," teaser-size-66"," teaser-size-50"," teaser-size-33"," teaser-size-25", ""]'}}"
2
+ :class="contentNavDropdownIsOpen ? 'h-10' : ''"
3
3
  id="dropdown--{{nextRandom}}"
4
4
  tabindex="0"
5
5
  role="navigation"
6
6
  aria-labelledby="dropdown__label--{{getRandom}}">
7
7
 
8
8
  <span id="dropdown__label--{{getRandom}}" class="hidden">{{defaultIfEmpty _hiddenNavigationLabel "Unternavigation"}}</span>
9
-
10
- <div x-show="shouldDropdownBeShown({{_teaserSize}},{{this.isDropdown}},{{this.isMixed}})"
11
- :class="contentNavDropdownIsOpen ? 'shadow-[1px_4px_5px_0px_rgba(50,50,93,0.10)]' : ''"
12
- class="relative flex w-auto h-10 mx-2 mb-0 overflow-hidden bg-white border md:mx-0 z-100 border-content-nav whitespace-nowrap text-content-nav fill-content-nav"
9
+ <button
10
+ class="content-nav-dropdown_dropdown{{#if this.isDropdown}} -isDropdown{{/if}}{{#if this.isMixed}} -isMixed{{/if}} relative flex w-full h-10 mb-0 overflow-hidden bg-white border md:mx-0 z-100 border-content-nav whitespace-nowrap text-content-nav fill-content-nav"
13
11
  @click="contentNavDropdownIsOpen = !contentNavDropdownIsOpen; $dispatch('hr:global:resetinputAutoSuggest');"
12
+ @click.outside ="contentNavDropdownIsOpen = false; $dispatch('hr:global:resetinputAutoSuggest')"
13
+ {{#if this.isMixed}}
14
+ @resize.window="if(window.innerWidth > 767){contentNavDropdownIsOpen = false}; $dispatch('hr:global:resetinputAutoSuggest')"
15
+ {{/if}}
14
16
  >
15
- <span class="self-center w-full p-2 text-base">{{_buttonText}}</span>
17
+ <span class="self-center w-full p-2 text-base text-left">{{_buttonText}}</span>
16
18
  <div class="flex self-center w-auto h-full border-l border-content-nav">
17
- <button :class="contentNavDropdownIsOpen ? 'hidden' : ''"
19
+ <span :class="{'hidden' : contentNavDropdownIsOpen}"
18
20
  class="flex self-center px-3 py-3"
19
21
  >
20
22
  {{~> components/base/image/icon _icon=(defaultIfEmpty _iconOpen "arrow-down") _addClass="h-4 w-4" _iconmap="icons"~}}
21
- </button>
22
- <button :class="contentNavDropdownIsOpen ? '' : 'hidden'"
23
- class="flex self-center px-3 py-3"
23
+ </span>
24
+ <span :class="{'hidden' : !contentNavDropdownIsOpen}"
25
+ class="flex self-center hidden px-3 py-3"
24
26
  >
25
27
  {{~> components/base/image/icon _icon=(defaultIfEmpty _iconClose "arrow-up") _addClass="h-4 w-4" _iconmap="icons"~}}
26
- </button>
28
+ </span>
27
29
  </div>
28
- </div>
29
- <div x-show="shouldContentBeShown({{_teaserSize}},{{this.isDropdown}},{{this.isMixed}})"
30
- aria-haspopup="true"
31
- @click.outside="contentNavDropdownIsOpen = false; $dispatch('hr:global:resetinputAutoSuggest');"
32
- :class="contentNavDropdownIsOpen ? 'z-9999 relative' : ' z-1003'"
33
- class="{{#if this.isDropdown}} mx-2 md:mx-0 {{else}}{{#if this.isMixed}} mx-2 md:mx-0{{/if}} mx-2 {{/if}} md:h-auto md:overflow-visible">
30
+ </button>
31
+ <div :class="{'-isClosed' : !contentNavDropdownIsOpen,
32
+ '-isOpen' : contentNavDropdownIsOpen}"
33
+ aria-haspopup="true"
34
+ class="content-nav-dropdown_content{{#if this.isDropdown}} -isDropdown {{/if}}{{#if this.isMixed}} -isMixed{{/if}} md:h-auto md:overflow-visible relative -isClosed"
35
+ >
34
36
  {{~decorator_body~}}
35
37
  </div>
36
38
 
package/dist/views/components/content_nav/content_nav_item.hbs CHANGED
@@ -1,5 +1,11 @@
1
- <li x-init="chooseListItemStyles({{_teaserSize}},{{_islist}},{{_ismixed}},{{_isdropdown}},{{_isflow}})"
2
- class="h-10 md:mx-0 overflow-hidden text-base font-copy list-none border-button fill-content-nav text-content-nav bg-white hover:bg-content-nav hover:fill-white hover:text-white hover:underline {{#if this.isSelected}} font-bold -current{{/if}} c-content-nav__item">
1
+ <li x-init=""
2
+ class="content-nav-item
3
+ {{~#if _islist}} content-nav-item-list{{/if}}
4
+ {{~#if _ismixed}} content-nav-item-mixed{{/if}}
5
+ {{~#if _isdropdown}} content-nav-item-dropdown{{/if}}
6
+ {{~#if _isflow}} content-nav-item-flow{{/if~}}
7
+ {{~#if this.isSelected}} font-bold -current{{/if~}}
8
+ ">
3
9
  {{#decorator 'components/base/link'
4
10
  _doNavigationTracking="true"
5
11
  _clickLabelType="Contentnavigation"
@@ -20,6 +26,4 @@ class="h-10 md:mx-0 overflow-hidden text-base font-copy list-none border-button
20
26
  </span>
21
27
 
22
28
  {{/decorator}}
23
- </li>
24
-
25
-
29
+ </li>
package/dist/views/components/content_nav/content_nav_list.hbs CHANGED
@@ -1,5 +1,4 @@
1
- <ul class="flex bg-white md:bg-transparent flex-wrap {{#if this.isListOrFlow}} w-full gap-x-2 gap-y-2 {{else}} {{/if}} z-1003 md:!px-0 last:border-b-0 {{#if this.isDropdown }} w-full {{/if}}"
2
- :class="( ({{this.isMixed}} && {{_teaserSize}} < 50 ) || ( {{this.isMixed}} && window.innerWidth < 768 ) || {{this.isDropdown}} ) && contentNavDropdownIsOpen == true ? '!shadow-[1px_8px_9px_0px_rgba(50,50,93,0.10)] mt-0 w-full ' : ''"
1
+ <ul class="flex bg-white md:bg-transparent flex-wrap{{#if this.isListOrFlow}} w-full gap-x-2 gap-y-2{{/if}} z-1003 md:!px-0 last:border-b-0{{#if this.isDropdown }} w-full{{/if}}"
3
2
  >
4
3
 
5
4
  {{~#each this.contentNavEntries~}}
package/dist/views/components/teaser/content_nav/teaser_content_nav.hbs CHANGED
@@ -1,9 +1,6 @@
1
1
  <div id="{{nextRandom}}"
2
- x-ignore
3
- ax-load
4
- ax-load-src={{resourceUrl "assets/js/vendor/content_nav.alpine.js"}}
5
- x-data="contentNavigationHandler()"
2
+ x-data="{ contentNavDropdownIsOpen: false}"
6
3
  class="js-contentNavWrapper col-span-full flex gap-y-3 gap-x-4 js-load {{inline-switch this.teaserSize '["100","66","50","33","25"]' '["flex-col","md:col-span-9 md:flex-row ","md:col-span-6 md:flex-row "," md:col-span-4 md:flex-row "," md:col-span-3 md:flex-row "]'}}"
7
4
  >
8
- {{> components/content_nav/content_nav _teaserSize=this.teaserSize }}
5
+ {{> components/content_nav/content_nav _teaserSize=this.realTeaserSize }}
9
6
  </div>
package/package.json CHANGED
@@ -6,7 +6,7 @@
6
6
  "license": "MIT",
7
7
  "main": "dist/index.js",
8
8
  "repository": "https://github.com/szuelch/hr-design-system-handlebars",
9
- "version": "0.117.13",
9
+ "version": "0.117.14",
10
10
  "scripts": {
11
11
  "test": "echo \"Error: no test specified\" && exit 1",
12
12
  "storybook": "start-storybook -p 6006 public",
package/src/assets/css/custom-components.css CHANGED
@@ -126,4 +126,122 @@
126
126
  .ds-teaser-focus:focus {
127
127
  @apply outline-none;
128
128
  }
129
- }
129
+ /* ----------------Content NAV------------------ */
130
+ /* ---------------- NAV ITEMS ------------------ */
131
+ .content-nav-item {
132
+ @apply h-10;
133
+ @apply overflow-hidden;
134
+ @apply text-base;
135
+ @apply font-copy;
136
+ @apply list-none;
137
+ @apply border-button;
138
+ @apply fill-content-nav;
139
+ @apply text-content-nav;
140
+ @apply bg-white;
141
+ @apply hover:bg-content-nav;
142
+ @apply hover:fill-white;
143
+ @apply hover:text-white;
144
+ @apply hover:underline;
145
+ }
146
+ /* ----------------LIST - NAV ITEMS ------------------ */
147
+ .content-nav-item.content-nav-item-list {
148
+ @apply w-full;
149
+ @apply border;
150
+ @apply hover:no-underline;
151
+ }
152
+ .teaser-size-100 .content-nav-item.content-nav-item-list,
153
+ .teaser-size-66 .content-nav-item.content-nav-item-list {
154
+ @apply w-full;
155
+ @apply md:w-fit;
156
+ }
157
+ /* ----------------FLOW - NAV ITEMS ------------------ */
158
+ .content-nav-item.content-nav-item-flow {
159
+ @apply w-fit;
160
+ @apply border;
161
+ @apply hover:no-underline;
162
+ }
163
+ /* ----------------MIXED - NAV ITEMS ------------------ */
164
+ .teaser-size-100 .content-nav-item.content-nav-item-mixed,
165
+ .teaser-size-66 .content-nav-item.content-nav-item-mixed {
166
+ @apply md:w-fit;
167
+ @apply md:mb-2;
168
+ @apply md:mx-0;
169
+ @apply md:mr-2;
170
+ @apply md:!border;
171
+ @apply md:border-content-nav;
172
+ @apply md:hover:no-underline;
173
+ @apply md:hover:text-white;
174
+ @apply md:hover:!bg-content-nav;
175
+ @apply md:hover:!fill-white;
176
+
177
+ }
178
+ .content-nav-item.content-nav-item-mixed {
179
+ @apply w-full;
180
+ @apply mb-0;
181
+
182
+ @apply border-l-0;
183
+ @apply border-r-0;
184
+ @apply border-t-0;
185
+ @apply border-b;
186
+ @apply last:border-b-0;
187
+ @apply border-gray-400;
188
+ @apply hover:underline;
189
+ @apply hover:text-content-nav;
190
+ @apply hover:!bg-white;
191
+ @apply hover:!fill-content-nav;
192
+ }
193
+ /* ----------------DROPDOWN - NAV ITEMS ------------------ */
194
+ .content-nav-item.content-nav-item-dropdown {
195
+ @apply w-full;
196
+ @apply border-gray-400;
197
+ @apply border-b;
198
+ @apply last:border-b-0;
199
+ @apply hover:underline;
200
+ @apply hover:text-content-nav;
201
+ @apply hover:!bg-white;
202
+ @apply hover:!fill-content-nav;
203
+ }
204
+ /* ---------------- NAV DROPDOWN - DROPDOWN ------------------ */
205
+ .content-nav-dropdown_dropdown.-isDropdown {
206
+ @apply flex;
207
+ }
208
+ .content-nav-dropdown_dropdown.-isMixed {
209
+ @apply flex;
210
+ }
211
+ .teaser-size-100 .content-nav-dropdown_dropdown.-isMixed,
212
+ .teaser-size-66 .content-nav-dropdown_dropdown.-isMixed {
213
+ @apply flex;
214
+ @apply md:hidden;
215
+ }
216
+ /* ---------------- NAV DROPDOWN - CONTENT ------------------ */
217
+ .content-nav-dropdown_content.-isOpen {
218
+ @apply z-9999;
219
+ @apply shadow-lg;
220
+ }
221
+
222
+ .content-nav-dropdown_content.-isDropdown.-isClosed {
223
+ @apply z-1003;
224
+ @apply hidden;
225
+ }
226
+ /* ---------------- NAV DROPDOWN - CONTENT - MIXED------------------ */
227
+ .content-nav-dropdown_content.-isMixed {
228
+ @apply hidden;
229
+ }
230
+ .teaser-size-100 .content-nav-dropdown_content.-isMixed,
231
+ .teaser-size-66 .content-nav-dropdown_content.-isMixed {
232
+ @apply md:block;
233
+ }
234
+ .content-nav-dropdown_content.-isMixed.-isOpen {
235
+ @apply block;
236
+ }
237
+ .teaser-size-100 .content-nav-dropdown_content.-isMixed.-isOpen,
238
+ .teaser-size-66 .content-nav-dropdown_content.-isMixed.-isOpen {
239
+ @apply md:shadow-none;
240
+ }
241
+ .teaser-size-100 .content-nav-dropdown_content.-isMixed.-isClosed,
242
+ .teaser-size-66 .content-nav-dropdown_content.-isMixed.-isClosed {
243
+ @apply z-1003;
244
+ @apply hidden;
245
+ @apply md:block;
246
+ }
247
+ }