@nl-rvo/css-ordered-unordered-list 1.2.2 → 1.3.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 +7 -0
  2. package/dist/index.css +17 -14
  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 +18 -14
package/CHANGELOG.md CHANGED
@@ -1,5 +1,12 @@
1
1
  # `@nl-rvo/css-ordered-unordered-list`
2
2
 
3
+ ## 1.3.0
4
+
5
+ ### Minor Changes
6
+
7
+ - 1ad7499: Align list item markers (ul li) to the top when list content spans multiple lines.
8
+ - 1ad7499: Introduce new css variables to modify ul-icon image and before margin for more flexibility.
9
+
3
10
  ## 1.2.2
4
11
 
5
12
  ### Patch Changes
package/dist/index.css CHANGED
@@ -11,33 +11,36 @@
11
11
  list-style-type: none;
12
12
  }
13
13
 
14
+ .rvo-ul--icon {
15
+ --rvo-list-icon-before-margin: 0.5em;
16
+ --rvo-list-icon-image: var(--rvo-list-icon-option-1-image);
17
+ }
18
+ .rvo-ul--icon-option-2 {
19
+ --rvo-list-icon-image: var(--rvo-list-icon-option-2-image);
20
+ }
21
+ .rvo-ul--icon-option-3 {
22
+ --rvo-list-icon-image: var(--rvo-list-icon-option-3-image);
23
+ }
24
+
14
25
  .rvo-ul--icon li {
15
- align-items: center;
26
+ align-items: start;
16
27
  display: flex;
17
28
  list-style-type: none;
18
29
  }
19
30
  .rvo-ul--icon li::before {
31
+ align-self: flex-start;
32
+ background-image: var(--rvo-list-icon-image);
33
+ background-repeat: no-repeat;
20
34
  background-size: var(--rvo-list-icon-size) var(--rvo-list-icon-size);
21
35
  content: "";
22
- display: inline-block;
36
+ flex-shrink: 0;
23
37
  height: var(--rvo-list-icon-size);
38
+ margin-block-start: var(--rvo-list-icon-before-margin);
24
39
  margin-inline-end: var(--rvo-list-icon-gap);
25
40
  min-width: var(--rvo-list-icon-size);
26
41
  width: var(--rvo-list-icon-size);
27
42
  }
28
43
 
29
- .rvo-ul--icon-option-1 li::before {
30
- background-image: var(--rvo-list-icon-option-1-image);
31
- }
32
-
33
- .rvo-ul--icon-option-2 li::before {
34
- background-image: var(--rvo-list-icon-option-2-image);
35
- }
36
-
37
- .rvo-ul--icon-option-3 li::before {
38
- background-image: var(--rvo-list-icon-option-3-image);
39
- }
40
-
41
44
  .rvo-ol--no-margin,
