hr-design-system-handlebars 1.34.2 → 1.34.3
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 +14 -17
- package/dist/views/components/site_header/header.hbs +7 -7
- package/dist/views/components/site_header/navigation_flyout/navigation_flyout.hbs +4 -4
- package/dist/views/components/site_header/navigation_search/quick_search_form.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 +1 -1
- package/dist/views/components/teaser/components/teaser_comments.hbs +1 -1
- package/dist/views/components/teaser/podcast/podcast_subscribe_button.hbs +1 -1
- package/dist/views_static/components/site_header/header.hbs +7 -7
- package/dist/views_static/components/site_header/navigation_flyout/navigation_flyout.hbs +4 -4
- package/dist/views_static/components/site_header/navigation_search/quick_search_form.hbs +1 -1
- package/dist/views_static/components/site_header/service_navigation/service_list.hbs +1 -1
- package/dist/views_static/components/site_header/service_navigation/service_navigation_item.hbs +1 -1
- package/dist/views_static/components/teaser/components/teaser_comments.hbs +1 -1
- package/dist/views_static/components/teaser/podcast/podcast_subscribe_button.hbs +1 -1
- package/package.json +1 -1
- package/src/assets/css/custom-components.css +1 -1
- package/src/stories/conventions-and-datastructure.mdx +18 -1
- package/src/stories/views/components/site_header/header.hbs +7 -7
- package/src/stories/views/components/site_header/navigation_flyout/navigation_flyout.hbs +4 -4
- package/src/stories/views/components/site_header/navigation_search/quick_search_form.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 +1 -1
- package/src/stories/views/components/teaser/components/teaser_comments.hbs +1 -1
- package/src/stories/views/components/teaser/podcast/podcast_subscribe_button.hbs +1 -1
- package/tailwind.config.js +2 -12
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,15 @@
|
|
|
1
|
+
# v1.34.3 (Wed Jul 26 2023)
|
|
2
|
+
|
|
3
|
+
#### 🐛 Bug Fix
|
|
4
|
+
|
|
5
|
+
- DPE-2311 Z-Index konsolidieren [#664](https://github.com/mumprod/hr-design-system-handlebars/pull/664) ([@Sunny1112358](https://github.com/Sunny1112358))
|
|
6
|
+
|
|
7
|
+
#### Authors: 1
|
|
8
|
+
|
|
9
|
+
- [@Sunny1112358](https://github.com/Sunny1112358)
|
|
10
|
+
|
|
11
|
+
---
|
|
12
|
+
|
|
1
13
|
# v1.34.2 (Wed Jul 26 2023)
|
|
2
14
|
|
|
3
15
|
#### 🐛 Bug Fix
|
package/dist/assets/index.css
CHANGED
|
@@ -915,7 +915,7 @@ video {
|
|
|
915
915
|
}
|
|
916
916
|
/* ---------------- NAV DROPDOWN - CONTENT ------------------ */
|
|
917
917
|
.content-nav-dropdown_content.-isOpen {
|
|
918
|
-
z-index:
|
|
918
|
+
z-index: 100;
|
|
919
919
|
--tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
|
|
920
920
|
--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
|
|
921
921
|
box-shadow: 0 0 rgba(0,0,0,0), 0 0 rgba(0,0,0,0), var(--tw-shadow);
|
|
@@ -1096,8 +1096,8 @@ video {
|
|
|
1096
1096
|
.top-full {
|
|
1097
1097
|
top: 100%;
|
|
1098
1098
|
}
|
|
1099
|
-
.-z-
|
|
1100
|
-
z-index: -
|
|
1099
|
+
.-z-40 {
|
|
1100
|
+
z-index: -40;
|
|
1101
1101
|
}
|
|
1102
1102
|
.z-10 {
|
|
1103
1103
|
z-index: 10;
|
|
@@ -1105,20 +1105,17 @@ video {
|
|
|
1105
1105
|
.z-100 {
|
|
1106
1106
|
z-index: 100;
|
|
1107
1107
|
}
|
|
1108
|
-
.z-
|
|
1109
|
-
z-index:
|
|
1110
|
-
}
|
|
1111
|
-
.z-10001 {
|
|
1112
|
-
z-index: 10001;
|
|
1108
|
+
.z-110 {
|
|
1109
|
+
z-index: 110;
|
|
1113
1110
|
}
|
|
1114
|
-
.z-
|
|
1115
|
-
z-index:
|
|
1111
|
+
.z-120 {
|
|
1112
|
+
z-index: 120;
|
|
1116
1113
|
}
|
|
1117
1114
|
.z-20 {
|
|
1118
1115
|
z-index: 20;
|
|
1119
1116
|
}
|
|
1120
|
-
.z-
|
|
1121
|
-
z-index:
|
|
1117
|
+
.z-30 {
|
|
1118
|
+
z-index: 30;
|
|
1122
1119
|
}
|
|
1123
1120
|
.order-1 {
|
|
1124
1121
|
order: 1;
|
|
@@ -2944,7 +2941,7 @@ video {
|
|
|
2944
2941
|
border-bottom-color: var(--color-secondary-ds);
|
|
2945
2942
|
}
|
|
2946
2943
|
.counter-reset {
|
|
2947
|
-
counter-reset:
|
|
2944
|
+
counter-reset: cnt1690367145667;
|
|
2948
2945
|
}
|
|
2949
2946
|
.hyphens-auto {
|
|
2950
2947
|
-webkit-hyphens: auto;
|
|
@@ -3179,7 +3176,7 @@ video {
|
|
|
3179
3176
|
--tw-ring-color: rgba(255, 255, 255, 0.5);
|
|
3180
3177
|
}
|
|
3181
3178
|
.-ordered {
|
|
3182
|
-
counter-increment:
|
|
3179
|
+
counter-increment: cnt1690367145667 1;
|
|
3183
3180
|
}
|
|
3184
3181
|
.-ordered::before {
|
|
3185
3182
|
position: absolute;
|
|
@@ -3195,7 +3192,7 @@ video {
|
|
|
3195
3192
|
letter-spacing: .0125em;
|
|
3196
3193
|
--tw-text-opacity: 1;
|
|
3197
3194
|
color: rgba(0, 0, 0, var(--tw-text-opacity));
|
|
3198
|
-
content: counter(
|
|
3195
|
+
content: counter(cnt1690367145667);
|
|
3199
3196
|
}
|
|
3200
3197
|
/*! ****************************/
|
|
3201
3198
|
/*! text-shadow */
|
|
@@ -4985,8 +4982,8 @@ video {
|
|
|
4985
4982
|
top: auto;
|
|
4986
4983
|
}
|
|
4987
4984
|
|
|
4988
|
-
.md\:z-
|
|
4989
|
-
z-index:
|
|
4985
|
+
.md\:z-100 {
|
|
4986
|
+
z-index: 100;
|
|
4990
4987
|
}
|
|
4991
4988
|
|
|
4992
4989
|
.md\:order-2 {
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
<div class="sb-main-navigation" x-data="mainNavigationHandler()" x-init="{{#if _useSticky}}start(){{/if}}">
|
|
2
|
-
<header class="print:hidden relative z-
|
|
2
|
+
<header class="print:hidden relative z-110 {{#if _useSticky}}{{#if this.hasOpenSubNavigation}}lg:h-header-lg-big {{else}}lg:h-header-lg-small {{/if}}{{else}}lg:h-auto {{/if}}md:h-header-md h-header-sm">
|
|
3
3
|
<div x-data
|
|
4
4
|
id="headerWrapper"
|
|
5
5
|
@resize.window="resetNav()"
|
|
@@ -13,16 +13,16 @@
|
|
|
13
13
|
</div>
|
|
14
14
|
|
|
15
15
|
<div id="brandNavWrapper"
|
|
16
|
-
class="box-content relative flex items-center justify-center order-1 w-full bg-white border-b border-brandnavigation-border-color z-
|
|
16
|
+
class="box-content relative flex items-center justify-center order-1 w-full bg-white border-b border-brandnavigation-border-color z-110">
|
|
17
17
|
{{> components/site_header/brand_navigation/brand_navigation }}
|
|
18
18
|
</div>
|
|
19
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 border-b border-navigation-border-color bg-navigation-bg z-
|
|
23
|
+
class="relative flex justify-center order-2 w-full transition-all duration-500 ease-in-out border-b border-navigation-border-color bg-navigation-bg z-120">
|
|
24
24
|
<div id="serviceNavMainContainer"
|
|
25
|
-
class="flex w-full h-10 lg:container md:h-12 lg:px-10 lg:h-16 z-
|
|
25
|
+
class="flex w-full h-10 lg:container md:h-12 lg:px-10 lg:h-16 z-110">
|
|
26
26
|
|
|
27
27
|
<span id="serviceNavHeadline" class="hidden print:hidden">Service Navigation</span>
|
|
28
28
|
|
|
@@ -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:border-navigation-border-color [border-image-source:var(--border-navigation-border-image)] [border-image-slice:1] lg:border-b-navigation-border-width 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-navigation-bg z-
|
|
57
|
+
class="flex justify-center order-3 w-full overflow-hidden duration-500 transition-max-height lg:border-navigation-border-color [border-image-source:var(--border-navigation-border-image)] [border-image-slice:1] lg:border-b-navigation-border-width 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-navigation-bg z-100 print:hidden"
|
|
58
58
|
>
|
|
59
59
|
{{> components/site_header/section_navigation/section_navigation }}
|
|
60
60
|
</div>
|
|
@@ -62,7 +62,7 @@
|
|
|
62
62
|
<div x-cloak :class="shouldServiceNavBeHidden() ? 'hidden -mt-40' : ''"
|
|
63
63
|
x-effect="$el.setAttribute('id', 'flyout-' + $store.searchID.current + '-2');$el.setAttribute('aria-expanded', $store.searchFieldOpen);$el.setAttribute('aria-hidden', !$store.searchFieldOpen);$el.setAttribute('aria-labelledby', 'flyout-' + $store.searchID.current + '-1')"
|
|
64
64
|
x-show="$store.searchFieldOpen"
|
|
65
|
-
class="sb-quick-search-flyout flex tablet:w-half-screen tablet:ml-half-screen justify-end order-4 w-full max-w-full p-2 px-5 py-3.5 bg-white drop-shadow-md md:mt-0 z-
|
|
65
|
+
class="sb-quick-search-flyout flex tablet:w-half-screen tablet:ml-half-screen justify-end order-4 w-full max-w-full p-2 px-5 py-3.5 bg-white drop-shadow-md md:mt-0 z-120 lg:hidden print:hidden"
|
|
66
66
|
@search-close.window="$store.searchFieldOpen = false"
|
|
67
67
|
@click.outside="$store.searchFieldOpen = false; $dispatch('search-mobile-click-outside'); dropped = false; toggleScrolling(!$store.serviceNavIsOpensearchFieldOpen && !$store.burgeropen)"
|
|
68
68
|
x-transition:enter="transition ease-out duration-200"
|
|
@@ -85,6 +85,6 @@
|
|
|
85
85
|
/>
|
|
86
86
|
</div>
|
|
87
87
|
<div x-ref="myOverlay">
|
|
88
|
-
<div x-cloak x-data="overlayHandler()" @click.debounce="overlayWasClicked()" x-show="shouldOverlayBeShown()" class="fixed top-0 left-0 w-screen h-screen bg-gray-800 z-
|
|
88
|
+
<div x-cloak x-data="overlayHandler()" @click.debounce="overlayWasClicked()" x-show="shouldOverlayBeShown()" class="fixed top-0 left-0 w-screen h-screen bg-gray-800 z-100 lg:hidden opacity-70"></div>
|
|
89
89
|
</div>
|
|
90
90
|
</div>
|
|
@@ -11,10 +11,10 @@
|
|
|
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-
|
|
15
|
-
{{else}} z-
|
|
16
|
-
{{else}} z-
|
|
17
|
-
{{else}} z-
|
|
14
|
+
isSelectedAndOpen lg:ml-0 z-100 lg:border-b lg:border-primary lg:filter-none lg:left-0 flex justify-center
|
|
15
|
+
{{else}} z-120 lg:left-auto lg:w-auto {{/if}}
|
|
16
|
+
{{else}} z-120 lg:left-auto lg:w-auto divide-y divide-gray-200{{/unless}}
|
|
17
|
+
{{else}} z-120 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 divide-y divide-gray-200 tablet:w-half-screen tablet:ml-half-screen tablet:right-0 tablet:left-auto {{/if}}
|
|
18
18
|
{{~#if this.showAsFlyout}} lg:rounded-b lg:px-4 lg:absolute{{else}} lg:fixed{{/if}}"
|
|
19
19
|
|
|
20
20
|
aria-labelledby="flyout-{{getRandom}}-1"
|
|
@@ -65,7 +65,7 @@
|
|
|
65
65
|
<button
|
|
66
66
|
aria-label='{{loca "search_input_aria_submit" }}'
|
|
67
67
|
type="submit"
|
|
68
|
-
class="pl-3 pr-2 border-l cursor-pointer lg:search-border-desktop lg:rounded-r link-focus-inset bg-primary lg:bg-white text-primary z-
|
|
68
|
+
class="pl-3 pr-2 border-l cursor-pointer lg:search-border-desktop lg:rounded-r link-focus-inset bg-primary lg:bg-white text-primary z-120"
|
|
69
69
|
>
|
|
70
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"
|
|
@@ -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-b border-navigation-border-color sb-service-list transition-margin-top -z-
|
|
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-b border-navigation-border-color sb-service-list transition-margin-top -z-40 md:z-100 md:h-12 top-[41px] bg-navigation-bg 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">
|
|
@@ -35,7 +35,7 @@
|
|
|
35
35
|
<span class="sr-only lg:hidden">{{this.text}}</span>
|
|
36
36
|
</div>
|
|
37
37
|
|
|
38
|
-
<div :class="{'text-primary fill-current': dropped,'text-navigation-icons fill-white': !dropped}" class="relative flex-row items-center justify-center hidden pt-px text-navigation-icons lg:flex z-
|
|
38
|
+
<div :class="{'text-primary fill-current': dropped,'text-navigation-icons fill-white': !dropped}" class="relative flex-row items-center justify-center hidden pt-px text-navigation-icons lg:flex z-120">
|
|
39
39
|
<div class="flex" >
|
|
40
40
|
<span class="flex text-xs leading-4 whitespace-nowrap">
|
|
41
41
|
{{text}}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
{{#if this.commentLink}}
|
|
2
|
-
<span class="relative whitespace-nowrap z-
|
|
2
|
+
<span class="relative whitespace-nowrap z-30">
|
|
3
3
|
{{#> components/base/link _link=this.commentLink.link _css="hover:underline decoration-1" _isAriaHidden=true}}
|
|
4
4
|
{{> components/base/image/icon _icon="kommentar" _iconmap="icons" _addClass="mr-0.5 inline w-5 h-5 text-toplineColor fill-current"}}
|
|
5
5
|
<span class="sr-only">{{loca "comment_anchor_1"}}</span>
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
<div class="sb-main-navigation" x-data="mainNavigationHandler()" x-init="{{#if _useSticky}}start(){{/if}}">
|
|
2
|
-
<header class="print:hidden relative z-
|
|
2
|
+
<header class="print:hidden relative z-110 {{#if _useSticky}}{{#if this.hasOpenSubNavigation}}lg:h-header-lg-big {{else}}lg:h-header-lg-small {{/if}}{{else}}lg:h-auto {{/if}}md:h-header-md h-header-sm">
|
|
3
3
|
<div x-data
|
|
4
4
|
id="headerWrapper"
|
|
5
5
|
@resize.window="resetNav()"
|
|
@@ -13,16 +13,16 @@
|
|
|
13
13
|
</div>
|
|
14
14
|
|
|
15
15
|
<div id="brandNavWrapper"
|
|
16
|
-
class="box-content relative flex items-center justify-center order-1 w-full bg-white border-b border-brandnavigation-border-color z-
|
|
16
|
+
class="box-content relative flex items-center justify-center order-1 w-full bg-white border-b border-brandnavigation-border-color z-110">
|
|
17
17
|
{{> components/site_header/brand_navigation/brand_navigation }}
|
|
18
18
|
</div>
|
|
19
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 border-b border-navigation-border-color bg-navigation-bg z-
|
|
23
|
+
class="relative flex justify-center order-2 w-full transition-all duration-500 ease-in-out border-b border-navigation-border-color bg-navigation-bg z-120">
|
|
24
24
|
<div id="serviceNavMainContainer"
|
|
25
|
-
class="flex w-full h-10 lg:container md:h-12 lg:px-10 lg:h-16 z-
|
|
25
|
+
class="flex w-full h-10 lg:container md:h-12 lg:px-10 lg:h-16 z-110">
|
|
26
26
|
|
|
27
27
|
<span id="serviceNavHeadline" class="hidden print:hidden">Service Navigation</span>
|
|
28
28
|
|
|
@@ -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:border-navigation-border-color [border-image-source:var(--border-navigation-border-image)] [border-image-slice:1] lg:border-b-navigation-border-width 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-navigation-bg z-
|
|
57
|
+
class="flex justify-center order-3 w-full overflow-hidden duration-500 transition-max-height lg:border-navigation-border-color [border-image-source:var(--border-navigation-border-image)] [border-image-slice:1] lg:border-b-navigation-border-width 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-navigation-bg z-100 print:hidden"
|
|
58
58
|
>
|
|
59
59
|
{{> components/site_header/section_navigation/section_navigation }}
|
|
60
60
|
</div>
|
|
@@ -62,7 +62,7 @@
|
|
|
62
62
|
<div x-cloak :class="shouldServiceNavBeHidden() ? 'hidden -mt-40' : ''"
|
|
63
63
|
x-effect="$el.setAttribute('id', 'flyout-' + $store.searchID.current + '-2');$el.setAttribute('aria-expanded', $store.searchFieldOpen);$el.setAttribute('aria-hidden', !$store.searchFieldOpen);$el.setAttribute('aria-labelledby', 'flyout-' + $store.searchID.current + '-1')"
|
|
64
64
|
x-show="$store.searchFieldOpen"
|
|
65
|
-
class="sb-quick-search-flyout flex tablet:w-half-screen tablet:ml-half-screen justify-end order-4 w-full max-w-full p-2 px-5 py-3.5 bg-white drop-shadow-md md:mt-0 z-
|
|
65
|
+
class="sb-quick-search-flyout flex tablet:w-half-screen tablet:ml-half-screen justify-end order-4 w-full max-w-full p-2 px-5 py-3.5 bg-white drop-shadow-md md:mt-0 z-120 lg:hidden print:hidden"
|
|
66
66
|
@search-close.window="$store.searchFieldOpen = false"
|
|
67
67
|
@click.outside="$store.searchFieldOpen = false; $dispatch('search-mobile-click-outside'); dropped = false; toggleScrolling(!$store.serviceNavIsOpensearchFieldOpen && !$store.burgeropen)"
|
|
68
68
|
x-transition:enter="transition ease-out duration-200"
|
|
@@ -85,6 +85,6 @@
|
|
|
85
85
|
/>
|
|
86
86
|
</div>
|
|
87
87
|
<div x-ref="myOverlay">
|
|
88
|
-
<div x-cloak x-data="overlayHandler()" @click.debounce="overlayWasClicked()" x-show="shouldOverlayBeShown()" class="fixed top-0 left-0 w-screen h-screen bg-gray-800 z-
|
|
88
|
+
<div x-cloak x-data="overlayHandler()" @click.debounce="overlayWasClicked()" x-show="shouldOverlayBeShown()" class="fixed top-0 left-0 w-screen h-screen bg-gray-800 z-100 lg:hidden opacity-70"></div>
|
|
89
89
|
</div>
|
|
90
90
|
</div>
|
|
@@ -11,10 +11,10 @@
|
|
|
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-
|
|
15
|
-
{{else}} z-
|
|
16
|
-
{{else}} z-
|
|
17
|
-
{{else}} z-
|
|
14
|
+
isSelectedAndOpen lg:ml-0 z-100 lg:border-b lg:border-primary lg:filter-none lg:left-0 flex justify-center
|
|
15
|
+
{{else}} z-120 lg:left-auto lg:w-auto {{/if}}
|
|
16
|
+
{{else}} z-120 lg:left-auto lg:w-auto divide-y divide-gray-200{{/unless}}
|
|
17
|
+
{{else}} z-120 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 divide-y divide-gray-200 tablet:w-half-screen tablet:ml-half-screen tablet:right-0 tablet:left-auto {{/if}}
|
|
18
18
|
{{~#if this.showAsFlyout}} lg:rounded-b lg:px-4 lg:absolute{{else}} lg:fixed{{/if}}"
|
|
19
19
|
|
|
20
20
|
aria-labelledby="flyout-{{getRandom}}-1"
|
|
@@ -65,7 +65,7 @@
|
|
|
65
65
|
<button
|
|
66
66
|
aria-label='{{loca "search_input_aria_submit" }}'
|
|
67
67
|
type="submit"
|
|
68
|
-
class="pl-3 pr-2 border-l cursor-pointer lg:search-border-desktop lg:rounded-r link-focus-inset bg-primary lg:bg-white text-primary z-
|
|
68
|
+
class="pl-3 pr-2 border-l cursor-pointer lg:search-border-desktop lg:rounded-r link-focus-inset bg-primary lg:bg-white text-primary z-120"
|
|
69
69
|
>
|
|
70
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"
|
|
@@ -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-b border-navigation-border-color sb-service-list transition-margin-top -z-
|
|
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-b border-navigation-border-color sb-service-list transition-margin-top -z-40 md:z-100 md:h-12 top-[41px] bg-navigation-bg 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/dist/views_static/components/site_header/service_navigation/service_navigation_item.hbs
CHANGED
|
@@ -35,7 +35,7 @@
|
|
|
35
35
|
<span class="sr-only lg:hidden">{{this.text}}</span>
|
|
36
36
|
</div>
|
|
37
37
|
|
|
38
|
-
<div :class="{'text-primary fill-current': dropped,'text-navigation-icons fill-white': !dropped}" class="relative flex-row items-center justify-center hidden pt-px text-navigation-icons lg:flex z-
|
|
38
|
+
<div :class="{'text-primary fill-current': dropped,'text-navigation-icons fill-white': !dropped}" class="relative flex-row items-center justify-center hidden pt-px text-navigation-icons lg:flex z-120">
|
|
39
39
|
<div class="flex" >
|
|
40
40
|
<span class="flex text-xs leading-4 whitespace-nowrap">
|
|
41
41
|
{{text}}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
{{#if this.commentLink}}
|
|
2
|
-
<span class="relative whitespace-nowrap z-
|
|
2
|
+
<span class="relative whitespace-nowrap z-30">
|
|
3
3
|
{{#> components/base/link _link=this.commentLink.link _css="hover:underline decoration-1" _isAriaHidden=true}}
|
|
4
4
|
{{> components/base/image/icon _icon="kommentar" _iconmap="icons" _addClass="mr-0.5 inline w-5 h-5 text-toplineColor fill-current"}}
|
|
5
5
|
<span class="sr-only">{{loca "comment_anchor_1"}}</span>
|
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.34.
|
|
9
|
+
"version": "1.34.3",
|
|
10
10
|
"scripts": {
|
|
11
11
|
"test": "echo \"Error: no test specified\" && exit 1",
|
|
12
12
|
"storybook": "storybook dev -p 6006 public",
|
|
@@ -12,6 +12,7 @@ import { Meta, Canvas } from '@storybook/addon-docs'
|
|
|
12
12
|
- [JSON](#json)
|
|
13
13
|
- [Konventionen beim Bau von Komponenten](#konventionen-beim-bau-von-komponentenn)
|
|
14
14
|
- [Styling von Komponenten](#styling-von-komponenten)
|
|
15
|
+
- [Ausrichtung mit z-index](#ausrichtung-mit-z-index)
|
|
15
16
|
- [Wiederverwendbarkeit und Erweiterbarkeit von Komponenten](#wiederverwendbarkeit-und-erweiterbarkeit-von-komponenten)
|
|
16
17
|
|
|
17
18
|
## Übersicht
|
|
@@ -321,7 +322,23 @@ Ansatz mit mehreren CSS Eigenschaften pro Klasse.
|
|
|
321
322
|
Nachteil ist jedoch, dass alle CSS Logik auf diese Weise in die Templates verlagert wird und diese auf den ersten
|
|
322
323
|
Blick recht unübersichtlich wirken können.
|
|
323
324
|
|
|
324
|
-
|
|
325
|
+
### Ausrichtung mit z-index
|
|
326
|
+
|
|
327
|
+
Die Eigenschaft z-index gibt an, in welcher Reihenfolge Elemente auf dem Ausgabemedium von hinten nach vorne angeordnet werden. Das ist von Bedeutung, wenn die Elemente sich überlappen.
|
|
328
|
+
Elemente mit einem größeren z-index liegen dabei näher am Betrachter und können Elemente mit kleinerem z-index überlagern.
|
|
329
|
+
|
|
330
|
+
Das z-index-Attribut kann folgende Werte besitzen:
|
|
331
|
+
|
|
332
|
+
| Range / Value | Elements |
|
|
333
|
+
| :------------------- | :----------------------------------------- |
|
|
334
|
+
| 99 | Toplink |
|
|
335
|
+
| 1 - 99 | Content |
|
|
336
|
+
| 100 - 199 | Navi |
|
|
337
|
+
| 200 - 299 | Radioplayer |
|
|
338
|
+
| 300 | Modal |
|
|
339
|
+
|
|
340
|
+
|
|
341
|
+
### Definition eigener CSS Klassen
|
|
325
342
|
|
|
326
343
|
Tailwind CSS gestattet es auch sehr einfach eigene CSS Klassen zu schreiben. Sollte es für eine bestimmte CSS Eigenschaft
|
|
327
344
|
noch keine eigene Utility Klasse geben, kann diese problemlos in der Datei `custom-utilities.css` definiert werden.
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
<div class="sb-main-navigation" x-data="mainNavigationHandler()" x-init="{{#if _useSticky}}start(){{/if}}">
|
|
2
|
-
<header class="print:hidden relative z-
|
|
2
|
+
<header class="print:hidden relative z-110 {{#if _useSticky}}{{#if this.hasOpenSubNavigation}}lg:h-header-lg-big {{else}}lg:h-header-lg-small {{/if}}{{else}}lg:h-auto {{/if}}md:h-header-md h-header-sm">
|
|
3
3
|
<div x-data
|
|
4
4
|
id="headerWrapper"
|
|
5
5
|
@resize.window="resetNav()"
|
|
@@ -13,16 +13,16 @@
|
|
|
13
13
|
</div>
|
|
14
14
|
|
|
15
15
|
<div id="brandNavWrapper"
|
|
16
|
-
class="box-content relative flex items-center justify-center order-1 w-full bg-white border-b border-brandnavigation-border-color z-
|
|
16
|
+
class="box-content relative flex items-center justify-center order-1 w-full bg-white border-b border-brandnavigation-border-color z-110">
|
|
17
17
|
{{> components/site_header/brand_navigation/brand_navigation }}
|
|
18
18
|
</div>
|
|
19
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 border-b border-navigation-border-color bg-navigation-bg z-
|
|
23
|
+
class="relative flex justify-center order-2 w-full transition-all duration-500 ease-in-out border-b border-navigation-border-color bg-navigation-bg z-120">
|
|
24
24
|
<div id="serviceNavMainContainer"
|
|
25
|
-
class="flex w-full h-10 lg:container md:h-12 lg:px-10 lg:h-16 z-
|
|
25
|
+
class="flex w-full h-10 lg:container md:h-12 lg:px-10 lg:h-16 z-110">
|
|
26
26
|
|
|
27
27
|
<span id="serviceNavHeadline" class="hidden print:hidden">Service Navigation</span>
|
|
28
28
|
|
|
@@ -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:border-navigation-border-color [border-image-source:var(--border-navigation-border-image)] [border-image-slice:1] lg:border-b-navigation-border-width 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-navigation-bg z-
|
|
57
|
+
class="flex justify-center order-3 w-full overflow-hidden duration-500 transition-max-height lg:border-navigation-border-color [border-image-source:var(--border-navigation-border-image)] [border-image-slice:1] lg:border-b-navigation-border-width 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-navigation-bg z-100 print:hidden"
|
|
58
58
|
>
|
|
59
59
|
{{> components/site_header/section_navigation/section_navigation }}
|
|
60
60
|
</div>
|
|
@@ -62,7 +62,7 @@
|
|
|
62
62
|
<div x-cloak :class="shouldServiceNavBeHidden() ? 'hidden -mt-40' : ''"
|
|
63
63
|
x-effect="$el.setAttribute('id', 'flyout-' + $store.searchID.current + '-2');$el.setAttribute('aria-expanded', $store.searchFieldOpen);$el.setAttribute('aria-hidden', !$store.searchFieldOpen);$el.setAttribute('aria-labelledby', 'flyout-' + $store.searchID.current + '-1')"
|
|
64
64
|
x-show="$store.searchFieldOpen"
|
|
65
|
-
class="sb-quick-search-flyout flex tablet:w-half-screen tablet:ml-half-screen justify-end order-4 w-full max-w-full p-2 px-5 py-3.5 bg-white drop-shadow-md md:mt-0 z-
|
|
65
|
+
class="sb-quick-search-flyout flex tablet:w-half-screen tablet:ml-half-screen justify-end order-4 w-full max-w-full p-2 px-5 py-3.5 bg-white drop-shadow-md md:mt-0 z-120 lg:hidden print:hidden"
|
|
66
66
|
@search-close.window="$store.searchFieldOpen = false"
|
|
67
67
|
@click.outside="$store.searchFieldOpen = false; $dispatch('search-mobile-click-outside'); dropped = false; toggleScrolling(!$store.serviceNavIsOpensearchFieldOpen && !$store.burgeropen)"
|
|
68
68
|
x-transition:enter="transition ease-out duration-200"
|
|
@@ -85,6 +85,6 @@
|
|
|
85
85
|
/>
|
|
86
86
|
</div>
|
|
87
87
|
<div x-ref="myOverlay">
|
|
88
|
-
<div x-cloak x-data="overlayHandler()" @click.debounce="overlayWasClicked()" x-show="shouldOverlayBeShown()" class="fixed top-0 left-0 w-screen h-screen bg-gray-800 z-
|
|
88
|
+
<div x-cloak x-data="overlayHandler()" @click.debounce="overlayWasClicked()" x-show="shouldOverlayBeShown()" class="fixed top-0 left-0 w-screen h-screen bg-gray-800 z-100 lg:hidden opacity-70"></div>
|
|
89
89
|
</div>
|
|
90
90
|
</div>
|
|
@@ -11,10 +11,10 @@
|
|
|
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-
|
|
15
|
-
{{else}} z-
|
|
16
|
-
{{else}} z-
|
|
17
|
-
{{else}} z-
|
|
14
|
+
isSelectedAndOpen lg:ml-0 z-100 lg:border-b lg:border-primary lg:filter-none lg:left-0 flex justify-center
|
|
15
|
+
{{else}} z-120 lg:left-auto lg:w-auto {{/if}}
|
|
16
|
+
{{else}} z-120 lg:left-auto lg:w-auto divide-y divide-gray-200{{/unless}}
|
|
17
|
+
{{else}} z-120 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 divide-y divide-gray-200 tablet:w-half-screen tablet:ml-half-screen tablet:right-0 tablet:left-auto {{/if}}
|
|
18
18
|
{{~#if this.showAsFlyout}} lg:rounded-b lg:px-4 lg:absolute{{else}} lg:fixed{{/if}}"
|
|
19
19
|
|
|
20
20
|
aria-labelledby="flyout-{{getRandom}}-1"
|
|
@@ -65,7 +65,7 @@
|
|
|
65
65
|
<button
|
|
66
66
|
aria-label='{{loca "search_input_aria_submit" }}'
|
|
67
67
|
type="submit"
|
|
68
|
-
class="pl-3 pr-2 border-l cursor-pointer lg:search-border-desktop lg:rounded-r link-focus-inset bg-primary lg:bg-white text-primary z-
|
|
68
|
+
class="pl-3 pr-2 border-l cursor-pointer lg:search-border-desktop lg:rounded-r link-focus-inset bg-primary lg:bg-white text-primary z-120"
|
|
69
69
|
>
|
|
70
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"
|
|
@@ -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-b border-navigation-border-color sb-service-list transition-margin-top -z-
|
|
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-b border-navigation-border-color sb-service-list transition-margin-top -z-40 md:z-100 md:h-12 top-[41px] bg-navigation-bg 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
|
@@ -35,7 +35,7 @@
|
|
|
35
35
|
<span class="sr-only lg:hidden">{{this.text}}</span>
|
|
36
36
|
</div>
|
|
37
37
|
|
|
38
|
-
<div :class="{'text-primary fill-current': dropped,'text-navigation-icons fill-white': !dropped}" class="relative flex-row items-center justify-center hidden pt-px text-navigation-icons lg:flex z-
|
|
38
|
+
<div :class="{'text-primary fill-current': dropped,'text-navigation-icons fill-white': !dropped}" class="relative flex-row items-center justify-center hidden pt-px text-navigation-icons lg:flex z-120">
|
|
39
39
|
<div class="flex" >
|
|
40
40
|
<span class="flex text-xs leading-4 whitespace-nowrap">
|
|
41
41
|
{{text}}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
{{#if this.commentLink}}
|
|
2
|
-
<span class="relative whitespace-nowrap z-
|
|
2
|
+
<span class="relative whitespace-nowrap z-30">
|
|
3
3
|
{{#> components/base/link _link=this.commentLink.link _css="hover:underline decoration-1" _isAriaHidden=true}}
|
|
4
4
|
{{> components/base/image/icon _icon="kommentar" _iconmap="icons" _addClass="mr-0.5 inline w-5 h-5 text-toplineColor fill-current"}}
|
|
5
5
|
<span class="sr-only">{{loca "comment_anchor_1"}}</span>
|
package/tailwind.config.js
CHANGED
|
@@ -107,18 +107,8 @@ module.exports = {
|
|
|
107
107
|
'0': '0',
|
|
108
108
|
'50': '50',
|
|
109
109
|
'100': '100',
|
|
110
|
-
'
|
|
111
|
-
'
|
|
112
|
-
'103': '103',
|
|
113
|
-
'1000': '1000',
|
|
114
|
-
'1001': '1001',
|
|
115
|
-
'1002': '1002',
|
|
116
|
-
'1003': '1003',
|
|
117
|
-
'9999': '9999',
|
|
118
|
-
'10000': '10000',
|
|
119
|
-
'10001': '10001',
|
|
120
|
-
'10002': '10002',
|
|
121
|
-
'-1000': '-1000',
|
|
110
|
+
'110': '110',
|
|
111
|
+
'120': '120'
|
|
122
112
|
},
|
|
123
113
|
spacing: {
|
|
124
114
|
'9.5': '2.375rem',
|