hr-design-system-handlebars 0.36.2 → 0.37.2
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/main.js +52 -3
- package/.storybook/preview.js +6 -4
- package/CHANGELOG.md +39 -0
- package/dist/assets/index.css +162 -9
- package/dist/views/components/Grid/Grid.hbs +156 -0
- package/dist/views/components/Grid/GridGroup.hbs +3 -0
- package/dist/views/components/Grid/GridGroupFull.hbs +9 -0
- package/dist/views/components/Grid/GridGroupTabbed.hbs +5 -0
- package/dist/views/components/Grid/GridItem.hbs +3 -0
- package/dist/views/components/Header/ServiceNavigation/ServiceList.hbs +1 -1
- package/package.json +9 -9
- package/src/assets/tailwind.css +69 -25
- package/src/stories/views/components/Grid/Grid.hbs +156 -0
- package/src/stories/views/components/Grid/Grid.stories.mdx +33 -0
- package/src/stories/views/components/Grid/GridGroup.hbs +3 -0
- package/src/stories/views/components/Grid/GridGroupFull.hbs +9 -0
- package/src/stories/views/components/Grid/GridGroupTabbed.hbs +5 -0
- package/src/stories/views/components/Grid/GridItem.hbs +3 -0
- package/src/stories/views/components/Header/ServiceNavigation/ServiceList.hbs +1 -1
package/.storybook/main.js
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
const path = require('path')
|
|
2
|
+
const fs = require('fs')
|
|
2
3
|
const FlatContextPlugin = require('../build/webpack/feature-loader/plugin/FlatContextPlugin')
|
|
3
4
|
|
|
4
5
|
module.exports = {
|
|
@@ -11,7 +12,14 @@ module.exports = {
|
|
|
11
12
|
addons: [
|
|
12
13
|
'@storybook/addon-links',
|
|
13
14
|
'@storybook/addon-essentials',
|
|
14
|
-
|
|
15
|
+
{
|
|
16
|
+
name: '@storybook/addon-postcss',
|
|
17
|
+
options: {
|
|
18
|
+
postcssLoaderOptions: {
|
|
19
|
+
implementation: require('postcss'),
|
|
20
|
+
},
|
|
21
|
+
},
|
|
22
|
+
},
|
|
15
23
|
'@whitespace/storybook-addon-html',
|
|
16
24
|
'@storybook/addon-a11y',
|
|
17
25
|
'storybook-conditional-toolbar-selector',
|
|
@@ -26,6 +34,7 @@ module.exports = {
|
|
|
26
34
|
config.resolve.alias = {
|
|
27
35
|
...config.resolve.alias,
|
|
28
36
|
components: path.resolve(__dirname, '../src/stories/views/components'),
|
|
37
|
+
tailwind$: path.resolve(__dirname, '../src/assets/tailwind.css'),
|
|
29
38
|
hrQueryNew$: path.resolve(
|
|
30
39
|
__dirname,
|
|
31
40
|
'../src/stories/views/components/generic/hrQueryNew.js'
|
|
@@ -39,12 +48,13 @@ module.exports = {
|
|
|
39
48
|
'../build/webpack/feature-loader/initializer/loader.js'
|
|
40
49
|
),
|
|
41
50
|
}
|
|
51
|
+
|
|
42
52
|
config.module.rules.push(
|
|
43
53
|
{
|
|
44
54
|
test: /\.handlebars|hbs$/,
|
|
45
55
|
loader: 'handlebars-loader',
|
|
46
56
|
include: path.resolve(__dirname, '../'),
|
|
47
|
-
|
|
57
|
+
options: {
|
|
48
58
|
helperDirs: [path.resolve(__dirname, '../build/helpers')],
|
|
49
59
|
partialDirs: [path.resolve(__dirname, '../src/stories/views')],
|
|
50
60
|
},
|
|
@@ -69,7 +79,46 @@ module.exports = {
|
|
|
69
79
|
'/feature',
|
|
70
80
|
path.resolve(__dirname, '../src/stories/views/'),
|
|
71
81
|
/\.feature\.js$/
|
|
72
|
-
)
|
|
82
|
+
),
|
|
83
|
+
{
|
|
84
|
+
apply: (compiler) => {
|
|
85
|
+
compiler.hooks.afterCompile.tap('UpdateTailwindPlugin', (compilation) => {
|
|
86
|
+
if (
|
|
87
|
+
undefined != compilation.compiler.watchFileSystem &&
|
|
88
|
+
Object.keys(compilation.compiler.watchFileSystem.watcher.mtimes)
|
|
89
|
+
.length > 0
|
|
90
|
+
) {
|
|
91
|
+
if (
|
|
92
|
+
!Object.keys(
|
|
93
|
+
compilation.compiler.watchFileSystem.watcher.mtimes
|
|
94
|
+
).some((value) => value.includes('tailwind.css'))
|
|
95
|
+
) {
|
|
96
|
+
fs.readFile(
|
|
97
|
+
path.resolve(__dirname, '../src/assets/tailwind.css'),
|
|
98
|
+
'utf8',
|
|
99
|
+
(err, data) => {
|
|
100
|
+
if (err) {
|
|
101
|
+
console.error(err)
|
|
102
|
+
return
|
|
103
|
+
}
|
|
104
|
+
fs.writeFile(
|
|
105
|
+
path.resolve(__dirname, '../src/assets/tailwind.css'),
|
|
106
|
+
data,
|
|
107
|
+
(err) => {
|
|
108
|
+
if (err) {
|
|
109
|
+
console.error(err)
|
|
110
|
+
return
|
|
111
|
+
}
|
|
112
|
+
//file written successfully
|
|
113
|
+
}
|
|
114
|
+
)
|
|
115
|
+
}
|
|
116
|
+
)
|
|
117
|
+
}
|
|
118
|
+
}
|
|
119
|
+
})
|
|
120
|
+
},
|
|
121
|
+
}
|
|
73
122
|
)
|
|
74
123
|
|
|
75
124
|
config.stats = 'verbose'
|
package/.storybook/preview.js
CHANGED
|
@@ -1,9 +1,10 @@
|
|
|
1
|
-
import '
|
|
1
|
+
import '!style-loader!css-loader!postcss-loader!tailwind'
|
|
2
|
+
import 'tailwind'
|
|
2
3
|
|
|
3
4
|
import hrDesignsystemDark from './HRDesignsystemDark'
|
|
4
5
|
import hrDesignsystemLight from './HRDesignsystemLight'
|
|
5
6
|
import { withThemeDecorator } from './withThemeDecorator'
|
|
6
|
-
import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport'
|
|
7
|
+
import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport'
|
|
7
8
|
|
|
8
9
|
import Initializer from '../build/webpack/feature-loader/initializer/initializer'
|
|
9
10
|
import loadFeature from '../build/webpack/feature-loader/initializer/loader'
|
|
@@ -22,9 +23,10 @@ if (process.env.NODE_ENV !== 'production') {
|
|
|
22
23
|
}
|
|
23
24
|
|
|
24
25
|
export const parameters = {
|
|
26
|
+
//layout: 'fullscreen',
|
|
25
27
|
viewport: {
|
|
26
28
|
viewports: INITIAL_VIEWPORTS,
|
|
27
|
-
|
|
29
|
+
},
|
|
28
30
|
backgrounds: {
|
|
29
31
|
default: 'white',
|
|
30
32
|
values: [
|
|
@@ -43,7 +45,7 @@ export const parameters = {
|
|
|
43
45
|
cellAmount: 8,
|
|
44
46
|
offsetX: 0, // default is 0 if story has 'fullscreen' layout, 16 if layout is 'padded'
|
|
45
47
|
offsetY: 0, // default is 0 if story has 'fullscreen' layout, 16 if layout is 'padded'
|
|
46
|
-
|
|
48
|
+
},
|
|
47
49
|
},
|
|
48
50
|
// Storybook a11y addon configuration
|
|
49
51
|
a11y: {
|
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,42 @@
|
|
|
1
|
+
# v0.37.2 (Wed Mar 16 2022)
|
|
2
|
+
|
|
3
|
+
#### 🐛 Bug Fix
|
|
4
|
+
|
|
5
|
+
- Adding Animation to ServiceList [#186](https://github.com/mumprod/hr-design-system-handlebars/pull/186) (zouhair1 [@selbaciri](https://github.com/selbaciri))
|
|
6
|
+
|
|
7
|
+
#### Authors: 2
|
|
8
|
+
|
|
9
|
+
- Saad El Baciri ([@selbaciri](https://github.com/selbaciri))
|
|
10
|
+
- selbaciri (zouhair1)
|
|
11
|
+
|
|
12
|
+
---
|
|
13
|
+
|
|
14
|
+
# v0.37.1 (Mon Mar 14 2022)
|
|
15
|
+
|
|
16
|
+
#### 🐛 Bug Fix
|
|
17
|
+
|
|
18
|
+
- DPE-1487 Grid [#183](https://github.com/mumprod/hr-design-system-handlebars/pull/183) ([@vascoeduardo](https://github.com/vascoeduardo))
|
|
19
|
+
- FEATURE: adds webpackplugin that always saves [#185](https://github.com/mumprod/hr-design-system-handlebars/pull/185) ([@szuelch](https://github.com/szuelch))
|
|
20
|
+
|
|
21
|
+
#### Authors: 2
|
|
22
|
+
|
|
23
|
+
- [@szuelch](https://github.com/szuelch)
|
|
24
|
+
- Vasco ([@vascoeduardo](https://github.com/vascoeduardo))
|
|
25
|
+
|
|
26
|
+
---
|
|
27
|
+
|
|
28
|
+
# v0.37.0 (Wed Mar 09 2022)
|
|
29
|
+
|
|
30
|
+
#### 🚀 Enhancement
|
|
31
|
+
|
|
32
|
+
- Build/tailwind [#184](https://github.com/mumprod/hr-design-system-handlebars/pull/184) ([@szuelch](https://github.com/szuelch))
|
|
33
|
+
|
|
34
|
+
#### Authors: 1
|
|
35
|
+
|
|
36
|
+
- [@szuelch](https://github.com/szuelch)
|
|
37
|
+
|
|
38
|
+
---
|
|
39
|
+
|
|
1
40
|
# v0.36.2 (Wed Mar 09 2022)
|
|
2
41
|
|
|
3
42
|
#### 🐛 Bug Fix
|
package/dist/assets/index.css
CHANGED
|
@@ -316,7 +316,7 @@
|
|
|
316
316
|
|
|
317
317
|
/*! purgecss end ignore */
|
|
318
318
|
|
|
319
|
-
/*! tailwindcss v3.0.
|
|
319
|
+
/*! tailwindcss v3.0.23 | MIT License | https://tailwindcss.com */
|
|
320
320
|
|
|
321
321
|
/*
|
|
322
322
|
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
|
|
@@ -755,6 +755,45 @@ Ensure the default browser behavior of the `hidden` attribute.
|
|
|
755
755
|
font-stretch: condensed;
|
|
756
756
|
}
|
|
757
757
|
|
|
758
|
+
.grid-page {
|
|
759
|
+
grid-template-columns:
|
|
760
|
+
[full-start] minmax(1rem, 1fr)
|
|
761
|
+
[main-start] minmax(0, 64rem) [main-end]
|
|
762
|
+
minmax(1rem, 1fr) [full-end];
|
|
763
|
+
}
|
|
764
|
+
|
|
765
|
+
.col-full {
|
|
766
|
+
grid-column: full;
|
|
767
|
+
}
|
|
768
|
+
|
|
769
|
+
.headline--separator {
|
|
770
|
+
display: -webkit-box;
|
|
771
|
+
display: -ms-flexbox;
|
|
772
|
+
display: flex;
|
|
773
|
+
width: 100%;
|
|
774
|
+
-webkit-box-pack: center;
|
|
775
|
+
-ms-flex-pack: center;
|
|
776
|
+
justify-content: center;
|
|
777
|
+
-webkit-box-align: center;
|
|
778
|
+
-ms-flex-align: center;
|
|
779
|
+
align-items: center;
|
|
780
|
+
text-align: center;
|
|
781
|
+
}
|
|
782
|
+
|
|
783
|
+
.headline--separator:before,
|
|
784
|
+
.headline--separator:after {
|
|
785
|
+
content: '';
|
|
786
|
+
border-top: 1px solid;
|
|
787
|
+
margin: 3px 20px 0 0;
|
|
788
|
+
-webkit-box-flex: 1;
|
|
789
|
+
-ms-flex: 1 0 20px;
|
|
790
|
+
flex: 1 0 20px;
|
|
791
|
+
}
|
|
792
|
+
|
|
793
|
+
.headline--separator:after {
|
|
794
|
+
margin: 3px 0 0 20px;
|
|
795
|
+
}
|
|
796
|
+
|
|
758
797
|
@media (min-width: 1024px) {
|
|
759
798
|
.-currentBrand::before {
|
|
760
799
|
content: var(--tw-content);
|
|
@@ -1283,7 +1322,9 @@ Ensure the default browser behavior of the `hidden` attribute.
|
|
|
1283
1322
|
max-width: 1024px;
|
|
1284
1323
|
}
|
|
1285
1324
|
}
|
|
1286
|
-
[x-cloak] {
|
|
1325
|
+
[x-cloak] {
|
|
1326
|
+
display: none !important;
|
|
1327
|
+
}
|
|
1287
1328
|
.btn {
|
|
1288
1329
|
display: inline-block;
|
|
1289
1330
|
cursor: pointer;
|
|
@@ -1415,9 +1456,19 @@ Ensure the default browser behavior of the `hidden` attribute.
|
|
|
1415
1456
|
-ms-flex-order: 4;
|
|
1416
1457
|
order: 4;
|
|
1417
1458
|
}
|
|
1459
|
+
.col-span-full {
|
|
1460
|
+
grid-column: 1 / -1;
|
|
1461
|
+
}
|
|
1462
|
+
.col-span-12 {
|
|
1463
|
+
grid-column: span 12 / span 12;
|
|
1464
|
+
}
|
|
1418
1465
|
.\!m-0 {
|
|
1419
1466
|
margin: 0px !important;
|
|
1420
1467
|
}
|
|
1468
|
+
.mx-4 {
|
|
1469
|
+
margin-left: 1rem;
|
|
1470
|
+
margin-right: 1rem;
|
|
1471
|
+
}
|
|
1421
1472
|
.mx-2 {
|
|
1422
1473
|
margin-left: 0.5rem;
|
|
1423
1474
|
margin-right: 0.5rem;
|
|
@@ -1492,9 +1543,15 @@ Ensure the default browser behavior of the `hidden` attribute.
|
|
|
1492
1543
|
.table {
|
|
1493
1544
|
display: table;
|
|
1494
1545
|
}
|
|
1546
|
+
.grid {
|
|
1547
|
+
display: grid;
|
|
1548
|
+
}
|
|
1495
1549
|
.hidden {
|
|
1496
1550
|
display: none;
|
|
1497
1551
|
}
|
|
1552
|
+
.aspect-video {
|
|
1553
|
+
aspect-ratio: 16 / 9;
|
|
1554
|
+
}
|
|
1498
1555
|
.h-full {
|
|
1499
1556
|
height: 100%;
|
|
1500
1557
|
}
|
|
@@ -1671,6 +1728,9 @@ Ensure the default browser behavior of the `hidden` attribute.
|
|
|
1671
1728
|
-moz-appearance: none;
|
|
1672
1729
|
appearance: none;
|
|
1673
1730
|
}
|
|
1731
|
+
.grid-cols-12 {
|
|
1732
|
+
grid-template-columns: repeat(12, minmax(0, 1fr));
|
|
1733
|
+
}
|
|
1674
1734
|
.flex-row {
|
|
1675
1735
|
-webkit-box-orient: horizontal;
|
|
1676
1736
|
-webkit-box-direction: normal;
|
|
@@ -1729,6 +1789,17 @@ Ensure the default browser behavior of the `hidden` attribute.
|
|
|
1729
1789
|
-ms-flex-pack: distribute;
|
|
1730
1790
|
justify-content: space-around;
|
|
1731
1791
|
}
|
|
1792
|
+
.gap-x-6 {
|
|
1793
|
+
-webkit-column-gap: 1.5rem;
|
|
1794
|
+
-moz-column-gap: 1.5rem;
|
|
1795
|
+
column-gap: 1.5rem;
|
|
1796
|
+
}
|
|
1797
|
+
.gap-y-6 {
|
|
1798
|
+
row-gap: 1.5rem;
|
|
1799
|
+
}
|
|
1800
|
+
.gap-y-9 {
|
|
1801
|
+
row-gap: 2.25rem;
|
|
1802
|
+
}
|
|
1732
1803
|
.divide-y > :not([hidden]) ~ :not([hidden]) {
|
|
1733
1804
|
--tw-divide-y-reverse: 0;
|
|
1734
1805
|
border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
|
|
@@ -1781,6 +1852,12 @@ Ensure the default browser behavior of the `hidden` attribute.
|
|
|
1781
1852
|
border-top-right-radius: 0.25rem;
|
|
1782
1853
|
border-bottom-right-radius: 0.25rem;
|
|
1783
1854
|
}
|
|
1855
|
+
.rounded-tl-3xl {
|
|
1856
|
+
border-top-left-radius: 1.5rem;
|
|
1857
|
+
}
|
|
1858
|
+
.rounded-br-3xl {
|
|
1859
|
+
border-bottom-right-radius: 1.5rem;
|
|
1860
|
+
}
|
|
1784
1861
|
.border {
|
|
1785
1862
|
border-width: 1px;
|
|
1786
1863
|
}
|
|
@@ -1850,6 +1927,30 @@ Ensure the default browser behavior of the `hidden` attribute.
|
|
|
1850
1927
|
background-color: #d34600;
|
|
1851
1928
|
background-color: var(--color-label-live);
|
|
1852
1929
|
}
|
|
1930
|
+
.bg-gray-100 {
|
|
1931
|
+
--tw-bg-opacity: 1;
|
|
1932
|
+
background-color: rgba(243, 244, 246, var(--tw-bg-opacity));
|
|
1933
|
+
}
|
|
1934
|
+
.bg-green-300 {
|
|
1935
|
+
--tw-bg-opacity: 1;
|
|
1936
|
+
background-color: rgba(134, 239, 172, var(--tw-bg-opacity));
|
|
1937
|
+
}
|
|
1938
|
+
.bg-gray-500 {
|
|
1939
|
+
--tw-bg-opacity: 1;
|
|
1940
|
+
background-color: rgba(107, 114, 128, var(--tw-bg-opacity));
|
|
1941
|
+
}
|
|
1942
|
+
.bg-red-400 {
|
|
1943
|
+
--tw-bg-opacity: 1;
|
|
1944
|
+
background-color: rgba(248, 113, 113, var(--tw-bg-opacity));
|
|
1945
|
+
}
|
|
1946
|
+
.bg-blue-200 {
|
|
1947
|
+
--tw-bg-opacity: 1;
|
|
1948
|
+
background-color: rgba(191, 219, 254, var(--tw-bg-opacity));
|
|
1949
|
+
}
|
|
1950
|
+
.bg-blue-400 {
|
|
1951
|
+
--tw-bg-opacity: 1;
|
|
1952
|
+
background-color: rgba(96, 165, 250, var(--tw-bg-opacity));
|
|
1953
|
+
}
|
|
1853
1954
|
.bg-current {
|
|
1854
1955
|
background-color: currentColor;
|
|
1855
1956
|
}
|
|
@@ -1892,6 +1993,18 @@ Ensure the default browser behavior of the `hidden` attribute.
|
|
|
1892
1993
|
padding-left: 0.5rem;
|
|
1893
1994
|
padding-right: 0.5rem;
|
|
1894
1995
|
}
|
|
1996
|
+
.py-6 {
|
|
1997
|
+
padding-top: 1.5rem;
|
|
1998
|
+
padding-bottom: 1.5rem;
|
|
1999
|
+
}
|
|
2000
|
+
.px-8 {
|
|
2001
|
+
padding-left: 2rem;
|
|
2002
|
+
padding-right: 2rem;
|
|
2003
|
+
}
|
|
2004
|
+
.py-8 {
|
|
2005
|
+
padding-top: 2rem;
|
|
2006
|
+
padding-bottom: 2rem;
|
|
2007
|
+
}
|
|
1895
2008
|
.px-5 {
|
|
1896
2009
|
padding-left: 1.25rem;
|
|
1897
2010
|
padding-right: 1.25rem;
|
|
@@ -2021,6 +2134,10 @@ Ensure the default browser behavior of the `hidden` attribute.
|
|
|
2021
2134
|
font-size: 2.25rem;
|
|
2022
2135
|
line-height: 2.5rem;
|
|
2023
2136
|
}
|
|
2137
|
+
.text-5xl {
|
|
2138
|
+
font-size: 3rem;
|
|
2139
|
+
line-height: 1;
|
|
2140
|
+
}
|
|
2024
2141
|
.font-normal {
|
|
2025
2142
|
font-weight: 400;
|
|
2026
2143
|
}
|
|
@@ -2181,6 +2298,14 @@ Ensure the default browser behavior of the `hidden` attribute.
|
|
|
2181
2298
|
-webkit-transition-duration: 150ms;
|
|
2182
2299
|
transition-duration: 150ms;
|
|
2183
2300
|
}
|
|
2301
|
+
.transition-margin-top {
|
|
2302
|
+
-webkit-transition-property: margin-top;
|
|
2303
|
+
transition-property: margin-top;
|
|
2304
|
+
-webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
2305
|
+
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
2306
|
+
-webkit-transition-duration: 150ms;
|
|
2307
|
+
transition-duration: 150ms;
|
|
2308
|
+
}
|
|
2184
2309
|
.delay-200 {
|
|
2185
2310
|
-webkit-transition-delay: 200ms;
|
|
2186
2311
|
transition-delay: 200ms;
|
|
@@ -2236,14 +2361,14 @@ Ensure the default browser behavior of the `hidden` attribute.
|
|
|
2236
2361
|
|
|
2237
2362
|
.hide-scroll-bar {
|
|
2238
2363
|
-ms-overflow-style: none;
|
|
2239
|
-
|
|
2240
|
-
|
|
2241
|
-
|
|
2364
|
+
scrollbar-width: none;
|
|
2365
|
+
scroll-behavior: smooth;
|
|
2366
|
+
}
|
|
2242
2367
|
.hide-scroll-bar::-webkit-scrollbar {
|
|
2243
2368
|
display: none;
|
|
2244
|
-
|
|
2369
|
+
}
|
|
2245
2370
|
|
|
2246
|
-
.arrow-left-background{
|
|
2371
|
+
.arrow-left-background {
|
|
2247
2372
|
background: -webkit-gradient(linear, right top, left top, from(rgba(255, 255, 255, 0)), color-stop(50%, rgb(255, 255, 255)));
|
|
2248
2373
|
background: linear-gradient(to left, rgba(255, 255, 255, 0), rgb(255, 255, 255) 50%);
|
|
2249
2374
|
-webkit-transition: -webkit-transform 150ms ease-in-out 0s;
|
|
@@ -2251,7 +2376,7 @@ Ensure the default browser behavior of the `hidden` attribute.
|
|
|
2251
2376
|
transition: transform 150ms ease-in-out 0s;
|
|
2252
2377
|
transition: transform 150ms ease-in-out 0s, -webkit-transform 150ms ease-in-out 0s;
|
|
2253
2378
|
}
|
|
2254
|
-
.arrow-right-background{
|
|
2379
|
+
.arrow-right-background {
|
|
2255
2380
|
background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), color-stop(50%, rgb(255, 255, 255)));
|
|
2256
2381
|
background: linear-gradient(to right, rgba(255, 255, 255, 0), rgb(255, 255, 255) 50%);
|
|
2257
2382
|
-webkit-transition: -webkit-transform 150ms ease-in-out 0s;
|
|
@@ -2317,6 +2442,22 @@ Ensure the default browser behavior of the `hidden` attribute.
|
|
|
2317
2442
|
display: none;
|
|
2318
2443
|
}
|
|
2319
2444
|
}
|
|
2445
|
+
@media (min-width: 640px) {
|
|
2446
|
+
|
|
2447
|
+
.sm\:col-main {
|
|
2448
|
+
grid-column: main;
|
|
2449
|
+
}
|
|
2450
|
+
|
|
2451
|
+
.sm\:mx-0 {
|
|
2452
|
+
margin-left: 0px;
|
|
2453
|
+
margin-right: 0px;
|
|
2454
|
+
}
|
|
2455
|
+
|
|
2456
|
+
.sm\:px-8 {
|
|
2457
|
+
padding-left: 2rem;
|
|
2458
|
+
padding-right: 2rem;
|
|
2459
|
+
}
|
|
2460
|
+
}
|
|
2320
2461
|
@media (min-width: 768px) {
|
|
2321
2462
|
.md\:static {
|
|
2322
2463
|
position: static;
|
|
@@ -2346,6 +2487,18 @@ Ensure the default browser behavior of the `hidden` attribute.
|
|
|
2346
2487
|
-ms-flex-order: 4;
|
|
2347
2488
|
order: 4;
|
|
2348
2489
|
}
|
|
2490
|
+
.md\:col-span-8 {
|
|
2491
|
+
grid-column: span 8 / span 8;
|
|
2492
|
+
}
|
|
2493
|
+
.md\:col-span-6 {
|
|
2494
|
+
grid-column: span 6 / span 6;
|
|
2495
|
+
}
|
|
2496
|
+
.md\:col-span-4 {
|
|
2497
|
+
grid-column: span 4 / span 4;
|
|
2498
|
+
}
|
|
2499
|
+
.md\:col-span-3 {
|
|
2500
|
+
grid-column: span 3 / span 3;
|
|
2501
|
+
}
|
|
2349
2502
|
.md\:mt-0 {
|
|
2350
2503
|
margin-top: 0px;
|
|
2351
2504
|
}
|
|
@@ -2806,4 +2959,4 @@ Ensure the default browser behavior of the `hidden` attribute.
|
|
|
2806
2959
|
.tablet\:first\:border-l:first-child {
|
|
2807
2960
|
border-left-width: 1px;
|
|
2808
2961
|
}
|
|
2809
|
-
}
|
|
2962
|
+
}
|
|
@@ -0,0 +1,156 @@
|
|
|
1
|
+
|
|
2
|
+
<div class="grid bg-gray-100 grid-page">
|
|
3
|
+
<div class="grid grid-cols-12 py-6 bg-green-300 sm:px-8 col-full sm:col-main gap-x-6 gap-y-6">
|
|
4
|
+
{{#>components/Grid/GridGroup size="100"}}
|
|
5
|
+
<h2 class="text-4xl headline--separator col-span-full">Gruppen 100%</h2>
|
|
6
|
+
{{#>components/Grid/GridItem size="12"}}
|
|
7
|
+
<a href="#">
|
|
8
|
+
<div class="flex items-center justify-center text-5xl text-white bg-gray-500 aspect-video">
|
|
9
|
+
12/12 = 100%
|
|
10
|
+
</div>
|
|
11
|
+
</a>
|
|
12
|
+
{{/components/Grid/GridItem}}
|
|
13
|
+
{{/components/Grid/GridGroup}}
|
|
14
|
+
{{#>components/Grid/GridGroupFull }}
|
|
15
|
+
<h2 class="text-4xl headline--separator col-span-full">Gruppen 100% mit blauen Hintergrung bis Rand</h2>
|
|
16
|
+
{{#>components/Grid/GridItem size="6"}}
|
|
17
|
+
<div class="flex items-center justify-center text-5xl text-white bg-gray-500 aspect-video">
|
|
18
|
+
6/12 = 50%
|
|
19
|
+
</div>
|
|
20
|
+
{{/components/Grid/GridItem}}
|
|
21
|
+
{{#>components/Grid/GridItem size="6"}}
|
|
22
|
+
<div class="flex items-center justify-center text-5xl text-white bg-gray-500 aspect-video">
|
|
23
|
+
6/12 = 50%
|
|
24
|
+
</div>
|
|
25
|
+
{{/components/Grid/GridItem}}
|
|
26
|
+
{{/components/Grid/GridGroupFull}}
|
|
27
|
+
|
|
28
|
+
{{#>components/Grid/GridGroup size="100"}}
|
|
29
|
+
|
|
30
|
+
<h2 class="text-4xl headline--separator col-span-full">Gruppen 100%</h2>
|
|
31
|
+
{{#>components/Grid/GridItem size="6"}}
|
|
32
|
+
<div class="flex items-center justify-center text-5xl text-white bg-gray-500 aspect-video">
|
|
33
|
+
6/12 = 50%
|
|
34
|
+
</div>
|
|
35
|
+
{{/components/Grid/GridItem}}
|
|
36
|
+
{{#>components/Grid/GridItem size="6"}}
|
|
37
|
+
<div class="flex items-center justify-center text-5xl text-white bg-gray-500 aspect-video">
|
|
38
|
+
6/12 = 50%
|
|
39
|
+
</div>
|
|
40
|
+
{{/components/Grid/GridItem}}
|
|
41
|
+
|
|
42
|
+
{{#>components/Grid/GridItem size="4"}}
|
|
43
|
+
<div class="flex items-center justify-center text-5xl text-white bg-gray-500 aspect-video">
|
|
44
|
+
4/12 = 33%
|
|
45
|
+
</div>
|
|
46
|
+
{{/components/Grid/GridItem}}
|
|
47
|
+
{{#>components/Grid/GridItem size="4"}}
|
|
48
|
+
<div class="flex items-center justify-center text-5xl text-white bg-gray-500 aspect-video">
|
|
49
|
+
4/12 = 33%
|
|
50
|
+
</div>
|
|
51
|
+
{{/components/Grid/GridItem}}
|
|
52
|
+
{{#>components/Grid/GridItem size="4"}}
|
|
53
|
+
<div class="flex items-center justify-center text-5xl text-white bg-gray-500 aspect-video">
|
|
54
|
+
4/12 = 33%
|
|
55
|
+
</div>
|
|
56
|
+
{{/components/Grid/GridItem}}
|
|
57
|
+
{{/components/Grid/GridGroup}}
|
|
58
|
+
{{#>components/Grid/GridGroupTabbed }}
|
|
59
|
+
<h2 class="text-4xl headline--separator col-span-full">Gruppen 100% Tabbed</h2>
|
|
60
|
+
{{#>components/Grid/GridItem size="3"}}
|
|
61
|
+
<div class="flex items-center justify-center text-4xl text-white bg-gray-500 aspect-video">
|
|
62
|
+
3/12 = 25%
|
|
63
|
+
</div>
|
|
64
|
+
{{/components/Grid/GridItem}}
|
|
65
|
+
|
|
66
|
+
{{#>components/Grid/GridItem size="3"}}
|
|
67
|
+
<div class="flex items-center justify-center text-4xl text-white bg-gray-500 aspect-video">
|
|
68
|
+
3/12 = 25%
|
|
69
|
+
</div>
|
|
70
|
+
{{/components/Grid/GridItem}}
|
|
71
|
+
|
|
72
|
+
{{#>components/Grid/GridItem size="3"}}
|
|
73
|
+
<div class="flex items-center justify-center text-4xl text-white bg-gray-500 aspect-video">
|
|
74
|
+
3/12 = 25%
|
|
75
|
+
</div>
|
|
76
|
+
{{/components/Grid/GridItem}}
|
|
77
|
+
|
|
78
|
+
{{#>components/Grid/GridItem size="3"}}
|
|
79
|
+
<div class="flex items-center justify-center text-4xl text-white bg-gray-500 aspect-video">
|
|
80
|
+
3/12 = 25%
|
|
81
|
+
</div>
|
|
82
|
+
{{/components/Grid/GridItem}}
|
|
83
|
+
|
|
84
|
+
{{/components/Grid/GridGroupTabbed}}
|
|
85
|
+
{{#>components/Grid/GridGroup}}
|
|
86
|
+
<h2 class="text-4xl headline--separator col-span-full">Gruppen 100%</h2>
|
|
87
|
+
{{#>components/Grid/GridItem size="4"}}
|
|
88
|
+
<div class="flex items-center justify-center text-5xl text-white bg-gray-500 aspect-video">
|
|
89
|
+
4/12 = 33%
|
|
90
|
+
</div>
|
|
91
|
+
{{/components/Grid/GridItem}}
|
|
92
|
+
{{#>components/Grid/GridItem size="4"}}
|
|
93
|
+
<div class="flex items-center justify-center text-5xl text-white bg-gray-500 aspect-video">
|
|
94
|
+
4/12 = 33%
|
|
95
|
+
</div>
|
|
96
|
+
{{/components/Grid/GridItem}}
|
|
97
|
+
{{#>components/Grid/GridItem size="4"}}
|
|
98
|
+
<div class="flex items-center justify-center text-5xl text-white bg-gray-500 aspect-video">
|
|
99
|
+
4/12 = 33%
|
|
100
|
+
</div>
|
|
101
|
+
{{/components/Grid/GridItem}}
|
|
102
|
+
{{/components/Grid/GridGroup}}
|
|
103
|
+
{{#>components/Grid/GridGroup size="50"}}
|
|
104
|
+
<h2 class="text-4xl headline--separator col-span-full">Gruppen 50%</h2>
|
|
105
|
+
{{#>components/Grid/GridItem size="12"}}
|
|
106
|
+
<div class="flex items-center justify-center text-5xl text-white bg-gray-500 aspect-video">
|
|
107
|
+
6/12 = 50%
|
|
108
|
+
</div>
|
|
109
|
+
{{/components/Grid/GridItem}}
|
|
110
|
+
{{#>components/Grid/GridItem size="12"}}
|
|
111
|
+
<div class="flex items-center justify-center text-5xl text-white bg-gray-500 aspect-video">
|
|
112
|
+
6/12 = 50%
|
|
113
|
+
</div>
|
|
114
|
+
{{/components/Grid/GridItem}}
|
|
115
|
+
{{/components/Grid/GridGroup}}
|
|
116
|
+
{{#>components/Grid/GridGroup size="50"}}
|
|
117
|
+
<h2 class="text-4xl headline--separator col-span-full">Gruppen 50%</h2>
|
|
118
|
+
{{#>components/Grid/GridItem size="6"}}
|
|
119
|
+
<div class="flex items-center justify-center text-5xl text-white bg-gray-500 aspect-video">
|
|
120
|
+
6/12 = 50%
|
|
121
|
+
</div>
|
|
122
|
+
{{/components/Grid/GridItem}}
|
|
123
|
+
{{#>components/Grid/GridItem size="6"}}
|
|
124
|
+
<div class="flex items-center justify-center text-5xl text-white bg-gray-500 aspect-video">
|
|
125
|
+
6/12 = 50%
|
|
126
|
+
</div>
|
|
127
|
+
{{/components/Grid/GridItem}}
|
|
128
|
+
{{/components/Grid/GridGroup}}
|
|
129
|
+
{{#>components/Grid/GridGroup size="66"}}
|
|
130
|
+
<h2 class="text-4xl headline--separator col-span-full">Gruppen 66%</h2>
|
|
131
|
+
{{#>components/Grid/GridItem size="12"}}
|
|
132
|
+
<div class="flex items-center justify-center text-5xl text-white bg-gray-500 aspect-video">
|
|
133
|
+
8/12 = 66%
|
|
134
|
+
</div>
|
|
135
|
+
{{/components/Grid/GridItem}}
|
|
136
|
+
{{#>components/Grid/GridItem size="12"}}
|
|
137
|
+
<div class="flex items-center justify-center text-5xl text-white bg-gray-500 aspect-video">
|
|
138
|
+
8/12 = 66%
|
|
139
|
+
</div>
|
|
140
|
+
{{/components/Grid/GridItem}}
|
|
141
|
+
{{/components/Grid/GridGroup}}
|
|
142
|
+
{{#>components/Grid/GridGroup size="33"}}
|
|
143
|
+
<h2 class="text-4xl headline--separator col-span-full">Gruppen 33%</h2>
|
|
144
|
+
{{#>components/Grid/GridItem size="12"}}
|
|
145
|
+
<div class="flex items-center justify-center text-5xl text-white bg-gray-500 aspect-video">
|
|
146
|
+
4/12 = 33%
|
|
147
|
+
</div>
|
|
148
|
+
{{/components/Grid/GridItem}}
|
|
149
|
+
{{#>components/Grid/GridItem size="12"}}
|
|
150
|
+
<div class="flex items-center justify-center text-5xl text-white bg-gray-500 aspect-video">
|
|
151
|
+
4/12 = 33%
|
|
152
|
+
</div>
|
|
153
|
+
{{/components/Grid/GridItem}}
|
|
154
|
+
{{/components/Grid/GridGroup}}
|
|
155
|
+
</div>
|
|
156
|
+
</div>
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
</div>
|
|
2
|
+
<div class="grid bg-blue-200 col-full grid-page">
|
|
3
|
+
<div class="grid grid-cols-12 px-8 py-6 bg-blue-400 col-full sm:col-main gap-x-6 gap-y-9">
|
|
4
|
+
<div class="grid content-start grid-cols-12 col-span-12 bg-red-400 gap-x-6 gap-y-6">
|
|
5
|
+
{{> @partial-block }}
|
|
6
|
+
</div>
|
|
7
|
+
</div>
|
|
8
|
+
</div>
|
|
9
|
+
<div class="grid grid-cols-12 py-6 bg-green-300 sm:px-8 col-full sm:col-main gap-x-6 gap-y-6">
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
</div>
|
|
2
|
+
<div class="grid grid-cols-12 px-8 py-8 mx-4 bg-blue-400 sm:mx-0 rounded-tl-3xl rounded-br-3xl col-full sm:col-main gap-x-6 gap-y-6">
|
|
3
|
+
{{> @partial-block }}
|
|
4
|
+
</div>
|
|
5
|
+
<div class="grid grid-cols-12 py-6 bg-green-300 sm:px-8 col-full sm:col-main gap-x-6 gap-y-6">
|
|
@@ -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="
|
|
6
|
+
class="absolute left-0 flex justify-center flex-initial w-full h-10 max-w-full align-top duration-500 ease-in-out border-t border-white sb-service-list transition-margin-top -z-1000 md:z-101 md:h-12 top-10 bg-blue-congress 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/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": "0.
|
|
9
|
+
"version": "0.37.2",
|
|
10
10
|
"scripts": {
|
|
11
11
|
"test": "echo \"Error: no test specified\" && exit 1",
|
|
12
12
|
"storybook": "start-storybook -p 6006 public",
|
|
@@ -33,14 +33,14 @@
|
|
|
33
33
|
"devDependencies": {
|
|
34
34
|
"@babel/cli": "^7.13.16",
|
|
35
35
|
"@babel/core": "^7.12.10",
|
|
36
|
-
"@storybook/addon-a11y": "^6.4.
|
|
37
|
-
"@storybook/addon-actions": "^6.4.
|
|
38
|
-
"@storybook/addon-essentials": "^6.4.
|
|
39
|
-
"@storybook/addon-links": "^6.4.
|
|
36
|
+
"@storybook/addon-a11y": "^6.4.19",
|
|
37
|
+
"@storybook/addon-actions": "^6.4.19",
|
|
38
|
+
"@storybook/addon-essentials": "^6.4.19",
|
|
39
|
+
"@storybook/addon-links": "^6.4.19",
|
|
40
40
|
"@storybook/addon-postcss": "^2.0.0",
|
|
41
|
-
"@storybook/addons": "^6.4.
|
|
42
|
-
"@storybook/html": "^6.4.
|
|
43
|
-
"@storybook/theming": "^6.4.
|
|
41
|
+
"@storybook/addons": "^6.4.19",
|
|
42
|
+
"@storybook/html": "^6.4.19",
|
|
43
|
+
"@storybook/theming": "^6.4.19",
|
|
44
44
|
"@whitespace/storybook-addon-html": "^5.0.0",
|
|
45
45
|
"auto": "^10.26.0",
|
|
46
46
|
"autoprefixer": "^10.4.2",
|
|
@@ -66,7 +66,7 @@
|
|
|
66
66
|
"prettier": "^2.2.1",
|
|
67
67
|
"rimraf": "^3.0.2",
|
|
68
68
|
"storybook-conditional-toolbar-selector": "^1.0.3",
|
|
69
|
-
"tailwindcss": "^3.0.
|
|
69
|
+
"tailwindcss": "^3.0.23",
|
|
70
70
|
"tailwindcss-important": "^1.0.0"
|
|
71
71
|
},
|
|
72
72
|
"dependencies": {
|
package/src/assets/tailwind.css
CHANGED
|
@@ -361,41 +361,85 @@
|
|
|
361
361
|
font-style: normal;
|
|
362
362
|
font-stretch: condensed;
|
|
363
363
|
}
|
|
364
|
+
.grid-page {
|
|
365
|
+
grid-template-columns:
|
|
366
|
+
[full-start] minmax(1rem, 1fr)
|
|
367
|
+
[main-start] minmax(0, 64rem) [main-end]
|
|
368
|
+
minmax(1rem, 1fr) [full-end];
|
|
369
|
+
}
|
|
370
|
+
|
|
371
|
+
.col-main {
|
|
372
|
+
grid-column: main;
|
|
373
|
+
}
|
|
374
|
+
|
|
375
|
+
.col-full {
|
|
376
|
+
grid-column: full;
|
|
377
|
+
}
|
|
378
|
+
|
|
379
|
+
.sm\:col-main{
|
|
380
|
+
@media (min-width: 640px) {
|
|
381
|
+
grid-column: main;
|
|
382
|
+
}
|
|
383
|
+
}
|
|
384
|
+
.headline--separator {
|
|
385
|
+
display: flex;
|
|
386
|
+
width: 100%;
|
|
387
|
+
justify-content: center;
|
|
388
|
+
align-items: center;
|
|
389
|
+
text-align: center;
|
|
390
|
+
}
|
|
391
|
+
|
|
392
|
+
.headline--separator:before,
|
|
393
|
+
.headline--separator:after {
|
|
394
|
+
content: '';
|
|
395
|
+
border-top: 1px solid;
|
|
396
|
+
margin: 3px 20px 0 0;
|
|
397
|
+
flex: 1 0 20px;
|
|
398
|
+
}
|
|
399
|
+
|
|
400
|
+
.headline--separator:after {
|
|
401
|
+
margin: 3px 0 0 20px;
|
|
402
|
+
}
|
|
403
|
+
|
|
364
404
|
|
|
365
405
|
.-currentBrand {
|
|
366
|
-
@apply lg:before:absolute lg:before:w-0 lg:before:h-0 lg:before:border-t-0 lg:before:border-r-8 lg:before:border-r-transparent lg:before:border-l-8 lg:before:border-l-white lg:before:border-b-8 lg:before:border-blue-congress lg:before:mt-6
|
|
406
|
+
@apply lg:before:absolute lg:before:w-0 lg:before:h-0 lg:before:border-t-0 lg:before:border-r-8 lg:before:border-r-transparent lg:before:border-l-8 lg:before:border-l-white lg:before:border-b-8 lg:before:border-blue-congress lg:before:mt-6;
|
|
367
407
|
}
|
|
368
408
|
.-currentService {
|
|
369
|
-
@apply before:hidden lg:before:flex before:relative before:w-0 before:h-0 before:mr-4 before:mt-0 before:border-r-0 before:border-t-8 before:border-t-transparent before:border-l-8 before:border-l-white before:border-b-8 before:border-b-transparent lg:before:absolute lg:before:w-0 lg:before:h-0 lg:before:mr-0 lg:before:border-t-0 lg:before:border-r-8 lg:before:border-r-transparent lg:before:border-l-8 lg:before:border-l-transparent lg:before:border-b-8 lg:before:border-b-white lg:before:mt-12
|
|
409
|
+
@apply before:hidden lg:before:flex before:relative before:w-0 before:h-0 before:mr-4 before:mt-0 before:border-r-0 before:border-t-8 before:border-t-transparent before:border-l-8 before:border-l-white before:border-b-8 before:border-b-transparent lg:before:absolute lg:before:w-0 lg:before:h-0 lg:before:mr-0 lg:before:border-t-0 lg:before:border-r-8 lg:before:border-r-transparent lg:before:border-l-8 lg:before:border-l-transparent lg:before:border-b-8 lg:before:border-b-white lg:before:mt-12;
|
|
370
410
|
}
|
|
371
411
|
.-currentSection {
|
|
372
|
-
@apply
|
|
412
|
+
@apply before:w-0 before:h-0 before:mr-2 before:-ml-4 before:border-r-0 before:border-t-7 before:border-t-transparent before:border-l-8 before:border-l-white before:border-b-7 before:border-b-transparent before:mb-0.5 lg:before:absolute lg:before:mb-0 lg:before:w-0 lg:before:h-0 lg:before:mr-0 lg:before:ml-0 lg:before:border-t-0 lg:before:border-r-8 lg:before:border-r-transparent lg:before:border-l-8 lg:before:border-l-transparent lg:before:border-b-8 lg:before:border-b-white lg:before:mt-8;
|
|
373
413
|
}
|
|
374
414
|
.-warnung {
|
|
375
415
|
@apply text-red-600 !important;
|
|
376
|
-
@apply fill-black
|
|
416
|
+
@apply fill-black;
|
|
377
417
|
}
|
|
378
418
|
|
|
379
|
-
.-video-podcast,
|
|
380
|
-
|
|
419
|
+
.-video-podcast,
|
|
420
|
+
.-weather,
|
|
421
|
+
.-traffic {
|
|
422
|
+
@apply fill-white;
|
|
381
423
|
}
|
|
382
|
-
.link-focus-inset{
|
|
383
|
-
@apply focus-visible:outline-none focus-visible:ring focus-visible:ring-inset focus-visible:ring-grey-scorpion/50
|
|
424
|
+
.link-focus-inset {
|
|
425
|
+
@apply focus-visible:outline-none focus-visible:ring focus-visible:ring-inset focus-visible:ring-grey-scorpion/50;
|
|
384
426
|
}
|
|
385
|
-
.link-focus{
|
|
386
|
-
@apply focus-visible:outline-none focus-visible:ring focus-visible:ring-grey-scorpion/50
|
|
427
|
+
.link-focus {
|
|
428
|
+
@apply focus-visible:outline-none focus-visible:ring focus-visible:ring-grey-scorpion/50;
|
|
387
429
|
}
|
|
388
|
-
.link-focus-inset-white{
|
|
389
|
-
@apply focus-visible:outline-none focus-visible:ring focus-visible:ring-inset focus-visible:ring-white/50
|
|
430
|
+
.link-focus-inset-white {
|
|
431
|
+
@apply focus-visible:outline-none focus-visible:ring focus-visible:ring-inset focus-visible:ring-white/50;
|
|
390
432
|
}
|
|
391
|
-
.link-focus-white{
|
|
392
|
-
@apply focus-visible:outline-none focus-visible:ring focus-visible:ring-white/50
|
|
433
|
+
.link-focus-white {
|
|
434
|
+
@apply focus-visible:outline-none focus-visible:ring focus-visible:ring-white/50;
|
|
393
435
|
}
|
|
394
436
|
}
|
|
395
437
|
|
|
396
438
|
@layer components {
|
|
397
|
-
[x-cloak] {
|
|
398
|
-
|
|
439
|
+
[x-cloak] {
|
|
440
|
+
display: none !important;
|
|
441
|
+
}
|
|
442
|
+
|
|
399
443
|
.btn {
|
|
400
444
|
@apply inline-block font-sans font-bold leading-none cursor-pointer rounded-3xl;
|
|
401
445
|
}
|
|
@@ -426,25 +470,25 @@
|
|
|
426
470
|
}
|
|
427
471
|
|
|
428
472
|
@layer utilities {
|
|
429
|
-
.placeholder-text-xs::placeholder{
|
|
430
|
-
|
|
473
|
+
.placeholder-text-xs::placeholder {
|
|
474
|
+
@apply text-xs;
|
|
431
475
|
}
|
|
432
476
|
}
|
|
433
477
|
|
|
434
478
|
.hide-scroll-bar {
|
|
435
479
|
-ms-overflow-style: none;
|
|
436
|
-
|
|
437
|
-
|
|
438
|
-
|
|
480
|
+
scrollbar-width: none;
|
|
481
|
+
scroll-behavior: smooth;
|
|
482
|
+
}
|
|
439
483
|
.hide-scroll-bar::-webkit-scrollbar {
|
|
440
484
|
display: none;
|
|
441
|
-
|
|
485
|
+
}
|
|
442
486
|
|
|
443
|
-
.arrow-left-background{
|
|
487
|
+
.arrow-left-background {
|
|
444
488
|
background: linear-gradient(to left, rgba(255, 255, 255, 0), rgb(255, 255, 255) 50%);
|
|
445
489
|
transition: transform 150ms ease-in-out 0s;
|
|
446
490
|
}
|
|
447
|
-
.arrow-right-background{
|
|
491
|
+
.arrow-right-background {
|
|
448
492
|
background: linear-gradient(to right, rgba(255, 255, 255, 0), rgb(255, 255, 255) 50%);
|
|
449
493
|
transition: transform 150ms ease-in-out 0s;
|
|
450
|
-
}
|
|
494
|
+
}
|
|
@@ -0,0 +1,156 @@
|
|
|
1
|
+
|
|
2
|
+
<div class="grid bg-gray-100 grid-page">
|
|
3
|
+
<div class="grid grid-cols-12 py-6 bg-green-300 sm:px-8 col-full sm:col-main gap-x-6 gap-y-6">
|
|
4
|
+
{{#>components/Grid/GridGroup size="100"}}
|
|
5
|
+
<h2 class="text-4xl headline--separator col-span-full">Gruppen 100%</h2>
|
|
6
|
+
{{#>components/Grid/GridItem size="12"}}
|
|
7
|
+
<a href="#">
|
|
8
|
+
<div class="flex items-center justify-center text-5xl text-white bg-gray-500 aspect-video">
|
|
9
|
+
12/12 = 100%
|
|
10
|
+
</div>
|
|
11
|
+
</a>
|
|
12
|
+
{{/components/Grid/GridItem}}
|
|
13
|
+
{{/components/Grid/GridGroup}}
|
|
14
|
+
{{#>components/Grid/GridGroupFull }}
|
|
15
|
+
<h2 class="text-4xl headline--separator col-span-full">Gruppen 100% mit blauen Hintergrung bis Rand</h2>
|
|
16
|
+
{{#>components/Grid/GridItem size="6"}}
|
|
17
|
+
<div class="flex items-center justify-center text-5xl text-white bg-gray-500 aspect-video">
|
|
18
|
+
6/12 = 50%
|
|
19
|
+
</div>
|
|
20
|
+
{{/components/Grid/GridItem}}
|
|
21
|
+
{{#>components/Grid/GridItem size="6"}}
|
|
22
|
+
<div class="flex items-center justify-center text-5xl text-white bg-gray-500 aspect-video">
|
|
23
|
+
6/12 = 50%
|
|
24
|
+
</div>
|
|
25
|
+
{{/components/Grid/GridItem}}
|
|
26
|
+
{{/components/Grid/GridGroupFull}}
|
|
27
|
+
|
|
28
|
+
{{#>components/Grid/GridGroup size="100"}}
|
|
29
|
+
|
|
30
|
+
<h2 class="text-4xl headline--separator col-span-full">Gruppen 100%</h2>
|
|
31
|
+
{{#>components/Grid/GridItem size="6"}}
|
|
32
|
+
<div class="flex items-center justify-center text-5xl text-white bg-gray-500 aspect-video">
|
|
33
|
+
6/12 = 50%
|
|
34
|
+
</div>
|
|
35
|
+
{{/components/Grid/GridItem}}
|
|
36
|
+
{{#>components/Grid/GridItem size="6"}}
|
|
37
|
+
<div class="flex items-center justify-center text-5xl text-white bg-gray-500 aspect-video">
|
|
38
|
+
6/12 = 50%
|
|
39
|
+
</div>
|
|
40
|
+
{{/components/Grid/GridItem}}
|
|
41
|
+
|
|
42
|
+
{{#>components/Grid/GridItem size="4"}}
|
|
43
|
+
<div class="flex items-center justify-center text-5xl text-white bg-gray-500 aspect-video">
|
|
44
|
+
4/12 = 33%
|
|
45
|
+
</div>
|
|
46
|
+
{{/components/Grid/GridItem}}
|
|
47
|
+
{{#>components/Grid/GridItem size="4"}}
|
|
48
|
+
<div class="flex items-center justify-center text-5xl text-white bg-gray-500 aspect-video">
|
|
49
|
+
4/12 = 33%
|
|
50
|
+
</div>
|
|
51
|
+
{{/components/Grid/GridItem}}
|
|
52
|
+
{{#>components/Grid/GridItem size="4"}}
|
|
53
|
+
<div class="flex items-center justify-center text-5xl text-white bg-gray-500 aspect-video">
|
|
54
|
+
4/12 = 33%
|
|
55
|
+
</div>
|
|
56
|
+
{{/components/Grid/GridItem}}
|
|
57
|
+
{{/components/Grid/GridGroup}}
|
|
58
|
+
{{#>components/Grid/GridGroupTabbed }}
|
|
59
|
+
<h2 class="text-4xl headline--separator col-span-full">Gruppen 100% Tabbed</h2>
|
|
60
|
+
{{#>components/Grid/GridItem size="3"}}
|
|
61
|
+
<div class="flex items-center justify-center text-4xl text-white bg-gray-500 aspect-video">
|
|
62
|
+
3/12 = 25%
|
|
63
|
+
</div>
|
|
64
|
+
{{/components/Grid/GridItem}}
|
|
65
|
+
|
|
66
|
+
{{#>components/Grid/GridItem size="3"}}
|
|
67
|
+
<div class="flex items-center justify-center text-4xl text-white bg-gray-500 aspect-video">
|
|
68
|
+
3/12 = 25%
|
|
69
|
+
</div>
|
|
70
|
+
{{/components/Grid/GridItem}}
|
|
71
|
+
|
|
72
|
+
{{#>components/Grid/GridItem size="3"}}
|
|
73
|
+
<div class="flex items-center justify-center text-4xl text-white bg-gray-500 aspect-video">
|
|
74
|
+
3/12 = 25%
|
|
75
|
+
</div>
|
|
76
|
+
{{/components/Grid/GridItem}}
|
|
77
|
+
|
|
78
|
+
{{#>components/Grid/GridItem size="3"}}
|
|
79
|
+
<div class="flex items-center justify-center text-4xl text-white bg-gray-500 aspect-video">
|
|
80
|
+
3/12 = 25%
|
|
81
|
+
</div>
|
|
82
|
+
{{/components/Grid/GridItem}}
|
|
83
|
+
|
|
84
|
+
{{/components/Grid/GridGroupTabbed}}
|
|
85
|
+
{{#>components/Grid/GridGroup}}
|
|
86
|
+
<h2 class="text-4xl headline--separator col-span-full">Gruppen 100%</h2>
|
|
87
|
+
{{#>components/Grid/GridItem size="4"}}
|
|
88
|
+
<div class="flex items-center justify-center text-5xl text-white bg-gray-500 aspect-video">
|
|
89
|
+
4/12 = 33%
|
|
90
|
+
</div>
|
|
91
|
+
{{/components/Grid/GridItem}}
|
|
92
|
+
{{#>components/Grid/GridItem size="4"}}
|
|
93
|
+
<div class="flex items-center justify-center text-5xl text-white bg-gray-500 aspect-video">
|
|
94
|
+
4/12 = 33%
|
|
95
|
+
</div>
|
|
96
|
+
{{/components/Grid/GridItem}}
|
|
97
|
+
{{#>components/Grid/GridItem size="4"}}
|
|
98
|
+
<div class="flex items-center justify-center text-5xl text-white bg-gray-500 aspect-video">
|
|
99
|
+
4/12 = 33%
|
|
100
|
+
</div>
|
|
101
|
+
{{/components/Grid/GridItem}}
|
|
102
|
+
{{/components/Grid/GridGroup}}
|
|
103
|
+
{{#>components/Grid/GridGroup size="50"}}
|
|
104
|
+
<h2 class="text-4xl headline--separator col-span-full">Gruppen 50%</h2>
|
|
105
|
+
{{#>components/Grid/GridItem size="12"}}
|
|
106
|
+
<div class="flex items-center justify-center text-5xl text-white bg-gray-500 aspect-video">
|
|
107
|
+
6/12 = 50%
|
|
108
|
+
</div>
|
|
109
|
+
{{/components/Grid/GridItem}}
|
|
110
|
+
{{#>components/Grid/GridItem size="12"}}
|
|
111
|
+
<div class="flex items-center justify-center text-5xl text-white bg-gray-500 aspect-video">
|
|
112
|
+
6/12 = 50%
|
|
113
|
+
</div>
|
|
114
|
+
{{/components/Grid/GridItem}}
|
|
115
|
+
{{/components/Grid/GridGroup}}
|
|
116
|
+
{{#>components/Grid/GridGroup size="50"}}
|
|
117
|
+
<h2 class="text-4xl headline--separator col-span-full">Gruppen 50%</h2>
|
|
118
|
+
{{#>components/Grid/GridItem size="6"}}
|
|
119
|
+
<div class="flex items-center justify-center text-5xl text-white bg-gray-500 aspect-video">
|
|
120
|
+
6/12 = 50%
|
|
121
|
+
</div>
|
|
122
|
+
{{/components/Grid/GridItem}}
|
|
123
|
+
{{#>components/Grid/GridItem size="6"}}
|
|
124
|
+
<div class="flex items-center justify-center text-5xl text-white bg-gray-500 aspect-video">
|
|
125
|
+
6/12 = 50%
|
|
126
|
+
</div>
|
|
127
|
+
{{/components/Grid/GridItem}}
|
|
128
|
+
{{/components/Grid/GridGroup}}
|
|
129
|
+
{{#>components/Grid/GridGroup size="66"}}
|
|
130
|
+
<h2 class="text-4xl headline--separator col-span-full">Gruppen 66%</h2>
|
|
131
|
+
{{#>components/Grid/GridItem size="12"}}
|
|
132
|
+
<div class="flex items-center justify-center text-5xl text-white bg-gray-500 aspect-video">
|
|
133
|
+
8/12 = 66%
|
|
134
|
+
</div>
|
|
135
|
+
{{/components/Grid/GridItem}}
|
|
136
|
+
{{#>components/Grid/GridItem size="12"}}
|
|
137
|
+
<div class="flex items-center justify-center text-5xl text-white bg-gray-500 aspect-video">
|
|
138
|
+
8/12 = 66%
|
|
139
|
+
</div>
|
|
140
|
+
{{/components/Grid/GridItem}}
|
|
141
|
+
{{/components/Grid/GridGroup}}
|
|
142
|
+
{{#>components/Grid/GridGroup size="33"}}
|
|
143
|
+
<h2 class="text-4xl headline--separator col-span-full">Gruppen 33%</h2>
|
|
144
|
+
{{#>components/Grid/GridItem size="12"}}
|
|
145
|
+
<div class="flex items-center justify-center text-5xl text-white bg-gray-500 aspect-video">
|
|
146
|
+
4/12 = 33%
|
|
147
|
+
</div>
|
|
148
|
+
{{/components/Grid/GridItem}}
|
|
149
|
+
{{#>components/Grid/GridItem size="12"}}
|
|
150
|
+
<div class="flex items-center justify-center text-5xl text-white bg-gray-500 aspect-video">
|
|
151
|
+
4/12 = 33%
|
|
152
|
+
</div>
|
|
153
|
+
{{/components/Grid/GridItem}}
|
|
154
|
+
{{/components/Grid/GridGroup}}
|
|
155
|
+
</div>
|
|
156
|
+
</div>
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
import { ArgsTable, Meta, Story, Canvas, Preview } from "@storybook/addon-docs";
|
|
2
|
+
|
|
3
|
+
import grid from "./Grid.hbs";
|
|
4
|
+
|
|
5
|
+
<Meta
|
|
6
|
+
title="Komponenten/Grid"
|
|
7
|
+
argTypes={{
|
|
8
|
+
|
|
9
|
+
}}
|
|
10
|
+
/>
|
|
11
|
+
|
|
12
|
+
export const Template = ({ text, ...args }) => {
|
|
13
|
+
// You can either use a function to create DOM elements or use a plain html string!
|
|
14
|
+
// return `<div>${label}</div>`;
|
|
15
|
+
return grid({ text, ...args });
|
|
16
|
+
};
|
|
17
|
+
|
|
18
|
+
# Button
|
|
19
|
+
|
|
20
|
+
Ein toller Einleitungstext für unsere `Grid` Komponente:
|
|
21
|
+
|
|
22
|
+
<Preview withToolbar>
|
|
23
|
+
<Story
|
|
24
|
+
name="main"
|
|
25
|
+
args={{
|
|
26
|
+
|
|
27
|
+
}}
|
|
28
|
+
>
|
|
29
|
+
{Template.bind({})}
|
|
30
|
+
</Story>
|
|
31
|
+
</Preview>
|
|
32
|
+
|
|
33
|
+
<ArgsTable story="main" />
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
</div>
|
|
2
|
+
<div class="grid bg-blue-200 col-full grid-page">
|
|
3
|
+
<div class="grid grid-cols-12 px-8 py-6 bg-blue-400 col-full sm:col-main gap-x-6 gap-y-9">
|
|
4
|
+
<div class="grid content-start grid-cols-12 col-span-12 bg-red-400 gap-x-6 gap-y-6">
|
|
5
|
+
{{> @partial-block }}
|
|
6
|
+
</div>
|
|
7
|
+
</div>
|
|
8
|
+
</div>
|
|
9
|
+
<div class="grid grid-cols-12 py-6 bg-green-300 sm:px-8 col-full sm:col-main gap-x-6 gap-y-6">
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
</div>
|
|
2
|
+
<div class="grid grid-cols-12 px-8 py-8 mx-4 bg-blue-400 sm:mx-0 rounded-tl-3xl rounded-br-3xl col-full sm:col-main gap-x-6 gap-y-6">
|
|
3
|
+
{{> @partial-block }}
|
|
4
|
+
</div>
|
|
5
|
+
<div class="grid grid-cols-12 py-6 bg-green-300 sm:px-8 col-full sm:col-main gap-x-6 gap-y-6">
|
|
@@ -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="
|
|
6
|
+
class="absolute left-0 flex justify-center flex-initial w-full h-10 max-w-full align-top duration-500 ease-in-out border-t border-white sb-service-list transition-margin-top -z-1000 md:z-101 md:h-12 top-10 bg-blue-congress 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">
|