@nl-rvo/css-hero 1.7.3 → 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.
Files changed (6) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/dist/index.css +13 -13
  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 +14 -13
package/CHANGELOG.md CHANGED
@@ -1,5 +1,11 @@
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
+
3
9
  ## 1.7.3
4
10
 
5
11
  ### 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-height: 200px;
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
- bottom: 0;
26
- max-width: var(--rvo-hero-box-max-width);
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
  }
@@ -57,23 +57,23 @@
57
57
  }
58
58
  @media (min-width: 540px) {
59
59
  .rvo-hero__image-container {
60
- max-height: 500px;
61
- min-height: 300px;
60
+ max-block-size: 500px;
61
+ min-block-size: 300px;
62
62
  padding-block-end: 0;
63
63
  }
64
64
  }
65
65
  .rvo-hero__image-container--lined::after {
66
+ block-size: 100%;
66
67
  border-color: var(--rvo-hero-image-line-border-color);
67
- border-end-start-radius: var(--rvo-hero-image-line-border-radius);
68
68
  border-style: var(--rvo-hero-image-line-border-style);
69
69
  border-width: var(--rvo-hero-image-line-border-width);
70
+ border-end-start-radius: var(--rvo-hero-image-line-border-radius);
70
71
  content: "";
71
72
  display: block;
72
- height: 100%;
73
+ inline-size: 100%;
73
74
  inset-block-start: calc(var(--rvo-hero-image-line-inset) - 25%);
74
75
  inset-inline-end: var(--rvo-hero-image-line-inset);
75
76
  position: absolute;
76
- width: 100%;
77
77
  }
78
78
  @media (min-width: 540px) {
79
79
  .rvo-hero__image-container--lined::after {
@@ -82,14 +82,14 @@
82
82
  }
83
83
 
84
84
  .rvo-hero__image {
85
- height: 100%;
86
- min-height: 300px;
85
+ block-size: 100%;
86
+ inline-size: 100%;
87
+ min-block-size: 300px;
87
88
  object-fit: cover;
88
- width: 100%;
89
89
  }
90
90
 
91
91
  .rvo-hero__custom-image-wrapper img {
92
- height: 100%;
92
+ block-size: 100%;
93
+ inline-size: 100%;
93
94
  object-fit: cover;
94
- width: 100%;
95
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-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%}
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-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%}";
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
@@ -1,5 +1,5 @@
1
1
  {
2
- "version": "1.7.3",
2
+ "version": "1.7.4",
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
@@ -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-height: 200px;
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
- bottom: 0;
25
- max-width: var(--rvo-hero-box-max-width);
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
  }
@@ -61,24 +61,25 @@
61
61
  overflow: hidden;
62
62
 
63
63
  @media (min-width: 540px) {
64
- max-height: 500px;
65
- min-height: 300px;
64
+ max-block-size: 500px;
65
+ min-block-size: 300px;
66
66
  padding-block-end: 0;
67
67
  }
68
68
 
69
69
  &--lined {
70
70
  &::after {
71
+ block-size: 100%;
71
72
  border-color: var(--rvo-hero-image-line-border-color);
72
- border-end-start-radius: var(--rvo-hero-image-line-border-radius);
73
73
  border-style: var(--rvo-hero-image-line-border-style);
74
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);
75
77
  content: "";
76
78
  display: block;
77
- height: 100%;
79
+ inline-size: 100%;
78
80
  inset-block-start: calc(#{var(--rvo-hero-image-line-inset)} + -25%);
79
81
  inset-inline-end: var(--rvo-hero-image-line-inset);
80
82
  position: absolute;
81
- width: 100%;
82
83
 
83
84
  @media (min-width: 540px) {
84
85
  inset-block-start: var(--rvo-hero-image-line-inset);
@@ -88,14 +89,14 @@
88
89
  }
89
90
 
90
91
  .rvo-hero__image {
91
- height: 100%;
92
- min-height: 300px;
92
+ block-size: 100%;
93
+ inline-size: 100%;
94
+ min-block-size: 300px;
93
95
  object-fit: cover;
94
- width: 100%;
95
96
  }
96
97
 
97
98
  .rvo-hero__custom-image-wrapper img {
98
- height: 100%;
99
+ block-size: 100%;
100
+ inline-size: 100%;
99
101
  object-fit: cover;
100
- width: 100%;
101
102
  }