42
45
  .rvo-ul--no-margin {
43
46
  margin-block-end: 0;
package/dist/index.min.css CHANGED
@@ -1 +1 @@
1
- .rvo-ul{list-style-type:disc}.rvo-ul--icon li,.rvo-ul--none{list-style-type:none}.rvo-ul--icon li{align-items:center;display:flex}.rvo-ul--icon li:before{background-size:var(--rvo-list-icon-size) var(--rvo-list-icon-size);content:"";display:inline-block;height:var(--rvo-list-icon-size);margin-inline-end:var(--rvo-list-icon-gap);min-width:var(--rvo-list-icon-size);width:var(--rvo-list-icon-size)}.rvo-ul--icon-option-1 li:before{background-image:var(--rvo-list-icon-option-1-image)}.rvo-ul--icon-option-2 li:before{background-image:var(--rvo-list-icon-option-2-image)}.rvo-ul--icon-option-3 li:before{background-image:var(--rvo-list-icon-option-3-image)}.rvo-ol--no-margin,.rvo-ul--no-margin{margin-block-end:0;margin-block-start:0}.rvo-ul--no-padding{padding-inline-start:0}.rvo-ol--no-padding,.rvo-ul--no-padding:not(.rvo-ul--icon,.rvo-ul--none){padding-inline-start:var(--rvo-list-zero-padding-offset)}
1
+ .rvo-ul{list-style-type:disc}.rvo-ul--none{list-style-type:none}.rvo-ul--icon{--rvo-list-icon-before-margin:0.5em;--rvo-list-icon-image:var(--rvo-list-icon-option-1-image)}.rvo-ul--icon-option-2{--rvo-list-icon-image:var(--rvo-list-icon-option-2-image)}.rvo-ul--icon-option-3{--rvo-list-icon-image:var(--rvo-list-icon-option-3-image)}.rvo-ul--icon li{align-items:start;display:flex;list-style-type:none}.rvo-ul--icon li:before{align-self:flex-start;background-image:var(--rvo-list-icon-image);background-repeat:no-repeat;background-size:var(--rvo-list-icon-size) var(--rvo-list-icon-size);content:"";flex-shrink:0;height:var(--rvo-list-icon-size);margin-block-start:var(--rvo-list-icon-before-margin);margin-inline-end:var(--rvo-list-icon-gap);min-width:var(--rvo-list-icon-size);width:var(--rvo-list-icon-size)}.rvo-ol--no-margin,.rvo-ul--no-margin{margin-block-end:0;margin-block-start:0}.rvo-ul--no-padding{padding-inline-start:0}.rvo-ol--no-padding,.rvo-ul--no-padding:not(.rvo-ul--icon,.rvo-ul--none){padding-inline-start:var(--rvo-list-zero-padding-offset)}
package/dist/index.mjs CHANGED
@@ -1 +1 @@
1
- export default ".rvo-ul{list-style-type:disc}.rvo-ul--icon li,.rvo-ul--none{list-style-type:none}.rvo-ul--icon li{align-items:center;display:flex}.rvo-ul--icon li:before{background-size:var(--rvo-list-icon-size) var(--rvo-list-icon-size);content:\"\";display:inline-block;height:var(--rvo-list-icon-size);margin-inline-end:var(--rvo-list-icon-gap);min-width:var(--rvo-list-icon-size);width:var(--rvo-list-icon-size)}.rvo-ul--icon-option-1 li:before{background-image:var(--rvo-list-icon-option-1-image)}.rvo-ul--icon-option-2 li:before{background-image:var(--rvo-list-icon-option-2-image)}.rvo-ul--icon-option-3 li:before{background-image:var(--rvo-list-icon-option-3-image)}.rvo-ol--no-margin,.rvo-ul--no-margin{margin-block-end:0;margin-block-start:0}.rvo-ul--no-padding{padding-inline-start:0}.rvo-ol--no-padding,.rvo-ul--no-padding:not(.rvo-ul--icon,.rvo-ul--none){padding-inline-start:var(--rvo-list-zero-padding-offset)}";
1
+ export default ".rvo-ul{list-style-type:disc}.rvo-ul--none{list-style-type:none}.rvo-ul--icon{--rvo-list-icon-before-margin:0.5em;--rvo-list-icon-image:var(--rvo-list-icon-option-1-image)}.rvo-ul--icon-option-2{--rvo-list-icon-image:var(--rvo-list-icon-option-2-image)}.rvo-ul--icon-option-3{--rvo-list-icon-image:var(--rvo-list-icon-option-3-image)}.rvo-ul--icon li{align-items:start;display:flex;list-style-type:none}.rvo-ul--icon li:before{align-self:flex-start;background-image:var(--rvo-list-icon-image);background-repeat:no-repeat;background-size:var(--rvo-list-icon-size) var(--rvo-list-icon-size);content:\"\";flex-shrink:0;height:var(--rvo-list-icon-size);margin-block-start:var(--rvo-list-icon-before-margin);margin-inline-end:var(--rvo-list-icon-gap);min-width:var(--rvo-list-icon-size);width:var(--rvo-list-icon-size)}.rvo-ol--no-margin,.rvo-ul--no-margin{margin-block-end:0;margin-block-start:0}.rvo-ul--no-padding{padding-inline-start:0}.rvo-ol--no-padding,.rvo-ul--no-padding:not(.rvo-ul--icon,.rvo-ul--none){padding-inline-start:var(--rvo-list-zero-padding-offset)}";
package/package.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "version": "1.2.2",
2
+ "version": "1.3.0",
3
3
  "author": "Community for NL Design System",
4
4
  "license": "CC0-1.0",
5
5
  "name": "@nl-rvo/css-ordered-unordered-list",
package/src/index.scss CHANGED
@@ -11,34 +11,38 @@
11
11
  list-style-type: none;
12
12
  }
13
13
 
14
+ .rvo-ul--icon {
15
+ --rvo-list-icon-before-margin: 0.5em;
16
+ --rvo-list-icon-image: var(--rvo-list-icon-option-1-image);
17
+
18
+ &-option-2 {
19
+ --rvo-list-icon-image: var(--rvo-list-icon-option-2-image);
20
+ }
21
+ &-option-3 {
22
+ --rvo-list-icon-image: var(--rvo-list-icon-option-3-image);
23
+ }
24
+ }
25
+
14
26
  .rvo-ul--icon li {
15
- align-items: center;
27
+ align-items: start;
16
28
  display: flex;
17
29
  list-style-type: none;
18
30
 
19
31
  &::before {
32
+ align-self: flex-start;
33
+ background-image: var(--rvo-list-icon-image);
34
+ background-repeat: no-repeat;
20
35
  background-size: var(--rvo-list-icon-size) var(--rvo-list-icon-size);
21
36
  content: "";
22
- display: inline-block;
37
+ flex-shrink: 0;
23
38
  height: var(--rvo-list-icon-size);
39
+ margin-block-start: var(--rvo-list-icon-before-margin);
24
40
  margin-inline-end: var(--rvo-list-icon-gap);
25
41
  min-width: var(--rvo-list-icon-size);
26
42
  width: var(--rvo-list-icon-size);
27
43
  }
28
44
  }
29
45
 
30
- .rvo-ul--icon-option-1 li::before {
31
- background-image: var(--rvo-list-icon-option-1-image);
32
- }
33
-
34
- .rvo-ul--icon-option-2 li::before {
35
- background-image: var(--rvo-list-icon-option-2-image);
36
- }
37
-
38
- .rvo-ul--icon-option-3 li::before {
39
- background-image: var(--rvo-list-icon-option-3-image);
40
- }
41
-
42
46
  .rvo-ol--no-margin,
43
47
  .rvo-ul--no-margin {
44
48
  margin-block-end: 0;