@nextrap/ntl-hero 2.0.0 → 2.0.1
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 +10 -0
- package/index.scss +2 -0
- package/package.json +1 -1
- package/src/components/ntl-hero/ntl-hero.scss +75 -0
- package/src/styles/index.scss +20 -0
- package/src/styles/mixins.scss +0 -0
package/CHANGELOG.md
ADDED
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
## 2.0.1 (2026-09-07)
|
|
2
|
+
|
|
3
|
+
### 🩹 Fixes
|
|
4
|
+
|
|
5
|
+
- **ntl:** migrate ntl-hero to nt-core ([5a8739c](https://github.com/nextrap/nextrap-monorepo/commit/5a8739c))
|
|
6
|
+
- **layout:** keep layout packages separate ([c82b05a](https://github.com/nextrap/nextrap-monorepo/commit/c82b05a))
|
|
7
|
+
|
|
8
|
+
### ❤️ Thank You
|
|
9
|
+
|
|
10
|
+
- Matthias Leuffen
|
package/index.scss
ADDED
package/package.json
CHANGED
|
@@ -0,0 +1,75 @@
|
|
|
1
|
+
/* Shadow DOM Styles for hero */
|
|
2
|
+
|
|
3
|
+
:host {
|
|
4
|
+
--bg-color: var(--nt-body-teritary, #e4e6ef);
|
|
5
|
+
--container-width: var(--nt-container-width, 100%);
|
|
6
|
+
--height-offset: 0px;
|
|
7
|
+
--min-height: 600px;
|
|
8
|
+
--max-height: 1800px;
|
|
9
|
+
--breakpoint: xl;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
#root {
|
|
13
|
+
width: 100%;
|
|
14
|
+
isolation: isolate;
|
|
15
|
+
min-height: var(--min-height);
|
|
16
|
+
display: grid;
|
|
17
|
+
|
|
18
|
+
position: relative;
|
|
19
|
+
|
|
20
|
+
height: calc(100vh - var(--height-offset, 0px));
|
|
21
|
+
max-height: var(--max-height);
|
|
22
|
+
|
|
23
|
+
//min-height: var(--min-height);
|
|
24
|
+
grid-template-rows: 1fr;
|
|
25
|
+
grid-template-columns: 1fr;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
#wrapper {
|
|
29
|
+
padding-top: var(--top-offset);
|
|
30
|
+
width: var(--container-width);
|
|
31
|
+
margin: 0 auto;
|
|
32
|
+
grid-row: 1;
|
|
33
|
+
grid-column: 1;
|
|
34
|
+
z-index: 1;
|
|
35
|
+
display: flex;
|
|
36
|
+
flex-direction: column;
|
|
37
|
+
align-items: center;
|
|
38
|
+
|
|
39
|
+
#title,
|
|
40
|
+
#top-title {
|
|
41
|
+
text-align: center;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
& > #title,
|
|
45
|
+
#content {
|
|
46
|
+
flex-grow: 1;
|
|
47
|
+
justify-content: center;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
& > * {
|
|
51
|
+
display: flex;
|
|
52
|
+
flex-direction: column;
|
|
53
|
+
align-items: center;
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
& > :has(.slot-empty) {
|
|
57
|
+
display: none !important;
|
|
58
|
+
}
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
#background {
|
|
62
|
+
position: absolute; // Important: This allows the background to fill the entire hero area without affecting the layout of the content.
|
|
63
|
+
left: 0;
|
|
64
|
+
right: 0;
|
|
65
|
+
bottom: 0;
|
|
66
|
+
top: 0;
|
|
67
|
+
background-color: var(--bg-color);
|
|
68
|
+
z-index: 0;
|
|
69
|
+
height: 100%;
|
|
70
|
+
inset: 0;
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
.background::slotted(*) {
|
|
74
|
+
pointer-events: auto;
|
|
75
|
+
}
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* This file contains LightDOM Styles
|
|
3
|
+
*/
|
|
4
|
+
|
|
5
|
+
ntl-hero {
|
|
6
|
+
p[slot='bg'] {
|
|
7
|
+
width: 100%;
|
|
8
|
+
height: 100%;
|
|
9
|
+
|
|
10
|
+
display: block;
|
|
11
|
+
|
|
12
|
+
> img {
|
|
13
|
+
width: 100%;
|
|
14
|
+
height: 100%;
|
|
15
|
+
|
|
16
|
+
object-position: center;
|
|
17
|
+
object-fit: cover;
|
|
18
|
+
}
|
|
19
|
+
}
|
|
20
|
+
}
|
|
File without changes
|