@nl-rvo/css-hero 1.7.1 → 1.7.3

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.
Files changed (6) hide show
  1. package/CHANGELOG.md +13 -0
  2. package/dist/index.css +12 -16
  3. package/dist/index.min.css +1 -1
  4. package/dist/index.mjs +1 -1
  5. package/package.json +1 -1
  6. package/src/index.scss +11 -14
package/CHANGELOG.md CHANGED
@@ -1,5 +1,18 @@
1
1
  # `@nl-rvo/css-hero`
2
2
 
3
+ ## 1.7.3
4
+
5
+ ### Patch Changes
6
+
7
+ - c4973ba: Removed min-height for hero image on mobile
8
+ - c4973ba: removed min-height from hero image container
9
+
10
+ ## 1.7.2
11
+
12
+ ### Patch Changes
13
+
14
+ - e9104b7: Added additional styling to Hero component when on mobile
15
+
3
16
  ## 1.7.1
4
17
 
5
18
  ### Patch 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
- position: absolute;
24
- z-index: 1;
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 {
@@ -48,25 +53,15 @@
48
53
 
49
54
  .rvo-hero__image-container {
50
55
  line-height: 0;
51
- min-height: 300px;
52
56
  overflow: hidden;
53
- padding-block-end: 20%;
54
57
  }
55
58
  @media (min-width: 540px) {
56
59
  .rvo-hero__image-container {
57
60
  max-height: 500px;
58
- }
59
- }
60
- @media (min-width: 540px) {
61
- .rvo-hero__image-container {
61
+ min-height: 300px;
62
62
  padding-block-end: 0;
63
63
  }
64
64
  }
65
- @media (min-width: 780px) {
66
- .rvo-hero__image-container {
67
- border-end-end-radius: var(--rvo-hero-border-end-end-radius);
68
- }
69
- }
70
65
  .rvo-hero__image-container--lined::after {
71
66
  border-color: var(--rvo-hero-image-line-border-color);
72
67
  border-end-start-radius: var(--rvo-hero-image-line-border-radius);
@@ -88,6 +83,7 @@
88
83
 
89
84
  .rvo-hero__image {
90
85
  height: 100%;
86
+ min-height: 300px;
91
87
  object-fit: cover;
92
88
  width: 100%;
93
89
  }
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);border-start-end-radius:var(--rvo-hero-box-border-start-end-radius);bottom:0;margin-block-end:0;max-width:var(--rvo-hero-box-max-width);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);position:absolute;z-index:1}.rvo-hero .rvo-hero__content,.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;padding-block-end:20%}@media (min-width:540px){.rvo-hero__image-container{max-height:500px;padding-block-end:0}}@media (min-width:780px){.rvo-hero__image-container{border-end-end-radius:var(--rvo-hero-border-end-end-radius)}}.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__custom-image-wrapper img,.rvo-hero__image{height:100%;object-fit:cover;width:100%}
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;overflow:hidden}@media (min-width:540px){.rvo-hero__image-container{max-height:500px;min-height:300px;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);border-start-end-radius:var(--rvo-hero-box-border-start-end-radius);bottom:0;margin-block-end:0;max-width:var(--rvo-hero-box-max-width);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);position:absolute;z-index:1}.rvo-hero .rvo-hero__content,.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;padding-block-end:20%}@media (min-width:540px){.rvo-hero__image-container{max-height:500px;padding-block-end:0}}@media (min-width:780px){.rvo-hero__image-container{border-end-end-radius:var(--rvo-hero-border-end-end-radius)}}.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__custom-image-wrapper img,.rvo-hero__image{height:100%;object-fit:cover;width:100%}";
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;overflow:hidden}@media (min-width:540px){.rvo-hero__image-container{max-height:500px;min-height:300px;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
@@ -1,5 +1,5 @@
1
1
  {
2
- "version": "1.7.1",
2
+ "version": "1.7.3",
3
3
  "author": "Community for NL Design System",
4
4
  "license": "CC0-1.0",
5
5
  "name": "@nl-rvo/css-hero",
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
- position: absolute;
24
- z-index: 1;
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,
@@ -54,22 +58,14 @@
54
58
 
55
59
  .rvo-hero__image-container {
56
60
  line-height: 0;
57
- min-height: 300px;
58
61
  overflow: hidden;
59
- padding-block-end: 20%;
60
62
 
61
63
  @media (min-width: 540px) {
62
64
  max-height: 500px;
63
- }
64
-
65
- @media (min-width: 540px) {
65
+ min-height: 300px;
66
66
  padding-block-end: 0;
67
67
  }
68
68
 
69
- @media (min-width: 780px) {
70
- border-end-end-radius: var(--rvo-hero-border-end-end-radius);
71
- }
72
-
73
69
  &--lined {
74
70
  &::after {
75
71
  border-color: var(--rvo-hero-image-line-border-color);
@@ -93,6 +89,7 @@
93
89
 
94
90
  .rvo-hero__image {
95
91
  height: 100%;
92
+ min-height: 300px;
96
93
  object-fit: cover;
97
94
  width: 100%;
98
95
  }