hr-design-system-handlebars 1.17.2 β 1.18.0
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/CHANGELOG.md +12 -0
- package/dist/assets/index.css +34 -35
- package/dist/views/components/content_nav/content_nav_container.hbs +1 -1
- package/dist/views/components/horizontal_scroll_container/horizontal_scroll_container.hbs +2 -2
- package/dist/views/components/horizontal_scroll_container/horizontal_scroll_container_example.hbs +1 -1
- package/dist/views/components/site_header/brand_navigation/brand_navigation_item.hbs +1 -1
- package/dist/views/components/site_header/burger.hbs +1 -1
- package/dist/views/components/site_header/header.hbs +4 -4
- package/dist/views/components/site_header/navigation_flyout/navigation_flyout.hbs +2 -2
- package/dist/views/components/site_header/navigation_flyout/navigation_flyout_item.hbs +1 -1
- package/dist/views/components/site_header/navigation_search/quick_search_button.hbs +3 -3
- package/dist/views/components/site_header/navigation_search/quick_search_form.hbs +4 -4
- package/dist/views/components/site_header/section_navigation/section_navigation_item.hbs +2 -2
- package/dist/views/components/site_header/service_navigation/service_list.hbs +1 -1
- package/dist/views/components/site_header/service_navigation/service_navigation_item.hbs +2 -2
- package/package.json +1 -1
- package/src/assets/css/custom-utilities.css +1 -1
- package/src/assets/tailwind.css +2 -2
- package/src/stories/views/components/content_nav/content_nav_container.hbs +1 -1
- package/src/stories/views/components/horizontal_scroll_container/horizontal_scroll_container.hbs +2 -2
- package/src/stories/views/components/horizontal_scroll_container/horizontal_scroll_container_example.hbs +1 -1
- package/src/stories/views/components/site_header/brand_navigation/brand_navigation_item.hbs +1 -1
- package/src/stories/views/components/site_header/burger.hbs +1 -1
- package/src/stories/views/components/site_header/header.hbs +4 -4
- package/src/stories/views/components/site_header/navigation_flyout/navigation_flyout.hbs +2 -2
- package/src/stories/views/components/site_header/navigation_flyout/navigation_flyout_item.hbs +1 -1
- package/src/stories/views/components/site_header/navigation_search/quick_search_button.hbs +3 -3
- package/src/stories/views/components/site_header/navigation_search/quick_search_form.hbs +4 -4
- package/src/stories/views/components/site_header/section_navigation/section_navigation_item.hbs +2 -2
- package/src/stories/views/components/site_header/service_navigation/service_list.hbs +1 -1
- package/src/stories/views/components/site_header/service_navigation/service_navigation_item.hbs +2 -2
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,15 @@
|
|
|
1
|
+
# v1.18.0 (Thu May 04 2023)
|
|
2
|
+
|
|
3
|
+
#### π Enhancement
|
|
4
|
+
|
|
5
|
+
- uses -primary instead of hardcoded color [#623](https://github.com/mumprod/hr-design-system-handlebars/pull/623) ([@StefanVesper](https://github.com/StefanVesper))
|
|
6
|
+
|
|
7
|
+
#### Authors: 1
|
|
8
|
+
|
|
9
|
+
- SonicSoulSurfer ([@StefanVesper](https://github.com/StefanVesper))
|
|
10
|
+
|
|
11
|
+
---
|
|
12
|
+
|
|
1
13
|
# v1.17.2 (Thu May 04 2023)
|
|
2
14
|
|
|
3
15
|
#### π Bug Fix
|
package/dist/assets/index.css
CHANGED
|
@@ -1800,10 +1800,6 @@ video {
|
|
|
1800
1800
|
.border-none {
|
|
1801
1801
|
border-style: none;
|
|
1802
1802
|
}
|
|
1803
|
-
.border-blue-congress {
|
|
1804
|
-
--tw-border-opacity: 1;
|
|
1805
|
-
border-color: rgba(0, 82, 147, var(--tw-border-opacity));
|
|
1806
|
-
}
|
|
1807
1803
|
.border-button {
|
|
1808
1804
|
border-color: var(--color-button);
|
|
1809
1805
|
}
|
|
@@ -2436,10 +2432,6 @@ video {
|
|
|
2436
2432
|
--tw-text-opacity: 1;
|
|
2437
2433
|
color: rgba(29, 78, 216, var(--tw-text-opacity));
|
|
2438
2434
|
}
|
|
2439
|
-
.text-blue-congress {
|
|
2440
|
-
--tw-text-opacity: 1;
|
|
2441
|
-
color: rgba(0, 82, 147, var(--tw-text-opacity));
|
|
2442
|
-
}
|
|
2443
2435
|
.text-blue-science {
|
|
2444
2436
|
--tw-text-opacity: 1;
|
|
2445
2437
|
color: rgba(0, 109, 193, var(--tw-text-opacity));
|
|
@@ -2501,6 +2493,10 @@ video {
|
|
|
2501
2493
|
color: #006eb7;
|
|
2502
2494
|
color: var(--color-podcast-text);
|
|
2503
2495
|
}
|
|
2496
|
+
.text-primary {
|
|
2497
|
+
color: #005293;
|
|
2498
|
+
color: var(--color-primary-ds);
|
|
2499
|
+
}
|
|
2504
2500
|
.text-stageLink {
|
|
2505
2501
|
color: #006eb7;
|
|
2506
2502
|
color: var(--color-stage-link);
|
|
@@ -2551,17 +2547,17 @@ video {
|
|
|
2551
2547
|
.decoration-1 {
|
|
2552
2548
|
text-decoration-thickness: 1px;
|
|
2553
2549
|
}
|
|
2554
|
-
.placeholder-
|
|
2555
|
-
|
|
2556
|
-
color:
|
|
2550
|
+
.placeholder-primary::-webkit-input-placeholder {
|
|
2551
|
+
color: #005293;
|
|
2552
|
+
color: var(--color-primary-ds);
|
|
2557
2553
|
}
|
|
2558
|
-
.placeholder-
|
|
2559
|
-
|
|
2560
|
-
color:
|
|
2554
|
+
.placeholder-primary::-moz-placeholder {
|
|
2555
|
+
color: #005293;
|
|
2556
|
+
color: var(--color-primary-ds);
|
|
2561
2557
|
}
|
|
2562
|
-
.placeholder-
|
|
2563
|
-
|
|
2564
|
-
color:
|
|
2558
|
+
.placeholder-primary::placeholder {
|
|
2559
|
+
color: #005293;
|
|
2560
|
+
color: var(--color-primary-ds);
|
|
2565
2561
|
}
|
|
2566
2562
|
.placeholder-opacity-100::-webkit-input-placeholder {
|
|
2567
2563
|
--tw-placeholder-opacity: 1;
|
|
@@ -2686,7 +2682,7 @@ video {
|
|
|
2686
2682
|
transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
|
|
2687
2683
|
}
|
|
2688
2684
|
.counter-reset {
|
|
2689
|
-
counter-reset:
|
|
2685
|
+
counter-reset: cnt1683204056048;
|
|
2690
2686
|
}
|
|
2691
2687
|
.hyphens-auto {
|
|
2692
2688
|
-webkit-hyphens: auto;
|
|
@@ -2788,7 +2784,8 @@ video {
|
|
|
2788
2784
|
border-right-width: 8px;
|
|
2789
2785
|
border-left-width: 8px;
|
|
2790
2786
|
border-bottom-width: 8px;
|
|
2791
|
-
border-color:
|
|
2787
|
+
border-color: #005293;
|
|
2788
|
+
border-color: var(--color-primary-ds);
|
|
2792
2789
|
--tw-border-opacity: 1;
|
|
2793
2790
|
border-left-color: rgba(255, 255, 255, var(--tw-border-opacity));
|
|
2794
2791
|
border-right-color: transparent;
|
|
@@ -2924,7 +2921,7 @@ video {
|
|
|
2924
2921
|
--tw-ring-color: rgba(255, 255, 255, 0.5);
|
|
2925
2922
|
}
|
|
2926
2923
|
.-ordered {
|
|
2927
|
-
counter-increment:
|
|
2924
|
+
counter-increment: cnt1683204056048 1;
|
|
2928
2925
|
}
|
|
2929
2926
|
.-ordered::before {
|
|
2930
2927
|
position: absolute;
|
|
@@ -2940,7 +2937,7 @@ video {
|
|
|
2940
2937
|
letter-spacing: .0125em;
|
|
2941
2938
|
--tw-text-opacity: 1;
|
|
2942
2939
|
color: rgba(0, 0, 0, var(--tw-text-opacity));
|
|
2943
|
-
content: counter(
|
|
2940
|
+
content: counter(cnt1683204056048);
|
|
2944
2941
|
}
|
|
2945
2942
|
/*! ****************************/
|
|
2946
2943
|
/*! text-shadow */
|
|
@@ -3844,10 +3841,12 @@ video {
|
|
|
3844
3841
|
}
|
|
3845
3842
|
.arrow-left-background-blue {
|
|
3846
3843
|
background: linear-gradient(to left, rgba(255, 255, 255, 0),#005293 50%);
|
|
3844
|
+
background: linear-gradient(to left, rgba(255, 255, 255, 0),var(--color-primary-ds) 50%);
|
|
3847
3845
|
transition: transform 150ms ease-in-out 0s;
|
|
3848
3846
|
}
|
|
3849
3847
|
.arrow-right-background-blue {
|
|
3850
3848
|
background: linear-gradient(to right, rgba(255, 255, 255, 0), #005293 50%);
|
|
3849
|
+
background: linear-gradient(to right, rgba(255, 255, 255, 0), var(--color-primary-ds) 50%);
|
|
3851
3850
|
transition: transform 150ms ease-in-out 0s;
|
|
3852
3851
|
}
|
|
3853
3852
|
.c-videoplayer .ardplayer {
|
|
@@ -3952,10 +3951,6 @@ video {
|
|
|
3952
3951
|
--tw-bg-opacity: 1;
|
|
3953
3952
|
background-color: rgba(0, 0, 0, var(--tw-bg-opacity));
|
|
3954
3953
|
}
|
|
3955
|
-
.hover\:bg-blue-congress:hover {
|
|
3956
|
-
--tw-bg-opacity: 1;
|
|
3957
|
-
background-color: rgba(0, 82, 147, var(--tw-bg-opacity));
|
|
3958
|
-
}
|
|
3959
3954
|
.hover\:bg-button--dark:hover {
|
|
3960
3955
|
background-color: var(--color-button--dark);
|
|
3961
3956
|
}
|
|
@@ -3966,6 +3961,10 @@ video {
|
|
|
3966
3961
|
.hover\:bg-button-inverted--dark:hover {
|
|
3967
3962
|
background-color: var(--color-button-inverted--dark);
|
|
3968
3963
|
}
|
|
3964
|
+
.hover\:bg-primary:hover {
|
|
3965
|
+
background-color: #005293;
|
|
3966
|
+
background-color: var(--color-primary-ds);
|
|
3967
|
+
}
|
|
3969
3968
|
.hover\:bg-slate-300:hover {
|
|
3970
3969
|
--tw-bg-opacity: 1;
|
|
3971
3970
|
background-color: rgba(203, 213, 225, var(--tw-bg-opacity));
|
|
@@ -4019,13 +4018,13 @@ video {
|
|
|
4019
4018
|
.active\:font-bold:active {
|
|
4020
4019
|
font-weight: 700;
|
|
4021
4020
|
}
|
|
4022
|
-
.active\:text-blue-science:active {
|
|
4023
|
-
--tw-text-opacity: 1;
|
|
4024
|
-
color: rgba(0, 109, 193, var(--tw-text-opacity));
|
|
4025
|
-
}
|
|
4026
4021
|
.active\:text-button:active {
|
|
4027
4022
|
color: var(--color-button);
|
|
4028
4023
|
}
|
|
4024
|
+
.active\:text-primary:active {
|
|
4025
|
+
color: #005293;
|
|
4026
|
+
color: var(--color-primary-ds);
|
|
4027
|
+
}
|
|
4029
4028
|
.disabled\:hidden:disabled {
|
|
4030
4029
|
display: none;
|
|
4031
4030
|
}
|
|
@@ -5097,9 +5096,9 @@ video {
|
|
|
5097
5096
|
border-style: none;
|
|
5098
5097
|
}
|
|
5099
5098
|
|
|
5100
|
-
.lg\:border-
|
|
5101
|
-
|
|
5102
|
-
border-color:
|
|
5099
|
+
.lg\:border-primary {
|
|
5100
|
+
border-color: #005293;
|
|
5101
|
+
border-color: var(--color-primary-ds);
|
|
5103
5102
|
}
|
|
5104
5103
|
|
|
5105
5104
|
.lg\:bg-transparent {
|
|
@@ -5207,9 +5206,9 @@ video {
|
|
|
5207
5206
|
line-height: 1.25rem;
|
|
5208
5207
|
}
|
|
5209
5208
|
|
|
5210
|
-
.lg\:text-
|
|
5211
|
-
|
|
5212
|
-
color:
|
|
5209
|
+
.lg\:text-primary {
|
|
5210
|
+
color: #005293;
|
|
5211
|
+
color: var(--color-primary-ds);
|
|
5213
5212
|
}
|
|
5214
5213
|
|
|
5215
5214
|
.lg\:underline {
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
{{/if}}
|
|
5
5
|
>
|
|
6
6
|
{{#if this.isAutosuggest}}
|
|
7
|
-
<div class="flex mx-0 w-full h-10 border-
|
|
7
|
+
<div class="flex mx-0 w-full h-10 border-primary align-center{{#if _autoSuggestContainerCss}} {{_autoSuggestContainerCss}}{{/if}}">
|
|
8
8
|
<input x-ref="autosuggestInput"
|
|
9
9
|
class="{{#if _inputclass }}{{_inputclass}}{{/if}} w-full h-10 pl-2 border-b-8 border-white bg-gray-alabaster text-gray-dark placeholder:text-gray-dark focus:outline-none js-autosuggest-input"
|
|
10
10
|
type="text"
|
|
@@ -9,10 +9,10 @@
|
|
|
9
9
|
<template x-if="isScrollable && $screen('{{_viewport}}')">
|
|
10
10
|
<div>
|
|
11
11
|
<button class="{{#if _onDarkBackground}}arrow-left-background-blue{{else}}arrow-left-background{{/if}} absolute z-10 left-0 flex items-center justify-start w-8 h-full disabled:hidden" @click="prev($refs.scrollContainer_{{getRandom}})" :disabled="!arrowLeftDisplay" aria-label="nach links scrollen">
|
|
12
|
-
{{> components/base/image/icon _icon="arrow-left" _iconmap="icons" _addClass=(if _onDarkBackground 'w-3.5 h-3.5 fill-current text-white' 'w-3.5 h-3.5 fill-current text-
|
|
12
|
+
{{> components/base/image/icon _icon="arrow-left" _iconmap="icons" _addClass=(if _onDarkBackground 'w-3.5 h-3.5 fill-current text-white' 'w-3.5 h-3.5 fill-current text-primary') }}
|
|
13
13
|
</button>
|
|
14
14
|
<button class="{{#if _onDarkBackground}}arrow-right-background-blue{{else}}arrow-right-background{{/if}} absolute z-10 right-0 flex items-center justify-end w-8 h-full group disabled:hidden" @click="next($refs.scrollContainer_{{getRandom}})" :disabled="!arrowRightDisplay" aria-label="nach rechts scrollen">
|
|
15
|
-
{{> components/base/image/icon _icon="arrow-right" _iconmap="icons" _addClass=(if _onDarkBackground 'w-3.5 h-3.5 fill-current text-white' 'w-3.5 h-3.5 fill-current text-
|
|
15
|
+
{{> components/base/image/icon _icon="arrow-right" _iconmap="icons" _addClass=(if _onDarkBackground 'w-3.5 h-3.5 fill-current text-white' 'w-3.5 h-3.5 fill-current text-primary') }}
|
|
16
16
|
</button>
|
|
17
17
|
</div>
|
|
18
18
|
</template>
|
package/dist/views/components/horizontal_scroll_container/horizontal_scroll_container_example.hbs
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
<div class="w-full h-auto mb-10">
|
|
2
2
|
{{#> components/horizontal_scroll_container/horizontal_scroll_container _viewport="xs" _onDarkBackground="true"}}
|
|
3
3
|
|
|
4
|
-
<div class="flex h-auto p-4 pr-10 text-lg leading-6 text-white w-[1600px] bg-
|
|
4
|
+
<div class="flex h-auto p-4 pr-10 text-lg leading-6 text-white w-[1600px] bg-primary">
|
|
5
5
|
<p class="whitespace-nowrap ">Guten Tag. Dieses Div kann mittels click auf die Pfeiltasten verschoben werden kann. Die Pfeile werden dynamisch angezeigt/ausgeblendet sobald der Rand des Inhalts erreicht ist. </p>
|
|
6
6
|
</div>
|
|
7
7
|
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
<li class="sb-brand-navigation-item{{#if this.selected}} h-10 md:h-8 font-bold text-
|
|
1
|
+
<li class="sb-brand-navigation-item{{#if this.selected}} h-10 md:h-8 font-bold text-primary {{/if}} cursor-pointer inline-block lg:hover:underline active:font-bold active:text-primary">
|
|
2
2
|
<a class="link-focus-inset leading-10 md:leading-8 flex-col px-3 {{#if @first }}pl-0 {{/if}}md:flex-row js-load w-max flex justify-center {{#if this.selected}} -currentBrand {{/if}}" aria-label="{{this.name}}" href="{{resourceUrl "index.html" _site=this.site}}"{{#if this.extern}} target="_blank" rel="noopener noreferrer"{{/if}} data-hr-click-tracking='{"settings": [{"type": "uxAction", "secondLevelId": "1", "clickLabel": "Brandnavigation::{{this.text}}-Link geklickt"}]}'>{{this.text}}</a>
|
|
3
3
|
</li>
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
<div x-data="burger()" class="flex items-center justify-center h-full fill-current sb-burger">
|
|
2
2
|
<nav>
|
|
3
|
-
<button {{!-- :class="$store.burgeropen ? 'text-
|
|
3
|
+
<button {{!-- :class="$store.burgeropen ? 'text-primary' : 'text-white'" --}}
|
|
4
4
|
class="relative w-10 h-10 text-white tablet:w-18 tablet:h-12 focus:outline-none bg-brand"
|
|
5
5
|
@burger-close.window="burgerClose()"
|
|
6
6
|
@click="$store.burgeropen = !$store.burgeropen"
|
|
@@ -20,19 +20,19 @@
|
|
|
20
20
|
<div id="serviceNavWrapper"
|
|
21
21
|
:class="shouldServiceNavBeHidden() ? '-mt-40' : ''"
|
|
22
22
|
|
|
23
|
-
class="relative flex justify-center order-2 w-full transition-all duration-500 ease-in-out md:border-white lg:border-b bg-
|
|
23
|
+
class="relative flex justify-center order-2 w-full transition-all duration-500 ease-in-out md:border-white lg:border-b bg-primary z-10002">
|
|
24
24
|
<div id="serviceNavMainContainer"
|
|
25
25
|
class="flex w-full h-10 lg:container md:h-12 lg:px-10 lg:h-16 z-10001">
|
|
26
26
|
|
|
27
27
|
<span id="serviceNavHeadline" class="hidden print:hidden">Service Navigation</span>
|
|
28
28
|
|
|
29
29
|
<div id="serviceLogoWrapper"
|
|
30
|
-
class="flex items-center order-1 w-full pl-4 pr-2 tablet:pl-5 lg:items-end lg:pb-3 bg-
|
|
30
|
+
class="flex items-center order-1 w-full pl-4 pr-2 tablet:pl-5 lg:items-end lg:pb-3 bg-primary md:px-0 md:h-12 lg:h-16 md:w-1/2 md:max-w-1/2 lg:w-1/4 lg:max-w-1/4">
|
|
31
31
|
{{> components/site_header/service_logo }}
|
|
32
32
|
</div>
|
|
33
33
|
|
|
34
34
|
<div id="serviceItemsWrapper"
|
|
35
|
-
class="flex items-center justify-end flex-initial order-2 inline-block w-full max-w-full align-top bg-
|
|
35
|
+
class="flex items-center justify-end flex-initial order-2 inline-block w-full max-w-full align-top bg-primary md:h-12 lg:h-16 lg:order-2 lg:w-3/4 lg:max-w-3/4 md:mt-0 md:w-1/2 md:max-w-1/2 md:order-2 md:border-0">
|
|
36
36
|
{{> components/site_header/service_navigation/service_list }}
|
|
37
37
|
|
|
38
38
|
{{> components/site_header/navigation_search/quick_search_button }}
|
|
@@ -54,7 +54,7 @@
|
|
|
54
54
|
x-ref="sectionnavigation"
|
|
55
55
|
@toggle-sectionnav.window="toggleSectionNav"
|
|
56
56
|
:class="shouldSectionNavBeHidden() ? '-mt-40 md:-mt-40 lg:-mt-40' : ''"
|
|
57
|
-
class="flex justify-center order-3 w-full overflow-hidden duration-500 transition-max-height lg:transition-margin-top lg:duration-500 tablet:absolute tablet:top-20 tablet:w-half-screen tablet:ml-half-screen max-h-0 lg:overflow-visible md:mt-0 lg:flex lg:max-h-full lg:h-auto bg-
|
|
57
|
+
class="flex justify-center order-3 w-full overflow-hidden duration-500 transition-max-height lg:transition-margin-top lg:duration-500 tablet:absolute tablet:top-20 tablet:w-half-screen tablet:ml-half-screen max-h-0 lg:overflow-visible md:mt-0 lg:flex lg:max-h-full lg:h-auto bg-primary z-10000 print:hidden"
|
|
58
58
|
>
|
|
59
59
|
{{> components/site_header/section_navigation/section_navigation }}
|
|
60
60
|
</div>
|
|
@@ -11,7 +11,7 @@
|
|
|
11
11
|
{{#if ../_isSectionNav}} relative md:top-auto md:left-auto lg:mt-10 w-full transition-all duration-500 ease-in-out
|
|
12
12
|
{{#unless this.showAsFlyout}}
|
|
13
13
|
{{#if ../this.selected}}
|
|
14
|
-
isSelectedAndOpen lg:ml-0 z-10000 lg:border-b lg:border-
|
|
14
|
+
isSelectedAndOpen lg:ml-0 z-10000 lg:border-b lg:border-primary lg:filter-none lg:left-0 flex justify-center
|
|
15
15
|
{{else}} z-10002 lg:left-auto lg:w-auto {{/if}}
|
|
16
16
|
{{else}} z-10002 lg:left-auto lg:w-auto {{/unless}}
|
|
17
17
|
{{else}} z-10002 lg:rounded-b absolute w-full top-10 left-0 md:w-80 lg:w-92 md:top-12 lg:px-4 md:mt-0 md:left-0 lg:top-15 lg:left-0 lg:pl-6 divide-y divide-gray-200 tablet:w-half-screen tablet:ml-half-screen tablet:right-0 tablet:left-auto {{/if}}
|
|
@@ -31,7 +31,7 @@
|
|
|
31
31
|
{{#unless ../this.isCluster ~}}
|
|
32
32
|
{{#unless ../_isSectionNav}}
|
|
33
33
|
<div class="w-full">
|
|
34
|
-
<div class="flex pt-4 pb-2 pl-4 text-base font-bold bg-white lg:pl-0 md:pt-4 lg:pt-1 lg:pb-0 justify-left text-
|
|
34
|
+
<div class="flex pt-4 pb-2 pl-4 text-base font-bold bg-white lg:pl-0 md:pt-4 lg:pt-1 lg:pb-0 justify-left text-primary ">
|
|
35
35
|
<a href="{{resourceUrl ../this.url}}" class="-isHeaderLink lg:leading-10 link-focus-inset js-load" data-hr-click-tracking='{"settings": [{"type": "uxAction", "secondLevelId": "1", "clickLabel": "{{../_navigationType}}::{{../_parent}}::{{../this.flyoutStartLinkText}}-Link geklickt"}]}' >
|
|
36
36
|
{{../this.flyoutStartLinkText}}
|
|
37
37
|
</a>
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
<li :class="dropped ? 'h-auto' : 'h-10'"
|
|
2
|
-
class="sb-navigation-flyout-item pl-4 {{#if _flyout}}lg:px-0 {{else}}lg:px-2 lg:first-of-type:pl-0 {{/if}}{{#if _parentselected}}lg:whitespace-nowrap{{/if}} flex h-auto text-base leading-6 border-b border-gray-200 lg:last:border-0 lg:border-0 text-
|
|
2
|
+
class="sb-navigation-flyout-item pl-4 {{#if _flyout}}lg:px-0 {{else}}lg:px-2 lg:first-of-type:pl-0 {{/if}}{{#if _parentselected}}lg:whitespace-nowrap{{/if}} flex h-auto text-base leading-6 border-b border-gray-200 lg:last:border-0 lg:border-0 text-primary justify-start hover:underline">
|
|
3
3
|
{{#with this}}
|
|
4
4
|
{{#> components/base/link _link=this.link _css=(inline-switch _fromNav '["RubrikNavigation","ServiceNavigation"]' '["link-focus-inset py-2 w-full","link-focus py-2 md:pl-0 lg:pl-0 lg:pr-0 break-words w-full"]') }}
|
|
5
5
|
{{this.text}}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
<div
|
|
2
|
-
x-cloak class="
|
|
3
|
-
:class="$store.searchFieldOpen == true ? 'bg-white mt-2 rounded-t md:mt-0 md:rounded-none' : 'bg-
|
|
2
|
+
x-cloak class="flex items-center h-8 sb-quick-search-button md:h-full md:border-r md:border-l md:border-white lg:border-none"
|
|
3
|
+
:class="$store.searchFieldOpen == true ? 'bg-white mt-2 rounded-t md:mt-0 md:rounded-none' : 'bg-primary'"
|
|
4
4
|
>
|
|
5
5
|
<button
|
|
6
6
|
@click="$store.searchFieldOpen = ! $store.searchFieldOpen; dropped = false; $store.serviceNavIsOpen = false; toggleScrolling(!$store.searchFieldOpen)"
|
|
@@ -20,7 +20,7 @@
|
|
|
20
20
|
</svg>
|
|
21
21
|
<svg
|
|
22
22
|
x-show="$store.searchFieldOpen == true"
|
|
23
|
-
class="h-6 fill-current w-9 text-
|
|
23
|
+
class="h-6 fill-current w-9 text-primary"
|
|
24
24
|
xmlns="http://www.w3.org/2000/svg"
|
|
25
25
|
viewBox="0 0 20 20"
|
|
26
26
|
x-effect="$el.setAttribute('aria-hidden', $store.searchFieldOpen == false)"
|
|
@@ -19,7 +19,7 @@
|
|
|
19
19
|
name="query"
|
|
20
20
|
x-model="query"
|
|
21
21
|
placeholder='{{loca "search_input_placeholder" }}'
|
|
22
|
-
class="w-full px-2 py-2 text-base leading-4 placeholder-opacity-100 border rounded-l rounded-r-none shadow-inner appearance-none lg:border-0 lg:border-none border-
|
|
22
|
+
class="w-full px-2 py-2 text-base leading-4 placeholder-opacity-100 border rounded-l rounded-r-none shadow-inner appearance-none lg:border-0 lg:border-none border-primary lg:h-10 placeholder-text-xs placeholder-primary text-primary focus:outline-none"
|
|
23
23
|
type="text"
|
|
24
24
|
id="searchInput--{{getRandom}}"
|
|
25
25
|
autocomplete="off"
|
|
@@ -52,7 +52,7 @@
|
|
|
52
52
|
<a
|
|
53
53
|
x-bind:active="false"
|
|
54
54
|
x-bind:href="'{{resourceUrl "suche/index.nocache"}}?query=' + suggestion"
|
|
55
|
-
x-bind:class="{'py-1.5 px-2 link-focus-inset text-base flex w-full rounded hover:bg-
|
|
55
|
+
x-bind:class="{'py-1.5 px-2 link-focus-inset text-base flex w-full rounded hover:bg-primary hover:text-white': true, 'bg-primary text-white':index==cursorIndex }"
|
|
56
56
|
>
|
|
57
57
|
<span x-text="suggestion"></span>
|
|
58
58
|
</a>
|
|
@@ -65,9 +65,9 @@
|
|
|
65
65
|
<button
|
|
66
66
|
aria-label='{{loca "search_input_aria_submit" }}'
|
|
67
67
|
type="submit"
|
|
68
|
-
class="pl-3 pr-2 rounded-r cursor-pointer link-focus-inset bg-
|
|
68
|
+
class="pl-3 pr-2 rounded-r cursor-pointer link-focus-inset bg-primary lg:bg-white text-primary z-10002"
|
|
69
69
|
>
|
|
70
|
-
<svg class="w-6 h-6 text-white fill-current bg-
|
|
70
|
+
<svg class="w-6 h-6 text-white fill-current bg-primary lg:fill-current lg:text-primary lg:bg-white"
|
|
71
71
|
xmlns="http://www.w3.org/2000/svg"
|
|
72
72
|
viewBox="0 0 20 20"
|
|
73
73
|
aria-hidden="true"
|
|
@@ -2,8 +2,8 @@
|
|
|
2
2
|
<li x-data="dropdown"
|
|
3
3
|
@click.outside="dropped = false"
|
|
4
4
|
@close-servicemenu.window="dropped = false"
|
|
5
|
-
:class="dropped ? 'border-b-0 lg:bg-white lg:text-
|
|
6
|
-
class="flex flex-wrap justify-start order-2 w-full text-white list-none border-b border-white sb-section-navigation-item first:lg:-ml-4 md:pl-0 lg:last:pr-8 lg:first:pl-0 first:border-t lg:first:border-t-0 first:font-normal last:border-b-0 lg:border-0 lg:w-auto bg-
|
|
5
|
+
:class="dropped ? 'border-b-0 lg:bg-white lg:text-primary h-auto' : 'h-10 lg:hover:underline'"
|
|
6
|
+
class="flex flex-wrap justify-start order-2 w-full text-white list-none border-b border-white sb-section-navigation-item first:lg:-ml-4 md:pl-0 lg:last:pr-8 lg:first:pl-0 first:border-t lg:first:border-t-0 first:font-normal last:border-b-0 lg:border-0 lg:w-auto bg-primary lg:rounded-t">
|
|
7
7
|
{{#if this.isCluster ~}}
|
|
8
8
|
{{!-- Gilt z.B. fΓΌr REGIONEN: --}}
|
|
9
9
|
<button id="button-{{nextRandom}}-1"
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
@click.outside="$store.serviceNavIsOpen = false; toggleScrolling(!$store.searchFieldOpen && !$store.burgeropen)"
|
|
4
4
|
x-ref="serviceList"
|
|
5
5
|
:class="shouldServiceIconsBeHidden() ? '-mt-40' : ''"
|
|
6
|
-
class="absolute left-0 flex justify-center flex-initial w-full h-10 max-w-full align-top duration-500 ease-in-out border-t border-white sb-service-list transition-margin-top -z-1000 md:z-10000 md:h-12 top-10 bg-
|
|
6
|
+
class="absolute left-0 flex justify-center flex-initial w-full h-10 max-w-full align-top duration-500 ease-in-out border-t border-white sb-service-list transition-margin-top -z-1000 md:z-10000 md:h-12 top-10 bg-primary md:border-0 md:top-auto md:w-auto md:left-auto md:static md:justify-end md:flex md:flex-auto lg:h-16 lg:pl-0 lg:pr-4 lg:w-3/4 "
|
|
7
7
|
>
|
|
8
8
|
{{#with this.serviceNavigationSSILinks}}
|
|
9
9
|
<ul class="flex justify-around w-full h-full -itemCount-{{ count }} lg:w-auto lg:justify-end lg:pt-1">
|
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
|
|
13
13
|
class="js-load flex flex-col items-center justify-center h-full px-4 text-left lg:justify-start lg:px-3 lg:pt-1 lg:hover:underline lg:relative lg:rounded-t lg:border-0 lg:left-0 link-focus-inset-white {{#if this.selected}}-currentService{{/if}}"
|
|
14
14
|
|
|
15
|
-
:class="dropped ? 'bg-white fill-current text-
|
|
15
|
+
:class="dropped ? 'bg-white fill-current text-primary lg:border-0 lg:underline' : ''"
|
|
16
16
|
|
|
17
17
|
aria-owns="flyout-{{getRandom}}"
|
|
18
18
|
aria-controls="flyout-{{getRandom}}"
|
|
@@ -35,7 +35,7 @@
|
|
|
35
35
|
<span class="sr-only lg:hidden">{{this.text}}</span>
|
|
36
36
|
</div>
|
|
37
37
|
|
|
38
|
-
<div :class="{'text-
|
|
38
|
+
<div :class="{'text-primary fill-current': dropped,'text-white fill-white': !dropped}" class="relative flex-row items-center justify-center hidden pt-px text-white lg:flex z-10002">
|
|
39
39
|
<div class="flex" >
|
|
40
40
|
<span class="flex text-xs leading-4 whitespace-nowrap">
|
|
41
41
|
{{text}}
|
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": "1.
|
|
9
|
+
"version": "1.18.0",
|
|
10
10
|
"scripts": {
|
|
11
11
|
"test": "echo \"Error: no test specified\" && exit 1",
|
|
12
12
|
"storybook": "storybook dev -p 6006 public",
|
|
@@ -104,7 +104,7 @@
|
|
|
104
104
|
}
|
|
105
105
|
|
|
106
106
|
.-currentBrand {
|
|
107
|
-
@apply before:content-[''] md:before:relative md:before:-right-1/2 md:before:w-0 md:before:h-0 md:before:border-t-0 md:before:border-r-8 md:before:border-r-transparent md:before:border-l-8 md:before:border-l-white md:before:border-b-8 md:before:border-
|
|
107
|
+
@apply before:content-[''] md:before:relative md:before:-right-1/2 md:before:w-0 md:before:h-0 md:before:border-t-0 md:before:border-r-8 md:before:border-r-transparent md:before:border-l-8 md:before:border-l-white md:before:border-b-8 md:before:border-primary md:before:mt-6;
|
|
108
108
|
}
|
|
109
109
|
.-currentService {
|
|
110
110
|
@apply before:content-[''] before:hidden lg:before:flex before:relative before:w-0 before:h-0 before:mr-4 before:mt-0 before:border-r-0 before:border-t-8 before:border-t-transparent before:border-l-8 before:border-l-white before:border-b-8 before:border-b-transparent lg:before:absolute lg:before:w-0 lg:before:h-0 lg:before:mr-0 lg:before:border-t-0 lg:before:border-r-8 lg:before:border-r-transparent lg:before:border-l-8 lg:before:border-l-transparent lg:before:border-b-8 lg:before:border-b-white lg:before:mt-12;
|
package/src/assets/tailwind.css
CHANGED
|
@@ -877,11 +877,11 @@
|
|
|
877
877
|
transition: transform 150ms ease-in-out 0s;
|
|
878
878
|
}
|
|
879
879
|
.arrow-left-background-blue {
|
|
880
|
-
background: linear-gradient(to left, rgba(255, 255, 255, 0),theme('colors.
|
|
880
|
+
background: linear-gradient(to left, rgba(255, 255, 255, 0),theme('colors.primary') 50%);
|
|
881
881
|
transition: transform 150ms ease-in-out 0s;
|
|
882
882
|
}
|
|
883
883
|
.arrow-right-background-blue {
|
|
884
|
-
background: linear-gradient(to right, rgba(255, 255, 255, 0), theme('colors.
|
|
884
|
+
background: linear-gradient(to right, rgba(255, 255, 255, 0), theme('colors.primary') 50%);
|
|
885
885
|
transition: transform 150ms ease-in-out 0s;
|
|
886
886
|
}
|
|
887
887
|
.c-videoplayer .ardplayer {
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
{{/if}}
|
|
5
5
|
>
|
|
6
6
|
{{#if this.isAutosuggest}}
|
|
7
|
-
<div class="flex mx-0 w-full h-10 border-
|
|
7
|
+
<div class="flex mx-0 w-full h-10 border-primary align-center{{#if _autoSuggestContainerCss}} {{_autoSuggestContainerCss}}{{/if}}">
|
|
8
8
|
<input x-ref="autosuggestInput"
|
|
9
9
|
class="{{#if _inputclass }}{{_inputclass}}{{/if}} w-full h-10 pl-2 border-b-8 border-white bg-gray-alabaster text-gray-dark placeholder:text-gray-dark focus:outline-none js-autosuggest-input"
|
|
10
10
|
type="text"
|
package/src/stories/views/components/horizontal_scroll_container/horizontal_scroll_container.hbs
CHANGED
|
@@ -9,10 +9,10 @@
|
|
|
9
9
|
<template x-if="isScrollable && $screen('{{_viewport}}')">
|
|
10
10
|
<div>
|
|
11
11
|
<button class="{{#if _onDarkBackground}}arrow-left-background-blue{{else}}arrow-left-background{{/if}} absolute z-10 left-0 flex items-center justify-start w-8 h-full disabled:hidden" @click="prev($refs.scrollContainer_{{getRandom}})" :disabled="!arrowLeftDisplay" aria-label="nach links scrollen">
|
|
12
|
-
{{> components/base/image/icon _icon="arrow-left" _iconmap="icons" _addClass=(if _onDarkBackground 'w-3.5 h-3.5 fill-current text-white' 'w-3.5 h-3.5 fill-current text-
|
|
12
|
+
{{> components/base/image/icon _icon="arrow-left" _iconmap="icons" _addClass=(if _onDarkBackground 'w-3.5 h-3.5 fill-current text-white' 'w-3.5 h-3.5 fill-current text-primary') }}
|
|
13
13
|
</button>
|
|
14
14
|
<button class="{{#if _onDarkBackground}}arrow-right-background-blue{{else}}arrow-right-background{{/if}} absolute z-10 right-0 flex items-center justify-end w-8 h-full group disabled:hidden" @click="next($refs.scrollContainer_{{getRandom}})" :disabled="!arrowRightDisplay" aria-label="nach rechts scrollen">
|
|
15
|
-
{{> components/base/image/icon _icon="arrow-right" _iconmap="icons" _addClass=(if _onDarkBackground 'w-3.5 h-3.5 fill-current text-white' 'w-3.5 h-3.5 fill-current text-
|
|
15
|
+
{{> components/base/image/icon _icon="arrow-right" _iconmap="icons" _addClass=(if _onDarkBackground 'w-3.5 h-3.5 fill-current text-white' 'w-3.5 h-3.5 fill-current text-primary') }}
|
|
16
16
|
</button>
|
|
17
17
|
</div>
|
|
18
18
|
</template>
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
<div class="w-full h-auto mb-10">
|
|
2
2
|
{{#> components/horizontal_scroll_container/horizontal_scroll_container _viewport="xs" _onDarkBackground="true"}}
|
|
3
3
|
|
|
4
|
-
<div class="flex h-auto p-4 pr-10 text-lg leading-6 text-white w-[1600px] bg-
|
|
4
|
+
<div class="flex h-auto p-4 pr-10 text-lg leading-6 text-white w-[1600px] bg-primary">
|
|
5
5
|
<p class="whitespace-nowrap ">Guten Tag. Dieses Div kann mittels click auf die Pfeiltasten verschoben werden kann. Die Pfeile werden dynamisch angezeigt/ausgeblendet sobald der Rand des Inhalts erreicht ist. </p>
|
|
6
6
|
</div>
|
|
7
7
|
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
<li class="sb-brand-navigation-item{{#if this.selected}} h-10 md:h-8 font-bold text-
|
|
1
|
+
<li class="sb-brand-navigation-item{{#if this.selected}} h-10 md:h-8 font-bold text-primary {{/if}} cursor-pointer inline-block lg:hover:underline active:font-bold active:text-primary">
|
|
2
2
|
<a class="link-focus-inset leading-10 md:leading-8 flex-col px-3 {{#if @first }}pl-0 {{/if}}md:flex-row js-load w-max flex justify-center {{#if this.selected}} -currentBrand {{/if}}" aria-label="{{this.name}}" href="{{resourceUrl "index.html" _site=this.site}}"{{#if this.extern}} target="_blank" rel="noopener noreferrer"{{/if}} data-hr-click-tracking='{"settings": [{"type": "uxAction", "secondLevelId": "1", "clickLabel": "Brandnavigation::{{this.text}}-Link geklickt"}]}'>{{this.text}}</a>
|
|
3
3
|
</li>
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
<div x-data="burger()" class="flex items-center justify-center h-full fill-current sb-burger">
|
|
2
2
|
<nav>
|
|
3
|
-
<button {{!-- :class="$store.burgeropen ? 'text-
|
|
3
|
+
<button {{!-- :class="$store.burgeropen ? 'text-primary' : 'text-white'" --}}
|
|
4
4
|
class="relative w-10 h-10 text-white tablet:w-18 tablet:h-12 focus:outline-none bg-brand"
|
|
5
5
|
@burger-close.window="burgerClose()"
|
|
6
6
|
@click="$store.burgeropen = !$store.burgeropen"
|
|
@@ -20,19 +20,19 @@
|
|
|
20
20
|
<div id="serviceNavWrapper"
|
|
21
21
|
:class="shouldServiceNavBeHidden() ? '-mt-40' : ''"
|
|
22
22
|
|
|
23
|
-
class="relative flex justify-center order-2 w-full transition-all duration-500 ease-in-out md:border-white lg:border-b bg-
|
|
23
|
+
class="relative flex justify-center order-2 w-full transition-all duration-500 ease-in-out md:border-white lg:border-b bg-primary z-10002">
|
|
24
24
|
<div id="serviceNavMainContainer"
|
|
25
25
|
class="flex w-full h-10 lg:container md:h-12 lg:px-10 lg:h-16 z-10001">
|
|
26
26
|
|
|
27
27
|
<span id="serviceNavHeadline" class="hidden print:hidden">Service Navigation</span>
|
|
28
28
|
|
|
29
29
|
<div id="serviceLogoWrapper"
|
|
30
|
-
class="flex items-center order-1 w-full pl-4 pr-2 tablet:pl-5 lg:items-end lg:pb-3 bg-
|
|
30
|
+
class="flex items-center order-1 w-full pl-4 pr-2 tablet:pl-5 lg:items-end lg:pb-3 bg-primary md:px-0 md:h-12 lg:h-16 md:w-1/2 md:max-w-1/2 lg:w-1/4 lg:max-w-1/4">
|
|
31
31
|
{{> components/site_header/service_logo }}
|
|
32
32
|
</div>
|
|
33
33
|
|
|
34
34
|
<div id="serviceItemsWrapper"
|
|
35
|
-
class="flex items-center justify-end flex-initial order-2 inline-block w-full max-w-full align-top bg-
|
|
35
|
+
class="flex items-center justify-end flex-initial order-2 inline-block w-full max-w-full align-top bg-primary md:h-12 lg:h-16 lg:order-2 lg:w-3/4 lg:max-w-3/4 md:mt-0 md:w-1/2 md:max-w-1/2 md:order-2 md:border-0">
|
|
36
36
|
{{> components/site_header/service_navigation/service_list }}
|
|
37
37
|
|
|
38
38
|
{{> components/site_header/navigation_search/quick_search_button }}
|
|
@@ -54,7 +54,7 @@
|
|
|
54
54
|
x-ref="sectionnavigation"
|
|
55
55
|
@toggle-sectionnav.window="toggleSectionNav"
|
|
56
56
|
:class="shouldSectionNavBeHidden() ? '-mt-40 md:-mt-40 lg:-mt-40' : ''"
|
|
57
|
-
class="flex justify-center order-3 w-full overflow-hidden duration-500 transition-max-height lg:transition-margin-top lg:duration-500 tablet:absolute tablet:top-20 tablet:w-half-screen tablet:ml-half-screen max-h-0 lg:overflow-visible md:mt-0 lg:flex lg:max-h-full lg:h-auto bg-
|
|
57
|
+
class="flex justify-center order-3 w-full overflow-hidden duration-500 transition-max-height lg:transition-margin-top lg:duration-500 tablet:absolute tablet:top-20 tablet:w-half-screen tablet:ml-half-screen max-h-0 lg:overflow-visible md:mt-0 lg:flex lg:max-h-full lg:h-auto bg-primary z-10000 print:hidden"
|
|
58
58
|
>
|
|
59
59
|
{{> components/site_header/section_navigation/section_navigation }}
|
|
60
60
|
</div>
|
|
@@ -11,7 +11,7 @@
|
|
|
11
11
|
{{#if ../_isSectionNav}} relative md:top-auto md:left-auto lg:mt-10 w-full transition-all duration-500 ease-in-out
|
|
12
12
|
{{#unless this.showAsFlyout}}
|
|
13
13
|
{{#if ../this.selected}}
|
|
14
|
-
isSelectedAndOpen lg:ml-0 z-10000 lg:border-b lg:border-
|
|
14
|
+
isSelectedAndOpen lg:ml-0 z-10000 lg:border-b lg:border-primary lg:filter-none lg:left-0 flex justify-center
|
|
15
15
|
{{else}} z-10002 lg:left-auto lg:w-auto {{/if}}
|
|
16
16
|
{{else}} z-10002 lg:left-auto lg:w-auto {{/unless}}
|
|
17
17
|
{{else}} z-10002 lg:rounded-b absolute w-full top-10 left-0 md:w-80 lg:w-92 md:top-12 lg:px-4 md:mt-0 md:left-0 lg:top-15 lg:left-0 lg:pl-6 divide-y divide-gray-200 tablet:w-half-screen tablet:ml-half-screen tablet:right-0 tablet:left-auto {{/if}}
|
|
@@ -31,7 +31,7 @@
|
|
|
31
31
|
{{#unless ../this.isCluster ~}}
|
|
32
32
|
{{#unless ../_isSectionNav}}
|
|
33
33
|
<div class="w-full">
|
|
34
|
-
<div class="flex pt-4 pb-2 pl-4 text-base font-bold bg-white lg:pl-0 md:pt-4 lg:pt-1 lg:pb-0 justify-left text-
|
|
34
|
+
<div class="flex pt-4 pb-2 pl-4 text-base font-bold bg-white lg:pl-0 md:pt-4 lg:pt-1 lg:pb-0 justify-left text-primary ">
|
|
35
35
|
<a href="{{resourceUrl ../this.url}}" class="-isHeaderLink lg:leading-10 link-focus-inset js-load" data-hr-click-tracking='{"settings": [{"type": "uxAction", "secondLevelId": "1", "clickLabel": "{{../_navigationType}}::{{../_parent}}::{{../this.flyoutStartLinkText}}-Link geklickt"}]}' >
|
|
36
36
|
{{../this.flyoutStartLinkText}}
|
|
37
37
|
</a>
|
package/src/stories/views/components/site_header/navigation_flyout/navigation_flyout_item.hbs
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
<li :class="dropped ? 'h-auto' : 'h-10'"
|
|
2
|
-
class="sb-navigation-flyout-item pl-4 {{#if _flyout}}lg:px-0 {{else}}lg:px-2 lg:first-of-type:pl-0 {{/if}}{{#if _parentselected}}lg:whitespace-nowrap{{/if}} flex h-auto text-base leading-6 border-b border-gray-200 lg:last:border-0 lg:border-0 text-
|
|
2
|
+
class="sb-navigation-flyout-item pl-4 {{#if _flyout}}lg:px-0 {{else}}lg:px-2 lg:first-of-type:pl-0 {{/if}}{{#if _parentselected}}lg:whitespace-nowrap{{/if}} flex h-auto text-base leading-6 border-b border-gray-200 lg:last:border-0 lg:border-0 text-primary justify-start hover:underline">
|
|
3
3
|
{{#with this}}
|
|
4
4
|
{{#> components/base/link _link=this.link _css=(inline-switch _fromNav '["RubrikNavigation","ServiceNavigation"]' '["link-focus-inset py-2 w-full","link-focus py-2 md:pl-0 lg:pl-0 lg:pr-0 break-words w-full"]') }}
|
|
5
5
|
{{this.text}}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
<div
|
|
2
|
-
x-cloak class="
|
|
3
|
-
:class="$store.searchFieldOpen == true ? 'bg-white mt-2 rounded-t md:mt-0 md:rounded-none' : 'bg-
|
|
2
|
+
x-cloak class="flex items-center h-8 sb-quick-search-button md:h-full md:border-r md:border-l md:border-white lg:border-none"
|
|
3
|
+
:class="$store.searchFieldOpen == true ? 'bg-white mt-2 rounded-t md:mt-0 md:rounded-none' : 'bg-primary'"
|
|
4
4
|
>
|
|
5
5
|
<button
|
|
6
6
|
@click="$store.searchFieldOpen = ! $store.searchFieldOpen; dropped = false; $store.serviceNavIsOpen = false; toggleScrolling(!$store.searchFieldOpen)"
|
|
@@ -20,7 +20,7 @@
|
|
|
20
20
|
</svg>
|
|
21
21
|
<svg
|
|
22
22
|
x-show="$store.searchFieldOpen == true"
|
|
23
|
-
class="h-6 fill-current w-9 text-
|
|
23
|
+
class="h-6 fill-current w-9 text-primary"
|
|
24
24
|
xmlns="http://www.w3.org/2000/svg"
|
|
25
25
|
viewBox="0 0 20 20"
|
|
26
26
|
x-effect="$el.setAttribute('aria-hidden', $store.searchFieldOpen == false)"
|
|
@@ -19,7 +19,7 @@
|
|
|
19
19
|
name="query"
|
|
20
20
|
x-model="query"
|
|
21
21
|
placeholder='{{loca "search_input_placeholder" }}'
|
|
22
|
-
class="w-full px-2 py-2 text-base leading-4 placeholder-opacity-100 border rounded-l rounded-r-none shadow-inner appearance-none lg:border-0 lg:border-none border-
|
|
22
|
+
class="w-full px-2 py-2 text-base leading-4 placeholder-opacity-100 border rounded-l rounded-r-none shadow-inner appearance-none lg:border-0 lg:border-none border-primary lg:h-10 placeholder-text-xs placeholder-primary text-primary focus:outline-none"
|
|
23
23
|
type="text"
|
|
24
24
|
id="searchInput--{{getRandom}}"
|
|
25
25
|
autocomplete="off"
|
|
@@ -52,7 +52,7 @@
|
|
|
52
52
|
<a
|
|
53
53
|
x-bind:active="false"
|
|
54
54
|
x-bind:href="'{{resourceUrl "suche/index.nocache"}}?query=' + suggestion"
|
|
55
|
-
x-bind:class="{'py-1.5 px-2 link-focus-inset text-base flex w-full rounded hover:bg-
|
|
55
|
+
x-bind:class="{'py-1.5 px-2 link-focus-inset text-base flex w-full rounded hover:bg-primary hover:text-white': true, 'bg-primary text-white':index==cursorIndex }"
|
|
56
56
|
>
|
|
57
57
|
<span x-text="suggestion"></span>
|
|
58
58
|
</a>
|
|
@@ -65,9 +65,9 @@
|
|
|
65
65
|
<button
|
|
66
66
|
aria-label='{{loca "search_input_aria_submit" }}'
|
|
67
67
|
type="submit"
|
|
68
|
-
class="pl-3 pr-2 rounded-r cursor-pointer link-focus-inset bg-
|
|
68
|
+
class="pl-3 pr-2 rounded-r cursor-pointer link-focus-inset bg-primary lg:bg-white text-primary z-10002"
|
|
69
69
|
>
|
|
70
|
-
<svg class="w-6 h-6 text-white fill-current bg-
|
|
70
|
+
<svg class="w-6 h-6 text-white fill-current bg-primary lg:fill-current lg:text-primary lg:bg-white"
|
|
71
71
|
xmlns="http://www.w3.org/2000/svg"
|
|
72
72
|
viewBox="0 0 20 20"
|
|
73
73
|
aria-hidden="true"
|
package/src/stories/views/components/site_header/section_navigation/section_navigation_item.hbs
CHANGED
|
@@ -2,8 +2,8 @@
|
|
|
2
2
|
<li x-data="dropdown"
|
|
3
3
|
@click.outside="dropped = false"
|
|
4
4
|
@close-servicemenu.window="dropped = false"
|
|
5
|
-
:class="dropped ? 'border-b-0 lg:bg-white lg:text-
|
|
6
|
-
class="flex flex-wrap justify-start order-2 w-full text-white list-none border-b border-white sb-section-navigation-item first:lg:-ml-4 md:pl-0 lg:last:pr-8 lg:first:pl-0 first:border-t lg:first:border-t-0 first:font-normal last:border-b-0 lg:border-0 lg:w-auto bg-
|
|
5
|
+
:class="dropped ? 'border-b-0 lg:bg-white lg:text-primary h-auto' : 'h-10 lg:hover:underline'"
|
|
6
|
+
class="flex flex-wrap justify-start order-2 w-full text-white list-none border-b border-white sb-section-navigation-item first:lg:-ml-4 md:pl-0 lg:last:pr-8 lg:first:pl-0 first:border-t lg:first:border-t-0 first:font-normal last:border-b-0 lg:border-0 lg:w-auto bg-primary lg:rounded-t">
|
|
7
7
|
{{#if this.isCluster ~}}
|
|
8
8
|
{{!-- Gilt z.B. fΓΌr REGIONEN: --}}
|
|
9
9
|
<button id="button-{{nextRandom}}-1"
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
@click.outside="$store.serviceNavIsOpen = false; toggleScrolling(!$store.searchFieldOpen && !$store.burgeropen)"
|
|
4
4
|
x-ref="serviceList"
|
|
5
5
|
:class="shouldServiceIconsBeHidden() ? '-mt-40' : ''"
|
|
6
|
-
class="absolute left-0 flex justify-center flex-initial w-full h-10 max-w-full align-top duration-500 ease-in-out border-t border-white sb-service-list transition-margin-top -z-1000 md:z-10000 md:h-12 top-10 bg-
|
|
6
|
+
class="absolute left-0 flex justify-center flex-initial w-full h-10 max-w-full align-top duration-500 ease-in-out border-t border-white sb-service-list transition-margin-top -z-1000 md:z-10000 md:h-12 top-10 bg-primary md:border-0 md:top-auto md:w-auto md:left-auto md:static md:justify-end md:flex md:flex-auto lg:h-16 lg:pl-0 lg:pr-4 lg:w-3/4 "
|
|
7
7
|
>
|
|
8
8
|
{{#with this.serviceNavigationSSILinks}}
|
|
9
9
|
<ul class="flex justify-around w-full h-full -itemCount-{{ count }} lg:w-auto lg:justify-end lg:pt-1">
|
package/src/stories/views/components/site_header/service_navigation/service_navigation_item.hbs
CHANGED
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
|
|
13
13
|
class="js-load flex flex-col items-center justify-center h-full px-4 text-left lg:justify-start lg:px-3 lg:pt-1 lg:hover:underline lg:relative lg:rounded-t lg:border-0 lg:left-0 link-focus-inset-white {{#if this.selected}}-currentService{{/if}}"
|
|
14
14
|
|
|
15
|
-
:class="dropped ? 'bg-white fill-current text-
|
|
15
|
+
:class="dropped ? 'bg-white fill-current text-primary lg:border-0 lg:underline' : ''"
|
|
16
16
|
|
|
17
17
|
aria-owns="flyout-{{getRandom}}"
|
|
18
18
|
aria-controls="flyout-{{getRandom}}"
|
|
@@ -35,7 +35,7 @@
|
|
|
35
35
|
<span class="sr-only lg:hidden">{{this.text}}</span>
|
|
36
36
|
</div>
|
|
37
37
|
|
|
38
|
-
<div :class="{'text-
|
|
38
|
+
<div :class="{'text-primary fill-current': dropped,'text-white fill-white': !dropped}" class="relative flex-row items-center justify-center hidden pt-px text-white lg:flex z-10002">
|
|
39
39
|
<div class="flex" >
|
|
40
40
|
<span class="flex text-xs leading-4 whitespace-nowrap">
|
|
41
41
|
{{text}}
|