hr-design-system-handlebars 1.17.2 β 1.18.1
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 +24 -0
- package/dist/assets/index.css +45 -41
- package/dist/views/components/button/utilities/button_variation_classes.hbs +1 -1
- 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/section_navigation/section_navigation_top_topics.hbs +1 -1
- 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 +4 -2
- package/src/stories/views/components/button/utilities/button_variation_classes.hbs +1 -1
- 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/section_navigation/section_navigation_top_topics.hbs +1 -1
- 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/tailwind.config.js +1 -0
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,27 @@
|
|
|
1
|
+
# v1.18.1 (Thu May 04 2023)
|
|
2
|
+
|
|
3
|
+
#### π Bug Fix
|
|
4
|
+
|
|
5
|
+
- Top topics refactoring [#625](https://github.com/mumprod/hr-design-system-handlebars/pull/625) ([@vascoeduardo](https://github.com/vascoeduardo))
|
|
6
|
+
|
|
7
|
+
#### Authors: 1
|
|
8
|
+
|
|
9
|
+
- Vasco ([@vascoeduardo](https://github.com/vascoeduardo))
|
|
10
|
+
|
|
11
|
+
---
|
|
12
|
+
|
|
13
|
+
# v1.18.0 (Thu May 04 2023)
|
|
14
|
+
|
|
15
|
+
#### π Enhancement
|
|
16
|
+
|
|
17
|
+
- uses -primary instead of hardcoded color [#623](https://github.com/mumprod/hr-design-system-handlebars/pull/623) ([@StefanVesper](https://github.com/StefanVesper))
|
|
18
|
+
|
|
19
|
+
#### Authors: 1
|
|
20
|
+
|
|
21
|
+
- SonicSoulSurfer ([@StefanVesper](https://github.com/StefanVesper))
|
|
22
|
+
|
|
23
|
+
---
|
|
24
|
+
|
|
1
25
|
# v1.17.2 (Thu May 04 2023)
|
|
2
26
|
|
|
3
27
|
#### π 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
|
}
|
|
@@ -1865,10 +1861,6 @@ video {
|
|
|
1865
1861
|
--tw-bg-opacity: 1;
|
|
1866
1862
|
background-color: rgba(0, 82, 147, var(--tw-bg-opacity));
|
|
1867
1863
|
}
|
|
1868
|
-
.bg-blue-linkWater {
|
|
1869
|
-
--tw-bg-opacity: 1;
|
|
1870
|
-
background-color: rgba(211, 226, 244, var(--tw-bg-opacity));
|
|
1871
|
-
}
|
|
1872
1864
|
.bg-button {
|
|
1873
1865
|
background-color: var(--color-button);
|
|
1874
1866
|
}
|
|
@@ -1993,6 +1985,10 @@ video {
|
|
|
1993
1985
|
background-color: rgba(0, 110, 183, .85);
|
|
1994
1986
|
background-color: rgb(var(--color-stage-text-box) / .85);
|
|
1995
1987
|
}
|
|
1988
|
+
.bg-top-topic-background {
|
|
1989
|
+
background-color: #d3e2f4;
|
|
1990
|
+
background-color: var(--color-top-topic-background);
|
|
1991
|
+
}
|
|
1996
1992
|
.bg-transparent {
|
|
1997
1993
|
background-color: transparent;
|
|
1998
1994
|
}
|
|
@@ -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));
|
|
@@ -2447,6 +2439,9 @@ video {
|
|
|
2447
2439
|
.text-button {
|
|
2448
2440
|
color: var(--color-button);
|
|
2449
2441
|
}
|
|
2442
|
+
.text-button--dark {
|
|
2443
|
+
color: var(--color-button--dark);
|
|
2444
|
+
}
|
|
2450
2445
|
.text-button-disabled--dark {
|
|
2451
2446
|
color: var(--color-button-disabled--dark);
|
|
2452
2447
|
}
|
|
@@ -2501,6 +2496,10 @@ video {
|
|
|
2501
2496
|
color: #006eb7;
|
|
2502
2497
|
color: var(--color-podcast-text);
|
|
2503
2498
|
}
|
|
2499
|
+
.text-primary {
|
|
2500
|
+
color: #005293;
|
|
2501
|
+
color: var(--color-primary-ds);
|
|
2502
|
+
}
|
|
2504
2503
|
.text-stageLink {
|
|
2505
2504
|
color: #006eb7;
|
|
2506
2505
|
color: var(--color-stage-link);
|
|
@@ -2551,17 +2550,17 @@ video {
|
|
|
2551
2550
|
.decoration-1 {
|
|
2552
2551
|
text-decoration-thickness: 1px;
|
|
2553
2552
|
}
|
|
2554
|
-
.placeholder-
|
|
2555
|
-
|
|
2556
|
-
color:
|
|
2553
|
+
.placeholder-primary::-webkit-input-placeholder {
|
|
2554
|
+
color: #005293;
|
|
2555
|
+
color: var(--color-primary-ds);
|
|
2557
2556
|
}
|
|
2558
|
-
.placeholder-
|
|
2559
|
-
|
|
2560
|
-
color:
|
|
2557
|
+
.placeholder-primary::-moz-placeholder {
|
|
2558
|
+
color: #005293;
|
|
2559
|
+
color: var(--color-primary-ds);
|
|
2561
2560
|
}
|
|
2562
|
-
.placeholder-
|
|
2563
|
-
|
|
2564
|
-
color:
|
|
2561
|
+
.placeholder-primary::placeholder {
|
|
2562
|
+
color: #005293;
|
|
2563
|
+
color: var(--color-primary-ds);
|
|
2565
2564
|
}
|
|
2566
2565
|
.placeholder-opacity-100::-webkit-input-placeholder {
|
|
2567
2566
|
--tw-placeholder-opacity: 1;
|
|
@@ -2686,7 +2685,7 @@ video {
|
|
|
2686
2685
|
transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
|
|
2687
2686
|
}
|
|
2688
2687
|
.counter-reset {
|
|
2689
|
-
counter-reset:
|
|
2688
|
+
counter-reset: cnt1683208876543;
|
|
2690
2689
|
}
|
|
2691
2690
|
.hyphens-auto {
|
|
2692
2691
|
-webkit-hyphens: auto;
|
|
@@ -2788,7 +2787,8 @@ video {
|
|
|
2788
2787
|
border-right-width: 8px;
|
|
2789
2788
|
border-left-width: 8px;
|
|
2790
2789
|
border-bottom-width: 8px;
|
|
2791
|
-
border-color:
|
|
2790
|
+
border-color: #005293;
|
|
2791
|
+
border-color: var(--color-primary-ds);
|
|
2792
2792
|
--tw-border-opacity: 1;
|
|
2793
2793
|
border-left-color: rgba(255, 255, 255, var(--tw-border-opacity));
|
|
2794
2794
|
border-right-color: transparent;
|
|
@@ -2924,7 +2924,7 @@ video {
|
|
|
2924
2924
|
--tw-ring-color: rgba(255, 255, 255, 0.5);
|
|
2925
2925
|
}
|
|
2926
2926
|
.-ordered {
|
|
2927
|
-
counter-increment:
|
|
2927
|
+
counter-increment: cnt1683208876543 1;
|
|
2928
2928
|
}
|
|
2929
2929
|
.-ordered::before {
|
|
2930
2930
|
position: absolute;
|
|
@@ -2940,7 +2940,7 @@ video {
|
|
|
2940
2940
|
letter-spacing: .0125em;
|
|
2941
2941
|
--tw-text-opacity: 1;
|
|
2942
2942
|
color: rgba(0, 0, 0, var(--tw-text-opacity));
|
|
2943
|
-
content: counter(
|
|
2943
|
+
content: counter(cnt1683208876543);
|
|
2944
2944
|
}
|
|
2945
2945
|
/*! ****************************/
|
|
2946
2946
|
/*! text-shadow */
|
|
@@ -2996,6 +2996,8 @@ video {
|
|
|
2996
2996
|
--color-highlight-1: #eaf3fa;
|
|
2997
2997
|
--color-highlight-2: #d34600;
|
|
2998
2998
|
|
|
2999
|
+
/*HauptmenΓΌ*/
|
|
3000
|
+
--color-top-topic-background: #d3e2f4;
|
|
2999
3001
|
/* Medieninhalte, Video, Audio, Bildergalerie */
|
|
3000
3002
|
--color-label-media: #006dc1;
|
|
3001
3003
|
/* Ticker, Live, Livestream */
|
|
@@ -3844,10 +3846,12 @@ video {
|
|
|
3844
3846
|
}
|
|
3845
3847
|
.arrow-left-background-blue {
|
|
3846
3848
|
background: linear-gradient(to left, rgba(255, 255, 255, 0),#005293 50%);
|
|
3849
|
+
background: linear-gradient(to left, rgba(255, 255, 255, 0),var(--color-primary-ds) 50%);
|
|
3847
3850
|
transition: transform 150ms ease-in-out 0s;
|
|
3848
3851
|
}
|
|
3849
3852
|
.arrow-right-background-blue {
|
|
3850
3853
|
background: linear-gradient(to right, rgba(255, 255, 255, 0), #005293 50%);
|
|
3854
|
+
background: linear-gradient(to right, rgba(255, 255, 255, 0), var(--color-primary-ds) 50%);
|
|
3851
3855
|
transition: transform 150ms ease-in-out 0s;
|
|
3852
3856
|
}
|
|
3853
3857
|
.c-videoplayer .ardplayer {
|
|
@@ -3952,10 +3956,6 @@ video {
|
|
|
3952
3956
|
--tw-bg-opacity: 1;
|
|
3953
3957
|
background-color: rgba(0, 0, 0, var(--tw-bg-opacity));
|
|
3954
3958
|
}
|
|
3955
|
-
.hover\:bg-blue-congress:hover {
|
|
3956
|
-
--tw-bg-opacity: 1;
|
|
3957
|
-
background-color: rgba(0, 82, 147, var(--tw-bg-opacity));
|
|
3958
|
-
}
|
|
3959
3959
|
.hover\:bg-button--dark:hover {
|
|
3960
3960
|
background-color: var(--color-button--dark);
|
|
3961
3961
|
}
|
|
@@ -3966,6 +3966,10 @@ video {
|
|
|
3966
3966
|
.hover\:bg-button-inverted--dark:hover {
|
|
3967
3967
|
background-color: var(--color-button-inverted--dark);
|
|
3968
3968
|
}
|
|
3969
|
+
.hover\:bg-primary:hover {
|
|
3970
|
+
background-color: #005293;
|
|
3971
|
+
background-color: var(--color-primary-ds);
|
|
3972
|
+
}
|
|
3969
3973
|
.hover\:bg-slate-300:hover {
|
|
3970
3974
|
--tw-bg-opacity: 1;
|
|
3971
3975
|
background-color: rgba(203, 213, 225, var(--tw-bg-opacity));
|
|
@@ -3974,8 +3978,8 @@ video {
|
|
|
3974
3978
|
fill: #276b9e;
|
|
3975
3979
|
fill: var(--color-media-button);
|
|
3976
3980
|
}
|
|
3977
|
-
.hover\:text-button:hover {
|
|
3978
|
-
color: var(--color-button);
|
|
3981
|
+
.hover\:text-button--dark:hover {
|
|
3982
|
+
color: var(--color-button--dark);
|
|
3979
3983
|
}
|
|
3980
3984
|
.hover\:text-toplineColor:hover {
|
|
3981
3985
|
color: #006dc1;
|
|
@@ -4019,13 +4023,13 @@ video {
|
|
|
4019
4023
|
.active\:font-bold:active {
|
|
4020
4024
|
font-weight: 700;
|
|
4021
4025
|
}
|
|
4022
|
-
.active\:text-blue-science:active {
|
|
4023
|
-
--tw-text-opacity: 1;
|
|
4024
|
-
color: rgba(0, 109, 193, var(--tw-text-opacity));
|
|
4025
|
-
}
|
|
4026
4026
|
.active\:text-button:active {
|
|
4027
4027
|
color: var(--color-button);
|
|
4028
4028
|
}
|
|
4029
|
+
.active\:text-primary:active {
|
|
4030
|
+
color: #005293;
|
|
4031
|
+
color: var(--color-primary-ds);
|
|
4032
|
+
}
|
|
4029
4033
|
.disabled\:hidden:disabled {
|
|
4030
4034
|
display: none;
|
|
4031
4035
|
}
|
|
@@ -5097,9 +5101,9 @@ video {
|
|
|
5097
5101
|
border-style: none;
|
|
5098
5102
|
}
|
|
5099
5103
|
|
|
5100
|
-
.lg\:border-
|
|
5101
|
-
|
|
5102
|
-
border-color:
|
|
5104
|
+
.lg\:border-primary {
|
|
5105
|
+
border-color: #005293;
|
|
5106
|
+
border-color: var(--color-primary-ds);
|
|
5103
5107
|
}
|
|
5104
5108
|
|
|
5105
5109
|
.lg\:bg-transparent {
|
|
@@ -5207,9 +5211,9 @@ video {
|
|
|
5207
5211
|
line-height: 1.25rem;
|
|
5208
5212
|
}
|
|
5209
5213
|
|
|
5210
|
-
.lg\:text-
|
|
5211
|
-
|
|
5212
|
-
color:
|
|
5214
|
+
.lg\:text-primary {
|
|
5215
|
+
color: #005293;
|
|
5216
|
+
color: var(--color-primary-ds);
|
|
5213
5217
|
}
|
|
5214
5218
|
|
|
5215
5219
|
.lg\:underline {
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
{{inline-switch
|
|
3
3
|
_variant
|
|
4
4
|
'["primary","secondary","tertiary"]'
|
|
5
|
-
'[" border text-button bg-button-inverted border-button-inverted hover:bg-button-inverted--dark hover:border-button-inverted--dark active:bg-button-inverted--dark "," border text-button-inverted border-button-inverted hover:bg-button-inverted--dark hover:text-button active:text-button active:bg-button-inverted--dark "," bg-transparent border-transparent text-button-inverted hover:bg-button-inverted--dark hover:text-button hover:border-button-inverted--dark active:text-button active:bg-button-inverted--dark ","
|
|
5
|
+
'[" border text-button--dark bg-button-inverted border-button-inverted hover:bg-button-inverted--dark hover:border-button-inverted--dark active:bg-button-inverted--dark "," border text-button-inverted border-button-inverted hover:bg-button-inverted--dark hover:text-button--dark active:text-button active:bg-button-inverted--dark "," bg-transparent border-transparent text-button-inverted hover:bg-button-inverted--dark hover:text-button--dark hover:border-button-inverted--dark active:text-button active:bg-button-inverted--dark ","border text-button--dark bg-button-inverted border-button-inverted hover:bg-button-inverted--dark hover:border-button-inverted--dark active:bg-button-inverted--dark "]'
|
|
6
6
|
~}}
|
|
7
7
|
{{else if _disabled~}}
|
|
8
8
|
|
|
@@ -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"
|
package/dist/views/components/site_header/section_navigation/section_navigation_top_topics.hbs
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
<li class="order-1 w-full lg:mr-2 lg:w-auto lg:order-2">
|
|
2
|
-
<ul class="flex flex-row items-center w-full p-4 text-left list-none bg-
|
|
2
|
+
<ul class="flex flex-row items-center w-full p-4 text-left list-none bg-top-topic-background lg:p-0 lg:bg-transparent lg:h-10">
|
|
3
3
|
{{#each this.items}}
|
|
4
4
|
<li class="{{#unless @last}}mr-3 {{/unless}}">
|
|
5
5
|
{{#> components/button/top_topics_button}}
|
|
@@ -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.1",
|
|
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
|
@@ -13,6 +13,8 @@
|
|
|
13
13
|
--color-highlight-1: theme('colors.blue.accented');
|
|
14
14
|
--color-highlight-2: theme('colors.orange.spicyCarrot');
|
|
15
15
|
|
|
16
|
+
/*HauptmenΓΌ*/
|
|
17
|
+
--color-top-topic-background: theme('colors.blue.linkWater');
|
|
16
18
|
/* Medieninhalte, Video, Audio, Bildergalerie */
|
|
17
19
|
--color-label-media: theme('colors.blue.science');
|
|
18
20
|
/* Ticker, Live, Livestream */
|
|
@@ -877,11 +879,11 @@
|
|
|
877
879
|
transition: transform 150ms ease-in-out 0s;
|
|
878
880
|
}
|
|
879
881
|
.arrow-left-background-blue {
|
|
880
|
-
background: linear-gradient(to left, rgba(255, 255, 255, 0),theme('colors.
|
|
882
|
+
background: linear-gradient(to left, rgba(255, 255, 255, 0),theme('colors.primary') 50%);
|
|
881
883
|
transition: transform 150ms ease-in-out 0s;
|
|
882
884
|
}
|
|
883
885
|
.arrow-right-background-blue {
|
|
884
|
-
background: linear-gradient(to right, rgba(255, 255, 255, 0), theme('colors.
|
|
886
|
+
background: linear-gradient(to right, rgba(255, 255, 255, 0), theme('colors.primary') 50%);
|
|
885
887
|
transition: transform 150ms ease-in-out 0s;
|
|
886
888
|
}
|
|
887
889
|
.c-videoplayer .ardplayer {
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
{{inline-switch
|
|
3
3
|
_variant
|
|
4
4
|
'["primary","secondary","tertiary"]'
|
|
5
|
-
'[" border text-button bg-button-inverted border-button-inverted hover:bg-button-inverted--dark hover:border-button-inverted--dark active:bg-button-inverted--dark "," border text-button-inverted border-button-inverted hover:bg-button-inverted--dark hover:text-button active:text-button active:bg-button-inverted--dark "," bg-transparent border-transparent text-button-inverted hover:bg-button-inverted--dark hover:text-button hover:border-button-inverted--dark active:text-button active:bg-button-inverted--dark ","
|
|
5
|
+
'[" border text-button--dark bg-button-inverted border-button-inverted hover:bg-button-inverted--dark hover:border-button-inverted--dark active:bg-button-inverted--dark "," border text-button-inverted border-button-inverted hover:bg-button-inverted--dark hover:text-button--dark active:text-button active:bg-button-inverted--dark "," bg-transparent border-transparent text-button-inverted hover:bg-button-inverted--dark hover:text-button--dark hover:border-button-inverted--dark active:text-button active:bg-button-inverted--dark ","border text-button--dark bg-button-inverted border-button-inverted hover:bg-button-inverted--dark hover:border-button-inverted--dark active:bg-button-inverted--dark "]'
|
|
6
6
|
~}}
|
|
7
7
|
{{else if _disabled~}}
|
|
8
8
|
|
|
@@ -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"
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
<li class="order-1 w-full lg:mr-2 lg:w-auto lg:order-2">
|
|
2
|
-
<ul class="flex flex-row items-center w-full p-4 text-left list-none bg-
|
|
2
|
+
<ul class="flex flex-row items-center w-full p-4 text-left list-none bg-top-topic-background lg:p-0 lg:bg-transparent lg:h-10">
|
|
3
3
|
{{#each this.items}}
|
|
4
4
|
<li class="{{#unless @last}}mr-3 {{/unless}}">
|
|
5
5
|
{{#> components/button/top_topics_button}}
|
|
@@ -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}}
|
package/tailwind.config.js
CHANGED
|
@@ -317,6 +317,7 @@ module.exports = {
|
|
|
317
317
|
'secondary': 'var(--color-secondary-ds)',
|
|
318
318
|
'highlight-1': 'var(--color-highlight-1)',
|
|
319
319
|
'highlight-2': 'var(--color-highlight-2)',
|
|
320
|
+
'top-topic-background': 'var(--color-top-topic-background)',
|
|
320
321
|
'labelMedia': 'var(--color-label-media)',
|
|
321
322
|
'labelEvent': 'var(--color-label-event)',
|
|
322
323
|
'labelBreakingnews': 'var(--color-label-breakingnews)',
|