@nl-rvo/css-hero 1.7.2 → 1.7.4
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 +13 -0
- package/dist/index.css +13 -17
- package/dist/index.min.css +1 -1
- package/dist/index.mjs +1 -1
- package/package.json +1 -1
- package/src/index.scss +14 -16
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,18 @@
|
|
|
1
1
|
# `@nl-rvo/css-hero`
|
|
2
2
|
|
|
3
|
+
## 1.7.4
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- 93fdefc: Use CSS Logical properties, to support both `dir=ltr` and `dir=rtl`.
|
|
8
|
+
|
|
9
|
+
## 1.7.3
|
|
10
|
+
|
|
11
|
+
### Patch Changes
|
|
12
|
+
|
|
13
|
+
- c4973ba: Removed min-height for hero image on mobile
|
|
14
|
+
- c4973ba: removed min-height from hero image container
|
|
15
|
+
|
|
3
16
|
## 1.7.2
|
|
4
17
|
|
|
5
18
|
### Patch Changes
|
package/dist/index.css
CHANGED
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
border-end-end-radius: var(--rvo-hero-border-end-end-radius);
|
|
7
7
|
margin-inline-end: auto;
|
|
8
8
|
margin-inline-start: auto;
|
|
9
|
-
min-
|
|
9
|
+
min-block-size: 200px;
|
|
10
10
|
overflow: hidden;
|
|
11
11
|
position: relative;
|
|
12
12
|
}
|
|
@@ -22,8 +22,8 @@
|
|
|
22
22
|
@media (min-width: 540px) {
|
|
23
23
|
.rvo-hero .rvo-hero__content {
|
|
24
24
|
border-start-end-radius: var(--rvo-hero-box-border-start-end-radius);
|
|
25
|
-
|
|
26
|
-
max-
|
|
25
|
+
inset-block-end: 0;
|
|
26
|
+
max-inline-size: var(--rvo-hero-box-max-width);
|
|
27
27
|
position: absolute;
|
|
28
28
|
z-index: 1;
|
|
29
29
|
}
|
|
@@ -53,31 +53,27 @@
|
|
|
53
53
|
|
|
54
54
|
.rvo-hero__image-container {
|
|
55
55
|
line-height: 0;
|
|
56
|
-
min-height: 300px;
|
|
57
56
|
overflow: hidden;
|
|
58
57
|
}
|
|
59
58
|
@media (min-width: 540px) {
|
|
60
59
|
.rvo-hero__image-container {
|
|
61
|
-
max-
|
|
62
|
-
|
|
63
|
-
}
|
|
64
|
-
@media (min-width: 540px) {
|
|
65
|
-
.rvo-hero__image-container {
|
|
60
|
+
max-block-size: 500px;
|
|
61
|
+
min-block-size: 300px;
|
|
66
62
|
padding-block-end: 0;
|
|
67
63
|
}
|
|
68
64
|
}
|
|
69
65
|
.rvo-hero__image-container--lined::after {
|
|
66
|
+
block-size: 100%;
|
|
70
67
|
border-color: var(--rvo-hero-image-line-border-color);
|
|
71
|
-
border-end-start-radius: var(--rvo-hero-image-line-border-radius);
|
|
72
68
|
border-style: var(--rvo-hero-image-line-border-style);
|
|
73
69
|
border-width: var(--rvo-hero-image-line-border-width);
|
|
70
|
+
border-end-start-radius: var(--rvo-hero-image-line-border-radius);
|
|
74
71
|
content: "";
|
|
75
72
|
display: block;
|
|
76
|
-
|
|
73
|
+
inline-size: 100%;
|
|
77
74
|
inset-block-start: calc(var(--rvo-hero-image-line-inset) - 25%);
|
|
78
75
|
inset-inline-end: var(--rvo-hero-image-line-inset);
|
|
79
76
|
position: absolute;
|
|
80
|
-
width: 100%;
|
|
81
77
|
}
|
|
82
78
|
@media (min-width: 540px) {
|
|
83
79
|
.rvo-hero__image-container--lined::after {
|
|
@@ -86,14 +82,14 @@
|
|
|
86
82
|
}
|
|
87
83
|
|
|
88
84
|
.rvo-hero__image {
|
|
89
|
-
|
|
90
|
-
|
|
85
|
+
block-size: 100%;
|
|
86
|
+
inline-size: 100%;
|
|
87
|
+
min-block-size: 300px;
|
|
91
88
|
object-fit: cover;
|
|
92
|
-
width: 100%;
|
|
93
89
|
}
|
|
94
90
|
|
|
95
91
|
.rvo-hero__custom-image-wrapper img {
|
|
96
|
-
|
|
92
|
+
block-size: 100%;
|
|
93
|
+
inline-size: 100%;
|
|
97
94
|
object-fit: cover;
|
|
98
|
-
width: 100%;
|
|
99
95
|
}
|
package/dist/index.min.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.rvo-hero{border-end-end-radius:var(--rvo-hero-border-end-end-radius);margin-inline-end:auto;margin-inline-start:auto;min-
|
|
1
|
+
.rvo-hero{border-end-end-radius:var(--rvo-hero-border-end-end-radius);margin-inline-end:auto;margin-inline-start:auto;min-block-size: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);inset-block-end:0;max-inline-size: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;overflow:hidden}@media (min-width:540px){.rvo-hero__image-container{max-block-size:500px;min-block-size:300px;padding-block-end:0}}.rvo-hero__image-container--lined:after{block-size:100%;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;inline-size:100%;inset-block-start:calc(var(--rvo-hero-image-line-inset) - 25%);inset-inline-end:var(--rvo-hero-image-line-inset);position:absolute}@media (min-width:540px){.rvo-hero__image-container--lined:after{inset-block-start:var(--rvo-hero-image-line-inset)}}.rvo-hero__image{min-block-size:300px}.rvo-hero__custom-image-wrapper img,.rvo-hero__image{block-size:100%;inline-size:100%;object-fit:cover}
|
package/dist/index.mjs
CHANGED
|
@@ -1 +1 @@
|
|
|
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-
|
|
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-block-size: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);inset-block-end:0;max-inline-size: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;overflow:hidden}@media (min-width:540px){.rvo-hero__image-container{max-block-size:500px;min-block-size:300px;padding-block-end:0}}.rvo-hero__image-container--lined:after{block-size:100%;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;inline-size:100%;inset-block-start:calc(var(--rvo-hero-image-line-inset) - 25%);inset-inline-end:var(--rvo-hero-image-line-inset);position:absolute}@media (min-width:540px){.rvo-hero__image-container--lined:after{inset-block-start:var(--rvo-hero-image-line-inset)}}.rvo-hero__image{min-block-size:300px}.rvo-hero__custom-image-wrapper img,.rvo-hero__image{block-size:100%;inline-size:100%;object-fit:cover}";
|
package/package.json
CHANGED
package/src/index.scss
CHANGED
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
border-end-end-radius: var(--rvo-hero-border-end-end-radius);
|
|
7
7
|
margin-inline-end: auto;
|
|
8
8
|
margin-inline-start: auto;
|
|
9
|
-
min-
|
|
9
|
+
min-block-size: 200px;
|
|
10
10
|
overflow: hidden;
|
|
11
11
|
position: relative;
|
|
12
12
|
|
|
@@ -21,8 +21,8 @@
|
|
|
21
21
|
|
|
22
22
|
@media (min-width: 540px) {
|
|
23
23
|
border-start-end-radius: var(--rvo-hero-box-border-start-end-radius);
|
|
24
|
-
|
|
25
|
-
max-
|
|
24
|
+
inset-block-end: 0;
|
|
25
|
+
max-inline-size: var(--rvo-hero-box-max-width);
|
|
26
26
|
position: absolute;
|
|
27
27
|
z-index: 1;
|
|
28
28
|
}
|
|
@@ -58,30 +58,28 @@
|
|
|
58
58
|
|
|
59
59
|
.rvo-hero__image-container {
|
|
60
60
|
line-height: 0;
|
|
61
|
-
min-height: 300px;
|
|
62
61
|
overflow: hidden;
|
|
63
62
|
|
|
64
63
|
@media (min-width: 540px) {
|
|
65
|
-
max-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
@media (min-width: 540px) {
|
|
64
|
+
max-block-size: 500px;
|
|
65
|
+
min-block-size: 300px;
|
|
69
66
|
padding-block-end: 0;
|
|
70
67
|
}
|
|
71
68
|
|
|
72
69
|
&--lined {
|
|
73
70
|
&::after {
|
|
71
|
+
block-size: 100%;
|
|
74
72
|
border-color: var(--rvo-hero-image-line-border-color);
|
|
75
|
-
border-end-start-radius: var(--rvo-hero-image-line-border-radius);
|
|
76
73
|
border-style: var(--rvo-hero-image-line-border-style);
|
|
77
74
|
border-width: var(--rvo-hero-image-line-border-width);
|
|
75
|
+
/* stylelint-disable-next-line order/properties-alphabetical-order */
|
|
76
|
+
border-end-start-radius: var(--rvo-hero-image-line-border-radius);
|
|
78
77
|
content: "";
|
|
79
78
|
display: block;
|
|
80
|
-
|
|
79
|
+
inline-size: 100%;
|
|
81
80
|
inset-block-start: calc(#{var(--rvo-hero-image-line-inset)} + -25%);
|
|
82
81
|
inset-inline-end: var(--rvo-hero-image-line-inset);
|
|
83
82
|
position: absolute;
|
|
84
|
-
width: 100%;
|
|
85
83
|
|
|
86
84
|
@media (min-width: 540px) {
|
|
87
85
|
inset-block-start: var(--rvo-hero-image-line-inset);
|
|
@@ -91,14 +89,14 @@
|
|
|
91
89
|
}
|
|
92
90
|
|
|
93
91
|
.rvo-hero__image {
|
|
94
|
-
|
|
95
|
-
|
|
92
|
+
block-size: 100%;
|
|
93
|
+
inline-size: 100%;
|
|
94
|
+
min-block-size: 300px;
|
|
96
95
|
object-fit: cover;
|
|
97
|
-
width: 100%;
|
|
98
96
|
}
|
|
99
97
|
|
|
100
98
|
.rvo-hero__custom-image-wrapper img {
|
|
101
|
-
|
|
99
|
+
block-size: 100%;
|
|
100
|
+
inline-size: 100%;
|
|
102
101
|
object-fit: cover;
|
|
103
|
-
width: 100%;
|
|
104
102
|
}
|