hr-design-system-handlebars 1.34.1 → 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 +24 -0
- package/dist/assets/index.css +62 -17
- package/dist/views/components/article/components/accordion/accordion.hbs +46 -0
- 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/article/components/accordion/accordion.hbs +46 -0
- 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 +5 -1
- package/src/assets/fixtures/teaser/accordion.json +90 -0
- package/src/stories/conventions-and-datastructure.mdx +18 -1
- package/src/stories/views/components/article/components/accordion/accordion.hbs +46 -0
- package/src/stories/views/components/article/components/accordion/accordion.mdx +26 -0
- package/src/stories/views/components/article/components/accordion/accordion.stories.js +18 -0
- 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/fixtures/accordion.json +1 -0
- package/src/stories/views/components/teaser/podcast/podcast_subscribe_button.hbs +1 -1
- package/tailwind.config.js +3 -12
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,27 @@
|
|
|
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
|
+
|
|
13
|
+
# v1.34.2 (Wed Jul 26 2023)
|
|
14
|
+
|
|
15
|
+
#### 🐛 Bug Fix
|
|
16
|
+
|
|
17
|
+
- add accordion-component [#689](https://github.com/mumprod/hr-design-system-handlebars/pull/689) ([@hanswurstsalat](https://github.com/hanswurstsalat))
|
|
18
|
+
|
|
19
|
+
#### Authors: 1
|
|
20
|
+
|
|
21
|
+
- Geraldo ([@hanswurstsalat](https://github.com/hanswurstsalat))
|
|
22
|
+
|
|
23
|
+
---
|
|
24
|
+
|
|
1
25
|
# v1.34.1 (Tue Jul 25 2023)
|
|
2
26
|
|
|
3
27
|
#### 🐛 Bug Fix
|
package/dist/assets/index.css
CHANGED
|
@@ -578,6 +578,9 @@ video {
|
|
|
578
578
|
.justifyLine.headline-barrier:after {
|
|
579
579
|
padding-top: 0.875rem;
|
|
580
580
|
}
|
|
581
|
+
.max-h-0 {
|
|
582
|
+
max-height: 0;
|
|
583
|
+
}
|
|
581
584
|
/* PODCAST SEEK SLIDER*/
|
|
582
585
|
.seek_slider::-webkit-slider-thumb {
|
|
583
586
|
-webkit-appearance: none;
|
|
@@ -912,7 +915,7 @@ video {
|
|
|
912
915
|
}
|
|
913
916
|
/* ---------------- NAV DROPDOWN - CONTENT ------------------ */
|
|
914
917
|
.content-nav-dropdown_content.-isOpen {
|
|
915
|
-
z-index:
|
|
918
|
+
z-index: 100;
|
|
916
919
|
--tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
|
|
917
920
|
--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
|
|
918
921
|
box-shadow: 0 0 rgba(0,0,0,0), 0 0 rgba(0,0,0,0), var(--tw-shadow);
|
|
@@ -1093,8 +1096,8 @@ video {
|
|
|
1093
1096
|
.top-full {
|
|
1094
1097
|
top: 100%;
|
|
1095
1098
|
}
|
|
1096
|
-
.-z-
|
|
1097
|
-
z-index: -
|
|
1099
|
+
.-z-40 {
|
|
1100
|
+
z-index: -40;
|
|
1098
1101
|
}
|
|
1099
1102
|
.z-10 {
|
|
1100
1103
|
z-index: 10;
|
|
@@ -1102,20 +1105,17 @@ video {
|
|
|
1102
1105
|
.z-100 {
|
|
1103
1106
|
z-index: 100;
|
|
1104
1107
|
}
|
|
1105
|
-
.z-
|
|
1106
|
-
z-index:
|
|
1108
|
+
.z-110 {
|
|
1109
|
+
z-index: 110;
|
|
1107
1110
|
}
|
|
1108
|
-
.z-
|
|
1109
|
-
z-index:
|
|
1110
|
-
}
|
|
1111
|
-
.z-10002 {
|
|
1112
|
-
z-index: 10002;
|
|
1111
|
+
.z-120 {
|
|
1112
|
+
z-index: 120;
|
|
1113
1113
|
}
|
|
1114
1114
|
.z-20 {
|
|
1115
1115
|
z-index: 20;
|
|
1116
1116
|
}
|
|
1117
|
-
.z-
|
|
1118
|
-
z-index:
|
|
1117
|
+
.z-30 {
|
|
1118
|
+
z-index: 30;
|
|
1119
1119
|
}
|
|
1120
1120
|
.order-1 {
|
|
1121
1121
|
order: 1;
|
|
@@ -1270,6 +1270,9 @@ video {
|
|
|
1270
1270
|
.ml-4 {
|
|
1271
1271
|
margin-left: 1rem;
|
|
1272
1272
|
}
|
|
1273
|
+
.ml-5 {
|
|
1274
|
+
margin-left: 1.25rem;
|
|
1275
|
+
}
|
|
1273
1276
|
.ml-auto {
|
|
1274
1277
|
margin-left: auto;
|
|
1275
1278
|
}
|
|
@@ -1399,6 +1402,9 @@ video {
|
|
|
1399
1402
|
.h-3\.5 {
|
|
1400
1403
|
height: 0.875rem;
|
|
1401
1404
|
}
|
|
1405
|
+
.h-36 {
|
|
1406
|
+
height: 9rem;
|
|
1407
|
+
}
|
|
1402
1408
|
.h-4 {
|
|
1403
1409
|
height: 1rem;
|
|
1404
1410
|
}
|
|
@@ -1487,6 +1493,9 @@ video {
|
|
|
1487
1493
|
.w-3\/5 {
|
|
1488
1494
|
width: 60%;
|
|
1489
1495
|
}
|
|
1496
|
+
.w-36 {
|
|
1497
|
+
width: 9rem;
|
|
1498
|
+
}
|
|
1490
1499
|
.w-4 {
|
|
1491
1500
|
width: 1rem;
|
|
1492
1501
|
}
|
|
@@ -1663,6 +1672,12 @@ video {
|
|
|
1663
1672
|
.resize {
|
|
1664
1673
|
resize: both;
|
|
1665
1674
|
}
|
|
1675
|
+
.list-decimal {
|
|
1676
|
+
list-style-type: decimal;
|
|
1677
|
+
}
|
|
1678
|
+
.list-disc {
|
|
1679
|
+
list-style-type: disc;
|
|
1680
|
+
}
|
|
1666
1681
|
.list-none {
|
|
1667
1682
|
list-style-type: none;
|
|
1668
1683
|
}
|
|
@@ -1692,6 +1707,9 @@ video {
|
|
|
1692
1707
|
.content-start {
|
|
1693
1708
|
align-content: flex-start;
|
|
1694
1709
|
}
|
|
1710
|
+
.content-evenly {
|
|
1711
|
+
align-content: space-evenly;
|
|
1712
|
+
}
|
|
1695
1713
|
.items-start {
|
|
1696
1714
|
align-items: flex-start;
|
|
1697
1715
|
}
|
|
@@ -1781,6 +1799,9 @@ video {
|
|
|
1781
1799
|
.self-baseline {
|
|
1782
1800
|
align-self: baseline;
|
|
1783
1801
|
}
|
|
1802
|
+
.justify-self-end {
|
|
1803
|
+
justify-self: end;
|
|
1804
|
+
}
|
|
1784
1805
|
.overflow-hidden {
|
|
1785
1806
|
overflow: hidden;
|
|
1786
1807
|
}
|
|
@@ -1804,6 +1825,9 @@ video {
|
|
|
1804
1825
|
text-overflow: ellipsis;
|
|
1805
1826
|
white-space: nowrap;
|
|
1806
1827
|
}
|
|
1828
|
+
.text-ellipsis {
|
|
1829
|
+
text-overflow: ellipsis;
|
|
1830
|
+
}
|
|
1807
1831
|
.hyphens-auto {
|
|
1808
1832
|
-webkit-hyphens: auto;
|
|
1809
1833
|
hyphens: auto;
|
|
@@ -1944,6 +1968,10 @@ video {
|
|
|
1944
1968
|
--tw-border-opacity: 1;
|
|
1945
1969
|
border-color: rgba(156, 163, 175, var(--tw-border-opacity));
|
|
1946
1970
|
}
|
|
1971
|
+
.border-gray-alto {
|
|
1972
|
+
--tw-border-opacity: 1;
|
|
1973
|
+
border-color: rgba(224, 224, 224, var(--tw-border-opacity));
|
|
1974
|
+
}
|
|
1947
1975
|
.border-navigation-border-color {
|
|
1948
1976
|
border-color: #fff;
|
|
1949
1977
|
border-color: var(--color-navigation-border-color);
|
|
@@ -2485,6 +2513,9 @@ video {
|
|
|
2485
2513
|
font-size: 3rem;
|
|
2486
2514
|
line-height: 1;
|
|
2487
2515
|
}
|
|
2516
|
+
.text-\[40px\] {
|
|
2517
|
+
font-size: 40px;
|
|
2518
|
+
}
|
|
2488
2519
|
.text-base {
|
|
2489
2520
|
font-size: 1rem;
|
|
2490
2521
|
line-height: 1.375rem;
|
|
@@ -2517,6 +2548,9 @@ video {
|
|
|
2517
2548
|
.font-semibold {
|
|
2518
2549
|
font-weight: 600;
|
|
2519
2550
|
}
|
|
2551
|
+
.font-thin {
|
|
2552
|
+
font-weight: 100;
|
|
2553
|
+
}
|
|
2520
2554
|
.font-title {
|
|
2521
2555
|
font-weight: 700;
|
|
2522
2556
|
font-weight: var(--font-weight-title);
|
|
@@ -2890,6 +2924,9 @@ video {
|
|
|
2890
2924
|
.duration-500 {
|
|
2891
2925
|
transition-duration: 500ms;
|
|
2892
2926
|
}
|
|
2927
|
+
.duration-700 {
|
|
2928
|
+
transition-duration: 700ms;
|
|
2929
|
+
}
|
|
2893
2930
|
.ease-in {
|
|
2894
2931
|
transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
|
|
2895
2932
|
}
|
|
@@ -2904,7 +2941,7 @@ video {
|
|
|
2904
2941
|
border-bottom-color: var(--color-secondary-ds);
|
|
2905
2942
|
}
|
|
2906
2943
|
.counter-reset {
|
|
2907
|
-
counter-reset:
|
|
2944
|
+
counter-reset: cnt1690367145667;
|
|
2908
2945
|
}
|
|
2909
2946
|
.hyphens-auto {
|
|
2910
2947
|
-webkit-hyphens: auto;
|
|
@@ -3139,7 +3176,7 @@ video {
|
|
|
3139
3176
|
--tw-ring-color: rgba(255, 255, 255, 0.5);
|
|
3140
3177
|
}
|
|
3141
3178
|
.-ordered {
|
|
3142
|
-
counter-increment:
|
|
3179
|
+
counter-increment: cnt1690367145667 1;
|
|
3143
3180
|
}
|
|
3144
3181
|
.-ordered::before {
|
|
3145
3182
|
position: absolute;
|
|
@@ -3155,7 +3192,7 @@ video {
|
|
|
3155
3192
|
letter-spacing: .0125em;
|
|
3156
3193
|
--tw-text-opacity: 1;
|
|
3157
3194
|
color: rgba(0, 0, 0, var(--tw-text-opacity));
|
|
3158
|
-
content: counter(
|
|
3195
|
+
content: counter(cnt1690367145667);
|
|
3159
3196
|
}
|
|
3160
3197
|
/*! ****************************/
|
|
3161
3198
|
/*! text-shadow */
|
|
@@ -4945,8 +4982,8 @@ video {
|
|
|
4945
4982
|
top: auto;
|
|
4946
4983
|
}
|
|
4947
4984
|
|
|
4948
|
-
.md\:z-
|
|
4949
|
-
z-index:
|
|
4985
|
+
.md\:z-100 {
|
|
4986
|
+
z-index: 100;
|
|
4950
4987
|
}
|
|
4951
4988
|
|
|
4952
4989
|
.md\:order-2 {
|
|
@@ -5086,6 +5123,10 @@ video {
|
|
|
5086
5123
|
height: 2rem;
|
|
5087
5124
|
}
|
|
5088
5125
|
|
|
5126
|
+
.md\:h-88 {
|
|
5127
|
+
height: 22rem;
|
|
5128
|
+
}
|
|
5129
|
+
|
|
5089
5130
|
.md\:h-auto {
|
|
5090
5131
|
height: auto;
|
|
5091
5132
|
}
|
|
@@ -5131,6 +5172,10 @@ video {
|
|
|
5131
5172
|
width: 20rem;
|
|
5132
5173
|
}
|
|
5133
5174
|
|
|
5175
|
+
.md\:w-88 {
|
|
5176
|
+
width: 22rem;
|
|
5177
|
+
}
|
|
5178
|
+
|
|
5134
5179
|
.md\:w-auto {
|
|
5135
5180
|
width: auto;
|
|
5136
5181
|
}
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
<h2 class="mb-5 text-lg font-normal md:text-2xl font-headingSerif">{{this.title}}</h2>
|
|
2
|
+
<div x-data="{selected:0}">
|
|
3
|
+
{{~#with this.copytext }}
|
|
4
|
+
{{#each this.copytextParagraph }}
|
|
5
|
+
{{#if this.isHeadline}}
|
|
6
|
+
<button type="button"
|
|
7
|
+
class="w-full text-left"
|
|
8
|
+
@click="selected !== {{nextRandom}} ? selected = {{getRandom}} : selected = null"
|
|
9
|
+
>
|
|
10
|
+
<div class="flex flex-row justify-between border-t hover:text-toplineColor basis-10/12 content-evenly border-gray-alto">
|
|
11
|
+
<h3 :class="selected !== {{getRandom}} ? 'overflow-hidden whitespace-nowrap text-ellipsis' : ''" class="self-center my-5 text-base font-normal md:text-lg font-headingSerif">{{{this.text}}}</h3>
|
|
12
|
+
<span class="px-5 font-thin text-[40px] justify-self-end" x-text="selected !== {{getRandom}} ? '+' : '-'"></span>
|
|
13
|
+
</div>
|
|
14
|
+
</button>
|
|
15
|
+
{{/if}}
|
|
16
|
+
{{#if this.isParagraph}}
|
|
17
|
+
<div class="relative flex flex-row w-full overflow-hidden transition-all duration-700 max-h-0 {{#if @last}} border-b border-gray-alto{{/if}}"
|
|
18
|
+
style=""
|
|
19
|
+
x-ref="container{{getRandom}}"
|
|
20
|
+
x-bind:style="selected == {{getRandom}} ? 'max-height: ' + $refs.container{{getRandom}}.scrollHeight + 'px' : ''"
|
|
21
|
+
>
|
|
22
|
+
{{~#with this.paragraphBoxItem }}
|
|
23
|
+
{{~#if this.isImage}}
|
|
24
|
+
<figure class="pb-5 pr-5 ar-1-1 w-36 h-36 md:w-88 md:h-88">
|
|
25
|
+
{{~> components/base/image/responsive_image this.Image _type="poster" _variant="50" _addClassImg="" ~}}
|
|
26
|
+
</figure>
|
|
27
|
+
{{/if}}
|
|
28
|
+
{{/with}}
|
|
29
|
+
<div>
|
|
30
|
+
{{#each this.text.split}}
|
|
31
|
+
{{#if this.isText}}
|
|
32
|
+
<p class="pb-5 text-base md:text-lg">{{{this.text}}}</p>
|
|
33
|
+
{{/if}}
|
|
34
|
+
{{#if this.isUl}}
|
|
35
|
+
<ul class="pb-5 ml-5 text-base list-disc md:text-lg">{{{this.text}}}</ul>
|
|
36
|
+
{{/if}}
|
|
37
|
+
{{#if this.isOl}}
|
|
38
|
+
<ol class="pb-5 ml-5 text-base list-decimal md:text-lg">{{{this.text}}}</ol>
|
|
39
|
+
{{/if}}
|
|
40
|
+
{{/each}}
|
|
41
|
+
</div>
|
|
42
|
+
</div>
|
|
43
|
+
{{/if}}
|
|
44
|
+
{{/each}}
|
|
45
|
+
{{/with}}
|
|
46
|
+
</div>
|
|
@@ -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>
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
<h2 class="mb-5 text-lg font-normal md:text-2xl font-headingSerif">{{this.title}}</h2>
|
|
2
|
+
<div x-data="{selected:0}">
|
|
3
|
+
{{~#with this.copytext }}
|
|
4
|
+
{{#each this.copytextParagraph }}
|
|
5
|
+
{{#if this.isHeadline}}
|
|
6
|
+
<button type="button"
|
|
7
|
+
class="w-full text-left"
|
|
8
|
+
@click="selected !== {{nextRandom}} ? selected = {{getRandom}} : selected = null"
|
|
9
|
+
>
|
|
10
|
+
<div class="flex flex-row justify-between border-t hover:text-toplineColor basis-10/12 content-evenly border-gray-alto">
|
|
11
|
+
<h3 :class="selected !== {{getRandom}} ? 'overflow-hidden whitespace-nowrap text-ellipsis' : ''" class="self-center my-5 text-base font-normal md:text-lg font-headingSerif">{{{this.text}}}</h3>
|
|
12
|
+
<span class="px-5 font-thin text-[40px] justify-self-end" x-text="selected !== {{getRandom}} ? '+' : '-'"></span>
|
|
13
|
+
</div>
|
|
14
|
+
</button>
|
|
15
|
+
{{/if}}
|
|
16
|
+
{{#if this.isParagraph}}
|
|
17
|
+
<div class="relative flex flex-row w-full overflow-hidden transition-all duration-700 max-h-0 {{#if @last}} border-b border-gray-alto{{/if}}"
|
|
18
|
+
style=""
|
|
19
|
+
x-ref="container{{getRandom}}"
|
|
20
|
+
x-bind:style="selected == {{getRandom}} ? 'max-height: ' + $refs.container{{getRandom}}.scrollHeight + 'px' : ''"
|
|
21
|
+
>
|
|
22
|
+
{{~#with this.paragraphBoxItem }}
|
|
23
|
+
{{~#if this.isImage}}
|
|
24
|
+
<figure class="pb-5 pr-5 ar-1-1 w-36 h-36 md:w-88 md:h-88">
|
|
25
|
+
{{~> components/base/image/responsive_image this.Image _type="poster" _variant="50" _addClassImg="" ~}}
|
|
26
|
+
</figure>
|
|
27
|
+
{{/if}}
|
|
28
|
+
{{/with}}
|
|
29
|
+
<div>
|
|
30
|
+
{{#each this.text.split}}
|
|
31
|
+
{{#if this.isText}}
|
|
32
|
+
<p class="pb-5 text-base md:text-lg">{{{this.text}}}</p>
|
|
33
|
+
{{/if}}
|
|
34
|
+
{{#if this.isUl}}
|
|
35
|
+
<ul class="pb-5 ml-5 text-base list-disc md:text-lg">{{{this.text}}}</ul>
|
|
36
|
+
{{/if}}
|
|
37
|
+
{{#if this.isOl}}
|
|
38
|
+
<ol class="pb-5 ml-5 text-base list-decimal md:text-lg">{{{this.text}}}</ol>
|
|
39
|
+
{{/if}}
|
|
40
|
+
{{/each}}
|
|
41
|
+
</div>
|
|
42
|
+
</div>
|
|
43
|
+
{{/if}}
|
|
44
|
+
{{/each}}
|
|
45
|
+
{{/with}}
|
|
46
|
+
</div>
|
|
@@ -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",
|
|
@@ -50,6 +50,10 @@
|
|
|
50
50
|
@apply pt-3.5;
|
|
51
51
|
}
|
|
52
52
|
|
|
53
|
+
.max-h-0 {
|
|
54
|
+
max-height: 0;
|
|
55
|
+
}
|
|
56
|
+
|
|
53
57
|
/* PODCAST SEEK SLIDER*/
|
|
54
58
|
.seek_slider::-webkit-slider-thumb {
|
|
55
59
|
-webkit-appearance: none;
|
|
@@ -245,7 +249,7 @@
|
|
|
245
249
|
}
|
|
246
250
|
/* ---------------- NAV DROPDOWN - CONTENT ------------------ */
|
|
247
251
|
.content-nav-dropdown_content.-isOpen {
|
|
248
|
-
@apply z-
|
|
252
|
+
@apply z-100;
|
|
249
253
|
@apply shadow-lg;
|
|
250
254
|
}
|
|
251
255
|
|
|
@@ -0,0 +1,90 @@
|
|
|
1
|
+
{
|
|
2
|
+
"title": "Akkordeon Titel",
|
|
3
|
+
"copytext": {
|
|
4
|
+
"copytextParagraph": [
|
|
5
|
+
{
|
|
6
|
+
"isHeadline": true,
|
|
7
|
+
"text": "Das ist der erste Eintrag (mit einer ziemlich langen Headline, die so lang ist, dass sie umbricht)"
|
|
8
|
+
},
|
|
9
|
+
{
|
|
10
|
+
"paragraphBoxItem": {
|
|
11
|
+
"isImage": true,
|
|
12
|
+
"Image": {
|
|
13
|
+
"@->jsoninclude": "teaser/teaser_images.inc.json",
|
|
14
|
+
"@->contentpath": "teaser_poster_50",
|
|
15
|
+
"@->replaceToken": [
|
|
16
|
+
{
|
|
17
|
+
"@->token": "image",
|
|
18
|
+
"@->value": "hasebe-kane-102"
|
|
19
|
+
}
|
|
20
|
+
]
|
|
21
|
+
}
|
|
22
|
+
},
|
|
23
|
+
"isParagraph": true,
|
|
24
|
+
"text": {
|
|
25
|
+
"split": [
|
|
26
|
+
{
|
|
27
|
+
"isText": true,
|
|
28
|
+
"text": "Auch gibt es niemanden, der den Schmerz an sich liebt, sucht oder wünscht, nur, weil er Schmerz ist, es sei denn, es kommt zu zufälligen Umständen, in denen Mühen und Schmerz ihm große Freude bereiten können. Um ein triviales Beispiel zu nehmen, wer von uns unterzieht sich je anstrengender körperlicher Betätigung, außer um Vorteile daraus zu ziehen?"
|
|
29
|
+
},
|
|
30
|
+
{
|
|
31
|
+
"isUl": true,
|
|
32
|
+
"text": "<li>Auch gibt es niemanden,</li><li>der den Schmerz an sich liebt</li>"
|
|
33
|
+
},
|
|
34
|
+
{
|
|
35
|
+
"isOl": true,
|
|
36
|
+
"text": "<li>Auch gibt es niemanden,</li><li>der den Schmerz an sich liebt,<li>sucht oder wünscht,</li><li>nur, weil er Schmerz ist</li>"
|
|
37
|
+
}
|
|
38
|
+
]
|
|
39
|
+
}
|
|
40
|
+
},
|
|
41
|
+
{
|
|
42
|
+
"isHeadline": true,
|
|
43
|
+
"text": "Das ist der zweite Eintrag"
|
|
44
|
+
},
|
|
45
|
+
{
|
|
46
|
+
"paragraphBoxItem": {
|
|
47
|
+
"isImage": true,
|
|
48
|
+
"Image": {
|
|
49
|
+
"@->jsoninclude": "teaser/teaser_images.inc.json",
|
|
50
|
+
"@->contentpath": "teaser_poster_50",
|
|
51
|
+
"@->replaceToken": [
|
|
52
|
+
{
|
|
53
|
+
"@->token": "image",
|
|
54
|
+
"@->value": "buchmesse-fahnen-102"
|
|
55
|
+
}
|
|
56
|
+
]
|
|
57
|
+
}
|
|
58
|
+
},
|
|
59
|
+
"isParagraph": true,
|
|
60
|
+
"text": {
|
|
61
|
+
"split": [
|
|
62
|
+
{
|
|
63
|
+
"isText": true,
|
|
64
|
+
"text": "Auch gibt es niemanden, der den Schmerz an sich liebt, sucht oder wünscht, nur, weil er Schmerz ist, es sei denn, es kommt zu zufälligen Umständen, in denen Mühen und Schmerz ihm große Freude bereiten können. Um ein triviales Beispiel zu nehmen, wer von uns unterzieht sich je anstrengender körperlicher Betätigung, außer um Vorteile daraus zu ziehen?"
|
|
65
|
+
}
|
|
66
|
+
]
|
|
67
|
+
}
|
|
68
|
+
},
|
|
69
|
+
{
|
|
70
|
+
"isHeadline": true,
|
|
71
|
+
"text": "Das ist der dritte Eintrag"
|
|
72
|
+
},
|
|
73
|
+
{
|
|
74
|
+
"isParagraph": true,
|
|
75
|
+
"text": {
|
|
76
|
+
"split": [
|
|
77
|
+
{
|
|
78
|
+
"isText": true,
|
|
79
|
+
"text": "Auch gibt es niemanden, der den Schmerz an sich liebt, sucht oder wünscht, nur, weil er Schmerz ist, es sei denn, es kommt zu zufälligen Umständen, in denen Mühen und Schmerz ihm große Freude bereiten können. Um ein triviales Beispiel zu nehmen, wer von uns unterzieht sich je anstrengender körperlicher Betätigung, außer um Vorteile daraus zu ziehen?"
|
|
80
|
+
},
|
|
81
|
+
{
|
|
82
|
+
"isUl": true,
|
|
83
|
+
"text": "<li>Auch gibt es niemanden,</li><li>der den Schmerz an sich liebt</li>"
|
|
84
|
+
}
|
|
85
|
+
]
|
|
86
|
+
}
|
|
87
|
+
}
|
|
88
|
+
]
|
|
89
|
+
}
|
|
90
|
+
}
|
|
@@ -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.
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
<h2 class="mb-5 text-lg font-normal md:text-2xl font-headingSerif">{{this.title}}</h2>
|
|
2
|
+
<div x-data="{selected:0}">
|
|
3
|
+
{{~#with this.copytext }}
|
|
4
|
+
{{#each this.copytextParagraph }}
|
|
5
|
+
{{#if this.isHeadline}}
|
|
6
|
+
<button type="button"
|
|
7
|
+
class="w-full text-left"
|
|
8
|
+
@click="selected !== {{nextRandom}} ? selected = {{getRandom}} : selected = null"
|
|
9
|
+
>
|
|
10
|
+
<div class="flex flex-row justify-between border-t hover:text-toplineColor basis-10/12 content-evenly border-gray-alto">
|
|
11
|
+
<h3 :class="selected !== {{getRandom}} ? 'overflow-hidden whitespace-nowrap text-ellipsis' : ''" class="self-center my-5 text-base font-normal md:text-lg font-headingSerif">{{{this.text}}}</h3>
|
|
12
|
+
<span class="px-5 font-thin text-[40px] justify-self-end" x-text="selected !== {{getRandom}} ? '+' : '-'"></span>
|
|
13
|
+
</div>
|
|
14
|
+
</button>
|
|
15
|
+
{{/if}}
|
|
16
|
+
{{#if this.isParagraph}}
|
|
17
|
+
<div class="relative flex flex-row w-full overflow-hidden transition-all duration-700 max-h-0 {{#if @last}} border-b border-gray-alto{{/if}}"
|
|
18
|
+
style=""
|
|
19
|
+
x-ref="container{{getRandom}}"
|
|
20
|
+
x-bind:style="selected == {{getRandom}} ? 'max-height: ' + $refs.container{{getRandom}}.scrollHeight + 'px' : ''"
|
|
21
|
+
>
|
|
22
|
+
{{~#with this.paragraphBoxItem }}
|
|
23
|
+
{{~#if this.isImage}}
|
|
24
|
+
<figure class="pb-5 pr-5 ar-1-1 w-36 h-36 md:w-88 md:h-88">
|
|
25
|
+
{{~> components/base/image/responsive_image this.Image _type="poster" _variant="50" _addClassImg="" ~}}
|
|
26
|
+
</figure>
|
|
27
|
+
{{/if}}
|
|
28
|
+
{{/with}}
|
|
29
|
+
<div>
|
|
30
|
+
{{#each this.text.split}}
|
|
31
|
+
{{#if this.isText}}
|
|
32
|
+
<p class="pb-5 text-base md:text-lg">{{{this.text}}}</p>
|
|
33
|
+
{{/if}}
|
|
34
|
+
{{#if this.isUl}}
|
|
35
|
+
<ul class="pb-5 ml-5 text-base list-disc md:text-lg">{{{this.text}}}</ul>
|
|
36
|
+
{{/if}}
|
|
37
|
+
{{#if this.isOl}}
|
|
38
|
+
<ol class="pb-5 ml-5 text-base list-decimal md:text-lg">{{{this.text}}}</ol>
|
|
39
|
+
{{/if}}
|
|
40
|
+
{{/each}}
|
|
41
|
+
</div>
|
|
42
|
+
</div>
|
|
43
|
+
{{/if}}
|
|
44
|
+
{{/each}}
|
|
45
|
+
{{/with}}
|
|
46
|
+
</div>
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import { ArgsTable, Meta, Story, Canvas } from '@storybook/blocks'
|
|
2
|
+
import * as AccordionStories from './accordion.stories'
|
|
3
|
+
|
|
4
|
+
<Meta of={AccordionStories} />
|
|
5
|
+
|
|
6
|
+
# Akkordeon
|
|
7
|
+
|
|
8
|
+
## Beschreibung
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
## Parameter
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
<ArgsTable story="default" />
|
|
15
|
+
|
|
16
|
+
## Verwendung
|
|
17
|
+
|
|
18
|
+
Die Akkordeon-Komponente wird in handlebars wie folgt eingebaut:
|
|
19
|
+
|
|
20
|
+
```html
|
|
21
|
+
{{> components/article/components/accordion/accordion }}
|
|
22
|
+
```
|
|
23
|
+
|
|
24
|
+
<Canvas withToolbar>
|
|
25
|
+
<Story of={AccordionStories.Default} />
|
|
26
|
+
</Canvas>
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import accordion from './accordion.hbs'
|
|
2
|
+
import accordionJson from '../../../teaser/fixtures/accordion.json'
|
|
3
|
+
|
|
4
|
+
const Template = ({ ...args }) => {
|
|
5
|
+
// You can either use a function to create DOM elements or use a plain html string!
|
|
6
|
+
// return `<span>${topline}</span>`;
|
|
7
|
+
return accordion({ ...args })
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
export default {
|
|
11
|
+
title: 'Komponenten/Artikel/Komponenten/Akkordeon',
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
export const Default = {
|
|
15
|
+
render: Template.bind({}),
|
|
16
|
+
name: 'default',
|
|
17
|
+
args: accordionJson,
|
|
18
|
+
}
|
|
@@ -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>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"title":"Akkordeon Titel","copytext":{"copytextParagraph":[{"isHeadline":true,"text":"Das ist der erste Eintrag (mit einer ziemlich langen Headline, die so lang ist, dass sie umbricht)"},{"paragraphBoxItem":{"isImage":true,"Image":{"copyrightWithLinks":"","responsiveImage":{"asPicture":false,"asImage":true,"fallback":"images/hasebe-kane-102_v-1to1__medium.jpg","sources":[{"sizes":"(min-width: 768px) 460px, (min-width: 640px) calc(100vw - 8.5rem), calc(100vw - 2.5rem)","srcset":"images/hasebe-kane-102_v-1to1__small.jpg 380w, images/hasebe-kane-102_v-1to1__medium.jpg 480w, images/hasebe-kane-102_v-1to1.jpg 720w, images/hasebe-kane-102_v-1to1__large.jpg 960w"}]}}},"isParagraph":true,"text":{"split":[{"isText":true,"text":"Auch gibt es niemanden, der den Schmerz an sich liebt, sucht oder wünscht, nur, weil er Schmerz ist, es sei denn, es kommt zu zufälligen Umständen, in denen Mühen und Schmerz ihm große Freude bereiten können. Um ein triviales Beispiel zu nehmen, wer von uns unterzieht sich je anstrengender körperlicher Betätigung, außer um Vorteile daraus zu ziehen?"},{"isUl":true,"text":"<li>Auch gibt es niemanden,</li><li>der den Schmerz an sich liebt</li>"},{"isOl":true,"text":"<li>Auch gibt es niemanden,</li><li>der den Schmerz an sich liebt,<li>sucht oder wünscht,</li><li>nur, weil er Schmerz ist</li>"}]}},{"isHeadline":true,"text":"Das ist der zweite Eintrag"},{"paragraphBoxItem":{"isImage":true,"Image":{"copyrightWithLinks":"","responsiveImage":{"asPicture":false,"asImage":true,"fallback":"images/buchmesse-fahnen-102_v-1to1__medium.jpg","sources":[{"sizes":"(min-width: 768px) 460px, (min-width: 640px) calc(100vw - 8.5rem), calc(100vw - 2.5rem)","srcset":"images/buchmesse-fahnen-102_v-1to1__small.jpg 380w, images/buchmesse-fahnen-102_v-1to1__medium.jpg 480w, images/buchmesse-fahnen-102_v-1to1.jpg 720w, images/buchmesse-fahnen-102_v-1to1__large.jpg 960w"}]}}},"isParagraph":true,"text":{"split":[{"isText":true,"text":"Auch gibt es niemanden, der den Schmerz an sich liebt, sucht oder wünscht, nur, weil er Schmerz ist, es sei denn, es kommt zu zufälligen Umständen, in denen Mühen und Schmerz ihm große Freude bereiten können. Um ein triviales Beispiel zu nehmen, wer von uns unterzieht sich je anstrengender körperlicher Betätigung, außer um Vorteile daraus zu ziehen?"}]}},{"isHeadline":true,"text":"Das ist der dritte Eintrag"},{"isParagraph":true,"text":{"split":[{"isText":true,"text":"Auch gibt es niemanden, der den Schmerz an sich liebt, sucht oder wünscht, nur, weil er Schmerz ist, es sei denn, es kommt zu zufälligen Umständen, in denen Mühen und Schmerz ihm große Freude bereiten können. Um ein triviales Beispiel zu nehmen, wer von uns unterzieht sich je anstrengender körperlicher Betätigung, außer um Vorteile daraus zu ziehen?"},{"isUl":true,"text":"<li>Auch gibt es niemanden,</li><li>der den Schmerz an sich liebt</li>"}]}}]}}
|
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',
|
|
@@ -148,6 +138,7 @@ module.exports = {
|
|
|
148
138
|
'35': '8.75rem',
|
|
149
139
|
'42': '10.5rem',
|
|
150
140
|
'45': '11.25rem',
|
|
141
|
+
'88': '22rem',
|
|
151
142
|
'header-lg-small': '8.8125rem',
|
|
152
143
|
'header-lg-big': '11.0625rem',
|
|
153
144
|
'header-md': '5.5625rem',
|