hr-design-system-handlebars 1.17.1 β 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 +24 -0
- package/dist/assets/index.css +53 -47
- package/dist/views/components/button/top_topics_button.hbs +5 -0
- package/dist/views/components/button/utilities/button_variation_classes.hbs +2 -2
- package/dist/views/components/content_nav/content_nav_container.hbs +1 -1
- package/dist/views/components/horizontal_scroll_container/horizontal_scroll_container.hbs +3 -3
- 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 +6 -5
- 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/brand/hessenschau/conf/locatags.merged.json +1 -0
- package/src/assets/brand/hr/conf/locatags.merged.json +1 -0
- package/src/assets/brand/hr-bigband/conf/locatags.merged.json +1 -0
- package/src/assets/brand/hr-fernsehen/conf/locatags.merged.json +1 -0
- package/src/assets/brand/hr-inforadio/conf/locatags.merged.json +1 -0
- package/src/assets/brand/hr-rundfunkrat/conf/locatags.merged.json +1 -0
- package/src/assets/brand/hr-sinfonieorchester/conf/locatags.merged.json +1 -0
- package/src/assets/brand/hr-werbung/conf/locatags.merged.json +1 -0
- package/src/assets/brand/hr1/conf/locatags.merged.json +1 -0
- package/src/assets/brand/hr2/conf/locatags.merged.json +1 -0
- package/src/assets/brand/hr3/conf/locatags.merged.json +1 -0
- package/src/assets/brand/hr4/conf/locatags.merged.json +1 -0
- package/src/assets/brand/you-fm/conf/locatags.merged.json +1 -0
- package/src/assets/css/custom-utilities.css +1 -1
- package/src/assets/fixtures/site_header/topTopicsNavigation.inc.json +3 -3
- package/src/assets/tailwind.css +2 -2
- package/src/stories/views/components/button/top_topics_button.hbs +5 -0
- package/src/stories/views/components/button/utilities/button_variation_classes.hbs +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 +3 -3
- package/src/stories/views/components/horizontal_scroll_container/horizontal_scroll_container_example.hbs +1 -1
- package/src/stories/views/components/page/fixtures/page_pagination.json +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/fixtures/site_header_mit_top_topics.json +1 -1
- package/src/stories/views/components/site_header/fixtures/site_header_mit_top_topics_no_sticky.json +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 +6 -5
- 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.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
|
+
|
|
13
|
+
# v1.17.2 (Thu May 04 2023)
|
|
14
|
+
|
|
15
|
+
#### π Bug Fix
|
|
16
|
+
|
|
17
|
+
- 1913 - Top Topics fΓΌr Desktop einbauen [#615](https://github.com/mumprod/hr-design-system-handlebars/pull/615) ([@vascoeduardo](https://github.com/vascoeduardo))
|
|
18
|
+
|
|
19
|
+
#### Authors: 1
|
|
20
|
+
|
|
21
|
+
- Vasco ([@vascoeduardo](https://github.com/vascoeduardo))
|
|
22
|
+
|
|
23
|
+
---
|
|
24
|
+
|
|
1
25
|
# v1.17.1 (Wed May 03 2023)
|
|
2
26
|
|
|
3
27
|
#### π Bug Fix
|
package/dist/assets/index.css
CHANGED
|
@@ -1129,6 +1129,10 @@ video {
|
|
|
1129
1129
|
margin-left: 1px;
|
|
1130
1130
|
margin-right: 1px;
|
|
1131
1131
|
}
|
|
1132
|
+
.my-2 {
|
|
1133
|
+
margin-top: 0.5rem;
|
|
1134
|
+
margin-bottom: 0.5rem;
|
|
1135
|
+
}
|
|
1132
1136
|
.my-4 {
|
|
1133
1137
|
margin-top: 1rem;
|
|
1134
1138
|
margin-bottom: 1rem;
|
|
@@ -1796,10 +1800,6 @@ video {
|
|
|
1796
1800
|
.border-none {
|
|
1797
1801
|
border-style: none;
|
|
1798
1802
|
}
|
|
1799
|
-
.border-blue-congress {
|
|
1800
|
-
--tw-border-opacity: 1;
|
|
1801
|
-
border-color: rgba(0, 82, 147, var(--tw-border-opacity));
|
|
1802
|
-
}
|
|
1803
1803
|
.border-button {
|
|
1804
1804
|
border-color: var(--color-button);
|
|
1805
1805
|
}
|
|
@@ -1861,6 +1861,10 @@ video {
|
|
|
1861
1861
|
--tw-bg-opacity: 1;
|
|
1862
1862
|
background-color: rgba(0, 82, 147, var(--tw-bg-opacity));
|
|
1863
1863
|
}
|
|
1864
|
+
.bg-blue-linkWater {
|
|
1865
|
+
--tw-bg-opacity: 1;
|
|
1866
|
+
background-color: rgba(211, 226, 244, var(--tw-bg-opacity));
|
|
1867
|
+
}
|
|
1864
1868
|
.bg-button {
|
|
1865
1869
|
background-color: var(--color-button);
|
|
1866
1870
|
}
|
|
@@ -2243,6 +2247,9 @@ video {
|
|
|
2243
2247
|
.pt-0 {
|
|
2244
2248
|
padding-top: 0px;
|
|
2245
2249
|
}
|
|
2250
|
+
.pt-0\.5 {
|
|
2251
|
+
padding-top: 0.125rem;
|
|
2252
|
+
}
|
|
2246
2253
|
.pt-1 {
|
|
2247
2254
|
padding-top: 0.25rem;
|
|
2248
2255
|
}
|
|
@@ -2425,14 +2432,6 @@ video {
|
|
|
2425
2432
|
--tw-text-opacity: 1;
|
|
2426
2433
|
color: rgba(29, 78, 216, var(--tw-text-opacity));
|
|
2427
2434
|
}
|
|
2428
|
-
.text-blue-astronautBlue {
|
|
2429
|
-
--tw-text-opacity: 1;
|
|
2430
|
-
color: rgba(0, 55, 93, var(--tw-text-opacity));
|
|
2431
|
-
}
|
|
2432
|
-
.text-blue-congress {
|
|
2433
|
-
--tw-text-opacity: 1;
|
|
2434
|
-
color: rgba(0, 82, 147, var(--tw-text-opacity));
|
|
2435
|
-
}
|
|
2436
2435
|
.text-blue-science {
|
|
2437
2436
|
--tw-text-opacity: 1;
|
|
2438
2437
|
color: rgba(0, 109, 193, var(--tw-text-opacity));
|
|
@@ -2494,6 +2493,10 @@ video {
|
|
|
2494
2493
|
color: #006eb7;
|
|
2495
2494
|
color: var(--color-podcast-text);
|
|
2496
2495
|
}
|
|
2496
|
+
.text-primary {
|
|
2497
|
+
color: #005293;
|
|
2498
|
+
color: var(--color-primary-ds);
|
|
2499
|
+
}
|
|
2497
2500
|
.text-stageLink {
|
|
2498
2501
|
color: #006eb7;
|
|
2499
2502
|
color: var(--color-stage-link);
|
|
@@ -2544,17 +2547,17 @@ video {
|
|
|
2544
2547
|
.decoration-1 {
|
|
2545
2548
|
text-decoration-thickness: 1px;
|
|
2546
2549
|
}
|
|
2547
|
-
.placeholder-
|
|
2548
|
-
|
|
2549
|
-
color:
|
|
2550
|
+
.placeholder-primary::-webkit-input-placeholder {
|
|
2551
|
+
color: #005293;
|
|
2552
|
+
color: var(--color-primary-ds);
|
|
2550
2553
|
}
|
|
2551
|
-
.placeholder-
|
|
2552
|
-
|
|
2553
|
-
color:
|
|
2554
|
+
.placeholder-primary::-moz-placeholder {
|
|
2555
|
+
color: #005293;
|
|
2556
|
+
color: var(--color-primary-ds);
|
|
2554
2557
|
}
|
|
2555
|
-
.placeholder-
|
|
2556
|
-
|
|
2557
|
-
color:
|
|
2558
|
+
.placeholder-primary::placeholder {
|
|
2559
|
+
color: #005293;
|
|
2560
|
+
color: var(--color-primary-ds);
|
|
2558
2561
|
}
|
|
2559
2562
|
.placeholder-opacity-100::-webkit-input-placeholder {
|
|
2560
2563
|
--tw-placeholder-opacity: 1;
|
|
@@ -2679,7 +2682,7 @@ video {
|
|
|
2679
2682
|
transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
|
|
2680
2683
|
}
|
|
2681
2684
|
.counter-reset {
|
|
2682
|
-
counter-reset:
|
|
2685
|
+
counter-reset: cnt1683204056048;
|
|
2683
2686
|
}
|
|
2684
2687
|
.hyphens-auto {
|
|
2685
2688
|
-webkit-hyphens: auto;
|
|
@@ -2781,7 +2784,8 @@ video {
|
|
|
2781
2784
|
border-right-width: 8px;
|
|
2782
2785
|
border-left-width: 8px;
|
|
2783
2786
|
border-bottom-width: 8px;
|
|
2784
|
-
border-color:
|
|
2787
|
+
border-color: #005293;
|
|
2788
|
+
border-color: var(--color-primary-ds);
|
|
2785
2789
|
--tw-border-opacity: 1;
|
|
2786
2790
|
border-left-color: rgba(255, 255, 255, var(--tw-border-opacity));
|
|
2787
2791
|
border-right-color: transparent;
|
|
@@ -2917,7 +2921,7 @@ video {
|
|
|
2917
2921
|
--tw-ring-color: rgba(255, 255, 255, 0.5);
|
|
2918
2922
|
}
|
|
2919
2923
|
.-ordered {
|
|
2920
|
-
counter-increment:
|
|
2924
|
+
counter-increment: cnt1683204056048 1;
|
|
2921
2925
|
}
|
|
2922
2926
|
.-ordered::before {
|
|
2923
2927
|
position: absolute;
|
|
@@ -2933,7 +2937,7 @@ video {
|
|
|
2933
2937
|
letter-spacing: .0125em;
|
|
2934
2938
|
--tw-text-opacity: 1;
|
|
2935
2939
|
color: rgba(0, 0, 0, var(--tw-text-opacity));
|
|
2936
|
-
content: counter(
|
|
2940
|
+
content: counter(cnt1683204056048);
|
|
2937
2941
|
}
|
|
2938
2942
|
/*! ****************************/
|
|
2939
2943
|
/*! text-shadow */
|
|
@@ -3837,10 +3841,12 @@ video {
|
|
|
3837
3841
|
}
|
|
3838
3842
|
.arrow-left-background-blue {
|
|
3839
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%);
|
|
3840
3845
|
transition: transform 150ms ease-in-out 0s;
|
|
3841
3846
|
}
|
|
3842
3847
|
.arrow-right-background-blue {
|
|
3843
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%);
|
|
3844
3850
|
transition: transform 150ms ease-in-out 0s;
|
|
3845
3851
|
}
|
|
3846
3852
|
.c-videoplayer .ardplayer {
|
|
@@ -3945,14 +3951,6 @@ video {
|
|
|
3945
3951
|
--tw-bg-opacity: 1;
|
|
3946
3952
|
background-color: rgba(0, 0, 0, var(--tw-bg-opacity));
|
|
3947
3953
|
}
|
|
3948
|
-
.hover\:bg-blue-300:hover {
|
|
3949
|
-
--tw-bg-opacity: 1;
|
|
3950
|
-
background-color: rgba(147, 197, 253, var(--tw-bg-opacity));
|
|
3951
|
-
}
|
|
3952
|
-
.hover\:bg-blue-congress:hover {
|
|
3953
|
-
--tw-bg-opacity: 1;
|
|
3954
|
-
background-color: rgba(0, 82, 147, var(--tw-bg-opacity));
|
|
3955
|
-
}
|
|
3956
3954
|
.hover\:bg-button--dark:hover {
|
|
3957
3955
|
background-color: var(--color-button--dark);
|
|
3958
3956
|
}
|
|
@@ -3963,6 +3961,10 @@ video {
|
|
|
3963
3961
|
.hover\:bg-button-inverted--dark:hover {
|
|
3964
3962
|
background-color: var(--color-button-inverted--dark);
|
|
3965
3963
|
}
|
|
3964
|
+
.hover\:bg-primary:hover {
|
|
3965
|
+
background-color: #005293;
|
|
3966
|
+
background-color: var(--color-primary-ds);
|
|
3967
|
+
}
|
|
3966
3968
|
.hover\:bg-slate-300:hover {
|
|
3967
3969
|
--tw-bg-opacity: 1;
|
|
3968
3970
|
background-color: rgba(203, 213, 225, var(--tw-bg-opacity));
|
|
@@ -4016,13 +4018,13 @@ video {
|
|
|
4016
4018
|
.active\:font-bold:active {
|
|
4017
4019
|
font-weight: 700;
|
|
4018
4020
|
}
|
|
4019
|
-
.active\:text-blue-science:active {
|
|
4020
|
-
--tw-text-opacity: 1;
|
|
4021
|
-
color: rgba(0, 109, 193, var(--tw-text-opacity));
|
|
4022
|
-
}
|
|
4023
4021
|
.active\:text-button:active {
|
|
4024
4022
|
color: var(--color-button);
|
|
4025
4023
|
}
|
|
4024
|
+
.active\:text-primary:active {
|
|
4025
|
+
color: #005293;
|
|
4026
|
+
color: var(--color-primary-ds);
|
|
4027
|
+
}
|
|
4026
4028
|
.disabled\:hidden:disabled {
|
|
4027
4029
|
display: none;
|
|
4028
4030
|
}
|
|
@@ -4877,6 +4879,14 @@ video {
|
|
|
4877
4879
|
margin-top: -2rem;
|
|
4878
4880
|
}
|
|
4879
4881
|
|
|
4882
|
+
.lg\:mb-2 {
|
|
4883
|
+
margin-bottom: 0.5rem;
|
|
4884
|
+
}
|
|
4885
|
+
|
|
4886
|
+
.lg\:mb-2\.5 {
|
|
4887
|
+
margin-bottom: 0.625rem;
|
|
4888
|
+
}
|
|
4889
|
+
|
|
4880
4890
|
.lg\:ml-0 {
|
|
4881
4891
|
margin-left: 0px;
|
|
4882
4892
|
}
|
|
@@ -5086,9 +5096,9 @@ video {
|
|
|
5086
5096
|
border-style: none;
|
|
5087
5097
|
}
|
|
5088
5098
|
|
|
5089
|
-
.lg\:border-
|
|
5090
|
-
|
|
5091
|
-
border-color:
|
|
5099
|
+
.lg\:border-primary {
|
|
5100
|
+
border-color: #005293;
|
|
5101
|
+
border-color: var(--color-primary-ds);
|
|
5092
5102
|
}
|
|
5093
5103
|
|
|
5094
5104
|
.lg\:bg-transparent {
|
|
@@ -5152,10 +5162,6 @@ video {
|
|
|
5152
5162
|
padding-bottom: 0px;
|
|
5153
5163
|
}
|
|
5154
5164
|
|
|
5155
|
-
.lg\:pb-1 {
|
|
5156
|
-
padding-bottom: 0.25rem;
|
|
5157
|
-
}
|
|
5158
|
-
|
|
5159
5165
|
.lg\:pb-3 {
|
|
5160
5166
|
padding-bottom: 0.75rem;
|
|
5161
5167
|
}
|
|
@@ -5200,9 +5206,9 @@ video {
|
|
|
5200
5206
|
line-height: 1.25rem;
|
|
5201
5207
|
}
|
|
5202
5208
|
|
|
5203
|
-
.lg\:text-
|
|
5204
|
-
|
|
5205
|
-
color:
|
|
5209
|
+
.lg\:text-primary {
|
|
5210
|
+
color: #005293;
|
|
5211
|
+
color: var(--color-primary-ds);
|
|
5206
5212
|
}
|
|
5207
5213
|
|
|
5208
5214
|
.lg\:underline {
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
{{#> components/base/link _link=this.link _css="inline-flex items-center"}}
|
|
2
|
+
<span class="rounded-full font-copy my-2 lg:mb-2.5 pt-0.5 px-1.5 leading-5 {{> components/button/utilities/button_variation_classes _variant="primary" _onBackground="true"}}">
|
|
3
|
+
{{> @partial-block }}
|
|
4
|
+
</span>
|
|
5
|
+
{{/components/base/link}}
|
|
@@ -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
|
|
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 "," border text-button bg-button-inverted border-button-inverted hover:bg-button-inverted--dark active:bg-button-inverted--dark "]'
|
|
6
6
|
~}}
|
|
7
7
|
{{else if _disabled~}}
|
|
8
8
|
|
|
@@ -16,7 +16,7 @@
|
|
|
16
16
|
{{~inline-switch
|
|
17
17
|
_variant
|
|
18
18
|
'["primary","secondary","tertiary"]'
|
|
19
|
-
'[" border text-button-inverted bg-button border-button hover:bg-button--dark
|
|
19
|
+
'[" border text-button-inverted bg-button border-button hover:bg-button--dark hover:border-button--dark active:bg-button--dark "," border text-button border-button hover:bg-button-inverted active:bg-button-primary--inverted"," border bg-transparent border-transparent text-button hover:bg-button-inverted hover:border-button active:bg-button-primary--inverted"," border text-button-inverted bg-button border-button hover:bg-button--dark hover:border-button--dark active:bg-button--dark "]'
|
|
20
20
|
~}}
|
|
21
21
|
{{/if}}
|
|
22
22
|
{{~#unless _disableButtonPress}} active:scale-95{{/unless}}
|
|
@@ -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,14 +9,14 @@
|
|
|
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>
|
|
19
|
-
<div x-ref="scrollContainer_{{getRandom}}" @scroll="updateIndex($event.target)" class="w-full overflow-hidden overflow-x-scroll
|
|
19
|
+
<div x-ref="scrollContainer_{{getRandom}}" @scroll="updateIndex($event.target)" class="w-full overflow-hidden overflow-x-scroll transition-all duration-300 ease-in-out cursor-default hide-scroll-bar align-center">
|
|
20
20
|
{{> @partial-block }}
|
|
21
21
|
</div>
|
|
22
22
|
</div>
|
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,10 +1,11 @@
|
|
|
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-blue-linkWater lg:p-0 lg:bg-transparent lg:h-10">
|
|
3
3
|
{{#each this.items}}
|
|
4
|
-
<li class="{{#unless @last}}mr-3 {{/unless}}
|
|
5
|
-
{{#> components/
|
|
6
|
-
{{
|
|
7
|
-
|
|
4
|
+
<li class="{{#unless @last}}mr-3 {{/unless}}">
|
|
5
|
+
{{#> components/button/top_topics_button}}
|
|
6
|
+
<div class="sr-only">{{loca "label_top_thema"}}</div>
|
|
7
|
+
{{> components/button/components/button_label _label=this.text }}
|
|
8
|
+
{{/components/button/top_topics_button}}
|
|
8
9
|
</li>
|
|
9
10
|
{{/each}}
|
|
10
11
|
</ul>
|
|
@@ -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",
|