@nl-rvo/css-hero 1.7.0 → 1.7.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/CHANGELOG.md +12 -0
- package/dist/index.css +19 -15
- package/dist/index.min.css +1 -1
- package/dist/index.mjs +1 -1
- package/package.json +1 -1
- package/src/index.scss +19 -19
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,17 @@
|
|
|
1
1
|
# `@nl-rvo/css-hero`
|
|
2
2
|
|
|
3
|
+
## 1.7.2
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- e9104b7: Added additional styling to Hero component when on mobile
|
|
8
|
+
|
|
9
|
+
## 1.7.1
|
|
10
|
+
|
|
11
|
+
### Patch Changes
|
|
12
|
+
|
|
13
|
+
- 2ed4a39: Add new `violet` color option to the hero component.
|
|
14
|
+
|
|
3
15
|
## 1.7.0
|
|
4
16
|
|
|
5
17
|
### Minor Changes
|
package/dist/index.css
CHANGED
|
@@ -3,6 +3,7 @@
|
|
|
3
3
|
* Copyright (c) 2021 Community for NL Design System
|
|
4
4
|
*/
|
|
5
5
|
.rvo-hero {
|
|
6
|
+
border-end-end-radius: var(--rvo-hero-border-end-end-radius);
|
|
6
7
|
margin-inline-end: auto;
|
|
7
8
|
margin-inline-start: auto;
|
|
8
9
|
min-height: 200px;
|
|
@@ -11,17 +12,21 @@
|
|
|
11
12
|
}
|
|
12
13
|
.rvo-hero .rvo-hero__content {
|
|
13
14
|
background-color: var(--rvo-hero-box-background-color);
|
|
14
|
-
border-start-end-radius: var(--rvo-hero-box-border-start-end-radius);
|
|
15
|
-
bottom: 0;
|
|
16
15
|
color: var(--rvo-hero-title-color);
|
|
17
16
|
margin-block-end: 0;
|
|
18
|
-
max-width: var(--rvo-hero-box-max-width);
|
|
19
17
|
padding-block-end: var(--rvo-hero-box-padding-block-end);
|
|
20
18
|
padding-block-start: var(--rvo-hero-box-padding-block-start);
|
|
21
19
|
padding-inline-end: var(--rvo-hero-box-padding-inline-end);
|
|
22
20
|
padding-inline-start: var(--rvo-hero-box-padding-inline-start);
|
|
23
|
-
|
|
24
|
-
|
|
21
|
+
}
|
|
22
|
+
@media (min-width: 540px) {
|
|
23
|
+
.rvo-hero .rvo-hero__content {
|
|
24
|
+
border-start-end-radius: var(--rvo-hero-box-border-start-end-radius);
|
|
25
|
+
bottom: 0;
|
|
26
|
+
max-width: var(--rvo-hero-box-max-width);
|
|
27
|
+
position: absolute;
|
|
28
|
+
z-index: 1;
|
|
29
|
+
}
|
|
25
30
|
}
|
|
26
31
|
.rvo-hero .rvo-hero__title,
|
|
27
32
|
.rvo-hero .rvo-hero__subtitle {
|
|
@@ -34,11 +39,15 @@
|
|
|
34
39
|
font-weight: var(--rvo-hero-subtitle-font-weight);
|
|
35
40
|
line-height: var(--rvo-hero-subtitle-line-height);
|
|
36
41
|
}
|
|
37
|
-
.rvo-hero--
|
|
38
|
-
background-color: var(--rvo-
|
|
39
|
-
color: var(--rvo-hero-kind-lichtblauw-color);
|
|
42
|
+
.rvo-hero--violet {
|
|
43
|
+
--rvo-hero-box-background-color: var(--rvo-color-violet);
|
|
40
44
|
}
|
|
41
|
-
.rvo-hero--lichtblauw
|
|
45
|
+
.rvo-hero--lichtblauw {
|
|
46
|
+
--rvo-hero-box-background-color: var(--rvo-hero-kind-lichtblauw-background-color);
|
|
47
|
+
}
|
|
48
|
+
.rvo-hero--lichtblauw .rvo-hero__content,
|
|
49
|
+
.rvo-hero--lichtblauw .rvo-hero__title,
|
|
50
|
+
.rvo-hero--lichtblauw .rvo-hero__subtitle {
|
|
42
51
|
color: var(--rvo-hero-kind-lichtblauw-color);
|
|
43
52
|
}
|
|
44
53
|
|
|
@@ -46,7 +55,6 @@
|
|
|
46
55
|
line-height: 0;
|
|
47
56
|
min-height: 300px;
|
|
48
57
|
overflow: hidden;
|
|
49
|
-
padding-block-end: 20%;
|
|
50
58
|
}
|
|
51
59
|
@media (min-width: 540px) {
|
|
52
60
|
.rvo-hero__image-container {
|
|
@@ -58,11 +66,6 @@
|
|
|
58
66
|
padding-block-end: 0;
|
|
59
67
|
}
|
|
60
68
|
}
|
|
61
|
-
@media (min-width: 780px) {
|
|
62
|
-
.rvo-hero__image-container {
|
|
63
|
-
border-end-end-radius: var(--rvo-hero-border-end-end-radius);
|
|
64
|
-
}
|
|
65
|
-
}
|
|
66
69
|
.rvo-hero__image-container--lined::after {
|
|
67
70
|
border-color: var(--rvo-hero-image-line-border-color);
|
|
68
71
|
border-end-start-radius: var(--rvo-hero-image-line-border-radius);
|
|
@@ -84,6 +87,7 @@
|
|
|
84
87
|
|
|
85
88
|
.rvo-hero__image {
|
|
86
89
|
height: 100%;
|
|
90
|
+
min-height: 300px;
|
|
87
91
|
object-fit: cover;
|
|
88
92
|
width: 100%;
|
|
89
93
|
}
|
package/dist/index.min.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.rvo-hero{margin-inline-end:auto;margin-inline-start:auto;min-height:200px;overflow:hidden;position:relative}.rvo-hero .rvo-hero__content{background-color:var(--rvo-hero-box-background-color);
|
|
1
|
+
.rvo-hero{border-end-end-radius:var(--rvo-hero-border-end-end-radius);margin-inline-end:auto;margin-inline-start:auto;min-height:200px;overflow:hidden;position:relative}.rvo-hero .rvo-hero__content{background-color:var(--rvo-hero-box-background-color);color:var(--rvo-hero-title-color);margin-block-end:0;padding-block-end:var(--rvo-hero-box-padding-block-end);padding-block-start:var(--rvo-hero-box-padding-block-start);padding-inline-end:var(--rvo-hero-box-padding-inline-end);padding-inline-start:var(--rvo-hero-box-padding-inline-start)}@media (min-width:540px){.rvo-hero .rvo-hero__content{border-start-end-radius:var(--rvo-hero-box-border-start-end-radius);bottom:0;max-width:var(--rvo-hero-box-max-width);position:absolute;z-index:1}}.rvo-hero .rvo-hero__subtitle,.rvo-hero .rvo-hero__title{color:var(--rvo-hero-title-color)}.rvo-hero .rvo-hero__subtitle{display:block;font-size:var(--rvo-hero-subtitle-font-size);font-style:var(--rvo-hero-subtitle-font-style);font-weight:var(--rvo-hero-subtitle-font-weight);line-height:var(--rvo-hero-subtitle-line-height)}.rvo-hero--violet{--rvo-hero-box-background-color:var(--rvo-color-violet)}.rvo-hero--lichtblauw{--rvo-hero-box-background-color:var(--rvo-hero-kind-lichtblauw-background-color)}.rvo-hero--lichtblauw .rvo-hero__content,.rvo-hero--lichtblauw .rvo-hero__subtitle,.rvo-hero--lichtblauw .rvo-hero__title{color:var(--rvo-hero-kind-lichtblauw-color)}.rvo-hero__image-container{line-height:0;min-height:300px;overflow:hidden}@media (min-width:540px){.rvo-hero__image-container{max-height:500px;padding-block-end:0}}.rvo-hero__image-container--lined:after{border-color:var(--rvo-hero-image-line-border-color);border-end-start-radius:var(--rvo-hero-image-line-border-radius);border-style:var(--rvo-hero-image-line-border-style);border-width:var(--rvo-hero-image-line-border-width);content:"";display:block;height:100%;inset-block-start:calc(var(--rvo-hero-image-line-inset) - 25%);inset-inline-end:var(--rvo-hero-image-line-inset);position:absolute;width:100%}@media (min-width:540px){.rvo-hero__image-container--lined:after{inset-block-start:var(--rvo-hero-image-line-inset)}}.rvo-hero__image{min-height:300px}.rvo-hero__custom-image-wrapper img,.rvo-hero__image{height:100%;object-fit:cover;width:100%}
|
package/dist/index.mjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export default ".rvo-hero{margin-inline-end:auto;margin-inline-start:auto;min-height:200px;overflow:hidden;position:relative}.rvo-hero .rvo-hero__content{background-color:var(--rvo-hero-box-background-color);
|
|
1
|
+
export default ".rvo-hero{border-end-end-radius:var(--rvo-hero-border-end-end-radius);margin-inline-end:auto;margin-inline-start:auto;min-height:200px;overflow:hidden;position:relative}.rvo-hero .rvo-hero__content{background-color:var(--rvo-hero-box-background-color);color:var(--rvo-hero-title-color);margin-block-end:0;padding-block-end:var(--rvo-hero-box-padding-block-end);padding-block-start:var(--rvo-hero-box-padding-block-start);padding-inline-end:var(--rvo-hero-box-padding-inline-end);padding-inline-start:var(--rvo-hero-box-padding-inline-start)}@media (min-width:540px){.rvo-hero .rvo-hero__content{border-start-end-radius:var(--rvo-hero-box-border-start-end-radius);bottom:0;max-width:var(--rvo-hero-box-max-width);position:absolute;z-index:1}}.rvo-hero .rvo-hero__subtitle,.rvo-hero .rvo-hero__title{color:var(--rvo-hero-title-color)}.rvo-hero .rvo-hero__subtitle{display:block;font-size:var(--rvo-hero-subtitle-font-size);font-style:var(--rvo-hero-subtitle-font-style);font-weight:var(--rvo-hero-subtitle-font-weight);line-height:var(--rvo-hero-subtitle-line-height)}.rvo-hero--violet{--rvo-hero-box-background-color:var(--rvo-color-violet)}.rvo-hero--lichtblauw{--rvo-hero-box-background-color:var(--rvo-hero-kind-lichtblauw-background-color)}.rvo-hero--lichtblauw .rvo-hero__content,.rvo-hero--lichtblauw .rvo-hero__subtitle,.rvo-hero--lichtblauw .rvo-hero__title{color:var(--rvo-hero-kind-lichtblauw-color)}.rvo-hero__image-container{line-height:0;min-height:300px;overflow:hidden}@media (min-width:540px){.rvo-hero__image-container{max-height:500px;padding-block-end:0}}.rvo-hero__image-container--lined:after{border-color:var(--rvo-hero-image-line-border-color);border-end-start-radius:var(--rvo-hero-image-line-border-radius);border-style:var(--rvo-hero-image-line-border-style);border-width:var(--rvo-hero-image-line-border-width);content:\"\";display:block;height:100%;inset-block-start:calc(var(--rvo-hero-image-line-inset) - 25%);inset-inline-end:var(--rvo-hero-image-line-inset);position:absolute;width:100%}@media (min-width:540px){.rvo-hero__image-container--lined:after{inset-block-start:var(--rvo-hero-image-line-inset)}}.rvo-hero__image{min-height:300px}.rvo-hero__custom-image-wrapper img,.rvo-hero__image{height:100%;object-fit:cover;width:100%}";
|
package/package.json
CHANGED
package/src/index.scss
CHANGED
|
@@ -3,6 +3,7 @@
|
|
|
3
3
|
* Copyright (c) 2021 Community for NL Design System
|
|
4
4
|
*/
|
|
5
5
|
.rvo-hero {
|
|
6
|
+
border-end-end-radius: var(--rvo-hero-border-end-end-radius);
|
|
6
7
|
margin-inline-end: auto;
|
|
7
8
|
margin-inline-start: auto;
|
|
8
9
|
min-height: 200px;
|
|
@@ -11,17 +12,20 @@
|
|
|
11
12
|
|
|
12
13
|
.rvo-hero__content {
|
|
13
14
|
background-color: var(--rvo-hero-box-background-color);
|
|
14
|
-
border-start-end-radius: var(--rvo-hero-box-border-start-end-radius);
|
|
15
|
-
bottom: 0;
|
|
16
15
|
color: var(--rvo-hero-title-color);
|
|
17
16
|
margin-block-end: 0;
|
|
18
|
-
max-width: var(--rvo-hero-box-max-width);
|
|
19
17
|
padding-block-end: var(--rvo-hero-box-padding-block-end);
|
|
20
18
|
padding-block-start: var(--rvo-hero-box-padding-block-start);
|
|
21
19
|
padding-inline-end: var(--rvo-hero-box-padding-inline-end);
|
|
22
20
|
padding-inline-start: var(--rvo-hero-box-padding-inline-start);
|
|
23
|
-
|
|
24
|
-
|
|
21
|
+
|
|
22
|
+
@media (min-width: 540px) {
|
|
23
|
+
border-start-end-radius: var(--rvo-hero-box-border-start-end-radius);
|
|
24
|
+
bottom: 0;
|
|
25
|
+
max-width: var(--rvo-hero-box-max-width);
|
|
26
|
+
position: absolute;
|
|
27
|
+
z-index: 1;
|
|
28
|
+
}
|
|
25
29
|
}
|
|
26
30
|
|
|
27
31
|
.rvo-hero__title,
|
|
@@ -37,17 +41,17 @@
|
|
|
37
41
|
line-height: var(--rvo-hero-subtitle-line-height);
|
|
38
42
|
}
|
|
39
43
|
|
|
44
|
+
&--violet {
|
|
45
|
+
--rvo-hero-box-background-color: var(--rvo-color-violet);
|
|
46
|
+
}
|
|
47
|
+
|
|
40
48
|
&--lichtblauw {
|
|
41
|
-
|
|
42
|
-
&__content {
|
|
43
|
-
background-color: var(--rvo-hero-kind-lichtblauw-background-color);
|
|
44
|
-
color: var(--rvo-hero-kind-lichtblauw-color);
|
|
45
|
-
}
|
|
49
|
+
--rvo-hero-box-background-color: var(--rvo-hero-kind-lichtblauw-background-color);
|
|
46
50
|
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
+
.rvo-hero__content,
|
|
52
|
+
.rvo-hero__title,
|
|
53
|
+
.rvo-hero__subtitle {
|
|
54
|
+
color: var(--rvo-hero-kind-lichtblauw-color);
|
|
51
55
|
}
|
|
52
56
|
}
|
|
53
57
|
}
|
|
@@ -56,7 +60,6 @@
|
|
|
56
60
|
line-height: 0;
|
|
57
61
|
min-height: 300px;
|
|
58
62
|
overflow: hidden;
|
|
59
|
-
padding-block-end: 20%;
|
|
60
63
|
|
|
61
64
|
@media (min-width: 540px) {
|
|
62
65
|
max-height: 500px;
|
|
@@ -66,10 +69,6 @@
|
|
|
66
69
|
padding-block-end: 0;
|
|
67
70
|
}
|
|
68
71
|
|
|
69
|
-
@media (min-width: 780px) {
|
|
70
|
-
border-end-end-radius: var(--rvo-hero-border-end-end-radius);
|
|
71
|
-
}
|
|
72
|
-
|
|
73
72
|
&--lined {
|
|
74
73
|
&::after {
|
|
75
74
|
border-color: var(--rvo-hero-image-line-border-color);
|
|
@@ -93,6 +92,7 @@
|
|
|
93
92
|
|
|
94
93
|
.rvo-hero__image {
|
|
95
94
|
height: 100%;
|
|
95
|
+
min-height: 300px;
|
|
96
96
|
object-fit: cover;
|
|
97
97
|
width: 100%;
|
|
98
98
|
}
|