@nl-rvo/css-max-width-layout 1.3.2 → 1.4.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.
- package/dist/{index.min.css → max-width-layout.css} +1 -1
- package/dist/max-width-layout.css.map +1 -0
- package/package.json +15 -16
- package/CHANGELOG.md +0 -78
- package/README.mdx +0 -28
- package/design-tokens.json +0 -26
- package/dist/index.css +0 -44
- package/dist/index.mjs +0 -1
- package/dist/index.mjs.d.ts +0 -2
- /package/src/{index.scss → max-width-layout.scss} +0 -0
|
@@ -1 +1 @@
|
|
|
1
|
-
.rvo-max-width-layout{margin-inline-end:auto;margin-inline-start:auto}.rvo-max-width-layout--uncentered{margin-inline-end:0;margin-inline-start:0}.rvo-max-width-layout--sm{inline-size:100%;max-inline-size:var(--rvo-layout-max-width-sm)}.rvo-max-width-layout--md{inline-size:100%;max-inline-size:var(--rvo-layout-max-width-md)}.rvo-max-width-layout--lg{inline-size:100%;max-inline-size:var(--rvo-layout-max-width-lg)}.rvo-max-width-layout-inline-padding--sm{padding-inline-end:var(--rvo-space-sm);padding-inline-start:var(--rvo-space-sm)}.rvo-max-width-layout-inline-padding--md{padding-inline-end:var(--rvo-space-md);padding-inline-start:var(--rvo-space-md)}.rvo-max-width-layout-inline-padding--lg{padding-inline-end:var(--rvo-space-lg);padding-inline-start:var(--rvo-space-lg)}
|
|
1
|
+
.rvo-max-width-layout{margin-inline-end:auto;margin-inline-start:auto}.rvo-max-width-layout--uncentered{margin-inline-end:0;margin-inline-start:0}.rvo-max-width-layout--sm{inline-size:100%;max-inline-size:var(--rvo-layout-max-width-sm)}.rvo-max-width-layout--md{inline-size:100%;max-inline-size:var(--rvo-layout-max-width-md)}.rvo-max-width-layout--lg{inline-size:100%;max-inline-size:var(--rvo-layout-max-width-lg)}.rvo-max-width-layout-inline-padding--sm{padding-inline-end:var(--rvo-space-sm);padding-inline-start:var(--rvo-space-sm)}.rvo-max-width-layout-inline-padding--md{padding-inline-end:var(--rvo-space-md);padding-inline-start:var(--rvo-space-md)}.rvo-max-width-layout-inline-padding--lg{padding-inline-end:var(--rvo-space-lg);padding-inline-start:var(--rvo-space-lg)}/*# sourceMappingURL=max-width-layout.css.map */
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sourceRoot":"","sources":["../src/max-width-layout.scss"],"names":[],"mappings":"AAIA,sBACE,uBACA,yBAGF,kCACE,oBACA,sBAGF,0BACE,iBACA,+CAGF,0BACE,iBACA,+CAGF,0BACE,iBACA,+CAGF,yCACE,uCACA,yCAGF,yCACE,uCACA,yCAGF,yCACE,uCACA","file":"max-width-layout.css"}
|
package/package.json
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
{
|
|
2
|
-
"version": "1.
|
|
2
|
+
"version": "1.4.0",
|
|
3
3
|
"author": "Community for NL Design System",
|
|
4
4
|
"license": "CC0-1.0",
|
|
5
5
|
"name": "@nl-rvo/css-max-width-layout",
|
|
@@ -9,27 +9,26 @@
|
|
|
9
9
|
"css",
|
|
10
10
|
"max-width-layout"
|
|
11
11
|
],
|
|
12
|
+
"repository": {
|
|
13
|
+
"type": "git+ssh",
|
|
14
|
+
"url": "git@github.com:nl-design-system/rvo.git",
|
|
15
|
+
"directory": "components/max-width-layout/style"
|
|
16
|
+
},
|
|
12
17
|
"files": [
|
|
13
|
-
"src/
|
|
14
|
-
"dist/"
|
|
15
|
-
"design-tokens.json",
|
|
16
|
-
"*.md"
|
|
18
|
+
"src/",
|
|
19
|
+
"dist/"
|
|
17
20
|
],
|
|
18
|
-
"
|
|
21
|
+
"exports": {
|
|
22
|
+
".": "./dist/max-width-layout.css",
|
|
23
|
+
"./dist/*": "./dist/*"
|
|
24
|
+
},
|
|
19
25
|
"publishConfig": {
|
|
20
26
|
"access": "public",
|
|
21
27
|
"provenance": true
|
|
22
28
|
},
|
|
23
|
-
"repository": {
|
|
24
|
-
"type": "git+ssh",
|
|
25
|
-
"url": "git@github.com:nl-design-system/rvo.git",
|
|
26
|
-
"directory": "components/max-width-layout"
|
|
27
|
-
},
|
|
28
|
-
"devDependencies": {
|
|
29
|
-
"@nl-rvo/build-utils-css": "0.1.0"
|
|
30
|
-
},
|
|
31
29
|
"scripts": {
|
|
32
|
-
"build": "
|
|
33
|
-
"
|
|
30
|
+
"build": "sass --pkg-importer=node --style=compressed ./src/:./dist/",
|
|
31
|
+
"watch": "sass --pkg-importer=node --style=compressed --watch ./src/:./dist/",
|
|
32
|
+
"clean": "rimraf ./dist/"
|
|
34
33
|
}
|
|
35
34
|
}
|
package/CHANGELOG.md
DELETED
|
@@ -1,78 +0,0 @@
|
|
|
1
|
-
# `@nl-rvo/css-max-width-layout`
|
|
2
|
-
|
|
3
|
-
## 1.3.2
|
|
4
|
-
|
|
5
|
-
### Patch Changes
|
|
6
|
-
|
|
7
|
-
- 084a230: Ensure package is published with provenance
|
|
8
|
-
|
|
9
|
-
## 1.3.1
|
|
10
|
-
|
|
11
|
-
### Patch Changes
|
|
12
|
-
|
|
13
|
-
- 93fdefc: Use CSS Logical properties, to support both `dir=ltr` and `dir=rtl`.
|
|
14
|
-
|
|
15
|
-
## 1.3.0
|
|
16
|
-
|
|
17
|
-
### Minor Changes
|
|
18
|
-
|
|
19
|
-
- fa36e07: Project structure updates
|
|
20
|
-
|
|
21
|
-
- Moved all Storybook stories to the /stories directory.
|
|
22
|
-
- Moved all documentation files to the /docs directory.
|
|
23
|
-
- Removed React components from library-component-react and moved them into this package.
|
|
24
|
-
- Update all .stories imports to the right react package "component-library-react"
|
|
25
|
-
- Fix all Redundant / PascalCase lint warnings for .stories files.
|
|
26
|
-
|
|
27
|
-
## 1.2.5
|
|
28
|
-
|
|
29
|
-
### Patch Changes
|
|
30
|
-
|
|
31
|
-
- 11eb258: Update imports to support storybook v10
|
|
32
|
-
|
|
33
|
-
## 1.2.4
|
|
34
|
-
|
|
35
|
-
### Patch Changes
|
|
36
|
-
|
|
37
|
-
- d9727b9: Added width 100% to layout types and update linked components using this class
|
|
38
|
-
|
|
39
|
-
## 1.2.3
|
|
40
|
-
|
|
41
|
-
### Patch Changes
|
|
42
|
-
|
|
43
|
-
- 8fcf59c: Added width 100% to layout types and update linked components using this class
|
|
44
|
-
|
|
45
|
-
## 1.2.2
|
|
46
|
-
|
|
47
|
-
### Patch Changes
|
|
48
|
-
|
|
49
|
-
- de80995: Made centered content in max-width-layout optional
|
|
50
|
-
|
|
51
|
-
## 1.2.1
|
|
52
|
-
|
|
53
|
-
### Patch Changes
|
|
54
|
-
|
|
55
|
-
- 07b0344: Added min-width to max-width-layout to ensure it fits correctly in other layout containers
|
|
56
|
-
|
|
57
|
-
## 1.2.0
|
|
58
|
-
|
|
59
|
-
### Minor Changes
|
|
60
|
-
|
|
61
|
-
- 0cdf4eb: Remove utrecht-components-css reference and include utrecht css per component when needed
|
|
62
|
-
|
|
63
|
-
## 1.1.0
|
|
64
|
-
|
|
65
|
-
### Minor Changes
|
|
66
|
-
|
|
67
|
-
- c029d6a: Removed grid styling when layout contains progress tracker
|
|
68
|
-
|
|
69
|
-
## 1.0.0
|
|
70
|
-
|
|
71
|
-
### Major Changes
|
|
72
|
-
|
|
73
|
-
- daa0537: Create npm package for each component.
|
|
74
|
-
|
|
75
|
-
## Pre-releases
|
|
76
|
-
|
|
77
|
-
_@nl-rvo/component-library-css@1.0.0-alpha.17_:
|
|
78
|
-
Added component
|
package/README.mdx
DELETED
|
@@ -1,28 +0,0 @@
|
|
|
1
|
-
De max width layout component kadert een vlak af wanneer een bepaalde breedte bereikt wordt.
|
|
2
|
-
|
|
3
|
-
## Wanneer gebruik je max width layout
|
|
4
|
-
|
|
5
|
-
Wanneer je content hebt die niet over de gehele breedte van het scherm getoond mag worden.
|
|
6
|
-
|
|
7
|
-
## Anatomie van het component
|
|
8
|
-
|
|
9
|
-
Het component bestaat uit:
|
|
10
|
-
|
|
11
|
-
- Container
|
|
12
|
-
|
|
13
|
-
## Richtlijnen
|
|
14
|
-
|
|
15
|
-
- Content moet leesbaar blijven en een regel tekst moet daarom tussen de 75 en 100 tekens bevatten. Een max width container kan helpen om de content af te kaderen.
|
|
16
|
-
|
|
17
|
-
## Rijkshuisstijl
|
|
18
|
-
|
|
19
|
-
Er zijn geen richtlijnen vanuit de Rijkshuisstijl betreffende de maximale breedte van content.
|
|
20
|
-
|
|
21
|
-
## Bronnen
|
|
22
|
-
|
|
23
|
-
- <a
|
|
24
|
-
href="https://web.archive.org/web/20220606133257/https://baymard.com/blog/line-length-readability"
|
|
25
|
-
class="rvo-link"
|
|
26
|
-
>
|
|
27
|
-
Readability: The Optimal Line Length - Baymard Institute
|
|
28
|
-
</a>
|
package/design-tokens.json
DELETED
|
@@ -1,26 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"rvo": {
|
|
3
|
-
"layout": {
|
|
4
|
-
"max-width": {
|
|
5
|
-
"sm": {
|
|
6
|
-
"css": {
|
|
7
|
-
"syntax": "<length>",
|
|
8
|
-
"inherits": true
|
|
9
|
-
}
|
|
10
|
-
},
|
|
11
|
-
"md": {
|
|
12
|
-
"css": {
|
|
13
|
-
"syntax": "<length>",
|
|
14
|
-
"inherits": true
|
|
15
|
-
}
|
|
16
|
-
},
|
|
17
|
-
"lg": {
|
|
18
|
-
"css": {
|
|
19
|
-
"syntax": "<length>",
|
|
20
|
-
"inherits": true
|
|
21
|
-
}
|
|
22
|
-
}
|
|
23
|
-
}
|
|
24
|
-
}
|
|
25
|
-
}
|
|
26
|
-
}
|
package/dist/index.css
DELETED
|
@@ -1,44 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @license CC0-1.0
|
|
3
|
-
* Copyright (c) 2021 Community for NL Design System
|
|
4
|
-
*/
|
|
5
|
-
|
|
6
|
-
.rvo-max-width-layout {
|
|
7
|
-
margin-inline-end: auto;
|
|
8
|
-
margin-inline-start: auto;
|
|
9
|
-
}
|
|
10
|
-
|
|
11
|
-
.rvo-max-width-layout--uncentered {
|
|
12
|
-
margin-inline-end: 0;
|
|
13
|
-
margin-inline-start: 0;
|
|
14
|
-
}
|
|
15
|
-
|
|
16
|
-
.rvo-max-width-layout--sm {
|
|
17
|
-
inline-size: 100%;
|
|
18
|
-
max-inline-size: var(--rvo-layout-max-width-sm);
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
.rvo-max-width-layout--md {
|
|
22
|
-
inline-size: 100%;
|
|
23
|
-
max-inline-size: var(--rvo-layout-max-width-md);
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
.rvo-max-width-layout--lg {
|
|
27
|
-
inline-size: 100%;
|
|
28
|
-
max-inline-size: var(--rvo-layout-max-width-lg);
|
|
29
|
-
}
|
|
30
|
-
|
|
31
|
-
.rvo-max-width-layout-inline-padding--sm {
|
|
32
|
-
padding-inline-end: var(--rvo-space-sm);
|
|
33
|
-
padding-inline-start: var(--rvo-space-sm);
|
|
34
|
-
}
|
|
35
|
-
|
|
36
|
-
.rvo-max-width-layout-inline-padding--md {
|
|
37
|
-
padding-inline-end: var(--rvo-space-md);
|
|
38
|
-
padding-inline-start: var(--rvo-space-md);
|
|
39
|
-
}
|
|
40
|
-
|
|
41
|
-
.rvo-max-width-layout-inline-padding--lg {
|
|
42
|
-
padding-inline-end: var(--rvo-space-lg);
|
|
43
|
-
padding-inline-start: var(--rvo-space-lg);
|
|
44
|
-
}
|
package/dist/index.mjs
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export default ".rvo-max-width-layout{margin-inline-end:auto;margin-inline-start:auto}.rvo-max-width-layout--uncentered{margin-inline-end:0;margin-inline-start:0}.rvo-max-width-layout--sm{inline-size:100%;max-inline-size:var(--rvo-layout-max-width-sm)}.rvo-max-width-layout--md{inline-size:100%;max-inline-size:var(--rvo-layout-max-width-md)}.rvo-max-width-layout--lg{inline-size:100%;max-inline-size:var(--rvo-layout-max-width-lg)}.rvo-max-width-layout-inline-padding--sm{padding-inline-end:var(--rvo-space-sm);padding-inline-start:var(--rvo-space-sm)}.rvo-max-width-layout-inline-padding--md{padding-inline-end:var(--rvo-space-md);padding-inline-start:var(--rvo-space-md)}.rvo-max-width-layout-inline-padding--lg{padding-inline-end:var(--rvo-space-lg);padding-inline-start:var(--rvo-space-lg)}";
|
package/dist/index.mjs.d.ts
DELETED
|
File without changes
|