@nl-rvo/css-hero 1.5.1 → 1.6.0

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 +6 -0
  2. package/dist/index.css +25 -0
  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 +34 -0
package/CHANGELOG.md CHANGED
@@ -1,5 +1,11 @@
1
1
  # `@nl-rvo/css-hero`
2
2
 
3
+ ## 1.6.0
4
+
5
+ ### Minor Changes
6
+
7
+ - a8c9e6f: Added two new parameter; kind and showLine. With this you can change the appearance of the Hero Component. Only kind currently available is 'lichtblauw'
8
+
3
9
  ## 1.5.1
4
10
 
5
11
  ### Patch Changes
package/dist/index.css CHANGED
@@ -33,6 +33,13 @@
33
33
  font-weight: var(--rvo-hero-subtitle-font-weight);
34
34
  line-height: var(--rvo-hero-subtitle-line-height);
35
35
  }
36
+ .rvo-hero--lichtblauw .rvo-hero__content {
37
+ background-color: var(--rvo-hero-kind-lichtblauw-background-color);
38
+ color: var(--rvo-hero-kind-lichtblauw-color);
39
+ }
40
+ .rvo-hero--lichtblauw .rvo-hero__title, .rvo-hero--lichtblauw .rvo-hero__subtitle {
41
+ color: var(--rvo-hero-kind-lichtblauw-color);
42
+ }
36
43
 
37
44
  .rvo-hero__image-container {
38
45
  line-height: 0;
@@ -55,6 +62,24 @@
55
62
  border-end-end-radius: var(--rvo-hero-border-end-end-radius);
56
63
  }
57
64
  }
65
+ .rvo-hero__image-container--lined::after {
66
+ border-color: var(--rvo-hero-image-line-border-color);
67
+ border-end-start-radius: var(--rvo-hero-image-line-border-radius);
68
+ border-style: var(--rvo-hero-image-line-border-style);
69
+ border-width: var(--rvo-hero-image-line-border-width);
70
+ content: "";
71
+ display: block;
72
+ height: 100%;
73
+ inset-block-start: calc(var(--rvo-hero-image-line-inset) - 25%);
74
+ inset-inline-end: var(--rvo-hero-image-line-inset);
75
+ position: absolute;
76
+ width: 100%;
77
+ }
78
+ @media (min-width: 540px) {
79
+ .rvo-hero__image-container--lined::after {
80
+ inset-block-start: var(--rvo-hero-image-line-inset);
81
+ }
82
+ }
58
83
 
59
84
  .rvo-hero__image {
60
85
  height: 100%;
package/dist/index.min.css CHANGED
@@ -1 +1 @@
1
- .rvo-hero{margin-inline-end:auto;margin-inline-start:auto;min-height:200px;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__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__custom-image-wrapper img,.rvo-hero__image{height:100%;object-fit:cover;width:100%}
1
+ .rvo-hero{margin-inline-end:auto;margin-inline-start:auto;min-height:200px;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--lichtblauw .rvo-hero__content{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%}
package/dist/index.mjs CHANGED
@@ -1 +1 @@
1
- export default ".rvo-hero{margin-inline-end:auto;margin-inline-start:auto;min-height:200px;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__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__custom-image-wrapper img,.rvo-hero__image{height:100%;object-fit:cover;width:100%}";
1
+ export default ".rvo-hero{margin-inline-end:auto;margin-inline-start:auto;min-height:200px;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--lichtblauw .rvo-hero__content{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%}";
package/package.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "version": "1.5.1",
2
+ "version": "1.6.0",
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
@@ -35,6 +35,20 @@
35
35
  font-weight: var(--rvo-hero-subtitle-font-weight);
36
36
  line-height: var(--rvo-hero-subtitle-line-height);
37
37
  }
38
+
39
+ &--lichtblauw {
40
+ .rvo-hero {
41
+ &__content {
42
+ background-color: var(--rvo-hero-kind-lichtblauw-background-color);
43
+ color: var(--rvo-hero-kind-lichtblauw-color);
44
+ }
45
+
46
+ &__title,
47
+ &__subtitle {
48
+ color: var(--rvo-hero-kind-lichtblauw-color);
49
+ }
50
+ }
51
+ }
38
52
  }
39
53
 
40
54
  .rvo-hero__image-container {
@@ -54,6 +68,26 @@
54
68
  @media (min-width: 780px) {
55
69
  border-end-end-radius: var(--rvo-hero-border-end-end-radius);
56
70
  }
71
+
72
+ &--lined {
73
+ &::after {
74
+ border-color: var(--rvo-hero-image-line-border-color);
75
+ border-end-start-radius: var(--rvo-hero-image-line-border-radius);
76
+ border-style: var(--rvo-hero-image-line-border-style);
77
+ border-width: var(--rvo-hero-image-line-border-width);
78
+ content: "";
79
+ display: block;
80
+ height: 100%;
81
+ inset-block-start: calc(#{var(--rvo-hero-image-line-inset)} + -25%);
82
+ inset-inline-end: var(--rvo-hero-image-line-inset);
83
+ position: absolute;
84
+ width: 100%;
85
+
86
+ @media (min-width: 540px) {
87
+ inset-block-start: var(--rvo-hero-image-line-inset);
88
+ }
89
+ }
90
+ }
57
91
  }
58
92
 
59
93
  .rvo-hero__image {