hr-design-system-handlebars 1.105.1 → 1.106.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/.storybook/preview-head.html +1 -1
- package/CHANGELOG.md +24 -0
- package/dist/assets/index.css +417 -453
- package/dist/views/components/button/utilities/button_variation_classes.hbs +1 -1
- package/dist/views/components/teaser/tabbox/group_tabbox.hbs +1 -1
- package/dist/views_static/components/button/utilities/button_variation_classes.hbs +1 -1
- package/dist/views_static/components/teaser/tabbox/group_tabbox.hbs +1 -1
- package/package.json +1 -4
- package/src/assets/css/custom-utilities.css +27 -31
- package/src/stories/views/components/button/utilities/button_variation_classes.hbs +1 -1
- package/src/stories/views/components/teaser/tabbox/group_tabbox.hbs +1 -1
- package/tailwind.config.js +21 -45
|
@@ -23,7 +23,7 @@
|
|
|
23
23
|
{{~inline-switch
|
|
24
24
|
_variant
|
|
25
25
|
'["primary","secondary","tertiary","icon-button"]'
|
|
26
|
-
'[" 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-
|
|
26
|
+
'[" 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-inverted--dark"," border bg-transparent border-transparent text-button hover:bg-button-inverted hover:border-button active:bg-button-inverted--dark"," border bg-transparent border-transparent text-button active:bg-button-inverted--dark"," border text-button-inverted bg-button border-button hover:bg-button--dark hover:border-button--dark active:bg-button--dark "]'
|
|
27
27
|
~}}
|
|
28
28
|
{{/if}}
|
|
29
29
|
{{/if}}
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
x-show="tab === '{{this.groupTitle}}'"
|
|
3
3
|
class="pb-10"
|
|
4
4
|
>
|
|
5
|
-
<div class="grid items-start content-start grid-cols-12 px-0 sm:px-10
|
|
5
|
+
<div class="grid items-start content-start grid-cols-12 px-0 sm:px-10 gap-x-6 gap-y-6">
|
|
6
6
|
{{~> components/teaser/teaser_logic/teaser_logic ~}}
|
|
7
7
|
</div>
|
|
8
8
|
{{~#if this.link~}}
|
|
@@ -23,7 +23,7 @@
|
|
|
23
23
|
{{~inline-switch
|
|
24
24
|
_variant
|
|
25
25
|
'["primary","secondary","tertiary","icon-button"]'
|
|
26
|
-
'[" 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-
|
|
26
|
+
'[" 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-inverted--dark"," border bg-transparent border-transparent text-button hover:bg-button-inverted hover:border-button active:bg-button-inverted--dark"," border bg-transparent border-transparent text-button active:bg-button-inverted--dark"," border text-button-inverted bg-button border-button hover:bg-button--dark hover:border-button--dark active:bg-button--dark "]'
|
|
27
27
|
~}}
|
|
28
28
|
{{/if}}
|
|
29
29
|
{{/if}}
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
x-show="tab === '{{this.groupTitle}}'"
|
|
3
3
|
class="pb-10"
|
|
4
4
|
>
|
|
5
|
-
<div class="grid items-start content-start grid-cols-12 px-0 sm:px-10
|
|
5
|
+
<div class="grid items-start content-start grid-cols-12 px-0 sm:px-10 gap-x-6 gap-y-6">
|
|
6
6
|
{{~> components/teaser/teaser_logic/teaser_logic ~}}
|
|
7
7
|
</div>
|
|
8
8
|
{{~#if this.link~}}
|
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.106.0",
|
|
10
10
|
"scripts": {
|
|
11
11
|
"test": "echo \"Error: no test specified\" && exit 1",
|
|
12
12
|
"storybook": "storybook dev -p 6006 public",
|
|
@@ -105,8 +105,6 @@
|
|
|
105
105
|
"storybook-conditional-toolbar-selector": "^1.0.3",
|
|
106
106
|
"style-loader": "^4.0.0",
|
|
107
107
|
"tailwindcss": "^3.0.23",
|
|
108
|
-
"tailwindcss-hyphens": "^0.1.0",
|
|
109
|
-
"tailwindcss-important": "^1.0.0",
|
|
110
108
|
"typescript": "^5.0.4",
|
|
111
109
|
"underscore": "^1.13.2",
|
|
112
110
|
"zepto-modules": "^1.0.1"
|
|
@@ -116,7 +114,6 @@
|
|
|
116
114
|
"@alpinejs/anchor": "^3.13.3",
|
|
117
115
|
"@alpinejs/collapse": "^3.8.1",
|
|
118
116
|
"@alpinejs/intersect": "^3.13.3",
|
|
119
|
-
"@tailwindcss/line-clamp": "^0.4.2",
|
|
120
117
|
"a11y-dialog": "^8.0.4",
|
|
121
118
|
"alpinejs": "^3.14.1",
|
|
122
119
|
"async-alpine": "^1.0.0",
|
|
@@ -405,31 +405,28 @@
|
|
|
405
405
|
content: attr(data-prop-loading);
|
|
406
406
|
}
|
|
407
407
|
|
|
408
|
-
|
|
409
|
-
|
|
410
|
-
|
|
411
|
-
|
|
412
|
-
|
|
413
|
-
|
|
414
|
-
|
|
415
|
-
|
|
416
|
-
|
|
417
|
-
|
|
418
|
-
|
|
419
|
-
padding-bottom: var(--logo-padding-bottom);
|
|
420
|
-
}
|
|
408
|
+
.brand-logo-size-lg {
|
|
409
|
+
padding-top: var(--logo-padding-top-lg);
|
|
410
|
+
padding-bottom: var(--logo-padding-bottom-lg);
|
|
411
|
+
}
|
|
412
|
+
.brand-logo-size-md {
|
|
413
|
+
padding-top: var(--logo-padding-top-md);
|
|
414
|
+
padding-bottom: var(--logo-padding-bottom-md);
|
|
415
|
+
}
|
|
416
|
+
.brand-logo-size {
|
|
417
|
+
padding-top: var(--logo-padding-top);
|
|
418
|
+
padding-bottom: var(--logo-padding-bottom);
|
|
421
419
|
}
|
|
422
420
|
|
|
423
421
|
/*! ****************************/
|
|
424
422
|
/*! Search-Box-border */
|
|
425
423
|
/*! ****************************/
|
|
426
|
-
|
|
427
|
-
|
|
428
|
-
|
|
429
|
-
|
|
430
|
-
|
|
431
|
-
|
|
432
|
-
}
|
|
424
|
+
|
|
425
|
+
.search-border-mobile {
|
|
426
|
+
border-color: var(--search-border-color-mobile);
|
|
427
|
+
}
|
|
428
|
+
.search-border-desktop {
|
|
429
|
+
border-color: var(--search-border-color-desktop);
|
|
433
430
|
}
|
|
434
431
|
|
|
435
432
|
/*! ***********************************/
|
|
@@ -450,15 +447,15 @@
|
|
|
450
447
|
/*! FORMULAR SELECT */
|
|
451
448
|
/*! ****************************/
|
|
452
449
|
/* Custom CSS to style the label when the first empty option is selected */
|
|
453
|
-
select:has(option:checked:not([value=
|
|
454
|
-
@apply top-px scale-75 translate-y-0
|
|
450
|
+
select:has(option:checked:not([value=''])) + label {
|
|
451
|
+
@apply top-px scale-75 translate-y-0;
|
|
455
452
|
}
|
|
456
453
|
|
|
457
|
-
select:has(option:checked[value=
|
|
458
|
-
@apply text-transparent
|
|
454
|
+
select:has(option:checked[value='']) {
|
|
455
|
+
@apply text-transparent;
|
|
459
456
|
}
|
|
460
457
|
|
|
461
|
-
input[type=
|
|
458
|
+
input[type='checkbox']:checked::after {
|
|
462
459
|
position: absolute;
|
|
463
460
|
content: '';
|
|
464
461
|
width: 15px;
|
|
@@ -472,10 +469,10 @@
|
|
|
472
469
|
transform: rotate(-45deg);
|
|
473
470
|
}
|
|
474
471
|
|
|
475
|
-
input[type=
|
|
472
|
+
input[type='radio']::after {
|
|
476
473
|
content: '';
|
|
477
474
|
position: absolute;
|
|
478
|
-
width: 16px;
|
|
475
|
+
width: 16px;
|
|
479
476
|
height: 16px;
|
|
480
477
|
top: 50%;
|
|
481
478
|
left: 50%;
|
|
@@ -483,9 +480,8 @@
|
|
|
483
480
|
background-color: var(--color-primary-ds);
|
|
484
481
|
border-radius: 50%;
|
|
485
482
|
}
|
|
486
|
-
|
|
487
|
-
input[type=
|
|
488
|
-
transform: translate(-50%, -50%) scale(1);
|
|
483
|
+
|
|
484
|
+
input[type='radio']:checked::after {
|
|
485
|
+
transform: translate(-50%, -50%) scale(1);
|
|
489
486
|
}
|
|
490
|
-
|
|
491
487
|
}
|
|
@@ -23,7 +23,7 @@
|
|
|
23
23
|
{{~inline-switch
|
|
24
24
|
_variant
|
|
25
25
|
'["primary","secondary","tertiary","icon-button"]'
|
|
26
|
-
'[" 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-
|
|
26
|
+
'[" 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-inverted--dark"," border bg-transparent border-transparent text-button hover:bg-button-inverted hover:border-button active:bg-button-inverted--dark"," border bg-transparent border-transparent text-button active:bg-button-inverted--dark"," border text-button-inverted bg-button border-button hover:bg-button--dark hover:border-button--dark active:bg-button--dark "]'
|
|
27
27
|
~}}
|
|
28
28
|
{{/if}}
|
|
29
29
|
{{/if}}
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
x-show="tab === '{{this.groupTitle}}'"
|
|
3
3
|
class="pb-10"
|
|
4
4
|
>
|
|
5
|
-
<div class="grid items-start content-start grid-cols-12 px-0 sm:px-10
|
|
5
|
+
<div class="grid items-start content-start grid-cols-12 px-0 sm:px-10 gap-x-6 gap-y-6">
|
|
6
6
|
{{~> components/teaser/teaser_logic/teaser_logic ~}}
|
|
7
7
|
</div>
|
|
8
8
|
{{~#if this.link~}}
|
package/tailwind.config.js
CHANGED
|
@@ -4,8 +4,7 @@ const flattenColorPalette = require('tailwindcss/lib/util/flattenColorPalette').
|
|
|
4
4
|
/** @type {import('tailwindcss').Config} */
|
|
5
5
|
module.exports = {
|
|
6
6
|
// workaround damit darkmode nur in der Webview in Delivery funktioniert
|
|
7
|
-
darkMode:
|
|
8
|
-
|
|
7
|
+
darkMode: 'selector',
|
|
9
8
|
experimental: {
|
|
10
9
|
optimizeUniversalDefaults: true,
|
|
11
10
|
},
|
|
@@ -44,15 +43,15 @@ module.exports = {
|
|
|
44
43
|
},
|
|
45
44
|
|
|
46
45
|
extend: {
|
|
47
|
-
animation:{
|
|
46
|
+
animation: {
|
|
48
47
|
'shake': 'shake 0.82s cubic-bezier(.36,.07,.19,.97) both',
|
|
49
48
|
},
|
|
50
49
|
keyframes: {
|
|
51
|
-
'shake'
|
|
50
|
+
'shake': {
|
|
52
51
|
'10%, 90%': {
|
|
53
52
|
transform: 'translate3d(-1px, 0, 0)'
|
|
54
53
|
},
|
|
55
|
-
'20%, 80%'
|
|
54
|
+
'20%, 80%': {
|
|
56
55
|
transform: 'translate3d(2px, 0, 0)'
|
|
57
56
|
},
|
|
58
57
|
'30%, 50%, 70%': {
|
|
@@ -121,13 +120,6 @@ module.exports = {
|
|
|
121
120
|
2000: '2000ms',
|
|
122
121
|
},
|
|
123
122
|
padding: {
|
|
124
|
-
'1.5': '0.375rem',
|
|
125
|
-
'2.5': '0.625rem',
|
|
126
|
-
'5.5': '1.3125rem',
|
|
127
|
-
'6.5': '1.625rem',
|
|
128
|
-
'7.5': '1.875rem',
|
|
129
|
-
'11.5': '2.875rem',
|
|
130
|
-
'13': '3.25rem',
|
|
131
123
|
'3/4': '75%',
|
|
132
124
|
'logo-padding-top': 'var(--logo-padding-top)',
|
|
133
125
|
'logo-padding-bottom': 'var(--logo-padding-bottom)',
|
|
@@ -147,21 +139,31 @@ module.exports = {
|
|
|
147
139
|
'300': '300'
|
|
148
140
|
},
|
|
149
141
|
spacing: {
|
|
142
|
+
'4.5': '1.125rem',
|
|
143
|
+
'5.5': '1.375rem',
|
|
144
|
+
'6.5': '1.625rem',
|
|
145
|
+
'7.5': '1.875rem',
|
|
150
146
|
'9.5': '2.375rem',
|
|
151
|
-
'
|
|
152
|
-
'
|
|
153
|
-
'stage': '56%',
|
|
154
|
-
'full-hd': '120rem',
|
|
155
|
-
'feature-box-height': 'var(--feature-box-height)'
|
|
156
|
-
},
|
|
157
|
-
width: {
|
|
147
|
+
'11.5': '2.875rem',
|
|
148
|
+
'13': '3.25rem',
|
|
158
149
|
'18': '4.5rem',
|
|
150
|
+
'22': '5.5rem',
|
|
151
|
+
'26': '6.5rem',
|
|
159
152
|
'30': '7.5rem',
|
|
153
|
+
'35': '8.75rem',
|
|
160
154
|
'42': '10.5rem',
|
|
155
|
+
'45': '11.25rem',
|
|
161
156
|
'46': '11.5rem',
|
|
162
157
|
'70': '17.5rem',
|
|
163
158
|
'88': '22rem',
|
|
164
159
|
'92': '23rem',
|
|
160
|
+
'135': '33.75rem',
|
|
161
|
+
'240': '60rem',
|
|
162
|
+
'stage': '56%',
|
|
163
|
+
'full-hd': '120rem',
|
|
164
|
+
'feature-box-height': 'var(--feature-box-height)'
|
|
165
|
+
},
|
|
166
|
+
width: {
|
|
165
167
|
'half-screen': '50vw',
|
|
166
168
|
'15/12': '120%',
|
|
167
169
|
'footer-logo': 'var(--width-footer-logo)',
|
|
@@ -169,13 +171,6 @@ module.exports = {
|
|
|
169
171
|
'footer-logo-lg': 'var(--width-footer-logo-lg)',
|
|
170
172
|
},
|
|
171
173
|
height: {
|
|
172
|
-
'18': '4.5rem',
|
|
173
|
-
'22': '5.5rem',
|
|
174
|
-
'30': '7.5rem',
|
|
175
|
-
'35': '8.75rem',
|
|
176
|
-
'42': '10.5rem',
|
|
177
|
-
'45': '11.25rem',
|
|
178
|
-
'88': '22rem',
|
|
179
174
|
'header-lg-small': '8.8125rem',
|
|
180
175
|
'header-lg-big': '11.0625rem',
|
|
181
176
|
'header-md': '5.125rem',
|
|
@@ -187,9 +182,6 @@ module.exports = {
|
|
|
187
182
|
maxHeight: {
|
|
188
183
|
stage: '34.3125rem',
|
|
189
184
|
},
|
|
190
|
-
minHeight: {
|
|
191
|
-
12: '3rem',
|
|
192
|
-
},
|
|
193
185
|
maxWidth: {
|
|
194
186
|
'1/4': '25%',
|
|
195
187
|
'1/3': '33.33333333%',
|
|
@@ -200,20 +192,7 @@ module.exports = {
|
|
|
200
192
|
'1/1': '100%',
|
|
201
193
|
'main-col': '63rem',
|
|
202
194
|
},
|
|
203
|
-
minWidth: {
|
|
204
|
-
7: '1.75rem',
|
|
205
|
-
10: '2.5rem',
|
|
206
|
-
11: '2.75rem',
|
|
207
|
-
},
|
|
208
195
|
margin: {
|
|
209
|
-
'4.5': '1.125rem',
|
|
210
|
-
'5.5': '1.375rem',
|
|
211
|
-
'6.5': '1.625rem',
|
|
212
|
-
'7.5': '1.875rem',
|
|
213
|
-
'13': '3.125rem',
|
|
214
|
-
'26': '6.5rem',
|
|
215
|
-
'30': '7.5rem',
|
|
216
|
-
'240': '60rem',
|
|
217
196
|
'half-screen': '50vw',
|
|
218
197
|
},
|
|
219
198
|
inset: {
|
|
@@ -453,7 +432,6 @@ module.exports = {
|
|
|
453
432
|
},
|
|
454
433
|
},
|
|
455
434
|
plugins: [
|
|
456
|
-
require('tailwindcss-important')(),
|
|
457
435
|
// plugin to separate border colors, found here: https://github.com/tailwindlabs/tailwindcss/pull/560
|
|
458
436
|
({ addUtilities, e, theme, variants }) => {
|
|
459
437
|
const colors = flattenColorPalette(theme('borderColor'))
|
|
@@ -470,7 +448,5 @@ module.exports = {
|
|
|
470
448
|
addUtilities(utilities, variants('borderColor'))
|
|
471
449
|
},
|
|
472
450
|
require('tailwindcss-counter')(),
|
|
473
|
-
require('@tailwindcss/line-clamp'),
|
|
474
|
-
require('tailwindcss-hyphens'),
|
|
475
451
|
],
|
|
476
452
|
}
|